/* ==========================================================================
   COMPONENTS — Navigation, Buttons, Cards, Datenzeilen, Slider, Formulare, Footer
   Maße und Zustände exakt nach Spezifikation Abschnitt 04–06
   ========================================================================== */

/* ==========================================================================
   1 · NAVIGATION (Spezifikation 04)
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: calc(100% - 96px);
  max-width: 1240px;
  margin: 24px auto 0;
  min-height: var(--nav-height);
  padding: 0 10px 0 22px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-inset);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition:
    min-height var(--dur-nav) var(--ease-out),
    box-shadow var(--dur-nav) var(--ease-out);
}

.site-nav.is-scrolled {
  min-height: var(--nav-height-compact);
  box-shadow: var(--shadow-nav);
}

/* Marke links, Links mittig, Aktionen rechts.
   Die mittlere Gruppe ist absolut zentriert, damit unterschiedlich breite
   Seitengruppen sie nicht aus der Mitte drücken. */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -.02em;
  flex: 0 0 auto;
}

/* Die Wortmarke aus dem Logo-Ordner, als Maske eingesetzt —
   dadurch nimmt sie jede Textfarbe an und bleibt bei jeder Größe scharf. */
.nav__mark {
  /* Seitenverhältnis der Wortmarke: 834 × 227, also rund 3,67 : 1.
     Bei 24 px Höhe ergibt das 88 px Breite. Die Marke ist damit das größte
     Element in der Leiste — sie soll das erste sein, was man sieht. */
  width: 88px;
  height: 24px;
  flex: 0 0 88px;
  background: currentColor;
  -webkit-mask: url("../assets/img/logo-maia.svg") no-repeat center / contain;
  mask: url("../assets/img/logo-maia.svg") no-repeat center / contain;
}
.nav__name {
  padding-inline-start: 13px;
  border-inline-start: 1px solid var(--color-line);
}

.nav__group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav__group--main {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav__group--end { margin-inline-start: auto; gap: 8px; }

.nav__link {
  padding: 11px 15px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--color-ink);
  transition: background-color var(--dur-hover) var(--ease-out);
}
.nav__link:hover { background: rgba(23, 63, 73, .07); }
.nav__link[aria-current="page"] { background: rgba(23, 63, 73, .1); }

/* „Es eilt?" ist kein Menüpunkt, sondern ein Notausgang. Als getönte Kapsel
   mit Signalpunkt liest es sich als Handlung, ohne dem Termin-Button die
   Aufmerksamkeit zu nehmen — der bleibt der einzige gefüllte CTA. */
.nav__link--accent {
  display: inline-flex;
  align-items: center;
  color: var(--color-coral-ink);
  background: rgba(255, 90, 54, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 54, .3);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}
.nav__link--accent::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-inline-end: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: urgentPulse 2.6s var(--ease-out) infinite;
}
/* Auf der vollen Coralfläche steht Tinte, nicht Weiß: Weiß auf Coral erreicht
   nur 3,1 : 1, Tinte auf Coral 6,0 : 1. */
.nav__link--accent:hover,
.nav__link--accent[aria-current="page"] {
  background: var(--color-coral);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-coral);
}

@keyframes urgentPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__link--accent::before { animation: none; }
}

/* --- Dropdown ------------------------------------------------------------ */

.nav__has-drop { position: relative; }

.nav__link--drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__chev { transition: transform var(--dur-card) var(--ease-out); }
.nav__link--drop[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__link--drop[aria-expanded="true"] { background: rgba(23, 63, 73, .1); }

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 336px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-card) var(--ease-out),
    transform var(--dur-card) var(--ease-out),
    visibility 0s linear var(--dur-card);
}
[dir="rtl"] .dropdown { transform: translateX(50%) translateY(-6px); }

.nav__has-drop.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s, 0s, 0s;
}
[dir="rtl"] .nav__has-drop.is-open .dropdown { transform: translateX(50%) translateY(0); }

/* Unsichtbare Brücke, damit der Mauszeiger die Lücke queren kann,
   ohne dass das Menü zuklappt. */
.nav__has-drop::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline: 0;
  height: 16px;
}

.dropdown__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 14px;
  border-radius: var(--radius-control);
  transition: background-color var(--dur-hover) var(--ease-out);
}
.dropdown__item:hover { background: var(--color-cloud); }
.dropdown__item b {
  display: block;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.015em;
  margin-bottom: 3px;
}
.dropdown__item em {
  display: block;
  font-style: normal;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-muted);
}

.dropdown__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-ice);
  color: var(--color-petrol);
  transition: background-color var(--dur-hover) var(--ease-out);
}
.dropdown__item:hover .dropdown__icon { background: var(--color-lime); color: var(--color-ink); }

.dropdown__all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  font-weight: 650;
}
.dropdown__all svg { transition: transform var(--dur-arrow) var(--ease-out); }
.dropdown__all:hover svg { transform: translateX(4px); }
[dir="rtl"] .dropdown__all svg { scale: -1 1; }

/* --- Mobiles Accordion --------------------------------------------------- */

.nav__acc .nav__link--drop { width: 100%; justify-content: space-between; }

.nav__accpanel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-card) var(--ease-out);
}
.nav__acc.is-open .nav__accpanel { grid-template-rows: 1fr; }
/* Genau ein Kind — sonst gilt die 0fr-Regel nur für die erste Zeile
   und die restlichen Einträge bleiben stehen. */
.nav__accpanel > * { min-height: 0; overflow: hidden; }

.nav__sublink {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding-inline: 30px 14px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  color: var(--color-muted);
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.nav__sublink:hover { background: var(--color-cloud); color: var(--color-ink); }

/* Sprachumschalter */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(23, 63, 73, .07);
}

.lang__btn {
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--color-muted);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}
.lang__btn:hover { color: var(--color-ink); }
.lang__btn[aria-pressed="true"] {
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(15, 38, 44, .12);
}

/* Mobile-Menübutton */
/* Flex-Spalte statt Grid: In einem Grid mit fester Höhe dehnen sich die
   Zeilen auf die volle Höhe, die drei Striche standen dadurch 14,3 px statt
   6,5 px auseinander — und das Kreuz ging beim Öffnen nicht zu. */
.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
}

.nav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--dur-nav) var(--ease-out),
              opacity 140ms var(--ease-out);
}
.nav__toggle span + span { margin-top: 5px; }

/* Die drei Striche sind 1,5 px hoch mit 5 px Abstand, ihre Mitten liegen also
   6,5 px auseinander. Genau diesen Weg müssen der obere und der untere Strich
   zurücklegen, um sich in der Mitte zum Kreuz zu treffen. */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile-Overlay: Paper-Fläche unter der Navigation, kein Fullscreen-Blackout */
.nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-float);
}
.nav__panel.is-open { display: flex; }

.nav__panel .nav__link {
  min-height: 52px;
  display: flex;
  align-items: center;
  font-size: 16px;
}

/* Zwischen 1200 und 1379 px wird es eng: Marke plus Name plus Menü plus
   Aktionen brauchen mehr Platz, als die Leiste hat. Statt den Namen zu
   streichen, rückt das Menü enger zusammen — vier Pixel Polsterung je Seite
   und Wortabstand reichen aus. Die Schriftgröße bleibt unangetastet. */
@media (min-width: 1200px) and (max-width: 1379px) {
  .nav__link { padding-inline: 11px; }
  .nav__group { gap: 2px; }
  .nav__brand { gap: 10px; }
  .nav__name { padding-inline-start: 10px; }
}

@media (max-width: 1199px) {
  .site-nav {
    width: calc(100% - 56px);
    padding-inline: 16px 8px;
    border-radius: 20px;
  }
  .nav__group--main { display: none; }
  .nav__toggle { display: flex; }
}

@media (max-width: 767px) {
  .site-nav {
    width: calc(100% - 40px);
    top: 12px;
    margin-top: 12px;
    padding-inline: 12px 6px;
    gap: 8px;
  }

  /* Der Termin-Button ist unten als Dauer-CTA vorhanden — hier würde er
     die Leiste nur überladen. */
  .site-nav .button--nav { display: none; }

  /* Die Marke darf schrumpfen, sonst schiebt sie den Menüknopf aus der
     Leiste. Das Zeichen selbst bleibt fest, nur der Name kürzt sich. */
  .nav__brand { font-size: 14px; gap: 10px; min-width: 0; flex: 0 1 auto; }
  .nav__brand > span:last-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Gleiches Verhältnis wie oben, nur kleiner: 20 px Höhe, 73 px Breite. */
  .nav__mark { width: 73px; height: 20px; flex-basis: 73px; }

  .lang { padding: 2px; }
  .lang__btn { min-width: 30px; height: 27px; padding: 0 7px; font-size: 11px; }

  .nav__toggle { width: 40px; height: 40px; flex: 0 0 40px; }
}

/* Auf dem Telefon konkurrieren Zeichen, Name, Sprachwahl und Menüknopf um
   350 Pixel. Alle vier passen nur, wenn die Marke kleiner wird: 62 px
   Zeichen, 12 px Name. Das ist keine Notlösung, sondern die richtige
   Rangfolge — das Zeichen führt, der Name trägt. */
@media (max-width: 479px) {
  .nav__brand { font-size: 12px; gap: 8px; letter-spacing: -.01em; }
  .nav__mark { width: 62px; height: 17px; flex-basis: 62px; }
  .nav__name { padding-inline-start: 8px; }
  .lang { gap: 1px; }
  .lang__btn { min-width: 26px; padding: 0 5px; }
}

/* Auf den schmalsten verbreiteten Geräten — 360 und 375 px — fehlen sonst
   rund zwanzig Pixel und der Name bräche mitten im Wort ab. Zeichen und
   Sprachwahl rücken deshalb noch einmal enger. */
@media (max-width: 389px) {
  .nav__brand { gap: 6px; }
  .nav__mark { width: 55px; height: 15px; flex-basis: 55px; }
  .nav__name { padding-inline-start: 6px; }
  .lang__btn { min-width: 21px; padding: 0 3px; font-size: 10px; }
  .nav__toggle { width: 36px; height: 36px; flex: 0 0 36px; }
}

/* Darunter trägt es nicht mehr. Bei 340 px bliebe vom Namen ein Fragment
   übrig — dann lieber nur das Zeichen. */
@media (max-width: 339px) {
  .nav__brand > span:last-child { display: none; }
}

/* ==========================================================================
   2 · BUTTONS
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform var(--dur-hover) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out);
}
.button:hover { transform: translateY(-2px); }

.button--primary { background: var(--color-ink); color: var(--color-paper); }
.button--primary:hover { background: var(--color-petrol); }

.button--lime { background: var(--color-lime); color: var(--color-ink); }
.button--lime:hover { background: var(--color-ink); color: var(--color-lime); }

/* Tinte statt Weiß auf Coral — 6,0 : 1 statt 3,1 : 1. */
.button--coral { background: var(--color-coral); color: var(--color-ink); }
.button--coral:hover { background: var(--color-ink); color: var(--color-paper); }

.button--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid rgba(17, 19, 21, .28);
}
.button--ghost:hover { border-color: var(--color-ink); background: rgba(17, 19, 21, .06); }

/* Auf farbigen Flächen braucht der Rahmen mehr Kontrast, sonst verschwindet er */
.hero__copy .button--ghost,
.card--lime .button--ghost { border-color: rgba(17, 19, 21, .42); }

.button--light { background: var(--color-paper); color: var(--color-ink); }
.button--light:hover { background: var(--color-lime); }

/* Für dunkle und farbige Flächen: heller Rahmen statt Fläche */
.button--outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}
.button--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Für farbige, aber helle Flächen — vor allem Coral. Dort wäre ein weißer
   Rahmen mit weißer Schrift zu schwach (3,1 : 1); Tinte kommt auf 6,0 : 1. */
.button--outline-ink {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid rgba(17, 19, 21, .38);
}
.button--outline-ink:hover { background: rgba(17, 19, 21, .09); border-color: var(--color-ink); }

/* Der einzige gefüllte Button in der Leiste. Weiß auf einer weißen,
   durchscheinenden Fläche war praktisch unsichtbar — dunkel gefüllt ist er
   das, was er sein soll: der Hauptweg. */
.button--nav {
  min-height: 46px;
  padding: 0 22px;
  font-size: 15px;
  background: var(--color-ink);
  color: var(--color-paper);
}
.button--nav:hover { background: var(--color-petrol); color: var(--color-paper); }

/* Pfeil im Button bewegt sich mit — Kontinuität statt Einzelanimation */
.button svg { transition: transform var(--dur-arrow) var(--ease-out); }
.button:hover svg { transform: translateX(5px); }
[dir="rtl"] .button:hover svg { transform: translateX(-5px); }
[dir="rtl"] .button svg { scale: -1 1; }

/* Haptik: Der Button gibt beim Drücken nach. Nur transform, damit kein
   Layout neu berechnet wird. */
.button:active { transform: translateY(0) scale(.985); }

/* Der Pfeil sitzt auf gefüllten Buttons in einer eigenen runden Fläche —
   dieselbe Formensprache wie die Arrow-Buttons in den Datenzeilen.
   Ohne Änderung am Markup: die Maße im SVG-Attribut werden hier überschrieben. */
.button--primary > svg,
.button--lime > svg,
.button--coral > svg {
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 50%;
  margin-inline-end: -10px;
  background: rgba(255, 255, 255, .16);
  transition:
    transform var(--dur-arrow) var(--ease-out),
    background-color var(--dur-arrow) var(--ease-out);
}
.button--lime > svg { background: rgba(17, 19, 21, .12); }

.button--primary:hover > svg,
.button--coral:hover > svg { background: rgba(255, 255, 255, .26); }
.button--lime:hover > svg { background: rgba(234, 251, 88, .3); }

/* ==========================================================================
   3 · PILLS, CHIPS, ARROW-BUTTONS
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
}

.pill--outline { border: 1px solid var(--color-line); color: var(--color-ink); }
.pill--outline-ink { border: 1px solid rgba(17, 19, 21, .24); color: var(--color-ink); }
.pill--lime  { background: var(--color-lime); color: var(--color-ink); }
.pill--ice   { background: var(--color-ice); color: var(--color-petrol); }
.pill--cloud { background: var(--color-cloud); color: var(--color-ink); }
.pill--coral { background: var(--color-coral); color: var(--color-ink); }

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}

.arrow-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--color-cloud);
  color: var(--color-ink);
  transition:
    background-color var(--dur-card) var(--ease-out),
    color var(--dur-card) var(--ease-out);
}
.arrow-btn svg { transition: transform var(--dur-arrow) var(--ease-out); }
.arrow-btn:hover { background: var(--color-lime); }
.arrow-btn:hover svg { transform: translateX(4px); }
[dir="rtl"] .arrow-btn svg { scale: -1 1; }
[dir="rtl"] .arrow-btn:hover svg { transform: translateX(-4px); }

.arrow-btn--lg { width: 56px; height: 56px; flex-basis: 56px; }
.arrow-btn--lime { background: var(--color-lime); }
.arrow-btn--lime:hover { background: var(--color-ink); color: var(--color-lime); }
.arrow-btn--petrol { background: var(--color-petrol); color: var(--color-paper); }

/* ==========================================================================
   4 · CARDS
   ========================================================================== */

.card {
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--color-cloud);
}
.card--paper { background: var(--color-paper); border: 1px solid var(--color-line); }
.card--ice { background: var(--color-ice); }
.card--lime { background: var(--color-lime); }
.card--petrol { background: var(--color-petrol); color: var(--color-paper); }
.card--petrol .lead,
.card--petrol .caption,
.card--petrol .eyebrow { color: rgba(252, 252, 250, .72); }

.card__title { margin-bottom: var(--space-3); }
.card__text { color: var(--color-muted); font-size: 15px; line-height: 24px; }
.card--petrol .card__text { color: rgba(252, 252, 250, .78); }

.image-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--color-aqua);
}
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform var(--dur-image) var(--ease-out);
}
a.image-card:hover img,
.image-card:hover img { transform: scale(1.00); }

/* ==========================================================================
   5 · DATENZEILEN (Spezifikation 05)
   ========================================================================== */

.data-list { border-top: 1px solid var(--color-line); }

.data-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.15fr) 44px;
  align-items: center;
  gap: var(--space-5);
  min-height: 82px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-line);
  transition:
    background-color var(--dur-card) var(--ease-out),
    transform var(--dur-card) var(--ease-out);
}
.data-row:hover { background: #f7f8f6; }
.data-row:hover .data-row__title { transform: translateX(8px); }
[dir="rtl"] .data-row:hover .data-row__title { transform: translateX(-8px); }
.data-row:hover .arrow-btn { background: var(--color-lime); }

.data-row__index {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.data-row__title {
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: transform var(--dur-card) var(--ease-out);
}

.data-row__meta {
  font-size: 15px;
  line-height: 23px;
  color: var(--color-muted);
  max-width: 46ch;
}

@media (max-width: 1023px) {
  .data-row {
    grid-template-columns: 52px minmax(0, 1fr) 44px;
    row-gap: var(--space-2);
  }
  .data-row__meta { grid-column: 2 / 3; }
}

@media (max-width: 767px) {
  .data-row {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 20px 4px;
  }
  .data-row .arrow-btn { display: none; }
  .data-row__title { font-size: 18px; }
  .data-row:hover .data-row__title { transform: none; }
}

/* ==========================================================================
   6 · CLAIM CAPSULES (Spezifikation 05)
   ========================================================================== */

.capsules {
  display: grid;
  grid-template-columns: 1.15fr 1fr 176px 1.15fr;
  gap: 8px;
}

.capsule {
  display: grid;
  place-items: center;
  min-height: 176px;
  padding: 24px;
  overflow: hidden;
  text-align: center;
}
.capsule:nth-child(1) { border-radius: 32px 999px 999px 32px; background: var(--color-cloud); }
.capsule:nth-child(2) { border-radius: 999px; padding: 0; }
.capsule:nth-child(3) { border-radius: 999px; background: var(--color-lime); }
.capsule:nth-child(4) { border-radius: 999px 32px 32px 999px; background: var(--color-petrol); color: var(--color-paper); }

.capsule img { width: 100%; height: 100%; object-fit: cover; }

.capsule__word {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 500;
}

.capsule__arrow {
  transition: transform var(--dur-card) var(--ease-out);
}
.capsule:nth-child(3):hover .capsule__arrow { transform: rotate(8deg) translateX(5px); }
[dir="rtl"] .capsule__arrow { scale: -1 1; }

@media (max-width: 1023px) {
  .capsules { grid-template-columns: 1fr 1fr; }
  .capsule:nth-child(1) { border-radius: 32px 32px 999px 999px; }
  .capsule:nth-child(2) { border-radius: 32px; }
  .capsule:nth-child(3) { border-radius: 999px; min-height: 120px; }
  .capsule:nth-child(4) { border-radius: 999px 999px 32px 32px; }
}

@media (max-width: 479px) {
  .capsules { grid-template-columns: 1fr; }
  .capsule { min-height: 132px; border-radius: 32px !important; }
  .capsule:nth-child(2) { min-height: 200px; }
}

/* ==========================================================================
   7 · ACCORDION-SLIDER (Spezifikation 06)
   ========================================================================== */

.story-slider__track {
  display: flex;
  gap: 16px;
  min-height: 560px;
  overflow: clip;
}

.story-card {
  position: relative;
  flex: 0 1 228px;
  min-width: 0;
  overflow: hidden;
  border-radius: 30px;
  background: var(--color-petrol);
  transition:
    flex-basis var(--dur-slider) var(--ease-out),
    transform var(--dur-card) var(--ease-out);
}
.story-card.is-active { flex-basis: 520px; }

.story-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform .9s var(--ease-out);
}
.story-card.is-active .story-card__bg { transform: scale(1.02); }

.story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,63,73,.12) 0%, rgba(23,63,73,.86) 68%, rgba(17,19,21,.94) 100%);
  pointer-events: none;
}

.story-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 560px;
  padding: 28px;
  color: var(--color-paper);
}

.story-card__trigger {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: inherit;
  text-align: start;
  width: 100%;
}

.story-card__index {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  opacity: .66;
  font-variant-numeric: tabular-nums;
}

.story-card__title {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 600;
}

/* Inaktive Karte: Titel vertikal, damit die schmale Spur lesbar bleibt */
.story-card:not(.is-active) .story-card__inner { padding: 24px 20px; }
.story-card:not(.is-active) .story-card__title { font-size: 18px; }

.story-card__content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--dur-slider) var(--ease-out),
    opacity 320ms var(--ease-out);
}
.story-card.is-active .story-card__content {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 0ms, 200ms;
}
.story-card__content > div { overflow: hidden; }

.story-card__text {
  max-width: 40ch;
  margin: 14px 0 20px;
  font-size: 15px;
  line-height: 24px;
  color: rgba(252, 252, 250, .84);
}

/* Fortschritt als 2-px-Linie, keine Slider-Dots */
.story-progress {
  position: relative;
  height: 2px;
  margin-top: var(--space-6);
  background: var(--color-line);
  border-radius: 2px;
  overflow: hidden;
}
.story-progress__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background: var(--color-ink);
  border-radius: 2px;
}

@media (max-width: 1023px) {
  .story-slider__track { min-height: 480px; }
  .story-card__inner { min-height: 480px; }
  .story-card.is-active { flex-basis: 440px; }
}

@media (max-width: 767px) {
  .story-slider__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    min-height: 440px;
    padding-inline: 0;
  }
  .story-slider__track::-webkit-scrollbar { display: none; }

  .story-card,
  .story-card.is-active {
    flex: 0 0 82vw;
    scroll-snap-align: center;
  }
  .story-card__inner { min-height: 440px; padding: 24px; }
  /* Auf Touch alle Inhalte sichtbar — keine Hover-only-Information */
  .story-card__content { grid-template-rows: 1fr; opacity: 1; }
  .story-card:not(.is-active) .story-card__title { font-size: 22px; }
}

/* ==========================================================================
   8 · BENTO (Spezifikation 05.1)
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.bento__main   { grid-column: span 7; min-height: 580px; }
.bento__facts  { grid-column: span 5; display: grid; gap: 20px; align-content: start; }
.bento__duo    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bento__mini   { min-height: 200px; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat__value {
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  line-height: .94;
  letter-spacing: -.05em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 14px; line-height: 20px; color: var(--color-muted); }
.card--petrol .stat__label { color: rgba(252, 252, 250, .7); }

.quote {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  line-height: 1.32;
  letter-spacing: -.03em;
  font-weight: 500;
}

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
  .bento__main  { grid-column: span 8; min-height: 460px; }
  .bento__facts { grid-column: span 8; }
  .bento__duo   { gap: 18px; }
}

@media (max-width: 767px) {
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .bento__main { min-height: 380px; }
  .bento__duo { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 24px; }
}

/* ==========================================================================
   9 · VERGLEICHSTABELLE
   ========================================================================== */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.compare__col {
  padding: 36px;
  border-radius: var(--radius-card);
}
.compare__col--gkv { background: var(--color-cloud); }
.compare__col--pkv { background: var(--color-ice); position: relative; }

.compare__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.compare__list { display: grid; gap: 18px; }
.compare__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  font-size: 15px;
  line-height: 23px;
}
.compare__item svg { margin-top: 3px; flex: 0 0 22px; }
.compare__item b { display: block; font-weight: 650; margin-bottom: 2px; }
.compare__item span { color: var(--color-muted); }

@media (max-width: 899px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare__col { padding: 28px; }
}
@media (max-width: 419px) {
  .compare__col { padding: 22px; }
  .compare__head { flex-wrap: wrap; }
}

/* ==========================================================================
   10 · PREIS-BAND (dunkel, Spezifikation 03.1 · Modul 08)
   ========================================================================== */

.price-band {
  border-radius: var(--radius-card);
  background: var(--color-petrol);
  color: var(--color-paper);
  padding: clamp(32px, 4vw, 56px);
}
.price-band .eyebrow,
.price-band .lead { color: rgba(252, 252, 250, .72); }

.price-grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  gap: 1px;
  background: rgba(252, 252, 250, .16);
  border-radius: 18px;
  overflow: hidden;
}

.price-cell {
  background: var(--color-petrol);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}
.price-cell--head { background: rgba(252, 252, 250, .07); font-weight: 650; }
.price-cell--label { color: rgba(252, 252, 250, .72); }
.price-cell--total { background: rgba(252, 252, 250, .07); font-weight: 650; }
.price-cell--accent { background: var(--color-lime); color: var(--color-ink); font-weight: 650; }
.price-cell b { display: block; font-size: 19px; letter-spacing: -.02em; }

.price-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-6);
}

.footer__direct {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-6);
}
.footer__direct a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(252, 252, 250, .3);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.footer__direct a:hover { background: var(--color-lime); color: var(--color-ink); border-color: var(--color-lime); }

.price-note {
  margin-top: var(--space-5);
  font-size: 13px;
  line-height: 20px;
  color: rgba(252, 252, 250, .6);
  max-width: 76ch;
}

@media (max-width: 899px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-cell { padding: 14px 16px; }
  .price-cell--head { border-top: 1px solid rgba(252,252,250,.2); }
}

/* ==========================================================================
   11 · FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--color-line); }

.faq__item { border-bottom: 1px solid var(--color-line); }

.faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: 26px 4px;
  text-align: start;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: color var(--dur-hover) var(--ease-out);
}
.faq__trigger:hover { color: var(--color-petrol); }

.faq__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-cloud);
  transition: transform var(--dur-card) var(--ease-out),
              background-color var(--dur-card) var(--ease-out);
}
.faq__trigger[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
  background: var(--color-lime);
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-card) var(--ease-out);
}
.faq__panel[data-open="true"] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  max-width: 68ch;
  padding: 0 60px 26px 4px;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 26px;
}
[dir="rtl"] .faq__panel p { padding: 0 4px 26px 60px; }

/* ==========================================================================
   12 · FORMULAR (Spezifikation 05.1)
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 20px;
}

.field { display: grid; gap: 7px; margin-bottom: 18px; }

.field label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
  letter-spacing: .01em;
}
.field .hint { font-size: 12px; line-height: 17px; color: var(--color-muted); }

input,
select,
textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--color-ink);
  font-size: 15px;
  transition: border-color var(--dur-hover) ease,
              box-shadow var(--dur-hover) ease;
}
textarea { min-height: 128px; resize: vertical; line-height: 24px; }

:where(input, select, textarea):focus-visible {
  outline: 0;
  border-color: var(--color-petrol);
  box-shadow: 0 0 0 3px rgba(147, 195, 202, .34);
}

.field--error input,
.field--error select,
.field--error textarea { border-color: var(--color-coral); }

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-coral-ink);
  font-weight: 600;
}
.field--error .field__error { display: flex; }

.checkbox {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 20px;
}
.checkbox input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 1px;
  padding: 0;
  accent-color: var(--color-petrol);
}
.checkbox label { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--color-muted); }
.checkbox a { text-decoration: underline; color: var(--color-ink); }

/* Inline-Erfolg statt Popup */
.form-success {
  display: none;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--radius-control);
  background: var(--color-lime);
}
.form-success.is-visible { display: flex; }

.contact-lines { display: grid; gap: 2px; margin-top: var(--space-6); }
.contact-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(252, 252, 250, .18);
  font-size: 16px;
  transition: transform var(--dur-card) var(--ease-out);
}
.contact-line:last-child { border-bottom: 0; }
a.contact-line:hover { transform: translateX(5px); }
[dir="rtl"] a.contact-line:hover { transform: translateX(-5px); }
.contact-line__label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .62;
  min-width: 74px;
}

@media (max-width: 1023px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13 · FOOTER (Spezifikation 05.1)
   ========================================================================== */

.site-footer {
  background: var(--color-petrol);
  color: var(--color-paper);
  border-radius: 32px 32px 0 0;
  padding: 72px 48px 32px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
}

.footer__headline {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 500;
  max-width: 14ch;
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.footer__col .footer__h {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(252, 252, 250, .56);
  margin-bottom: 16px;
}
.footer__col li + li { margin-top: 11px; }
.footer__col a {
  font-size: 15px;
  color: rgba(252, 252, 250, .88);
  transition: color var(--dur-hover) var(--ease-out);
}
.footer__col a:hover { color: var(--color-lime); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(252, 252, 250, .18);
  font-size: 13px;
  color: rgba(252, 252, 250, .6);
}

.social { display: flex; gap: 8px; }
.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(252, 252, 250, .28);
  color: var(--color-paper);
  transition: background-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
.social a:hover { background: var(--color-lime); color: var(--color-ink); border-color: var(--color-lime); }

@media (max-width: 1023px) {
  .site-footer { padding: 56px 28px 28px; }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 767px) {
  .site-footer { padding: 48px 20px 24px; border-radius: 0; }
  .footer__links { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
}

/* ==========================================================================
   14 · WHATSAPP — steht auf jeder Seite, gehört deshalb hierher
   ========================================================================== */

.wa {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-petrol);
  color: var(--color-paper);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-float);
  transition:
    transform var(--dur-card) var(--ease-out),
    background-color var(--dur-card) var(--ease-out);
}
[dir="rtl"] .wa { padding: 0 16px 0 20px; }
.wa:hover { transform: translateY(-3px); background: var(--color-ink); }
.wa:active { transform: translateY(-1px) scale(.98); }

.wa__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-lime);
  color: var(--color-ink);
  flex: 0 0 32px;
}

@media (max-width: 767px) {
  /* Über dem mobilen Dauer-CTA einsortieren, damit sich beide nicht decken */
  .wa { bottom: 84px; inset-inline-end: 16px; height: 48px; padding: 0 16px 0 12px; }
  .wa__label { display: none; }
  .wa { padding: 0; width: 48px; justify-content: center; }
}


/* ==========================================================================
   15 · STICKY MOBILE-CTA
   ========================================================================== */

.sticky-cta {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  gap: 8px;
}
.sticky-cta .button { flex: 1; box-shadow: var(--shadow-float); }

@media (max-width: 767px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 84px; }
}

/* --- Captcha -------------------------------------------------------------
   Das hCaptcha-Feld wird als iframe von außen eingesetzt; gestalten lässt
   sich darin nichts. Was wir beeinflussen können, ist die Umgebung: Abstand,
   Ausrichtung und ein Hinweis, wenn es gar nicht erst lädt.
   ------------------------------------------------------------------------ */

.captcha {
  margin: 4px 0 20px;
  min-height: 78px;                 /* hält den Platz frei, bevor es lädt */
}
.captcha .h-captcha { display: inline-block; }

/* In der arabischen Fassung rückt es an die rechte Kante. */
[dir="rtl"] .captcha { text-align: right; }

/* Auf schmalen Geräten ist das Feld breiter als die Karte. Skalieren statt
   überlaufen lassen — hCaptcha bietet dafür keine schmale Variante an,
   die noch bedienbar wäre. */
@media (max-width: 400px) {
  .captcha .h-captcha {
    transform: scale(.88);
    transform-origin: left top;
  }
  [dir="rtl"] .captcha .h-captcha { transform-origin: right top; }
  .captcha { min-height: 70px; }
}