/* STARTSEITE UND PARTNERSEITE (live seit Runde 3, 4.10.2026)
   "Die App ist der Star, und sie ist echt."
   - Ein Gedanke pro Bildschirm, grosse Schrift, viel Luft.
   - Qrakis Platz ist immer Lila (Flaechen aus #A855F7, #8B36FD, #6D28D9).
     Als KNOPF gibt es Lila nur einmal: oben im Kopf. Am Schluss ein weisser
     Knopf auf Lila; dann wird der Kopf-Knopf still (start.js).
   - WEICH (Marc, 4.10.2026: "Wuerdest du die Platzhalter weicher machen?"):
     grosse Rundungen, sanfte Verlaeufe, keine harten Kaesten, keine Strichrahmen.
   - VIDEOPLAETZE: bis der Film da ist, der weiche Startschirm der App - Lila,
     weiche Kreise, weisser Qraki, Schriftzug, drei Punkte, "Video kommt in ein
     paar Tagen". Keine Drehanweisungen auf der Seite (die stehen intern).
   - Keine Geraete-Attrappen. EINZIGE Ausnahme: der Warp-Moment steht in einem
     schlichten Handy-Umriss ohne Kamera, Knoepfe oder Marke (Marc, 4.10.2026).
   - Weltall: keine Box, weiche Raender, Licht immer von links.
   - Bewegung ease-in-out; prefers-reduced-motion = alles steht sofort.
   - Schrift: die der App (var(--ui), ui-rounded zuerst). Keine Webschrift - die
     CSP der Website erlaubt nur eigene Schriften (font-src 'self').
   - Kleinste Schrift 14px.
   Baut auf tokens.css / seite.css / kopf.css (wie alle Seiten) und karte.css (App). */

:root{
  --lila-hell:#A855F7; --lila:#8B36FD; --lila-tief:#6D28D9; --lila-schrift:#C4A6FF;
  --raum:#05070C; --weich:cubic-bezier(.65,0,.35,1);
  --rand:clamp(8px,1.1vw,16px); --rund:clamp(28px,3.2vw,44px); --rund-platz:clamp(30px,3vw,40px);
  --lila-flaeche:
    radial-gradient(110% 85% at 12% 0%, rgba(214,190,255,.50) 0%, rgba(214,190,255,0) 52%),
    radial-gradient(90% 80% at 100% 100%, rgba(52,16,128,.75) 0%, rgba(52,16,128,0) 62%),
    linear-gradient(155deg, var(--lila-hell) 0%, var(--lila) 44%, var(--lila-tief) 100%);
}
body.r3{ background:var(--paper); overflow-x:clip; }
.bahn3{ width:100%; max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
main#oben section{ padding:0; }

/* ------------------------------------------------------------ SCHRIFT */
.r3 h1, .r3 h2{ hyphens:manual; text-wrap:balance; }
.r3 .kicker{ margin:0 0 clamp(10px,1.4vh,16px); font-size:clamp(16px,1.5vw,19px); font-weight:900; letter-spacing:-.005em; color:var(--lila-schrift); }
.r3 main#oben h2{ margin:0; color:var(--ink); font-size:clamp(38px,5.4vw,68px); font-weight:900; line-height:1.03; letter-spacing:-.04em; }
.r3 main#oben h2.riesig{ font-size:clamp(46px,8vw,104px); letter-spacing:-.045em; line-height:.98; }
.r3 .lead{ margin:clamp(16px,2.2vh,24px) 0 0; font-size:clamp(18px,1.65vw,22px); font-weight:700; line-height:1.45; color:var(--soft); max-width:32ch; text-wrap:pretty; }
.r3 .leise{ margin:clamp(18px,2.6vh,26px) 0 0; font-size:15px; font-weight:700; line-height:1.5; color:var(--soft); max-width:38ch; }

/* ------------------------------------------------------------ LILA FLAECHE */
.platz-lila{ position:relative; overflow:hidden; isolation:isolate; color:#fff; background:var(--lila-flaeche); }
.r3 .platz-lila .kicker{ color:rgba(255,255,255,.82); }
.r3 main#oben .platz-lila h1, .r3 main#oben .platz-lila h2{ color:#fff; }
.r3 .platz-lila .lead{ color:rgba(255,255,255,.88); }
.hero-licht{ position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:radial-gradient(38% 34% at 72% 58%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%),
             radial-gradient(30% 28% at 22% 82%, rgba(168,85,247,.55), rgba(168,85,247,0) 70%);
  animation:licht 18s ease-in-out infinite alternate; }
@keyframes licht{ to{ transform:translate(-3%,2%) scale(1.06); } }

/* ------------------------------------------------------------ WEICHE KREISE
   Die drei Kreise des Startschirms (hell oben links, tief rechts, weiss unten
   links) - hier als weiche Lichtflecken statt harter Scheiben. */
.weich-kreise{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; border-radius:inherit; }
.weich-kreise i{ position:absolute; display:block; border-radius:50%; aspect-ratio:1; }
.weich-kreise .k1{ width:62%; left:-22%; top:-30%; background:radial-gradient(closest-side, rgba(214,190,255,.70), rgba(214,190,255,.30) 55%, rgba(214,190,255,0)); }
.weich-kreise .k2{ width:46%; right:-16%; top:34%; background:radial-gradient(closest-side, rgba(84,24,190,.75), rgba(84,24,190,.30) 55%, rgba(84,24,190,0)); }
.weich-kreise .k3{ width:40%; left:-12%; bottom:-30%; background:radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.18) 55%, rgba(255,255,255,0)); }

/* ------------------------------------------------------------ VIDEOPLATZ
   Der weiche Startschirm. Masse relativ zum Platz (cqw), damit er hochkant und
   quer gleich aussieht. Kommt ein <video>, liegt es darueber und wird sichtbar,
   sobald es laeuft (start.js, .film-laeuft). */
.r3 .video-platz{ position:relative; margin:0; max-width:none; border-radius:var(--rund-platz);
  box-shadow:0 50px 90px -50px rgba(40,10,110,.9); }
.r3 .video-platz .video-kasten{ position:relative; isolation:isolate; overflow:hidden; aspect-ratio:16/9; padding:0; border:0; border-radius:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:var(--lila-flaeche); color:#fff; container-type:inline-size; font-family:var(--ui); }
.r3 .platz-hoch{ width:min(100%, calc(76svh * 9 / 16)); justify-self:center; }
.r3 .platz-hoch .video-kasten{ aspect-ratio:9/16; }
.r3 .video-bald .bald-okto{ position:relative; width:30%; max-width:150px; height:auto; aspect-ratio:310.79/313.88; display:block; color:#fff;
  filter:drop-shadow(0 18px 24px rgba(40,8,110,.35)); animation:baldWipp 2.4s ease-in-out infinite; }
.r3 .video-bald .bald-okto svg{ width:100%; height:100%; display:block; }
.r3 .video-platz:not(.platz-hoch) .bald-okto{ width:15%; }
.r3 .video-bald .bald-marke{ position:relative; margin-top:3%; font-size:clamp(24px,8cqw,56px); line-height:1; font-weight:900; letter-spacing:-.03em; color:#fff; }
.r3 .platz-hoch .bald-marke{ font-size:clamp(26px,12cqw,52px); }
.r3 .video-bald .bald-punkte{ position:absolute; bottom:9%; display:flex; gap:10px; }
.r3 .video-bald .bald-punkte i{ width:10px; height:10px; border-radius:50%; background:#fff; opacity:.5; animation:baldPuls 1.2s ease-in-out infinite; }
.r3 .video-bald .bald-punkte i:nth-child(2){ animation-delay:.2s; }
.r3 .video-bald .bald-punkte i:nth-child(3){ animation-delay:.4s; }
.r3 .video-bald .bald-text{ position:absolute; top:7%; left:0; right:0; padding:0 16px; text-align:center; font-weight:800; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.92); white-space:normal; text-wrap:balance; }
.r3 .video-platz > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; opacity:0; transition:opacity .6s ease-in-out; }
.r3 .video-platz.film-laeuft > video{ opacity:1; }

/* NUR WAS MAN SIEHT, BEWEGT SICH (start.js setzt .ruht ausserhalb des Bildes). */
.ruht, .ruht *, .ruht::before, .ruht::after{ animation-play-state:paused !important; }

/* ------------------------------------------------------------ 1 HERO */
.hero{ padding:var(--rand) var(--rand) 0; }
.hero-buehne{ min-height:min(calc(100svh - 58px - var(--rand)), 900px); border-radius:var(--rund);
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:center;
  padding:clamp(40px,6vw,84px) clamp(24px,5.5vw,84px); gap:clamp(20px,3vw,40px); }
.hero-text{ position:relative; z-index:1; }
.hero h1{ margin:0; font-size:clamp(52px,8vw,112px); font-weight:900; line-height:.96; letter-spacing:-.05em; }
.hero h1 span{ display:block; }
.hero-unter{ margin:clamp(18px,2.6vh,28px) 0 0; font-size:clamp(24px,2.7vw,36px); font-weight:900; line-height:1.15; letter-spacing:-.02em; color:#fff; }
.hero-satz{ margin:clamp(14px,2vh,22px) 0 0; font-size:clamp(18px,1.6vw,21px); font-weight:700; line-height:1.45; color:rgba(255,255,255,.88); max-width:30ch; text-wrap:pretty; }
/* Der Filmplatz im Hero: kein Kasten im Kasten, sondern der Startschirm direkt
   auf der lila Buehne - Qraki, Schriftzug, Punkte. Der Film legt sich spaeter
   genau hierher (gleiche Flaeche, weich gerundet). */
.hero-film{ position:relative; margin:0; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:min(56svh, 520px); border-radius:var(--rund-platz); }
.hero-film .bald-okto{ width:min(78%, 300px, 36svh); aspect-ratio:310.79/313.88; color:#fff; filter:drop-shadow(0 34px 40px rgba(40,8,110,.45));
  animation:schweben 7s ease-in-out infinite; }
.hero-film .bald-okto svg{ width:100%; height:100%; display:block; }
.hero-film .bald-marke{ margin-top:clamp(10px,2vh,18px); font-size:clamp(34px,4.4vw,60px); line-height:1; font-weight:900; letter-spacing:-.03em; color:#fff; }
.hero-film .bald-punkte{ display:flex; gap:10px; margin-top:clamp(18px,3vh,28px); }
.hero-film .bald-punkte i{ width:10px; height:10px; border-radius:50%; background:#fff; opacity:.5; animation:baldPuls 1.2s ease-in-out infinite; }
.hero-film .bald-punkte i:nth-child(2){ animation-delay:.2s; } .hero-film .bald-punkte i:nth-child(3){ animation-delay:.4s; }
.hero-film .bald-text{ margin-top:clamp(12px,2vh,18px); font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.hero-film > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; opacity:0; transition:opacity .6s ease-in-out; }
.hero-film.film-laeuft > video{ opacity:1; }
@keyframes schweben{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-16px) rotate(1.5deg); } }
@keyframes baldWipp{ 50%{ transform:translateY(-6%) rotate(-3deg); } }
@keyframes baldPuls{ 50%{ opacity:1; transform:translateY(-30%); } }

/* ------------------------------------------------------------ 2 TAKTE */
.takt{ padding:clamp(100px,15vh,170px) 0 !important; }
.takt + .takt{ padding-top:clamp(20px,6vh,70px) !important; }
.takt-zeile{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:clamp(40px,7vw,120px); align-items:center; }
.takt-umgekehrt .takt-text{ order:2; }
.takt-text h2{ max-width:13ch; }

/* Der Sammelmoment im schlichten Handy-Umriss: abgerundetes Rechteck, dunkler
   Rand, sonst nichts. Der Schirm schneidet weich ab (overflow + Rundung) -
   Ebene, Schein und Flug bleiben drin; nur ein leiser lila Schein liegt aussen. */
.warp{ display:flex; justify-content:center; justify-self:center; }
.warp-geraet{ position:relative; width:min(340px, calc(100vw - 56px), calc(74svh * 9 / 19)); aspect-ratio:9/19; padding:9px; border-radius:50px;
  background:linear-gradient(160deg, #222a3a 0%, #121822 45%, #0b0f17 100%);
  box-shadow:inset 0 0 0 1.5px rgba(245,247,250,.10), inset 0 1px 0 rgba(255,255,255,.08), 0 46px 90px -36px rgba(0,0,0,.85), 0 0 80px -10px rgba(139,54,253,.28); }
.warp-schirm{ position:relative; width:100%; height:100%; border-radius:41px; overflow:hidden; isolation:isolate;
  background:radial-gradient(70% 50% at 50% 42%, rgba(40,24,90,.35), rgba(5,7,12,0) 70%), var(--sterne, none) center / 640px, var(--raum); }
.warp-flaeche{ position:absolute; inset:0; z-index:0; isolation:isolate; }
.warp-ende{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:0 14% 16%;
  text-align:center; opacity:0; pointer-events:none; transition:opacity .8s ease-in-out; }
.warp-ende p{ margin:0; font-size:18px; font-weight:800; line-height:1.4; color:var(--ink); text-wrap:balance; }
.warp-geraet.fertig .warp-ende{ opacity:1; pointer-events:auto; }
.warp-deck{ position:absolute; left:50%; bottom:6.5%; z-index:2; transform:translateX(-50%); display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:800; color:#B8C2D0; white-space:nowrap; pointer-events:none; }
.warp-deck b{ color:#F5F7FA; font-variant-numeric:tabular-nums; }
.warp-helm{ width:40px; height:40px; flex:none; display:block; border-radius:50%; }
.warp-helm svg{ width:100%; height:100%; display:block; overflow:visible; }
.warp-helm.glueht{ animation:helmGlueht 1.4s ease-in-out; }
@keyframes helmGlueht{ 0%{ filter:drop-shadow(0 0 0 rgba(242,188,72,0)); } 30%{ filter:drop-shadow(0 0 14px rgba(242,188,72,.85)); } 100%{ filter:drop-shadow(0 0 0 rgba(242,188,72,0)); } }

.leise-knopf{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border-radius:999px; border:0;
  background:rgba(245,247,250,.08); box-shadow:inset 0 0 0 1.5px rgba(245,247,250,.18);
  color:var(--ink); font-family:var(--ui); font-size:15px; font-weight:800; text-decoration:none; cursor:pointer;
  transition:background-color .25s ease-in-out, box-shadow .25s ease-in-out; }
@media (hover:hover){ .leise-knopf:hover{ background:rgba(245,247,250,.14); box-shadow:inset 0 0 0 1.5px rgba(245,247,250,.36); } }
.leise-knopf:focus-visible{ outline:2.5px solid var(--lila-schrift); outline-offset:3px; }

/* ------------------------------------------------------------ 3 WELTRAUM */
/* overflow-x:clip: Der Schein der Karten reicht bis an die Bildschirmraender; eine
   geneigte Karte schoebe ihn sonst ein paar Punkte darueber (Querscroll). */
.weltraum{ position:relative; isolation:isolate; overflow-x:clip; padding:clamp(110px,16vh,190px) 0 clamp(90px,13vh,150px) !important;
  background:linear-gradient(180deg, var(--paper) 0, var(--raum) 220px, var(--raum) calc(100% - 220px), var(--paper) 100%); }
.weltraum::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--sterne, none); background-size:900px; opacity:.85;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 260px, #000 calc(100% - 260px), transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 260px, #000 calc(100% - 260px), transparent 100%); }
.w-kopf{ text-align:center; }
.w-kopf .lead, .karten-kopf .lead, .g-kopf .lead, .s-kopf .lead{ margin-left:auto; margin-right:auto; max-width:40ch; }
.w-kopf h2, .karten-kopf h2, .g-kopf h2, .s-kopf h2{ max-width:16ch; }
/* Mittig gesetzte Kapitelkoepfe: die Ueberschrift als Block mittig (die
   Grundregel "main#oben h2{ margin:0 }" wiegt sonst schwerer). */
.r3 main#oben :is(.w-kopf, .karten-kopf, .g-kopf, .s-kopf, .p-kopf, .ref-platz) h2{ margin-left:auto; margin-right:auto; }

.erde-buehne{ position:relative; width:min(100%, 1000px); height:clamp(400px, 60vw, 700px); margin:clamp(0px,1vh,16px) auto 0;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%, #000 66%, transparent 100%);
  mask-image:radial-gradient(ellipse 60% 62% at 50% 50%, #000 66%, transparent 100%); }
.erde-buehne .sk-szene{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-x pan-y; background:var(--raum); }
.erde-buehne.nah .sk-szene{ touch-action:none; }
.sk-standbild{ display:none; position:absolute; left:50%; top:50%; width:min(56%, 72vh); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background-size:200% 100%; background-position:30% 50%; box-shadow:inset -40px -10px 60px rgba(0,0,0,.85); }
.ohne-gl .sk-standbild{ display:block; }
.geste{ margin:4px 0 0; text-align:center; font-size:14px; font-weight:800; color:rgba(245,247,250,.55); }

.schiff-zeile{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,60px); align-items:center;
  margin-top:clamp(110px,16vh,190px); }
.schiff-buehne{ position:relative; height:clamp(440px, 50vw, 620px); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.schiff-buehne .szene{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; }
.schiff-buehne .szene:active{ cursor:grabbing; }
.schiff-buehne .tipp{ position:absolute; left:0; right:0; bottom:6px; margin:0; text-align:center; font-size:14px; font-weight:800;
  color:rgba(245,247,250,.55); pointer-events:none; transition:opacity .6s ease-in-out; }
.schiff-buehne.benutzt .tipp, .schiff-buehne.nah .tipp{ opacity:0; }
.schiff-buehne .blase{ position:absolute; left:50%; top:14px; width:min(340px, calc(100% - 28px)); transform:translate(-50%,6px); z-index:3;
  background:rgba(18,30,42,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:18px; padding:11px 14px;
  box-shadow:inset 0 0 0 1px rgba(245,247,250,.08), 0 10px 30px rgba(0,0,0,.4); opacity:0; transition:opacity .28s ease-in-out, transform .28s ease-in-out; pointer-events:none; }
.schiff-buehne .blase.an{ opacity:1; transform:translate(-50%,0); }
.schiff-buehne .blase b{ display:block; color:var(--lila-schrift); font-size:14px; font-weight:900; }
.schiff-buehne .blase p{ margin:2px 0 0; font-size:16px; font-weight:700; line-height:1.4; }
.schiff-buehne .blase small{ display:block; margin-top:5px; color:var(--soft); font-size:14px; font-weight:700; line-height:1.4; }
.schiff-buehne .blase small:empty{ display:none; }
.schiff-buehne .ersatz{ position:absolute; left:50%; top:46%; width:min(70%, 340px); transform:translate(-50%,-50%); }

.karten-kopf{ text-align:center; margin-top:clamp(110px,16vh,190px); }
.deck-reihe{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(0px,1vw,16px);
  width:100%; max-width:1120px; margin:clamp(20px,4vh,44px) auto 0; padding:0 clamp(10px,3vw,40px); }
.deck-platz{ height:640px; min-width:0; }
.deck-platz > .wk-sk{ height:100%; --wk-grund:var(--raum); }
.deck-punkte{ display:none; margin-top:8px; }
.rs-punkte button{ width:28px; height:44px; }

/* RUHIGE KARTE (Marc, 4.10.2026: "etwas ueberladen bzw. kitschig. Also nur die
   Karte selbst, Inhalt ist top."). Holo, Folie, Glanz, Sterne und die leuchtende
   Kante stehen gar nicht mehr im Markup (karten.js, Beispiele). Hier: eine
   ruhige dunkle Flaeche, EIN feiner Rand, ein weicher Schatten - kein Leuchten. */
.r3 .sk-grund, .r3 .sk-hinten .sk-grund{ background:linear-gradient(168deg, #191a35 0%, #111a2c 52%, #0b121f 100%);
  box-shadow:inset 0 0 0 1px rgba(245,247,250,.09), 0 30px 60px -30px rgba(0,0,0,.85); }

/* ------------------------------------------------------------ 4 GEMEINSAM */
.gemeinsam{ padding:clamp(110px,16vh,180px) 0 clamp(80px,12vh,130px) !important; }
.g-kopf{ text-align:center; }
.g-buehne{ margin-top:clamp(36px,6vh,64px); max-width:1000px; }
.crew{ position:relative; z-index:2; display:flex; justify-content:center; gap:clamp(10px,2vw,22px); margin-top:clamp(-96px,-7vw,-48px); }
.pass{ width:clamp(104px,17vw,190px); border-radius:26px; padding:clamp(10px,1.2vw,16px) clamp(8px,1vw,14px) clamp(12px,1.4vw,18px);
  background:linear-gradient(165deg, #1A1838 0%, #121B2E 55%, #0D1724 100%);
  box-shadow:inset 0 0 0 1px rgba(245,247,250,.08), 0 30px 50px -24px rgba(0,0,0,.8); text-align:center; }
.pass:nth-child(1){ transform:rotate(-4deg) translateY(10px); }
.pass:nth-child(3){ transform:rotate(4deg) translateY(10px); }
.pass-bild{ width:100%; aspect-ratio:240/262; transition:opacity .22s ease-in-out, transform .22s ease-in-out; }
.pass-bild.tausch{ opacity:0; transform:scale(.94); }
.pass-bild svg{ width:100%; height:100%; display:block; }
.pass-text{ margin-top:6px; display:flex; flex-direction:column; gap:2px; }
.pass-text b{ font-size:clamp(16px,1.6vw,19px); font-weight:900; color:var(--ink); }
.pass-text span{ font-size:14px; font-weight:700; color:var(--soft); line-height:1.3; }
.g-fuss{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:clamp(30px,4vh,44px); text-align:center; }
.g-fuss .leise{ margin:0; max-width:40ch; }

/* ------------------------------------------------------------ SPECIALS
   Bis die Store-App da ist, stehen die Specials hier (/specials und /shop
   leiten auf /#specials). Je Deck "gratis", kein Kaufversprechen. */
.specials3{ padding:clamp(90px,13vh,150px) 0 clamp(60px,9vh,100px) !important; }
.s-kopf{ text-align:center; }
.regal3{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); margin-top:clamp(36px,6vh,60px); }
.regal3 a{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; border-radius:24px; }
.regal3 a:focus-visible{ outline:2.5px solid var(--lila-schrift); outline-offset:4px; }
.regal3 img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:22px;
  box-shadow:0 26px 44px -26px rgba(0,0,0,.85); transition:transform .3s ease-in-out; }
@media (hover:hover){ .regal3 a:hover img{ transform:translateY(-3px); } }
.regal3 b{ font-size:16px; font-weight:900; line-height:1.25; color:var(--ink); text-wrap:balance; }
.regal3 span{ margin-top:-6px; font-size:14px; font-weight:700; color:var(--soft); }
.s-fuss{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:clamp(30px,5vh,48px); text-align:center; }
.s-fuss p{ margin:0; font-size:17px; font-weight:700; line-height:1.5; color:var(--soft); max-width:44ch; }
.s-fuss p b{ color:var(--ink); }

/* ------------------------------------------------------------ 4b FUER PARTNER */
.partner{ position:relative; padding:clamp(110px,16vh,190px) 0 clamp(90px,13vh,150px) !important;
  background:radial-gradient(70% 50% at 50% 0%, rgba(139,54,253,.16), rgba(139,54,253,0) 70%); }
.p-kopf{ text-align:center; }
.p-kopf h2{ margin-left:auto; margin-right:auto; max-width:15ch; }
.p-kopf .lead{ margin-left:auto; margin-right:auto; max-width:40ch; }
.beispiel-reihe{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(0px,1vw,16px); width:100%; max-width:1120px;
  margin:clamp(24px,4vh,44px) auto 0; padding:0 clamp(10px,3vw,40px); }
.beispiel-platz{ height:600px; min-width:0; }
.beispiel-platz > .wk-sk{ height:100%; }
.beispiel-satz{ margin:auto 0 0; padding-top:10px; font-size:14px; font-weight:700; line-height:1.4; color:var(--soft); }
.verdeckt .sk-unten .wk-q-neugier{ margin-top:8px; }
.verdeckt .sk-pop .wk-bild{ width:96%; height:96%; }
.drei-saetze{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px,3vw,44px); margin-top:clamp(56px,8vh,90px); }
.drei-saetze p{ margin:0; font-size:clamp(17px,1.5vw,20px); font-weight:700; line-height:1.45; color:var(--soft); }
.drei-saetze b{ display:block; margin-bottom:4px; font-size:clamp(22px,2.2vw,28px); font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.wege{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:clamp(56px,8vh,90px); }
.weg3{ display:flex; flex-direction:column; gap:8px; min-height:150px; padding:22px 22px 24px; border-radius:28px; text-decoration:none;
  background:linear-gradient(165deg, #1A1838 0%, #121B2E 55%, #0D1724 100%);
  box-shadow:inset 0 0 0 1px rgba(245,247,250,.07), 0 30px 50px -30px rgba(0,0,0,.8);
  transition:box-shadow .3s ease-in-out, transform .3s ease-in-out; }
.weg-wer{ font-size:19px; font-weight:900; color:var(--ink); letter-spacing:-.015em; }
.weg-satz{ font-size:15px; font-weight:700; line-height:1.45; color:var(--soft); }
@media (hover:hover){ .weg3:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(196,166,255,.35), 0 34px 54px -30px rgba(0,0,0,.85); } }
.weg3:focus-visible{ outline:2.5px solid var(--lila-schrift); outline-offset:3px; }
.wege-alle{ margin:26px 0 0; text-align:center; }

/* ------------------------------------------------------------ PARTNER-SEITE */
.p-hero{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); padding-bottom:clamp(40px,6vw,84px); }
.p-hero h1{ font-size:clamp(50px,7.4vw,104px); }
.p-hero .kicker{ color:rgba(255,255,255,.85); }
.deck-reihe.einzeln{ display:block; overflow:visible; padding:0; margin:0; max-width:none; }
.deck-reihe.einzeln .deck-platz{ padding:0; }
.p-hero-karte .deck-platz{ height:min(620px, 70svh); }
.quartett-drei{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px,3vw,44px); margin-top:clamp(36px,5vh,56px); text-align:center; }
.q-nr{ margin:0 0 6px; font-size:clamp(20px,2vw,26px); font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.q-satz{ margin:0 auto; max-width:30ch; font-size:clamp(17px,1.5vw,19px); font-weight:700; line-height:1.45; color:var(--soft); }
.p-nutzen{ padding:clamp(90px,14vh,150px) 0 !important; }
.nutzen-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(48px,8vh,84px); }
.nutzen-liste li{ display:flex; flex-direction:column; gap:12px; }
.r3 .nutzen-liste b{ font-size:clamp(36px,5.6vw,72px); font-weight:900; line-height:1.02; letter-spacing:-.04em; color:var(--ink); max-width:16ch; text-wrap:balance; }
.nutzen-liste span{ font-size:clamp(18px,1.7vw,22px); font-weight:700; line-height:1.45; color:var(--soft); max-width:40ch; }
.nutzen-liste li:nth-child(2){ align-items:flex-end; text-align:right; }
.p-ablauf{ padding:clamp(60px,10vh,110px) 0 clamp(90px,13vh,140px) !important; }
.ablauf-liste{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,2vw,24px); margin-top:clamp(36px,5vh,56px) !important; }
.schritt3{ display:flex; flex-direction:column; gap:10px; padding:clamp(24px,2.6vw,32px); border-radius:32px;
  background:linear-gradient(165deg, #1A1838 0%, #121B2E 55%, #0D1724 100%); box-shadow:inset 0 0 0 1px rgba(245,247,250,.07); }
.s-nr{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:20px; font-weight:900; color:#fff;
  background:linear-gradient(155deg, var(--lila-hell), var(--lila-tief)); }
.schritt3 b{ font-size:clamp(20px,1.9vw,24px); font-weight:900; color:var(--ink); letter-spacing:-.02em; line-height:1.2; }
.schritt3 > span:last-child{ font-size:16px; font-weight:700; line-height:1.5; color:var(--soft); }
.p-referenzen{ padding:0 0 clamp(90px,13vh,140px) !important; }
.ref-platz{ border-radius:var(--rund); padding:clamp(40px,5.5vw,72px) clamp(24px,5vw,64px); text-align:center; }
.ref-platz h2{ margin:0 auto; max-width:16ch; }
.ref-platz .lead{ margin-left:auto; margin-right:auto; max-width:44ch; }
/* Wo spaeter Namen stehen: weiche, helle Flecken statt gestrichelter Kaesten. */
.ref-slots{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:clamp(28px,4vh,40px); }
.ref-slots span{ height:76px; border-radius:999px; background:radial-gradient(80% 120% at 50% 30%, rgba(255,255,255,.22), rgba(255,255,255,.07)); }
.p-wege{ padding:0 0 clamp(90px,13vh,140px) !important; text-align:center; }
.p-wege .wege{ margin-top:clamp(28px,4vh,40px); text-align:left; }
.p-wege .leise{ margin:26px auto 0; text-align:center; }
.p-wege .leise a{ color:var(--ink); text-decoration-thickness:1.5px; text-underline-offset:4px; }
.ablauf-liste > li::before, .nutzen-liste > li::before{ content:none !important; display:none !important; }
.ablauf-liste, .nutzen-liste{ counter-reset:none; padding-left:0 !important; }
.sr-nur{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ------------------------------------------------------------ 5 SICHERER ORT */
.ort{ padding:clamp(60px,10vh,110px) 0 clamp(100px,15vh,170px) !important; }
.ort-zeile{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(20px,3vw,40px); align-items:stretch; }
.ort-platz{ border-radius:var(--rund); padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; justify-content:center; }
/* QRAKI FLACH IM BULLAUGE (Marc, 5.10.2026): die flache Figur ist lila wie die
   Flaeche - deshalb steht sie in einem runden Fenster in Nachtblau, wie ein Blick
   aus dem Raumschiff. Kein Schein (nur die Sonne leuchtet), nur Schweben. */
.ort-anzug{ display:block; width:clamp(150px,15vw,200px); height:auto; margin:0 0 clamp(14px,2vh,22px) -8px;
  padding:clamp(14px,1.6vw,22px); border-radius:50%; background:#0C1B25; box-shadow:inset 0 0 0 2px rgba(255,255,255,.12), 0 18px 36px -10px rgba(36,8,92,.55);
  animation:schweben 8s ease-in-out infinite; }
.ort-platz h2{ max-width:12ch; }
.ort-leise{ margin:clamp(16px,2vh,22px) 0 0; font-size:16px; font-weight:700; line-height:1.5; color:rgba(255,255,255,.82); max-width:36ch; }
.ort-chat{ display:flex; align-items:center; }
.ort-chat .gz{ height:clamp(520px,74vh,640px); }

/* ------------------------------------------------------------ 6 SCHLUSS */
.ende3{ margin:0 var(--rand) var(--rand); border-radius:var(--rund); padding:clamp(90px,15vh,160px) 0 !important; text-align:center; }
.ende3-innen{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.ende3-icon{ width:clamp(64px,7vw,86px); aspect-ratio:310.79/313.88; color:#fff; margin-bottom:clamp(20px,3vh,30px);
  filter:drop-shadow(0 16px 22px rgba(40,8,110,.45)); animation:schweben 7s ease-in-out infinite; }
.ende3-icon svg{ width:100%; height:100%; display:block; }
.r3 main#oben .ende3 h2{ font-size:clamp(42px,6.6vw,86px); }
.ende3 .lead{ margin-left:auto; margin-right:auto; }
.ende3-knopf{ margin:clamp(30px,5vh,44px) 0 0; }
.knopf-weiss{ display:inline-flex; align-items:center; justify-content:center; min-height:58px; padding:0 38px; border-radius:20px;
  background:#fff; color:var(--lila-tief); text-decoration:none; font-size:18px; font-weight:900; letter-spacing:-.01em;
  box-shadow:0 22px 44px -16px rgba(36,8,92,.7); transition:background-color .25s ease-in-out, transform .25s ease-in-out; }
@media (hover:hover){ .knopf-weiss:hover{ background:#F3ECFF; transform:translateY(-1px); } }
.knopf-weiss:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.kopf .mini{ transition:background-color .4s ease-in-out, color .4s ease-in-out, box-shadow .4s ease-in-out; }
body.schluss-da .kopf .mini{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }

/* ------------------------------------------------------------ FUSS */
.fuss3{ padding:36px 0 48px; border-top:0; }
.fuss3-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 26px; margin:0; }
.fuss3 .fuss3-links a{ font-size:15px; font-weight:700; color:var(--soft); text-decoration:none; padding:12px 2px; }
@media (hover:hover){ .fuss3 .fuss3-links a:hover{ color:var(--ink); } }

/* ------------------------------------------------------------ ILLUSTRATIONEN (4.10.2026)
   Die freigegebene Bildsprache (r4): flach, Nachtblau und Schiefer, warmes Licht, Ben aus dem
   Avatar-Editor, der weiche Code als Portal. Die Bilder stehen IN den Videoplaetzen, mit
   derselben weichen Rundung; ein spaeterer Film legt sich darueber (start.js, Punkt 6) und
   nimmt das Bild als Poster. Grund der Flaeche ist Nachtblau statt Lila, damit beim Laden
   kein lila Blitz hinter dem Bild aufscheint. */
.illu-bild{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.r3 .video-platz.illu .video-kasten{ background:#0C1B25; }
/* FLACH (Marc, 5.10.2026: "die Karten duerfen flach eingebunden sein, unser Hintergrund ist
   ueberwiegend dunkel"): kein Schatten, nur Rundung und feine Kante. */
.r3 .video-platz.illu{ box-shadow:none; }
.illu-kasten .illu-bild{ position:absolute; inset:0; }
/* Portal-Paar: Code leuchtet (3,5 s) -> Lichtpunkte ziehen ins Handy (3,5 s), weich (ease-in-out). */
.illu-paar .illu-zwei{ opacity:0; animation:illuPortal 9s ease-in-out infinite; }
@keyframes illuPortal{ 0%,32%{ opacity:0; } 45%,82%{ opacity:1; } 95%,100%{ opacity:0; } }
/* REIHE (Marc, 5.10.2026): vier Bilder in 20 s. Buch leuchtet (0-4 s), Portal (4-9),
   Zoo (9-14), Museum (14-19), dann wieder das Buch. Das erste Bild liegt still darunter. */
.illu-reihe .illu-zwei{ animation:illuReihe2 20s ease-in-out infinite; }
.illu-reihe .illu-drei, .illu-reihe .illu-vier{ opacity:0; animation:illuReihe3 20s ease-in-out infinite; }
.illu-reihe .illu-vier{ animation-name:illuReihe4; }
@keyframes illuReihe2{ 0%,16%{ opacity:0; } 22%,44%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes illuReihe3{ 0%,41%{ opacity:0; } 47%,69%{ opacity:1; } 75%,100%{ opacity:0; } }
@keyframes illuReihe4{ 0%,66%{ opacity:0; } 72%,94%{ opacity:1; } 100%{ opacity:0; } }

/* Hero: das Bild statt des Startschirms, auf der lila Buehne wie ein Fenster. */
.hero-film.illu{ display:block; min-height:0; align-self:center; justify-self:end; width:100%; max-width:540px; }
.hero-film.illu picture{ display:block; border-radius:inherit; }
.hero-film.illu .illu-bild{ aspect-ratio:4/5; height:auto; max-height:min(72svh, 680px);
  box-shadow:0 40px 80px -36px rgba(30,6,90,.75), 0 0 0 1px rgba(255,255,255,.10); }

/* Schluss: Nachtblau mit Planeten (Licht von links), Text links wie im Schlussbild. */
.ende3-nacht{ position:relative; overflow:hidden; isolation:isolate; background:#0C1B25; color:#fff; text-align:left; }
.ende3-bild{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:right center; }
.ende3-nacht .ende3-innen{ align-items:flex-start; }
.ende3-nacht .lead{ margin-left:0; margin-right:0; color:rgba(245,247,250,.8); }
.ende3-nacht .kicker{ color:#C4A6FF; }
.r3 main#oben .ende3-nacht h2{ color:#fff; max-width:11ch; }
.ende3-kachel{ width:clamp(68px,7vw,88px); aspect-ratio:1; border-radius:24%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg, #A35BFF 0%, #8B36FD 55%, #7424E8 100%); box-shadow:0 18px 36px -14px rgba(139,54,253,.6); filter:none; }
.ende3-kachel svg{ width:62%; height:62%; }
.ende3-nacht .knopf-weiss{ box-shadow:0 22px 44px -16px rgba(0,0,0,.7); }

/* Partnerseite: lebendige Karte im Kapitel 2, zwei weitere Orte unter den drei Schritten. */
.deck-reihe.einzeln.p-karte-live{ max-width:min(460px, 100%); margin:clamp(28px,5vh,52px) auto 0; }
.p-karte-live .deck-platz{ height:min(600px, 72svh); }
.p-orte{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px,2.4vw,32px); max-width:1000px; margin-top:clamp(40px,6vh,64px); }
.p-ort{ margin:0; }
.p-ort .illu-bild{ aspect-ratio:4/5; height:auto; border-radius:var(--rund-platz); box-shadow:0 0 0 1px rgba(255,255,255,.10); }
.p-ort figcaption{ margin-top:12px; font-size:clamp(17px,1.5vw,19px); font-weight:800; color:var(--soft); text-align:center; }

/* Die Paesse ueberlappen nur noch den Teppich, nicht die Kinder. */
@media (min-width:561px){ .g-buehne .video-platz.illu + .crew{ margin-top:clamp(-60px,-4.4vw,-30px); } }

@media (max-width:900px){
  .hero-film.illu{ justify-self:stretch; max-width:none; padding:0; margin-top:clamp(18px,3vh,28px); }
  .hero-film.illu .illu-bild{ aspect-ratio:16/9; max-height:none; }
  .p-hero-bild.hero-film.illu .illu-bild{ aspect-ratio:4/3; object-position:50% 40%; }
}
@media (max-width:600px){
  .hero-film.illu .illu-bild{ aspect-ratio:1/1; object-position:50% 42%; }
}
@media (max-width:900px){
  .ende3-nacht{ padding:clamp(250px,64vw,340px) 0 clamp(64px,10vh,96px) !important; }
  .ende3-bild{ height:clamp(290px,74vw,400px); object-position:88% 30%;
    -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, #000 55%, transparent 100%); }
}
@media (max-width:760px){
  .p-orte{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:14px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .p-orte::-webkit-scrollbar{ display:none; }
  .p-ort{ flex:0 0 82%; scroll-snap-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .illu-paar .illu-zwei{ animation:none; opacity:1; }
  .illu-reihe .illu-drei, .illu-reihe .illu-vier{ animation:none; opacity:0; }
}

/* ------------------------------------------------------------ EINBLENDEN */
.js .sanft{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--weich), transform .9s var(--weich); }
.js .sanft.da{ opacity:1; transform:none; }

/* ------------------------------------------------------------ TABLET / HANDY */
@media (max-width:900px){
  .hero-buehne, .p-hero{ grid-template-columns:minmax(0,1fr); align-content:start; text-align:left; padding:clamp(34px,7vw,56px) clamp(22px,5vw,40px) clamp(30px,6vw,48px); }
  .hero-film{ min-height:0; padding:clamp(10px,3vh,24px) 0 clamp(6px,2vh,14px); }
  .hero-film .bald-okto{ width:min(36%, 140px, 18svh); }
  .hero-film .bald-marke{ font-size:clamp(30px,9vw,44px); }
  .takt-zeile, .schiff-zeile, .ort-zeile{ grid-template-columns:minmax(0,1fr); }
  .takt-umgekehrt .takt-text{ order:0; }
  .takt-zeile{ gap:clamp(36px,6vh,56px); }
  .r3 .platz-hoch{ width:min(340px, 100%, calc(70svh * 9 / 16)); }
  .ort-chat .gz{ height:clamp(480px,70svh,600px); }
  .ort-chat{ justify-content:center; }
  .wege{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .p-hero-karte .deck-platz{ height:540px; }
  .regal3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:760px){
  .beispiel-reihe{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .beispiel-reihe::-webkit-scrollbar{ display:none; }
  .beispiel-platz{ flex:0 0 86%; height:560px; scroll-snap-align:center; padding:0 4px; }
  .drei-saetze, .quartett-drei, .ablauf-liste{ grid-template-columns:minmax(0,1fr); }
  .quartett-drei{ text-align:left; } .q-satz{ margin:0; }
  .nutzen-liste li:nth-child(2){ align-items:flex-start; text-align:left; }
  .ref-slots{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* Die Wischreihe schneidet alles an ihrem Rand ab. Damit der Schein der Sonne
     nach oben frei auslaeuft (karten.js: Leinwand ragt einen halben Kartenplatz
     ueber die Karte), reicht die Reihe unsichtbar 300px hoeher (Polster plus
     gleich grosser Gegenrand, wie .rs-reihe in der App) - die Karten bleiben,
     wo sie waren. Die Reihe selbst faengt keine Finger ab, nur die Karten. */
  .deck-reihe{ display:flex; gap:0; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
    padding:300px 0 24px; margin-top:calc(clamp(20px,4vh,44px) - 300px); margin-bottom:-24px; pointer-events:none;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .deck-reihe .wk-sk{ pointer-events:auto; }
  .deck-reihe.einzeln{ padding:0; margin:0; pointer-events:auto; }
  .deck-reihe::-webkit-scrollbar{ display:none; }
  .deck-platz{ flex:0 0 100%; height:600px; scroll-snap-align:center; scroll-snap-stop:always; padding:0 8px; }
  .deck-punkte{ display:flex; }
  .schiff-buehne{ height:clamp(340px, 92vw, 440px); }
  .schiff-zeile{ gap:0; }
  .crew{ margin-top:-30px; }
  .pass:nth-child(1){ transform:rotate(-3deg) translateY(8px); }
  .pass:nth-child(3){ transform:rotate(3deg) translateY(8px); }
  .regal3{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:14px; margin-left:calc(-1 * clamp(20px,4vw,48px)); margin-right:calc(-1 * clamp(20px,4vw,48px));
    padding:0 clamp(20px,4vw,48px) 8px; scroll-padding:0 clamp(20px,4vw,48px); }
  .regal3::-webkit-scrollbar{ display:none; }
  .regal3 a{ flex:0 0 42%; scroll-snap-align:start; }
}
@media (max-width:560px){
  .wege{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .weg3{ min-height:0; padding:18px 20px 20px; gap:4px; }
  .crew{ margin-top:18px; }
}
@media (max-width:420px){
  .hero h1{ font-size:clamp(48px,14.5vw,62px); }
}

@media (prefers-reduced-motion:reduce){
  .hero-film .bald-okto, .ende3-icon, .ort-anzug, .hero-licht, .r3 .video-bald .bald-okto, .r3 .video-bald .bald-punkte i, .hero-film .bald-punkte i, .warp-helm.glueht{ animation:none; }
  .js .sanft{ opacity:1; transform:none; transition:none; }
  .warp-ende, .pass-bild, .knopf-weiss, .leise-knopf, .kopf .mini, .schiff-buehne .blase, .schiff-buehne .tipp, .r3 .video-platz > video, .hero-film > video, .regal3 img{ transition:none; }
}

/* ------------------------------------------------------------ GESPRAECH
   Das Eltern-Gespraech mit Qraki, dunkel wie die App (Mockup Runde 2/3). */
.gz{ width:100%; max-width:440px; justify-self:center; background:#0C1B25; border-radius:26px; text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -36px rgba(0,0,0,.7); overflow:hidden; }
.gz{ display:flex; flex-direction:column; height:clamp(460px,72vh,600px); margin:0 auto; }
.gz-kopf{ display:flex; align-items:center; gap:10px; padding:14px 16px; flex:none;
  border-bottom:1px solid rgba(245,247,250,.08); background:#111F2B; }
.gz-av{ width:40px; height:40px; flex:none; border-radius:50%; overflow:hidden; position:relative;
  background:radial-gradient(circle at 50% 40%, #27406b 0%, #14233a 70%); box-shadow:0 0 0 1.5px rgba(245,247,250,.14); }
.gz-av img{ position:absolute; width:178%; height:auto; max-width:none; left:-38%; top:-14%; }
.gz-kopf b{ display:block; font-size:16px; font-weight:900; line-height:1.2; }
.gz-kopf span{ display:block; font-size:14px; font-weight:700; color:var(--soft); }
.gz-liste{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 14px 10px; display:flex; flex-direction:column; gap:8px;
  scrollbar-width:thin; scrollbar-color:rgba(245,247,250,.18) transparent; }
.gz-z{ display:flex; }
.gz-z.du{ justify-content:flex-end; }
.gz-z.du + .gz-z.qr, .gz-z.qr + .gz-z.du{ margin-top:6px; }
.gz-b{ margin:0; max-width:86%; padding:9px 13px; border-radius:16px; background:#202C3A; color:#F5F7FA;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", var(--disp); font-size:16px; font-weight:400; line-height:1.4;
  overflow-wrap:anywhere; }
.gz-z.qr .gz-b{ border-bottom-left-radius:4px; }
.gz-z.du .gz-b{ background:#2F5C86; color:#fff; font-weight:500; border-bottom-right-radius:4px; }
.gz-titel{ display:block; margin-bottom:2px; font-family:var(--disp); font-size:14px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.gz-z.rein{ animation:gzRein .38s ease-in-out both; }
@keyframes gzRein{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .gz-z.rein{ animation:gzBlende .2s ease-in-out both; } }
@keyframes gzBlende{ from{ opacity:0; } to{ opacity:1; } }
.gz-quellen{ margin-top:8px; }
.gz-quellen summary{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; cursor:pointer;
  min-height:32px; font-family:var(--disp); font-size:14px; font-weight:700; color:var(--soft); }
.gz-quellen summary::-webkit-details-marker{ display:none; }
.gz-quellen summary:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:8px; }
.gz-abz{ display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 10px 3px 5px;
  font-style:normal; font-weight:900; font-size:14px; line-height:1.2; transition:background-color .2s ease-in-out; }
.gz-abz svg{ width:16px; height:16px; flex:none; }
.gz-abz.ok{ background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok); }
.gz-abz.eins{ background:color-mix(in srgb,var(--soft) 14%,transparent); color:var(--soft); }
.gz-quellen[open] .gz-abz.ok{ background:color-mix(in srgb,var(--ok) 24%,transparent); }
.gz-quellen ul{ list-style:none; margin:6px 0 2px; padding:8px 0 0; border-top:1px solid rgba(245,247,250,.1);
  display:flex; flex-direction:column; gap:6px; }
.gz-quellen li{ display:flex; flex-direction:column; min-width:0; }
.gz-quellen a{ font-size:15px; font-weight:700; color:#F5F7FA; text-decoration-color:rgba(245,247,250,.3); overflow-wrap:anywhere; }
.gz-quellen li span{ font-size:14px; font-weight:600; color:var(--soft); overflow-wrap:anywhere; }
.gz-tippt .gz-b{ display:flex; gap:5px; padding:13px 14px; }
.gz-tippt i{ width:7px; height:7px; border-radius:50%; background:#B8C2D0; opacity:.35; animation:gzPunkt 1.2s ease-in-out infinite; }
.gz-tippt i:nth-child(2){ animation-delay:.18s; } .gz-tippt i:nth-child(3){ animation-delay:.36s; }
@keyframes gzPunkt{ 0%,100%{ opacity:.3; transform:none; } 40%{ opacity:1; transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ .gz-tippt i{ animation:none; opacity:.6; } }
.gz-chips{ flex:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:10px 14px 14px; min-height:66px;
  border-top:1px solid rgba(245,247,250,.06); }
.gz-chip{ min-height:44px; max-width:100%; border-radius:999px; border:1.5px solid rgba(245,247,250,.3);
  background:transparent; color:#F5F7FA; font-family:var(--disp); font-size:15px; font-weight:800; line-height:1.2;
  padding:9px 16px; cursor:pointer; text-align:left; animation:gzRein .38s ease-in-out both;
  transition:background-color .2s ease-in-out, border-color .2s ease-in-out; }
.gz-chip.haupt{ background:#F5F7FA; border-color:#F5F7FA; color:#0C1B25; }
@media (hover:hover){
  .gz-chip:hover{ background:rgba(245,247,250,.08); border-color:rgba(245,247,250,.6); }
  .gz-chip.haupt:hover{ background:#DCE3EC; border-color:#DCE3EC; }
}
.gz-chip:focus-visible{ outline:2.5px solid #fff; outline-offset:2px; }
.gz:not(.spielt) .gz-chips{ display:none; }

/* ------------------------------------------------------------ HERO NACHT (Marc, 5.10.2026)
   Nach dem Linie-Mockup: der Hero ist kein lila Kasten mehr, sondern Nachtblau wie die Seite.
   Text oben links, darunter die Illustration in voller Breite mit weich auslaufenden Raendern -
   das Bild ist die Buehne, deshalb ohne Karte. Lila bleibt beim Knopf und bei "Own it.".
   Alle weiteren Bilder und Filme liegen in Karten (unten, KARTEN). */
.hero.hero-nacht{ padding:clamp(28px,5vh,56px) 0 0; }
.hero-nacht .hero-text{ max-width:780px; }
.hero-nacht h1{ font-size:clamp(46px,6.6vw,86px); line-height:1.02; letter-spacing:-.03em; color:var(--ink); }
.hero-nacht h1 span{ display:inline; }
.hero-nacht .hero-zeile{ white-space:nowrap; }
.hero-nacht .hero-own{ display:block; color:var(--lila-schrift); }
@media (max-width:420px){ .hero-nacht h1{ font-size:clamp(40px,12.4vw,48px); } }
.hero-nacht .hero-unter{ color:var(--ink); font-size:clamp(21px,2.2vw,28px); }
.hero-nacht .hero-satz{ color:var(--soft); max-width:40ch; }
.hero-taten{ display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); flex-wrap:wrap; margin:clamp(22px,3vh,32px) 0 0; }
.hero-taten .knopf{ display:inline-flex; align-items:center; min-height:54px; padding:0 28px; border-radius:20px; font-size:17.5px; }
.hero-weiter{ color:var(--lila-schrift); font-weight:800; font-size:18px; text-decoration:none; padding:0 6px; }
.hero-weiter:focus-visible{ outline:2.5px solid var(--lila-schrift); outline-offset:3px; border-radius:8px; }
.hero-kulisse{ position:relative; margin:clamp(16px,3vh,36px) calc(-1 * clamp(20px,4vw,48px)) 0; overflow:hidden; }
.hero-kulisse picture{ display:block; }
.hero-kulisse .illu-bild{ width:100%; height:auto; aspect-ratio:1400/792; border-radius:0; box-shadow:none; max-height:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite:intersect; }
.hero-kulisse > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease-in-out; }
.hero-kulisse.film-laeuft > video{ opacity:1; }
@media (max-width:600px){
  .hero-kulisse .illu-bild{ aspect-ratio:1200/1500; }
}
@media (prefers-reduced-motion:reduce){ .hero-kulisse > video{ transition:none; } }

/* ------------------------------------------------------------ KARTEN (Marc, 5.10.2026)
   "Weitere Bilder und Video bitte als Karte": jedes Bild und jeder Filmplatz ausserhalb des
   Heros ist eine Karte - weich gerundet, feine Kante, flach ohne Schatten (Marc, 5.10.2026),
   wie die Kartenfenster in der App. Die Schlusskarte auf der lila Flaeche bekommt dieselbe Fassung. */
.r3 .video-platz.illu::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.ende3-bildkarte{ position:relative; margin:clamp(28px,5vh,48px) 0 0; width:100%; border-radius:var(--rund-platz); overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.ende3-bildkarte .illu-bild{ width:100%; height:auto; aspect-ratio:16/9; display:block; }

/* ------------------------------------------------------------ PARTNER 2 (5.10.2026)
   Nach dem Mockup: Nachtblau wie die Startseite, das Ergebnis zuerst (echte lebendige
   Karte mit Schild "Dein Name am Deck"), drei Stationen, vier Wege, Creator-Block in
   Lila, verdeckte Beispielkarten, Formular. Ein lila Knopf je Bild. */
.p2-hero.hero-nacht{ padding-bottom:0; }
.p2-hero-innen{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,56px); align-items:center; }
.p2-hero .hero-text{ max-width:620px; }
.p2-stapel{ position:relative; }
.p2-karte.deck-reihe.einzeln{ max-width:min(420px,100%); margin:0 auto; }
.p2-karte .deck-platz{ height:min(560px, 70svh); }
.p2-schild{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:12px; background:#F4F1EA; color:#24303D; border-radius:18px; padding:12px 18px 12px 12px; font-family:var(--ui); font-weight:800; white-space:nowrap; box-shadow:0 20px 40px -16px rgba(0,0,0,.8); }
.p2-schild i{ width:42px; height:42px; border-radius:12px; background:#fff; display:grid; place-items:center; flex:none; }
.p2-schild i svg{ width:24px; height:24px; }
.p2-schild small{ display:block; font-size:12px; color:#6B7684; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.p2-abschnitt{ padding:clamp(64px,9vw,110px) 0 0 !important; }
.p2-abschnitt .kicker{ margin-bottom:10px; }
.p2-reise{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); margin-top:clamp(28px,4vh,44px); position:relative; }
.p2-reise::before{ content:""; position:absolute; left:16%; right:16%; top:clamp(90px,10vw,130px); height:2px; background:repeating-linear-gradient(90deg,var(--lila-schrift) 0 6px,transparent 6px 14px); opacity:.5; pointer-events:none; }
.p2-stat{ position:relative; margin:0; }
.p2-stat .illu-bild{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--rund-platz); box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.p2-nr{ position:absolute; left:16px; top:16px; z-index:2; width:36px; height:36px; border-radius:50%; background:var(--lila); color:#fff; display:grid; place-items:center; font-family:var(--ui); font-weight:900; }
.p2-stat figcaption{ margin-top:14px; }
.p2-stat figcaption b{ display:block; font-family:var(--ui); font-size:clamp(19px,1.6vw,22px); font-weight:900; color:var(--ink); }
.p2-stat figcaption span{ display:block; margin-top:4px; font-size:16px; font-weight:700; line-height:1.5; color:var(--soft); }
.p2-wer{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:clamp(28px,4vh,44px); }
.p2-wk{ display:flex; flex-direction:column; gap:10px; min-height:280px; padding:24px 22px 22px; border-radius:26px; background:var(--card, #202C3A); color:var(--ink); text-decoration:none; box-shadow:0 0 0 1px rgba(255,255,255,.06); transition:background-color .25s ease-in-out, transform .25s ease-in-out; }
@media (hover:hover){ .p2-wk:hover{ background:var(--flaeche-hoch, #2C3D52); transform:translateY(-3px); } }
.p2-wk:focus-visible{ outline:2.5px solid var(--lila-schrift); outline-offset:3px; }
.p2-ik{ width:48px; height:48px; border-radius:50%; background:var(--flaeche-hoch, #2C3D52); display:grid; place-items:center; color:var(--lila-schrift); }
.p2-ik svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.p2-wk b{ font-family:var(--ui); font-size:21px; font-weight:900; line-height:1.2; }
.p2-wk span:not(.p2-ik){ font-size:16px; font-weight:700; line-height:1.5; color:var(--soft); }
.p2-wk em{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.09); font-style:normal; font-size:15px; font-weight:700; color:var(--ink); }
.p2-wk em strong{ color:#57C8A5; font-weight:900; }
.p2-creator{ position:relative; overflow:hidden; isolation:isolate; border-radius:var(--rund); padding:clamp(32px,5vw,64px); margin-top:clamp(28px,4vh,44px); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:center; }
.p2-creator h2{ color:#fff; }
.p2-creator .lead{ max-width:42ch; }
.p2-zahlen{ display:flex; gap:clamp(20px,3vw,36px); margin-top:clamp(22px,3vh,30px); flex-wrap:wrap; }
.p2-zahlen b{ display:block; font-family:var(--ui); font-size:clamp(36px,4vw,48px); line-height:1; font-weight:900; color:#fff; }
.p2-zahlen span{ display:block; margin-top:4px; font-size:14px; font-weight:800; color:rgba(255,255,255,.85); max-width:14ch; }
.p2-cover{ position:relative; aspect-ratio:3/4; width:min(320px,100%); margin:0 auto; border-radius:28px; background:radial-gradient(120% 90% at 20% 0%, #FFE38A 0%, #F8C828 40%, #E59A1C 100%); box-shadow:0 40px 70px -30px rgba(0,0,0,.7); padding:26px; display:flex; flex-direction:column; justify-content:flex-end; color:#2B1D05; transform:rotate(-3deg); font-family:var(--ui); }
.p2-cover b{ font-size:30px; line-height:1; font-weight:900; } .p2-cover small{ display:block; font-weight:800; opacity:.8; font-size:14px; margin-top:6px; }
.p2-von{ position:absolute; top:22px; left:26px; background:rgba(255,255,255,.7); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:900; }
.p2-los{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start; margin-top:clamp(28px,4vh,44px); }
.p2-schritte{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.p2-schritte li{ display:grid; grid-template-columns:44px 1fr; gap:14px; }
.p2-schritte i{ width:40px; height:40px; border-radius:50%; background:var(--flaeche-hoch, #2C3D52); color:var(--ink); display:grid; place-items:center; font-family:var(--ui); font-weight:900; font-style:normal; }
.p2-schritte li:first-child i{ background:var(--lila); color:#fff; }
.p2-schritte b{ display:block; font-family:var(--ui); font-size:19px; font-weight:900; color:var(--ink); }
.p2-schritte span{ display:block; margin-top:4px; font-size:16px; font-weight:700; line-height:1.5; color:var(--soft); }
.p2-schritte a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
.p2-form{ background:var(--card, #202C3A); border-radius:28px; padding:28px; box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.p2-label{ display:block; font-family:var(--ui); font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin:18px 0 8px; }
.p2-form .p2-label:first-child{ margin-top:0; }
.p2-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.p2-chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.p2-chip span{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; background:var(--flaeche-hoch, #2C3D52); font-family:var(--ui); font-size:15px; font-weight:800; color:var(--soft); cursor:pointer; }
.p2-chip input:checked + span{ background:var(--lila); color:#fff; }
.p2-chip input:focus-visible + span{ outline:2.5px solid var(--lila-schrift); outline-offset:2px; }
.p2-feld{ display:block; width:100%; background:var(--paper); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:14px 16px; color:var(--ink); font:700 16px/1.45 var(--ui); min-height:52px; resize:vertical; }
.p2-feld::placeholder{ color:var(--leise, #8794A5); font-weight:700; }
.p2-feld:focus{ outline:2.5px solid var(--lila-schrift); outline-offset:0; border-color:transparent; }
.p2-senden{ display:flex; width:100%; margin-top:22px; justify-content:center; align-items:center; min-height:54px; border:0; border-radius:20px; font:800 17.5px var(--ui); cursor:pointer; }
.p2-form small{ display:block; margin-top:12px; text-align:center; color:var(--leise, #8794A5); font-size:14px; font-weight:700; }
@media (max-width:900px){
  .p2-hero-innen, .p2-creator, .p2-los{ grid-template-columns:1fr; }
  .p2-reise{ grid-template-columns:1fr; } .p2-reise::before{ display:none; }
  .p2-wer{ grid-template-columns:1fr 1fr; }
  .p2-karte .deck-platz{ height:min(520px, 64svh); }
}
@media (max-width:560px){ .p2-wer{ grid-template-columns:1fr; } .p2-schild{ padding:10px 14px 10px 10px; } .p2-schild i{ width:36px; height:36px; } }
/* Partner-Hero: die Zeile "Dein Wissen als Deck." ist laenger als auf der Startseite -
   etwas kleiner, am Handy darf sie umbrechen. */
.p2-hero h1{ font-size:clamp(40px,5.2vw,68px); }
@media (max-width:600px){ .p2-hero .hero-zeile{ white-space:normal; } .p2-hero h1{ font-size:clamp(36px,10.5vw,44px); } }
/* NOTBREMSE (5.10.2026, Marc: "das geht doch so nicht"): Ueberschrift darf immer umbrechen,
   die Hero-Spalte haelt Abstand zur Karte, der Planet ragt frei ueber die Karte hinaus. */
.p2-hero .hero-zeile{ white-space:normal; }
.p2-hero-innen{ grid-template-columns:minmax(0,1fr) minmax(300px,420px); }
.p2-stapel{ padding-top:60px; }
.p2-karte .deck-platz{ height:min(540px, 66svh); }
@media (max-width:900px){ .p2-hero-innen{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------ PARTNER 3, RICHTUNG B (5.10.2026)
   Faecher aus drei Karten der App als Bild (bilder/karten/faecher.webp, 1220 px breit; die
   Karten liegen bei x 108/460/812, y 376, je 300 x 430, der Planet ragt oben heraus). */
.p3-hero.hero-nacht{ padding-bottom:0; }
.p3-hero-innen{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,520px); gap:clamp(24px,4vw,56px); align-items:center; }
.p3-hero h1{ font-size:clamp(40px,5.2vw,68px); } .p3-hero .hero-zeile{ white-space:normal; }
.p3-faecher{ position:relative; height:640px; }
.p3-karte{ position:absolute; left:50%; top:70px; width:300px; height:510px; border-radius:30px; background:url(/bilder/karten/faecher.webp) no-repeat; background-size:1220px auto; box-shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(196,166,255,.16); transform-origin:50% 115%; }
.p3-sonne{ background-position:-108px -296px; transform:translateX(-50%) rotate(-13deg); }
.p3-saturn{ background-position:-812px -296px; transform:translateX(-50%); top:40px; z-index:2; }
.p3-jupiter{ background-position:-460px -296px; transform:translateX(-50%) rotate(13deg); }
.p3-schild{ position:absolute; left:50%; bottom:4px; transform:translateX(-50%); z-index:3; display:block; background:#F4F1EA; color:#24303D; border-radius:18px; padding:12px 20px; font-family:var(--ui); font-weight:800; white-space:nowrap; box-shadow:0 20px 40px -16px rgba(0,0,0,.8); }
.p3-schild small{ display:block; font-size:12px; color:#6B7684; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.p3-kann{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:clamp(28px,4vh,44px); }
.p3-k{ display:flex; flex-direction:column; gap:10px; padding:24px 22px; border-radius:26px; background:var(--card, #202C3A); box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.p3-ik{ width:48px; height:48px; border-radius:50%; background:var(--flaeche-hoch, #2C3D52); display:grid; place-items:center; color:var(--lila-schrift); }
.p3-ik svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.p3-k b{ font-family:var(--ui); font-size:20px; font-weight:900; line-height:1.2; color:var(--ink); }
.p3-k span:not(.p3-ik){ font-size:16px; font-weight:700; line-height:1.5; color:var(--soft); }
.p2-creator h2{ font-size:clamp(28px,3.4vw,42px); }
@media (max-width:900px){ .p3-hero-innen{ grid-template-columns:1fr; } .p3-kann{ grid-template-columns:1fr 1fr; } .p3-faecher{ height:470px; } .p3-karte{ width:240px; height:408px; background-size:976px auto; } .p3-sonne{ background-position:-86px -237px; } .p3-saturn{ background-position:-650px -237px; } .p3-jupiter{ background-position:-368px -237px; } }
@media (max-width:560px){ .p3-kann{ grid-template-columns:1fr; } .p3-faecher{ height:420px; } .p3-karte{ width:200px; height:340px; background-size:813px auto; } .p3-sonne{ background-position:-72px -197px; } .p3-saturn{ background-position:-541px -197px; } .p3-jupiter{ background-position:-307px -197px; } }

/* ------------------------------------------------------------ PARTNER 4, RUHIG (5.10.2026, Marc:
   "die Ruhe von C"). Eine Textspalte (720), Namen nur auf Covern, eigene Zeichen, kaum Kaesten. */
.p4-spalte{ max-width:760px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.p4-mitte{ text-align:center; } .p4-mitte h2{ margin-left:auto; margin-right:auto; max-width:22ch; }
.p4-kopf{ padding:clamp(72px,10vh,120px) 0 0; }
.p4-kopf h1{ margin:0; font-size:clamp(44px,6vw,72px); font-weight:900; line-height:1.02; letter-spacing:-.035em; color:var(--ink); }
.p4-kopf .kicker{ margin-bottom:14px; }
.p4-text{ margin:clamp(16px,2.4vh,22px) 0 0; font-size:clamp(18px,1.6vw,21px); font-weight:700; line-height:1.6; color:var(--soft); max-width:none; }
.p4-text b{ color:var(--ink); font-weight:900; }
.p4-text a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
.p4-kopf .hero-taten{ margin-top:clamp(26px,3.6vh,36px); }
.p4-abschnitt{ padding:clamp(72px,10vw,128px) 0 0 !important; }
.p4-abschnitt .kicker{ margin-bottom:10px; }
.p4-leise{ margin:18px 0 0; font-size:15px; font-weight:700; color:var(--leise, #8794A5); }
/* Cover wie ein Buch: 3:4, Name oben als kleines Etikett, Titel unten. */
.p4-covers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); max-width:960px; margin:clamp(28px,4vh,44px) auto 0; }
.p4-cover{ margin:0; }
.p4-cover-bild{ position:relative; aspect-ratio:3/4; border-radius:24px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; background:#1A2B3D center/cover no-repeat; box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.p4-cover-bild::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,16,24,.92) 0%, rgba(8,16,24,.2) 55%, rgba(8,16,24,0) 100%); }
.p4-cover-bild b{ position:relative; font-family:var(--ui); font-size:clamp(22px,2vw,28px); font-weight:900; line-height:1.08; letter-spacing:-.02em; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.p4-von{ position:absolute; left:16px; top:16px; background:rgba(255,255,255,.92); color:#24303D; border-radius:14px; padding:7px 12px; font-family:var(--ui); font-size:13px; font-weight:900; line-height:1.2; }
.p4-von small{ display:block; font-size:11px; font-weight:800; color:#6B7684; }
.p4-cover figcaption{ margin-top:12px; font-size:15px; font-weight:800; color:var(--soft); text-align:center; }
.p4-zoo .p4-cover-bild{ background-image:url(/bilder/illu/cover-zoo.webp); }
.p4-museum .p4-cover-bild{ background-image:url(/bilder/illu/cover-dino.webp); }
.p4-buch .p4-cover-bild{ background-image:url(/bilder/illu/cover-englisch.webp); }
.p4-creator-cover .p4-cover-bild{ background:radial-gradient(120% 90% at 20% 0%, #A35BFF 0%, #8B36FD 45%, #4C1A9E 100%); }
.p4-creator-cover .p4-cover-bild::after{ content:"?"; position:absolute; right:-4%; top:2%; font-family:var(--ui); font-size:220px; font-weight:900; line-height:1; color:rgba(255,255,255,.14); }
/* Liste mit eigenen Zeichen, kein Kasten */
.p4-liste{ list-style:none; margin:clamp(28px,4vh,40px) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vh,30px) clamp(20px,3vw,36px); }
.p4-liste li{ display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; }
.p4-ik{ width:48px; height:48px; border-radius:50%; background:var(--flaeche-hoch, #2C3D52); display:grid; place-items:center; color:var(--lila-schrift); }
.p4-ik svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.p4-liste b{ display:block; font-family:var(--ui); font-size:19px; font-weight:900; color:var(--ink); line-height:1.25; }
.p4-liste span:not(.p4-ik){ display:block; margin-top:4px; font-size:16px; font-weight:700; line-height:1.5; color:var(--soft); }
.p4-reise{ max-width:1000px; margin-left:auto; margin-right:auto; }
.p4-reise .p2-stat figcaption span{ font-size:15px; }
.p4-wege{ margin:clamp(24px,3.6vh,36px) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vh,30px) clamp(20px,3vw,36px); }
.p4-wege div{ padding-top:16px; border-top:1px solid rgba(255,255,255,.12); }
.p4-wege dt{ font-family:var(--ui); font-size:19px; font-weight:900; color:var(--ink); }
.p4-wege dt a{ color:inherit; text-decoration:none; } .p4-wege dt a:hover{ text-decoration:underline; text-underline-offset:4px; }
.p4-wege dd{ margin:6px 0 0; font-size:16px; font-weight:700; line-height:1.5; color:var(--soft); }
.p4-creator{ display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:clamp(28px,5vw,64px); align-items:center; max-width:960px; }
.p4-creator .p4-cover{ transform:rotate(-3deg); }
.p4-creator h2{ margin-top:0; }
.p4-form{ margin-top:clamp(28px,4vh,40px); }
@media (max-width:760px){ .p4-covers{ grid-template-columns:1fr; max-width:360px; } .p4-liste, .p4-wege{ grid-template-columns:1fr; } .p4-creator{ grid-template-columns:1fr; } .p4-creator .p4-cover{ max-width:280px; margin:0 auto; transform:none; } }

/* Station "Im Handy": echter App-Schirm, hochkant in den 4:3-Rahmen gelegt. */
.p4-reise .p4-app{ object-position:50% 50%; }
.p4-los{ margin-top:clamp(28px,4vh,44px); max-width:1120px; }
.p4-los .p4-text{ font-size:18px; }
/* Luft zwischen Formular und Schluss; Creator-Cover aus Bild statt Verlauf. */
#los.p4-abschnitt{ padding-bottom:clamp(72px,10vw,128px) !important; }
.p4-creator-cover .p4-cover-bild{ background:#0C1B25 url(/bilder/illu/cover-stimmt-das.webp) center/cover no-repeat; }
.p4-creator-cover .p4-cover-bild::after{ content:none; }
/* LUFT (Marc, 5.10.2026: "oben wirkt es zusammengedrueckt"). */
.p4-kopf{ padding-top:clamp(96px,14vh,160px); }
.p4-kopf .p4-text{ margin-top:clamp(20px,3vh,28px); }
.p4-kopf .hero-taten{ margin-top:clamp(34px,5vh,48px); }
.p4-abschnitt{ padding-top:clamp(96px,13vw,160px) !important; }
.p4-abschnitt .kicker{ margin-bottom:14px; }
.p4-covers{ margin-top:clamp(36px,5vh,56px); }
.p4-liste{ margin-top:clamp(36px,5vh,52px); }
.p4-leise{ margin-top:24px; }

/* COVER-TITEL (Marc, 5.10.2026: "der Titel darf cool aussehen"): gross, eng, mit weicher
   Leuchtkante, unten links wie auf einer Spielschachtel. Kein Etikett mehr. */
.p4-cover-bild{ padding:20px 20px 22px; }
.p4-cover-bild::before{ background:linear-gradient(to top, rgba(6,13,22,.96) 0%, rgba(6,13,22,.55) 30%, rgba(6,13,22,0) 58%); }
.p4-cover-bild b{ font-size:clamp(26px,2.4vw,34px); line-height:1.02; letter-spacing:-.03em; text-shadow:0 0 18px rgba(255,214,120,.35), 0 2px 10px rgba(0,0,0,.6); }
.p4-cover-bild b::after{ content:""; display:block; width:38px; height:4px; margin-top:12px; border-radius:2px; background:#F8C828; box-shadow:0 0 12px rgba(248,200,40,.7); }
.p4-creator-cover .p4-cover-bild b::after{ background:#BD92F6; box-shadow:0 0 12px rgba(189,146,246,.8); }

/* COVER JE HERAUSGEBER (Marc, 5.10.2026): ein Zoo wirbt wie ein Zoo, ein Museum editorial,
   ein Verlag neutral wie ein Schulbuch, ein Creator mit Foto wie ein Magazin. Gemeinsam:
   Herausgeber-Zeile oben (klein, wie auf einem Buchruecken), Titel, Unterstrich mit Label. */
.p4-cover-bild{ justify-content:space-between; padding:18px 20px 20px; }
.p4-cover-bild::before{ content:none; }
.p4-heraus{ position:relative; font-family:var(--ui); font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.p4-cover-bild b{ font-size:clamp(28px,2.6vw,36px); text-shadow:none; }
.p4-cover-bild b::after{ content:none; }
.p4-cover-bild em{ position:relative; display:block; margin-top:10px; padding-top:10px; font-style:normal; font-family:var(--ui); font-size:13px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; border-top:3px solid currentColor; width:max-content; min-width:44px; }
/* Zoo: Naturplakat, Text unten auf dunklem Wasser */
.p4-zoo .p4-cover-bild{ background:#0C1B25 url(/bilder/illu/cover-zoo.webp) center/cover; color:#fff; }
.p4-zoo .p4-cover-bild em{ border-color:#F8A14B; }
/* Museum: editorial, Gold auf Nachtblau, Titel oben, Label unten */
.p4-museum .p4-cover-bild{ background:#0C1B25 url(/bilder/illu/cover-dino.webp) center/cover; color:#F2DDA6; }
.p4-museum .p4-cover-bild b{ font-weight:800; letter-spacing:-.01em; }
.p4-museum .p4-cover-bild em{ border-color:#F2DDA6; }
/* Verlag: Schulbuch, hell, neutral, Titel oben, Unit als Unterstrich */
.p4-buch .p4-cover-bild{ background:#F4F1EA url(/bilder/illu/cover-englisch.webp) center/cover; color:#1D2A3A; box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.08); }
.p4-buch .p4-cover-bild b{ font-size:clamp(34px,3.2vw,44px); }
.p4-buch .p4-cover-bild em{ border-color:#8B36FD; color:#8B36FD; font-size:15px; }
/* Creator: Magazin, Foto, grosser Titel ueber dem Kopf */
.p4-creator-cover .p4-cover-bild{ background:#8B36FD url(/bilder/illu/cover-stimmt-das.webp) center 20%/cover; color:#fff; justify-content:flex-start; }
.p4-creator-cover .p4-cover-bild b{ font-size:clamp(36px,3.6vw,48px); line-height:.98; margin-top:6px; text-shadow:0 2px 14px rgba(0,0,0,.25); }
.p4-creator-cover .p4-cover-bild em{ border-color:#F8C828; margin-top:auto; }
/* Titel und Label gehoeren zusammen unten; der Herausgeber allein oben. */
.p4-cover-bild{ justify-content:flex-start; }
.p4-cover-bild b{ margin-top:auto; }
.p4-cover-bild em{ margin-top:12px; }
.p4-creator-cover .p4-cover-bild b{ margin-top:auto; }
.p4-creator-cover .p4-cover-bild em{ margin-top:12px; }
.p4-cover-bild::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,13,22,.92) 0%, rgba(6,13,22,.45) 32%, rgba(6,13,22,0) 55%); }
.p4-buch .p4-cover-bild::before{ background:linear-gradient(to top, rgba(244,241,234,.96) 0%, rgba(244,241,234,.7) 30%, rgba(244,241,234,0) 52%); }
.p4-creator-cover .p4-cover-bild::before{ background:linear-gradient(to top, rgba(40,8,110,.92) 0%, rgba(40,8,110,.4) 35%, rgba(40,8,110,0) 60%); }

/* Je Herausgeber: Zoo = Naturplakat (Titel unten, Himmel frei); Museum = Schaedel mittig, Titel
   unten in Gold, kein Verlauf noetig; Verlag = Schulbuch hell, Titel OBEN wie auf dem Buch, Unit
   als lila Unterstrich unten; Creator = Magazin: Foto, Name als Masthead oben, Titel gross unten. */
.p4-museum .p4-cover-bild::before{ background:none; }
.p4-museum .p4-cover-bild{ background-position:center 42%; }
.p4-buch .p4-cover-bild{ background-position:center; }
.p4-buch .p4-cover-bild::before{ background:none; }
.p4-buch .p4-cover-bild b{ margin-top:6px; }
.p4-buch .p4-cover-bild em{ margin-top:auto; }
.p4-creator-cover .p4-cover-bild{ background-position:center 15%; }
.p4-creator-cover .p4-cover-bild::before{ background:linear-gradient(to top, rgba(40,8,110,.85) 0%, rgba(40,8,110,.3) 30%, rgba(40,8,110,0) 50%); }
.p4-creator-cover .p4-heraus{ font-size:15px; letter-spacing:.2em; }

/* DER BRIEF (Richtung C, Marc 5.10.2026: "den Brief ganz ganz toll"). */
.p4-brief .p4-text{ font-size:clamp(19px,1.7vw,22px); line-height:1.62; }
.p4-unter{ display:flex; align-items:center; gap:14px; margin:clamp(28px,4vh,40px) 0 0; }
.p4-okto{ width:52px; height:52px; border-radius:50%; background:var(--lila); display:grid; place-items:center; flex:none; }
.p4-okto svg{ width:30px; height:30px; fill:#fff; }
.p4-unter b{ display:block; font-family:var(--ui); font-size:18px; font-weight:900; color:var(--ink); }
.p4-unter small{ display:block; font-size:15px; font-weight:700; color:var(--leise, #8794A5); }
.p4-zoo .p4-cover-bild{ background-image:url(/bilder/illu/cover-zoo.webp); background-position:center 30%; }
/* Zoo-Cover: Fotomotiv, Herausgeber-Zeile braucht einen leisen Schatten oben. */
.p4-zoo .p4-cover-bild::after{ content:""; position:absolute; left:0; right:0; top:0; height:30%; background:linear-gradient(to bottom, rgba(6,13,22,.55), rgba(6,13,22,0)); }
.p4-zoo .p4-heraus{ z-index:1; }

/* ------------------------------------------------------------ COVER-KARTEN ZUM UMDREHEN (5.10.2026)
   Marc: "die Rueckseiten muessen das ganze Ding verkaufen: Quartett, Raetsel, Vokabel mit
   Beispielsatz, richtig schicki". Vorn das Cover, hinten eine echte Karte in derselben
   Farbwelt. Umdrehen und Neigen mit karteLenken aus der App (karten.js). */
.p5-covers{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1120px; gap:clamp(14px,2vw,24px); perspective:1400px; }
.p5-karte.sk-karte{ position:relative; left:auto; top:auto; width:100%; height:auto; aspect-ratio:3/4; border-radius:24px; }
.p5-karte .sk-seite{ border-radius:24px; overflow:hidden; }
.p5-karte .p4-cover-bild{ position:absolute; inset:0; aspect-ratio:auto; border-radius:24px; }
.p5-rueck{ position:absolute; inset:0; display:flex; flex-direction:column; padding:20px; border-radius:24px; font-family:var(--ui); color:#fff; background:#13233A; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.p5-r-kopf{ font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.p5-r-titel{ margin-top:8px; font-size:clamp(22px,1.9vw,26px); font-weight:900; line-height:1.1; letter-spacing:-.02em; }
.p5-r-sub{ margin-top:4px; font-size:14px; font-weight:800; opacity:.75; }
.p5-r-text{ margin:12px 0 0; font-size:14px; font-weight:700; line-height:1.45; opacity:.9; }
.p5-r-text i{ font-style:normal; font-weight:900; }
.p5-r-satz{ margin:14px 0 0; font-size:17px; font-weight:800; line-height:1.35; }
.p5-r-fuss{ margin-top:auto; padding-top:12px; font-size:13px; font-weight:800; opacity:.7; }
.p5-r-antwort, .p5-r-urteil{ display:inline-block; margin-top:14px; padding:8px 14px; border-radius:999px; font-size:16px; font-weight:900; width:max-content; }
.p5-wert{ margin-top:12px; } .p5-wert span{ display:flex; justify-content:space-between; font-size:14px; font-weight:800; } .p5-wert b{ font-size:16px; }
.p5-wert i{ display:block; margin-top:6px; height:8px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden; }
.p5-wert em{ display:block; height:100%; width:0; border-radius:4px; background:currentColor; transition:width .8s cubic-bezier(.65,0,.35,1) .35s; }
.sk-karte[data-um] .p5-wert em{ width:var(--w); }
.p4-zoo .p5-rueck{ background:linear-gradient(160deg,#2B2118 0%,#13233A 70%); color:#FFE7C2; }
.p4-zoo .p5-wert em{ background:#F8A14B; }
.p4-museum .p5-rueck{ background:#0C1B25; color:#F2DDA6; box-shadow:inset 0 0 0 1px rgba(242,221,166,.25); }
.p4-museum .p5-r-antwort{ background:#F2DDA6; color:#0C1B25; }
.p4-buch .p5-rueck{ background:#F4F1EA; color:#1D2A3A; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.p4-buch .p5-r-kopf{ color:#8B36FD; opacity:1; }
.p4-buch .p5-r-satz{ color:#8B36FD; }
.p4-creator-cover .p5-rueck{ background:linear-gradient(160deg,#A35BFF 0%,#8B36FD 50%,#5A1FB8 100%); }
.p4-creator-cover .p5-r-urteil{ background:#F8C828; color:#2B1D05; }
.p4-creator-cover .p5-r-titel{ font-size:clamp(19px,1.6vw,22px); }
.p5-drei{ margin:clamp(28px,4vh,40px) 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,32px); }
.p5-drei dt{ font-family:var(--ui); font-size:19px; font-weight:900; color:var(--ink); padding-top:14px; border-top:3px solid var(--lila-schrift); }
.p5-drei dd{ margin:8px 0 0; font-size:16px; font-weight:700; line-height:1.5; color:var(--soft); }
@media (max-width:900px){ .p5-covers{ grid-template-columns:1fr 1fr; } .p5-drei{ grid-template-columns:1fr; } }
@media (max-width:560px){ .p5-covers{ grid-template-columns:1fr; max-width:340px; } }

.p4-creator-cover .p4-cover-bild b{ font-size:clamp(30px,2.6vw,36px); }

/* DER BRIEF, pur (5.10.2026): ein Bild zwischen den Absaetzen, breiter als die Spalte. */
.p6-bild{ max-width:1000px; margin:clamp(40px,6vh,64px) auto 0; padding:0 clamp(20px,4vw,48px); }
.p6-bild img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:50% 38%; border-radius:var(--rund-platz); box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.p6-bild figcaption{ margin-top:12px; text-align:center; font-size:15px; font-weight:700; color:var(--leise, #8794A5); }
.p6-weiter{ padding-top:clamp(40px,6vh,64px) !important; }
.p4-leise a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
#los.p4-abschnitt{ padding-top:clamp(48px,7vh,72px) !important; }

/* Brief-Layout wie Mockup C: Zahlen-Zeile, Unterschrift ohne Logo. */
.p6-zahlen{ max-width:760px; margin:clamp(48px,7vh,72px) auto 0; padding:0 clamp(20px,4vw,48px); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.p6-zahlen b{ display:block; font-family:var(--ui); font-size:clamp(34px,3.4vw,42px); line-height:1; font-weight:900; color:var(--ink); }
.p6-zahlen span{ display:block; margin-top:6px; font-size:15px; font-weight:700; color:var(--leise, #8794A5); }
.p4-unter{ gap:0; }
#los.p4-abschnitt{ padding-top:clamp(40px,6vh,56px) !important; }
@media (max-width:560px){ .p6-zahlen{ gap:12px; } .p6-zahlen b{ font-size:28px; } }

/* WAS HEUTE FUNKTIONIERT (15.10.2026) - fuenf ruhige Kacheln, gleiche Hand wie das Menue */
.lernen5{ padding:clamp(56px,9vh,96px) 0 clamp(24px,4vh,40px); }
.r3 main#oben .lernen5 h2{ font-size:clamp(28px,3.6vw,44px); text-align:center; margin:0 0 clamp(24px,4vh,36px); text-wrap:balance; }
.lern-reihe{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
.lern-k{ display:flex; flex-direction:column; gap:6px; padding:20px 18px 22px; border-radius:24px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(196,166,255,.14); }
.lern-k svg{ color:var(--lila-schrift, #C4A6FF); margin-bottom:6px; }
.lern-k b{ font-size:17px; }
.lern-k span{ font-size:14px; line-height:1.4; opacity:.72; }
@media (max-width:900px){ .lern-reihe{ grid-template-columns:repeat(2, minmax(0,1fr)); } .lern-k:last-child{ grid-column:1 / -1; } }
/* Create-Hinweis */
.create5{ padding:clamp(56px,9vh,96px) 0 0; text-align:center; }
.create5 .lead{ margin-left:auto; margin-right:auto; max-width:34ch; }
.create5 .leise-knopf{ display:inline-flex; align-items:center; margin-top:clamp(18px,3vh,28px); }
.r3 main#oben .create5 h2{ font-size:clamp(28px,3.6vw,44px); text-wrap:balance; }
/* Schluss leise: kein Lila-Platz, kein Riesentitel */
.ende-leise{ padding:clamp(64px,10vh,110px) 0 !important; background:none; }
.r3 main#oben .ende-leise h2{ font-size:clamp(28px,3.6vw,44px); }

/* Wuerfeln wie in der App (WuerfelZeichen) */
.knopf-wuerfel{ display:inline-flex; align-items:center; gap:8px; }
.knopf-wuerfel svg{ width:20px; height:20px; flex:none; }