/* ============================================================
   iPii.TV Produktseiten — geteiltes CSS (mobile/web/tv).
   Mobile-first, stufenlos responsive (clamp/svh/container-queries).
   Apple-Stil: sticky 3D-Hero + klassische Scroll-Sektionen + CSS-Mockup-Rahmen.
   Design-Tokens (--mark/--cta/--x*/--fs-*/etc.) kommen jetzt aus dem kanonischen
   css/tokens.css (vorher hier lokal dupliziert — siehe Kommentar dort).
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* ---------- Scroll-Snap (sanft magnetisch) ----------
   proximity statt mandatory: zieht nur, wenn der Scroll nahe an einer Sektionsgrenze zum
   Stehen kommt — kein hartes Einrasten, das mitten im Lesen/in einer Pin-Sektion stört.
   Snap-Targets = Top-Level-Sektionen (.hero/.section/.media-pin/.pcta), NICHT deren Kinder
   (.hero-pin/.pin-inner bleiben unberührt, ihr eigener position:sticky-Effekt läuft normal
   durch). scroll-snap-stop:always auf .hero verhindert, dass man beim schnellen Scrollen
   über den Einstieg hinwegspringt. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-snap-type:y proximity}
  .hero,.section,.media-pin,.pcta{scroll-snap-align:start}
  .hero{scroll-snap-stop:always}
}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  /* Fixierter Tiefen-Gradient (Space-Black-Ebenen) statt eines toten Canvas-Tons →
     Sektionen mit Tint mischen sich weich ein, keine harten Kanten, kein JS. */
  background:linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 28%,var(--bg-2) 68%,var(--bg-0) 100%) fixed;
  background-color:var(--bg-1);
  -webkit-font-smoothing:antialiased;letter-spacing:-0.011em;overflow-x:hidden}
::selection{background:var(--cta);color:var(--white)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
canvas{display:block}

/* ---------- Topbar ---------- */
.ptop{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:max(var(--x3),env(safe-area-inset-top)) clamp(16px,5vw,40px) var(--x3);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent}
body.scrolled .ptop{background:linear-gradient(180deg,rgba(8,7,7,.78),rgba(8,7,7,.3));backdrop-filter:blur(14px);border-bottom-color:var(--line-2)}
.pback{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink-dim);transition:color .25s var(--ease);
  padding:11px 6px;margin:-11px -6px}  /* Touch-Target ≥44px */
.pback:hover{color:var(--ink)}
.pback .logo{height:22px}
.pback .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.ptop .cta{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 var(--x3);border-radius:var(--r-pill);
  background:var(--cta);color:var(--white);font-size:13px;font-weight:600;box-shadow:0 6px 22px -8px rgba(138,29,29,.8);
  transition:transform .35s var(--ease-out),background .25s}
.ptop .cta:hover{background:var(--cta-hover);transform:translateY(-2px) scale(1.02)}
.ptop .cta .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
/* P2-Fix (Multi-Agent-Live-Audit 2026-07-01): tv/web/mobile.html hatten im Header nur
   "TV starten", keinen "Einloggen"-Zugang — Nutzer, die per Deep-Link direkt auf einer
   Unterseite landen, mussten erst zur Hub-Seite. Ghost-Login-Link ergänzt, gruppiert mit
   dem CTA in .ptop-actions (justify-content:space-between des Headers bleibt: Zurück-Link
   links, Actions-Gruppe rechts). */
.ptop-actions{display:flex;align-items:center;gap:10px}
.ptop-login{display:inline-flex;align-items:center;height:44px;padding:0 var(--x3);border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;
  transition:border-color .25s,background .25s}
.ptop-login:hover{border-color:rgba(253,243,243,.4);background:rgba(253,243,243,.06)}
@media(max-width:480px){.ptop-login{display:none}}

/* ---------- Hero (sticky 3D) ---------- */
.hero{position:relative}
.hero-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
/* Garantierter Rand-Auslauf über dem gesamten Hero (Video + Backdrop): oben & unten dunkel,
   Mitte transparent → bei JEDER Fenstergröße (auch extrem flach/breit) läuft der Hero an
   allen Kanten ins Schwarz aus, nie eine harte helle Kante. z-index über Video/Backdrop, unter Copy. */
.hero-pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(4,3,3,.92) 0%, rgba(4,3,3,.32) 14%, transparent 32%, transparent 70%, rgba(4,3,3,.5) 90%, rgba(4,3,3,.95) 100%),
             radial-gradient(140% 120% at 50% 50%, transparent 60%, rgba(4,3,3,.55) 100%)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
/* Hero als Schwebe-Video (Higgsfield): VOLLSTÄNDIG sichtbar (contain, kein Crop), unten
   verankert; das Video ist selbst dunkel → fügt sich nahtlos in den Hero-Verlauf. Die Copy
   sitzt OBEN, das Gerät STRIKT in der unteren Bühnen-Hälfte (Apple-Anordnung: klare Trennung
   Text-Zone / Geräte-Zone, kein Überlappen). object-position weit unten + leichte Verkleinerung
   per scale() drückt das Gerät in die untere Hälfte, sodass es nie in die Headline ragt. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 78%;z-index:1;transform:scale(.9);transform-origin:center 82%}
/* geräte-spezifischer Hero-Feinschliff (Body-Klasse aus buildPage):
   TV/Laptop (16:9, breit, flach) dürfen größer + etwas höher sitzen — sie sind niedrig und
   kollidieren kaum mit der Copy. iPhone (hoch, schmal) muss tiefer + kleiner = nie in den Text. */
body.page-tv .hero-video,
body.page-browser .hero-video{object-position:center 74%;transform:scale(.96);transform-origin:center 80%}
body.page-phone .hero-video{object-position:center 88%;transform:scale(.8);transform-origin:center 90%}
/* Buehnenlicht: die Higgsfield-Heros auf tv/mobile sind sehr dunkel gegradet — das Geraet
   (Produkt!) war im Hero kaum erkennbar. Dezente Aufhellung per Filter statt Asset-Neubau
   (reversibel, Material bleibt unangetastet). web/laptop ist hell genug — kein Filter. */
body.page-tv .hero-video{filter:brightness(1.16) saturate(1.05)}
body.page-phone .hero-video{filter:brightness(1.18) saturate(1.06)}
@media (min-width:861px){
  /* Desktop: mehr vertikaler Raum → Geräte dürfen wieder etwas präsenter, Copy bleibt klar oben */
  .hero-video{object-position:center 74%;transform:scale(.94)}
  body.page-tv .hero-video, body.page-browser .hero-video{object-position:center 70%;transform:scale(1)}
  body.page-phone .hero-video{object-position:center 82%;transform:scale(.86);transform-origin:center 88%}
}
/* HÖHENADAPTIV (Wurzel des Rest-Überlappens): auf FLACHEN Fenstern (kurze Höhe) konkurrieren
   Copy oben und Gerät um denselben vertikalen Raum → Gerät zusätzlich kleiner + tiefer drücken,
   damit die Headline IMMER frei steht. Greift unabhängig von der Breite (auch Desktop-flach). */
@media (max-height:820px){
  .hero-video{object-position:center 86%;transform:scale(.8);transform-origin:center 92%}
  body.page-tv .hero-video, body.page-browser .hero-video{object-position:center 84%;transform:scale(.86);transform-origin:center 90%}
  body.page-phone .hero-video{object-position:center 94%;transform:scale(.7);transform-origin:center 96%}
}
/* SMARTPHONE HOCHFORMAT (schmal + hoch): viel vertikaler Raum unter der Headline →
   Gerät PRÄSENTER zeigen (war bei 390x844 zu klein/tief, nur Andeutung unten). Phone-Video
   ist 9:16 → füllt das Portrait fast formatfüllend; TV/Laptop (16:9) mittiger + größer.
   Headline bleibt oben frei (Copy sitzt per top:Topbar-Abstand, Gerät startet darunter). */
@media (max-width:560px) and (min-height:700px){
  /* P1-Fix (Audit mobile-0): iPhone-Hero stand zu klein/dunkel in der Vignette, Display kaum
     erkennbar — größer + höher im Frame zeigen, mehr Bildfläche fürs Produkt statt Schatten. */
  /* Portrait-Fix (Audit mobile-Hero): contain liess das 16:9-Video als Querstreifen
     mit harten Kanten + toter Flaeche stehen — cover fuellt den Hero, das iPhone
     sitzt mittig genug (~37-60% Bildbreite) fuer den schmalen Ausschnitt. */
  body.page-phone .hero-video{object-fit:cover;object-position:center 62%;transform:none}
  body.page-tv .hero-video,
  body.page-browser .hero-video{object-position:center 60%;transform:scale(1.04);transform-origin:center 60%}
}
@media (max-height:680px){
  /* sehr flach (Landscape-Handy): Gerät nur noch als Andeutung unten, Copy dominiert */
  .hero-video{object-position:center 92%;transform:scale(.72);transform-origin:center 96%}
  body.page-tv .hero-video, body.page-browser .hero-video{object-position:center 90%;transform:scale(.78)}
  body.page-phone .hero-video{object-position:center 98%;transform:scale(.62);transform-origin:center 99%}
  .hero-copy .sub{margin-top:var(--x2);font-size:14px;max-width:38ch}
}
.hero-bg{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 38%, #160f0e 0%, #0a0807 50%, #040303 100%)}
/* Formatfüllender Studio-Backdrop hinter dem Hero-Video (cover) → kein schwarzer Balken,
   das contain-Gerät schwebt nahtlos. Default-Bild = Studio-Backdrop; dunkel + Vignette. */
.hero-backdrop{position:absolute;inset:0;z-index:0;
  background:#060505 url('../assets/hub/studio-backdrop.png') center center/cover no-repeat;opacity:.5}
/* Rand-Auslauf: HG läuft zu ALLEN Rändern garantiert ins Schwarz → bei jeder Fenstergröße
   wird per cover nur der dunkle Saum gekappt, nie sichtbarer Inhalt beschnitten. */
.hero-backdrop::after{content:"";position:absolute;inset:0;
  background:radial-gradient(82% 70% at 50% 42%, transparent 28%, rgba(5,4,4,.55) 72%, rgba(3,2,2,.92) 100%)}
/* Basis = Handy: Copy mit sicherem Abstand UNTER der Topbar; ab Tablet höher/luftiger (mobile-first) */
.hero-copy{position:absolute;top:calc(74px + env(safe-area-inset-top));left:0;right:0;z-index:2;text-align:center;padding:0 var(--x3);pointer-events:none}
@media(min-width:561px){.hero-copy{top:9svh;padding:0 var(--x4)}}
@media(min-width:861px){.hero-copy{top:11svh}}
/* Scrim hinter der Hero-Copy → Headline + Sub bleiben über jedem Geräte-Display lesbar.
   Breiter + deckender als zuvor (vorher zu schwach → Sub kollidierte sichtbar mit dem Mockup):
   ein nach unten auslaufender Verlauf, der die GANZE Textbox abdeckt und sanft ins Transparente
   übergeht, bevor das Gerät beginnt. */
.hero-copy::before{content:"";position:absolute;inset:-40% -18% -64% -18%;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,5,5,.92) 0%, rgba(6,5,5,.82) 42%, rgba(6,5,5,.5) 72%, transparent 100%),
    radial-gradient(80% 64% at 50% 40%, rgba(6,5,5,.7), transparent 80%)}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:var(--x3)}
.hero-copy .eyebrow .ln{width:24px;height:1px;background:var(--ink-red)}
.hero-copy h1{font-size:var(--fs-hero);line-height:1.02;font-weight:700;letter-spacing:-0.07em;
  text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.62)}
.hero-copy h1 em{font-style:normal;color:var(--ink-red)}
.hero-copy .sub{margin-top:var(--x3);font-size:clamp(16px,1.9vw,21px);color:var(--ink-dim);
  max-width:44ch;margin-left:auto;margin-right:auto;line-height:1.5;text-wrap:pretty;letter-spacing:0}
.hero-cue{position:absolute;left:50%;bottom:calc(var(--x5) + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-faint);
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .5s var(--ease)}
.hero-cue .mouse{width:20px;height:32px;border:1.5px solid var(--ink-faint);border-radius:var(--r-pill);position:relative}
.hero-cue .mouse::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;
  background:var(--ink-dim);transform:translateX(-50%);animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}
body.scrolled .hero-cue{opacity:0}
/* P1-Fix (Audit mobile-landscape): bei <=680px Höhe reicht die Hero-Copy bis in die fest
   positionierte .hero-cue hinein ("SCROLLEN" + Maus-Icon überlappte die Subline). Cue ist
   reine Geste, kein essentielles UI — bei wenig Platz weg statt Kollision. MUSS nach der
   .hero-cue-Basisregel stehen (gleiche Spezifität, sonst gewinnt die spätere Basisregel). */
@media (max-height:680px){.hero-cue{display:none}}

/* ---------- Content-Sektionen ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,7vw,120px) var(--gut)}
@media(max-width:640px){.section{padding-block:clamp(48px,11vw,72px)}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:var(--x3)}
.eyebrow .ln{width:24px;height:1px;background:var(--mark)}
h2.sec{font-size:var(--fs-h2);line-height:1.08;font-weight:700;letter-spacing:-0.035em;max-width:15ch;text-wrap:balance}
h2.sec em{font-style:normal;color:var(--ink-red)}
.sec p{margin-top:var(--x3);font-size:clamp(16px,1.5vw,19px);color:var(--ink-dim);line-height:1.62;max-width:50ch;text-wrap:pretty;letter-spacing:0}

/* Feature: Bild (Mockup) + Text, mobil gestapelt, ab Breite nebeneinander */
.feature{display:grid;gap:clamp(28px,5vw,72px);align-items:center;
  grid-template-columns:1fr}
.feature .copy{order:2}.feature .visual{order:1}
@media(min-width:860px){
  .feature{grid-template-columns:1fr 1fr}
  .feature.right .copy{order:1}.feature.right .visual{order:2}
  .feature.left .copy{order:2}.feature.left .visual{order:1}
}
.feature .feat-list{margin-top:var(--x4);display:flex;flex-direction:column;gap:var(--x3)}
.feat{display:flex;gap:var(--x2);align-items:flex-start}
.feat .ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-red)}
.feat .ic svg{width:18px;height:18px}
.feat h4{font-size:15px;font-weight:700}.feat small{display:block;margin-top:2px;font-size:13px;color:var(--ink-dim);font-weight:400;line-height:1.45}

/* ---------- CSS-Mockup-Rahmen ---------- */
/* Phone-Frame: Notch via Pseudo, 19.5:9 */
.frame-phone{position:relative;width:clamp(220px,62vw,300px);margin:0 auto;aspect-ratio:1080/2340;
  border-radius:38px;padding:10px;background:linear-gradient(155deg,#26242a,#0c0b0d);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08)}
.frame-phone .scr{width:100%;height:100%;border-radius:28px;overflow:hidden;
  background:linear-gradient(165deg,#141218 0%,#0b0a0e 55%,#100d12 100%)}
.frame-phone .scr img{width:100%;height:100%;object-fit:cover}
.frame-phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:34%;height:22px;background:#08070a;border-radius:0 0 14px 14px;z-index:2}

/* Browser-Frame: Chrome-Leiste + URL-Pille, 16:10 */
.frame-browser{position:relative;width:100%;max-width:640px;margin:0 auto;border-radius:14px;overflow:hidden;
  background:#15131a;border:1px solid var(--line);box-shadow:0 40px 90px -34px rgba(0,0,0,.85)}
.frame-browser .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#1b1920;border-bottom:1px solid var(--line)}
.frame-browser .bar i{width:11px;height:11px;border-radius:50%;background:#3a3640;display:inline-block}
.frame-browser .bar i:nth-child(1){background:#e0625b}.frame-browser .bar i:nth-child(2){background:#e3b04b}.frame-browser .bar i:nth-child(3){background:#57b65a}
.frame-browser .url{margin-left:10px;flex:1;height:24px;border-radius:var(--r-pill);background:#0e0d12;border:1px solid var(--line-2);
  display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.frame-browser .scr{aspect-ratio:16/10;
  background:linear-gradient(165deg,#141218 0%,#0b0a0e 55%,#100d12 100%)}
.frame-browser .scr img{width:100%;height:100%;object-fit:cover}

/* TV-Frame: schmale Bezel + Standfuß, 16:9 */
.frame-tv{position:relative;width:100%;max-width:680px;margin:0 auto}
.frame-tv .panel{border-radius:12px;padding:8px;background:linear-gradient(160deg,#1a1818,#0a0909);
  box-shadow:0 40px 90px -32px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.frame-tv .scr{aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:linear-gradient(165deg,#141218 0%,#0b0a0e 55%,#100d12 100%)}
.frame-tv .scr img{width:100%;height:100%;object-fit:cover}
.frame-tv .stand{width:22%;height:14px;margin:0 auto;background:linear-gradient(180deg,#15110f,#0a0807);
  border-radius:0 0 8px 8px}
.frame-tv .foot{width:42%;height:6px;margin:0 auto;background:#0a0807;border-radius:var(--r-pill)}

/* ---------- Bento-Grid ---------- */
.bento{display:grid;gap:clamp(20px,3vw,24px);grid-template-columns:repeat(auto-fit,minmax(clamp(150px,42vw,260px),1fr))}
.cell{border:1px solid var(--line);border-radius:var(--r-3x);padding:clamp(20px,3vw,32px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  transition:transform .4s var(--ease-out),border-color .3s var(--ease)}
.cell:hover{transform:translateY(-4px);border-color:rgba(253,243,243,.2)}
.cell.wide{grid-column:span 2}@media(max-width:560px){.cell.wide{grid-column:span 1}}
.cell .v{font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;
  font-family:var(--mono);line-height:1}
.cell .v small{font-size:.42em;font-weight:600;color:var(--ink-dim);margin-left:3px;font-family:'Inter'}
.cell .k{margin-top:10px;font-size:13.5px;color:var(--ink-dim);font-weight:500;line-height:1.4}
.cell h3{font-size:18px;font-weight:700;letter-spacing:-0.02em}.cell p{margin-top:8px;font-size:13.5px;color:var(--ink-dim);line-height:1.5}

/* ---------- CTA + Footer ---------- */
.pcta{text-align:center;padding:clamp(96px,10vw,160px) var(--x4)}
.pcta .big-logo{height:clamp(40px,8vw,60px);margin:0 auto var(--x5);display:flex;justify-content:center}
.pcta .big-logo svg{height:100%;width:auto}
.pcta h2{font-size:var(--fs-cta);font-weight:700;letter-spacing:-0.05em;line-height:1.04;text-wrap:balance}
.pcta h2 em{font-style:normal;color:var(--ink-red)}
.pcta .row{display:flex;gap:var(--x2);justify-content:center;margin-top:var(--x5);flex-wrap:wrap}
/* P0-Fix (Audit web-4): Logo/Headline/Buttons gestaffelt statt als ein Block einblenden,
   damit nie zwei Halbtransparenz-Zustände gleichzeitig mit der vorherigen Bento-Reihe
   im Frame stehen (Auditbefund: Footer-Headline überlappte sichtbar Button+Logo). */
.pcta .big-logo,.pcta h2,.pcta .row{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-cine),transform .8s var(--ease-cine)}
.pcta.is-revealed .big-logo{opacity:1;transform:none}
.pcta.is-revealed h2{opacity:1;transform:none;transition-delay:.1s}
.pcta.is-revealed .row{opacity:1;transform:none;transition-delay:.2s}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
  .pcta .big-logo,.pcta h2,.pcta .row{opacity:1;transform:none;animation:pctaIn linear both;animation-timeline:view()}
  /* entry-basierte Ranges (auf das jeweilige Kind bezogen): cover-Endpunkte waren fuer die
     letzte Sektion der Seite nie erreichbar (Dokument endet) -> Logo/H2/Buttons blieben
     DAUERHAFT halbtransparent. entry 100% = Kind vollstaendig eingetreten, am Seitenende
     sicher erreichbar (Footer + Padding liegen dahinter). Staffelung entsteht raeumlich. */
  .pcta .big-logo{animation-range:entry 0% entry 85%}
  .pcta h2{animation-range:entry 0% entry 95%}
  .pcta .row{animation-range:entry 0% entry 100%}
  @keyframes pctaIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}}
@media (prefers-reduced-motion: reduce){.pcta .big-logo,.pcta h2,.pcta .row{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 var(--x4);border-radius:var(--r-pill);
  font-size:14.5px;font-weight:600;transition:transform .35s var(--ease-out),background .25s,border-color .25s}
.btn-red{background:var(--cta);color:var(--white);box-shadow:0 8px 30px -8px rgba(138,29,29,.9)}
.btn-red:hover{background:var(--cta-hover);transform:translateY(-2px) scale(1.015)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}.btn-ghost:hover{border-color:rgba(253,243,243,.4);transform:translateY(-2px)}
.btn .dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.pfoot{border-top:1px solid var(--line);max-width:var(--maxw);margin:0 auto;
  padding:var(--x5) var(--gut) calc(var(--x8) + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;gap:var(--x3);flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);letter-spacing:.04em}
.pfoot .legal{display:flex;gap:var(--x3);flex-wrap:wrap}.pfoot a:hover{color:var(--ink-dim)}
/* P1-Fix (Multi-Agent-Live-Audit 2026-07-01): "Cookie-Einstellungen"-Reopen — datenschutz.html
   verspricht einen Weg, die Auswahl zu aendern; window.ipiiReopenCookieBanner() aus
   cookie-consent.js macht ihn real. Button optisch wie die Legal-Links daneben. */
.pfoot-cookies{font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer}
.pfoot-cookies:hover{color:var(--ink-dim)}

/* ---------- Scroll-Reveal (view-timeline + IO-Fallback) ---------- */
.reveal{opacity:0;transform:translateY(30px);filter:blur(6px)}
.reveal.is-revealed{opacity:1;transform:none;filter:none;
  transition:opacity .9s var(--ease-cine),transform 1.1s var(--ease-cine),filter .9s var(--ease-cine)}
.reveal > *{--si:0}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* cover 35% statt 50%: Inhalt ist lesbar, sobald das Auge ankommt (Apple-Verhalten),
       und der Endpunkt bleibt auch fuer die letzte Sektion der Seite erreichbar
       (max. erreichbarer cover-Fortschritt am Dokumentende liegt bei ~55-65%). */
    .reveal{opacity:1;transform:none;filter:none;
      animation:revealIn linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
    /* Cine-Easing als Stützpunkt IN der Keyframe-Kurve (timeline selbst bleibt linear) */
    @keyframes revealIn{from{opacity:0;transform:translateY(40px);filter:blur(8px)}
      60%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:none}}
  }
}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;filter:none}.hero-cue{display:none}}

/* ---------- Loader ---------- */
#ploader{position:fixed;inset:0;z-index:60;background:var(--black);display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:var(--x4);transition:opacity .8s var(--ease),visibility .8s}
#ploader.gone{opacity:0;visibility:hidden}
#ploader .l-logo{height:42px;animation:bootpulse 1.6s var(--ease) infinite}
@keyframes bootpulse{0%,100%{opacity:1}50%{opacity:.5;filter:drop-shadow(0 0 14px rgba(179,54,47,.6))}}
#ploader .l-txt{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--ink-faint)}

/* ---------- Sticky-CTA (blendet nach dem Hero ein) ----------
   Lesbarkeits-Schutz: ein weicher Blur/Scrim-Sockel hinter der Pille hält Content,
   der darunter vorbeiscrollt, immer abgesetzt und lesbar (kein direktes Überlappen/
   Verschmelzen mit Fließtext darunter). */
.sticky-cta-wrap{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;
  padding-bottom:calc(var(--x4) + env(safe-area-inset-bottom));padding-top:34px;
  pointer-events:none;opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out)}
.sticky-cta-wrap::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(5,4,4,.55) 38%,rgba(5,4,4,.86) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%);
          mask-image:linear-gradient(180deg,transparent,#000 32%)}
body.past-hero .sticky-cta-wrap{opacity:1;transform:none}
/* Am Seitenende (finale CTA-Sektion sichtbar) verschwindet die Pille: dort stehen die
   grossen CTAs bereits — die schwebende Kopie verdeckte sonst Buttons + Footer-Links.
   Steht NACH der past-hero-Regel (gleiche Spezifitaet, spaeter gewinnt). */
body.at-foot .sticky-cta-wrap{opacity:0;transform:translateY(20px)}
body.at-foot .sticky-cta{pointer-events:none}
.sticky-cta{position:relative;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
  height:48px;padding:0 var(--x5);border-radius:var(--r-pill);
  background:var(--cta);color:var(--white);font-size:14.5px;font-weight:600;
  box-shadow:0 14px 40px -10px rgba(138,29,29,.95);transition:background .25s,transform .25s var(--ease)}
.sticky-cta .dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.sticky-cta:hover{background:var(--cta-hover);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){.sticky-cta-wrap{transition:opacity .3s}}

/* ---------- Mockup 3D-Hereinschwenk + Parallax (Apple-Gefühl) ----------
   Das Geräte-Mockup schwenkt perspektivisch herein (rotateY) und gleitet sanft durch.
   Container bekommt perspective; das Mockup ist das transformierte Kind. */
.feature .visual{perspective:1400px;transform-style:preserve-3d}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Reinschwenk beim Eintritt: aus leicht gedrehter/tieferer Lage in die Frontale */
    .feature.left  .visual > *{animation:tiltInL linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    .feature.right .visual > *{animation:tiltInR linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    @keyframes tiltInL{from{opacity:0;transform:perspective(1400px) rotateY(16deg) rotateX(5deg) translateX(-40px) scale(.93)}
                       to{opacity:1;transform:perspective(1400px) rotateY(0) rotateX(0) translateX(0) scale(1)}}
    @keyframes tiltInR{from{opacity:0;transform:perspective(1400px) rotateY(-16deg) rotateX(5deg) translateX(40px) scale(.93)}
                       to{opacity:1;transform:perspective(1400px) rotateY(0) rotateX(0) translateX(0) scale(1)}}
    /* danach sanfter Durchzug-Parallax über die ganze Sichtbarkeit */
    .feature .visual{animation:floatThrough linear both;animation-timeline:view();animation-range:entry 38% exit 100%}
    @keyframes floatThrough{from{transform:translateY(36px)}to{transform:translateY(-36px)}}
  }
}
/* IO-Fallback (kein view-timeline): Reinschwenk beim is-revealed */
@supports not (animation-timeline: view()){
  .feature .visual > *{opacity:0;transform:rotateY(14deg) translateY(24px) scale(.94);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out)}
  .feature.right .visual > *{transform:rotateY(-14deg) translateY(24px) scale(.94)}
  .feature.is-revealed .visual > *{opacity:1;transform:none}
}
/* HOCHFORMAT-FIX (Smartphone Portrait ≤560px): der 3D-Reinschwenk (rotateY 16° + translateX 40px)
   ragte bei schmaler Breite seitlich aus dem Viewport → von body{overflow-x:hidden} abgeschnitten
   (Mockup-Ecke weg, left -23px/right +23px bei 390). Fix: Tilt-Amplitude + X-Versatz stark
   reduzieren (dezenter, randsicher) und die Visual-Spalte clippen, statt den Seiteninhalt. */
@media (max-width:560px){
  .feature .visual{overflow:visible}
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      @keyframes tiltInL{from{opacity:0;transform:perspective(1400px) rotateY(7deg) rotateX(3deg) translateX(-12px) scale(.95)}
                         to{opacity:1;transform:perspective(1400px) rotateY(0) rotateX(0) translateX(0) scale(1)}}
      @keyframes tiltInR{from{opacity:0;transform:perspective(1400px) rotateY(-7deg) rotateX(3deg) translateX(12px) scale(.95)}
                         to{opacity:1;transform:perspective(1400px) rotateY(0) rotateX(0) translateX(0) scale(1)}}
    }
  }
  @supports not (animation-timeline: view()){
    .feature .visual > *{transform:rotateY(7deg) translateY(20px) scale(.96)}
    .feature.right .visual > *{transform:rotateY(-7deg) translateY(20px) scale(.96)}
  }
}

/* ---------- Interaktiver 3D-Viewer „Dreh es selbst" ---------- */
.viewer3d{text-align:center}
.viewer3d .head{max-width:var(--maxw);margin:0 auto var(--x5)}
/* h2.sec hat global max-width:15ch — im zentrierten Viewer-Kopf mittig halten */
.viewer3d .head h2.sec{margin-inline:auto}
.viewer-stage{position:relative;width:min(92vw,720px);height:min(70svh,640px);margin:0 auto;
  border-radius:var(--r-3x);overflow:hidden;
  background:#060505 url('../assets/hub/studio-backdrop.png') center/cover no-repeat;
  box-shadow:inset 0 0 120px 20px rgba(3,2,2,.8), 0 30px 80px -30px rgba(0,0,0,.9)}
.viewer-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 44%, transparent 35%, rgba(4,3,3,.45) 78%, rgba(2,1,1,.8) 100%)}
#viewer-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;z-index:1}
#viewer-canvas:active{cursor:grabbing}
.viewer-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;display:inline-flex;
  align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-faint);
  padding:7px 14px;border-radius:var(--r-pill);background:rgba(10,9,9,.5);backdrop-filter:blur(8px);
  border:1px solid var(--line);pointer-events:none}
.viewer-hint svg{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){.viewer-hint{display:none}}

/* ---------- Media-Bleed: cineastischer Reveal (Scale+Blur) + Durchzug-Parallax in EINER Animation ----------
   FIX (Apple-Welle): vorher überschrieb das spätere macroPush (unten) diese bleedIn-Regel komplett
   (gleiche Property .bg/animation) → Blur-Reveal war tot. Jetzt EINE kombinierte Keyframe-Spur:
   blur+scale-Reveal aus der Tiefe (Eintritt, cine-eased) UND sanfter Scale-Durchzug bis Exit. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .media-bleed .bg{animation:bleedThrough linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes bleedThrough{
      0%{opacity:.3;transform:scale(1.12);filter:blur(10px)}
      28%{opacity:1;transform:scale(1.05);filter:blur(0)}   /* Reveal abgeschlossen ~ cover 45% */
      100%{opacity:1;transform:scale(1.0);filter:blur(0)}    /* langsamer Durchzug bis Exit */
    }
  }
}

/* View-Transition (Hub↔Seite) */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.5s}
}

/* ============================================================
   APPLE-NIVEAU-AUSBAU (Workflow-Bauplan): Media-Bleed Vollbild-Video +
   Snap-Galerie. Video-Slots: poster jetzt, Higgsfield-mp4 später per data-src.
   ============================================================ */
/* ===== MEDIA-BLEED — Full-bleed Video/Bild + Text-Overlay ===== */
.media-bleed{position:relative;width:100%;min-height:88svh;display:grid;align-items:end;
  overflow:clip;background:var(--black)}
@media(min-width:860px){.media-bleed{min-height:100svh;align-items:center}}
.media-bleed .bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.media-bleed .bg video,.media-bleed .bg img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.media-bleed::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 60%,transparent 32%,rgba(7,6,5,.55) 78%,rgba(7,6,5,.92) 100%)}
.media-bleed .copy{position:relative;z-index:2;padding:clamp(28px,7vw,80px);max-width:min(560px,92vw)}
/* Lesbarkeits-Scrim direkt hinter der Copy → Text bleibt auch über hellen Video-Zonen lesbar
   (löst tv-3 „Text über hellster Welle"); macht jeden Frame komponiert statt „totem" Dunkelraum. */
.media-bleed .copy::before{content:"";position:absolute;inset:-8% -12% -12% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 24% 50%, rgba(6,5,5,.82), rgba(6,5,5,.5) 46%, transparent 78%)}
@media(min-width:860px){.media-bleed .copy{margin-right:auto}}
.media-bleed h2{font-size:clamp(38px,8vw,80px);line-height:1.02;font-weight:700;
  letter-spacing:-.045em;margin-top:var(--x2);text-wrap:balance}
.media-bleed h2 em{font-style:normal;color:var(--ink-red)}
.media-bleed .sub{margin-top:var(--x3);font-size:clamp(16px,1.8vw,20px);
  color:var(--ink-dim);line-height:1.55;max-width:46ch;text-wrap:pretty;letter-spacing:0}
.vslot{width:100%;height:100%;object-fit:cover;display:block}

/* ===== MEDIA-PIN — Apple-Scrollytelling: Media bleibt geheftet, Caption-Beats wechseln =====
   Äußerer langer Wrapper gibt den Scroll-Weg, INNERER Wrapper ist sticky (NICHT .bg) — so hat
   das Pin echten Scroll-Weg. Beats faden über view()-Timeline nacheinander ein. */
.media-pin{position:relative;width:100%;background:var(--black)}
.media-pin .pin-inner{position:sticky;top:0;height:100svh;overflow:clip;display:grid;align-items:center;
  padding-top:clamp(64px,10vh,120px)}   /* Beats unter der Topbar halten, vertikal mittig-tief */
.media-pin .bg{position:absolute;inset:0;z-index:0}
.media-pin .bg video,.media-pin .bg img{width:100%;height:100%;object-fit:cover;display:block}
.media-pin::after,.media-pin .pin-inner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Zusaetzlicher Links-Scrim: die Caption-Spalte darf nie mit eingebranntem
     Video-Text kollidieren (Audit tv-Desktop: Eyebrow vs. "App List") */
  background:linear-gradient(90deg,rgba(7,6,5,.78) 0%,rgba(7,6,5,.42) 38%,transparent 62%),
             radial-gradient(120% 90% at 50% 58%,transparent 30%,rgba(7,6,5,.5) 76%,rgba(7,6,5,.92) 100%)}
@media(max-width:859px){
  /* Mobile: Beats liegen mittig-tief ueber hellen Video-Partien — Bottom-Up-Scrim
     nur auf der sticky pin-inner-Ebene + sanfter Text-Schatten (Audit mobile-Material) */
  .media-pin .pin-inner::after{
    background:linear-gradient(to top,rgba(7,6,5,.94) 0%,rgba(7,6,5,.66) 30%,rgba(7,6,5,.35) 55%,transparent 80%),
               radial-gradient(120% 90% at 50% 58%,transparent 30%,rgba(7,6,5,.5) 76%,rgba(7,6,5,.92) 100%)}
  .media-pin .beat h2,.media-pin .beat .sub,.media-pin .beat .eyebrow{
    text-shadow:0 1px 2px rgba(7,6,5,.55),0 2px 24px rgba(7,6,5,.6)}
  /* Fixer Sound-FAB rechts unten: keine Textzeile darf darunter enden */
  .media-bleed .copy{padding-right:72px}
  .media-pin .beat .sub{padding-right:64px}
}
.media-pin .beats{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--gut)}
.media-pin .beat{max-width:min(560px,90vw)}
.media-pin .beat .eyebrow{margin-bottom:var(--x2)}
.media-pin .beat h2{font-size:var(--fs-h2);line-height:1.04;font-weight:700;letter-spacing:-.045em;text-wrap:balance}
.media-pin .beat h2 em{font-style:normal;color:var(--ink-red)}
.media-pin .beat .sub{margin-top:var(--x3);font-size:clamp(16px,1.8vw,20px);color:var(--ink-dim);
  line-height:1.55;max-width:46ch;text-wrap:pretty}
/* Beat-Choreo: jeder Beat hat eine eigene Scroll-Spanne im langen Wrapper. Ohne view() (Fallback):
   alle Beats gestapelt sichtbar (degradiert sauber). */
.media-pin .beat{opacity:1}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){
  .media-pin{--beats:2}
  .media-pin .beat{position:absolute;left:0;right:0;opacity:0;
    animation:beatInOut linear both;animation-timeline:view();}
  /* zwei Beats: erste Hälfte / zweite Hälfte des Scroll-Wegs */
  /* b1 ab Pin-Start sichtbar, b2 bis Pin-Ende → kein leerer Frame an den Rändern */
  .media-pin .beat.b1{animation-range:cover 0% cover 50%}
  .media-pin .beat.b2{animation-range:cover 50% cover 100%}
  @keyframes beatInOut{0%{opacity:0;transform:translateY(28px)}
    20%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-28px)}}
  /* sanfter Bg-Push über den ganzen Pin */
  .media-pin .bg{animation:macroPushPin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes macroPushPin{from{transform:scale(1.12)}to{transform:scale(1.0)}}
}}
@media (prefers-reduced-motion: reduce){
  .media-pin .pin-inner{position:relative;height:auto;padding:clamp(72px,12vh,140px) 0}
  .media-pin .beat{position:relative;opacity:1;margin-bottom:var(--x5)}
}

/* ===== GALLERY-SCROLL — horizontaler Snap, alle App-Screens ===== */
.gallery-scroll{max-width:100%;padding:clamp(88px,9vw,160px) 0}
.gallery-scroll .head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.gallery-scroll .rail{display:flex;gap:clamp(16px,3vw,28px);overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:var(--x3) var(--gut);scroll-padding-left:var(--gut)}
.gallery-scroll .rail::-webkit-scrollbar{display:none}
/* alle Frame-Typen im Rail (A1): Phone/Browser/TV mit eigenen Breiten */
.gallery-scroll .rail > *{flex:0 0 auto;scroll-snap-align:center;margin:0}
.gallery-scroll .rail .frame-phone{width:clamp(200px,64vw,250px)}
.gallery-scroll .rail .frame-browser{width:clamp(300px,82vw,480px)}
.gallery-scroll .rail .frame-tv{width:clamp(300px,84vw,560px)}
/* Galerie-TVs ohne Standfuß (4× Fuß im Rail wirkt repetitiv) — C4 */
.gallery-scroll .rail .frame-tv .stand,.gallery-scroll .rail .frame-tv .foot{display:none}
@media(min-width:860px){.gallery-scroll .rail > *{scroll-snap-align:start}.gallery-scroll .rail .frame-phone{width:230px}}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){
  .gallery-scroll .rail > *{animation:snapPop linear both;
    animation-timeline:view(inline);animation-range:entry 25% exit 75%}
  @keyframes snapPop{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1);opacity:1}}
}}

/* ============================================================
   APPLE-WELLE 3 — Farb-Kontextwechsel (markentreu: nur Space-Black-Tints + dezenter Glow).
   Klassen werden explizit in den render*-Funktionen gesetzt (NIE nth-of-type → trifft sonst
   media-bleed/viewer3d falsch). Semitransparente Tints mischen sich mit dem fixed Body-Gradient.
   ============================================================ */
.section.tone-tint{background:var(--tint)}            /* abgesetzte Feature-/Bento-Insel */
.section.tone-deep{background:var(--bg-0)}            /* tiefste Ebene (z.B. QR-Brücke) */
/* dezenter, markentreuer roter Feature-Glow (Rot bleibt Akzent, ≤ .07 Opazität) */
.section.tone-tint.glow{position:relative;isolation:isolate}
.section.tone-tint.glow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 18% 30%, rgba(179,54,47,.07), transparent 60%)}
/* Viewer3D-Insel als ruhige tiefe Bühne */
.viewer3d.tone-deep{background:var(--bg-0)}

/* ============================================================
   APPLE-WELLE 1 — TV-spezifischer Typo+Spacing-Block (10-Fuß-Wirkung).
   TV hatte bisher NULL eigene Skala (identisch zum Handy). Nur body.page-tv-scoped,
   damit mobile/web enger/ruhiger bleiben.
   ============================================================ */
body.page-tv .hero-copy h1{font-size:clamp(56px,11vw,120px)}
body.page-tv h2.sec,
body.page-tv .media-bleed h2{font-size:clamp(40px,7vw,72px)}
body.page-tv .eyebrow,
body.page-tv .hero-copy .eyebrow{font-size:13px;letter-spacing:.18em}
body.page-tv .sec p,
body.page-tv .media-bleed .sub,
body.page-tv .hero-copy .sub{font-size:clamp(17px,2.2vw,22px)}
body.page-tv .section{padding-block:clamp(80px,11vh,140px)}
/* TV-Visual aus der 1180px-Spalte befreien → „großer Schirm" statt Mini-TV */
@media(min-width:860px){
  body.page-tv .feature{max-width:none}
  body.page-tv .frame-tv{max-width:min(48vw,820px)}
  body.page-tv .feature .copy{max-width:46ch}
}