/**
 * ALP Nutrition Design-System: Sektionen (Startseite)
 * Struktur an den Kunden-Mockups ausgerichtet, in der Ausführung deutlich veredelt.
 */

/* =========================================================
   1 · Hero (2-Spalten, hell)
   ========================================================= */
/* Sonnige gruene Alpenhaenge mit dunstblauen Gipfeln (hero-alpine.jpg,
   Unsplash photo-1563913640670, freie kommerzielle Lizenz): froehlich + frisch.
   Doppelter Weissschleier: links fuer die Copy-Zone, oben fuer den Header. */
.hero {
  position: relative;
  padding-block: clamp(48px, 6vw, 88px) clamp(72px, 9vw, 128px);
  overflow: hidden;
  /* Bild satter/tiefer gerechnet (hero-alpine-rich.jpg); Ausschnitt auf die
     gruenen Haenge; Schleier auf das Noetige reduziert (Copy links lesbar,
     Bild rechts satt, kein Milchschleier). */
  background-image:
    linear-gradient(100deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.70) 36%, rgba(255,255,255,.20) 62%, rgba(255,255,255,0) 84%),
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 46%),
    url(../img/hero-alpine-rich.jpg);
  background-size: cover, cover, cover;
  background-position: center, center, center 54%;
  background-repeat: no-repeat;
}
/* Unterer weisser Ausklang entfernt (User-Wunsch): Bild laeuft satt bis zur
   Kante der Folgesektion. */
.hero .wrap { position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: stretch;
}
/* gleiche Abstaende ueberall: EIN Gap-Wert fuer alle Copy-Bloecke */
.hero__copy {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(22px, 2.4vw, 30px);
}
.hero__copy .eyebrow { margin: 0; }
/* H1 zweizeilig (harte Regel): Groesse so, dass die Zeilen breit laufen statt zu stapeln */
/* Seitentitel in der Spalte neben dem Produktbild: eine Rolle mit der
   Produktseiten-Buybox, beide auf demselben Token (siehe tokens.css). */
.hero h1 {
  font-size: var(--fs-page-title-col);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
.hero__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-muted); max-width: 47ch; margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-meta); color: var(--ink-muted); margin: 0; }
.hero__trust span { display: inline-flex; align-items: center; gap: var(--s2); }
.hero__trust svg { width: 17px; height: 17px; color: var(--green-ok); flex: none; }

/* Visual: Ampullen-Lineup, fuellt die Spaltenhoehe (gleich hoch wie links).
   Die weisse Karten-Variante von .hero__stage wurde entfernt (Audit P1):
   das Markup rendert ausschliesslich .hero__stage--bare (siehe unten). */
.hero__visual { position: relative; display: flex; }
.hero__visual .hero__stage { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: clamp(420px, 46vw, 560px); }

/* =========================================================
   Hero-Motion: Lade-Choreografie + Idle-Float
   (Parallax beim Scrollen steuert main.js; reduced-motion
   wird global neutralisiert, ?shot=1 erzwingt Endzustand)
   ========================================================= */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroBloom {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
/* Copy-Kinder staffeln sich ein; der generische reveal wird im Hero neutralisiert */
.js .hero .reveal { opacity: 1; transform: none; transition: none; }
.js .hero__copy > * { opacity: 0; animation: heroRise .65s var(--ease-out) forwards; }
.js .hero__copy > *:nth-child(1) { animation-delay: .05s; }
.js .hero__copy > *:nth-child(2) { animation-delay: .14s; }
.js .hero__copy > *:nth-child(3) { animation-delay: .23s; }
.js .hero__copy > *:nth-child(4) { animation-delay: .32s; }
.js .hero__copy > *:nth-child(5) { animation-delay: .41s; }
.js .hero__stage--bare .hero__lineup img:only-child { opacity: 0; animation: heroBloom .9s var(--ease-out) .3s forwards; }
/* Sanftes Dauer-Schweben der Produktfamilie (Container, nicht das Bild: kein Konflikt mit Bloom) */
.js .hero__stage--bare .hero__lineup { animation: heroFloat 7s ease-in-out 1.6s infinite; }
/* Screenshot-QA: sofortiger Endzustand */
html.shot .hero .reveal,
html.shot .hero__copy > *,
html.shot .hero__stage--bare .hero__lineup,
html.shot .hero__stage--bare .hero__lineup img:only-child { animation: none !important; opacity: 1 !important; transform: none !important; }

/* Bare-Variante: Collage schwebt frei, keine Karte, kein Schatten */
.hero__stage--bare {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  min-height: 0;
}
.hero__stage--bare .hero__lineup { min-height: 0; }
.hero__stage--bare .hero__lineup img:only-child {
  position: static;
  display: block;
  width: min(100%, 620px);
  height: auto;
  margin: 0 auto;
  transform: none;
}
/* Gestaffelte Produktfamilie: echte Alpha-Packshots mit eigenem Schatten,
   hinten klein/frueh, vorne gross (Sport = letztes Kind, Front rechts).
   Kein kuenstlicher Schatten-Balken mehr (die Renderings bringen ihren mit). */
.hero__lineup {
  position: relative;
  z-index: 1;
  min-height: clamp(260px, 23vw, 330px);
}
@media (max-width: 959px) { .hero__lineup { min-height: clamp(240px, 52vw, 320px); } }
/* Held + Flanke: Sport gross vorne rechts, Protect als Stuetze hinten links,
   beide Schattenbasen auf EINER Grundlinie (bottom: 0). */
.hero__lineup img {
  position: absolute;
  bottom: 0;
  width: auto;
  height: auto;
  margin: 0;
}
/* Karteninnen ~450px bei 1440: Held ~76%, Flanke ~50%, sichtbarer Flanken-Streifen ~95px */
.hero__lineup img:nth-child(1) { width: clamp(170px, 16vw, 230px); left: clamp(2px, .5vw, 8px); z-index: 1; }
.hero__lineup img:nth-child(2) { width: clamp(280px, 24vw, 345px); right: clamp(8px, 1vw, 14px); z-index: 2; }
@media (max-width: 959px) {
  .hero__lineup img:nth-child(1) { width: clamp(160px, 34vw, 240px); }
  .hero__lineup img:nth-child(2) { width: clamp(250px, 56vw, 400px); }
}
@media (max-width: 959px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s8); }
  .hero__copy { max-width: none; }
  .hero__lineup { min-height: 0; }
  .hero__lineup img { height: clamp(200px, 40vw, 280px); }
}
/* =========================================================
   2 · Trust-Bar: v1 (.trustbar/.trustbar__row/.trustbar__item)
   entfernt (Audit P1). Der Block rendert ausschliesslich das
   neuere .trustsignals-System (siehe Abschnitt Trust-Leiste).
   ========================================================= */

/* =========================================================
   3 · Features ("Was uns besonders macht") 2x2
   ========================================================= */
.features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}
@media (max-width: 719px) { .features__grid { grid-template-columns: 1fr; } }

/* =========================================================
   4 · Range ("Jedes Produkt, ein Anspruch: Premium")
   Karten + Grid leben komplett in components.css
   (Abschnitt Produktkarte "Pastell-Sockel").
   ========================================================= */

/* =========================================================
   5 · PHYTO (2-Spalten, Bild + Text)
   ========================================================= */
.phyto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}
.phyto__media {
  border-radius: var(--r-surface);
  overflow: hidden;
  box-shadow: var(--sh-card);
  position: relative;
  min-height: 380px;
}
.phyto__media img { width: 100%; height: 100%; object-fit: cover; }
.phyto__copy { display: flex; flex-direction: column; justify-content: center; }
.phyto__badge {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
}
.phyto h2 { margin-bottom: var(--s5); }
.phyto__copy .lead { margin-bottom: var(--s5); }
.phyto__copy2 { margin: calc(-1 * var(--s3)) 0 var(--s5); font-size: var(--fs-meta); line-height: 1.6; color: var(--ink-muted); }
.phyto__link { color: var(--ink); font-size: var(--fs-body); }
.phyto__points { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.phyto__points li { display: flex; align-items: baseline; gap: var(--s3); font-size: var(--fs-meta); color: var(--ink-muted); }
.phyto__points svg { width: 18px; height: 18px; color: var(--green-ok); flex: none; transform: translateY(3px); }
@media (max-width: 899px) {
  .phyto__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .phyto__media { order: -1; }
}

/* =========================================================
   Shop-CTA Sektion
   ========================================================= */
.shopcta .sec-head { text-align: center; margin-inline: auto; }

/* =========================================================
   Trust-Leiste: ruhige, statische Reihe belegbarer Vertrauens-
   Signale (Icon + Text). Ersetzt den frueheren Platzhalter-Logo-
   Slider. Ton: Stripe-ruhig, monochrom, kundeneditierbar (ACF).
   ========================================================= */
.trustsignals {
  background: var(--paper);
  border-block: 1px solid var(--line);
  padding-block: clamp(24px, 3vw, 38px);
}
.trustsignals__label {
  text-align: center;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-size: var(--fs-eyebrow, 13px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.trustsignals__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* Spaltenabstand bewusst knapper als frueher: seit dem fuenften Signal
     (Apothekenlistung) passte die Leiste sonst nicht mehr in eine Zeile und
     brach 4+1 um. Die Haarlinien-Trenner unten ziehen mit. */
  gap: clamp(16px, 1.4vw, 22px) clamp(18px, 1.9vw, 30px);
}
.trustsignal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  position: relative;
}
/* zarte Trennlinie zwischen den Signalen (bricht auf Mobile sauber weg) */
.trustsignal:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(9px, 0.95vw, 15px));
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--line);
}
.trustsignal svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--lime-deep);
}
.trustsignal span {
  font-weight: 600;
  /* Deckel bei 15px statt 16px: die Schiene ist auf 1200px begrenzt, die
     Schrift skalierte aber weiter mit vw. Ab ~1520px Fensterbreite brauchte die
     Zeile 1210px und brach in eine haessliche 4+1-Zeile um. Mit 15px bleiben
     rund 45px Luft, die Leiste steht auf jeder Breite in einer Zeile. */
  font-size: var(--fs-h4);
  letter-spacing: 0.005em;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 559px) {
  .trustsignal:not(:last-child)::after { display: none; }
  .trustsignals__row { gap: 12px 20px; }
  .trustsignal span { font-size: var(--fs-meta); white-space: normal; }
}

/* =========================================================
   Reihenfolge-Anpassung: Produkte VOR "Was uns besonders macht".
   Produkte liegen nativ auf .on-bg (Karten-Kontur), Features
   werden auf Weiss gedreht, damit der Wechsel stimmt.
   ========================================================= */
#besonders.on-bg { background: var(--paper); }
/* Feature-Cards auf jetzt weissem Grund: dezente Hairline fuer Kontur */
#besonders .feature, #besonders .features__card, #besonders [class*="feature"][class*="card"] {
  border: 1px solid var(--line);
}

/* =========================================================
   Shop-CTA neu: ein dominanter Hersteller-Kauf, Marktplaetze
   nur als entwerteter Textlink (Conversion am Money-Moment).
   ========================================================= */
.shopbuy { max-width: 640px; margin: clamp(28px,4vw,44px) auto 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px,2.6vw,30px); }
.shopbuy__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 12px 30px; }
.shopbuy__perks li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta);
  color: var(--ink); font-weight: 500; }
.shopbuy__perks svg { width: 18px; height: 18px; color: var(--green-ok); flex: none; }
.shopbuy__cta { height: 56px; padding: 0 42px; font-size: var(--fs-body); }
/* Zweite Reihe im Bestell-Stopp: Direktkauf-Link und Kontakt, bewusst leiser
   als der Haupt-CTA. Ohne Stopp ist die Reihe nicht im Markup. */
.shopbuy__second { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: calc(-1 * clamp(6px, 1vw, 12px)); }
.shopbuy__alt { margin: 0; font-size: var(--fs-meta); color: var(--ink-subtle); }
.shopbuy__alt a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.shopbuy__alt a:hover { color: var(--ink); }

/* =========================================================
   Marktplatz-Karten im Bestell-Stopp: Amazon und SHOP APOTHEKE
   gleichrangig nebeneinander, je ein Button. Die Zeile darunter
   sagt, welches Sortiment dort liegt.
   ========================================================= */
.shopbuy--markets { max-width: 820px; }
.shopbuy__markets {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.market {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(20px, 2.2vw, 28px) clamp(16px, 2vw, 24px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}
/* Logo-Feld mit fester Hoehe: so stehen beide Buttons auf gleicher Linie,
   egal ob dort ein Bild oder der Wortmarken-Fallback sitzt. */
.market__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-bottom: 4px;
}
/* Zwei Wortmarken mit sehr unterschiedlichem Seitenverhaeltnis (Amazon ~3:1,
   SHOP APOTHEKE ~8:1). Deckel auf Hoehe UND Breite bringt beide optisch auf
   vergleichbare Groesse, ohne eine der beiden zu verzerren. */
.market__logo img { max-height: 34px; max-width: 210px; width: auto; height: auto; display: block; object-fit: contain; }
.market__name {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Der Button traegt die Karte: volle Breite, damit beide Marktplaetze optisch
   gleich schwer wiegen (Kundenwunsch: "Einen Button" je Marktplatz). */
.market__cta { width: 100%; height: 52px; margin-top: auto; }
@media (max-width: 599px) {
  .shopbuy__markets { grid-template-columns: 1fr; }
}

/* Verlinktes Trust-Signal (z. B. Apothekenlistung): erbt die Leisten-Optik,
   bekommt nur Hover und Fokus dazu. */
.trustsignal__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.trustsignal__link:hover span { color: var(--lime-deep); }
.trustsignal__link:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 4px; border-radius: 6px; }
/* Freigegebenes Partner-Wortmarken-Asset statt Icon (nur wenn Datei vorhanden).
   Etwas kleiner als die Schriftzeile hoch ist, damit die Leiste ruhig bleibt. */
.trustsignal__logo { height: 17px; width: auto; max-width: 150px; flex: none; display: block; }

/* =========================================================
   Bewertungen: dunkler Navy-Anker-Block mit echten
   Trusted-Shops-Kundenbewertungen (weisse Stimmen, goldene
   Sterne). Hebt Trust ab, setzt den Navy-Akzent gezielt.
   ========================================================= */
.reviews { position: relative; overflow: hidden;
  background: linear-gradient(168deg, #16243F 0%, #1C2E51 100%);
  border-block: 1px solid rgba(255,255,255,.06); }
.reviews .sec-head .eyebrow { color: #CFE0B3; }
.reviews .sec-head h2 { color: #fff; }
.reviews .sec-head h2 .mark { color: #fff; }
/* Sterne */
.stars { display: inline-flex; gap: 2px; }
.stars .star { width: 18px; height: 18px; fill: rgba(255,255,255,.24); }
.stars .star.is-full { fill: #F5B733; }
.stars--lg .star { width: 26px; height: 26px; }
/* Zusammenfassung */
.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 44px); margin: clamp(28px,4vw,44px) auto clamp(28px,4vw,40px);
  padding-bottom: clamp(28px,4vw,40px); border-bottom: 1px solid rgba(255,255,255,.12); }
.reviews__score { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.reviews__num { font-family: var(--serif); font-weight: 600; font-size: var(--fs-page-title);
  line-height: 1; color: #fff; letter-spacing: -.02em; }
.reviews__meta { font-size: var(--fs-meta); color: rgba(255,255,255,.72); }
.reviews__crit { list-style: none; margin: 0; padding: 0 clamp(0px,2vw,24px);
  display: flex; flex-wrap: wrap; gap: 10px 30px; border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12);
  padding-inline: clamp(20px,3vw,40px); }
.reviews__crit li { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.reviews__crit span { font-size: var(--fs-micro); color: rgba(255,255,255,.66); }
.reviews__crit b { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); color: #fff; }
.reviews__badge { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.86);
  font-size: var(--fs-meta); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.reviews__badge:hover { color: #fff; }
.reviews__badge svg { width: 26px; height: 26px; color: #6BC79A; flex: none; }
.reviews__badge b { font-weight: 700; }
/* Kaeuferstimmen: Layout jetzt als Scroll-Snap-Slider (siehe Slider-Block am Dateiende). */
.rvcard { margin: 0; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px; padding: clamp(20px,2.4vw,26px); display: flex; flex-direction: column; gap: 12px; }
.rvcard blockquote { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: rgba(255,255,255,.94);
  font-family: var(--serif); font-weight: 400; }
.rvcard blockquote::before { content: "\201C"; }
.rvcard blockquote::after { content: "\201D"; }
.rvcard figcaption { margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: var(--fs-micro); color: rgba(255,255,255,.6); }
.rvcard__verified { display: inline-flex; align-items: center; gap: 6px; color: #6BC79A; font-weight: 600; }
.rvcard__verified svg { width: 15px; height: 15px; }
.rvcard time { color: rgba(255,255,255,.5); }

/* ============================================================
   Bewertungen: Scroll-Snap-Schiene (ersetzt das 3-Spalten-Grid).
   Navy-Sektion, goldene Sterne #F5B733 + Glass-Cards bleiben.
   Nur echte Tokens; Slider-Metriken als lokale Custom Properties.
   Loeschen: alte .reviews__grid-Regeln + die @media-1-Spalte-Regel.
   ============================================================ */

.reviews__slider { position: relative; }

/* --- Die Schiene: horizontaler Snap-Track --- */
.reviews__track {
  --rv-cols: 3;
  --rv-gap: clamp(16px, 2vw, 24px);
  --rv-peek: clamp(32px, 3.6vw, 56px);

  display: flex;
  gap: var(--rv-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-block: 12px;                 /* Luft fuer Hover-Lift innerhalb des Clips */
  scroll-padding-inline-start: 0;
  scrollbar-width: none;               /* Scrollbar verstecken (Firefox) */
  -ms-overflow-style: none;
}
.reviews__track::-webkit-scrollbar { width: 0; height: 0; display: none; }

.reviews__track:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
  border-radius: var(--r-surface);
}

/* Tablet: 2 sichtbar, Mobile: 1 sichtbar (Peek waechst) */
@media (max-width: 1024px) {
  .reviews__track { --rv-cols: 2; --rv-peek: clamp(28px, 5vw, 48px); }
}
@media (max-width: 600px) {
  .reviews__track { --rv-cols: 1; --rv-peek: clamp(40px, 12vw, 68px); }
}

/* --- Karten: feste Breite + Snap. Glass-Optik bleibt aus dem Bestand. --- */
.reviews__track .rvcard {
  flex: 0 0 calc((100% - var(--rv-cols) * var(--rv-gap) - var(--rv-peek)) / var(--rv-cols));
  min-inline-size: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  transition: border-color var(--t-med) var(--ease),
              background var(--t-med) var(--ease),
              transform var(--t-med) var(--ease-out);
}
/* Terminal-Snap: letzte Karte rechtsbuendig -> Ende ist ein gueltiger Snap-Punkt */
.reviews__track .rvcard:last-child { scroll-snap-align: end; }

/* Dezenter Hover (keine schweren Schatten wegen overflow-Clip) */
.reviews__track .rvcard:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.085);
  transform: translateY(-3px);
}

/* --- Steuerleiste: Dots links, Pfeile rechts --- */
.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s5);
}

.reviews__dots { display: flex; align-items: center; gap: 10px; }

.rvdot {
  inline-size: 9px;
  block-size: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.24);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              inline-size var(--t-med) var(--ease-out);
}
.rvdot:hover { background: rgba(255,255,255,.5); }
/* Signature-Move: aktiver Dot streckt sich zur Lime-Pille */
.rvdot[aria-current="true"] { inline-size: 26px; background: var(--lime); }
.rvdot:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.reviews__nav { display: flex; gap: 10px; }

.rvbtn {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.rvbtn svg { inline-size: 20px; block-size: 20px; }
.rvbtn:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-ink);
  transform: translateY(-1px);
}
.rvbtn:active { transform: translateY(0); }
.rvbtn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* GRAFT 2: aria-disabled statt native disabled -> Pfeile bleiben
   fokussierbar/auffindbar; die Fokus-Rettung entfaellt ersatzlos. */
.rvbtn[aria-disabled="true"] {
  opacity: .35;
  cursor: not-allowed;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.6);
  transform: none;
}
.rvbtn[aria-disabled="true"]:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.6);
  transform: none;
}

/* --- Sehr breit / alles passt: kein Slider noetig --- */
.reviews__slider[data-static] .reviews__controls { display: none; }
.reviews__slider[data-static] .reviews__track {
  scroll-snap-type: none;
  justify-content: center;
}

/* --- sr-only Fallback (falls nicht global vorhanden) --- */
.reviews .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .reviews__track { scroll-behavior: auto; }
  .rvbtn, .rvdot, .reviews__track .rvcard { transition: none; }
  .rvbtn:hover, .reviews__track .rvcard:hover { transform: none; }
}

/* =========================================================
   CTA-Band (minimal, zentriert): schlanker Navy-Moment zwischen
   Features (weiss) und PHYTO (getoent). Reduziert wie die Referenz:
   Trust-Zeile, Headline, Subline, Button. Viel Ruhe, alles mittig.
   ========================================================= */
.section.ctaband {
  position: relative;
  overflow: hidden;
  /* Immersive Alpen-Foto-Buehne wie die anderen Statement-Baender, Navy-Overlay
     haelt den weissen Text lesbar (AA). */
  background-color: var(--ink);           /* Fallback, falls Bild fehlt */
  background-image:
    linear-gradient(180deg, rgba(16,27,49,.82) 0%, rgba(16,27,49,.72) 46%, rgba(16,27,49,.88) 100%),
    url(../img/hero-alpine-rich.jpg);
  background-size: cover, cover;
  background-position: center, center 55%;
  background-repeat: no-repeat;
  color: var(--paper);
  padding-block: clamp(56px, 7.5vw, 100px);
  --surface: var(--ink);                  /* Fokus-Ring-Grund an dunklen Grund koppeln */
  text-align: center;
}
.ctaband__inner {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 22px);
}

/* Trust-Zeile ("Ausgezeichnet · 5,0 / 5") als ruhiger, zentrierter Eyebrow */
.ctaband__note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);       /* AA auf Navy */
}
.ctaband__star { width: 14px; height: 14px; flex: 0 0 auto; fill: #F5B733; }

/* Headline: die eine selbstbewusste Zeile, mittig, balanciert */
.ctaband__title {
  max-width: 23ch;
  margin: 0;
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-band-title);
  line-height: 1.07;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* Mark ruhiger: feine Lime-Linie statt dickem Highlight */
/* Kunde 12.08.2026: "Strich bitte genau so fett wie bei den anderen."
   Hier lag eine Sonderregel mit fester 2px-Linie statt der 0.22em aus
   base.css - auf der grossen Band-Ueberschrift wirkte das wie ein Haarstrich.
   Die Sonderregel entfaellt, das Band nutzt jetzt dieselbe Markierung wie
   alle anderen Ueberschriften. */

.ctaband__sub {
  margin: 0;
  max-width: 56ch;
  font-family: var(--sans);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);        /* ~7:1 auf Navy -> AA */
}

.ctaband__btn { margin-top: clamp(6px, 1vw, 12px); }

/* Fokus auf dunklem Grund: Lime-Ring mit Navy-Spalt, Pill bleibt Pill */
.ctaband .btn--primary:focus-visible {
  outline: none;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lime), 0 0 0 2px var(--ink), 0 0 0 4px var(--lime);
}

/* Mobile: Button greifbar, sonst identisch (schon zentriert) */
@media (max-width: 519px) {
  .ctaband__btn { width: 100%; }
}

/* Footer-Rechtszeile mobil stapeln (Audit P1): die Zahlungszeile
   "PayPal · Klarna · Apple Pay · Kreditkarte" lief mobil aus dem Viewport.
   sections.css laedt nach components.css -> gewinnt gegen .footer-bottom .pay{margin-left:auto}. */
@media (max-width: 519px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .footer-bottom .pay { margin-left: 0; }
}

/* ===== P2-Politur (Audit) ===== */
/* Reviews-Slider: weicher rechter Fade statt hartem Karten-Schnitt -> Peek wirkt gewollt */
.reviews__slider::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(28px, 6vw, 72px);
  background: linear-gradient(90deg, rgba(22,36,63,0), #1b2c4e);
  pointer-events: none; z-index: 2;
}
/* 404: Sekundaerbutton als Ghost/Outline (Navy-Border), Eyebrow sauberes Lime */
.err404 .eyebrow { color: var(--lime-deep, #8FAE0F); }
.err404 .btn-row .btn:not(.btn--primary) {
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink);
}
.err404 .btn-row .btn:not(.btn--primary):hover { background: var(--ink); color: #fff; box-shadow: none; }

/* =========================================================
   Profi-Athleten: editoriale Proof-Sektion (Klose-Feature,
   Walsham-Karte, Waschburger-Karte). Foto-forward, ruhig, echt.
   ========================================================= */
.athletes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--s5);
  margin-top: var(--s6);
}
.athlete { border-radius: var(--r-media); overflow: hidden; }

/* Feature: grosses Portraet mit Scrim + Text unten */
.athlete--feature {
  position: relative;
  grid-row: 1 / 3;
  min-height: 620px;
}
.athlete--feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.athlete__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(22, 36, 63, 0) 42%, rgba(16, 27, 49, .82) 88%);
}
.athlete--feature .athlete__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(20px, 2.4vw, 32px);
}
.athlete--feature .athlete__name { color: #fff; font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3-lg); margin: 10px 0 6px; }
/* Kein ch-Deckel: der Text laeuft bis zur Kartenkante (Rail-Regel). */
.athlete--feature .athlete__fact { color: rgba(255, 255, 255, .82); font-size: var(--fs-meta); line-height: 1.55; margin: 0; max-width: none; }

.athlete__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--ink);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Kartenspezifischer Altbestand (.athlete--card/__media/__copy, Chip-Variante
   --ink) entfernt (Audit P1): das Duo-Layout rendert nur noch zwei
   .athlete--feature-Karten, siehe blocks/alp-athletes.php. */
.athlete__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--lime-deep);
  font-weight: 600;
  font-size: var(--fs-meta);
  text-decoration: none;
}
.athlete__link svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.athlete__link:hover svg { transform: translateX(3px); }

/* Zitat-Panel (.athlete--quote/__qmark/__quote/__cite/__note) entfernt
   (Audit P1): das Markup existiert nicht mehr. */

.athletes__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin: var(--s5) 0 0;
  font-size: var(--fs-micro);
  color: var(--ink-subtle);
}
.athletes__credit { font-size: var(--fs-micro); }

@media (max-width: 959px) {
  .athletes__grid { grid-template-columns: 1fr; }
  .athlete--feature { grid-row: auto; min-height: 480px; }
}

/* Handy: Produktcluster im Hero ausblenden (User-Vorgabe) - Copy traegt allein */
@media (max-width: 767px) {
  .hero__visual { display: none; }
}

/* RWD-Review: Hero-Trust-Zeile @Handy stapeln, lesbar auf hellem Panorama */
@media (max-width: 599px) {
  .hero__trust { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero__trust span {
    background: rgba(255, 255, 255, .85);
    border-radius: var(--r-pill);
    padding: 6px 12px;
    color: var(--ink);
  }
}

/* =========================================================
   Profi-Sektion Trio-Layout: drei gleichwertige Karten auf der 1200er-Rail.
   Klose und Walsham als Foto-Feature, Waschburger als Navy-Text-Karte,
   solange sein Foto fehlt. Liegt das Foto vor, rendert PHP dort eine dritte
   Foto-Karte, das Grid bleibt unveraendert (siehe inc/athletes.php).
   ========================================================= */
.athletes__grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
.athletes__grid--trio .athlete--feature img { object-position: 50% 24%; }

/* Der Textblock liegt hier im Fluss statt absolut am Kartenboden: eine lange
   Erfolgsliste laesst die Karte wachsen, statt nach oben ins Portraet zu
   laufen. margin-top haelt in jedem Fall ein Bildfenster frei, damit Kopf und
   Schultern sichtbar bleiben. Im Grid ziehen die Geschwisterkarten mit. */
.athletes__grid--trio .athlete--feature {
  grid-row: auto;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.athletes__grid--trio .athlete--feature .athlete__body {
  position: relative;
  inset: auto;
  /* Bildfenster bewusst gross: bei Waschburger deckte die Erfolgsliste sonst
     fast die ganze Karte zu ("man sieht Andreas kaum", 02.08.2026). Weil die
     Karten im Grid gleich hoch ziehen, gewinnen alle drei Portraets Luft. */
  margin-top: 330px;
}

/* Die Karten tragen jetzt eine Erfolgsliste: der Scrim deckt hoeher, damit der
   Text auf jedem Bildausschnitt sicher lesbar bleibt. */
.athletes__grid--trio .athlete__scrim {
  background: linear-gradient(184deg, rgba(22, 36, 63, 0) 22%, rgba(16, 27, 49, .50) 46%, rgba(13, 22, 41, .86) 68%, rgba(11, 19, 36, .95) 100%);
}

.athlete__link--light { color: #fff; margin-top: 8px; }
.athlete__link--light:hover { color: var(--lime); }

/* Text-Karte: gleicher Duktus wie die Foto-Karten (Chip, Name, Palmares),
   nur mit Navy-Panel statt Bild. Kein Platzhalterbild, keine leere Flaeche. */
.athlete--text {
  position: relative;
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(120% 72% at 14% 0%, rgba(166, 198, 28, .17) 0%, rgba(166, 198, 28, 0) 58%),
    linear-gradient(168deg, #1E3157 0%, var(--ink) 54%, #101B31 100%);
  box-shadow: var(--sh-card);
}
.athlete--text .athlete__body { width: 100%; padding: clamp(20px, 2.4vw, 32px); }
.athlete--text .athlete__name {
  color: #fff; font-family: var(--serif); font-weight: 600;
  font-size: var(--fs-h3-lg); margin: 10px 0 6px;
}
.athlete--text .athlete__fact { color: rgba(255, 255, 255, .82); font-size: var(--fs-meta); line-height: 1.55; margin: 0; max-width: none; }

/* Palmares: Erfolge als Liste mit Lime-Punkt statt Bullet. Kein Breitendeckel,
   der Text laeuft bis zur Kartenkante (Rail-Regel). */
.athlete__palmares { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 7px; max-width: none; }
.athlete__palmares li {
  position: relative;
  padding-left: 19px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: rgba(255, 255, 255, .9);
}
.athlete__palmares li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--lime);
}
/* Fakt-Zeile sitzt als Vereins-/Kontextzeile direkt unter dem Namen. */
.athletes__grid--trio .athlete__fact + .athlete__palmares { margin-top: var(--s3); }

@media (max-width: 1099px) {
  .athletes__grid--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .athletes__grid--trio { grid-template-columns: 1fr; }
  /* Untereinander traegt jede Karte ihre eigene Hoehe: mehr Portraet als in der
     alten 460er-Buehne, in der die Erfolgsliste das Gesicht ueberdeckt hat. */
  .athletes__grid--trio .athlete--feature { min-height: 500px; }
  .athletes__grid--trio .athlete--feature .athlete__body { margin-top: 290px; }
}

/* =========================================================
   Vier Athleten (Strebinger kam am 11.08.2026 dazu): zwei mal zwei statt
   vier Spalten. Auf der 1200er-Rail waeren vier Spalten nur 285px breit -
   bei dieser Breite hat die Erfolgsliste schon einmal das Portraet zugedeckt.
   Zwei breite Reihen geben Namen und Liste Platz und halten das Foto sichtbar.
   ========================================================= */
.athletes__grid--quartett {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
}
/* .athlete--feature traegt aus dem Ursprungslayout ein festes
   grid-row: 1 / 3. Bei zwei Spalten rutschen Karte 3 und 4 dadurch in
   implizite Zusatzspalten und verschwinden aus dem sichtbaren Bereich.
   Im Vierer-Raster fliessen die Karten deshalb normal. */
.athletes__grid--quartett .athlete--feature { grid-row: auto; min-height: 560px; }
/* Breitere, weniger hohe Karte: der Bildausschnitt muss weiter nach oben,
   sonst schneidet die Karte den Kopf ab. */
.athletes__grid--quartett .athlete--feature img { object-position: 50% 10%; }
@media (max-width: 959px) {
  .athletes__grid--quartett { grid-template-columns: 1fr; }
  /* Einspaltig wird die Karte sehr breit und flach. Mit den 480px aus der
     Grundregel schnitt der Ausschnitt oben den Kopf ab (Kundenbefund
     12.08.2026). Mehr Hoehe und ein hoeher sitzender Ausschnitt halten das
     Gesicht im Bild. */
  .athletes__grid--quartett .athlete--feature { min-height: 560px; }
  .athletes__grid--quartett .athlete--feature img { object-position: 50% 8%; }
}