/* Sportpferde Wassenberg — Entwurf
   Designsprache „Abendweide“: ein Schwarz als Grund, die Fotos tragen die Farbe. Überschriften mit Silberverlauf,
   ein Akzent „Cognac“ (Sattelleder: Cognac → Kastanie als Verlauf) nur für Knöpfe, Fokus und kleine Hervorhebungen.
   Regel-Kürzel (T, F, A, L, B, M, P …) verweisen auf den Web-Leitfaden nach Apples Human Interface Guidelines. */

/* ---------- Tokens ---------- */
:root{
  color-scheme: dark;                                   /* D6: nur dunkel – bildstarke Seite */
  --bg:#0A0A0B;                                         /* ein Schwarz als Grund, keine Abschnittsflächen */
  --surface:#141416; --surface-2:#1D1D21;               /* Karten, keine Abschnittsflächen */
  --line:rgba(244,242,238,.12); --line-2:rgba(244,242,238,.24);
  --text:#F4F2EE; --text-2:#B9B6B0; --text-3:#9A9792;   /* F4/P07 gemessen: 17,7 · 9,8 · 6,8 : 1 auf --bg */
  /* F1/F2: Akzent nur für Bedienung und Status. Zwei Töne aus Sattelleder:
     Knopf = Verlauf Cognac #9C6034 → Kastanie #4E2914, Schrift Creme #FFF6EC: 4,75:1 am hellsten Punkt, 11,9:1 am dunkelsten (F4, gemessen).
     Linien, Punkte, Fokus, kleine Schrift = helles Cognac #C38B5A: 6,75:1 auf --bg, 5,73:1 auf --surface-2. */
  --accent:#C38B5A; --accent-a:#9C6034; --accent-b:#4E2914; --on-accent:#FFF6EC;
  --accent-grad:linear-gradient(160deg, var(--accent-a) 0%, var(--accent-b) 100%);
  --ok:#95D47A; --wait:#F2D36B; --err:#FF9C90; --neutral:#9A9792;   /* Status, nie allein über Farbe (F5/P08) */
  --grad:linear-gradient(100deg,#F4F5F7 0%,#C9CDD3 48%,#9A9FA6 100%);   /* Silberverlauf: Weiß → Silber → Grau, dunkelste Stelle 7,4:1 auf --bg */
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* T4: eine Familie */

  /* T1–T3: Skala; Fließtext 17 px */
  --t-h1:clamp(2.125rem, 1.35rem + 3vw, 4.25rem);
  --t-h2:clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --t-h3:1.375rem;
  --t-lead:clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --t-body:1.0625rem; --t-small:.9375rem; --t-cap:.8125rem;

  /* A1: 4er/8er-Raster */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gut:16px; --r-card:28px; --r-ui:16px; --peek:84px; --bar:56px;   /* --peek: sichtbarer App-Kopf am unteren Rand (Griff, Symbol, Name) */

  /* B3: Bewegung */
  --ease:cubic-bezier(.22,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --d-1:160ms; --d-2:280ms; --d-3:480ms; --d-4:700ms;
}
@media (min-width:600px){ :root{ --gut:24px; } }
@media (min-width:1000px){ :root{ --gut:32px; --bar:64px; } }
@media (prefers-contrast: more){   /* D3/F6: erhöhter Kontrast */
  :root{ --text-2:#E2DFD9; --text-3:#CFCBC5; --line:rgba(244,242,238,.32); --line-2:rgba(244,242,238,.5); --grad:linear-gradient(100deg,#FFFFFF 0%,#E4E6EA 100%); }
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--bar) + 24px); }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--bg); color:var(--text); font:400 var(--t-body)/1.5 var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ display:block; max-width:100%; height:auto; -webkit-user-drag:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }   /* P22 */
h1,h2,h3{ margin:0; font-weight:600; text-wrap:balance; }
p{ margin:0; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:16px; top:-80px; z-index:100; background:var(--text); color:#0A0A0B; padding:12px 18px; border-radius:12px; font-weight:600; }
.skip:focus{ top:16px; }
.wrap{ width:100%; max-width:calc(1200px + 2 * var(--gut)); margin-inline:auto; padding-inline:max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); }

.eyebrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 var(--s-3); font-size:.875rem; font-weight:600; letter-spacing:.01em; color:var(--text-2); }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding-bottom:.14em; }   /* T1: Unterlängen (g, p, y) liegen sonst außerhalb der Malfläche und werden abgeschnitten */
.lead{ margin-top:var(--s-4); max-width:60ch; font-size:var(--t-lead); line-height:1.5; color:var(--text-2); text-wrap:pretty; }
.fine{ font-size:var(--t-cap); color:var(--text-3); }
.tag{ display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border-radius:999px; background:rgba(244,242,238,.1); color:var(--text-2); font-size:var(--t-cap); font-weight:600; letter-spacing:.02em; }
.tag--glass{ background:rgba(10,10,11,.78); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }

/* ---------- Knöpfe (P21: ≥ 44 px, P22: alle Zustände) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 24px; border:0; border-radius:999px; font:600 1rem/1 var(--font); letter-spacing:-.005em; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease), transform var(--d-1) var(--ease); }
.btn svg{ width:20px; height:20px; flex:none; }
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.4; cursor:default; }
.btn--light{ background:var(--text); color:#0A0A0B; }
.btn--light:hover{ background:#FFFFFF; box-shadow:0 0 0 5px rgba(244,242,238,.16); }
/* F2/F3: Hauptaktion je Ansicht. Leder-Verlauf mit feiner Lichtkante oben; Creme-Schrift ≥ 4,75:1 an jeder Stelle */
.btn--accent{ background:var(--accent-a) var(--accent-grad); color:var(--on-accent);
  box-shadow:inset 0 1px 0 rgba(255,232,206,.26), inset 0 0 0 1px rgba(255,232,206,.10), 0 8px 22px -10px rgba(78,41,20,.9); }
.btn--accent:hover{ box-shadow:inset 0 1px 0 rgba(255,232,206,.34), inset 0 0 0 1px rgba(255,232,206,.18), 0 0 0 4px rgba(195,139,90,.28); }
.btn--ghost{ background:rgba(244,242,238,.08); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover{ background:rgba(244,242,238,.15); }
.btn--glass{ background:rgba(10,10,11,.66); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }   /* M2: kein Blur im Inhalt */
.btn--glass:hover{ background:rgba(10,10,11,.85); }
.btn--sm{ min-height:44px; padding:0 18px; font-size:var(--t-small); }
.btn--wide{ width:100%; }
.round{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:50%; border:1px solid var(--line-2); background:rgba(244,242,238,.06); color:var(--text); cursor:pointer; transition:background-color var(--d-1) var(--ease), opacity var(--d-1); }
.round svg{ width:22px; height:22px; }
.round:hover{ background:rgba(244,242,238,.14); }
.round:active{ transform:scale(.95); }
.round:disabled{ opacity:.3; cursor:default; }
.round--sm{ width:44px; height:44px; }
.link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--text); font-weight:600; text-decoration:none; }
.link svg{ width:18px; height:18px; color:var(--accent); transition:transform var(--d-1) var(--ease); }
.link:hover{ text-decoration:underline; text-underline-offset:4px; }
.link:hover svg{ transform:translateX(3px); }

/* ---------- Menü: volle Breite, dezent (L4: Bedienung als eigene Ebene; M1: Material nur hier) ---------- */
.nav{ position:fixed; z-index:50; top:0; left:0; right:0; padding-top:env(safe-area-inset-top);
  transition:background-color var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease); }
.nav-on .nav, .nav--always{ background:rgba(10,10,11,.94); box-shadow:inset 0 -1px 0 var(--line); }
/* Im Hero kein Menü: Die Leiste erscheint erst, wenn die App oben ankommt (L4). Ohne Skript bleibt sie sichtbar.
   Per Tastatur erreichbar: Fokus in der Leiste zeigt sie sofort (Z3). */
.js .nav:not(.nav--always){ opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity var(--d-2) var(--ease), transform var(--d-3) var(--ease-out), background-color var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease); }
.js.nav-on .nav, .js .nav:focus-within{ opacity:1; transform:none; pointer-events:auto; }
/* Großer Titel → kleiner Titel wie in iOS: Symbol und Name stehen im App-Kopf; erst wenn der unter der Leiste verschwindet, zeigt die Leiste den Namen */
.js .nav:not(.nav--always) .nav__brand{ opacity:0; pointer-events:none; transition:opacity var(--d-2) var(--ease); }
.js.head-gone .nav .nav__brand, .js .nav:focus-within .nav__brand{ opacity:1; pointer-events:auto; }
@media (min-width:1000px) and (hover:hover){   /* M2: Glas nur am Rechner, Handy bleibt ohne Unschärfe (Ruckeln auf älteren iPhones) */
  .nav-on .nav, .nav--always{ background:rgba(10,10,11,.8); -webkit-backdrop-filter:saturate(150%) blur(16px); backdrop-filter:saturate(150%) blur(16px); }
}
@media (prefers-reduced-transparency: reduce){ .nav-on .nav, .nav--always{ background:#0A0A0B; -webkit-backdrop-filter:none; backdrop-filter:none; } }
.nav__bar{ display:flex; align-items:center; gap:4px; height:var(--bar); }
.nav__brand{ display:inline-flex; align-items:center; gap:10px; min-height:44px; min-width:0; flex:0 1 auto; color:var(--text); text-decoration:none; font-weight:600; font-size:1.0625rem; letter-spacing:-.015em; }
.nav__brand img{ width:40px; height:auto; flex:none; }
.nav__brand span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Wo bin ich? Handy: Abschnittsname in der Leiste; Rechner: Strich unter dem Menüpunkt */
.nav__here{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-width:0; width:7.4em; flex:0 1 auto; padding-right:4px; overflow:hidden; font-size:var(--t-small); font-weight:500; color:var(--text-2); white-space:nowrap; opacity:0; transition:opacity var(--d-2) var(--ease); }
.nav__here::before{ content:""; width:6px; height:6px; flex:none; border-radius:50%; background:var(--accent); }
.nav__here.on{ opacity:1; }   /* feste Breite, links bündig: wechselt der Abschnitt, tauscht nur das Wort, nichts verschiebt sich (CLS 0) */
.nav__links{ display:none; list-style:none; margin:0 0 0 auto; padding:0; gap:2px; }
.nav__links a{ position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:10px; color:rgba(244,242,238,.86); text-decoration:none; font-size:var(--t-small); font-weight:500; transition:color var(--d-1) var(--ease); }
.nav__links a::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:1px; background:var(--accent); transform:scaleX(0); transition:transform var(--d-2) var(--ease); }
.nav__links a:hover{ color:var(--text); }
.nav__links a[aria-current]{ color:var(--text); }
.nav__links a[aria-current]::after{ transform:scaleX(1); }
.nav__cta{ display:none; flex:none; }
.nav__menu{ display:grid; place-items:center; flex:none; width:44px; height:44px; margin-right:-10px; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.nav__menu svg{ width:24px; height:24px; }
.nav__menu:hover{ background:rgba(244,242,238,.08); }
.nav__panel{ display:grid; padding:8px var(--gut) calc(16px + env(safe-area-inset-bottom)); background:#0A0A0B; box-shadow:inset 0 1px 0 var(--line), 0 30px 60px rgba(0,0,0,.6); }
.nav__panel[hidden]{ display:none; }
.nav__panel a:not(.btn){ display:flex; align-items:center; min-height:52px; padding:0 4px; border-bottom:1px solid var(--line); text-decoration:none; font-size:var(--t-body); }
.nav__panel a[aria-current]{ color:var(--text); font-weight:600; }
.nav__panel a[aria-current]::after{ content:""; width:6px; height:6px; margin-left:10px; border-radius:50%; background:var(--accent); }
.nav__ask{ margin-top:16px; }
@media (min-width:1000px){
  .nav__links{ display:flex; }
  .nav__here{ display:none; }
  .nav__cta{ display:inline-flex; margin-left:12px; opacity:0; visibility:hidden; transition:opacity var(--d-2) var(--ease), visibility 0s var(--d-2); }
  .is-up .nav__cta, .nav--always .nav__cta{ opacity:1; visibility:visible; transition:opacity var(--d-2) var(--ease), visibility 0s; }   /* F3: im Hero nur zwei Knöpfe */
  .nav__menu, .nav__panel{ display:none!important; }
}

/* ---------- HERO: ein Bild, ein Satz, zwei Knöpfe (G0.3, F3; Signature-Moment ist die App, §11) ---------- */
.stage{ position:relative; }
.hero{ position:sticky; top:0; z-index:0; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:#24507F; }
.hero__media{ position:absolute; inset:0; }
.hero__push{ position:absolute; inset:0; transform-origin:30% 45%; }
.hero__push picture{ display:contents; }
.hero__push picture.hero__blur{ display:block; }
/* L7: Fokuspunkt links, damit die Stickerei „Wassenberg“ auf der Decke bei jeder Breite im Bild bleibt */
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 45%; }
.hero__video{ position:absolute; inset:0; z-index:3; width:100%; height:100%; object-fit:cover; }
.hero__blur{ position:absolute; inset:0; z-index:4; opacity:0; transition:opacity var(--d-4) var(--ease); }
.hero__blur img{ width:100%; height:100%; object-fit:cover; object-position:30% 45%; transform:scale(1.04); }
.hero__veil{ position:absolute; inset:0; z-index:5; background:   /* F4: Lesbarkeit von Menü und Satz, gemessen; die Decke bleibt unberührt */
  linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.2) 7%, rgba(10,10,11,0) 16%),
  radial-gradient(55% 42% at 16% 100%, rgba(10,10,11,.6) 0%, rgba(10,10,11,0) 100%),
  linear-gradient(180deg, rgba(10,10,11,0) 62%, rgba(10,10,11,.5) 78%, rgba(10,10,11,.92) 100%); }
.hero__veil::after{ content:""; position:absolute; inset:0; background:rgba(10,10,11,.42); opacity:0; transition:opacity var(--d-4) var(--ease); }
/* F4: Schatten hinter dem Satz. Links (Stickerei bei 8–19 % Breite, 51–57 % Höhe) setzt er erst unterhalb der Stickerei ein,
   rechts davon läuft er weich von weiter oben ein – so liegt der Satz auf dunklem Grund, die Decke bleibt unberührt, keine Kante im Himmel. */
.hero__veil::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,11,.78) 0%, rgba(10,10,11,.66) 38%, rgba(10,10,11,.42) 62%, rgba(10,10,11,0) 84%);
  -webkit-mask-image:linear-gradient(180deg, transparent 57.5%, #000 64%), linear-gradient(180deg, transparent 46%, #000 60%), linear-gradient(90deg, transparent 20%, #000 28%);
  -webkit-mask-composite:source-over, source-in, source-over;
  mask-image:linear-gradient(180deg, transparent 57.5%, #000 64%), linear-gradient(180deg, transparent 46%, #000 60%), linear-gradient(90deg, transparent 20%, #000 28%);
  mask-composite:add, intersect, add; }

/* Handy hoch: eigener Ausschnitt mit dem dunklen Pferd ganz im Bild; Himmel läuft nach oben weiter, Text steht darunter auf Schwarz */
@media (max-aspect-ratio: 4/5){
  .hero{ --img-h:calc(100vw * 1.2757); --img-top:max(calc(env(safe-area-inset-top) + 12px), calc(100svh - var(--img-h) - 278px));   /* 278 = Satz, Knöpfe, Bewertung: Decke bleibt frei */
    background:linear-gradient(180deg, #1E4573 0, #3E79B1 calc(var(--img-top) + 30px), #3E79B1 calc(var(--img-top) + 60vw), #0A0A0B calc(var(--img-top) + 60vw + 1px)); }
  .hero__push{ inset:auto 0; top:var(--img-top); height:var(--img-h); transform-origin:45% 55%; }
  .hero__bg, .hero__blur img{ object-position:50% 50%; }
  .hero__bg, .hero__push picture.hero__blur{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%); }   /* gleiche Kante scharf und unscharf */
  .hero__veil{ background:linear-gradient(180deg, rgba(10,10,11,.3) 0, rgba(10,10,11,0) 9%); }
  .hero__veil::before{ display:none; }
}

.hero__ui{ position:relative; z-index:6; height:100%; display:grid; grid-template-columns:minmax(0, 1fr); align-content:end;
  padding-top:calc(var(--bar) + env(safe-area-inset-top)); padding-bottom:calc(clamp(24px, 4.5vh, 48px) + env(safe-area-inset-bottom));
  transition:opacity 450ms var(--ease), transform 450ms var(--ease); }
.hero__copy{ max-width:760px; }
.hero h1{ max-width:13em; font-size:min(var(--t-h1), 7.6vh); font-size:min(var(--t-h1), 7.6svh); line-height:1.04; letter-spacing:-.04em; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.hero h1 .grad{ background:linear-gradient(180deg, #FFFFFF 0%, #D2D5DA 100%); -webkit-background-clip:text; background-clip:text; text-shadow:none; }   /* Silber hell genug über dem Bild */
.hero__row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-5); }
@media (max-width:599px){
  .hero__row .btn{ flex:1 1 0; min-width:max-content; padding:0 16px; }
  .hero__row .btn svg{ display:none; }
}

/* Bewertung im Hero (ein Beweis neben Satz und Knöpfen). Handy hoch: unter den Knöpfen auf Schwarz, ohne Fläche.
   Über dem Bild: dunkle Glasfläche, M4 „klares Glas nur über Bild, mit Abdunklung“; echte Unschärfe nur am Rechner (M7). */
.hero .rating--hero{ justify-self:start; margin-top:var(--s-4); --ring:var(--bg); }
@media not all and (max-aspect-ratio: 4/5){
  .hero .rating--hero{ --ring:#18181A; padding:8px 20px 8px 8px; border-radius:999px; background:rgba(10,10,11,.74);
    box-shadow:inset 0 0 0 1px rgba(244,242,238,.16), inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -18px rgba(0,0,0,.7); }
  .hero .rating--hero:hover{ background:rgba(10,10,11,.86); }
}
@media (min-width:1000px) and (hover:hover) and (prefers-reduced-transparency: no-preference){
  .hero .rating--hero{ background:rgba(10,10,11,.5); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); }
  .hero .rating--hero:hover{ background:rgba(10,10,11,.66); }
}
@media (min-width:880px) and (min-aspect-ratio: 4/5){   /* L1/L2: rechts neben Satz und Knöpfen, Unterkante auf Höhe der Knöpfe; der Satz bleibt, wo er war */
  .hero__ui{ grid-template-columns:auto minmax(0, 1fr); column-gap:var(--s-6); align-items:end; }
  .hero__copy{ display:contents; }
  .hero h1{ grid-column:1 / -1; }
  .hero .rating--hero{ grid-column:2; justify-self:end; margin:0; }
}
@media (min-width:1100px) and (min-aspect-ratio: 4/5){   /* etwas größer, damit man sieht, wie viele bewerten */
  .hero .rating--hero{ padding:10px 24px 10px 10px; gap:8px 16px; }
  .hero .rating--hero .rating__faces i{ width:2.5rem; height:2.5rem; font-size:.75rem; }
  .hero .rating--hero .rating__faces i + i{ margin-left:-8px; }
  .hero .rating--hero .rating__faces .fn{ font-size:.6875rem; }
  .hero .rating--hero .rating__stars{ font-size:1rem; }
  .hero .rating--hero b{ font-size:var(--t-body); }
  .hero .rating--hero .rating__n{ font-size:var(--t-small); }
}

/* Die App fährt hoch: Schwelle löst zeitgesteuerte Übergänge aus, Unschärfe nie am Scrollweg */
.is-up .hero__blur{ opacity:1; }
.is-up .hero__veil::after{ opacity:1; }
.is-up .hero__ui{ opacity:0; transform:translateY(-18px) scale(.985); pointer-events:none; }
.is-covered .hero{ visibility:hidden; }

/* Laden: Text blendet in unter 1 s ein, nichts wartet (B4, P17) */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes push{ from{ scale:1.06; } to{ scale:1; } }
.logo-in{ animation:fadeIn 500ms var(--ease) both; }
.ld{ animation:fadeUp 480ms var(--ease) both; animation-delay:calc(var(--i, 0) * 70ms + 80ms); }   /* letzte Stufe endet bei 0,63 s */
.hero__push{ animation:push 900ms var(--ease-out) both; }

/* ---------- Die App (Sheet): fährt über den Hero, ohne Knopf ---------- */
.sheet{ position:relative; z-index:3; background:var(--bg); border-radius:28px 28px 0 0; }
/* Schatten nur, während die App über dem Hero liegt: in Ruhe keine Kante am unteren Bildrand (Deckkraft = nur Compositor) */
.sheet::after{ content:""; position:absolute; z-index:-1; top:0; left:0; right:0; height:120px; border-radius:28px 28px 0 0; pointer-events:none;
  box-shadow:0 -24px 60px rgba(0,0,0,.45); opacity:0; transition:opacity var(--d-2) var(--ease); }
.sheet-out .sheet::after{ opacity:1; }
.sheet::before{ content:""; position:absolute; top:0; left:28px; right:28px; height:1px; background:linear-gradient(90deg, rgba(244,242,238,0), rgba(244,242,238,.3), rgba(244,242,238,0)); }
.sheet__peek{ position:relative; display:block; height:var(--peek); padding-top:24px; border-radius:28px 28px 0 0; color:inherit; text-decoration:none; }
.sheet__grab{ position:absolute; top:10px; left:50%; width:40px; height:5px; margin-left:-20px; border-radius:3px; background:rgba(244,242,238,.34); }
.sheet__peek:hover .sheet__grab{ background:rgba(244,242,238,.6); }
.sheet__peek:focus-visible{ outline-offset:-4px; }

/* App-Kopf: Symbol und Name wie ein App-Eintrag (I-Regeln: eigenes Zeichen, kein Apple-Symbol) */
.app__bar{ display:flex; align-items:center; gap:12px; max-width:calc(1200px + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); }
.app__icon{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:12px;
  background:linear-gradient(150deg, #24385E 0%, #101A2C 100%); box-shadow:inset 0 0 0 1px rgba(244,242,238,.16), 0 6px 16px -6px rgba(0,0,0,.7); }   /* Navy der Decke, Creme der Stickerei */
.app__icon img{ width:34px; height:auto; }
.app__name{ display:grid; min-width:0; line-height:1.3; }
.app__name b{ font-size:var(--t-body); font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-bottom:.1em; }
.app__name small{ font-size:var(--t-cap); color:var(--text-2); }
/* Querformat mit wenig Höhe (Laptop): App-Kopf schlanker, Satz etwas kleiner – die Stickerei „Wassenberg“ bleibt frei (L7) */
@media (min-aspect-ratio: 4/5) and (max-height: 820px){
  :root{ --peek:68px; }
  .sheet__peek{ padding-top:18px; }
  .sheet__grab{ top:7px; }
  .app__icon{ width:40px; height:40px; border-radius:10px; }
  .app__icon img{ width:28px; }
  .hero h1{ font-size:min(var(--t-h1), 7svh); }
}

/* Bewertung: Reiter in Kreisen, Sterne, Anzahl, Marke „Beispiel“ – steht seit dieser Fassung im Hero (Lage siehe Hero-Abschnitt) */
.app__rule{ height:1px; margin-top:6px; background:var(--line); }   /* Trennlinie unter dem App-Kopf; die Bewertung steht jetzt im Hero */
.rating{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 12px; max-width:100%; min-height:48px; padding-right:6px; border-radius:16px; color:var(--text); text-decoration:none; }
.rating__faces{ display:flex; flex:none; }
.rating__faces i{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font:700 .6875rem/1 var(--font); font-style:normal; letter-spacing:.01em; color:#0A0A0B; box-shadow:0 0 0 2px var(--ring, var(--bg)); }
.rating__faces i + i{ margin-left:-6px; }
.rating__faces .f1{ background:linear-gradient(135deg, #E2C2A0, #C38B5A); color:#24140A; }   /* Schrift 6,1:1 */
.rating__faces .f2{ background:linear-gradient(135deg, #F4F5F7, #A9AEB5); }                 /* 8,9:1 */
.rating__faces .f3{ background:linear-gradient(135deg, #D8C3AC, #A48B72); }                 /* 6,1:1 */
.rating__faces .f4{ background:linear-gradient(135deg, #EDE6DC, #BDB1A2); }                 /* 9,4:1 */
.rating__faces .fn{ background:var(--surface-2); color:var(--text-2); font-size:.625rem; box-shadow:0 0 0 2px var(--ring, var(--bg)), inset 0 0 0 1px var(--line-2); }
.rating__txt{ display:grid; gap:3px; line-height:1.25; }
.rating__line{ display:flex; align-items:baseline; gap:7px; }
.rating__stars{ color:var(--accent); font-size:.875rem; letter-spacing:1.5px; }   /* F1: Akzent, weil die Leiste zu den Stimmen führt */
.rating b{ font-size:var(--t-small); font-weight:600; font-variant-numeric:tabular-nums; }
.rating__n{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:var(--t-cap); color:var(--text-2); }
.rating .tag{ min-height:20px; padding:0 8px; }
.rating:hover .rating__n{ color:var(--text); }
.rating:focus-visible{ outline-offset:4px; }

/* ---------- 1 · Verkauf: wischbar wie in einer App ---------- */
.sale{ padding-top:var(--s-6); padding-bottom:clamp(56px, 8vw, 96px); }
.sale__head{ display:grid; gap:var(--s-5); align-items:end; margin-bottom:var(--s-6); }
.sale h2{ font-size:var(--t-h2); line-height:1.05; letter-spacing:-.035em; max-width:16ch; }
.rail__ctl{ display:none; gap:10px; }
@media (min-width:760px){ .sale__head{ grid-template-columns:1fr auto; } .rail__ctl{ display:flex; } }

.rail{ --rail-pad:max(var(--gut), calc((100% - 1200px) / 2)); display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:8px var(--rail-pad) 20px; scroll-padding-inline:var(--rail-pad); scrollbar-width:none; cursor:grab; }
.rail::-webkit-scrollbar{ display:none; }
.rail.is-drag{ scroll-snap-type:none; cursor:grabbing; user-select:none; }
.rail:focus-visible{ outline-offset:-3px; border-radius:var(--r-card); }

.horse{ position:relative; flex:0 0 auto; width:min(80vw, 380px); aspect-ratio:4/5; border-radius:var(--r-card); overflow:hidden; scroll-snap-align:start; background:#111113; isolation:isolate;
  transform:scale(var(--s, 1)); transform-origin:50% 60%; box-shadow:0 0 0 1px var(--line); }
.horse img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--x, 50%) 50%; transform:translateX(var(--px, 0px)) scale(1.1); }
.horse::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;   /* BI: Vignette */
  background:radial-gradient(130% 90% at 50% 10%, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%), linear-gradient(180deg, rgba(5,5,6,0) 38%, rgba(5,5,6,.6) 62%, rgba(5,5,6,.94) 100%); }
.horse__top{ position:absolute; z-index:2; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; gap:8px; }
.state{ display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:0 11px; border-radius:999px; background:rgba(10,10,11,.78); box-shadow:inset 0 0 0 1px var(--line); font-size:var(--t-cap); font-weight:600; }
.state::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--neutral); }
.state--ok::before{ background:var(--ok); } .state--wait::before{ background:var(--wait); }
.horse__body{ position:absolute; z-index:2; left:20px; right:20px; bottom:20px; opacity:var(--o, 1); }
.horse h3{ font-size:clamp(1.625rem, 1.4rem + .8vw, 2rem); letter-spacing:-.03em; line-height:1.1; }
.horse__meta{ margin-top:4px; font-size:var(--t-small); color:rgba(244,242,238,.86); }
.horse__lvl{ margin-top:2px; font-size:var(--t-small); font-weight:600; }
.horse__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid rgba(244,242,238,.16); }
.price{ display:grid; font-size:var(--t-body); font-weight:600; letter-spacing:-.01em; }
.price small{ font-size:var(--t-cap); font-weight:500; color:rgba(244,242,238,.78); }

.sale__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.dots{ display:flex; gap:6px; }
.dots i{ width:6px; height:6px; border-radius:3px; background:rgba(244,242,238,.28); transition:width var(--d-2) var(--ease), background-color var(--d-2); }
.dots i.on{ width:22px; background:var(--accent); }

/* ---------- Abschnitte ---------- */
.sec{ padding-block:clamp(72px, 10vw, 128px); scroll-margin-top:0; }
.sec__head{ max-width:780px; margin-bottom:clamp(32px, 4vw, 56px); }
.sec h2{ font-size:var(--t-h2); line-height:1.05; letter-spacing:-.035em; }
/* B1/B4: Inhalt kommt beim Scrollen nacheinander von unscharf zu scharf – einmal je Element, zeitgesteuert (nie am Scrollweg),
   kurz (520 ms, Staffel 70 ms aus seite.js). Nur Deckkraft und Filter: kein Layout, kein Springen (CLS 0). */
.js .rv{ opacity:0; filter:blur(8px); transition:opacity 520ms var(--ease-out), filter 520ms var(--ease-out); }
.js .rv.in{ opacity:1; filter:blur(0); }

/* ---------- 2 · Bento (L-Regeln: Hierarchie über Größe, gemeinsame Kanten; BI: Bilder tragen, Text klein) ---------- */
.bento{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tile{ position:relative; display:flex; flex-direction:column; gap:6px; width:100%; min-height:190px; margin:0; padding:22px; border-radius:var(--r-card); border:1px solid var(--line); background:var(--surface); overflow:hidden; color:inherit; text-decoration:none; text-align:left; isolation:isolate;
  transition:border-color var(--d-2) var(--ease), transform var(--d-1) var(--ease); }
button.tile{ cursor:pointer; -webkit-appearance:none; appearance:none; }
button.tile:hover{ border-color:var(--line-2); }
button.tile:active{ transform:scale(.985); }   /* B3: kurze Rückmeldung beim Tippen */
.tile:focus-visible{ outline-offset:3px; }
/* „+“ oben rechts: zeigt, dass die Kachel mehr erzählt (P22: Hover, Druck, Fokus über die ganze Kachel) */
.tile__plus{ position:absolute; z-index:1; top:14px; right:14px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:rgba(10,10,11,.62); box-shadow:inset 0 0 0 1px rgba(244,242,238,.28); color:var(--text); transition:background-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease); }
.tile__plus svg{ width:20px; height:20px; }
.tile:hover .tile__plus, .tile:focus-visible .tile__plus{ background:var(--accent-a) var(--accent-grad); box-shadow:inset 0 0 0 1px rgba(255,232,206,.2); color:var(--on-accent); }   /* F1: Akzent = Interaktion */
.tile b{ display:block; font-size:var(--t-h3); font-weight:600; line-height:1.2; letter-spacing:-.02em; }
.tile > span:not(.eyebrow):not(.tile__go):not(.tile__txt):not(.tile__plus), .tile__txt > span:not(.eyebrow):not(.tile__go){ color:var(--text-2); font-size:var(--t-small); line-height:1.45; }
.tile .eyebrow{ margin:0; }
.tile--img{ min-height:320px; justify-content:flex-end; background:#000; }
.tile--img img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.tile--img::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,8,9,0) 38%, rgba(8,8,9,.55) 62%, rgba(8,8,9,.9) 100%); }
button.tile--img:hover img{ transform:scale(1.04); }
.tile--img .eyebrow{ color:var(--text); }
.tile--img .tile__txt > span:not(.eyebrow):not(.tile__go){ color:rgba(244,242,238,.88); }
.tile__txt{ display:grid; gap:6px; max-width:30em; padding-right:8px; }
.tile__go{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:4px; padding:0; border:0; background:none; color:var(--text); font-weight:600; font-size:var(--t-small); cursor:pointer; text-align:left; }
.tile__go svg{ width:18px; height:18px; color:var(--accent); transition:transform var(--d-1) var(--ease); }   /* F1: Akzent markiert, was klickbar ist */
a.tile:hover .tile__go svg, .tile__go:hover svg{ transform:translateX(3px); }
.tile__ic{ width:30px; height:30px; color:var(--text-2); margin-bottom:auto; }
.tile--sale b{ font-size:clamp(1.5rem, 1.1rem + 1.3vw, 2.375rem); letter-spacing:-.03em; max-width:16ch; }
.tile--train img{ object-position:72% 45%; }
.tile--beritt img{ object-position:50% 62%; }
.tile--shop img{ object-position:50% 30%; }
.stat{ font-size:clamp(1.9rem, 1rem + 3.4vw, 3.75rem)!important; font-weight:700!important; letter-spacing:-.045em!important; line-height:1.1!important; margin:6px 0 calc(2px - .14em); white-space:nowrap; }
.tile--sale, .tile--beritt, .tile--train, .tile--shop, .tile--turnier{ grid-column:span 2; }
@media (max-width:699px){ .tile--img{ min-height:max(400px, 108vw); } }   /* Handy: Bildfelder höher, Motiv bleibt über dem Text frei */
@media (max-width:999px){   /* F4: Abdunklung folgt der Textmenge – darüber bleibt das Bild hell */
  .tile--img::after{ background:linear-gradient(180deg, rgba(8,8,9,0) 55%, rgba(8,8,9,.35) 100%); }
  .tile--img .tile__txt{ position:relative; }
  .tile--img .tile__txt::before{ content:""; position:absolute; z-index:-1; inset:-72px -22px -22px; background:linear-gradient(180deg, rgba(8,8,9,0) 0, rgba(8,8,9,.72) 64px, rgba(8,8,9,.86) 120px, rgba(8,8,9,.92) 100%); }
}
@media (min-width:700px){
  .tile--turnier, .tile--shop{ grid-column:span 1; }
}
@media (min-width:1000px){
  .bento{ grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:268px; gap:16px; }
  .tile{ min-height:0; padding:26px; }
  .tile--sale{ grid-column:1 / span 2; grid-row:1 / span 2; }
  .tile--train{ grid-column:3 / span 2; grid-row:1; }
  .tile--beritt{ grid-column:3 / span 2; grid-row:2; }
  .tile--stat{ grid-column:1; grid-row:3; }
  .tile--ort{ grid-column:2; grid-row:3; }
  .tile--turnier{ grid-column:3; grid-row:3; }
  .tile--shop{ grid-column:4; grid-row:3; }
  /* Breite Bildfelder: Text links, das Motiv rechts bleibt frei */
  .tile--wide .tile__txt{ max-width:52%; }
  .tile--wide::after{ background:linear-gradient(90deg, rgba(8,8,9,.86) 0%, rgba(8,8,9,.6) 30%, rgba(8,8,9,0) 58%), linear-gradient(180deg, rgba(8,8,9,0) 55%, rgba(8,8,9,.45) 100%); }
  .tile--train img{ object-position:50% 40%; }
  .tile--beritt img{ object-position:50% 70%; }
}

/* ---------- 3 · Training: eine Frage je Schritt, feste Höhe ---------- */
.wiz{ max-width:760px; border:1px solid var(--line); border-radius:28px; padding:clamp(18px, 2.6vw, 32px); background:var(--surface); }
/* Kompakt: am Rechner Überschrift links, Suche rechts (L2 gemeinsame Oberkante) – die Sektion wird schmaler und niedriger */
@media (min-width:1100px){
  .train{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:var(--s-8); align-items:start; }
  .train .sec__head{ margin-bottom:0; padding-top:var(--s-4); }
}
.wiz .wiz__top{ margin-bottom:var(--s-4); }
.wiz__top, .ask__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5); }
.wiz__count, .ask__count{ font-size:var(--t-small); color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar{ display:flex; gap:6px; flex:1; max-width:360px; }
.bar i{ flex:1; height:4px; border-radius:2px; background:rgba(244,242,238,.14); transition:background-color var(--d-2); }
.bar i.on{ background:var(--accent); }
.wiz__step{ border:0; padding:0; margin:0; min-width:0; }
/* Feste Höhe: alle Schritte liegen in derselben Rasterzelle; die Fläche ist so hoch wie der höchste Schritt bei dieser Breite.
   Verborgene Schritte bleiben im Fluss (unsichtbar, nicht bedienbar) – beim Weiterklicken springt darunter nichts. */
.wiz__stage{ display:grid; }
.wiz__stage > .wiz__step{ grid-area:1 / 1; align-self:start; }
.wiz__stage > .wiz__step[hidden]{ display:block; visibility:hidden; }
#cfg .err[hidden], #t-ok[hidden]{ display:block; visibility:hidden; }   /* Platz für Fehler und Bestätigung ist reserviert */
.send{ display:grid; }
.send > *{ grid-area:1 / 1; }   /* Bestätigung erscheint an der Stelle des Knopfs */
.send .is-sent{ visibility:hidden; }
@media (max-width:899px){ .wiz .wiz__sum dl{ display:none; } }   /* Handy: die Nachricht darunter enthält alle vier Antworten */
@media (max-width:599px){ .wiz .chips--big{ display:grid; } .wiz .chips--big .chip span{ display:flex; width:100%; } }   /* Antworten als Liste, gut mit dem Daumen */
.wiz__step.is-entering{ animation:fadeUp 420ms var(--ease) both; }
.wiz__q, .ask__q{ display:block; width:100%; padding:0; margin:0 0 var(--s-5); font-size:clamp(1.75rem, 1.25rem + 1.8vw, 2.75rem); font-weight:600; letter-spacing:-.035em; line-height:1.08; }
.wiz__q:focus, .ask__q:focus{ outline:none; }
.wiz__nav, .ask__nav{ display:flex; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-6); }
.wiz .wiz__q{ margin-bottom:var(--s-4); font-size:clamp(1.375rem, 1.1rem + 1vw, 1.875rem); letter-spacing:-.03em; }   /* T: Frage kleiner, Hierarchie bleibt */
.wiz .wiz__nav{ margin-top:var(--s-5); }
.wiz__nav .btn[hidden], .ask__nav .btn[hidden]{ display:none; }
#wizNext, #askNext{ margin-left:auto; }
/* Antworten als Zeilen mit kleinem Bild wie in einer App-Liste: Bild bleibt, Höhe sinkt (Handy eine Spalte, sonst zwei) */
.formats{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--s-2); }
@media (min-width:600px){ .formats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } }
.fmt{ position:relative; display:block; cursor:pointer; }
.fmt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.fmt__card{ display:grid; border-radius:20px; overflow:hidden; background:var(--surface-2); border:1.5px solid var(--line); transition:border-color var(--d-1), box-shadow var(--d-1); }
.fmt__card{ grid-template-columns:56px minmax(0, 1fr); align-items:center; gap:12px; padding:8px 12px 8px 8px; border-radius:16px; }
.fmt__card img{ width:56px; height:56px; border-radius:10px; object-fit:cover; }
.fmt__card > span{ display:block; padding:0; }
.fmt__card b{ display:block; font-size:var(--t-body); font-weight:600; letter-spacing:-.01em; hyphens:auto; overflow-wrap:anywhere; }
.fmt__card em{ display:block; font-style:normal; font-size:var(--t-cap); color:var(--text-2); margin-top:2px; }
.fmt:hover .fmt__card{ border-color:var(--line-2); }
.fmt input:checked + .fmt__card{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.fmt input:checked + .fmt__card b::before{ content:"✓ "; color:var(--ok); }   /* P08 */
.fmt input:focus-visible + .fmt__card{ outline:3px solid var(--accent); outline-offset:3px; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip span{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:14px; border:1.5px solid var(--line-2); font-weight:600; font-size:var(--t-small); cursor:pointer; transition:background-color var(--d-1), border-color var(--d-1); }
.chip:hover span{ border-color:rgba(244,242,238,.45); }
.chip input:checked + span{ background:var(--text); border-color:var(--text); color:#0A0A0B; }
.chip input:checked + span::before{ content:"✓"; margin-right:8px; font-weight:700; }
.chip input:focus-visible + span{ outline:3px solid var(--accent); outline-offset:3px; }
.chips--big .chip span{ min-height:56px; padding:0 22px; font-size:var(--t-body); }
.height{ display:grid; gap:var(--s-4); align-items:center; padding:var(--s-4); border:1px solid var(--line); border-radius:20px; }
@media (min-width:700px){ .height{ grid-template-columns:220px 1fr; } }
.height__viz{ position:relative; height:136px; border-radius:var(--r-ui); background:linear-gradient(180deg, #1B3557 0%, #13253D 62%, #1D2E1C 62%, #152214 100%); overflow:hidden; }
.height__viz svg{ position:absolute; inset:0; width:100%; height:100%; }
.height__out{ display:grid; gap:4px; }
.height__out b{ font-size:clamp(2rem, 1.4rem + 2vw, 3rem); line-height:1; letter-spacing:-.035em; font-weight:600; font-variant-numeric:tabular-nums; }
.height__out span{ color:var(--text-2); font-size:var(--t-small); }
.range{ -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:var(--s-3) 0 0; background:transparent; cursor:pointer; }
.range::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--accent) var(--fill, 40%), rgba(244,242,238,.16) var(--fill, 40%)); }
.range::-moz-range-track{ height:6px; border-radius:3px; background:rgba(244,242,238,.16); }
.range::-moz-range-progress{ height:6px; border-radius:3px; background:var(--accent); }
.range::-webkit-slider-thumb{ -webkit-appearance:none; width:32px; height:32px; margin-top:-13px; border-radius:50%; background:#FFFFFF; border:0; box-shadow:0 2px 10px rgba(0,0,0,.5); }
.range::-moz-range-thumb{ width:30px; height:30px; border-radius:50%; background:#FFFFFF; border:0; }
.range:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; border-radius:8px; }
.ticks{ display:flex; justify-content:space-between; padding:0 4px; font-size:var(--t-cap); color:var(--text-3); }
.wiz__sum{ display:grid; gap:var(--s-5); }
@media (min-width:900px){ .wiz__sum{ grid-template-columns:1fr 1fr; align-items:start; } }
.wiz .wiz__sum{ gap:var(--s-4); }
.wiz .wiz__form{ gap:var(--s-2); }
.wiz .field{ grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:4px 12px; }   /* Fehler steht in der Zeile des Feldnamens: Platz bleibt reserviert, nichts springt */
.wiz .field input{ grid-column:1 / -1; }
.wiz .field .err{ grid-column:2; grid-row:1; text-align:right; }
.wiz .field input{ min-height:48px; padding:11px 14px; border-radius:14px; }   /* P21: ≥ 44 px */
.wiz .bubble{ margin-top:var(--s-3); padding:10px 14px; }
.wiz .form__ok{ padding:12px 14px; }
.wiz__sum dl{ display:grid; grid-template-columns:auto 1fr; margin:0; font-size:var(--t-small); }
.wiz__sum dt, .wiz__sum dd{ margin:0; padding:10px 0; border-top:1px solid var(--line); }
.wiz__sum dt{ color:var(--text-2); padding-right:var(--s-5); }
.wiz__sum dd{ text-align:right; font-weight:600; }
.wiz__form{ display:grid; gap:var(--s-3); }
.bubble{ margin-top:var(--s-4); max-width:94%; margin-left:auto; padding:12px 16px; border-radius:18px 18px 4px 18px; background:#2A2A30; box-shadow:inset 0 0 0 1px var(--line); color:#FFFFFF; font-size:var(--t-small); line-height:1.45; }
.sum__alt{ text-align:center; font-size:var(--t-small); color:var(--text-2); }
.sum__alt a{ display:inline-flex; align-items:center; min-height:44px; color:var(--accent); font-weight:600; }

/* Formularfelder (P26, T1: 17 px gegen iOS-Zoom) */
.field{ display:grid; gap:6px; }
.field label{ font-size:var(--t-small); font-weight:600; }
.field input, .field textarea{ width:100%; min-height:54px; padding:14px 16px; border-radius:16px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--text); font:400 var(--t-body)/1.4 var(--font); transition:border-color var(--d-1); }
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-3); }
.field input:hover, .field textarea:hover{ border-color:rgba(244,242,238,.4); }
.field input:focus-visible, .field textarea:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-color:transparent; }
.field [aria-invalid="true"]{ border-color:var(--err); }
.err{ color:var(--err); font-size:var(--t-small); }
.err[hidden]{ display:none; }
.hint{ color:var(--text-2); font-size:var(--t-small); }
.form__ok{ padding:var(--s-4); border-radius:14px; background:rgba(126,226,168,.1); box-shadow:inset 0 0 0 1px rgba(126,226,168,.35); font-size:var(--t-small); }
.form__ok[hidden]{ display:none; }

/* ---------- 4 · Erfolge: echte Fotos in drei Tiefen ---------- */
.wins__grid{ display:grid; gap:var(--s-7); align-items:center; }
@media (min-width:1000px){ .wins__grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:var(--s-8); } }
.wins h2{ max-width:14ch; }
.who{ display:flex; gap:var(--s-4); align-items:flex-start; margin-top:var(--s-5); color:var(--text-2); max-width:52ch; }
.who img{ width:64px; height:64px; flex:none; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px rgba(244,242,238,.5); }
.results{ list-style:none; margin:var(--s-6) 0 var(--s-3); padding:0; border-top:1px solid var(--line); }
.results a{ display:grid; grid-template-columns:88px minmax(0, 1fr) 20px; grid-template-areas:"t b i" "t s i"; column-gap:var(--s-3); align-items:center; min-height:60px; padding:10px 0; border-bottom:1px solid var(--line); text-decoration:none; transition:background-color var(--d-1); }
.results time{ grid-area:t; font-size:var(--t-small); color:var(--text-3); font-variant-numeric:tabular-nums; }
.results b{ grid-area:b; font-weight:600; }
.results span{ grid-area:s; font-size:var(--t-small); color:var(--text-2); }
.results svg{ grid-area:i; width:18px; height:18px; color:var(--text-3); transition:color var(--d-1), transform var(--d-1) var(--ease); }
.results a:hover b{ color:var(--accent); }
.results a:hover svg{ color:var(--accent); transform:translate(2px, -2px); }
@media (min-width:600px){
  .results a{ grid-template-columns:96px 110px minmax(0, 1fr) 20px; grid-template-areas:"t b s i"; }
}
.float{ position:relative; height:clamp(440px, 110vw, 560px); }
@media (min-width:1000px){ .float{ height:620px; } }
.float__item{ position:absolute; margin:0; border-radius:22px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 0 1px var(--line); transform:translate3d(0, var(--py, 0px), 0); background:#111; }
.float__item img{ width:100%; height:100%; object-fit:cover; }
.float__item figcaption{ position:absolute; left:10px; bottom:10px; right:10px; width:fit-content; max-width:calc(100% - 20px); padding:5px 10px; border-radius:10px; background:rgba(10,10,11,.78); font-size:var(--t-cap); line-height:1.35; color:var(--text); }
.float__item--a{ z-index:2; left:0; top:17%; width:76%; aspect-ratio:3/2; }
.float__item--b{ z-index:3; right:0; top:0; width:44%; aspect-ratio:3/2; }
.float__item--c{ z-index:4; right:0; bottom:3%; width:46%; aspect-ratio:3/2; }
@media (max-width:599px){
  .float__item--a{ width:92%; top:16%; }
  .float__item--b{ width:58%; }
  .float__item--c{ width:66%; right:0; }
  .float__item--b figcaption, .float__item--a figcaption{ display:none; }   /* je Bild bleibt die Quelle im Alt-Text; Bildnachweis vollständig in der Fußzeile */
}

/* ---------- 5 · Ausrüstung: ein Produkt groß, mit Ansichten und Farbwahl (BI: Bilder tragen; F1: Auswahl in Akzent) ---------- */
.feat{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--s-6); align-items:center; }
@media (min-width:900px){ .feat{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(40px, 5vw, 80px); } }
.gal{ display:grid; gap:var(--s-3); }
/* Bühne: warmes Licht von oben, Schatten am Boden – das Produkt steht im Raum (M-Regeln: Tiefe ohne Glas) */
.gal__main{ position:relative; aspect-ratio:1/1; border-radius:var(--r-card); overflow:hidden; isolation:isolate;
  background:radial-gradient(62% 54% at 50% 42%, #2E2723 0%, #1A1817 58%, #111113 100%); box-shadow:inset 0 0 0 1px var(--line); }
.gal__main::before{ content:""; position:absolute; z-index:0; left:20%; right:20%; bottom:11%; height:8%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); transition:opacity var(--d-3) var(--ease); }
.gal__main:has(img.is-on:not(.is-frei))::before{ opacity:0; }
.gal__main img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 500ms var(--ease), transform 700ms var(--ease-out); }   /* B1: Überblenden zeigt den Wechsel der Ansicht */
.gal__main img.is-frei{ object-fit:contain; padding:7%; transform:translateY(12px) scale(.98); }
.gal__main img.is-on{ opacity:1; transform:none; }
.gal__main img[data-g="3"]{ object-position:38% 50%; }
.gal__main .tag{ position:absolute; left:14px; top:14px; z-index:2; }
.gal__thumbs{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-2); }
.gal__thumbs button{ position:relative; aspect-ratio:1/1; min-height:44px; border:0; padding:0; border-radius:14px; overflow:hidden; cursor:pointer;
  background:radial-gradient(70% 60% at 50% 45%, #2E2723 0%, #141416 100%); }
.gal__thumbs button::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow var(--d-1) var(--ease); pointer-events:none; }
.gal__thumbs button:hover::after{ box-shadow:inset 0 0 0 1px var(--line-2); }
.gal__thumbs button[aria-pressed="true"]::after{ box-shadow:inset 0 0 0 2px var(--accent); }
.gal__thumbs img{ width:100%; height:100%; object-fit:cover; }
.gal__thumbs .is-frei img{ object-fit:contain; padding:9%; }
.feat__txt h3{ margin-top:var(--s-1); font-size:clamp(2rem, 1.4rem + 2vw, 3rem); line-height:1.08; letter-spacing:-.035em; }
.feat__txt .lead{ max-width:46ch; }
.feat__txt .btn{ max-width:100%; white-space:normal; text-align:center; line-height:1.15; padding-block:12px; }   /* P06: bei 200 % Schrift umbrechen statt überlaufen */
.swatches{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5); }
.swatch{ display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px 0 9px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(244,242,238,.06); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text); font:500 var(--t-small)/1 var(--font);
  transition:background-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease); }
.swatch i{ width:24px; height:24px; flex:none; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(244,242,238,.22); }
.swatch:hover{ background:rgba(244,242,238,.12); }
.swatch:active{ transform:scale(.97); }
.swatch[aria-pressed="true"]{ background:rgba(195,139,90,.12); box-shadow:inset 0 0 0 2px var(--accent); }
.specs{ display:grid; grid-template-columns:auto 1fr; margin:var(--s-5) 0 var(--s-6); font-size:var(--t-small); }
.specs dt, .specs dd{ margin:0; padding:12px 0; border-top:1px solid var(--line); }
.specs dt{ color:var(--text-2); padding-right:var(--s-5); }
.specs dd{ text-align:right; font-weight:500; }
/* Auch im Stall: zwei kleine Karten, quer am Rechner */
.more{ margin-top:clamp(40px, 6vw, 72px); }
.more__grid{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:var(--s-4); }
.prod{ position:relative; margin:0; border-radius:var(--r-card); overflow:hidden; isolation:isolate; display:flex; flex-direction:column; background:var(--surface); box-shadow:0 0 0 1px var(--line); }
.prod img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; background:#000; transition:transform 900ms var(--ease); }
.prod:hover img{ transform:scale(1.03); }
.prod__txt{ display:grid; gap:4px; justify-items:start; padding:16px 18px 18px; }
.prod h3{ font-size:1.1875rem; letter-spacing:-.02em; overflow-wrap:anywhere; hyphens:auto; }
.prod p{ font-size:var(--t-small); color:var(--text-2); margin-bottom:8px; overflow-wrap:anywhere; hyphens:auto; }
@media (min-width:900px){
  .prod{ flex-direction:row; align-items:center; }
  .prod img{ width:44%; flex:none; }
  .prod__txt{ padding:24px 28px; }
}

/* ---------- 6 · Stimmen (Beispiele) ---------- */
.rail--quotes{ cursor:grab; }
.quote{ flex:0 0 auto; width:min(84vw, 440px); margin:0; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-6); padding:28px; border-radius:var(--r-card); border:1px solid var(--line); background:var(--surface); scroll-snap-align:start; }
.quote blockquote{ margin:0; font-size:clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height:1.45; letter-spacing:-.01em; }
.quote figcaption{ display:flex; align-items:center; gap:12px; font-size:var(--t-cap); color:var(--text-2); }
.quote figcaption b{ display:block; color:var(--text); font-size:var(--t-small); }
.face{ display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%; background:var(--grad); color:#0A0A0B; font-weight:700; font-size:var(--t-cap); }
.face--b{ background:linear-gradient(135deg, #E4E6EA, #9A9FA6); } .face--c{ background:linear-gradient(135deg, #C9CDD3, #F4F5F7); }

/* ---------- 7 · Fragen ---------- */
.faq{ display:grid; gap:var(--s-5); }
@media (min-width:1000px){ .faq{ grid-template-columns:4fr 7fr; gap:var(--s-8); } }
.faq__list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:68px; padding:12px 0; list-style:none; cursor:pointer; font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem); font-weight:600; letter-spacing:-.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--text-2); border-bottom:2px solid var(--text-2); transform:rotate(45deg) translate(-3px, -3px); transition:transform var(--d-2) var(--ease); }
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-3px, -3px); }
.faq details p{ padding:0 0 var(--s-5); max-width:60ch; color:var(--text-2); }

/* ---------- 8 · Ziel ---------- */
.goal{ padding-bottom:clamp(56px, 8vw, 96px); }
/* Das Hero-Bild schließt die Seite (Klammer zum Anfang). Handy: volle Breite, Bild läuft oben und unten in Schwarz aus, Text darunter
   auf Schwarz wie im Hero (BI6/F4: Text nie auf unruhigem Bild). Die Stickerei „Wassenberg“ bleibt frei. */
.goal__card{ position:relative; display:grid; isolation:isolate; }
.goal__media{ display:block; position:relative; margin-inline:calc(-1 * var(--gut)); aspect-ratio:1 / 1.12; overflow:hidden; }
.goal__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 64%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 64%, transparent 100%); }
.goal__txt{ position:relative; margin-top:-56px; }
.goal h2{ font-size:clamp(2.75rem, 1.6rem + 5vw, 6rem); line-height:.98; letter-spacing:-.05em; }
.goal .lead{ margin:var(--s-4) 0 var(--s-5); color:var(--text-2); }
@media (min-width:700px){   /* Tablett: Querbild mit runden Ecken, Text darunter */
  .goal__media{ margin-inline:0; aspect-ratio:16 / 9; border-radius:32px; }
  .goal__media img{ object-position:30% 45%; -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%); mask-image:linear-gradient(180deg, #000 62%, transparent 100%); }
  .goal__txt{ margin-top:-72px; padding-inline:var(--s-6); }
}
@media (min-width:1000px){   /* Rechner: Bildfläche, Text in einer Zeile am unteren Rand, unterhalb der Stickerei */
  .goal__card{ min-height:clamp(560px, 44vw, 640px); border-radius:32px; overflow:hidden; box-shadow:0 0 0 1px var(--line); }
  .goal__media{ position:absolute; inset:0; z-index:-2; aspect-ratio:auto; border-radius:0; }
  .goal__media img{ object-position:30% 45%; -webkit-mask-image:none; mask-image:none; }
  .goal__card::after{ content:""; position:absolute; inset:0; z-index:-1;
    background:radial-gradient(56% 58% at 76% 100%, rgba(8,8,9,.74) 0%, rgba(8,8,9,.4) 55%, rgba(8,8,9,0) 100%),
      linear-gradient(180deg, rgba(8,8,9,0) 56%, rgba(8,8,9,.66) 78%, rgba(8,8,9,.92) 100%), linear-gradient(90deg, rgba(8,8,9,.35) 0%, rgba(8,8,9,0) 50%); }   /* BI6/F4: gemessen */
  .goal__txt{ align-self:end; display:grid; grid-template-columns:auto minmax(0, 440px); justify-content:space-between; align-items:end; gap:0 var(--s-8); margin:0; padding:var(--s-7) 56px; }
  .goal h2{ text-shadow:0 2px 30px rgba(0,0,0,.35); }
  .goal .lead{ margin-top:0; color:var(--text); text-shadow:0 1px 18px rgba(0,0,0,.5); }
}

/* ---------- Fußzeile ---------- */
.foot{ padding:var(--s-7) 0 calc(var(--s-6) + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.foot__row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-6); font-size:var(--t-small); color:var(--text-2); }
.foot__links{ display:flex; gap:var(--s-2); margin-left:auto; }
.foot__links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 10px; color:var(--text-2); text-decoration:none; }
.foot__links a:hover{ color:var(--text); text-decoration:underline; }
.foot__note{ margin-top:var(--s-5); font-size:var(--t-cap); color:var(--text-3); }

/* ---------- Anfrage: ein Schritt je Bild ---------- */
.ask{ padding:0; border:0; width:min(580px, calc(100% - 32px)); max-height:calc(100svh - 48px); border-radius:32px; background:var(--surface); color:var(--text); box-shadow:0 40px 120px rgba(0,0,0,.65), 0 0 0 1px var(--line); overflow:auto; }
.ask::backdrop{ background:rgba(5,5,6,.72); }
.ask[open]{ animation:askIn 380ms var(--ease-out) both; }
@keyframes askIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.ask__form{ display:flex; flex-direction:column; min-height:440px; padding:20px clamp(20px, 4vw, 32px) 24px; }
.ask__top{ margin-bottom:0; }
.ask__top .bar{ max-width:none; }
.ask__steps{ flex:1; padding-top:var(--s-6); }
.ask__step{ border:0; padding:0; margin:0; min-width:0; }
.ask__step[hidden], .ask__done[hidden]{ display:none; }
.ask__step .chips{ margin-bottom:var(--s-4); }
.chip-btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line-2); background:rgba(244,242,238,.06); font-size:var(--t-small); font-weight:600; cursor:pointer; transition:background-color var(--d-1); }
.chip-btn:hover{ background:rgba(244,242,238,.14); }
.chip-btn[aria-pressed="true"]{ background:var(--text); color:#0A0A0B; border-color:var(--text); }
.in-fwd{ animation:stepFwd 320ms var(--ease-out) both; }
.in-back{ animation:stepBack 320ms var(--ease-out) both; }
@keyframes stepFwd{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
@keyframes stepBack{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:none; } }
.ask__sum{ display:grid; margin:0 0 var(--s-5); border-top:1px solid var(--line); }
.ask__sum > div{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"t e" "d d"; align-items:center; padding:8px 0 12px; border-bottom:1px solid var(--line); }
.ask__sum dt{ grid-area:t; font-size:var(--t-cap); color:var(--text-2); font-weight:600; }
.ask__sum dd{ grid-area:d; margin:0; overflow-wrap:anywhere; white-space:pre-line; }
.ask__sum .edit{ grid-area:e; min-height:44px; padding:0 4px; border:0; background:none; color:var(--accent); font-weight:600; font-size:var(--t-small); cursor:pointer; }
.ask__done{ display:grid; justify-items:center; gap:var(--s-3); text-align:center; padding-top:var(--s-5); }
.ask__done .ask__q{ margin:var(--s-2) 0 0; }
.ask__ok{ display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--ok); color:#0A0A0B; }
.ask__ok svg{ width:34px; height:34px; }
.ask__done .btn{ margin-top:var(--s-4); }
@media (max-width:640px){   /* Handy: Anfrage kommt als Sheet von unten, wie in einer App */
  .ask{ width:100%; max-width:100%; margin:auto 0 0; border-radius:28px 28px 0 0; max-height:92svh; }
  .ask__form{ padding-bottom:calc(20px + env(safe-area-inset-bottom)); min-height:min(520px, 80svh); }
  .ask[open]{ animation:askUp 420ms var(--ease-out) both; }
  @keyframes askUp{ from{ transform:translateY(100%); } to{ transform:none; } }
}

/* ---------- Video: lädt erst nach Klick (B7: Start nur durch den Besucher; kein Laden von YouTube vorher) ---------- */
.film{ padding-top:clamp(16px, 4vw, 48px); }   /* schließt an die Referenzen an */
.film__grid{ display:grid; gap:var(--s-5); }
@media (min-width:1100px){ .film__grid{ grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:var(--s-8); align-items:end; } .film .sec__head{ margin-bottom:0; } }
.film__note{ margin-top:var(--s-4); max-width:34ch; }
.yt{ position:relative; max-width:760px; aspect-ratio:16 / 9; border-radius:var(--r-card); overflow:hidden; background:#000; isolation:isolate;
  box-shadow:0 0 0 1px var(--line), 0 40px 90px -40px rgba(0,0,0,.9); }   /* BI5: Seitenverhältnis fest, kein Springen beim Laden */
.yt__btn{ position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:inherit; background:none; color:#FFFFFF; cursor:pointer; }
.yt__btn img{ width:100%; height:100%; object-fit:cover; object-position:40% 40%; transition:transform 900ms var(--ease); }
.yt__btn::after{ content:""; position:absolute; inset:0; background:radial-gradient(90% 80% at 50% 50%, rgba(8,8,9,.08) 0%, rgba(8,8,9,.5) 100%); }   /* Vignette, Knopf hebt sich ab */
.yt__btn:hover img{ transform:scale(1.03); }
.yt__btn:focus-visible{ outline-offset:-6px; }
.yt__play{ position:absolute; z-index:1; left:50%; top:50%; display:grid; place-items:center; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%;
  background:rgba(10,10,11,.6); box-shadow:inset 0 0 0 1px rgba(244,242,238,.34), 0 14px 40px rgba(0,0,0,.45); transition:background-color var(--d-1) var(--ease), transform var(--d-1) var(--ease); }
.yt__play svg{ width:30px; height:30px; margin-left:3px; }
.yt__btn:hover .yt__play, .yt__btn:focus-visible .yt__play{ background:var(--accent-a) var(--accent-grad); transform:scale(1.05); }   /* F1: Akzent = Interaktion */
.yt__btn:active .yt__play{ transform:scale(.96); }
@media (min-width:1000px) and (hover:hover) and (prefers-reduced-transparency: no-preference){
  .yt__play{ background:rgba(10,10,11,.42); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); }   /* M4: Glas nur über Bild, abgedunkelt */
}
.yt__tag{ position:absolute; z-index:1; left:14px; bottom:14px; padding:5px 10px; border-radius:10px; background:rgba(10,10,11,.78); font-size:var(--t-cap); font-weight:500; line-height:1.35; color:var(--text); }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Mehr dazu: Blatt zu den Kacheln (L3 schrittweise; Handy von unten wie die Anfrage) ---------- */
.info{ padding:0; border:0; width:min(540px, calc(100% - 32px)); max-height:calc(100svh - 48px); border-radius:28px; background:var(--surface); color:var(--text);
  box-shadow:0 40px 120px rgba(0,0,0,.65), 0 0 0 1px var(--line); overflow:auto; overscroll-behavior:contain; }
.info::backdrop{ background:rgba(5,5,6,.72); }
.info[open]{ animation:askIn 380ms var(--ease-out) both; }
.info__media{ position:relative; aspect-ratio:16 / 9; overflow:hidden; background:#111113; }
.info__media img{ width:100%; height:100%; object-fit:cover; }
.info__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,22,0) 50%, var(--surface) 100%); }
.info__x{ position:absolute; z-index:2; top:12px; right:12px; background:rgba(10,10,11,.62); border-color:rgba(244,242,238,.3); }
.info__x:hover{ background:rgba(10,10,11,.85); }
.info__body{ position:relative; display:grid; gap:var(--s-3); margin-top:-20px; padding:0 clamp(20px, 4vw, 32px) 28px; }
.info__body .eyebrow{ margin:0; }
.info__t{ font-size:clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height:1.1; letter-spacing:-.03em; }
.info__t:focus{ outline:none; }
.info__body p:not(.eyebrow){ color:var(--text-2); }
.info__body .btn{ margin-top:var(--s-3); }
@media (max-width:640px){
  .info{ width:100%; max-width:100%; margin:auto 0 0; border-radius:28px 28px 0 0; max-height:92svh; }
  .info[open]{ animation:askUp 420ms var(--ease-out) both; }
  .info__body{ padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- verkauf.html ---------- */
.page{ padding-top:calc(104px + env(safe-area-inset-top)); }
.horses{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.horses .horse{ width:auto; }
.horses .horse[hidden]{ display:none; }
.flow{ display:grid; gap:14px; counter-reset:f; list-style:none; margin:0; padding:0; }
@media (min-width:900px){ .flow{ grid-template-columns:repeat(4, 1fr); } }
.flow li{ counter-increment:f; padding:24px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); }
.flow li::before{ content:counter(f); display:grid; place-items:center; width:36px; height:36px; margin-bottom:var(--s-4); border-radius:50%; background:var(--grad); color:#0A0A0B; font-weight:700; }
.flow b{ display:block; font-size:var(--t-h3); letter-spacing:-.02em; margin-bottom:6px; }
.flow span{ color:var(--text-2); font-size:var(--t-small); }
.akte{ display:grid; gap:var(--s-5); padding:clamp(20px, 3.5vw, 40px); border-radius:32px; background:var(--surface); border:1px solid var(--line); }
@media (min-width:900px){ .akte{ grid-template-columns:5fr 6fr; align-items:start; } }
.akte img{ border-radius:20px; aspect-ratio:4/3; object-fit:cover; width:100%; }
.akte dl{ display:grid; grid-template-columns:auto 1fr; margin:var(--s-4) 0 var(--s-5); font-size:var(--t-small); }
.akte dt, .akte dd{ margin:0; padding:10px 0; border-top:1px solid var(--line); }
.akte dt{ color:var(--text-2); padding-right:var(--s-5); }
.akte dd{ text-align:right; font-weight:600; }
.row-btns{ display:flex; flex-wrap:wrap; gap:var(--s-3); }

/* ---------- B2/P16: Bewegung reduzieren → ruhige Fassung ---------- */
@media (prefers-reduced-motion: reduce){
  .logo-in, .ld, .hero__push, .wiz__step.is-entering{ animation:none!important; }
  .hero__blur, .hero__push picture.hero__blur{ display:none; }   /* nicht in Unschärfe hinein animieren */
  .hero__veil::after, .hero__ui{ transition:opacity 200ms linear; }
  .is-up .hero__ui{ transform:none; }
  .is-up .hero__veil::after{ background:rgba(10,10,11,.7); }
  .nav, .nav__links a::after, .nav__here{ transition:none; }
  .js .nav:not(.nav--always){ transform:none; transition:opacity 150ms linear; }   /* Verschieben durch Überblenden ersetzt */
  .gal__main img, .gal__main img.is-frei{ transform:none!important; transition:opacity 150ms linear; }
  .swatch:active{ transform:none; }
  .js .rv{ opacity:1; filter:none; transition:none; }   /* P16: sofort sichtbar, keine Unschärfe */
  .tile, .tile__plus, .yt__play, .yt__btn img{ transition:none!important; transform:none!important; }
  .info[open]{ animation:fadeIn 150ms linear both!important; }
  .sheet::after{ transition:none; }
  .horse{ transform:none!important; }
  .horse img{ transform:scale(1.04)!important; }
  .horse__body{ opacity:1!important; }
  .float__item{ transform:none!important; }
  .tile--img img, .prod img, .link svg, .tile__go svg, .results svg{ transition:none!important; transform:none!important; }
  .ask[open], .in-fwd, .in-back{ animation:fadeIn 150ms linear both!important; }
  .btn:active, .round:active{ transform:none; }
}
.hero__pause{ position:absolute; right:var(--gut); bottom:28px; background:rgba(10,10,11,.6); }

@media (max-width:599px){
  .float{ height:124vw; }
  .float__item--a{ top:24%; }
  .float__item--b{ width:50%; }
  .float__item--c{ width:58%; }
}
.ask__nav[hidden]{ display:none; }
/* P21: Knöpfe in den kleiner gezeichneten Nachbarkarten bleiben ≥ 44 px */
.horse .btn--sm{ min-height:48px; }
/* P06: 200 % Schrift – Leiste und Karten brechen um statt überzulaufen */
.nav__brand{ min-width:0; flex:0 1 auto; }
.nav__brand span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav__cta, .nav__menu{ flex:none; }
.horse h3, .tile b{ overflow-wrap:break-word; }