/* ═══ home.css · Bee-ID Startseite im Tara-Stil ═══
   Quelle: design-system/vorlagen/tara-stil/vorlage.css (Bauplan _analyse/04-bauplan.md). Eingebunden nur von welcome.blade.php,
   per versioned_asset() (public/ ist ein Jahr immutable gecacht). Bildpfade absolut unter /images/.
   Reihenfolge (Bauplan §1.4): 1 Tokens → 2 Schriften → 3 Basis → 4 Komponenten → 5 Sektionen
   → 6 Story-Zustände → 7 Medien-Queries → 8 prefers-reduced-motion → 9 forced-colors → 10 print.
   Regel: Hex-Werte nur im Token-Block (Ausnahmen: Gold-Transparenzen rgba(255,196,0,…) bzw. rgba(201,160,0,…)). */


/* ═══ 1 · Tokens – Light Luxury (Standard) ═══ */
:root{
  color-scheme: light dark;
  /* Marke */
  --gold:#FFC400; --gold-deep:#caa000; --gold-deep2:#a87b00;
  --gold-text:#8a6500;            /* AA-fester Gold-Text auf Hell (4,94:1 auf --ground) */
  --on-gold:#3a2d00; --gold-hi:#FFD84D; --gold-lo:#f0b400;
  /* Text */
  --ink:#1f1808; --ink-2:#2a2210; --body:#5f5647; --muted:#6b6253; --muted-2:#8b8171;
  --ghost:#dcd7ca;                /* Startfarbe der Zeichen-Entwicklung (14 % Ink auf Ground) */
  /* Flächen */
  --ground:#fbf6ea; --surface:#fffdf8; --surface-2:#fdf8ec;
  --border:#ece2c6; --border-soft:#f2ead6; --border-strong:#cdbb8a;
  --field-border:#a87b00;         /* Eingabe-Pill, ≥ 3:1 (WCAG 1.4.11) */
  --night:#120e06; --on-night:#fffdf8; --on-night-muted:#c9c0ad;
  --tile-honey:#ffe9a6; --tile-apricot:#ffe2b8; --tile-cream:#fff6d6; --tile-wax:#f3ead2; --tile-ok:#dcefd9;
  --stage-a:var(--tile-honey);    /* Kapitel A „Finder-Weg“ */
  --stage-b:var(--night);         /* Kapitel B „Besitzer-Weg“ */
  --hot:rgba(255,196,0,.45);      /* Honig-Unterlage für Hot-Momente (Gold nie als Textfarbe auf Hell) */
  --ok:#2e7d32; --ok-bg:rgba(46,125,50,.12); --ok-solid:#2e9c4a;
  --ok-text:#1b5e20;              /* D-03: Statustext auf --ok-bg (6,6:1 auf --surface) – im Bauplan §2.1 nachtragen */
  --on-ok:#fff;                   /* D-03: Haken auf --ok-solid, modusfest (kein Dark-Override, 3,5:1) */
  --device:#0d0d0d;
  --glass:rgba(253,248,236,.72); --glass-brd:rgba(201,160,0,.20); --glass-night:rgba(18,14,6,.62);
  --focus:var(--gold-text);
  /* Schatten (gold-braun getönt) */
  --shadow-sm:0 2px 8px rgba(168,123,0,.08);
  --shadow-md:0 12px 34px rgba(168,123,0,.13);
  --shadow-lg:0 30px 70px rgba(120,88,0,.18);
  --shadow-gold:0 16px 40px rgba(255,196,0,.30);
  --shadow-gold-hover:0 20px 48px rgba(255,196,0,.40);
  --shadow-card:0 21px 40px rgba(120,88,0,.07);   /* TARA: How-Karte 4 % */
  --shadow-nav:0 6px 24px rgba(120,88,0,.10);
  --shadow-photo:0 10px 20px rgba(120,88,0,.16);
  --halo:0 0 0 6px rgba(255,196,0,.18);
  /* Radien */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-2xl:40px; --r-pill:999px; --r-device:44px; --r-screen:33px;
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  /* Schrift – entschieden 01.10.2026: System-Font-Stack wie live (welcome.blade.php), kein Web-Font.
     Display und Body teilen denselben Stack; Charakter kommt aus Gewicht (850–900) und negativer Laufweite. */
  --font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:var(--font-sans);
  --font-body:var(--font-sans);
  /* font-stretch bewusst wirkungslos (100 %): Systemschriften haben je Plattform unterschiedliche
     Breitenschnitte – so wählt kein Betriebssystem einen schmaleren/breiteren Schnitt als die anderen. */
  --wide:100%; --wide-mid:100%; --normal:100%;
  /* Typo-Skala (siehe Bauplan §2.2) */
  --fs-hero:clamp(2.75rem, 1rem + 5vw, 5.375rem);
  --fs-pin:clamp(2.25rem, .6rem + 7.4vw, 7rem);
  --fs-pin-static:clamp(2rem, 1rem + 4.2vw, 4.25rem);
  --fs-h2:clamp(2.125rem, 1.1rem + 3.8vw, 4.5rem);
  --fs-h2-sm:clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  --fs-mask:clamp(1.75rem, 1rem + 2.2vw, 2.875rem);
  --fs-cta:clamp(2.25rem, 1rem + 4vw, 4.5rem);
  --fs-benefit:clamp(1.25rem, .8rem + 1.5vw, 1.875rem);
  --fs-anh:clamp(2rem, .9rem + 3vw, 4rem);           /* S04-Bühne: Vorteile-Zeilen (Runde 2) */
  --fs-h3:clamp(1.1875rem, 1rem + .5vw, 1.375rem);
  --fs-price:clamp(2.75rem, 2rem + 2.5vw, 3.75rem);
  --fs-ghost:clamp(9rem, 20vw, 17rem);
  --fs-lead:clamp(1.0625rem, .95rem + .55vw, 1.375rem);
  --fs-note:clamp(.9375rem, .85rem + .3vw, 1.0625rem);
  --fs-body:1rem; --fs-long:1.0625rem; --fs-card:.9375rem; --fs-small:.875rem;
  --fs-eyebrow:.75rem; --fs-btn:.9375rem; --fs-btn-sm:.875rem;
  /* Layout */
  --pad-x:clamp(16px, 8vw - 14px, 100px);          /* 375 → 16 · 1024 → 68 · ≥ 1425 → 100 */
  --content:min(1200px, calc(100% - 2 * var(--pad-x)));
  --nav-h:64px;
  --finder-h:0px;                                     /* ≥ 768 px: 62px (Finder-Bar oben) */
  --sec-y:clamp(72px, 10vw, 152px);
  --gap:clamp(56px, 6vw, 120px);                      /* TARA: LANE_GAP */
  --copy-w:min(30vw, 420px);                          /* TARA: COPY_W */
  --dev-w:min(260px, 24vw, 30svh);                    /* Pendel-Objekt in den Kapiteln */
  /* Bewegung: CSS-Kurven = GSAP-Eases */
  --ease:cubic-bezier(.16,1,.3,1);          /* expo.out */
  --ease-out:cubic-bezier(.33,1,.68,1);     /* power2.out */
  --ease-out-3:cubic-bezier(.25,1,.5,1);    /* power3.out */
  --ease-in-out:cubic-bezier(.65,0,.35,1);  /* power2.inOut */
  --ease-in:cubic-bezier(.32,0,.67,0);      /* power2.in */
  --t-press:.12s; --t-hover:.18s; --t-ui:.3s; --t-screen:.35s; --t-reveal:.6s; --t-dive:.8s;
  /* Ebenen */
  /* S04-Bühne (3D-Anhänger): Licht liest anhaenger3d.js, Schein/Schatten das CSS */
  --anh-exposure:1.05; --anh-key:1.4; --anh-rim:1.1;
  --anh-glow:rgba(255,196,0,.24); --anh-shadow:rgba(120,88,0,.30);
  --z-mask:3; --z-finder:150; --z-nav:200; --z-sheet:250; --z-cookie:300; --z-loader:400;
}
@media (min-width:768px){ :root{ --finder-h:62px; } }

/* ═══ 1 · Tokens – Dark Honey ═══ (beide Blöcke IDENTISCH halten) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gold-text:#FFC400;
    --ink:#f0ead9; --ink-2:#f7f2e4; --body:#b8ad97; --muted:#a89f8c; --muted-2:#8d8473; --ghost:#33302a;
    --ground:#14120d; --surface:#1e1b14; --surface-2:#1a170f;
    --border:#2c2820; --border-soft:#26221a; --border-strong:#4a4232; --field-border:#a89f8c;
    --night:#0c0a06; --on-night:#f0ead9; --on-night-muted:#b8ad97;
    --tile-honey:#2e2513; --tile-apricot:#2f2218; --tile-cream:#26231a; --tile-wax:#221d12; --tile-ok:#1c2a1d;
    --hot:rgba(255,196,0,.28); --ok:#7fd986; --ok-bg:rgba(127,217,134,.14); --ok-text:#7fd986;
    --glass:rgba(22,19,12,.72); --glass-brd:rgba(255,196,0,.14);
    --focus:#FFC400;
    --shadow-sm:0 2px 8px rgba(0,0,0,.4); --shadow-md:0 12px 34px rgba(0,0,0,.5);
    --shadow-lg:0 30px 70px rgba(0,0,0,.6); --shadow-gold:0 16px 44px rgba(255,196,0,.22);
    --shadow-gold-hover:0 20px 48px rgba(255,196,0,.30); --shadow-card:0 21px 40px rgba(0,0,0,.45);
    --shadow-nav:0 6px 24px rgba(0,0,0,.45); --shadow-photo:0 10px 20px rgba(0,0,0,.5);
    --halo:0 0 0 6px rgba(255,196,0,.22);
    --anh-exposure:1.15; --anh-key:1.5; --anh-rim:1.7; --anh-glow:rgba(255,196,0,.17); --anh-shadow:rgba(0,0,0,.65);
  }
}
/* Exakt derselbe Block wie oben (für QA per DevTools umschaltbar: <html data-theme="dark">) */
:root[data-theme="dark"]{
  color-scheme: dark;
  --gold-text:#FFC400;
  --ink:#f0ead9; --ink-2:#f7f2e4; --body:#b8ad97; --muted:#a89f8c; --muted-2:#8d8473; --ghost:#33302a;
  --ground:#14120d; --surface:#1e1b14; --surface-2:#1a170f;
  --border:#2c2820; --border-soft:#26221a; --border-strong:#4a4232; --field-border:#a89f8c;
  --night:#0c0a06; --on-night:#f0ead9; --on-night-muted:#b8ad97;
  --tile-honey:#2e2513; --tile-apricot:#2f2218; --tile-cream:#26231a; --tile-wax:#221d12; --tile-ok:#1c2a1d;
  --hot:rgba(255,196,0,.28); --ok:#7fd986; --ok-bg:rgba(127,217,134,.14); --ok-text:#7fd986;
  --glass:rgba(22,19,12,.72); --glass-brd:rgba(255,196,0,.14);
  --focus:#FFC400;
  --shadow-sm:0 2px 8px rgba(0,0,0,.4); --shadow-md:0 12px 34px rgba(0,0,0,.5);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6); --shadow-gold:0 16px 44px rgba(255,196,0,.22);
  --shadow-gold-hover:0 20px 48px rgba(255,196,0,.30); --shadow-card:0 21px 40px rgba(0,0,0,.45);
  --shadow-nav:0 6px 24px rgba(0,0,0,.45); --shadow-photo:0 10px 20px rgba(0,0,0,.5);
  --halo:0 0 0 6px rgba(255,196,0,.22);
  --anh-exposure:1.15; --anh-key:1.5; --anh-rim:1.7; --anh-glow:rgba(255,196,0,.17); --anh-shadow:rgba(0,0,0,.65);
}
:root[data-theme="light"]{ color-scheme: light; }

body{ background:var(--ground); color:var(--ink); }


/* ═══ 2 · Schriften ═══ System-Font-Stack (--font-sans) wie live: kein @font-face, kein Web-Font, kein Layoutsprung
   durch Font-Swap und keine Drittanbieter-Anfrage (DSGVO-Thema Google Fonts entfällt). */


/* ═══ 3 · Basis ═══ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html:not(.story){ scroll-behavior:smooth; }          /* live-Verhalten ohne Story */
html.story{ scroll-behavior:auto; }                  /* CSS-Smooth und ScrollTrigger-Snap vertragen sich nicht */
/* A11Y-02 (WCAG 2.4.11, Technik C43): fokussierte Elemente nie unter Nav/Finder-Bar. Gilt auch für native Ankersprünge
   (No-JS, Hash beim Laden) – daher kein zusätzliches scroll-margin an #preise. anchors() rechnet mit eigenem Versatz. */
html{ scroll-padding-top:calc(var(--nav-h) + var(--finder-h) + 16px); }
@media (max-width:767px){ html{ scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom)); } }   /* Finder-Bar unten */
body{ margin:0; font:400 var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-synthesis:none; }
img,video,svg,canvas{ display:block; max-width:100%; }
img,video{ height:auto; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
ul[class],ol[class]{ margin:0; padding:0; list-style:none; }   /* nur gestaltete Listen; Fließtext-Listen behalten ihre Punkte */
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration-thickness:1.5px; text-underline-offset:4px; }
strong,b{ font-weight:700; }
[hidden]{ display:none !important; }
::selection{ background:rgba(255,196,0,.30); color:var(--ink); }

/* Fokus-Ring (Matrix §3.1): 2,5 px --focus, Versatz 3 px */
:focus-visible{ outline:2.5px solid var(--focus); outline-offset:3px; border-radius:6px; }
:focus:not(:focus-visible){ outline:none; }
/* Auf Gold-Flächen dunkler Ring, auf der Nacht-Bühne Gold-Ring */
.surf-gold :focus-visible{ outline-color:var(--on-gold); }   /* modusfest (D-06): --ink kippt im Dark-Modus hell */
.surf-night :focus-visible{ outline-color:var(--gold); }

.sr-only{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Raster und Container (§2.3) */
.wrap{ width:var(--content); margin-inline:auto; }
.wrap-720,.seo-col{ width:min(720px, var(--content)); margin-inline:auto; }   /* SEO-Textspalte (D-09: .seo-col zusammengeführt) */
/* D-09: Bibliothek für den Port, auf der Startseite ungenutzt (Entscheidung Nico: behalten oder streichen) */
.wrap-760{ width:min(760px, var(--content)); margin-inline:auto; }   /* FAQ-Liste, Masken-Kopf */
.wrap-920{ width:min(920px, var(--content)); margin-inline:auto; }   /* Preise */
.sec{ padding-block:var(--sec-y); }

/* Kein horizontales Scrollen: jede Sektion mit Einflügen bekommt clip (erzeugt keinen Scroll-Container, Pins bleiben intakt).
   B-4 (Runde 2): NIE auf ein gepinntes Element (#anhaenger, .rb, #features) – beschneidet das Pin-Element selbst Overflow
   (overflow-x clip/hidden, contain:paint), wertet Chromium das Fixieren als Sprung um den Dokument-Offset (layout-shift 0,8–1,0
   je Pin-Grenze, ohne hadRecentInput → Feld-CLS). Dort sitzt der Clip auf einem inneren Wrapper (.anh-clip, .rb-clip, .how-clip;
   position:relative hält .rb-title [absolut] im Clip). #auftakt pinnt ab Dokument-Offset 0 (kein Sprung) und behält den Clip. */
.auftakt,.anh-clip,.rb-clip,.why,.how-clip,.pricing,.cta,.site-footer{ overflow-x:clip; }
@supports not (overflow:clip){ .auftakt,.anh-clip,.rb-clip,.why,.how-clip,.pricing,.cta,.site-footer{ overflow-x:hidden; } }
.rb-clip,.how-clip{ position:relative; }

/* Typo-Skala (§2.2) – Rollenklassen für alle Teams */
.h2{ font:850 var(--fs-h2)/1.05 var(--font-display); font-stretch:var(--wide); letter-spacing:-.02em; text-wrap:balance; color:var(--ink); }
.h2-sm{ font:850 var(--fs-h2-sm)/1.08 var(--font-display); letter-spacing:-.02em; text-wrap:balance; color:var(--ink); }
.h3,.why-copy h3,.how-card h3{ font:850 var(--fs-h3)/1.15 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; color:var(--ink); }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--body); }
/* D-09: Bibliothek für den Port, auf der Startseite ungenutzt (Entscheidung Nico: behalten oder streichen) */
.note{ font-size:var(--fs-note); line-height:1.5; color:var(--body); }
.small{ font-size:var(--fs-small); }
.num{ font-variant-numeric:tabular-nums; }


/* ═══ 4 · Komponenten ═══ */

/* ── 4.1 Buttons (Pills) mit allen Zuständen (§3.1) ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:12px 22px;
  font:750 var(--fs-btn)/1 var(--font-display); font-stretch:var(--wide-mid); border-radius:var(--r-pill);
  border:1.5px solid transparent; text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--ease), box-shadow var(--t-hover) var(--ease-out), background-color var(--t-hover), border-color var(--t-hover), opacity var(--t-hover); }
.btn:active{ transform:scale(.97); }
.btn-gold{ background:var(--gold); color:var(--on-gold); box-shadow:var(--shadow-gold); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border-strong); }
.btn-dark{ background:var(--ink); color:var(--surface); }
.btn-night{ background:var(--on-night); color:var(--night); }             /* auf --night: helle Pill in beiden Modi (D-07) */
@media (hover:hover){
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:var(--shadow-gold-hover); }
  .btn-ghost:hover{ border-color:var(--gold-text); background:rgba(201,160,0,.06); }
  .btn-dark:hover,.btn-night:hover{ transform:translateY(-2px); opacity:.9; }
  .btn:hover .arr{ transform:translateX(4px); }
}
.btn-gold:active,.btn-dark:active,.btn-night:active{ transform:scale(.97); }
/* D-09: .arr-Regeln = Bibliothek für den Port (auf der Startseite ungenutzt) */
.btn .arr{ display:inline-block; transition:transform var(--t-hover) var(--ease-out); }
.btn[aria-disabled="true"],.btn:disabled{ opacity:.45; box-shadow:none; pointer-events:none; }
.btn-block{ width:100%; }
.btn-lg{ min-height:56px; padding:16px 34px; font-size:1rem; }

/* ── 4.2 Text-Link und Karten-Link (Matrix §3.1) ── */
/* D-09: Bibliothek für den Port, auf der Startseite ungenutzt (Entscheidung Nico: behalten oder streichen) */
.tlink{ color:var(--ink); text-decoration:none; }
@media (hover:hover){ .tlink:hover{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; } }
.card-link{ display:block; color:inherit; text-decoration:none;
  transition:transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out), border-color var(--t-hover); }
.card-link img{ transition:transform var(--t-reveal) var(--ease); }
.card-link .more .arr{ display:inline-block; transition:transform var(--t-hover) var(--ease-out); }
@media (hover:hover){
  .card-link:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); }
  .card-link:hover img{ transform:scale(1.03); }
  .card-link:hover .more .arr{ transform:translateX(4px); }
}
.card-link:active{ transform:scale(.99); }
.card-link:focus-visible{ outline-offset:4px; border-radius:var(--r-lg); }

/* ── 4.3 Pill-Formular (§3.2, ein Bauteil für Hero und Finder-Bar) ── */
.pill-form{ display:flex; align-items:center; gap:4px; width:100%; max-width:520px; padding:4px 4px 4px 16px;
  background:var(--surface); border:1.5px solid var(--field-border); border-radius:var(--r-pill); box-shadow:var(--shadow-md);
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.pill-form:focus-within{ border-color:var(--ink); border-width:2px; box-shadow:var(--halo), var(--shadow-md); }
.pill-form__icon{ width:20px; height:20px; color:var(--gold-text); flex:none; }
.pill-form input{ flex:1; min-width:0; height:48px; padding:0 8px; border:0; background:transparent; color:var(--ink);
  font:600 16px/1 var(--font-display); letter-spacing:.04em; text-transform:uppercase; }
.pill-form input::placeholder{ color:var(--muted); text-transform:none; letter-spacing:0; opacity:1; }   /* A11Y: --muted statt --muted-2 */
.pill-form input:focus{ outline:none; }        /* Fokus zeigt der Container (:focus-within) */
.pill-form input:-webkit-autofill{ -webkit-box-shadow:0 0 0 40px var(--surface) inset; -webkit-text-fill-color:var(--ink); }      /* TARA: Autofill-Fix */
.pill-form button{ /* = .btn .btn-gold */ flex:none; min-height:48px; padding:0 22px; font-size:14px; font-weight:750; letter-spacing:.06em; }
.pill-form button:focus-visible{ outline-color:var(--ink); outline-offset:2px; }
@media (hover:hover){ .pill-form button:hover{ background:var(--gold-deep); transform:none; } }
.pill-form button:active{ transform:scale(.97); }   /* D-04: gleiche Spezifität wie :hover (0,2,1), steht später → Aktiv-Zustand gewinnt */

/* ── 4.4 Eyebrow (§3.3) ── */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; font:800 var(--fs-eyebrow)/1.2 var(--font-body);
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.eyebrow .dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--gold); animation:pulse 2.4s var(--ease-out) 3; }
.surf-night .eyebrow{ color:var(--gold); }

/* ── 4.5 Waben (spitz stehende Sechsecke) ── */
.hx{ display:grid; place-items:center; aspect-ratio:.866/1; clip-path:var(--hex); }
.hx--honey,.hx[data-tile="honey"]{ background:var(--tile-honey); }
.hx--gold,.hx[data-tile="gold"]{ background:var(--gold); color:var(--on-gold); }
.hx--apricot,.hx[data-tile="apricot"]{ background:var(--tile-apricot); }
/* D-09: .hx--cream/--wax/--ok = Bibliothek für den Port; genutzt werden data-tile bzw. .hx-ok */
.hx--cream,.hx[data-tile="cream"]{ background:var(--tile-cream); }
.hx--wax,.hx[data-tile="wax"]{ background:var(--tile-wax); }
.hx--ok,.hx-ok{ background:var(--ok-solid); color:var(--surface); }

/* ── 4.6 Pin-Titel (Riesen-Titel) – Grundklassen für splitLines()/fitTitle() ──
   Statisch: --fs-pin-static mit normalem Umbruch + statischem Markenpunkt (::after).
   Zerlegt (.is-split, gesetzt von splitLines): --fs-pin, Zeilen nie umbrechen, JS verkleinert per fitTitle(). */
.pin-title{ position:relative; margin:0; color:var(--ink); text-align:center; text-transform:uppercase; text-wrap:balance;
  font:900 var(--fs-pin-static)/1.02 var(--font-display); font-stretch:var(--wide); letter-spacing:-.005em; }
/* Laufweite gemessen (Playwright, Segoe UI 900, alle 5 Sprachen): ab −.015em berühren sich Versalien (KT, NT, TT); bei −.01em
   berührt „KT“ sich noch in der Kantenglättung (Alpha ≥ 32: 0 px, mobil ≈ 0,2 px). −.005em ist in allen 5 Sprachen frei
   (TYPO-06, Runde 2) – auf Apple (SF Pro) und Android (Roboto) nachprüfen. Die Tara-Dichte kommt aus Größe und Zeilenhöhe .98. */
.pin-title.is-split{ font-size:var(--fs-pin); line-height:.98; }
.pt-line{ display:block; position:relative; width:max-content; max-width:none; margin-inline:auto; white-space:nowrap; }
.pt-in{ display:inline-block; }

/* ── 4.7 Waben-Slot im Riesen-Titel und statischer Markenpunkt ── */
.slot{ display:inline-block; width:.78em; height:.9em; margin:0 0 .1em .12em; vertical-align:middle;
  clip-path:var(--hex); background:var(--gold); }
html:not(.story) .pin-title::after{ content:""; display:inline-block; width:.62em; height:.72em; margin-left:.18em;
  clip-path:var(--hex); background:var(--gold); vertical-align:middle; }
.pin-title.is-split::after{ content:none; }

/* ── 4.8 Zerlegte Texte (splitChars/splitWords) ── */
.split{ display:inline; }
.split .w{ display:inline-block; white-space:nowrap; }
.split .c{ display:inline-block; }

/* ── 4.9 Karten ── */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }

/* ── 4.10 Veil (Anker-Sofortsprung, §5.3 anchors) ── */
.veil{ position:fixed; inset:0; z-index:calc(var(--z-loader) - 1); background:var(--ground); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--ease-out), visibility 0s linear .18s; }
.veil.is-on{ opacity:1; visibility:visible; transition:opacity .18s var(--ease-out), visibility 0s; }

/* ── 4.11 Glimmer-Neustart (glimmerOnce): Klasse stoppt die Animation außerhalb des Viewports;
   beim Wiedereintritt wird sie entfernt, die CSS-Animation startet neu ── */
.glimmer-off,.glimmer-off::before,.glimmer-off::after{ animation:none !important; }

/* ── 4.12 Keyframes (global) ── */
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,196,0,.55); } 100%{ box-shadow:0 0 0 12px rgba(255,196,0,0); } }
@keyframes shimmer{ from{ transform:translateX(-120%) skewX(-18deg); } to{ transform:translateX(220%) skewX(-18deg); } }
@keyframes scanY{ 0%{ transform:translateY(0); } 100%{ transform:translateY(var(--scan-h, 300px)); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
@keyframes finderGlimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px); } }


/* ═══ 5 · Sektionen ═══
   Eingefügte Team-Teile in der Reihenfolge chrome · hero · kapitel · whyhow · conversion (inkl. eigener html.story-Zustände und Media-Queries). Ab jetzt hier pflegen. */

/* ═══ Team chrome · S00 Loader · S01 Navigation · S02 Mobile-Menü · S13 Footer · S14 Finder-Bar · S15 Cookie-Banner ═══
   Nur Tokens und Komponenten aus dem Fundament; Hex-Werte gibt es hier keine (Ausnahmen laut Fundament: Gold-Transparenzen,
   dazu das live-Overlay rgba(0,0,0,.55)). Dark-Regeln stehen jeweils doppelt: OS-Dark (ohne data-theme="light") und
   data-theme="dark" (QA-Umschalter). */


/* ═══ S00 · Loader ═══ TARA: T-2.3 */
.loader{ display:none; }
html.story.with-loader .loader{ display:grid; position:fixed; inset:0; z-index:var(--z-loader); place-items:center;
  background:var(--ground); opacity:1; transition:opacity .5s var(--ease-out); }
.loader picture{ grid-area:1/1; display:block; width:min(36vw, 200px); }
.loader img{ display:block; width:100%; height:auto; }
.loader-base{ opacity:.2; }
.loader-fill{ clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0); transition:clip-path .3s ease-out; }   /* TARA: läuft nie rückwärts (JS) */
.loader.is-done{ opacity:0; pointer-events:none; }


/* ═══ S01 · Navigation ═══ TARA: T-2.2 */
.nav{ position:fixed; inset:0 0 auto; z-index:var(--z-nav); padding:calc(10px + env(safe-area-inset-top)) var(--pad-x) 10px; background:none; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }

/* Kapseln: Fläche auf ::before (backdrop-filter am Element selbst wäre Containing Block für das fixierte Sheet → kaputt).
   inset:-4px = Bauplan „padding:4px“ ohne Höhensprung; die Nav bleibt 64 px hoch. */
.nav-cap{ position:relative; isolation:isolate; display:flex; align-items:center; min-height:44px; min-width:0; }
.nav-cap::before{ content:""; position:absolute; inset:-4px; z-index:-1; border-radius:var(--r-pill); pointer-events:none;
  background:var(--glass); border:1px solid var(--glass-brd); box-shadow:var(--shadow-nav);
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  opacity:0; transition:opacity var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out); }
.nav.scrolled .nav-cap::before{ opacity:1; }
html:not(.js) .nav-cap::before{ opacity:1; }                     /* No-JS: Header-Glas dauerhaft (lesbar über allem) */

/* Logo (Höhe 34 px, mobil 30 px). Nacht-Bühne per Bildtausch, nie per Filter. */
.nav-logo{ flex:none; padding-inline:6px; border-radius:var(--r-pill); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--ease); }
.nav-logo picture{ display:block; }
.nav-logo img{ display:block; height:34px; width:auto; transition:opacity var(--t-hover) var(--ease-out); }
.nav-logo .logo-night{ display:none; }
.nav-logo:active{ transform:scale(.97); }
@media (hover:hover){ .nav-logo:hover img{ opacity:.85; } }

/* Links */
.nav-links{ gap:2px; }
.nav-links a{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:9px 13px; border-radius:var(--r-pill);
  font:650 14px/1.2 var(--font-body); color:var(--ink); text-decoration:none; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover), transform var(--t-press) var(--ease); }
.nav-links a:active{ transform:scale(.97); }
.nav-links a.nav-fest{ border:1.5px solid var(--gold); background:rgba(255,196,0,.10); color:var(--gold-text); font-weight:750; padding-block:7.5px; }
@media (hover:hover){
  .nav-links a:hover{ background:rgba(201,160,0,.12); }
  .nav-links a.nav-fest:hover{ background:var(--gold); color:var(--on-gold); }
}

/* Aktionen und Nav-Pills */
.nav-actions{ flex:none; gap:8px; }
.btn-nav{ min-height:44px; padding:9px 17px; font-size:var(--fs-btn-sm); }

/* ── Sprachmenü (B2) ── */
.lang{ position:relative; }
.lang-btn{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 12px; border-radius:var(--r-pill); list-style:none;
  border:1px solid transparent; font:750 13px/1 var(--font-body); color:var(--ink); cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-hover) var(--ease-out), border-color var(--t-hover), transform var(--t-press) var(--ease); }
.lang-btn::-webkit-details-marker{ display:none; }
.lang-btn::marker{ content:""; }
.lang-btn:active{ transform:scale(.97); }
.lang-btn .fi, .lang-menu .fi, .mnav-lang .fi{ width:20px; height:14px; line-height:14px; border-radius:2px; box-shadow:0 0 0 1px var(--border); flex:none; }
.lang-btn .caret{ font-size:9px; opacity:.6; transition:transform var(--t-hover) var(--ease); }
.lang[open] > .lang-btn{ background:rgba(255,196,0,.16); border-color:var(--border-strong); }
.lang[open] > .lang-btn .caret{ transform:rotate(180deg); }
@media (hover:hover){ .lang-btn:hover{ background:rgba(201,160,0,.10); border-color:var(--gold-deep); } }

.lang-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:180px; padding:6px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md); }
.lang[open] .lang-menu{ animation:menuIn .18s var(--ease-out); }
.lang-menu a{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border-radius:var(--r-sm);
  font:650 13.5px/1.2 var(--font-body); color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease); }
.lang-menu a:active{ transform:scale(.98); }
.lang-menu a.lang-active{ background:rgba(255,196,0,.16); font-weight:800; }
.lang-menu a:focus-visible{ outline-offset:-2px; }
@media (hover:hover){ .lang-menu a:hover{ background:rgba(201,160,0,.10); } .lang-menu a.lang-active:hover{ background:rgba(255,196,0,.22); } }

/* ── Nacht-Bühne (.on-night, gesetzt von der Story in S07) ── */
.nav.on-night .nav-cap::before{ background:var(--glass-night); border-color:rgba(255,196,0,.14); }
.nav.on-night .logo-day{ display:none; }
.nav.on-night .nav-logo .logo-night{ display:block; }
.nav.on-night .nav-links a, .nav.on-night .lang-btn, .nav.on-night .burger{ color:var(--on-night); }
.nav.on-night .nav-links a.nav-fest{ color:var(--gold); }
.nav.on-night .btn-ghost{ color:var(--on-night); border-color:rgba(255,196,0,.35); }
.nav.on-night :focus-visible{ outline-color:var(--gold); }
@media (hover:hover){ .nav.on-night .nav-links a:hover{ background:rgba(255,196,0,.14); } .nav.on-night .nav-links a.nav-fest:hover{ color:var(--on-gold); background:var(--gold); } }
/* Offenes Mobile-Menü liegt auf --ground: Burger zurück auf Tinte */
.nav.on-night .mnav[open]:not(.is-closing) .burger{ color:var(--ink); }

/* Verdichtung in Stufen (gemessen mit den deutschen Texten): volle Breite braucht ≈ 902 px Inhalt (System-Stack, gemessen
   01.10.2026) → ab 1080 px; 641–1079 px: Pills/Links kompakter, Link-Padding 8px 10px (641–999 px zusätzlich Stufe unten). */
@media (min-width:641px) and (max-width:1079px){
  .btn-nav{ font-stretch:var(--normal); padding:9px 14px; }
  .nav-links a{ padding:8px 10px; }
  .nav-links a.nav-fest{ padding-block:6.5px; }
  .lang-btn{ padding:0 10px; }
}
/* 641–999 px: Sprachkürzel nur als Flagge (aria-label „Language“ bleibt, die Sprachnamen stehen im Menü), 13 px. */
@media (min-width:641px) and (max-width:999px){
  .nav-inner{ gap:8px; }
  .nav-actions{ gap:6px; }
  .nav-links a{ padding:8px 8px; font-size:13px; }
  .btn-nav{ padding:9px 12px; font-size:13px; }
  .lang-code{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .nav-logo img{ height:30px; }
}
/* 641–899 px: Eine Zeile ist mit allen Live-Einträgen physisch nicht möglich. Die Links-Kapsel wird zum waagerechten
   Wisch-Streifen (Maske blendet rechts aus) – kein Seiten-Scroll, kein Umbruch, alle Links per Wischen/Tab erreichbar. */
@media (min-width:641px) and (max-width:899px){
  .nav-links{ flex:1 1 auto; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding:2px 4px; border-radius:var(--r-pill);
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    transition:background-color var(--t-ui) var(--ease-out); }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links::before{ display:none; }                            /* ::before würde im Scroll-Container mitlaufen */
  .nav.scrolled .nav-links, html:not(.js) .nav-links{ background:var(--glass); }
  .nav.on-night .nav-links{ background:var(--glass-night); }
  .nav-links a:focus-visible{ outline-offset:-3px; }             /* Ring nicht vom Streifen abschneiden lassen */
}
@media (max-width:640px){
  .nav-logo img{ height:30px; }
  .nav-inner{ gap:8px; }
  .nav-actions{ gap:6px; }
}


/* ═══ S02 · Mobile-Menü ═══ */
.mnav{ display:block; }
@media (min-width:641px){ .mnav{ display:none; } }
.burger{ position:relative; z-index:calc(var(--z-sheet) + 1); display:grid; place-items:center; width:44px; height:44px;
  border-radius:var(--r-pill); list-style:none; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease); }
.burger::-webkit-details-marker{ display:none; }
.burger::marker{ content:""; }
.burger span{ grid-area:1/1; display:block; width:20px; height:2px; border-radius:2px; background:currentColor;
  transition:transform var(--t-ui) var(--ease-out); }
.burger span:first-child{ transform:translateY(-4px); }
.burger span:last-child{ transform:translateY(4px); }
.mnav[open]:not(.is-closing) .burger span:first-child{ transform:rotate(45deg); }
.mnav[open]:not(.is-closing) .burger span:last-child{ transform:rotate(-45deg); }
.burger:active{ transform:scale(.94); }
@media (hover:hover){ .burger:hover{ background:rgba(201,160,0,.12); } }

/* Sheet: Vollfläche über allem außer Burger (Logo wird per .menu-open angehoben) */
.mnav-sheet{ position:fixed; inset:0; z-index:var(--z-sheet); display:flex; flex-direction:column; gap:24px;
  padding:calc(var(--nav-h) + 24px + env(safe-area-inset-top)) var(--pad-x) calc(24px + env(safe-area-inset-bottom));
  background:var(--ground); color:var(--ink); overflow-y:auto; overscroll-behavior:contain; }
.nav.menu-open .nav-logo{ z-index:1; }
/* No-JS: keine Scroll-Sperre möglich → Sheet unter der Nav, eigene Höhe, scrollt in sich (.nav ist fixed → wirkt wie absolute). */
html:not(.js) .mnav-sheet{ inset:calc(var(--nav-h) + env(safe-area-inset-top)) 0 auto; max-height:calc(100svh - var(--nav-h));
  padding-top:16px; border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); }

.mnav-list li{ border-bottom:1px solid var(--border-soft); }
.mnav-list li.mnav-fest-row{ border-bottom:0; padding-top:12px; }
.mnav-list a{ display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 8px; border-radius:var(--r-sm);
  font:600 min(26px, 6.4vw)/1.15 var(--font-display); font-stretch:var(--wide); letter-spacing:-.02em; color:var(--ink);
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-hover) var(--ease-out), color var(--t-hover), transform var(--t-press) var(--ease); }
.mnav-list a:active{ transform:scale(.98); }
.mnav-list a:focus-visible{ outline-offset:-2px; }
.mnav-list a.mnav-fest{ display:inline-flex; padding:0 22px; border-radius:var(--r-pill); background:var(--gold); color:var(--on-gold);
  font-size:min(22px, 5.6vw); box-shadow:var(--shadow-gold); }
.mnav-list a.mnav-fest:focus-visible{ outline-color:var(--ink); outline-offset:3px; }
@media (hover:hover){
  .mnav-list a:hover{ background:rgba(201,160,0,.10); }
  .mnav-list a.mnav-fest:hover{ background:var(--gold-deep); }
}

.mnav-lang{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }     /* 5 Sprachen in einer Reihe ab 375 px */
.mnav-lang a{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 6px; border-radius:var(--r-pill);
  border:1.5px solid var(--border-strong); font:700 14px/1 var(--font-body); color:var(--ink); text-decoration:none;
  transition:background-color var(--t-hover), border-color var(--t-hover), transform var(--t-press) var(--ease); }
.mnav-lang a:active{ transform:scale(.97); }
.mnav-lang a.is-active{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.mnav-lang a.is-active:focus-visible{ outline-color:var(--ink); }
@media (hover:hover){ .mnav-lang a:not(.is-active):hover{ border-color:var(--gold-text); background:rgba(201,160,0,.06); } }

.mnav-account{ display:grid; gap:10px; margin-top:auto; }


/* ═══ S13 · Footer ═══ TARA: T-5.6 */
.site-footer{ position:relative; overflow:hidden; isolation:isolate; padding-top:8vh; background:var(--ground); color:var(--body); }
.f-top{ display:grid; grid-template-columns:1fr; gap:26px; }
@media (min-width:641px){ .f-top{ grid-template-columns:1fr 1fr; gap:36px 40px; } }
@media (min-width:980px){ .f-top{ grid-template-columns:2fr 1fr 1fr 1.2fr; gap:40px; } }
.f-brand{ font:800 20px/1.1 var(--font-display); font-stretch:var(--wide); letter-spacing:-.02em; color:var(--ink); }
.f-brand span{ color:var(--gold-text); }
.f-desc{ margin-top:12px; max-width:34ch; font-size:var(--fs-small); line-height:1.6; color:var(--body); }
.f-col h4{ margin:0 0 10px; font:800 11px/1.2 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.f-list a{ display:inline-block; padding-block:4px; font-size:14px; line-height:1.5; color:var(--body); text-decoration:none;
  text-decoration-thickness:1.5px; text-underline-offset:4px; transition:color var(--t-hover) var(--ease-out); }
.f-list a:active{ opacity:.75; }
@media (hover:hover){ .f-list a:hover{ color:var(--ink); text-decoration:underline; } }
.f-list a.f-b2b{ color:var(--gold-text); }
/* § 312k/§ 356a: gut sichtbar, Blockelemente untereinander, nie auf Farbe */
.f-list li.f-legal{ margin-top:6px; }
.f-list a.f-legal-strong{ display:block; width:fit-content; font-weight:700; font-size:15px; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:4px; }
@media (hover:hover){ .f-list a.f-legal-strong:hover{ text-decoration-color:var(--gold-text); text-decoration-thickness:3px; } }
/* A11Y-09/BR-4: 44 px Tippfläche (Bauplan §9.5) auf Touch und bis 1024 px – per Mindesthöhe statt Padding
   (14 px × 1,5 + 2 × 10 px ergab nur 41 px). Die frühere padding-block-Regel ≤ 640 px entfällt. */
@media (pointer:coarse), (max-width:1024px){
  .f-list a{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; }
  .f-list a.f-legal-strong{ display:flex; width:fit-content; }
}
.f-bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:40px; padding-top:18px;
  border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); }

/* Riesen-Wortmarke über dem Verlaufsband (zwei volle Zyklen, Stopps alle 12,5 %) */
.f-mark{ position:relative; margin-top:48px; }
.foot-flow{ position:absolute; left:0; bottom:0; z-index:-1; width:200%; height:100%; pointer-events:none;
  background:linear-gradient(90deg, var(--tile-honey) 0%, var(--ground) 12.5%, var(--tile-apricot) 25%, var(--ground) 37.5%,
    var(--tile-honey) 50%, var(--ground) 62.5%, var(--tile-apricot) 75%, var(--ground) 87.5%, var(--tile-honey) 100%);
  -webkit-mask-image:linear-gradient(transparent 0%, #000 55%); mask-image:linear-gradient(transparent 0%, #000 55%);
  transform:translateX(-25%); }                                   /* Ruhestellung (Reduced Motion / No-JS) */
.f-mark picture{ display:block; }
/* 75 % der früheren Breite (Nico, 02.10.2026), zentriert; Anschnitt unten im selben Verhältnis (−3,4 % × 0,75) */
.f-wordmark{ display:block; width:calc((100% - 2 * var(--pad-x)) * .75); max-width:none; height:auto; margin:0 auto -2.55%; }
@media (max-width:640px){
  .site-footer{ padding-bottom:calc(80px + env(safe-area-inset-bottom)); }   /* Finder-Bar verdeckt nie die Rechtslinks */
  .f-wordmark{ width:75%; margin:0 auto -6px; }
}


/* ═══ S14 · Finder-Bar ═══ (Positionen und Logik wie live) */
.finder-bar{ position:fixed; left:0; right:0; z-index:var(--z-finder); display:flex; justify-content:center;
  bottom:calc(12px + env(safe-area-inset-bottom)); padding-inline:var(--pad-x); pointer-events:none; }
.finder-bar .pill-form{ position:relative; pointer-events:auto; background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); box-shadow:var(--shadow-lg); }
.finder-bar .pill-form:focus-within{ box-shadow:var(--halo), var(--shadow-lg); }
.finder-bar .pill-form > *{ position:relative; z-index:1; }
.finder-bar .pill-form button{ min-height:44px; }
/* Reveal: versteckt unten (mobil) bzw. oben (≥ 768 px); JS setzt zusätzlich inert */
.finder-bar.finder-reveal{ transform:translateY(120%); opacity:0; visibility:hidden;
  transition:transform .45s var(--ease-out-3), opacity .35s var(--ease-out), visibility .45s; }
.finder-bar.finder-reveal.is-visible{ transform:none; opacity:1; visibility:visible; }
@media (min-width:768px){
  .finder-bar{ top:var(--nav-h); bottom:auto; padding:7px var(--pad-x); }
  .finder-bar.finder-reveal{ transform:translateY(-120%); }
  .finder-bar.finder-reveal.is-visible{ transform:none; }
}
/* No-JS und Reduced Motion: sofort sichtbar (Platzhaltertext vollständig vorhanden) */
html:not(.js) .finder-bar.finder-reveal{ transform:none; opacity:1; visibility:visible; }
@media (prefers-reduced-motion: reduce){
  .finder-bar.finder-reveal{ transform:none !important; opacity:1 !important; visibility:visible !important; transition:none !important; }
}
/* Dark: schwarz · Gold-Rand · Gold-Glimmer (2 Durchläufe beim Erscheinen, .is-glimmer setzt finderBar) */
.finder-bar .pill-form::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(110deg, transparent 28%, rgba(255,214,92,.16) 46%, rgba(255,196,0,.10) 50%, rgba(255,214,92,.16) 54%, transparent 72%);
  background-size:220% 100%; background-position:200% 0; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .finder-bar .pill-form{ background:var(--night); border-color:var(--gold); }
  :root:not([data-theme="light"]) .finder-bar .pill-form::before{ opacity:1; }
  :root:not([data-theme="light"]) .finder-bar.is-glimmer .pill-form::before{ animation:finderGlimmer 5.5s ease-in-out 2; }
  :root:not([data-theme="light"]) .finder-bar .pill-form button{ box-shadow:0 0 16px rgba(255,196,0,.45); }
}
:root[data-theme="dark"] .finder-bar .pill-form{ background:var(--night); border-color:var(--gold); }
:root[data-theme="dark"] .finder-bar .pill-form::before{ opacity:1; }
:root[data-theme="dark"] .finder-bar.is-glimmer .pill-form::before{ animation:finderGlimmer 5.5s ease-in-out 2; }
:root[data-theme="dark"] .finder-bar .pill-form button{ box-shadow:0 0 16px rgba(255,196,0,.45); }
/* D-01/A11Y-06: über der Nacht-Bühne von Kapitel B (finderBar() setzt .on-night) – Nacht-Glas wie die Nav, Platzhalter
   --on-night-muted (10,7:1). Spezifität (0,3,x) schlägt .pill-form, unterliegt den Dark-Regeln (0,4,0) → Dark bleibt Nacht-Look. */
.finder-bar.on-night .pill-form{ background:var(--glass-night); border-color:var(--gold); }
.finder-bar.on-night .pill-form input{ color:var(--on-night); }
.finder-bar.on-night .pill-form input::placeholder{ color:var(--on-night-muted); }
.finder-bar.on-night .pill-form__icon{ color:var(--gold); }
.finder-bar.on-night .pill-form input:-webkit-autofill{ -webkit-box-shadow:0 0 0 40px var(--night) inset; -webkit-text-fill-color:var(--on-night); }
.finder-bar.on-night .pill-form button:focus-visible{ outline-color:var(--on-night); }
/* BR-5: langer Platzhalter mobil sauber kürzen statt hart abschneiden (Schrift bleibt ≥ 16 px, iOS-Zoom) */
.finder-bar .pill-form input{ text-overflow:ellipsis; }
@media (max-width:420px){
  .finder-bar .pill-form{ padding-left:12px; }
  .finder-bar .pill-form button{ padding:0 16px; }
}


/* ═══ S15 · Cookie-Banner ═══ Live-Komponente <x-cookie-banner /> mit eigenem Stil (hier nichts). */


/* ═══ chrome · Dark Mode per Bildtausch auch beim QA-Umschalter data-theme ═══
   <picture><source media="(prefers-color-scheme: dark)"> reagiert nur auf das OS-Schema. Für data-theme wird das Bild per
   content:url() getauscht (nie eingefärbt). */
:root[data-theme="dark"] .logo-day{ content:url("/images/brand/bee-id-logo-white.png"); }
:root[data-theme="dark"] .loader img, :root[data-theme="dark"] .f-wordmark{ content:url("/images/brand/bee-id-wordmark-white-2000.webp"); }
@media (prefers-color-scheme: dark){
  :root[data-theme="light"] .logo-day{ content:url("/images/brand/bee-id-logo.png"); }
  :root[data-theme="light"] .loader img, :root[data-theme="light"] .f-wordmark{ content:url("/images/brand/bee-id-wordmark-2000.webp"); }
}


/* ═══ chrome · Reduced Motion ═══ (global ohnehin .01 ms; hier die bewusst stehenden Zustände) */
@media (prefers-reduced-motion: reduce){
  .lang[open] .lang-menu{ animation:none; }
  .loader{ display:none !important; }
  .foot-flow{ transform:translateX(-25%) !important; }
}

/* ═══ Team hero · S03 Hero (Phone-Demo, Suche, Video, Wabenmesh) ═══
   Nur Tokens und Fundament-Klassen; keine eigenen Hex-Werte (Ausnahmen: Gold-Transparenzen rgba(255,196,0,…),
   ein theme-unabhängiger Lichtreflex rgba(255,255,255,.3) im Glanz auf „Gefunden.“). Abdunklungen per color-mix mit --device.
   Statisch (ohne html.story: kein JS, Reduced Motion, Forced Colors, GSAP fehlt) ist alles sichtbar.
   Transform-Aufteilung, damit sich CSS und GSAP nie überschreiben:
     .device-wrap  → GSAP y (Einstieg) + yPercent (Abflug) + x (Zeiger) · force3D:false
     .device-float → GSAP Schweben x/y/rotation · force3D:false
     .phone        → CSS rotate(-4deg) (2D, fest)
     .orbit        → GSAP scale/autoAlpha (Einstieg), yPercent/rotation (Abflug), x (Zeiger); Ringe drehen per CSS
   iOS-REGEL: Auf .screen, #scanPane, #phone, .device-float, .device-wrap, .hero-stage, .hero-inner, #hero und #auftakt
   steht nie transform-style:preserve-3d, perspective, rotateX/Y, translateZ, matrix3d, filter oder will-change:transform. */


/* ═══ S03 · Hero ═══ */
.auftakt{ position:relative; }                       /* Pin-Wrapper des Hero (heroDesk, pinSpacing:false) */

.hero{ position:relative; isolation:isolate;
  padding:calc(var(--nav-h) + clamp(24px, 5vh, 56px)) 0 clamp(40px, 7vw, 90px); }
/* Gold-Schein oben rechts (hinter dem Mesh), ohne filter */
.hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(40% 40% at 85% 10%, rgba(255,196,0,.30), transparent); }
.hero-mesh{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }   /* Deckkraft führen heroEntry/Pin (autoAlpha) */
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(28px, 5vw, 72px); }

/* ── Copy (nie animiert außer dem Scroll-Abflug in der Desktop-Story) ── */
.hero-copy{ container-type:inline-size; width:100%; max-width:600px; margin-inline:auto; text-align:center; }
.hero-copy .eyebrow{ margin-bottom:20px; }
.hero-h1{ margin:0; color:var(--ink); text-wrap:balance;
  font:900 var(--fs-hero)/.98 var(--font-display); font-stretch:var(--wide); letter-spacing:-.035em;
  font-size:min(var(--fs-hero), 14.5cqi); }          /* Riesen-Headline: nie breiter als die Copy-Spalte (Fallback: Token) */
/* TYPO-05 (Runde 2): Deutsch bleibt live-gleich bei −.035em; en/hu/es berühren sich dort („Lost?“, „Elveszett?“: t?, tt).
   −.025em wäre knapp frei, −.02em lässt Reserve für SF Pro/Roboto. */
.hero-h1:is(:lang(en), :lang(hu), :lang(es)){ letter-spacing:-.02em; }
.hero-h1 .l{ display:block; }
.hero-h1 .l + .l{ margin-top:.06em; }
/* „Gefunden.“ – die eine Gold-Fläche dieses Viewports, Glanz 3 Durchläufe (glimmerOnce startet ihn beim Wiedereintritt neu) */
.hl{ position:relative; display:inline-block; padding:0 .18em; border-radius:.14em; overflow:hidden;
  background:var(--gold); color:var(--on-gold); }
.hl::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);   /* Lichtreflex, theme-unabhängig */
  transform:translateX(-120%) skewX(-18deg); animation:shimmer .9s var(--ease-in-out) 1.2s 3 both; }
.hero-sub{ max-width:42ch; margin:18px auto 26px; font-size:var(--fs-lead); line-height:1.55; color:var(--body); text-wrap:pretty; }
.hero-copy .pill-form{ margin-inline:auto; }
.hero-hint{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px;
  font-size:var(--fs-small); line-height:1.4; color:var(--muted); }
/* Besitzer-Einstieg unter der Finder-Suche: feine Trennlinie, Frage + Ghost-Pill (springt zu #preise) */
.hero-owner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; max-width:520px;
  margin:22px auto 0; padding-top:18px; border-top:1px solid var(--border-soft); font-size:var(--fs-small); line-height:1.4; color:var(--body); }
.hero-owner .btn{ min-height:44px; padding:10px 20px; }
/* Preiszeile: eigene Zeile unter Frage + Pill, leiser als die Frage (wie .hero-hint), richtet sich nach .hero-copy aus */
.hero-price{ flex-basis:100%; color:var(--muted); font-size:var(--fs-small); line-height:1.45; }
.hero-price > span{ display:block; text-wrap:balance; }
.hero-price > span + span{ color:var(--body); font-weight:600; }   /* der Preis trägt etwas mehr Gewicht als die Beschreibung */

/* ── Bühne: Orbit, Schlüssel-Karte, Telefon (Geschwister, nie verschachtelt) ── */
.hero-stage{ --phone-w:min(240px, 62vw);
  position:relative; display:grid; place-items:center; padding-block:32px; }
.hero-stage > .orbit, .hero-stage > .device-wrap{ grid-area:1 / 1; }

.device-wrap{ position:relative; z-index:2; }
.device-float{ display:block; }
.phone{ position:relative; width:var(--phone-w); aspect-ratio:9 / 18.6; padding:11px;
  border-radius:var(--r-device); background:var(--device);
  box-shadow:inset 0 0 0 2px rgba(255,196,0,.5), var(--shadow-lg);
  transform:rotate(-4deg); -webkit-tap-highlight-color:transparent; }
/* Notch ohne transform (Kante per inset statt translateX(-50%)) */
.phone::before{ content:""; position:absolute; z-index:6; top:11px; left:33%; right:33%; height:20px;
  background:var(--device); border-radius:0 0 13px 13px; }
/* iOS-REGEL: kein transform, kein filter, kein translateZ(0) – nur Clip + isolation */
.screen{ position:relative; height:100%; overflow:hidden; isolation:isolate;
  border-radius:var(--r-screen); background:var(--surface); }
.promo-video{ width:100%; height:100%; object-fit:cover; -webkit-backface-visibility:hidden; backface-visibility:hidden; }

/* Bildschirmphasen (phoneSequence setzt .on): Scan nur opacity, „erkannt“ als Sheet von unten, Chat von rechts */
.pane{ position:absolute; inset:0; }
.scan-pane{ z-index:1; background:var(--device); opacity:0; visibility:hidden;
  transition:opacity .55s var(--ease), visibility 0s linear .55s; }
.scan-pane.on{ opacity:1; visibility:visible; transition:opacity .55s var(--ease), visibility 0s; }
.scan-done{ z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;
  padding:22px; text-align:center; background:linear-gradient(170deg, var(--surface), var(--surface-2));
  transform:translateY(100%); visibility:hidden;
  transition:transform var(--t-screen) var(--ease-out), visibility 0s linear var(--t-screen); }
.chat-pane{ z-index:5; display:flex; flex-direction:column; background:var(--surface-2);
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--t-screen) var(--ease-out), visibility 0s linear var(--t-screen); }
.scan-done.on, .chat-pane.on{ transform:none; visibility:visible;
  transition:transform var(--t-screen) var(--ease-out), visibility 0s; }
/* Abdunkeln der verdeckten Phase: über Scan .2, über „erkannt“ .1 (Ebene zwischen alter und neuer Phase) */
.screen-veil{ position:absolute; inset:0; z-index:2; background:var(--device); opacity:0; pointer-events:none;
  transition:opacity var(--t-screen) var(--ease-out); }
.screen-veil[data-cover="done"]{ z-index:4; }
.screen-veil.is-covering{ opacity:.2; }
.screen-veil.is-covering[data-cover="done"]{ opacity:.1; }

/* Scan-Oberfläche über dem Video */
.scan-ui{ --scan-h:calc((var(--phone-w) * 2.0667 - 22px) * .68);   /* 68 % der Bildschirmhöhe (live: top 10 % → 78 %) */
  position:absolute; inset:0; pointer-events:none; }
.scan-ui .line{ position:absolute; left:14%; right:14%; top:10%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow:0 0 12px rgba(255,196,0,.85);
  animation:scanY 1.2s var(--ease-in-out) infinite alternate; }
.scan-ui .lbl{ position:absolute; left:0; right:0; bottom:16px; display:flex; align-items:center; justify-content:center; gap:7px;
  padding-inline:10px; font:700 11px/1.3 var(--font-body); letter-spacing:.02em; text-align:center; color:var(--on-night);
  text-shadow:0 1px 6px color-mix(in srgb, var(--device) 75%, transparent); }
.scan-ui .lbl .d{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 1.4s infinite; }

/* „Code erkannt“ */
.scan-done .check{ display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:var(--ok-solid); color:var(--on-ok); font-size:33px; line-height:1;
  box-shadow:0 12px 28px color-mix(in srgb, var(--ok-solid) 42%, transparent); }
.scan-done.on .check{ animation:pop .55s var(--ease); }
.scan-done .t{ font:800 15px/1.25 var(--font-display); color:var(--ink); }
.scan-done .s{ font-size:12px; line-height:1.4; color:var(--muted); }

/* Anonymer Chat (wie live, Farben über Tokens) */
.screen-top{ padding:34px 16px 12px; text-align:center; background:var(--surface); border-bottom:1px solid var(--border-soft); }
.st-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill);
  font:800 10.5px/1.2 var(--font-body); letter-spacing:.04em; color:var(--gold-text); background:rgba(255,196,0,.14); }
.st-title{ margin-top:8px; font:800 13.5px/1.25 var(--font-display); color:var(--ink); }
.st-sub{ font-size:11px; line-height:1.4; color:var(--muted); }
.chat{ flex:1; display:flex; flex-direction:column; gap:9px; padding:14px 13px; overflow:hidden; background:var(--surface-2); }
.msg{ max-width:82%; padding:9px 12px; border-radius:15px; font-size:12px; line-height:1.4;
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.msg.them{ align-self:flex-start; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-bottom-left-radius:5px; }
.msg.me{ align-self:flex-end; background:var(--gold); color:var(--on-gold); font-weight:600; border-bottom-right-radius:5px; }
.msg.me .who{ opacity:.8; }   /* D-03: 5,2:1 statt 3,2:1 auf Gold */
.msg .who{ display:block; margin-bottom:2px; font-size:9px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; opacity:.6; }
.chat-status{ align-self:center; display:inline-flex; align-items:center; gap:6px; margin-top:4px; padding:5px 12px;
  border-radius:var(--r-pill); font-size:11px; font-weight:800; color:var(--ok-text); background:var(--ok-bg);
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.msg.show, .chat-status.show{ opacity:1; transform:none; }

/* Orbit: zwei Ringe (118 % bzw. 108 % der Telefonhöhe), zentriert per inset/margin statt translate (GSAP-fest) */
.orbit{ position:absolute; z-index:0; inset:0; margin:auto; pointer-events:none;
  width:calc(var(--phone-w) * 1.32); height:calc(var(--phone-w) * 2.0667 * 1.18); }
.orbit span{ position:absolute; inset:0; border:1.5px dashed rgba(255,196,0,.35); border-radius:50%;
  animation:spin 26s linear infinite; }
.orbit span:nth-child(2){ inset:4.2% 7.6%; border-style:dotted; animation-duration:18s; animation-direction:reverse; }
/* Endlosbewegung nur, solange der Hero sichtbar ist (is-off: IntersectionObserver in mesh(), is-away: Desktop-Pin) */
.hero.is-off .orbit span, .hero.is-away .orbit span,
.hero.is-off .scan-ui .line, .hero.is-off .scan-ui .d,
.hero.is-away .scan-ui .line, .hero.is-away .scan-ui .d{ animation-play-state:paused; }   /* ANI-10b: auch nach dem Abflug */

/* ── ≥ 900 px: zweispaltig, Copy linksbündig ── */
@media (min-width:900px){
  .hero-inner{ grid-template-columns:1.05fr .95fr; align-items:center; min-height:min(calc(100vh - var(--nav-h)), 860px); }
  .hero-copy{ max-width:none; margin-inline:0; text-align:left; }
  .hero-sub{ margin-inline:0; }
  .hero-copy .pill-form{ margin-inline:0; }
  .hero-hint{ justify-content:flex-start; }
  .hero-owner{ justify-content:flex-start; margin-inline:0; }
  .hero-stage{ --phone-w:min(280px, 24vw, calc((100vh - 200px) / 2.07));
    min-height:clamp(420px, 62vh, 640px); padding-block:0; }
}
@supports (height:100svh){
  @media (min-width:900px){
    .hero-inner{ min-height:min(calc(100svh - var(--nav-h)), 860px); }
    .hero-stage{ --phone-w:min(280px, 24vw, calc((100svh - 200px) / 2.07)); min-height:clamp(420px, 62svh, 640px); }
  }
}

/* ── Desktop-Story: #auftakt gepinnt (100svh), Hero füllt ihn; Startzustand der Objekte steht im Fundament (§5.6) ── */
@media (min-width:900px) and (min-height:620px){
  html.story .auftakt{ height:100vh; height:100svh; }
  html.story .hero{ height:100%; padding-block:var(--nav-h) 0; }
  html.story .hero-inner{ height:100%; min-height:0; }
  html.story .hero-stage{ height:100%; min-height:0; }
  /* Tipp-Schutz: fokussiertes Suchfeld bleibt sichtbar, auch wenn der Pin die Copy ausblendet (heroDesk setzt html.kb) */
  html.kb .hero-copy{ opacity:1 !important; visibility:visible !important; transform:none !important; }
}


/* ═══ S04 · Vorteile + 3D-Anhänger (Bühne, Runde 2) ═══
   Eigene Sektion nach dem Hero. Links die Vorteile als große Zeilen mit Waben-Marke, rechts die Bühne (3:4, feste Maße):
   Honig-Schein, gestrichelter Ring (dreht sich mit --anh-p), Fallback-Foto, Kontaktschatten (Breite folgt --anh-face aus
   anhaenger3d.js: frontal breit, seitlich schmal) und das transparente WebGL-Canvas.
   Statisch/mobil: gestapelt (Anhänger oben). ≥ 900 px: zweispaltig. Desktop-Story: 100svh, gepinnt, Blatt über dem Hero.
   Licht je Theme über --anh-exposure/--anh-key/--anh-rim (liest anhaenger3d.js), Schein/Schatten über --anh-glow/--anh-shadow. */
.anh{ position:relative; z-index:2; isolation:isolate; padding-block:var(--sec-y); background:var(--ground); }
.anh-inner{ display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); align-items:center; }

/* ── Vorteile ── */
.trust{ position:relative; grid-row:2; container-type:inline-size; }
.anh-rail{ display:none; }
.trust-list{ display:grid; gap:clamp(14px, 2.4vw, 26px); justify-content:center; }
.trust-list li{ display:flex; align-items:center; gap:.42em;
  font:850 var(--fs-benefit)/1.12 var(--font-display); font-stretch:var(--normal); letter-spacing:0; color:var(--ink); }
/* TYPO-04 (Runde 2): −.02em nur Deutsch – in Englisch verschmilzt „ry“ (battery) selbst bei −.01em, hu „vt“ bei −.02em. */
.trust-list li:lang(de){ letter-spacing:-.02em; }
/* Waben-Marke: eigenes Linien-Icon (SVG, currentColor) in spitz stehender Wabe, Kacheln Honig · Gold · Apricot
   (Gold = die eine dominante Fläche). --ic-ink = Linienfarbe, --ic-bg = Wabenfarbe (auch Halo des Durchstrichs). */
.trust-list .ic{ --ic-bg:var(--tile-honey); --ic-ink:var(--on-gold);
  flex:none; display:grid; place-items:center; width:2.3em; aspect-ratio:.866/1; clip-path:var(--hex);
  font-size:.6em; line-height:1; background:var(--ic-bg); color:var(--ic-ink); }
.trust-list li:nth-child(2) .ic{ --ic-bg:var(--gold); }
.trust-list li:nth-child(3) .ic{ --ic-bg:var(--tile-apricot); }
.trust-list .ic-svg{ display:block; width:57%; height:auto; overflow:visible; stroke-width:2.1; }   /* Gewicht passend zur 850er-Zeile */
.trust-list .ic-fill{ fill:currentColor; stroke:none; opacity:.14; }          /* Duoton: zarte Fläche unter der Kontur */
.trust-list .ic-halo{ stroke:var(--ic-bg); stroke-width:5.2; }                 /* trennt den Durchstrich sauber von der Batterie */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .trust-list .ic{ --ic-ink:var(--gold); }
  :root:not([data-theme="light"]) .trust-list li:nth-child(2) .ic{ --ic-ink:var(--on-gold); }
}
:root[data-theme="dark"] .trust-list .ic{ --ic-ink:var(--gold); }
:root[data-theme="dark"] .trust-list li:nth-child(2) .ic{ --ic-ink:var(--on-gold); }
/* Endzustand des Hot-Moments (feine Honig-Linie) – statisch identisch; die Desktop-Story tweent background-size */
.trust-txt{ background:linear-gradient(var(--hot), var(--hot)) no-repeat 0 100% / 100% .12em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ── Bühne ── */
.anh-stage{ position:relative; grid-row:1; justify-self:center; width:min(78vw, 360px); aspect-ratio:3 / 4; }
.anh-glow{ position:absolute; z-index:0; inset:-6% -14%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, var(--anh-glow), transparent); }
.anh-ring{ position:absolute; z-index:0; left:50%; top:50%; width:104%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  border:1.5px dashed rgba(255,196,0,.38); translate:-50% -50%; rotate:calc(var(--anh-p, 0) * 140deg); }
.anh-ring::before{ content:""; position:absolute; inset:7%; border-radius:50%; border:1.5px dotted rgba(255,196,0,.32);
  rotate:calc(var(--anh-p, 0) * -220deg); }
.anh-fallback{ position:absolute; z-index:1; inset:5% 9%; width:82%; height:90%; object-fit:cover; object-position:50% 45%;
  border-radius:var(--r-xl); background:var(--surface-2); box-shadow:var(--shadow-lg);
  transition:opacity var(--t-reveal) var(--ease-out), visibility 0s linear var(--t-reveal); }
.anh-shadow{ position:absolute; z-index:1; left:50%; bottom:-1%; width:52%; height:7%; pointer-events:none; opacity:0;
  translate:-50% 0; scale:calc(.42 + .58 * var(--anh-face, 1)) 1;
  background:radial-gradient(closest-side, var(--anh-shadow), transparent); transition:opacity var(--t-reveal) var(--ease-out); }
.anh-canvas{ position:absolute; z-index:2; inset:0; width:100%; height:100%; opacity:0; transition:opacity var(--t-reveal) var(--ease-out); }
/* Modell gerendert: Canvas ein, Foto aus (anhaenger3d.js setzt .is-ready nach dem ersten Bild) */
.anh-stage.is-ready .anh-canvas, .anh-stage.is-ready .anh-shadow{ opacity:1; }
.anh-stage.is-ready .anh-fallback{ opacity:0; visibility:hidden; }

/* ── Hinweis „scan me“ (anhHint in home.js) ──
   Handschrift (System-Handschriften, kein Web-Font – wie --font-sans) mit Gold-Strich darunter und gezeichnetem Schleifen-Pfeil,
   links oben neben dem Anhänger; die Pfeilspitze zeigt auf den QR-Code (Vorderseite, Lage gemessen: QR ≈ 37–68 % Breite,
   54–77 % Höhe der Bühne). Text und Pfeil liegen in Prozent der Bühne (fest 3:4) → die Spitze trifft auf jeder Breite.
   Mit JS erst unsichtbar; .is-hinted (Bühne zu 60 % im Bild): Text springt auf, Strich und Pfeil zeichnen sich, danach nickt
   der Pfeil in Richtung Anhänger (nur solange .is-hint-live). .hint-done (Maus-Zeiger wurde zum Handy bzw. Tipp) blendet
   ihn aus – ein Finger, der auf der Bühne zu scrollen beginnt, zählt nicht.
   Reduced Motion: nur Ein-/Ausblenden. Ohne JS: statisch sichtbar. Liegt unter .anh-snap und fängt keine Zeiger ab. */
.anh-hint{ position:absolute; z-index:3; inset:0; pointer-events:none; color:var(--ink);
  transition:opacity .3s var(--ease-out); }
.anh-hint-txt{ position:absolute; left:-5.5%; top:23%; display:inline-block; padding-bottom:.18em; white-space:nowrap; rotate:-8deg;
  transform-origin:40% 90%; font:700 clamp(17px, calc(8px + 1.7vw), 30px)/1 "Segoe Print", "Bradley Hand", "Noteworthy",
  "Chalkboard SE", "Comic Neue", cursive; letter-spacing:0; }
.anh-hint svg{ display:block; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* Strich-Animation über die echte Pfadlänge (--len im Markup, Nutzereinheiten) statt pathLength="1": Safari skaliert
   stroke-dasharray mit pathLength nicht überall – der Pfeil erschien dort gestrichelt bzw. nur stückweise. */
.anh-hint path{ stroke-dasharray:var(--len, 400); stroke-dashoffset:0; }
.anh-hint-scribble{ position:absolute; left:-4%; bottom:-.12em; width:108%; height:auto; stroke:var(--gold); stroke-width:3.2; }
/* Box: links −2 %, oben 28 %, 44 % breit (viewBox 150 × 170) → Spitze (131|159) bei ≈ 36,5 % / 63 % der Bühne, knapp links
   vor dem QR-Code auf dem hellen Holz (über dem dunklen Code-Muster ginge sie unter). */
.anh-hint-arrow{ position:absolute; left:-2%; top:28%; width:44%; height:auto; stroke:currentColor; stroke-width:2.8; }
html.js-init .anh-hint{ opacity:0; }
html.js-init .anh-stage.is-hinted .anh-hint{ opacity:1; }
html.js-init .anh-stage.hint-done .anh-hint{ opacity:0; transition-duration:.45s; }
@media (prefers-reduced-motion: no-preference){
  html.js-init .anh-stage.is-hinted .anh-hint-txt{ animation:anhHintPop .62s cubic-bezier(.34,1.56,.64,1) both; }
  html.js-init .anh-stage.is-hinted .anh-hint-scribble path{ animation:anhHintDraw .34s var(--ease-out) .32s both; }
  html.js-init .anh-stage.is-hinted .anh-hint-arrow path{ animation:anhHintDraw .62s var(--ease-in-out) .4s both; }
  html.js-init .anh-stage.is-hinted .anh-hint-arrow .anh-hint-head{ animation:anhHintDraw .2s var(--ease-out) 1s both; }
  html.js-init .anh-stage.is-hinted .anh-hint-arrow{ animation:anhHintNudge 2.8s var(--ease-in-out) 1.6s infinite; }
  html.js-init .anh-stage:not(.is-hint-live) .anh-hint-arrow{ animation-play-state:paused; }
}
@keyframes anhHintPop{ 0%{ opacity:0; scale:.45; rotate:-22deg; } 100%{ opacity:1; scale:1; rotate:-8deg; } }
@keyframes anhHintDraw{ 0%{ stroke-dashoffset:var(--len, 400); } 100%{ stroke-dashoffset:0; } }
@keyframes anhHintNudge{ 0%, 55%, 100%{ translate:0 0; } 25%{ translate:5px 3px; } 40%{ translate:1px 0; } }
@media (forced-colors: active){
  .anh-hint{ color:CanvasText; }
  .anh-hint-scribble{ stroke:CanvasText; }
}
@media print{ .anh-hint{ display:none; } }

/* ── Handy-Zeiger + „Foto“ (anhSnap in home.js) ──
   .anh-snap liegt als Link über der Bühne (ohne JS: normaler Link zur Demo). Über dem Modell (Raycast) → .is-aim:
   Mauszeiger aus, stattdessen das Mini-Handy am Zeiger bzw. unter dem Finger. Klick/Tipp → .is-shooting: Blitz,
   Momentaufnahme im Handy-Display, dann weiter zur Demo. Position per CSS-translate (JS), Animation per scale. */
.anh-snap{ position:absolute; z-index:4; inset:0; display:block; border-radius:var(--r-lg); outline-offset:6px;
  -webkit-tap-highlight-color:transparent; }
.anh-snap:focus-visible{ outline:3px solid var(--focus, var(--gold-deep)); }
@media (hover:hover) and (pointer:fine){
  html.js-init .anh-snap{ cursor:default; }                      /* mit JS zählt nur der Anhänger selbst (ohne JS: Link-Hand) */
  html.js-init .anh-snap.is-aim, html.js-init .anh-snap.is-shooting{ cursor:none; }
}
.anh-cam{ position:absolute; z-index:6; left:0; top:0; width:30px; height:52px; margin:-26px 0 0 -15px; padding:3px;
  border-radius:8px; background:var(--ink); box-shadow:0 8px 20px rgba(31,24,8,.28), inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none; opacity:0; translate:-999px -999px; transform-origin:50% 50%;
  transition:opacity .16s var(--ease-out), scale .16s var(--ease-out); }
.anh-cam::before{ content:""; position:absolute; z-index:1; top:5px; left:50%; width:9px; height:3px; margin-left:-4.5px;
  border-radius:var(--r-pill); background:var(--ink); }                      /* Dynamic Island */
.anh-cam-screen{ position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:5.5px;
  background:linear-gradient(165deg, #fff3c4, var(--gold) 70%); }
.anh-cam-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; }
.anh-cam-corners{ position:absolute; inset:24% 18%; border:1.5px solid rgba(58,45,0,.55); border-radius:3px;
  clip-path:polygon(0 0,35% 0,35% 1.5px,65% 1.5px,65% 0,100% 0,100% 35%,calc(100% - 1.5px) 35%,calc(100% - 1.5px) 65%,100% 65%,100% 100%,
    65% 100%,65% calc(100% - 1.5px),35% calc(100% - 1.5px),35% 100%,0 100%,0 65%,1.5px 65%,1.5px 35%,0 35%); }   /* Sucher-Ecken */
.anh-snap.is-aim .anh-cam, .anh-snap.is-shooting .anh-cam{ opacity:1; }
.anh-snap.is-aim:active .anh-cam{ scale:.92; }
.anh-snap.is-shooting .anh-cam{ animation:anhShutter .62s var(--ease) forwards; }
.anh-snap.is-shooting .anh-cam-screen img{ opacity:1; transition:opacity .12s .08s; }
.anh-snap.is-shooting .anh-cam-corners{ opacity:0; }
.anh-flash{ position:absolute; z-index:5; inset:-6%; border-radius:var(--r-xl); background:#fff; opacity:0; pointer-events:none; }
.anh-snap.is-shooting .anh-flash{ animation:anhFlash .5s var(--ease-out); }
@keyframes anhShutter{ 0%{ scale:1; } 18%{ scale:.86; } 100%{ scale:2.4; } }
@keyframes anhFlash{ 0%{ opacity:0; } 14%{ opacity:.9; } 100%{ opacity:0; } }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .anh-cam{ box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.22); }
}
:root[data-theme="dark"] .anh-cam{ box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.22); }
@media (prefers-reduced-motion: reduce){
  .anh-cam{ transition:none; }
  .anh-snap.is-shooting .anh-cam, .anh-snap.is-shooting .anh-flash{ animation:none; }
}
@media (forced-colors: active){
  .anh-cam, .anh-flash{ display:none; }
  .anh-snap:focus-visible{ outline-color:Highlight; }
}
@media print{ .anh-snap{ display:none; } }

/* ── ≥ 900 px: zweispaltig, Vorteile links, Anhänger rechts ── */
@media (min-width:900px){
  .anh-inner{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .trust{ grid-row:1; grid-column:1; }
  .trust-list{ justify-content:start; }
  .trust-list li{ font-size:min(var(--fs-anh), 9.5cqi); }       /* „kein Akku nötig“ bleibt einzeilig in der Spalte */
  .anh-stage{ grid-row:1; grid-column:2; width:min(100%, calc(min(76vh, 680px) * .75)); }
}
@supports (height:100svh){
  @media (min-width:900px){ .anh-stage{ width:min(100%, calc(min(76svh, 680px) * .75)); } }
}

/* ── Desktop-Story: Bühne gepinnt (anhDesk), Blatt über dem abfliegenden Hero ── */
@media (min-width:900px) and (min-height:620px){
  /* margin-top = Vorlauf des Hero-Pins (PIN.hero − 100 in vorlage.js): Telefon und Karte sind schon im Abflug, bevor das
     Blatt unten erscheint – sie bleiben immer oberhalb seiner Kante (gemessen 1440/1024/900).
     C-5: 25svh (Fallback 25vh) – mit Hero 100svh ist der Vorlauf so ≤ 1,25 × innerHeight (Hero-Pin-Ende); mit 25vh (= lvh in
     Safari) bliebe bei ausgeklappter Browserleiste ein Streifen, in dem der entpinnte Hero schlagartig verschwindet. */
  html.story .anh{ margin-top:25vh; margin-top:25svh; height:100vh; height:100svh; display:grid; align-items:center;
    padding-block:calc(var(--nav-h) + var(--finder-h)) 0;
    border-radius:var(--r-2xl) var(--r-2xl) 0 0; box-shadow:0 -28px 70px rgba(120,88,0,.10); }
  html.story .anh-rail{ display:block; position:absolute; top:.2em; bottom:.2em; left:-30px; width:2px;
    border-radius:2px; background:var(--border); }
  html.story .anh-rail-fill{ display:block; height:100%; border-radius:inherit; background:var(--gold);
    transform-origin:50% 0; transform:scaleY(var(--anh-p, 0)); }
  /* Zeichen-Entwicklung (anhDesk): GSAP tweent --k 0 → 1, Farbe mischt --ghost → --ink (ANI-09, folgt Theme-Wechsel live).
     Ohne color-mix ist die Deklaration ungültig → Farbe erbt --ink (lesbar). */
  html.story .trust-txt .split .c{ color:color-mix(in srgb, var(--ink) calc(var(--k, 1) * 100%), var(--ghost)); }
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .anh{ box-shadow:0 -28px 70px rgba(0,0,0,.45); }
}
:root[data-theme="dark"] .anh{ box-shadow:0 -28px 70px rgba(0,0,0,.45); }


/* ═══ S03/S04 · Reduced Motion ═══ Endzustände statisch: Chat vollständig, keine Endlosbewegung, kein Glanz */
@media (prefers-reduced-motion: reduce){
  .msg, .chat-status{ opacity:1; transform:none; }
  .hl::after, .orbit span, .scan-ui .line, .scan-ui .lbl .d{ animation:none; }
  .screen-veil{ display:none; }
}

/* ═══ S03/S04 · Forced Colors ═══ Gold-Fläche und Telefonrahmen in Systemfarben */
@media (forced-colors: active){
  .hl{ forced-color-adjust:none; background:Highlight; color:HighlightText; }
  .hl::after, .orbit, .hero-mesh, .screen-veil{ display:none; }
  .phone{ border:2px solid CanvasText; }
  .trust-list .ic{ forced-color-adjust:none; --ic-bg:Canvas; --ic-ink:CanvasText; background:Canvas; color:CanvasText; outline:1px solid CanvasText; }
  .anh-glow, .anh-ring, .anh-shadow{ display:none; }
}


/* ═══ S04b · Trailer ═══ (03.10.2026) Kino-Band auf --night, in beiden Modi dunkel. Kopf ab 900 px zweispaltig
   (Titel links, Unterzeile rechts auf der Grundlinie), darunter der Film: Desktop 16:9 in Inhaltsbreite,
   Handy (≤ 767 px, wie <source media>) 9:16 bis 80 svh hoch. Start-Knopf = Standbild + Gold-Wabe + Glas-Pille, neben bzw.
   unter dem Gesicht: Desktop links mittig, Handy mittig über der unteren Kante (oberhalb der Finder-Bar).
   iOS-REGEL: .trailer und .trailer-frame sind Vorfahren von #trailerVideo – nie transform, filter, perspective,
   will-change. Hover-Bewegung nur im Geschwister-Knopf (.trailer-start). */
.trailer{ position:relative; padding-block:var(--sec-y); color:var(--on-night);
  background:radial-gradient(110% 55% at 50% 0%, rgba(255,196,0,.11), transparent 62%), var(--night); }
.trailer .h2{ max-width:15ch; color:var(--on-night); }
.trailer .eyebrow{ color:var(--gold); }
.trailer-head{ display:grid; row-gap:18px; margin-bottom:clamp(36px, 5vw, 72px); }
.trailer-head .eyebrow{ margin:0; }
.trailer-sub{ margin:0; max-width:36ch; font:500 var(--fs-lead)/1.5 var(--font-body); color:var(--on-night-muted); text-wrap:pretty; }
@media (min-width:900px){
  .trailer-head{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); column-gap:var(--gap); align-items:end; }
  .trailer-head .eyebrow{ grid-column:1 / -1; }
  .trailer-sub{ justify-self:end; padding-bottom:.45em; }
}
.trailer-frame{ position:relative; width:var(--content); margin-inline:auto; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-xl); background:#000;
  box-shadow:0 0 0 1px rgba(255,196,0,.16), 0 44px 100px rgba(0,0,0,.6); }
@media (max-width:767px){
  .trailer-frame{ aspect-ratio:9/16; width:min(var(--content), calc(80svh * 9 / 16)); border-radius:var(--r-lg); }
}
.trailer-video{ display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.trailer-start{ position:absolute; inset:0; z-index:1; display:grid; place-items:center start; width:100%; height:100%; padding:0;
  border:0; border-radius:inherit; background:#000; color:var(--on-night); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.trailer-start[hidden]{ display:none; }
.trailer-start picture, .trailer-start img{ position:absolute; inset:0; width:100%; height:100%; }
.trailer-start img{ object-fit:cover; transition:scale var(--t-dive) var(--ease); }
/* Vignette: zur Knopfseite in die Nacht (trägt Wabe und Pille), Ränder leicht abgedunkelt, Gesicht frei */
.trailer-start::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(18,14,6,.62) 0%, rgba(18,14,6,0) 44%),
    radial-gradient(90% 80% at 50% 40%, rgba(18,14,6,0) 55%, rgba(18,14,6,.4) 100%); }
.trailer-cta{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; margin-inline:clamp(24px, 4.5vw, 64px); }
@media (max-width:767px){
  .trailer-start{ place-items:end center; }
  .trailer-start::after{ background:linear-gradient(to top, rgba(18,14,6,.66) 0%, rgba(18,14,6,0) 40%),
    radial-gradient(90% 80% at 50% 40%, rgba(18,14,6,0) 55%, rgba(18,14,6,.4) 100%); }
  .trailer-cta{ margin:0 0 92px; }   /* frei von der Finder-Bar (80 px), wenn der Rahmen unten am Bildschirmrand steht */
}
.trailer-hx{ flex:none; width:clamp(62px, 5.4vw, 88px);
  transition:scale var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease-out); }
.trailer-hx svg{ width:36%; height:auto; translate:7% 0; }
.trailer-cta-txt{ display:inline-flex; align-items:center; gap:12px; padding:10px 18px; border-radius:var(--r-pill);
  background:var(--glass-night); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,253,248,.14); font:750 var(--fs-btn)/1.2 var(--font-body); letter-spacing:.01em; }
.trailer-time{ padding-left:12px; border-left:1px solid rgba(255,253,248,.28); color:var(--on-night-muted);
  font-weight:650; font-variant-numeric:tabular-nums; }
@media (hover:hover){
  .trailer-start:hover img{ scale:1.035; }
  .trailer-start:hover .trailer-hx{ scale:1.08; background-color:var(--gold-hi); }
}
.trailer-start:active .trailer-hx{ scale:.95; transition-duration:var(--t-press); }
.trailer-start:focus-visible{ outline:3px solid var(--gold); outline-offset:-7px; }
.trailer-video:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; }
@media (forced-colors: active){
  .trailer{ border-block:1px solid CanvasText; }
  .trailer-start::after{ display:none; }
  .trailer-hx{ forced-color-adjust:none; background:ButtonText; color:ButtonFace; }
  .trailer-cta-txt{ border:1px solid ButtonText; background:ButtonFace; color:ButtonText; }
}

/* ═══ S05 + S07 · Kapitel (Reveal-Block, gemeinsame Grundlage) ═══
   TARA: T-5.2. Drei Zustände, sauber getrennt:
   · Basis + statisch  – :is(html:not(.story) .rb, .rb.rb--off): Riesen-Titel + Panel, alles sichtbar (kein JS, Reduced Motion,
                          Forced Colors, GSAP fehlt, Notausstieg .rb--off von chapter()).
   · Story mobil        – html.story .rb:not(.rb--off) außerhalb von Q_DESK: Titel im Fluss, Maske als Vollfläche, kein Pin.
   · Story Desktop      – html.story .rb:not(.rb--off) in Q_DESK: Titel absolut über der Maske, Bühne mit --stage-y/--D/--side.
   Regel: GSAP transformiert nie ein Element mit CSS-translate. Seitenlage über --side (an .rb-stage, getweent) und
   translate an .rb-object/.sammy-card/.key-return; GSAP bewegt nur deren Kinder (.phone--mini/.cluster, img). */

.rb{ position:relative; }
.rb-title{ position:relative; }
.rb-mask{ position:relative; isolation:isolate; }
/* Wabentextur (nur dunkle Bühnen): honeycomb01_dark.png ist ein JPEG, siehe E-13 */
.rb-mask::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("/images/honeycomb01_dark.png") center / cover no-repeat; opacity:0; }
/* Gold-Ebene für den Farbwechsel Gold → Bühnenfarbe während der Entfaltung (tokenbasiert, Dark Mode sicher) */
.rb-tint{ position:absolute; inset:0; z-index:1; background:var(--gold); opacity:0; pointer-events:none; }
.rb-head,.rb-stage,.rb-lanes,.rb-mask > .rb-lane{ position:relative; z-index:2; }
.rb-object,.rb-float{ position:relative; }

/* Lanes (Typografie, alle Zustände) */
.rb-lane{ margin:0; }
.rb-lane h3{ margin:0 0 6px; font:850 var(--fs-benefit)/1.25 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; color:var(--ink); }
.rb-lane p{ font-size:var(--fs-note); line-height:1.5; color:var(--body); }
.rb-lane[data-lane="0"] p{ line-height:1.6; }
.rb-lane[data-lane="0"] p + p{ margin-top:12px; }
.rb-lane strong{ color:var(--ink); font-weight:700; }
.rb-num{ width:30px; margin:0 0 12px; background:var(--gold); color:var(--on-gold); font:800 14px/1 var(--font-display); font-stretch:var(--wide); }


/* ═══ S05 · Kapitel A: Erklärung mit Sammy ═══ */
.rb-a .rb-mask{ background:var(--stage-a); }
.rb-h2{ font:850 var(--fs-mask)/1.1 var(--font-display); letter-spacing:-.02em; text-wrap:balance; color:var(--ink); }

/* Sammy-Karte und Schlüssel (kein Video im Baum → filter erlaubt) */
.sammy-card,.key-return{ margin:0; }
.sammy-card img{ width:100%; height:auto; filter:drop-shadow(0 14px 30px rgba(120,88,0,.22)); }
.key-return{ display:none; }
.key-return img,.rb-tile-key img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:20% 50%;
  border-radius:var(--r-md); box-shadow:var(--shadow-photo); }

/* Mini-Telefon: Optik wie S03, eigenständig (überschreibt .phone aus dem Hero: keine Rotation, volle Breite) */
.rb .phone--mini{ position:relative; display:block; width:100%; max-width:none; height:auto; aspect-ratio:9/18.6; margin:0; padding:4.2%;
  border-radius:15.7% / 7.6%; background:var(--device); box-shadow:inset 0 0 0 2px rgba(255,196,0,.5), var(--shadow-lg);
  transform:none; translate:none; rotate:none; scale:none; }
.rb .phone--mini::before{ content:""; position:absolute; z-index:3; top:4.2%; left:33%; width:34%; height:3.4%; margin:0;
  border-radius:0 0 13px 13px; background:var(--device); transform:none; translate:none; }
.rb .mini-screen{ position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate;
  border-radius:12.8% / 5.9%; background:var(--surface); transform:none; translate:none; filter:none; }
.rb .scr{ position:absolute; inset:0; z-index:0; visibility:hidden; overflow:hidden; }
.rb .scr.is-on{ visibility:visible; }
.rb .scr > img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }   /* Anhänger-Foto ist bereits im Display-Format (9 : 18,6) zugeschnitten */
.rb .screen-veil{ position:absolute; inset:0; z-index:1; background:var(--device); opacity:0; pointer-events:none; transition:none; }   /* GSAP steuert opacity – keine Hero-Transition */

/* Bildschirm 1: Scan (Ecken, Linie, Pill) */
.rb .scr-1 .scan-corners{ position:absolute; inset:22% 14% 32%; display:block; opacity:1; transform-origin:50% 50%; }
.rb .scr-1 .scan-corners i{ position:absolute; width:22px; height:22px; border:0 solid var(--gold); }
.rb .scr-1 .scan-corners i:nth-child(1){ top:0; left:0; border-width:3px 0 0 3px; border-top-left-radius:6px; }
.rb .scr-1 .scan-corners i:nth-child(2){ top:0; right:0; border-width:3px 3px 0 0; border-top-right-radius:6px; }
.rb .scr-1 .scan-corners i:nth-child(3){ bottom:0; left:0; border-width:0 0 3px 3px; border-bottom-left-radius:6px; }
.rb .scr-1 .scan-corners i:nth-child(4){ bottom:0; right:0; border-width:0 3px 3px 0; border-bottom-right-radius:6px; }
/* Linie 2 px Gold mit Glow; Element so hoch wie der Bildschirm → translateY(100 %) = einmal ganz hinunter */
.rb .scr-1 .scan-line{ position:absolute; top:0; left:8%; right:8%; width:auto; height:100%; display:block; opacity:1; --scan-h:100%;
  background:linear-gradient(to bottom, rgba(255,196,0,0) 0, rgba(255,196,0,.32) 14px, var(--gold) 14px, var(--gold) 16px, rgba(255,196,0,0) 16px);
  box-shadow:none; pointer-events:none; }
.rb .scr-1.is-on .scan-line{ animation:scanY 2.4s linear infinite; }
.rb .scan-pill{ position:absolute; left:50%; bottom:9%; translate:-50% 0; max-width:88%; padding:5px 10px; overflow:hidden;
  border-radius:var(--r-pill); background:var(--glass-night); color:var(--on-night);
  font:700 11px/1.2 var(--font-body); white-space:nowrap; text-overflow:ellipsis; }

/* Bildschirm 2: Chat-Skelett */
.rb .chat-skel{ display:flex; flex-direction:column; gap:8px; padding:20% 9% 9%; background:var(--surface-2); }
.rb .skel-head{ display:flex; align-items:center; gap:8px; padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.rb .skel-badge{ display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--tile-honey); font-size:14px; line-height:1; }
.rb .chat-skel i{ display:block; border-radius:var(--r-pill); }
.rb .chat-skel .bar{ height:10px; background:var(--border-strong); opacity:.7; }
.rb .chat-skel .bub{ height:22px; border-radius:12px; }
.rb .chat-skel .bub.l{ align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px; }
.rb .chat-skel .bub.r{ align-self:flex-end; background:var(--gold); border-bottom-right-radius:4px; }
.rb .chat-skel .w45{ width:45%; } .rb .chat-skel .w50{ width:50%; } .rb .chat-skel .w60{ width:60%; }
.rb .chat-skel .w65{ width:65%; } .rb .chat-skel .w70{ width:70%; }

/* Bildschirm 3: Erfolg */
.rb .scr-3{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:8%; background:var(--surface); }
.rb .scr-3 .hx-ok{ width:min(64px, 40%); background:var(--ok-solid); color:var(--on-ok); font:800 clamp(20px, 2.2vw, 30px)/1 var(--font-display); }
.rb .status-pill{ padding:6px 11px; border-radius:var(--r-pill); background:var(--ok-bg); color:var(--ok-text);
  font:700 11px/1.25 var(--font-body); text-align:center; }


/* ═══ S07 · Kapitel B: Schritte auf der Nacht-Bühne ═══ */
.rb-b{ --obj-w:min(240px, 20vw, 26svh); }
.rb-b .rb-mask{ background:var(--stage-b); color:var(--on-night); }
.rb-b .rb-mask::before{ opacity:.3; }
.steps-ambient{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 100%, rgba(255,196,0,.14), rgba(255,196,0,0)); }
.rb-b .rb-sub{ font-size:var(--fs-note); line-height:1.55; color:var(--on-night); }
.rb-b .hint{ color:var(--on-night-muted); opacity:.75; white-space:nowrap; }
/* „Scrolle weiter →“ gehört nur zur gepinnten Bühne; im ruhigen Raster (statisch bzw. chapterCalm) ausblenden */
:is(html:not(.story) .rb-b, .rb-b.rb--off) .hint{ display:none; }
.rb-b .eyebrow{ color:var(--gold); }

/* Lanes als Karten (statisch und mobil); Desktop-Story setzt sie zurück */
.rb-b .rb-lane{ position:relative; overflow:hidden; padding:24px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); }
.rb-b .rb-lane > :not(.rb-ghost){ position:relative; z-index:1; }
.rb-b .rb-lane h3{ color:var(--on-night); }
.rb-b .rb-lane p{ color:var(--on-night-muted); }
.rb-b .rb-num{ width:44px; font-size:18px; }
.rb-b .tag{ display:inline-flex; align-items:center; margin-top:14px; padding:6px 11px; border:1.5px solid var(--gold); border-radius:var(--r-pill);
  color:var(--gold); font:800 11.5px/1 var(--font-body); letter-spacing:.07em; font-variant-numeric:tabular-nums; }
/* Aufklapper „Mehr erfahren“ je Schritt (Feedback Jörg, 02.10.2026): natives <details>, ohne JS bedienbar.
   Öffnen über ::details-content wie in der FAQ; der „+“-Kreis (.plus) dreht sich zum „ד. Desktop-Story: siehe .is-current. */
.rb-more{ display:block; margin-top:14px; interpolate-size:allow-keywords; }
.rb-more::details-content{ block-size:0; overflow:hidden;
  transition:block-size var(--t-screen) var(--ease-out), content-visibility var(--t-screen) allow-discrete; }
.rb-more[open]::details-content{ block-size:auto; }
.rb-more > summary{ display:inline-flex; align-items:center; gap:10px; min-height:44px; list-style:none; cursor:pointer;
  color:var(--gold); font:800 var(--fs-small)/1.2 var(--font-body); letter-spacing:.02em; -webkit-tap-highlight-color:transparent; }
.rb-more > summary::-webkit-details-marker{ display:none; }
.rb-more > summary::marker{ content:""; }
.rb-more > summary:focus-visible{ outline-offset:4px; border-radius:var(--r-sm); }
.rb-more .plus{ width:28px; height:28px; border-color:rgba(255,196,0,.45); }
.rb-more .plus::before,.rb-more .plus::after{ background:var(--gold); }
.rb-more[open] > summary .plus{ transform:rotate(45deg); background:rgba(255,196,0,.16); border-color:var(--gold); }
@media (hover:hover){ .rb-more > summary:hover .plus{ background:rgba(255,196,0,.16); border-color:var(--gold); } }
.rb-more > summary:active .plus{ background:rgba(255,196,0,.26); }
.rb-more-body{ padding:4px 0 2px; }
.rb-b .rb-lane .rb-more-body p{ max-width:52ch; font-size:var(--fs-note); line-height:1.6; color:var(--on-night-muted); }
.rb-more-body p + p{ margin-top:10px; }
@media (prefers-reduced-motion: reduce){ .rb-more::details-content{ transition:none; } }

.rb-ghost{ position:absolute; right:-.04em; bottom:-.16em; z-index:0; pointer-events:none; user-select:none;
  font:800 clamp(5.5rem, 16vw, 8.5rem)/.8 var(--font-display); font-stretch:var(--wide); letter-spacing:-.06em; color:rgba(255,196,0,.07); }

/* Wabencluster (4 Zellen); statisch alle gefüllt */
.rb .cluster{ display:block; width:100%; height:auto; overflow:visible; }
.rb .cell-bg{ fill:rgba(255,255,255,.04); }
.rb .cell-fill{ fill:var(--gold); transform-box:fill-box; transform-origin:50% 100%; }
.rb .cell-stroke{ fill:none; stroke:rgba(255,196,0,.5); stroke-width:1.5; }
.rb .cell-num{ font:800 18px var(--font-display); fill:var(--on-gold); }
/* D-02: Story (Desktop UND Mobil) – leere Zelle dunkel → Ziffer hell; .is-full (gefüllt) behält --on-gold. Statisch fehlt html.story. */
html.story .rb-b:not(.rb--off) .cell:not(.is-full) .cell-num{ fill:var(--on-night-muted); }

/* Fortschritt (Optik); sichtbar nur in der Desktop-Story */
.steps-rail{ position:relative; flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.12); }
.steps-rail-fill{ position:absolute; inset:0; display:block; border-radius:inherit; transform-origin:left center;
  background:linear-gradient(90deg, var(--gold-deep2), var(--gold)); }
.steps-marker{ position:absolute; top:50%; left:25%; width:14px; margin:-8px 0 0 -7px; background:var(--gold); }
.steps-counter{ font:800 12px/1 var(--font-display); letter-spacing:.1em; font-variant-numeric:tabular-nums; color:var(--on-night-muted); white-space:nowrap; }
.steps-glow{ position:absolute; top:28%; left:12%; z-index:0; width:40vw; aspect-ratio:1; border-radius:50%;
  background:var(--gold); filter:blur(60px); opacity:.25; pointer-events:none; }
/* Nur in der Desktop-Story (live: Glow, Schiene, Zähler ohne Animation aus) */
.steps-progress,.steps-glow,.rb-skip,.ghosts{ display:none; }


/* ═══ S05 + S07 · statisch (kein JS, Reduced Motion, Forced Colors, GSAP fehlt, Notausstieg) ═══ */
:is(html:not(.story) .rb, .rb.rb--off){ padding-block:var(--sec-y) calc(var(--sec-y) * .5); }
:is(html:not(.story) .rb, .rb.rb--off) .rb-title{ padding-inline:var(--pad-x); margin-bottom:clamp(28px, 4vw, 56px); }
/* Statischer Markenpunkt auch im Notausstieg (das Fundament zeigt ihn nur ohne html.story) */
.rb.rb--off .pin-title:not(.is-split)::after{ content:""; display:inline-block; width:.62em; height:.72em; margin-left:.18em;
  clip-path:var(--hex); background:var(--gold); vertical-align:middle; }
/* Notausstieg innerhalb von html.story: Startzustände des Fundaments (§5.6) aufheben */
html.story .rb.rb--off .rb-mask, html.story .rb.rb--off .rb-lane, html.story .rb.rb--off .rb-head{ opacity:1; }
:is(html:not(.story) .rb, .rb.rb--off) .rb-mask{ display:grid; gap:clamp(24px, 3vw, 40px); width:var(--content); margin-inline:auto;
  padding:clamp(28px, 5vw, 64px); border-radius:var(--r-2xl); overflow:hidden; clip-path:none; }
:is(html:not(.story) .rb, .rb.rb--off) .rb-head{ grid-area:head; }
:is(html:not(.story) .rb, .rb.rb--off) .rb-stage{ grid-area:stage; }
:is(html:not(.story) .rb, .rb.rb--off) .rb-lanes{ grid-area:list; }

/* Kapitel A statisch: Kopf · Bühne (Telefon mit Erfolgsbildschirm + Sammy) · Lane 0 · Schrittliste */
:is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-mask{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "stage" "lane0" "list"; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-lane[data-lane="0"]{ grid-area:lane0; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-stage{ width:min(280px, 100%); aspect-ratio:280 / 320; margin-inline:auto; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-object{ position:absolute; top:0; right:0; width:54%; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .sammy-card{ position:absolute; left:0; bottom:0; z-index:3; width:54%; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .scr{ visibility:hidden; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .scr-3{ visibility:visible; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-lanes{ display:grid; gap:22px; align-content:center; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-lanes .rb-lane{ display:grid; grid-template-columns:30px minmax(0, 1fr); column-gap:14px; align-items:start; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-lanes .rb-num{ grid-row:span 2; margin:2px 0 0; }
:is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-lanes h3{ font-size:var(--fs-h3); line-height:1.2; }

/* Kapitel B statisch: Kopf · Cluster (alle Zellen gefüllt) · Schritte als Raster */
:is(html:not(.story) .rb-b, .rb-b.rb--off) .rb-mask{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "stage" "list"; }
:is(html:not(.story) .rb-b, .rb-b.rb--off) .rb-stage{ width:min(200px, 60%); margin-inline:auto; }
:is(html:not(.story) .rb-b, .rb-b.rb--off) .rb-lanes{ display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; }

@media (min-width:641px){
  :is(html:not(.story) .rb-b, .rb-b.rb--off) .rb-lanes{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:980px){
  :is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-mask{ grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:"head stage list" "lane0 stage list"; column-gap:clamp(32px, 4vw, 64px); row-gap:20px; align-items:center; }
  :is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-head{ align-self:end; }
  :is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-lane[data-lane="0"]{ align-self:start; }
  :is(html:not(.story) .rb-a, .rb-a.rb--off) .rb-stage{ width:clamp(200px, 22vw, 280px); }
  :is(html:not(.story) .rb-b, .rb-b.rb--off) .rb-mask{ grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"head stage" "list list"; align-items:center; }
  :is(html:not(.story) .rb-b, .rb-b.rb--off) .rb-stage{ width:200px; }
}


/* ═══ S05 + S07 · Story mobil (kein Pin, zeitbasierte einmalige Auftritte) ═══ */
@media not all and (min-width:900px) and (min-height:620px){
  html.story .rb:not(.rb--off) .rb-title{ padding:var(--sec-y) var(--pad-x) clamp(28px, 6vw, 44px); }
  html.story .rb:not(.rb--off) .rb-mask{ display:flex; flex-direction:column; gap:28px; padding:48px var(--pad-x) 56px; overflow:hidden; }
  html.story .rb:not(.rb--off) .rb-lanes{ display:flex; flex-direction:column; gap:40px; }

  /* Kapitel A: Sammy über der H2, Telefon und Schlüssel ausgeblendet (die Kacheln zeigen die Bildschirme) */
  html.story .rb-a:not(.rb--off) .rb-stage{ order:-1; }
  html.story .rb-a:not(.rb--off) .rb-object{ display:none; }
  html.story .rb-a:not(.rb--off) .sammy-card{ width:110px; }
  html.story .rb-a:not(.rb--off) .rb-lane[data-lane="0"]{ max-width:62ch; }

  /* Bildschirm-Kachel je Schritt (von rbTiles() angelegt) */
  .rb-tile{ position:relative; display:block; width:min(200px, 52vw); aspect-ratio:3 / 4; margin:0 auto 22px; }
  .rb-tile-screen{ position:absolute; inset:0; z-index:1; padding:6px; border-radius:28px; background:var(--device);
    box-shadow:inset 0 0 0 2px rgba(255,196,0,.5), var(--shadow-md); }
  .rb .rb-tile-screen > .scr{ inset:6px; border-radius:22px; visibility:visible; }
  .rb .rb-tile .scr-1 .scan-line{ animation:none; transform:translateY(46%); }
  .rb-tile-key{ position:absolute; z-index:0; top:14%; left:12%; width:76%; transform-origin:30% 90%; }

  /* Kapitel B: Cluster 140 px zentriert, Karten gestapelt */
  html.story .rb-b:not(.rb--off) .rb-stage{ width:140px; margin-inline:auto; }
}


/* ═══ S05 + S07 · Story Desktop (Pin +=440 %, Waben-Entfaltung, Pendel) ═══ */
@media (min-width:900px) and (min-height:620px){
  html.story .rb:not(.rb--off) .rb-title{ position:absolute; inset:0 0 auto; z-index:2; height:100svh; display:grid; place-items:center; pointer-events:none; }
  html.story .rb:not(.rb--off) .rb-mask{ z-index:var(--z-mask); height:100svh; overflow:hidden;
    --D:calc((var(--gap) + var(--copy-w)) / 2);                                     /* Objekt-Ausschlag nach links/rechts */
    --stage-y:calc(50% + (var(--nav-h) + var(--finder-h)) / 2 + 6svh); }            /* Bühnenmitte unter Nav + Finder-Bar */
  html.story .rb-a:not(.rb--off) .rb-mask{ --dev-w:min(260px, 24vw, 26svh); }
  html.story .rb-b:not(.rb--off) .rb-mask{ --dev-w:var(--obj-w); }

  /* Kopf */
  html.story .rb:not(.rb--off) .rb-head{ position:absolute; top:calc(var(--nav-h) + var(--finder-h) + 3svh); left:0; right:0;
    width:min(760px, var(--content)); margin-inline:auto; text-align:center; }
  html.story .rb-b:not(.rb--off) .rb-head--b{ left:var(--pad-x); right:auto; width:auto; max-width:560px; margin:0; text-align:left; }

  /* Bühne: --side (−1 links … +1 rechts) tweent GSAP an .rb-stage; die Kinder folgen per translate */
  html.story .rb:not(.rb--off) .rb-stage{ position:absolute; inset:0; --side:-1; pointer-events:none; }
  html.story .rb:not(.rb--off) .rb-object{ position:absolute; z-index:2; left:50%; top:var(--stage-y); width:var(--dev-w);
    margin-left:calc(var(--dev-w) / -2); translate:calc(var(--side) * var(--D)) -50%; }
  html.story .rb-a:not(.rb--off) .sammy-card{ position:absolute; z-index:1; left:50%; top:var(--stage-y); width:calc(var(--dev-w) * .72);
    margin-left:calc(var(--dev-w) * -.36); translate:calc(var(--side) * var(--D)) -50%; }
  html.story .rb-a:not(.rb--off) .key-return{ position:absolute; z-index:1; display:block; left:50%; top:var(--stage-y); width:calc(var(--dev-w) * .62);
    margin-left:calc(var(--dev-w) * -.31); translate:calc(var(--side) * var(--D)) -50%; }
  html.story .rb-a:not(.rb--off) .sammy-card img, html.story .rb-a:not(.rb--off) .key-return img{ opacity:0; }

  /* Lanes: vertikal per GSAP (yPercent −50) auf --stage-y, links/rechts neben dem Objekt (nie über ihm) */
  html.story .rb:not(.rb--off) .rb-lanes{ position:absolute; inset:0; pointer-events:none; }
  html.story .rb:not(.rb--off) .rb-lane{ position:absolute; z-index:2; top:var(--stage-y); width:var(--copy-w); margin:0; pointer-events:none; }
  html.story .rb:not(.rb--off) .rb-lane.is-right{ left:calc(50% - var(--D) + var(--dev-w) / 2 + var(--gap)); }
  html.story .rb:not(.rb--off) .rb-lane.is-left{ left:calc(50% + var(--D) - var(--dev-w) / 2 - var(--gap) - var(--copy-w)); }
  html.story .rb-a:not(.rb--off) .rb-lane[data-lane="0"] p{ max-width:var(--copy-w); }

  /* Kapitel B: Karten-Optik zurücksetzen, Ziffer 44 px, Geister-Ziffern hinter der aktiven Lane */
  html.story .rb-b:not(.rb--off) .rb-lane{ overflow:visible; padding:0; border:0; border-radius:0; background:none; }
  /* Lanes sind hier pointer-events:none und liegen paarweise übereinander → nur die aktuelle gibt den Aufklapper frei (rbNight) */
  html.story .rb-b:not(.rb--off) .rb-lane.is-current .rb-more{ pointer-events:auto; }
  /* Aufgeklappt wird die Lane breiter – nach außen, weg vom Objekt (bis an den Seitenrand) –, damit die Erklärung in die
     100svh-Bühne passt (bei --copy-w allein ragt sie über Kopfzeile und Fortschritt). Breite/left sind CSS, GSAP bewegt nur x/y. */
  html.story .rb-b:not(.rb--off) .rb-lane:has(> .rb-more[open]){
    --more-w:max(var(--copy-w), min(640px, calc(50% + var(--D) - var(--dev-w) / 2 - var(--gap) - var(--pad-x))));
    width:var(--more-w); }
  html.story .rb-b:not(.rb--off) .rb-lane.is-left:has(> .rb-more[open]){ left:calc(50% + var(--D) - var(--dev-w) / 2 - var(--gap) - var(--more-w)); }
  /* Offen ersetzt die Erklärung den Kurztext und das Schildchen (beides steckt ausführlicher darin) – nur hier, wo die Lane
     in 100svh zwischen Kopfzeile und Fortschritt passen muss. Letzte Sicherung bei niedrigen Fenstern: der Text scrollt in sich. */
  html.story .rb-b:not(.rb--off) .rb-lane:has(> .rb-more[open]) > :is(p, .tag){ display:none; }
  html.story .rb-b:not(.rb--off) .rb-more{ margin-top:10px; }
  html.story .rb-b:not(.rb--off) .rb-more-body{ max-height:calc(100svh - 400px); overflow-y:auto; scrollbar-width:thin;
    scrollbar-color:rgba(255,196,0,.45) transparent; }
  html.story .rb-b:not(.rb--off) .rb-more-body p{ max-width:none; }
  html.story .rb-b:not(.rb--off) .rb-ghost{ display:none; }
  html.story .rb-b:not(.rb--off) .ghosts{ display:block; position:absolute; inset:0; z-index:0; }
  html.story .rb-b:not(.rb--off) .ghost{ position:absolute; top:var(--stage-y); opacity:0; white-space:nowrap; pointer-events:none;
    font:800 var(--fs-ghost)/.8 var(--font-display); font-stretch:var(--wide); letter-spacing:-.06em; color:rgba(255,196,0,.055); }
  html.story .rb-b:not(.rb--off) .ghost:is([data-k="0"], [data-k="2"]){ left:calc(50% - var(--D) + var(--dev-w) / 2 + var(--gap)); }
  html.story .rb-b:not(.rb--off) .ghost:is([data-k="1"], [data-k="3"]){ left:calc(50% + var(--D) - var(--dev-w) / 2 - var(--gap) - var(--copy-w)); }

  /* Kapitel B: Glow, Fortschritt */
  html.story .rb-b:not(.rb--off) .steps-glow{ display:block; }
  html.story .rb-b:not(.rb--off) .steps-progress{ position:absolute; z-index:2; left:0; right:0; bottom:5svh; display:flex; align-items:center; gap:16px;
    width:min(560px, 60vw); margin-inline:auto; }

  /* Skip-Pill zu den Preisen: visuell versteckt, bei Tastaturfokus oben rechts in der Bühne */
  html.story .rb-b:not(.rb--off) .rb-skip{ display:inline-flex; position:absolute; z-index:3; top:calc(var(--nav-h) + var(--finder-h) + 3svh); right:var(--pad-x);
    width:1px; height:1px; min-height:0; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; box-shadow:none; }
  html.story .rb-b:not(.rb--off) .rb-skip:focus-visible{ width:auto; height:auto; min-height:44px; margin:0; padding:12px 22px; overflow:visible; clip-path:none; }
}


/* ═══ S05 + S07 · Dark Honey (Honig-Bühne dunkel mit Textur; Nacht-Bühne ist in beiden Modi dunkel) ═══ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rb-a .rb-mask::before{ opacity:.22; }
}
:root[data-theme="dark"] .rb-a .rb-mask::before{ opacity:.22; }


/* ═══ S05 + S07 · Forced Colors ═══ (keine Story per Gate; Clip-Masken hebt das Fundament auf) */
@media (forced-colors: active){
  .rb-mask::before, .rb-tint, .steps-ambient, .steps-glow, .rb-ghost{ display:none; }
  .rb-b .rb-lane, :is(html:not(.story) .rb, .rb.rb--off) .rb-mask{ border:1.5px solid CanvasText; }
  .rb-num, .rb-b .tag{ forced-color-adjust:auto; border:1px solid CanvasText; }
}

/* ═══ Team whyhow · S06 Produkte (Why-Zickzack) und S08 Features (How-Reihe) ═══
   Nur Tokens und Fundament-Klassen; keine eigenen Hex-Werte. Statisch (ohne html.story) ist alles sichtbar.
   Transform-Aufteilung, damit sich CSS und GSAP nie überschreiben:
     .why-media  → GSAP clipPath (Reveal) · CSS translate (Hover)
     .why-lift   → GSAP scale (Reveal) + yPercent/rotation (Höhepunkt Block 1)
     .why-tilt   → tilt() inline transform (3D erlaubt: kein Video in dieser Kette)
     img         → GSAP yPercent (Parallaxe) · CSS scale (Hover)
   iOS-REGEL: betrifft nur Vorfahren von #promoVideo (S03) – hier ohne Belang, trotzdem kein preserve-3d. */


/* ═══ S06 · Produkte ═══ */
.why{ position:relative; padding-bottom:var(--sec-y); }

/* Kopf: Titelband TARA 15vh oben / 10vh unten */
.why-head{ width:min(720px, var(--content)); padding-top:max(72px, 15vh); margin-bottom:max(48px, 10vh); text-align:center; }

/* Raster: mobil eine Spalte, ab 900 px Zickzack */
.why-grid{ display:grid; grid-template-columns:minmax(0, 1fr); row-gap:64px; justify-items:center; }

/* Block = ganze Karte als Link */
.why-block{ display:block; position:relative; width:100%; max-width:420px; color:var(--ink); text-decoration:none;
  border-radius:var(--r-lg); -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--ease); }
.why-block:focus-visible{ outline-offset:10px; border-radius:var(--r-lg); }
.why-block:active{ transform:scale(.99); }

/* Medium: Kachel-Rahmen in Kapitelfarben, 4 : 5 */
.why-media{ position:relative; aspect-ratio:4/5; margin:0; padding:12px; overflow:hidden;
  background:var(--tile-honey); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  transition:translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out); }
.why-media[data-tile="apricot"]{ background:var(--tile-apricot); }
.why-media[data-tile="cream"]{ background:var(--tile-cream); }
.why-media[data-tile="wax"]{ background:var(--tile-wax); }
.why-lift{ display:block; position:relative; width:100%; height:100%; transform-origin:50% 60%; }
.why-tilt{ display:block; position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:calc(var(--r-lg) - 8px); background:var(--surface-2); box-shadow:var(--shadow-photo); }
.why-tilt.is-back{ transition:transform .5s var(--ease); }            /* Rückfederung nach pointerleave (B11) */
/* Bild 16 % überhoch: Parallaxe ±6 % bleibt ohne Kante (TARA: Bildfenster) */
.why-par{ position:absolute; left:0; top:-8%; width:100%; height:116%; }
/* Querformat-Motiv mit breiter Aufschrift (Helm): weniger Überstand → mehr Bildbreite sichtbar; JS liest data-par */
.why-par--flach{ top:-3%; height:106%; }   /* ANI-04: Parallaxe (yPercent) läuft hier … */
.why-tilt img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;   /* … der Hover-scale am img */
  transition:scale var(--t-reveal) var(--ease); }

/* Scan-Ecken: statisch gezeichnet (Gold-Winkel), in der Story fahren sie ein */
.why .scan-corners{ position:absolute; inset:9%; pointer-events:none; }
.why .scan-corners i{ position:absolute; width:22px; height:22px; border:3px solid var(--gold); }
.why .scan-corners i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; border-top-left-radius:8px; }
.why .scan-corners i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; border-top-right-radius:8px; }
.why .scan-corners i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; border-bottom-left-radius:8px; }
.why .scan-corners i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; border-bottom-right-radius:8px; }
/* Scan-Linie: volle Höhe, Strahl an der Unterkante → yPercent −100 → 100 fegt einmal über das Bild. Statisch aus. */
.why .scan-line{ display:none; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,196,0,0) 0, rgba(255,196,0,0) 72%, rgba(255,196,0,.22) 96%, var(--gold) calc(100% - 2px), var(--gold) 100%); }
/* Lichtfleck (B11): folgt --mx/--my aus tilt() */
.why-tilt::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255,196,0,.14), transparent 60%);
  opacity:0; transition:opacity .3s var(--ease-out); }

/* Copy */
.why-copy{ padding:24px 4px 0; text-align:left; }
.why-copy h3{ display:flex; align-items:center; gap:12px; margin:0 0 10px; }   /* Schrift aus .h3 (D-09) */
.why-ico{ flex:none; width:32px; font-size:16px; line-height:1; background:rgba(255,196,0,.16); }
.why-copy p{ margin:0 0 14px; font-size:var(--fs-card); line-height:1.55; color:var(--body); }
.why-more{ display:inline-block; font:800 var(--fs-small)/1.2 var(--font-body); letter-spacing:.01em; color:var(--gold-text); }
/* ANI-04: GSAP bewegt .why-more (y) und schreibt dabei inline translate:none – der Hover-Versatz liegt deshalb am inneren Span */
.why-more-in{ display:inline-block; transition:translate var(--t-hover) var(--ease-out); }

/* Zustände (Matrix §3.1, Karten-Link): −4 px, --shadow-md, Gold-Rand, Bild 1,03, „Mehr erfahren →“ +4 px */
@media (hover:hover){
  .why-block:hover .why-media{ translate:0 -4px; box-shadow:0 0 0 2px var(--gold), var(--shadow-md); }
  .why-block:hover .why-tilt img{ scale:1.03; }
  .why-block:hover .why-more-in{ translate:4px 0; }
}
@media (hover:hover) and (pointer:fine){
  .why-block:hover .why-tilt::after{ opacity:1; }
}
.why-block:focus-visible .why-media{ box-shadow:0 0 0 2px var(--gold), var(--shadow-md); }

/* Story: Scan-Linie existiert nur, wenn GSAP sie führt (Startzustand unsichtbar) */
html.story .why .scan-line{ display:block; opacity:0; }

/* ≥ 900 px: Zickzack (reines CSS, bleibt auch statisch) */
@media (min-width:900px){
  .why-grid{ grid-template-columns:1fr 1fr; column-gap:clamp(48px, 8vw, 140px); row-gap:88px; max-width:1000px; justify-items:stretch; }
  .why-block{ max-width:420px; }
  .why-block:nth-child(odd){ justify-self:start; }
  .why-block:nth-child(even){ justify-self:end; margin-top:22vh; }
}


/* ═══ S08 · Features ═══ */
.how{ position:relative; padding-block:var(--sec-y); }

/* Kopf: Titelband TARA 6vh / 5vh (im Story-Pin), statisch wie live zentriert */
.how-head{ text-align:center; margin-bottom:max(40px, 5vh); }
.how-head .lead{ max-width:52ch; margin:16px auto 0; }

/* Statisch: Raster 1 / 2 / 3 Spalten (live: Bento 3 × 2) */
.how-row{ display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; width:var(--content); }
.how .how-row{ margin-inline:auto; }   /* BR-2: (0,2,0) schlägt den Listen-Reset ul[class]{margin:0} (0,1,1); Desktop-Reihe (0,4,1) bleibt */
@media (min-width:641px){ .how-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:980px){ .how-row{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* Karte: TARA 325 × 390, Inhalt linksbündig, vertikal zentriert (in der Reihe) */
.how-card{ display:flex; flex-direction:column; justify-content:flex-start; gap:12px; padding:32px; text-align:left;
  transition:translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out); }
.how-card h3{ margin:0; }   /* Schrift aus .h3 (D-09) */
.how-card p{ margin:0; font-size:var(--fs-card); line-height:1.55; color:var(--body); }

/* Icon-Wabe 56 px: die Wabe zeichnet ::before (dreht beim Hover), das SVG-Icon bleibt aufrecht.
   .hx/[data-tile] des Fundaments liefern Form und Farbe – hier auf ::before umgelenkt. */
.how-card .how-ico.hx{ --ico:var(--tile-honey); --ic-ink:var(--on-gold); position:relative; isolation:isolate; width:56px; flex:none; margin-bottom:8px;
  clip-path:none; background:none; font-size:24px; line-height:1; color:var(--ic-ink); transition:color var(--t-ui) var(--ease-out); }
/* Linien-Icon wie S04 (currentColor, Duoton 14 %, Halo in Wabenfarbe) */
.how-card .ic-svg{ display:block; width:27px; height:27px; overflow:visible; stroke-width:1.9; }
.how-card .ic-fill{ fill:currentColor; stroke:none; opacity:.14; }
.how-card .ic-halo{ stroke:var(--ico); stroke-width:4.8; transition:stroke var(--t-ui) var(--ease-out); }
.how-card.is-lit .ic-halo{ stroke:var(--gold); }
.how-card .how-ico[data-tile="apricot"]{ --ico:var(--tile-apricot); }
.how-card .how-ico[data-tile="cream"]{ --ico:var(--tile-cream); }
.how-card .how-ico[data-tile="wax"]{ --ico:var(--tile-wax); }
.how-card .how-ico::before{ content:""; position:absolute; inset:0; z-index:-1; clip-path:var(--hex);
  background-color:var(--ico);
  background-image:linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25));      /* 25-%-Weißlasur (nur hell) */
  transition:rotate .4s var(--ease), background-color var(--t-ui) var(--ease-out); }
/* Aufleuchten in der Reihe (containerAnimation → .is-lit) */
.how-card.is-lit .how-ico::before{ background-color:var(--gold); background-image:none; }

@media (hover:hover){
  .how-card:hover{ translate:0 -4px; box-shadow:var(--shadow-md); border-color:var(--gold); }
  .how-card:hover .how-ico::before{ rotate:30deg; }
}

/* Dark Honey: Kacheln ohne Lasur (beide Wege wie der Token-Block) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .how-card .how-ico::before{ background-image:none; }
  :root:not([data-theme="light"]) .how-card .how-ico{ --ic-ink:var(--gold); }
  :root:not([data-theme="light"]) .how-card.is-lit .how-ico{ --ic-ink:var(--on-gold); }
}
:root[data-theme="dark"] .how-card .how-ico::before{ background-image:none; }
:root[data-theme="dark"] .how-card .how-ico{ --ic-ink:var(--gold); }
:root[data-theme="dark"] .how-card.is-lit .how-ico{ --ic-ink:var(--on-gold); }

/* Desktop-Story: featuresDesk() setzt .is-row (nur mit laufendem JS + GSAP → kein Layout-Sprung ohne Story).
   Sektion füllt den Viewport, Kopf unter Nav und Finder-Bar, Reihe in Inhaltsbreite plus Seitenrand. */
@media (min-width:900px) and (min-height:620px){
  html.story .how.is-row{ min-height:100vh; padding-top:calc(var(--nav-h) + var(--finder-h) + 6vh); padding-bottom:5vh; }
  html.story .how.is-row .how-head{ width:auto; max-width:760px; margin:0 var(--pad-x) 5vh; text-align:left; }
  html.story .how.is-row .how-head .lead{ margin-inline:0; }
  html.story .how.is-row .how-row{ display:flex; gap:24px; width:max-content; margin:0; padding-inline:var(--pad-x); }
  html.story .how.is-row .how-row.is-fit{ margin-inline:auto; }
  /* --how-fit: freie Höhe unter dem Kopf (JS), damit die Karte bei 900 × 620 nicht unter den Viewport ragt */
  html.story .how.is-row .how-card{ flex:none; width:340px; height:max(260px, min(380px, 46svh, var(--how-fit, 380px))); justify-content:center; }
}

/* Reduced Motion: Zustände ohne Bewegung (Schatten/Rand bleiben) */
@media (prefers-reduced-motion: reduce){
  .why-block:hover .why-media, .how-card:hover{ translate:none; }
  .why-block:hover .why-tilt img{ scale:none; }
  .why-block:hover .why-more-in{ translate:none; }
  .how-card:hover .how-ico::before{ rotate:none; }
  .why-block:active{ transform:none; }
}

/* forced-colors: Rahmen sichtbar halten, dekorative Flächen dem System überlassen */
@media (forced-colors: active){
  .why-media{ border:1.5px solid CanvasText; }
  .why .scan-corners i{ border-color:CanvasText; }
  .why .scan-line, .why-tilt::after{ display:none; }
  .how-card .how-ico::before{ forced-color-adjust:none; background:CanvasText; opacity:.15; }
  .how-card .how-ico{ forced-color-adjust:none; --ic-ink:CanvasText; --ico:Canvas; color:CanvasText; }
}

/* print: keine Dekoration, Raster statt Reihe */
@media print{
  .why .scan-corners, .why .scan-line, .why-tilt::after{ display:none !important; }
  .why-block:nth-child(even){ margin-top:0; }
}

/* ═══ Team conversion · S09 Preise · S10 FAQ · S11 CTA · S12 SEO-Text und Ratgeber ═══
   Nur Tokens und Fundament-Klassen; Gold-Transparenzen rgba(255,196,0,…) als dokumentierte Ausnahme.
   Startzustände der Story setzt ausschließlich GSAP (from/fromTo) – im CSS ist alles sichtbar (statisch, No-JS, Reduced Motion). */


/* ═══ S09 · Preise ═══ */
.pricing{ background:var(--surface-2); padding-block:var(--sec-y); }
/* #preise: Versatz kommt aus html{scroll-padding-top} (A11Y-02) – ein scroll-margin würde sich dazu addieren */

.pricing-head{ max-width:920px; text-align:center; }
.pricing-head .pin-title{ margin:4px auto 22px; }   /* .pin-title--price im Markup: Port-Haken ohne CSS/JS (D-09) */
.pricing-head .lead{ max-width:46ch; margin-inline:auto; text-wrap:pretty; }
/* Programmatischer Fokus nach dem Anker-Sprung (anchors → #preise-h2): Ring nur bei Tastatur */
#preise-h2:focus:not(:focus-visible){ outline:none; }
#preise-h2:focus-visible{ outline-offset:8px; border-radius:var(--r-md); }

.prices{ display:grid; grid-template-columns:minmax(0, 1fr); gap:40px 24px; max-width:920px; margin-top:clamp(44px, 6vw, 72px); align-items:stretch; }
@media (min-width:761px){
  .prices{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
}

/* Karte: Inhalt als Spalte, Button sitzt unten bündig in beiden Karten */
.price{ position:relative; display:flex; flex-direction:column; padding:34px 30px; border-radius:var(--r-xl); }
.price > .btn{ margin-top:auto; }
.price--feat{
  --ring:4px; --ring-a:.13;                         /* Halo, von der Story einmal als Welle animiert (pricing) */
  border:2px solid var(--gold);
  box-shadow:0 0 0 var(--ring) rgba(255,196,0,var(--ring-a)), var(--shadow-md);
}

/* Badge-Pill oben links auf der Kartenkante (mobil zentriert, ohne transform – die Story bewegt y) */
.price .badge{ position:absolute; top:-14px; left:30px; display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:6px 14px;
  border-radius:var(--r-pill); background:var(--gold); color:var(--on-gold); box-shadow:var(--shadow-sm);
  font:850 11.5px/1 var(--font-body); letter-spacing:.02em; white-space:nowrap; }
.price .badge--free{ background:var(--muted); color:var(--surface); box-shadow:none; }

.price .tier{ margin-top:8px; font:800 12px/1.2 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.price .amount{ margin:10px 0 16px; color:var(--ink); font:900 var(--fs-price)/1 var(--font-display); font-stretch:var(--wide);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.price .amount small{ margin-left:2px; font:500 15px/1 var(--font-body); letter-spacing:0; color:var(--body); }
.price .desc{ margin:0 0 20px; font-size:var(--fs-card); line-height:1.55; color:var(--body); }

/* Laufzeit-Staffel (HIVE-PASS): 24 € / Jahr · 99 € / 8 Jahre · 199 € Lifetime */
.ladder{ margin:2px 0 20px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
.ladder-title{ padding:11px 14px 9px; font:800 11px/1.2 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.lrow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; min-height:44px; padding:8px 14px;
  border-top:1px solid var(--border-soft); color:var(--ink); font:700 14px/1.3 var(--font-display); font-stretch:var(--wide-mid);
  font-variant-numeric:tabular-nums; }
.lrow small{ font:500 12px/1.3 var(--font-body); color:var(--muted); }
.lrow.lhero{ background:rgba(255,196,0,.13); font-weight:800; }
.lbadge{ display:inline-block; padding:4px 9px; border-radius:var(--r-pill); background:var(--gold); color:var(--on-gold);
  font:850 10px/1 var(--font-body); letter-spacing:.04em; white-space:nowrap; }
/* Laufzeit wählbar (Feedback Jörg, Punkt 12): Zeile = <label>, natives Radio unsichtbar aber fokussierbar, eigener Punkt.
   Das Formular (.price-form, GET ?plan=…) ist display:contents → die Karte bleibt eine Flex-Spalte, Knopf unten. */
.price-form{ display:contents; }
.price-form > .btn{ margin-top:auto; }
label.lrow{ cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out); }
.lopt{ position:relative; display:inline-flex; align-items:center; gap:10px; }
.lopt input{ position:absolute; left:0; top:50%; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.ldot{ position:relative; flex:none; width:18px; height:18px; border:1.5px solid var(--border-strong); border-radius:50%;
  background:var(--surface); transition:border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out); }
.ldot::after{ content:""; position:absolute; inset:3.5px; border-radius:50%; background:var(--on-gold); transform:scale(0);
  transition:transform var(--t-hover) var(--ease-out); }
.lrow:has(input:checked){ box-shadow:inset 3px 0 0 var(--gold); }
.lrow:has(input:checked) .ldot{ border-color:var(--gold); background:var(--gold); }
.lrow:has(input:checked) .ldot::after{ transform:scale(1); }
.lrow:has(input:focus-visible){ outline:2px solid var(--gold-text); outline-offset:-3px; }
@media (hover:hover){
  label.lrow:hover .ldot{ border-color:var(--gold-text); }
  label.lrow:not(.lhero):hover{ background:rgba(255,196,0,.06); }
}
@media (prefers-reduced-motion: reduce){ .ldot, .ldot::after, label.lrow{ transition:none; } }

/* Leistungsliste: Haken und Info als SVG-Maske im Icon-Stil (Runde 6), „–“ und „∞“ bleiben typografisch;
   Alt-Text leer → Screenreader lesen nur den Text */
.feats{ display:grid; gap:10px; margin:0 0 28px; font-size:var(--fs-card); line-height:1.45; color:var(--ink);
  --m-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.8 12.6 4.6 4.6L19.2 7.4'/%3E%3C/svg%3E");
  --m-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.2M12 7.7h.01'/%3E%3C/svg%3E"); }
.feats li{ position:relative; padding-left:28px; text-wrap:pretty; }
.feats li::before{ position:absolute; left:0; top:0; width:20px; height:1.45em; text-align:center; font-weight:800; color:var(--gold-text);
  content:""; content:"" / ""; background:currentColor;
  -webkit-mask:var(--m-check) 50% 50% / 17px 17px no-repeat; mask:var(--m-check) 50% 50% / 17px 17px no-repeat; }
.feats li.no::before, .feats li.star::before{ height:auto; background:none; -webkit-mask:none; mask:none; }
.feats li.no{ color:var(--muted); }
.feats li.no::before{ color:var(--muted); content:"–"; content:"–" / ""; }
.feats li.star{ font-weight:700; }
.feats li.star::before{ font-size:1.15em; line-height:1.2; content:"∞"; content:"∞" / ""; }
.feats li.info{ color:var(--body); }
.feats li.info::before{ -webkit-mask-image:var(--m-info); mask-image:var(--m-info); }

@media (max-width:760px){
  .price .badge{ left:0; right:0; width:max-content; max-width:calc(100% - 32px); margin-inline:auto; }
}
@media (max-width:420px){
  .price{ padding:34px 22px 26px; }
}


/* ═══ S10 · FAQ ═══ */
.faq-sec{ padding-block:var(--sec-y); }
.faq-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:28px; }
.faq-head .h2-sm{ max-width:14ch; }
@media (min-width:900px){
  .faq-grid{ grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:64px; align-items:start; }
  .faq-head{ position:sticky; top:calc(var(--nav-h) + var(--finder-h) + 32px); }
}

/* Öffnen/Schließen progressiv (Chrome 131+): ohne Unterstützung natives Auf-/Zuklappen */
.faq{ interpolate-size:allow-keywords; border-bottom:1px solid var(--border); }
.faq details{ border-top:1px solid var(--border); }
.faq details::details-content{ block-size:0; overflow:hidden;
  transition:block-size var(--t-screen) var(--ease-out), content-visibility var(--t-screen) allow-discrete; }
.faq details[open]::details-content{ block-size:auto; }

.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; padding:18px 6px;
  list-style:none; cursor:pointer; color:var(--ink); -webkit-tap-highlight-color:transparent;
  font:850 var(--fs-h3)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em;
  transition:color var(--t-hover) var(--ease-out); }
.faq summary > span:first-child{ text-wrap:balance; }   /* Frage (ohne Microdata seit 03.10.2026; Produktseiten nutzen dieselbe Struktur) */
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:""; }
.faq summary:focus-visible{ outline-offset:-3px; border-radius:var(--r-sm); }   /* Matrix §3.1: Outline nach innen */

/* „+“-Kreis: zwei Linien in --gold-text, offen um 45° gedreht und mit Honig-Wash */
.plus{ position:relative; flex:none; width:32px; height:32px; border:1.5px solid var(--border-strong); border-radius:50%;
  transition:transform .25s var(--ease-out), background-color var(--t-hover) var(--ease-out), border-color var(--t-hover); }
.plus::before,.plus::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px;
  border-radius:2px; background:var(--gold-text); }
.plus::after{ transform:rotate(90deg); }
.faq details[open] > summary .plus{ transform:rotate(45deg); background:rgba(255,196,0,.16); border-color:var(--gold); }
@media (hover:hover){
  .faq summary:hover .plus{ background:rgba(255,196,0,.16); border-color:var(--gold-text); }
}
.faq summary:active .plus{ background:rgba(255,196,0,.26); }

.faq .ans{ max-width:62ch; padding:0 6px 20px; font-size:var(--fs-body); line-height:1.7; color:var(--body); }

@media (prefers-reduced-motion: reduce){
  .faq details::details-content{ transition:none; }
  .plus{ transition:none; }
}


/* ═══ S11 · CTA ═══ */
.cta{ background:var(--ground); }
.cta-mask{ position:relative; isolation:isolate; padding:clamp(72px, 12vh, 140px) var(--pad-x);
  background:linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); }
/* Weißes Radial-Licht oben links (rein dekorativ) */
.cta-mask::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 60% at 10% 0%, rgba(255,255,255,.35), transparent); }
.cta-inner{ position:relative; max-width:900px; text-align:center; }
.cta-h2{ color:var(--on-gold); font:900 var(--fs-cta)/1.02 var(--font-display); font-stretch:var(--wide); letter-spacing:-.015em; text-wrap:balance; }
.cta-p{ max-width:44ch; margin:20px auto 34px; font-size:18px; line-height:1.55; text-wrap:pretty;
  color:var(--on-gold); color:color-mix(in srgb, var(--on-gold) 78%, transparent); }
/* Das Band ist in beiden Modi gold: Button und Fokus deshalb an modusfeste Tokens binden
   (--ink/--surface kippen im Dark Mode zu Creme/Dunkel und hätten auf Gold zu wenig Kontur). */
.cta .btn-dark{ background:var(--on-gold); color:var(--on-night); box-shadow:0 14px 32px color-mix(in srgb, var(--on-gold) 22%, transparent); }
.cta .btn-dark:focus-visible{ outline-color:var(--on-gold); }
@media (hover:hover){
  .cta .btn-dark:hover{ opacity:.92; box-shadow:0 18px 40px color-mix(in srgb, var(--on-gold) 28%, transparent); }
}
@media (max-width:640px){
  .cta-p{ font-size:var(--fs-lead); }
  .cta .btn-lg{ width:100%; max-width:420px; white-space:normal; text-align:center; line-height:1.2; }
}


/* ═══ S12 · SEO-Text und Ratgeber ═══ */
.seo{ background:var(--surface-2); padding-block:var(--sec-y); }
.seo .h2-sm{ margin:0 0 26px; }
.seo p:not(.eyebrow){ margin:0 0 18px; font-size:var(--fs-long); line-height:1.75; color:var(--body); hyphens:auto; -webkit-hyphens:auto; }
.seo p.seo-p1{ margin-bottom:22px; font-size:var(--fs-lead); line-height:1.6; color:var(--ink); }
/* Wort-Entwicklung (nur Desktop-Story, seo()): GSAP tweent --k 0 → 1, Farbe mischt --muted → --ink.
   Ohne color-mix ist die Deklaration ungültig → Farbe erbt --ink vom Absatz (lesbar). Startfarbe --muted ist AA-lesbar. */
.seo-p1 .split .w{ color:color-mix(in srgb, var(--ink) calc(var(--k, 1) * 100%), var(--muted)); }

.guide-h3{ margin:clamp(40px, 5vw, 56px) 0 12px; color:var(--ink); font:850 var(--fs-h3)/1.2 var(--font-display);
  font-stretch:var(--wide-mid); letter-spacing:-.02em; text-wrap:balance; }
.seo p.guide-intro{ margin-bottom:22px; }

/* Ratgeber-Links als Pill-Raster (≥ 641 px 2 × 2, sonst eine Spalte) mit Pfeil-Wabe */
.guide-links{ display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; margin:0 0 26px; }
@media (min-width:641px){ .guide-links{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.guide-links a{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; height:100%; padding:12px 12px 12px 22px;
  border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); text-decoration:none;
  font:650 15px/1.3 var(--font-body); -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease); }
.guide-links a::after{ display:grid; place-items:center; flex:none; width:28px; height:32px; clip-path:var(--hex);
  background:var(--gold-text); color:var(--surface); font:800 14px/1 var(--font-display);
  content:"→"; content:"→" / ""; transition:transform var(--t-hover) var(--ease-out); }
@media (hover:hover){
  .guide-links a:hover{ border-color:var(--gold-text); box-shadow:var(--shadow-sm); }
  .guide-links a:hover::after{ transform:translateX(3px); }
}
.guide-links a:active{ transform:scale(.98); }
.guide-links a:focus-visible{ outline-offset:3px; border-radius:var(--r-pill); }

/* „Alle Ratgeber ansehen →“ als Textlink mit Gold-Unterstreichung */
.guide-all{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font:650 var(--fs-long)/1.3 var(--font-body);
  text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:4px;
  transition:text-decoration-thickness var(--t-hover) var(--ease-out), text-underline-offset var(--t-hover) var(--ease-out); }
.guide-all .guide-arr{ display:inline-block; white-space:pre; transition:transform var(--t-hover) var(--ease-out); }   /* pre: führendes Leerzeichen bleibt */
@media (hover:hover){
  .guide-all:hover{ text-decoration-thickness:3px; text-underline-offset:6px; }
  .guide-all:hover .guide-arr{ transform:translateX(4px); }
}
.guide-all:active{ opacity:.8; }


/* ═══ conversion · Forced Colors ═══ Systemfarben für Pseudo-Flächen, die sonst verschwinden */
@media (forced-colors: active){
  .plus::before,.plus::after{ forced-color-adjust:none; background:CanvasText; }
  .price .badge,.lbadge{ border:1px solid CanvasText; }
  .ldot{ border-color:CanvasText; }
  .lrow:has(input:checked) .ldot::after{ forced-color-adjust:none; background:Highlight; }
  .price.price--feat{ border:2px solid Highlight; }   /* D-05: (0,2,0) schlägt .card in Abschnitt 9 unabhängig von der Reihenfolge */
  .guide-links a{ border:1px solid LinkText; }
  .guide-links a::after{ forced-color-adjust:none; background:LinkText; color:Canvas; }
}


/* ═══ Icons (Runde 6) ═══ Eigenes Linien-Set statt Emojis: 24er-Raster, Linie 1,9, runde Enden, Duoton-Fläche 14 %,
   Farbe über currentColor. Bee-Momente nutzen die Bildmarke (.ico-mark), nie das Emoji. Inline-SVG im Markup. */
.ico{ display:inline-block; flex:none; width:1.15em; height:1.15em; vertical-align:-.2em; overflow:visible; stroke-width:1.9; }
.ico .ic-fill{ fill:currentColor; stroke:none; opacity:.14; }
.ico .ico-solid{ fill:currentColor; stroke:none; }
.ico-mark{ display:inline-block; flex:none; width:1.2em; height:1.2em; vertical-align:-.24em; object-fit:contain; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ico-mark{ content:url("/images/brand/bee-id-mark-white-64.png"); } }
:root[data-theme="dark"] .ico-mark{ content:url("/images/brand/bee-id-mark-white-64.png"); }
:root[data-theme="light"] .ico-mark{ content:url("/images/brand/bee-id-mark-64.png"); }
/* Orte */
.nav-fest .ico, .mnav-fest .ico{ width:1.1em; height:1.1em; }
.mnav-list .ico{ color:var(--gold-text); margin-right:.15em; }
.mnav-list a.mnav-fest .ico{ color:inherit; }
.hero-hint .ico{ width:18px; height:18px; color:var(--gold-text); }
.scan-done .check .ico{ width:30px; height:30px; stroke-width:2.8; color:var(--on-ok, #fff); }
.st-badge .ico-mark{ width:14px; height:14px; vertical-align:middle; }
.chat-status .ico, .status-pill .ico{ width:1.05em; height:1.05em; stroke-width:2.6; vertical-align:-.18em; }
.rb .skel-badge .ico-mark{ width:16px; height:16px; }
.rb .scr-3 .hx-ok .ico{ width:48%; height:auto; stroke-width:2.8; }
.rb-lane p .ico-check{ width:1em; height:1em; stroke-width:2.6; color:var(--gold-text); }
.why-ico{ display:grid; place-items:center; color:var(--on-gold); }
.why-ico .ico{ width:18px; height:18px; stroke-width:2; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .why-ico{ color:var(--gold); } }
:root[data-theme="dark"] .why-ico{ color:var(--gold); }
.price .badge .ico{ width:14px; height:14px; stroke-width:2.1; }
.f-list a .ico{ width:16px; height:16px; margin-right:.45em; color:var(--gold-text); vertical-align:-.22em; }
.f-bot .ico-mark{ width:1.15em; height:1.15em; }


/* ═══ 6 · Story-Zustände (global, §5.6) ═══
   Nur diese Startzustände stehen im CSS, alles andere setzt GSAP per from/set.
   Abgesichert durch den Fail-Safe (§5.5 d): Wird story-ready nicht gesetzt, fällt html.story weg, alles ist sichtbar. */
@media (min-width:900px) and (min-height:620px){
  html.story .device-wrap, html.story .orbit{ visibility:hidden; }   /* Hero-Einstieg */
  html.story .rb-mask{ opacity:0; }                                                      /* Maske übernimmt den Slot */
  html.story .rb-lane, html.story .rb-head{ opacity:0; }
}
html.with-loader body{ overflow:hidden; }
html.story.with-loader{ overflow:hidden; }


/* ═══ 7 · Medien-Queries (global) ═══ */
/* ≤ 640 px: Burger-Zone, Desktop-Elemente ausblenden (live) */
@media (max-width:640px){
  .hide-sm{ display:none !important; }
}
@media (min-width:641px){
  .only-sm{ display:none !important; }   /* D-09: Bibliothek für den Port, auf der Startseite ungenutzt */
}


/* ═══ 8 · prefers-reduced-motion (global) ═══
   Keine Endlosbewegung, keine Übergänge; Story ist per Gate ohnehin aus. Endzustände bleiben stehen. */
@media (prefers-reduced-motion: reduce){
  html,html:not(.story){ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important;
    transition-duration:.01ms !important; transition-delay:0s !important;
  }
  .btn:hover,.btn:active,.card-link:hover,.card-link:active{ transform:none !important; }
  .veil{ display:none !important; }
}


/* ═══ 9 · forced-colors (global) ═══ Keine Story (Gate), keine Clip-Masken, Systemfarben für Rahmen und Fokus */
@media (forced-colors: active){
  .rb-mask, .cta-mask{ clip-path:none !important; }
  .btn, .pill-form, .card{ border:1.5px solid CanvasText; }
  .btn-gold, .btn-dark, .btn-night{ forced-color-adjust:auto; }
  :focus-visible{ outline:2.5px solid Highlight; }
  .slot, .pin-title::after, .eyebrow .dot{ forced-color-adjust:none; background:CanvasText; }
  /* A11Y-05: Burger-Striche (Spans auf currentColor-Fläche) wären Canvas auf Canvas; aktive Sprache nicht nur per Fläche */
  .burger span{ forced-color-adjust:none; background:CanvasText; }
  .burger{ border:1px solid CanvasText; }
  .mnav-lang a.is-active{ border-width:3px; text-decoration:underline; text-underline-offset:3px; }
  .loader, .veil{ display:none !important; }
}


/* ═══ 10 · print ═══ Nur Inhalt: keine fixierten Leisten, keine Masken, keine Schatten */
@media print{
  html, body{ background:Canvas; color:CanvasText; }
  .nav, #nav, .mnav, #mobileNav, #finderBar, .finder-bar, #cookie-banner, #cookie-overlay, #cookie-revoke-btn,
  .loader, #loader, .veil, .hero-mesh, #mesh, .f-mark{ display:none !important; }
  .rb-mask, .cta-mask{ clip-path:none !important; }
  *, *::before, *::after{ box-shadow:none !important; text-shadow:none !important; animation:none !important; transition:none !important; }
  .auftakt, .anh, .rb, .rb-title, .rb-mask{ height:auto !important; }
  .anh-canvas, .anh-glow, .anh-ring, .anh-shadow{ display:none !important; }
  .anh-fallback{ opacity:1 !important; visibility:visible !important; }
  .trailer{ background:none !important; color:inherit; padding-block:24px; }
  .trailer-frame{ display:none !important; }   /* Film nicht druckbar: Kopf + Beschreibung (sr-only) bleiben */
  .trailer .h2, .trailer .eyebrow, .trailer-sub{ color:inherit !important; }
  a[href^="https://"]:not(.btn)::after{ content:" (" attr(href) ")"; font-size:.8em; color:GrayText; }
  .guide-links a::after{ content:none !important; }   /* A11Y-12: Pfeil-Wabe ist zu klein für die URL */
  /* A11Y-12: GSAP-Inline-Zustände (Abflug, noch nicht ausgelöste Einblendungen) dürfen nichts vom Papier nehmen.
     transform nur bei den per y/x bewegten Elementen – .rb-object braucht seine Grund-Transforms. */
  /* C-2 (Runde 2): S04 animiert .trust-list li (mobil: y/autoAlpha) und .trust-list .ic (Desktop: scale/rotation/autoAlpha). */
  .hero-copy, .trust-list li, .trust-list .ic, .rb-mask, .rb-head, .rb-lane, .how-row, .why-copy > *, .faq details, .seo-col > p,
  .guide-h3, .guide-links li, .guide-all, .f-brand-col, .f-col,
  .why-head > *, .how-head > *, .trailer-head > *{ opacity:1 !important; visibility:visible !important; }   /* A-4: Köpfe aus whHead() */
  .hero-copy, .trust-list li, .trust-list .ic, .rb-head, .rb-lane, .how-row, .why-copy > *, .faq details, .seo-col > p, .guide-h3,
  .guide-links li, .guide-all, .f-brand-col, .f-col,
  .why-head > *, .how-head > *, .trailer-head > *{ transform:none !important; translate:none !important; }
  /* Breites Papier (Story-Query ≥ 900 px): Zeichen nicht in --ghost, Hot-Linie im Endzustand */
  .trust-txt .split .c{ color:inherit !important; }
  .trust-txt{ background-size:100% .12em !important; }
  h2, h3{ break-after:avoid; }
  .card, .price, details{ break-inside:avoid; }
}