/* 01-hero.css — Hero: Foto-Sequenz des Shops (seit 17.09.2026, vorher freigestelltes Trek-Bike) + Slogan + zwei Service-Einstiege als Foto-Karten. Besitzer: Hero-Agent.
   Nur Rollen-/CI-Tokens aus site.css; einzige lokale Farbe: --rad-hero-top (Template-Studioton oben im CI-Warmton, DESIGN-SPEC 01-hero). */

.rad-hero{
  --rad-hero-top:#1A1915;
  --rad-hero-h:clamp(720px,56.25vw,100vh);    /* 810 @1440 · 1080 @1920 · 950 @1920×950; svh-Variante unten per @supports */
  /* Beide Karten liegen vollständig im Hero (Kundenwunsch 08.09.2026): der Stapel teilt sich den Platz
     zwischen Oberkante (160 tpx) und Unterkante (48 tpx Luft), Abstand 32 tpx. Kein Anschnitt, kein Peek-Lift. */
  /* Der Hero behält den schmalen Rand von vor dem seitlichen Einzug (Kundenhinweis 09.09.2026): mit dem
     großen Einzug (380 px @1920) klaffte rechts neben den Karten eine leere Fläche, während das Hintergrund-
     Bike weiter randlos lief — das wirkte unstimmig. Gilt nur innerhalb des Heros; alle übrigen Sektionen
     behalten den Einzug. Werte wie zuvor: 60 @1920 · 45 @1440 · 31 @1000 · 20 @≤650. */
  --vn-gutter:max(20px,calc(60 * var(--rad-tpx)));
  --rad-hero-cards-top:calc(160 * var(--rad-tpx));
  --rad-hero-cards-bottom:calc(40 * var(--rad-tpx));   /* 19.09.2026: gleicher Abstand wie der Slogan, die Spalte haengt jetzt unten */
  --rad-hero-cards-gap:calc(32 * var(--rad-tpx));
  /* overflow:clip statt hidden: kein Scroll-Container → Tastaturfokus auf die angeschnittene Karte 2 kann die Sektion
     nicht mehr intern verschieben (hidden erlaubte programmatisches Scrollen, gemessen scrollTop 16). hidden bleibt als Fallback. */
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;
  height:var(--rad-hero-h);
  background:linear-gradient(180deg,var(--rad-hero-top) 0%,var(--vn-color-surface-dark) 45%,var(--vn-color-surface-darker) 100%);
  color:var(--vn-color-on-dark);
}
/* Vignette und Lesbarkeitsverlauf (ink-950 mit Alpha) */
.rad-hero::before,.rad-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
/* Scrims über dem Foto: links leicht (Slogan), nach rechts offen; unten Boden für Slogan und Karten.
   23.09.2026 (Kundenwunsch) deutlich zurückgenommen: das Hero-Foto ist seit heute selbst dunkel gegradet (hero-theke),
   die alten Werte (78/52/22/40 % seitlich, 82/30 % unten) stammten aus der hellen Foto-Sequenz und machten es doppelt dunkel. */
.rad-hero::before{background:linear-gradient(90deg,color-mix(in srgb,var(--vn-color-surface-darker) 38%,transparent) 0%,color-mix(in srgb,var(--vn-color-surface-darker) 14%,transparent) 42%,transparent 70%,color-mix(in srgb,var(--vn-color-surface-darker) 22%,transparent) 100%)}
.rad-hero::after{background:linear-gradient(0deg,color-mix(in srgb,var(--vn-color-surface-darker) 62%,transparent) 0%,color-mix(in srgb,var(--vn-color-surface-darker) 14%,transparent) 32%,transparent 50%)}
/* 28.09.2026 (Kundenwunsch): obere Hälfte ohne Überlagerung. Der Seitenverlauf wirkt nur noch unten, eingeblendet ab der
   Mitte; der Bodenverlauf (::after) endete schon bei 50 %. */
.rad-hero::before{-webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 62%);mask-image:linear-gradient(180deg,transparent 50%,#000 62%)}

/* Foto-Sequenz (Kundenwunsch 17.09.2026): Slides liegen absolut unter den Scrims; die aktive zoomt langsam (Ken Burns, 9 s linear),
   die abgelöste bleibt bis zum Ende der 1,8-s-Überblendung darunter sichtbar, damit nichts durchblitzt (01-hero.js schaltet die
   Klassen). is-static hält Slide 1 beim ersten Paint auf Maßstab 1, das Skript nimmt es im nächsten Frame weg → der Zoom beginnt.
   Ohne JS und unter reduced-motion steht Slide 1. */
.rad-hero__slides{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--vn-color-surface-darker)}
.rad-hero__slide{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;opacity:0;transform:scale(1);
  transition:opacity 1800ms var(--vn-ease-in-out),transform 9000ms linear}
.rad-hero__slide.is-active{opacity:1;z-index:2;transform:scale(1.07)}
.rad-hero__slide.is-static{transform:scale(1)}
.rad-hero__slide.is-leaving{opacity:1;z-index:1;transform:scale(1.07)}

/* Desktop: Das Foto füllt den ganzen Hero (object-fit:cover, Grundregel oben). Die Wappen-Ausrichtung vom 23.09. (Wappen
   über bzw. neben dem Slogan) ist mit dem Wechsel auf das Verkaufsraum-Foto am selben Abend entfallen — Vorher-CSS im
   Sitzungs-Scratchpad (01-hero-vor-raum.css). */

/* h1: drei Versalzeilen unten links (Slogan), Zeile 3 Gold */
.rad-hero__text{position:absolute;left:var(--vn-gutter);bottom:calc(40 * var(--rad-tpx));z-index:1;max-width:62%}
/* Eyebrow = h1: der Ortsbezug steht klein ueber dem Slogan, gesperrt und gedaempft, damit der Slogan die Flaeche behaelt */
.rad-hero__eyebrow{overflow:hidden;margin:0 0 clamp(10px,1vw,16px);
  font:600 max(.8125rem,calc(15 * var(--rad-tpx)))/1.35 var(--vn-font-body);letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--vn-color-on-dark) 82%,transparent);text-wrap:balance}
.rad-hero__eyebrow>span{display:block}
.rad-hero__title{
  margin:0;
  font-family:var(--vn-font-display);font-size:var(--vn-text-hero);font-weight:var(--rad-w-display);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--vn-color-on-dark);
}
/* Slogan: drei Zeilen. Die Einfahrt aus der Maske ist am 19.09.2026 entfallen (Kundenwunsch: die Inhalte der
   Herosektion sollen ohne Verzoegerung dastehen) — sie haing am Intro-Versatz und war erst nach rund 1,4 s
   abgeschlossen. Der Clip bleibt: er gibt den Zeilen 6 % Luft, damit Punkte und Unterlaengen nicht abschneiden. */
.rad-hero__line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.rad-hero__word{display:block}
.rad-hero__line--accent{color:var(--vn-color-accent-on-dark)}

/* Bewertungszeile unter dem Slogan (23.09.2026, Kundenwunsch; der Anruf-Knopf darunter ist wieder entfernt). Die Höhe steht als Variable fest. Stil der Bewertung nach Kundenvorlage:
   überlappende Kreise mit hellem Ring, fünf Sterne, darunter die Kennzahl gedämpft. */
.rad-hero{--rad-hero-v-top:max(18px,calc(30 * var(--rad-tpx)));--rad-hero-bew-h:max(38px,calc(46 * var(--rad-tpx)))}
.rad-hero__vertrauen{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--rad-hero-v-top)}
.rad-hero__bewertung{display:inline-flex;align-items:center;gap:max(12px,calc(16 * var(--rad-tpx)));height:var(--rad-hero-bew-h);color:inherit;text-decoration:none}
.rad-hero__gesichter{display:flex}
.rad-hero__gesicht{display:grid;place-items:center;width:var(--rad-hero-bew-h);height:var(--rad-hero-bew-h);margin-left:calc(var(--rad-hero-bew-h) * -.2);
  border-radius:50%;border:2px solid color-mix(in srgb,var(--vn-color-on-dark) 88%,transparent);
  font:600 calc(var(--rad-hero-bew-h) * .32)/1 var(--vn-font-body);letter-spacing:.03em;background:var(--vn-color-surface-raised-2);color:var(--vn-color-on-dark)}
.rad-hero__gesicht:first-child{margin-left:0}
.rad-hero__gesicht img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rad-hero__gesicht:has(img){background:var(--vn-color-surface-raised-2)}
.rad-hero__gesicht:nth-child(1){background:var(--vn-color-accent);color:var(--vn-color-ink)}
.rad-hero__gesicht:nth-child(2){background:var(--vn-color-surface-raised-3)}
.rad-hero__gesicht:nth-child(3){background:var(--vn-color-accent-pale);color:var(--vn-color-ink)}
.rad-hero__gesicht:nth-child(4){background:var(--vn-color-accent-ink)}
.rad-hero__bewertung-text{display:flex;flex-direction:column;gap:5px}
.rad-hero__sterne{display:flex;gap:3px}
.rad-hero__stern{width:max(15px,calc(18 * var(--rad-tpx)));height:auto;fill:var(--vn-color-accent-on-dark)}
.rad-hero__bewertung-zeile{font:500 max(.8125rem,calc(15 * var(--rad-tpx)))/1.2 var(--vn-font-body);color:var(--vn-color-on-dark-muted);transition:color var(--vn-d-medium,200ms)}
.rad-hero__bewertung:is(:focus-visible) .rad-hero__bewertung-zeile{color:var(--vn-color-on-dark)}
@media(hover:hover){.rad-hero__bewertung:is(:hover,:focus-visible) .rad-hero__bewertung-zeile{color:var(--vn-color-on-dark)}}
.rad-hero__bewertung:focus-visible{outline:2px solid var(--vn-color-accent-on-dark);outline-offset:4px;border-radius:999px}
/* Kartenspalte rechts: 465 tpx breit, ab 160 tpx; beide Karten vollständig sichtbar */
.rad-hero__cards{
  /* unten verankert, damit die untere Kartenkante mit der Slogan-Grundlinie fluchtet (Kundenwunsch 19.09.2026) */
  position:absolute;right:var(--vn-gutter);bottom:var(--rad-hero-cards-bottom);z-index:1;
  /* 19.09.2026 (Kundenwunsch): kompakter — schmaler und ueber das Seitenverhaeltnis gedeckelt, damit die Karten beim
     Schrumpfen nicht hochformatig ausfransen. Die Breite steht als Variable, weil die Kartenhoehe sie braucht. */
  --rad-hero-card-b:max(264px,calc(460 * var(--rad-tpx)));   /* 28.09.2026: breiter für die helle Karte mit Foto links, vorher 380 */
  width:var(--rad-hero-card-b);
  display:flex;flex-direction:column;gap:var(--rad-hero-cards-gap);
}
.rad-hero__card{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  /* Beide Karten teilen sich die Resthöhe des Heros — nichts wird abgeschnitten. */
  height:min(calc((var(--rad-hero-h) - var(--rad-hero-cards-top) - var(--rad-hero-cards-bottom) - var(--rad-hero-cards-gap)) / 2),
             calc(var(--rad-hero-card-b) * 1.12));
  border-radius:var(--vn-radius-xl);border:0;
  /* 28.09.2026 (Kundenwunsch, Variante B): helle Karte, Foto als Streifen links (--rad-hero-card-foto), Text rechts auf Papier.
     Vorher Foto als Fläche mit dunklem Verlauf — derselbe Ladenraum wie im Hintergrund, die Karten gingen darin unter. */
  /* Fotoanteil als Zahl: das Foto nimmt ihn in % der Karte, der Textblock als Einzug in cqw — Prozent-Padding der Karte
     hinge an der Breite der ganzen Kartenreihe. Die Kartenbreite kommt immer von außen (Variable bzw. Grid-Spalte). */
  container-type:inline-size;
  --rad-hero-card-foto:.36;--rad-hero-card-pad:max(16px,calc(22 * var(--rad-tpx)));
  padding:var(--rad-hero-card-pad);
  background:var(--vn-color-paper);
  box-shadow:var(--rad-glow-shadow);
  /* zweite Animation = die Drehung des Hover-Scheins; sie steht still, bis gehovert wird (erste bleibt laufend) */
  --rad-glow-o:0;transition:--rad-glow-o 300ms cubic-bezier(.45,.05,.55,.95);
  color:var(--vn-color-ink);text-decoration:none;
  /* 19.09.2026: Das Einfahren von rechts ist entfallen, die Karten stehen sofort. Uebrig bleibt die Drehung des
     Hover-Scheins — sie ist jetzt die EINZIGE Animation, deshalb hat animation-play-state auch nur noch einen Wert. */
  animation:rad-glow-dreh 22s linear infinite;
  animation-play-state:paused;
}
.rad-hero__card-img{position:absolute;inset:0 auto 0 0;z-index:0;width:calc(var(--rad-hero-card-foto) * 100%);height:100%;object-fit:cover;object-position:50% 50%}
.rad-hero__card-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;margin-left:calc(var(--rad-hero-card-foto) * (100cqw + 2 * var(--rad-hero-card-pad)))}   /* cqw misst die Inhaltsbreite, ohne Padding */
/* Titel: Schimmer + Schein beim Hover (rad-shine, site.css 1.10) */
.rad-hero__card-title{display:inline;align-self:flex-start;font:500 max(1.125rem,calc(22 * var(--rad-tpx)))/1.25 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-ink);text-wrap:balance}
.rad-hero__card-text{font:400 var(--vn-text-sm)/1.5 var(--vn-font-body);color:var(--vn-color-ink-muted);transition:color var(--vn-d-slow)}
.rad-hero__card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:600 var(--vn-text-sm)/1.3 var(--vn-font-body);color:var(--vn-color-accent-text)}
.rad-hero__card-cta .rad-arrow{width:18px;height:18px}

/* Hover/Fokus (Kundenwunsch 17.09.2026: kein Pfeil, keine hüpfende Karte): Foto wird etwas satter, Schein um die Karte,
   Zeile wird dunkler. 28.09.2026: kein Zoom mehr — das Foto ist nur ein Streifen und würde in den Text wachsen. Der Pfeil der
   Handlungszeile steht fest. */
.rad-hero__card-img{transition:filter 700ms var(--vn-ease-out)}
.rad-hero__card:is(:focus-visible){--rad-glow-o:1;animation-play-state:running;
  transition:--rad-glow-o 300ms cubic-bezier(.45,.05,.55,.95)}
@media(hover:hover){.rad-hero__card:is(:hover,:focus-visible){--rad-glow-o:1;animation-play-state:running;
  transition:--rad-glow-o 300ms cubic-bezier(.45,.05,.55,.95)}}
.rad-hero__card:is(:focus-visible) .rad-hero__card-img{filter:saturate(1.12) brightness(1.04)}
@media(hover:hover){.rad-hero__card:is(:hover,:focus-visible) .rad-hero__card-img{filter:saturate(1.12) brightness(1.04)}}
.rad-hero__card:is(:focus-visible) .rad-hero__card-text{color:var(--vn-color-ink)}
@media(hover:hover){.rad-hero__card:is(:hover,:focus-visible) .rad-hero__card-text{color:var(--vn-color-ink)}}
.rad-hero__card:focus-visible{outline:none}
.rad-hero__card:focus-visible::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--vn-radius-xl);box-shadow:inset 0 0 0 3px var(--vn-color-accent)}

/* Hero-Höhe an svh koppeln (Browserleiste am Handy zählt nicht mit); ohne svh-Support bleibt die vh-Zeile oben */
@supports (height:100svh){
  .rad-hero{--rad-hero-h:clamp(720px,56.25vw,100svh)}
}

/* Einlauf (23.09.2026, Kundenwunsch — kehrt die Entscheidung vom 19.09. um): Ortszeile und die drei Slogan-Zeilen
   steigen gestaffelt aus ihrer Maske (.rad-hero__line / .rad-hero__eyebrow haben overflow:hidden), danach heben sich
   die zwei Karten ein. Die Animationen stehen pausiert im Startzustand, bis 00-shell.js .rad-hero-go an <html> setzt —
   das passiert in dem Moment, in dem sich der Intro-Vorhang lueftet. Ohne diese Kopplung liefe alles unsichtbar
   hinter dem Vorhang ab. Ohne JS (kein html.rad-js) und unter reduced-motion steht alles sofort.
   Die Karten tragen schon eine Animation (Drehung des Hover-Scheins) — deshalb hier eine Liste mit zwei Eintraegen. */
html.rad-js .rad-hero__eyebrow>span,
html.rad-js .rad-hero__word{animation:rad-hero-steig 1000ms var(--vn-ease-out) both;animation-play-state:paused}
html.rad-js .rad-hero__line:nth-child(1) .rad-hero__word{animation-delay:120ms}
html.rad-js .rad-hero__line:nth-child(2) .rad-hero__word{animation-delay:220ms}
html.rad-js .rad-hero__line:nth-child(3) .rad-hero__word{animation-delay:320ms}
html.rad-js .rad-hero__card{animation:rad-hero-karte 1000ms var(--vn-ease-out) 520ms both,rad-glow-dreh 22s linear infinite;
  animation-play-state:paused,paused}
html.rad-js .rad-hero__card+.rad-hero__card{animation-delay:640ms,0s}
html.rad-js .rad-hero__vertrauen{animation:rad-hero-karte 1000ms var(--vn-ease-out) 460ms both;animation-play-state:paused}
html.rad-hero-go .rad-hero__eyebrow>span,
html.rad-hero-go .rad-hero__word,
html.rad-hero-go .rad-hero__vertrauen{animation-play-state:running}
html.rad-hero-go .rad-hero__card{animation-play-state:running,paused}
html.rad-hero-go .rad-hero__card:is(:focus-visible){animation-play-state:running,running}
@media(hover:hover){html.rad-hero-go .rad-hero__card:is(:hover,:focus-visible){animation-play-state:running,running}}
@keyframes rad-hero-steig{from{transform:translateY(105%)}to{transform:none}}
@keyframes rad-hero-karte{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

/* Desktop, Karten (23.09.2026, Kundenwunsch): nebeneinander statt gestapelt — die obere steht jetzt links neben der
   unteren — und flacher, im Format 3:2. Unten rechts verankert wie bisher, Unterkante fluchtet mit der Slogan-Grundlinie.
   Steht bewusst NACH den Grundregeln der Karten, sonst gewinnen die (gleiche Spezifität, spätere Regel). */
@media(min-width:1001px){
  .rad-hero__cards{width:auto;flex-direction:row}
  .rad-hero__card{width:var(--rad-hero-card-b);height:auto;justify-content:flex-start}   /* oben ausgerichtet: Titel fluchten, auch wenn eine Handlungszeile umbricht */
  .rad-hero__card-body{flex:1 1 auto}
  .rad-hero__card-cta{margin-top:auto;padding-top:4px}   /* Handlungszeilen unten auf einer Linie */
}

/* ≤1000: gestapelt, nichts angeschnitten, Karten als 2-Spalten-Grid */
@media(max-width:1000px){
  .rad-hero{
    height:auto;min-height:90svh;   /* 28.09.2026 (Kundenwunsch): 90 % statt 100 % */
    padding:calc(var(--rad-header-h) + 24px) var(--vn-gutter) 48px;
    display:flex;flex-direction:column;justify-content:end;gap:32px;
  }
  .rad-hero__text{position:relative;left:auto;bottom:auto;max-width:none}
  .rad-hero__title{font-size:clamp(3rem,7.5vw,4.5rem)}
  .rad-hero__cards{position:relative;right:auto;top:auto;bottom:auto;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}   /* bottom:auto — sonst verschob der Desktop-Wert die Reihe relativ nach oben */
  .rad-hero__card{height:auto;min-height:160px}
  /* 28.09.2026 (Kundenwunsch): ruhigere Abstände — Dachzeile 14, Slogan → Bewertung 24, Bewertung → Karten 36, unten 40 */
  .rad-hero{gap:36px;padding-bottom:40px;--rad-hero-v-top:24px}
  .rad-hero__eyebrow{margin-bottom:14px}
}

/* ≤650: Kartenreihe als horizontaler Snap-Scroller, Karte 2 lugt rechts hinein */
@media(max-width:650px){
  .rad-hero__cards{
    display:flex;flex-direction:row;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--vn-gutter));padding-inline:var(--vn-gutter);padding-bottom:8px;
    scroll-padding-inline:var(--vn-gutter);   /* Snap-Bereich am Gutter ausrichten, sonst scrollt der Browser Karte 1 an die Bildschirmkante */
  }
  .rad-hero__cards::-webkit-scrollbar{display:none}
  .rad-hero__card{flex:0 0 80%;min-width:0;scroll-snap-align:start;height:auto}   /* min-width:0: lange Titel weiten die Karte nicht */
  .rad-hero__title{font-size:clamp(2.75rem,12vw,3.5rem)}
  /* 23.09.2026 (Kundenwunsch): Slogan und Einstiege nach unten, damit mehr Foto zu sehen ist.
     28.09.2026 (Kundenwunsch, Variante M3): statt zwei gequetschter Karten zwei Knöpfe ohne Foto nebeneinander,
     „Bike probefahren“ gold als Hauptaktion. */
  .rad-hero{gap:20px;padding-bottom:24px}
  /* 28.09.2026 (Kundenwunsch): Hero 90 % der Bildschirmhöhe statt 100 %; Abstände Dachzeile 12, Slogan → Bewertung 20,
     Bewertung → Knöpfe 28, unten 32 */
  .rad-hero{min-height:90svh;gap:28px;padding-bottom:32px;--rad-hero-v-top:20px}
  /* 28.09.2026 (Kundenwunsch): ein Verlauf von unten, deckender, der genau auf halber Bildschirmhöhe ausläuft (50svh von oben);
     darüber liegt nichts auf dem Foto. Der Seitenverlauf entfällt am Handy. */
  .rad-hero::before{display:none}
  /* 28.09.2026 (Kundenwunsch „Bikes sehen“, dann „unscharf“): eigener Handy-Ausschnitt hero-raum-mobil-* (per <picture>) aus dem
     Originalfoto 7827 px, Look an hero-raum angeglichen (Kunden/das-rad/Assets/Hero-Theke-2026-09-23/hero-mobil-ausschnitt.py).
     Vorher wurde das 1280er-Bild um 40 % hochgezogen und damit gut dreifach vergrößert. */
  .rad-hero::after{background:linear-gradient(0deg,color-mix(in srgb,var(--vn-color-surface-darker) 90%,transparent) 0%,
    color-mix(in srgb,var(--vn-color-surface-darker) 72%,transparent) 28%,color-mix(in srgb,var(--vn-color-surface-darker) 28%,transparent) calc(100% - 58svh),
    transparent calc(100% - 50svh))}
  .rad-hero__eyebrow{margin-bottom:12px}
  .rad-hero__cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;margin-inline:0;padding:0}
  .rad-hero__card{height:auto;min-height:48px;padding:14px 12px;border-radius:999px;justify-content:center;align-items:center}
  .rad-hero__card+.rad-hero__card{background:var(--vn-color-accent)}
  .rad-hero__card:focus-visible::after{border-radius:inherit}
  .rad-hero__card-img,.rad-hero__card-text,.rad-hero__card-cta{display:none}
  .rad-hero__card-body{margin-left:0;align-items:center}
  .rad-hero__card-title{align-self:center;font:600 .9375rem/1.2 var(--vn-font-body);letter-spacing:0;text-align:center}
  /* Bewertungszeile einzeilig halten: kleinere Kreise, nur drei davon */
  .rad-hero{--rad-hero-bew-h:32px}
  .rad-hero__gesicht:nth-child(4){display:none}
  .rad-hero__bewertung{gap:10px}
  .rad-hero__bewertung-zeile{font-size:var(--vn-text-micro)}
}

/* reduced-motion: Endzustand sofort (site.css legt zusätzlich global alle Animationen still) */
@media(prefers-reduced-motion:reduce){
  .rad-hero__slide{transition:none}
  .rad-hero__slide.is-active{transform:none}
  .rad-hero__card,.rad-hero__card-img,.rad-hero__card-title{transition:none}
}