@import "typography.css";
@import "pearl-nav.css";

:not(p) {
  &, &::before, &::after { box-sizing: border-box; margin: 0; padding: 0; }
}

a {
  color: inherit;
}

:root {
  --background-position: 30%;
  --accent: #990a2c;
  --accent-dark: #e50f42;
  --white: #ffffff;

  --title: var(--accent);

  --glass-bg: rgba(224, 224, 224, 0.8);
  --glass-bg-opaque: rgba(224, 224, 224, 0.9);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(20px);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

  --line: rgba(0, 0, 0, 0.2);
  --muted: rgba(73, 73, 73, 0.6);

  /* Ankersprünge (Perlenkette wie auch #hash-Links) unter der fixierten
  Haupt-Navigationsleiste absetzen, statt die Überschrift dahinterzuschieben. */
  scroll-padding-top: 6rem;

  font-family: 'Ubuntu', sans-serif;

  font-size: 2.1vmin;
  color: #494949;
  font-weight: 300;

  padding: 0;
  margin: 0;

  body {
    padding: 0;
    margin: 0;

    em {
      font-style: normal;
      color: var(--title);
    }

    nav#main-nav {
      position: fixed;
      top: 0.5rem;
      right: 0;
      left: 0;
      z-index: 999;

      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: .2rem 2rem;

      background: var(--glass-bg-opaque);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border);

      box-shadow: 0 3px 8px rgba(0,0,0,0.2);

      .nav-logo-img {
        width: 11vw;
        height: auto;
        display: block;
        padding: 5px 0;
      }

      .nav-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .nav-cta {
        display: flex;
        align-items: center;
        gap: 0.5em;

        font-family: 'Ubuntu', sans-serif;
        font-weight: 500;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        color: var(--accent);
        border: 1px solid var(--accent);
        padding: 0.5rem 1.1rem;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.3s ease;
        border-radius: 50px;

        &:hover {
          background: var(--accent);
          color: var(--white);
          box-shadow: 0 0 8px rgba(152, 0, 46, 0.3);
        }

        svg {
          height: 1.2em;
        }
      }

      .nav-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;

        width: 2.2rem;
        height: 2.2rem;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;

        span {
          display: block;
          width: 1.4rem;
          height: 2px;
          background: var(--accent);
          border-radius: 2px;
          transition: transform 0.25s ease, opacity 0.25s ease;
        }
      }

      &.is-open .nav-toggle {
        span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        span:nth-child(2) { opacity: 0; }
        span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
      }

      .nav-links .spacer {
        border-width: 0 1px 1px 0;
        border-color: rgba(0, 32, 64, .2);
        border-style: solid;
        width: 1.8em;
        height: 1.8em;
        rotate: -45deg;
        font-size: 130%;
        box-shadow: inset -1px -1px white;
        margin-left: -1.6em;
      }

      .nav-links {
        align-items: center;

        li em {
          font-weight: bold;
          font-size: 130%;
          color: inherit;

          .brand-font {
            font-size: 140%;
            margin-right: 0.1em;
          }
        }
      }

      ul {
        display: flex;
        gap: 2rem;
        list-style: none;

        .nav-li-extra {
          display: none;
        }

        li a {
          font-weight: 300;
          font-size: 0.85rem;
          letter-spacing: 0.05em;
          color: inherit;
          text-decoration: none;
          white-space: nowrap;
          transition: color 0.2s;

          &:hover {
            color: var(--accent);
          }

          &.is-current {
            color: var(--accent);
          }
        }
      }
    }

    section {
      padding: 8vh 20vw;
      margin: 0;
      box-sizing: border-box;

      &:first-of-type {        
        padding-top: 20vh;
      }

      &.accent {
        --line: rgba(255, 255, 255, 0.2);
        --title: var(--white);
        --muted: rgba(255, 255, 255, 0.6);

        background-color: var(--accent);
        color: var(--white);
      }

      &.dark {
        --line: rgba(255, 255, 255, 0.2);
        --title: var(--white);
        --muted: rgba(255, 255, 255, 0.6);

        background-color: #333333;
        color: var(--white);
      }

      &.very-dark {
        --line: rgba(255, 255, 255, 0.2);
        --title: var(--white);
        --muted: rgba(255, 255, 255, 0.6);

        background-color: #222222;
        color: var(--white);
      }

      .inner {
        &.dual {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8vw;
        }

        img {
          height: auto;
          max-width: 100%;
          max-height: 60vh;
          object-fit: contain;
        }

        em {
          font-weight: 400;
        }
      }
    }
  }

  .kenndaten {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;

    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-right: none;
    border-radius: 16px 0 0 16px;

    box-shadow: -5px 5px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    padding: 0.5em 0;

    font-size: 85%;

    /* Fester (groß genug gewählter) Startwert, damit max-width beim
    Ein-/Ausklappen sauber animieren kann (von/zu "auto" geht das nicht). */
    max-width: 320px;
    transition: max-width 0.25s ease;


    .kenn-item {
      padding: 0.8em 1em;
      border-bottom:1px solid #bfbfbf;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;

      .kenn-num {
        font-size: 1.8em;
        font-weight: 400;
        color: var(--accent);
        line-height: 1;
      }

      .kenn-label {
        font-size: 0.75em;
        letter-spacing: 0.02em;
        color: var(--muted);
        text-align: center;
        max-width: 100px;
        line-height: 1.2;
      }
    }

    .kenn-btns {
      display: flex;
      flex-direction: column;
      padding: 0.5rem;
      gap: 0.2rem;

      .kenn-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.8em;
        font-size: 0.85em;
        letter-spacing: 0.02em;
        color: var(--muted);
        text-decoration: none;
        padding: 0.6em 0.8em;
        border-radius: 50px;
        transition: all 0.2s ease;
        border: 1px solid transparent;

        svg {
          width: 18px;
          height: 18px;
          stroke: var(--accent);
          flex-shrink: 0;
          transition: transform 0.2s ease;
        }

        &:hover {
          background-color: var(--accent);
          color: var(--white);
          box-shadow: 0 0 8px rgba(152, 0, 46, 0.3);

          svg {
            stroke: var(--white);
          }
        }
      }
    }

    /* Panel ein-/ausklappbar; den eingeklappten Zustand merkt sich
    js/script.js in localStorage. */
    .kenn-toggle {
      appearance: none;
      -webkit-appearance: none;
      border: none;
      background: transparent;
      width: 100%;
      padding: 0.45em;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      cursor: pointer;

      &::before {
        content: '';
        width: 0.5em;
        height: 0.5em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        /* zeigt nach rechts = einklappen */
        transform: rotate(-45deg);
        transition: transform 0.2s ease;
      }

      &:hover::before {
        opacity: 0.7;
      }
    }

    .kenn-body {
      display: flex;
      flex-direction: column;
      /* eigene Breite, unabhängig von max-width des Containers, damit
      der (unsichtbare) Inhalt im eingeklappten Zustand nicht umbricht
      und dadurch Höhe gewinnt. */
      width: max-content;
    }

    /* visibility statt display:none, damit die Box ihre volle Höhe
    behält und beim Ein-/Ausklappen nicht springt; die Breite fährt
    stattdessen per max-width zur Kante zusammen. */
    &.is-collapsed {
      max-width: 2.6em;
      overflow: hidden;

      .kenn-body {
        visibility: hidden;
        pointer-events: none;
      }

      .kenn-toggle::before {
        /* zeigt nach links = ausklappen */
        transform: rotate(135deg);
      }
    }
  }

  footer {
    padding: 4vh 4vw;
    background: #111111; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; gap: 1.5rem;
  }
  .footer-logo { font-weight: 300; letter-spacing: 0.02em; color: var(--white); }
  .footer-links { display: flex; gap: 2.5rem; list-style: none; flex-wrap: wrap; }
  .footer-links a { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
  .footer-links a:hover { color: var(--white); }
  .footer-copy { font-size: 0.7rem; color: rgba(255,255,255,0.3); }

}

.sec-label { 
  font-size: 0.68rem; 
  letter-spacing: 0.22em; 
  text-transform: uppercase; 
  margin-bottom: 0.75rem; 
}

.sec-title { 
  font-weight: 300; 
  color: var(--title);
  line-height: 1.1; 
  margin-bottom: 1.25rem;
}

h1.sec-title,
h2.sec-title {
  font-size: 3rem;
}

h3.sec-title {
  font-size: 150%;
}

/* Überschrift mit vorangestelltem Icon-Badge (rundes Icon in Akzentfarbe).
Markup: <div class="sec-title-icon">
<span class="sec-title-icon-badge" style="--icon: url('…')" aria-hidden="true"></span>
<h3 class="sec-title">…</h3>
</div> */
.sec-title-icon {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.25rem;

  .sec-title {
    margin-bottom: 0;
  }
}

.sec-title-icon-badge {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;

  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--accent);

  &::before {
    content: "";
    width: 75%;
    height: 75%;

    background-color: #fff;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }
}


p {
  text-align: justify;
}

/* Zweispaltiger Abschnittsinhalt: Fließtext (3fr) neben Bild (2fr). Die
Überschrift steht darüber, außerhalb dieses Grids. */
.sec-sub-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  gap: 4vw;

  img {
    width: 100%;
    height: auto;
    border-radius: 0.4em;
  }

  &.inverted {
    grid-template-columns: 2fr 3fr;
  }

  /* Variante ohne Fließtext: nur ein Bild, das die volle Breite nutzt
  statt in die 3fr-Textspalte gepresst zu werden. */
  &.single {
    grid-template-columns: 1fr;
  }

  &.equal {
    grid-template-columns: 1fr 1fr;
  }

  &.triple {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2vw;
  }
}

.btn-submit {
  width: 100%;
  background: var(--white);
  color: var(--accent);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

ul.checklist {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.3em 0;

    &:before {
      content: '';
      display: inline-block;
      width: 1.2em;
      height: 1em;
      flex-shrink: 0;

      background-color: var(--accent);
      -webkit-mask: url(../img/check.svg);
      mask: url(../img/check.svg);
      mask-position: center;
      mask-size: contain;
      mask-repeat: no-repeat;
    }
  }
}

section.dark, section.very-dark {
  ul.checklist li:before {
    background-color: var(--accent-dark);
  }
}

/* Key-Benefits: Aufzählung mit Häkchen und fließendem Erläuterungstext. Wie
ul.checklist, aber mehrzeilig mit hervorgehobenem <strong>-Lead. */
ul.benefit-list {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;

  li {
    position: relative;
    padding-left: 1.9em;
    line-height: 1.5;
    text-align: justify;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.15em;
      width: 1.2em;
      height: 1em;

      background-color: var(--accent);
      -webkit-mask: url(../img/check.svg) center / contain no-repeat;
      mask: url(../img/check.svg) center / contain no-repeat;
    }

    strong {
      font-weight: 500;
      color: var(--title);
    }
  }
}

.accent ul.benefit-list li:before,
.dark ul.benefit-list li:before,
.very-dark ul.benefit-list li:before {
  background-color: var(--white);
}

/* Einfache Aufzählung mit rundem Punkt statt Häkchen, sonst wie
ul.benefit-list (mehrzeilig, fließender Text, hervorgehobener <strong>-Lead). */
ul.bullet-list {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;

  li {
    position: relative;
    padding-left: 1.4em;
    line-height: 1.5;

    &:before {
      content: '';
      position: absolute;
      left: 0.2em;
      top: 0.65em;
      width: 0.4em;
      height: 0.4em;
      border-radius: 50%;

      background-color: var(--accent);
    }

    strong {
      font-weight: 500;
      color: var(--title);
    }
  }
}

.accent ul.bullet-list li:before,
.dark ul.bullet-list li:before,
.very-dark ul.bullet-list li:before {
  background-color: var(--white);
}

section#kontakt {
  padding-top: 8vh;

  .inner {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 6rem;
    align-items: start;

    .kontakt-rows {
      margin-top: 2.5rem;
      display: flex;
      flex-direction: column;
    }

    .k-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.9rem 0;
      border-bottom: 1px solid var(--line);
      font-size: 0.8rem;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;

      &:first-child {
        border-top: 1px solid var(--line);
      }

      .k-ico {
        width: 38px;
        height: 38px;
        background: rgba(255,255,255,0.05);
        border: 1px solid var(--glass-border);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        svg, img {
          width: 18px;
          height: 18px;
          stroke: var(--white);
          stroke-width: 1.5;
          fill: none;
        }
      }
    }

    #contact-form {
      .form-honeypot {
        position: absolute;
        left: -9999px;
        top: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }

      .form-group {
        margin-bottom: 1.25rem;

        .form-label {
          display: block;
          font-weight: 500;
          font-size: 0.72rem;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--muted);
          margin-bottom: 0.5rem;
        }

        .form-input, .form-textarea, .form-select {
          width: 100%;
          background: rgba(0,0,0,0.2);
          border: 1px solid rgba(255,255,255,0.15);
          color: var(--white);
          font-family: 'Carlito', sans-serif;
          font-size: 0.95rem;
          padding: 0.85rem 1rem;
          outline: none;
          appearance: none;
          border-radius: 8px;
          transition: border-color 0.3s, background 0.3s;
        }

        .form-textarea {
          height: 10em;
        }
      }

      #form-success {
        display: none;
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid var(--accent);
        border-radius: 8px;
        color: #fff;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        background: rgba(211,47,47,0.2);
        backdrop-filter: blur(5px);

        &.is-visible {
          display: block;
        }
      }

      ::placeholder {
        opacity: 0.5;
        color: var(--white);
      }
    }
  }
}

.brand-font {
  font-family: 'ST Microsquare Ex', 'Ubuntu', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* ==========================================================================
Responsive: Tablet/Mobil ab 900px. Navigation wird zum Hamburger-Dropdown,
Sections bekommen schmalere Seitenränder, zweispaltige Layouts fallen auf
eine Spalte zurück. Seitenspezifische Anpassungen liegen in css/<page>.css. */
@media (max-width: 1600px) {
  :root {
    font-size: clamp(15px, 2.4vw, 19px);

    body {
      nav#main-nav {
        .nav-links .spacer {
          display: none;
        }
        
        .nav-cta span {
          display: none;
        }

        .nav-cta {
          padding: 0.75rem;

          svg {
            height: 1.4em;
          }
        }
      }
    }
  }
}

@media (max-width: 1280px) {
  :root {
    font-size: clamp(15px, 2.4vw, 19px);

    body {
      nav#main-nav {
        padding: 0.5rem 1.2rem;

        .nav-logo-img {
          width: 34vw;
          max-width: 150px;
        }

        .nav-links {
          /* position: absolute statt fixed + fester top-Wert: nav#main-nav
          ist bereits position: fixed und damit der Containing Block, dadurch
          sitzt das Dropdown immer exakt an dessen Unterkante - unabhängig
          von der tatsächlichen Navbar-Höhe, die sich je nach Breakpoint durch
          die wechselnde Root-Schriftgröße (siehe @media 1280px/600px) leicht
          unterscheidet und mit einem festen top-Wert zu einem sichtbaren
          Überlapp-/Lücken-Rand führen konnte. */
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          z-index: 998;

          flex-direction: column;
          gap: 0;
          padding: 0.5rem 0;

          /* Höhere Deckkraft als --glass-bg-opaque: das Dropdown deckt hier
          auch sehr kontrastreiche Inhalte ab (rote CTA-Flächen, Fotos), bei
          denen die üblichen 10% Transparenz schon sichtbar durchscheinen -
          und manche Mobilbrowser wenden backdrop-filter auf große, fixierte
          Elemente ohnehin nicht zuverlässig an. */
          background: rgba(224, 224, 224, 0.97);
          backdrop-filter: var(--glass-blur);
          -webkit-backdrop-filter: var(--glass-blur);
          border-bottom: 1px solid var(--glass-border);
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);

          opacity: 0;
          transform: translateY(-8%);
          pointer-events: none;
          transition: opacity 0.2s ease, transform 0.2s ease;

          li {
            width: 100%;

            a {
              display: block;
              padding: 0.9rem 1.5rem;
              font-size: 0.95rem;
            }
          }

          .nav-li-extra {
            display: block;
          }

          li:not(.nav-li-extra) + .nav-li-extra {
            border-top: 1px solid var(--glass-border);
            margin-top: 0.4rem;
            padding-top: 0.4rem;
          }
        }

        .nav-toggle {
          display: flex;
        }

        &.is-open .nav-links {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }
      }

      section {
        padding: 8vh 6vw;

        &:first-of-type {
          padding-top: 15vh;
        }

        .inner.dual {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
      }
    }
  }

  h1.sec-title,
  h2.sec-title {
    font-size: 2.1rem;
  }

  .sec-sub-body,
  .sec-sub-body.inverted {
    grid-template-columns: 1fr;
    gap: 2rem;

    img {
      order: -1;
    }
  }

  /* Auf Mobil komplett ausgeblendet; die Links stehen stattdessen im
  Hamburger-Menü (siehe .nav-li-extra in header.html/nav#main-nav).
  Selektor als ":root .kenndaten" statt nur ".kenndaten", weil die
  Ursprungsregel selbst in :root verschachtelt ist (höhere Spezifität). */
  :root .kenndaten {
    display: none;
  }

  section#kontakt .inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  section#kontakt .inner #contact-form .form-row {
    grid-template-columns: 1fr;
  }

  :root footer {
    justify-content: center;
    text-align: center;
  }
}

/* Handy-Breite: feste Basisschriftgröße statt vw/vmin-Skalierung, damit
Text unabhängig vom Seitenverhältnis lesbar bleibt. */
@media (max-width: 600px) {
  :root {
    font-size: 16px;
  }

  h1.sec-title,
  h2.sec-title {
    font-size: 1.7rem;
  }
}