/* Quicksand selbst ausgeliefert (vorher Google): kommt mit der Seite und aus dem Cache, damit die
   Pillen nicht nach dem ersten Bild ihre Breite ändern (die zentrierte Kopfleiste rutschte sonst) */
@font-face{font-family:'Quicksand';font-weight:300 700;font-display:swap;src:url(fonts/Quicksand-latin.woff2) format('woff2')}
@font-face{font-family:'Playwrite DE Grund';font-weight:200;font-display:swap;src:url(fonts/PlaywriteDEGrund-ExtraLight.woff2) format('woff2')}
@font-face{font-family:'Playwrite DE Grund';font-weight:400;font-display:swap;src:url(fonts/PlaywriteDEGrund-Regular.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:200;font-display:swap;src:url(fonts/Roboto-ExtraLight.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:400;font-display:swap;src:url(fonts/Roboto-Regular.woff2) format('woff2')}

:root{
  /* Blau = CI aus tokens/colors.css (--kg-blue-500/600/50/200). Das Mockup-Blau
     #416FE0 liegt Richtung Violett und ist per Schalter „Blau: Mockup“ zu sehen. */
  --blau:#0573F0;
  --blau-rgb:5,115,240;
  --blau-tief:#0161D8;
  --blau-hell:#EAF3FE;
  --grund:#FCFBF9;
  --grund-mitte:#EEF5FE;
  --grund-mitte2:#D6E8FD;
  --grund-unten:#A9CFFB;
  --weiss:#FFFFFF;
  --tinte:#1E3A8A;
  --rot:#D6336C;
  --gruen:#1F9D6B;
  --r-karte:40px;
  --r-mittel:22px;
  --breite:1298px;   /* 1.10.2026: +10 % (war 1180) */
  --rand:clamp(16px,4vw,48px);
  --kopf:'Quicksand',system-ui,sans-serif;   /* 4.10.2026: Kit Rounded ersetzt (Lizenz abgelaufen) */
  --text:'Playwrite DE Grund',system-ui,sans-serif;
  --klein:'Roboto',system-ui,sans-serif;
}
html[data-blau="mockup"]{ --blau:#416FE0; --blau-rgb:65,111,224; --blau-tief:#2C55C4; --blau-hell:#E9EFFC;
  --grund-mitte:#EEF2FB; --grund-mitte2:#D7E1F8; --grund-unten:#A7BCF1; }
html[data-design="b"]{ --kopf:'Quicksand',system-ui,sans-serif; }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h,76px) + 12px)}
body{margin:0;color:var(--blau);font-family:var(--text);font-weight:200;font-size:16px;line-height:1.65;
  background:linear-gradient(180deg,var(--grund) 0,var(--grund) 900px,var(--grund-mitte) 2600px,var(--grund-mitte2) 5200px,var(--grund-unten) 100%);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}

/* ---------- Typo ---------- */
.kicker{font-family:var(--klein);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);opacity:.85;margin-bottom:10px}
.h1,.h2,.h3{font-family:var(--kopf);font-weight:700;text-transform:uppercase;color:var(--blau);margin:0;line-height:.98;letter-spacing:.005em}
html[data-design="b"] .h1,html[data-design="b"] .h2,html[data-design="b"] .h3{font-weight:900;letter-spacing:.01em;line-height:1}
.h1{font-size:clamp(40px,5.6vw,72px)}
.h2{font-size:clamp(32px,4.2vw,54px)}
.h3{font-size:clamp(20px,2vw,26px);line-height:1.08}
.lead{font-size:clamp(15px,1.35vw,18px);line-height:1.6;max-width:56ch;margin-top:14px}
.zentriert{text-align:center}
.zentriert .lead{margin-left:auto;margin-right:auto}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 26px;border-radius:8px;
  font-family:var(--text);font-weight:400;font-size:14px;text-decoration:none;cursor:pointer;border:1.5px solid var(--blau);
  transition:transform .25s cubic-bezier(.32,1.24,.44,1),background .2s,color .2s}
.btn:active{transform:scale(.96)}
.btn-voll{background:var(--blau);color:#fff}
.btn-voll:hover{background:var(--blau-tief);border-color:var(--blau-tief)}
.btn-linie{background:transparent;color:var(--blau)}
.btn-linie:hover{background:var(--blau-hell)}
.btn-pille{border-radius:999px}
html[data-design="b"] .btn{border-radius:999px}

/* ---------- Kopf ---------- */
.kopfzeile{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--grund) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kopfzeile .wrap{display:flex;align-items:center;gap:24px;height:76px;max-width:1452px}
.logo{display:block;width:130px;height:38.5px;background:var(--blau);-webkit-mask:url(assets/logo.svg) no-repeat left center/contain;mask:url(assets/logo.svg) no-repeat left center/contain;flex:0 0 auto}
.nav{flex:1;display:flex;justify-content:center;gap:clamp(12px,1.8vw,26px)}
.nav a{text-decoration:none;font-size:13px;font-weight:200;white-space:nowrap;padding:6px 2px;border-bottom:1px solid transparent}
.nav a:hover{border-color:currentColor}
.kopfzeile .btn{min-height:40px;padding:0 22px;font-size:13px}
@media (max-width:900px){.nav{display:none}.kopfzeile .wrap{justify-content:space-between}}

/* ---------- Abschnitte ---------- */
section{position:relative}
.abschnitt{padding:clamp(72px,10vw,140px) 0}
.statement{max-width:900px;margin:0 auto}

/* Hero */
.hero-raster{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(20px,4vw,56px);max-width:1386px;padding-top:24px}
.hero-bild{position:relative;aspect-ratio:1/1;max-width:660px;justify-self:center;width:100%}
.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s}
.hero-bild .bild-a{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 48%,#000 78%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 48%,#000 78%,transparent 100%)}
.hero-bild .bild-b{opacity:0}
html[data-design="b"] .hero-bild .bild-b,html[data-look="app"] .hero-bild .bild-b{opacity:1}
html[data-design="b"] .hero-bild .bild-a,html[data-look="app"] .hero-bild .bild-a{opacity:0}
.hero .knopfreihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.vertrauen{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-family:var(--klein);font-size:12px;letter-spacing:.04em}
.vertrauen span{display:inline-flex;align-items:center;gap:6px}
.vertrauen i{font-size:15px}
@media (max-width:900px){.hero-raster{grid-template-columns:1fr}.hero-bild{order:-1;max-width:440px}}

/* Partner */
.partner{padding:28px 0 0}
.partner p{text-align:center;font-size:14px;max-width:62ch;margin:0 auto}
.logoreihe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 44px;margin-top:24px}
.logoreihe img{height:34px;width:auto;opacity:.6;filter:grayscale(1);transition:opacity .2s,filter .2s}
.logoreihe img:hover{opacity:1;filter:none}

/* ---------- Karten ---------- */
.karte{position:relative;background:var(--weiss);border-radius:var(--r-karte);padding:clamp(24px,3.4vw,44px);box-shadow:0 1px 0 rgba(var(--blau-rgb),.06)}
.karte-gross{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center;padding:14px 14px 14px clamp(24px,4vw,56px)}
.karte-gross .text{padding:28px 0}
@media (max-width:860px){.karte-gross{grid-template-columns:1fr;padding:14px}.karte-gross .text{padding:18px 14px 6px}}

.panel{position:relative;border-radius:calc(var(--r-karte) - 8px);overflow:hidden;background:var(--blau);aspect-ratio:1/1.02}
.panel img{width:100%;height:100%;object-fit:cover;transform:scale(1.035)}
.panel .bild-a,.panel .bild-b{position:absolute;inset:0;transition:opacity .45s}
.panel .bild-b{opacity:0}
html[data-design="b"] .panel .bild-b{opacity:1}
html[data-design="b"] .panel .bild-a{opacity:0}

/* Design B: Wolkenkante + Vorlese-Knopf an jeder Karte */
.wolkenkante{display:none}
html[data-design="b"] .karte.mit-wolke{margin-bottom:46px}
html[data-design="b"] .karte.mit-wolke .wolkenkante{display:block;position:absolute;left:0;right:0;bottom:-40px;height:52px;pointer-events:none;
  background:radial-gradient(circle at 50% 0,rgba(255,255,255,.7) 57px,transparent 58px) 0 0/ 116px 116px repeat-x;
  border-radius:0 0 var(--r-karte) var(--r-karte);z-index:-1}
.vorlesen{display:none}
html[data-design="b"] .karte.mit-wolke .vorlesen{display:grid;place-items:center;position:absolute;left:clamp(16px,2.4vw,28px);bottom:-30px;width:56px;height:56px;border-radius:50%;
  background:#fff;border:2px solid var(--blau);color:var(--blau);font-size:25px;cursor:pointer;box-shadow:0 0 0 10px #fff;z-index:2;
  transition:transform .25s cubic-bezier(.32,1.24,.44,1)}
html[data-design="b"] .karte.mit-wolke .vorlesen:active{transform:scale(.92)}
html[data-design="b"] .karte.mit-wolke .vorlesen[aria-pressed="true"]{background:var(--blau);color:#fff}
/* Wolken im Panel stecken in panel-b.jpg selbst */

/* ---------- Reiter unter einer Karte ----------
   Die Karte ist der Inhalt, die Reiter hängen unten dran wie Karteireiter:
   der aktive ist weiß und geht in die Karte über, die anderen sind durchscheinend.
   A: Reiter mit runden Ecken · B: Wolkenbögen wie im Mockup KGPT-01. */
.mit-reitern{position:relative;margin-bottom:0}
.mit-reitern .karte{border-bottom-left-radius:var(--r-karte);border-bottom-right-radius:var(--r-karte)}
.reiterleiste{display:flex;gap:6px;padding:0 clamp(18px,3vw,40px);margin-top:-1px;position:relative;z-index:1}
.reiter{flex:0 1 128px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:74px;padding:6px 8px 10px;
  border:0;background:var(--blau-hell);color:var(--blau);font-family:var(--text);font-size:12px;line-height:1.15;cursor:pointer;
  border-radius:0 0 20px 20px;transition:background .2s,transform .25s cubic-bezier(.32,1.24,.44,1),height .25s cubic-bezier(.32,1.24,.44,1)}
.reiter i{font-size:22px}
.reiter span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.reiter:hover{background:color-mix(in srgb,var(--blau-hell) 50%,#fff)}
.reiter[aria-selected="true"]{background:#fff;height:82px}
.reiter[aria-selected="true"] i{color:#fff;background:var(--blau);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:19px}
.reiter:active{transform:scale(.95)}
html[data-design="b"] .reiterleiste{gap:0}
html[data-design="b"] .reiter{flex:0 1 118px;height:66px;border-radius:0 0 59px 59px}
html[data-design="b"] .reiter[aria-selected="true"]{background:#fff;height:78px}
html[data-design="b"] .mit-reitern .wolkenkante,html[data-design="b"] .mit-reitern .vorlesen{display:none}
@media (max-width:640px){.reiter span{display:none}.reiter{height:60px}.reiter[aria-selected="true"],html[data-design="b"] .reiter[aria-selected="true"]{height:66px}html[data-design="b"] .reiter{height:56px}}

/* ---------- Funktionen ---------- */
.symbolreihe{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 44px}
@media (max-width:700px){.symbolreihe{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:22px calc(-1 * var(--rand)) 30px;padding:4px var(--rand)}.symbolreihe::-webkit-scrollbar{display:none}.symbol{flex:0 0 auto}}
.symbol{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 6px;border-radius:999px;border:1.2px solid var(--blau);background:transparent;
  color:var(--blau);font-family:var(--text);font-size:13px;cursor:pointer;transition:background .2s,color .2s,transform .25s cubic-bezier(.32,1.24,.44,1)}
.symbol i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blau-hell);font-size:18px;transition:background .2s}
.symbol:hover{background:var(--blau-hell)}
.symbol[aria-selected="true"]{background:var(--blau);color:#fff}
.symbol[aria-selected="true"] i{background:rgba(255,255,255,.18)}
.symbol:active{transform:scale(.95)}
.videopanel{background:linear-gradient(160deg,#F4F7FE,#E3EBFC)}
.videopanel video{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:none}
.feature-text{transition:opacity .25s}
.feature-text.wechselt{opacity:0}

/* ---------- Raster ---------- */
.raster{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:48px}
.raster-2{grid-template-columns:repeat(2,1fr)}
.raster-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.raster-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.raster,.raster-2{grid-template-columns:1fr}}
@media (max-width:560px){.raster-4{grid-template-columns:1fr}}
.kachel{background:#fff;border-radius:var(--r-mittel);padding:26px 24px}
.kachel .rund{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blau-hell);font-size:25px;margin-bottom:16px}
.kachel .h3{font-size:clamp(17px,1.6vw,21px)}
.kachel p{font-size:14px;margin-top:10px}
.kachel.nein .rund{background:#FDE9EF;color:var(--rot)}

/* ---------- Welten ---------- */
.welten-kopf{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px}
.welten-bahn{--einzug:max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand)));display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px var(--einzug) 8px;
  scroll-padding-left:var(--einzug);margin:0 calc(50% - 50vw);scrollbar-width:none}
.welten-bahn::-webkit-scrollbar{display:none}
.welt{flex:0 0 clamp(200px,20vw,270px);aspect-ratio:1;border-radius:22px;overflow:hidden;position:relative;scroll-snap-align:start;
  transition:transform .35s cubic-bezier(.32,1.24,.44,1)}
.welt:hover{transform:translateY(-6px) rotate(-1deg)}
.welt:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
.welt img{width:100%;height:100%;object-fit:cover}
.welt .marke{position:absolute;right:10px;top:10px;background:rgba(40,40,60,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;
  font-family:var(--klein);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.welt .name{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;color:#fff;font-family:var(--kopf);font-weight:700;font-size:19px;line-height:1.05;
  background:linear-gradient(transparent,rgba(10,20,50,.72))}
html[data-design="b"] .welt .name{font-weight:900}
.pfeile{display:flex;gap:10px}
.pfeil{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--blau);background:transparent;color:var(--blau);font-size:20px;display:grid;place-items:center;cursor:pointer}
.pfeil:hover{background:var(--blau-hell)}
@media (max-width:700px){.welten-kopf{grid-template-columns:1fr}.pfeile{display:none}}

/* ---------- Sicherheit / Chat ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{border:1.2px solid var(--blau);background:transparent;color:var(--blau);border-radius:999px;padding:8px 14px;font-family:var(--text);font-size:13px;cursor:pointer;text-align:left}
.chip[aria-pressed="true"]{background:var(--blau);color:#fff}
.chat{background:var(--grund);border-radius:28px;padding:24px;min-height:260px}
.chat .kat{font-family:var(--klein);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;display:inline-block;padding:4px 10px;border-radius:999px;background:var(--blau-hell)}
.blase{background:rgba(var(--blau-rgb),.1);border-radius:24px 24px 8px 24px;padding:12px 16px;margin-left:auto;max-width:78%;font-weight:400;width:fit-content}
.antwort{margin-top:16px;display:flex;gap:12px;align-items:flex-start}
.antwort img{width:40px;height:40px;flex:0 0 40px}
.antwort p{font-weight:400}
.hinweis{display:flex;gap:10px;align-items:center;margin-top:20px;font-size:13px}
.hinweis i{color:var(--gruen);font-size:18px}
.klein{font-size:12.5px;opacity:.85;margin-top:14px}
.antwort,.chat .blase,.chat .kat{animation:auf .45s cubic-bezier(.2,.8,.3,1) both}
.antwort{animation-delay:.25s}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Eltern ---------- */
.haken{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.haken li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.haken i{flex:0 0 auto;margin-top:3px;color:var(--gruen)}
.haken li.nein i{color:rgba(var(--blau-rgb),.4)}
.haken li.nein{opacity:.55}
.eltern-chat{background:#EAF6F0;border-radius:28px;padding:22px;color:#155C40}
.eltern-chat .kat{background:#fff;color:#155C40}
.eltern-chat .blase{background:#fff;color:#155C40}
.box-hinweis{border:1.2px dashed rgba(var(--blau-rgb),.5);border-radius:18px;padding:14px 16px;font-size:13px;margin-top:20px}

/* ---------- Schritte ---------- */
.schritte{display:grid;gap:18px;margin-top:26px}
.schritt{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.schritt b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blau);color:#fff;font-family:var(--kopf);font-size:20px;font-weight:700}
.schritt .h3{font-size:20px;margin-top:10px}
.schritt p{font-size:14.5px;margin-top:4px}

/* ---------- Preise ---------- */
.preis{display:flex;flex-direction:column}
.preis.top{background:var(--blau);color:#fff}
.preis.top .haken i{color:#C8F25A}
.preis.top .haken li.nein i{color:rgba(255,255,255,.4)}
.preis.top .btn{background:#fff;color:var(--blau);border-color:#fff}
.preis .betrag{font-family:var(--kopf);font-weight:700;font-size:52px;line-height:1;margin-top:14px}
html[data-design="b"] .preis .betrag{font-weight:900}
.preis .betrag small{font-family:var(--text);font-weight:200;font-size:15px}
.preis .alt{text-decoration:line-through;opacity:.6;font-size:14px}
.preis .unter{font-size:12.5px;margin-top:6px;min-height:40px}
.preis .btn{margin-top:auto}
.preis .haken{margin:22px 0 26px}
.band{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#C8F25A;color:#1E3A8A;font-family:var(--klein);font-size:11px;letter-spacing:.12em;padding:5px 12px;border-radius:999px;white-space:nowrap}

/* ---------- Stimmen ---------- */
.sterne{color:#F2B705;letter-spacing:2px}
.bewertung{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:#fff;border-radius:999px;padding:10px 18px;font-size:14px}
.stimme blockquote{margin:10px 0 18px;font-weight:400;font-size:14.5px}
.stimme .wer{font-family:var(--klein);font-size:12px;opacity:.8}
.stimme .h3{font-size:18px}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:44px auto 0;display:grid;gap:10px}
.faq details{background:#fff;border-radius:22px;padding:0 24px;transition:background .2s}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-weight:400;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--blau-hell);transition:transform .3s cubic-bezier(.32,1.24,.44,1)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;font-size:14.5px;max-width:70ch}

/* ---------- Schluss ---------- */
.cta{background:var(--blau);color:#fff;text-align:center;overflow:hidden}
.cta .h2{color:#fff}
.cta .lead{color:#fff}
.stores{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.stores img{height:48px;width:auto}
.institution{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}


/* ---------- Einblenden ---------- */
.rv-an .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.rv-an .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv-an .rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}}

/* =====================================================================
   VARIANTE C · Scroll-Film
   Aufbau wie A, dazwischen drei Filmstrecken: die Strecke ist 340vh hoch, die
   Bühne klebt 100vh lang, der Scrollweg IST die Zeitachse des Clips. Der Clip
   beginnt als abgerundete Karte und wächst beim Eintauchen auf volle Fläche.
   Der Clip liegt als Einzelbild-Folge vor (assets/film/<id>/001…124.jpg) und
   wird auf ein Canvas gezeichnet: ein Video zu scrubben scheitert in Safari/iOS
   (zeichnet ohne vorheriges Abspielen keine neuen Bilder).
   ===================================================================== */
.scrollfilm{display:none}
html[data-film="an"] .scrollfilm{display:block;position:relative;height:340vh}
.film-buehne{position:sticky;top:var(--kopf-h,76px);height:calc(100vh - var(--kopf-h,76px));overflow:hidden}
.film-rahmen{position:absolute;inset:0;overflow:hidden;will-change:clip-path;
  clip-path:inset(var(--film-oben,120px) var(--film-x,7vw) var(--film-unten,6vh) var(--film-x,7vw) round var(--film-r,40px));background:#0B1B3F}
.film-rahmen canvas,.film-rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-rahmen::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,55,.18) 0,transparent 28%,transparent 42%,rgba(8,20,55,.72) 100%);pointer-events:none}
.film-text{position:absolute;left:max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand)));right:var(--rand);bottom:14vh;max-width:760px;color:#fff;
  opacity:0;transform:translateY(24px);will-change:opacity,transform;z-index:2}
.scrollfilm .film-text .kicker{color:#fff;opacity:.9}
.scrollfilm .film-text .h2{color:#fff;font-size:clamp(30px,4.4vw,60px);text-shadow:0 2px 24px rgba(5,15,45,.55)}
.film-text p{text-shadow:0 1px 14px rgba(5,15,45,.6)}
.film-text p{font-size:clamp(16px,1.5vw,20px);margin-top:12px;max-width:52ch;font-weight:400}
.film-hinweis{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);z-index:2;color:#fff;font-family:var(--klein);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .3s}
.film-hinweis i{font-size:20px;animation:film-nicken 1.6s ease-in-out infinite}
@keyframes film-nicken{50%{transform:translateY(5px)}}
.film-leiste{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:2}
.film-leiste b{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(var(--film-p,0))}
@media (prefers-reduced-motion:reduce){html[data-film="an"] .scrollfilm{height:auto}.film-buehne{position:relative;height:80vh}.film-rahmen{clip-path:none}.film-text{opacity:1;transform:none;position:relative}}

/* =====================================================================
   VARIANTE D · Designsprache der App (KinderGPT-Kit / Kiluni)
   Quicksand 700/600 · CI-Blau · Pastellflächen statt Schatten · Pillenleiste
   mit wanderndem Blau (Feder .32,1.24,.44,1) · Kopf mit weicher Kante ·
   Federn beim Drücken · Antworten als Sheet · Nina antwortet ohne Blase.
   ===================================================================== */
html:not([data-look="app"]) .app-nur{display:none!important}
html[data-look="app"] .app-weg{display:none!important}
html[data-look="app"]{--kopf:'Quicksand',system-ui,sans-serif;--text:'Quicksand',system-ui,sans-serif;--klein:'Quicksand',system-ui,sans-serif;
  --pastel:rgba(var(--blau-rgb),.08);--pastel-2:rgba(var(--blau-rgb),.14);--r-karte:28px;--r-mittel:22px;
  --feder:cubic-bezier(.32,1.24,.44,1);--sanft:cubic-bezier(.2,.8,.3,1)}
html[data-look="app"] body{font-weight:600;color:var(--blau-tief);background:linear-gradient(180deg,var(--grund) 0,var(--grund) 800px,#EEF1F8 4000px,#DBE1EC 100%)}
html[data-look="app"] .h1,html[data-look="app"] .h2,html[data-look="app"] .h3{text-transform:none;font-weight:700;letter-spacing:-.015em;line-height:1.08;color:var(--blau)}
html[data-look="app"] .h1{font-size:clamp(40px,5.2vw,66px)}
html[data-look="app"] .h2{font-size:clamp(28px,3.4vw,44px)}
html[data-look="app"] .kicker{font-weight:700;letter-spacing:.08em;font-size:11px}
html[data-look="app"] .lead{font-weight:600;color:var(--blau-tief);opacity:.85}
/* Knöpfe: Primär 56 hoch, Sekundär 52 auf Pastell, beide Pille, Feder beim Loslassen */
html[data-look="app"] .btn{min-height:52px;border-radius:999px;border:0;font-weight:700;font-size:16px;padding:0 26px;
  transition:transform var(--spring-press-dur) var(--spring-press),background .2s}
html[data-look="app"] .btn:active{transform:scale(.96);transition:transform 90ms ease-out}
html[data-look="app"] .btn-voll{min-height:56px;background:var(--blau)}
html[data-look="app"] .btn-linie{background:var(--pastel);color:var(--blau)}
html[data-look="app"] .btn-linie:hover{background:var(--pastel-2)}
html[data-look="app"] .kopfzeile .btn{min-height:44px;font-size:14px}
/* Kopf: deckend, darunter die weiche Kante (KopfFade 28 px, 6 px Vorlauf) statt Blur */
html[data-look="app"] .kopfzeile{background:var(--grund);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-look="app"] .kopfzeile::after{content:'';position:absolute;left:0;right:0;top:100%;height:28px;pointer-events:none;
  background:linear-gradient(var(--grund) 0,var(--grund) 6px,rgba(252,251,249,.55) 45%,rgba(252,251,249,0) 100%)}
html[data-look="app"] .hero-bild .bild-b{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%)}
html[data-look="app"] .nav{display:none}
html[data-look="app"] .kopfzeile .wrap{justify-content:space-between}
/* Pillenleiste mit wanderndem Blau: Abschnitte als Filter, Scrollspy setzt die Auswahl */
#kopfPillen{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 26px;margin-bottom:-22px}
.pillen::-webkit-scrollbar{display:none}
.pillen .marke-d{position:absolute;left:0;top:4px;height:44px;width:0;border-radius:999px;background:var(--blau);z-index:0;
  transition:transform .42s var(--feder,cubic-bezier(.32,1.24,.44,1)),width .42s var(--feder,cubic-bezier(.32,1.24,.44,1));box-shadow:0 8px 20px rgba(var(--blau-rgb),.28)}
.pille-d{position:relative;z-index:1;flex:0 0 auto;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--pastel);color:var(--blau);
  font:700 15px/1 'Quicksand',system-ui,sans-serif;cursor:pointer;transition:color .2s,transform var(--spring-press-dur) var(--spring-press)}
.pille-d[aria-selected="true"]{color:#fff;background:transparent}
.pille-d:active{transform:scale(.95);transition:transform 90ms ease-out}
.kopf-pillen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand) 10px}
html[data-look="app"] .symbolreihe{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:8px;margin:26px 0 8px;padding:4px 2px 26px;overflow-x:auto}
html[data-look="app"] .symbol{border:0;background:var(--pastel);font:700 15px/1 'Quicksand',sans-serif;padding:0 20px;min-height:44px;position:relative;z-index:1;flex:0 0 auto}
html[data-look="app"] .symbol i{display:none}
html[data-look="app"] .symbol[aria-selected="true"]{background:transparent;color:#fff}
html[data-look="app"] .symbol:hover{background:var(--pastel-2)}
html[data-look="app"] .symbol[aria-selected="true"]:hover{background:transparent}
html[data-look="app"] .reiterleiste{display:none}
/* Überschriften wie SectionHead: Haarlinie, links, „Alle ansehen ›" rechts */
html[data-look="app"] .statement{text-align:left;max-width:none;border-top:1px solid #E3E8EE;padding-top:26px;display:grid;grid-template-columns:1fr auto;gap:0 24px;align-items:end}
html[data-look="app"] .statement>*{grid-column:1}
html[data-look="app"] .statement .lead{margin-left:0}
html[data-look="app"] .statement .bewertung{justify-self:start}
.alle-d{grid-column:2!important;grid-row:1 / span 3;align-self:end;font:600 14px 'Quicksand',sans-serif;color:var(--blau);text-decoration:none;white-space:nowrap}
.alle-d:hover{text-decoration:underline}
/* Flächen: Pastell, keine Schatten */
html[data-look="app"] .karte{background:var(--pastel);box-shadow:none}
html[data-look="app"] .kachel{background:var(--pastel)}
html[data-look="app"] .kachel .rund{background:#fff;color:var(--blau)}
html[data-look="app"] .kachel.nein .rund{background:#fff}
html[data-look="app"] .panel{border-radius:22px}
html[data-look="app"] .videopanel{background:#fff}
html[data-look="app"] .karte-gross{padding:12px 12px 12px clamp(24px,4vw,52px)}
html[data-look="app"] .welten-kopf{border-top:1px solid #E3E8EE;padding-top:26px}
html[data-look="app"] .welt{border-radius:22px}
html[data-look="app"] .welt:hover{transform:none}
html[data-look="app"] .welt:active{transform:scale(.96) rotate(-1.6deg);transition:transform 90ms ease-out;z-index:3}
html[data-look="app"] .welt:nth-child(even):active{transform:scale(.96) rotate(1.6deg)}
html[data-look="app"] .welt{transition:transform var(--spring-press-dur) var(--spring-press);cursor:pointer}
html[data-look="app"] .welt .marke{left:12px;right:auto;background:rgba(255,255,255,.22);font:700 11px 'Quicksand',sans-serif;letter-spacing:.06em}
html[data-look="app"] .welt .name{font:700 20px/1.1 'Quicksand',sans-serif;padding:50px 16px 16px}
html[data-look="app"] .pfeil{border:0;background:var(--pastel)}
/* Chat wie F1: Kopf-Pille mit Avatar und KI-Marke, Kind in der Blase, Nina ohne Blase */
html[data-look="app"] .chips .chip{border:0;background:var(--pastel);font:600 14px 'Quicksand',sans-serif}
html[data-look="app"] .chips .chip[aria-pressed="true"]{background:var(--blau);color:#fff}
html[data-look="app"] .chat{background:#fff;border-radius:22px}
html[data-look="app"] .chat .kat{background:var(--pastel);font:700 11px 'Quicksand',sans-serif}
html[data-look="app"] .blase{background:rgba(var(--blau-rgb),.07);border-radius:24px 24px 8px 24px;font-weight:600;font-size:15px}
html[data-look="app"] .antwort img{display:none}
html[data-look="app"] .antwort p{font-weight:600;font-size:15px;color:var(--blau)}
.chatkopf-d{display:flex;align-items:center;gap:10px;background:var(--pastel);border-radius:999px;padding:6px 16px 6px 6px;width:fit-content;margin-bottom:16px}
.chatkopf-d img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.chatkopf-d b{font:700 15px/1.1 'Quicksand',sans-serif;display:block}
.chatkopf-d small{font:700 11px 'Quicksand',sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.chatkopf-d .ki{margin-left:6px;font:700 10px 'Quicksand',sans-serif;background:#FFF4DC;color:#9A5B00;border-radius:999px;padding:4px 8px;letter-spacing:.04em}
.gabe-d{display:flex;gap:18px;margin:12px 0 0 0;font-size:21px;color:var(--blau)}
.gabe-d i{opacity:.8}
/* Häkchen, Preise, Stimmen */
html[data-look="app"] .haken i{color:var(--gruen)}
html[data-look="app"] .preis.top{background:var(--blau)}
html[data-look="app"] .preis.top .btn{background:#fff}
html[data-look="app"] .preis .betrag{font-weight:700;letter-spacing:-.02em}
html[data-look="app"] .bewertung{background:var(--pastel)}
html[data-look="app"] .eltern-chat{background:rgba(75,165,85,.12)}
html[data-look="app"] .box-hinweis{border:0;background:rgba(246,168,46,.12);color:#8A5300}
html[data-look="app"] .schritt b{font-family:'Quicksand';font-weight:700}
/* FAQ: Zeilen mit Haarlinie, die Antwort kommt als Sheet (Ebene steht, Karte fährt hoch) */
html[data-look="app"] .faq{gap:0;background:var(--pastel);border-radius:22px;padding:4px 22px}
html[data-look="app"] .faq details{background:transparent;border-radius:0;padding:0;border-bottom:1px solid rgba(var(--blau-rgb),.1)}
html[data-look="app"] .faq details:last-child{border-bottom:0}
html[data-look="app"] .faq details p{display:none}
html[data-look="app"] .faq summary{font:700 16px/1.35 'Quicksand',sans-serif}
html[data-look="app"] .faq summary i{background:transparent;transform:none!important}
html[data-look="app"] .faq summary i::before{content:"\e13a"}
.sheet-d{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background-color:rgba(4,22,56,0);transition:background-color .3s ease;pointer-events:none}
.sheet-d.auf{background-color:rgba(4,22,56,.45);pointer-events:auto}
.sheet-d .karte-sheet{width:min(640px,100%);max-height:72vh;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:14px 28px 40px;transform:translateY(103%);
  transition:transform .42s cubic-bezier(.2,.8,.3,1);box-shadow:0 -14px 40px rgba(10,58,120,.12)}
.sheet-d.auf .karte-sheet{transform:none}
.sheet-d .griff{width:40px;height:5px;border-radius:3px;background:#E3E8EE;margin:0 auto 12px}
.sheet-d .zu{float:right;width:44px;height:44px;border-radius:50%;border:0;background:var(--pastel);color:var(--blau);font-size:20px;display:grid;place-items:center;cursor:pointer;margin:-2px -8px 0 12px}
.sheet-d h3{font:700 21px/1.25 'Quicksand',sans-serif;color:var(--blau);margin:8px 0 12px}
.sheet-d p{font:600 16px/1.6 'Quicksand',sans-serif;color:var(--blau-tief)}
/* Einblenden: ruhiges Anheben um 14 px (App-Push), Funktionswechsel als Shared-Axis 40 px */
html[data-look="app"].rv-an .rv{transform:translateY(14px);transition:opacity .34s cubic-bezier(.2,.8,.3,1),transform .34s cubic-bezier(.2,.8,.3,1)}
html[data-look="app"].rv-an .rv.in{transform:none}
html[data-look="app"] .cta{background:var(--blau)}


/* ---------- Shop (App-Optik) ----------
   Eine Leiste, ein Raster: die Pille filtert, das Raster wechselt in zwei
   Halbzeiten (raus 160 ms, tauschen, Karten gestaffelt rein) wie 04.
   Eine Karte öffnet ihr Produkt als Sheet — kaufen ist eine Rückfrage zum
   sichtbaren Stück, kein eigener Ort. */
.beispiel-d{font-size:12px;margin-top:8px;opacity:.65}
.shop-pillen{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 26px;margin:26px 0 0}
.shop-pillen::-webkit-scrollbar{display:none}
.shop-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;transition:opacity .16s ease,transform .16s ease}
.shop-raster.raus{opacity:0;transform:translateY(8px)}
@media (max-width:1000px){.shop-raster{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.shop-raster{grid-template-columns:repeat(2,1fr);gap:12px}}
.produkt{display:flex;flex-direction:column;text-align:left;border:0;padding:0;background:var(--pastel);border-radius:22px;overflow:hidden;cursor:pointer;color:inherit;font:inherit;
  animation:produkt-rein .42s cubic-bezier(.2,.8,.3,1) both;transition:transform var(--spring-press-dur) var(--spring-press)}
.produkt:active{transform:scale(.96) rotate(-1.6deg);transition:transform 90ms ease-out;position:relative;z-index:3}
.produkt:nth-child(even):active{transform:scale(.96) rotate(1.6deg)}
@keyframes produkt-rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.produkt .bild{aspect-ratio:1;width:100%;flex:0 0 auto;background:#EAF3FE;position:relative;overflow:hidden}
.produkt .bild img{width:100%;height:100%;object-fit:cover}
.produkt .text{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.produkt .art{font:700 11px 'Quicksand',sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.produkt .titel{font:700 16px/1.25 'Quicksand',sans-serif;color:var(--blau)}
.produkt .fuss{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.produkt .preis-d{font:700 16px 'Quicksand',sans-serif;color:var(--blau-tief)}
.produkt .plus{width:36px;height:36px;border-radius:50%;background:var(--blau);color:#fff;display:grid;place-items:center;font-size:18px}
/* Gutschein ohne Foto: die Karte ist das Motiv */
.gutschein-bild{position:absolute;inset:12%;border-radius:18px;background:var(--blau);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:12%;
  transform:rotate(-4deg);box-shadow:0 14px 30px rgba(var(--blau-rgb),.28)}
.gutschein-bild.jahr{background:linear-gradient(135deg,var(--blau),#0B4FA8)}
.gutschein-bild .zeichen{width:30%;aspect-ratio:1;background:#fff;-webkit-mask:url(assets/logo-zeichen.svg) no-repeat center/contain;mask:url(assets/logo-zeichen.svg) no-repeat center/contain}
.gutschein-bild b{font:700 clamp(14px,1.6vw,20px)/1.15 'Quicksand',sans-serif}
.gutschein-bild small{font:700 10px 'Quicksand',sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
/* Produkt-Sheet */
.sheet-d .produkt-bild{width:100%;max-width:300px;aspect-ratio:1;border-radius:22px;overflow:hidden;margin:4px auto 16px;background:#EAF3FE;position:relative}
.sheet-d .produkt-bild img{width:100%;height:100%;object-fit:cover}
.sheet-d .preiszeile{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px;font:700 24px 'Quicksand',sans-serif;color:var(--blau)}
.sheet-d .preiszeile small{font:600 12px 'Quicksand',sans-serif;opacity:.65}
.groessen{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.groessen button{min-width:52px;min-height:44px;border-radius:999px;border:0;background:var(--pastel);color:var(--blau);font:700 14px 'Quicksand',sans-serif;cursor:pointer}
.groessen button[aria-pressed="true"]{background:var(--blau);color:#fff}
.sheet-d .kaufen{width:100%;margin-top:20px;position:sticky;bottom:0;box-shadow:0 -16px 16px #fff}
@media (max-width:700px){.sheet-d .produkt-bild{max-width:200px}.sheet-d .karte-sheet{max-height:82vh;padding-bottom:22px}}
.toast-d{position:fixed;left:50%;bottom:86px;z-index:70;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1B2440;color:#fff;border-radius:999px;padding:12px 18px;
  font:700 14px 'Quicksand',sans-serif;display:flex;gap:8px;align-items:center;transition:opacity .25s,transform .35s cubic-bezier(.32,1.24,.44,1)}
.toast-d.an{opacity:1;transform:translate(-50%,0)}
.toast-d i{color:#B0E600;font-size:18px}

/* ---------- Design-Umschalter (Werkstatt, nicht Teil der Seite) ---------- */
.umschalter{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;
  background:#1B2440;color:#fff;box-shadow:0 10px 30px rgba(20,30,70,.28);font-family:system-ui,sans-serif;font-size:13px}
.umschalter .trenn{width:1px;height:22px;background:rgba(255,255,255,.2);margin:0 6px}
.umschalter .lbl{padding:0 10px 0 12px;opacity:.6;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.umschalter button{border:0;background:transparent;color:#fff;font:inherit;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.umschalter button[aria-pressed="true"]{background:#fff;color:#1B2440}
.umschalter button small{font-weight:400;opacity:.7;margin-left:4px}
@media (max-width:560px){.umschalter .lbl,.umschalter small{display:none}}

/* ---------- Pillenleisten mittig ----------
   Auto-Ränder am ersten und letzten Knopf statt justify-content:center:
   passt die Leiste, steht sie mittig; ist sie breiter als der Schirm,
   scrollt sie trotzdem ab dem ersten Knopf (center würde ihn abschneiden). */
#kopfPillen .pille-d:first-of-type,.shop-pillen .pille-d:first-of-type{margin-left:auto}
#kopfPillen .pille-d:last-of-type,.shop-pillen .pille-d:last-of-type{margin-right:auto}

/* ---------- Seitenwechsel One-Pager ⇄ Shop ----------
   Wie ein Push in der App: der Kopf bleibt stehen, der Inhalt gleitet 40 px
   (Shared-Axis) und blendet über. Rückwärts läuft die Achse andersherum.
   Browser ohne Cross-Document-View-Transitions wechseln einfach die Seite. */
@view-transition{navigation:auto}
.umschalter{view-transition-name:umschalter}
::view-transition-group(kopf),::view-transition-group(umschalter){animation:none}
::view-transition-old(root){animation:vt-raus .2s ease-in both}
::view-transition-new(root){animation:vt-rein .36s cubic-bezier(.2,.8,.3,1) both}
html:active-view-transition-type(zurueck)::view-transition-old(root){animation-name:vt-raus-zurueck}
html:active-view-transition-type(zurueck)::view-transition-new(root){animation-name:vt-rein-zurueck}
@keyframes vt-raus{to{opacity:0;transform:translateX(-24px)}}
@keyframes vt-rein{from{opacity:0;transform:translateX(40px)}}
@keyframes vt-raus-zurueck{to{opacity:0;transform:translateX(24px)}}
@keyframes vt-rein-zurueck{from{opacity:0;transform:translateX(-40px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- Shop-Seite ---------- */
.shop-kopf{text-align:center;max-width:820px;margin:0 auto}
.shop-kopf .h1{text-wrap:balance}
.shop-kopf .lead{margin-left:auto;margin-right:auto}
.shop-seite .shop-raster{margin-top:8px}
.zurueck-d{display:inline-flex;align-items:center;gap:6px;font:700 14px 'Quicksand',sans-serif;color:var(--blau);text-decoration:none;margin-bottom:18px;background:var(--pastel);padding:8px 14px 8px 10px;border-radius:999px}
a.pille-d{display:inline-flex;align-items:center;text-decoration:none}
a.pille-d:hover{color:var(--blau)}
a.pille-d[aria-selected="true"]{color:#fff}

/* =====================================================================
   RUNDE 30.9. · Feinschliff E
   ===================================================================== */

/* Seitenbreite = Außenkante Logo bis Außenkante „Kostenlos installieren" */
html[data-look="app"]{--breite:1364px}   /* +10 % (war 1240) */
html[data-look="app"] .kopfzeile .wrap{max-width:var(--breite)}

/* Kopf über dem Film — stufenlos statt Schalter (30.9.2026, User: „plötzlich
   verschwindet die Top-Leiste, ohne dass es Sinn macht"). Der Film startet als
   Karte UNTER der Leiste (nichts angeschnitten); --kopf-e (0…1) ist der Anteil,
   zu dem das Bild die Leiste gerade unterläuft. Genau um diesen Anteil blendet
   der Hintergrund aus und färben sich Logo und Pillen weiß — rückwärts beim
   Verlassen. Keine Transition: die Bewegung IST der Scrollweg. */
html[data-look="app"] .kopfzeile{background:rgba(252,251,249,calc(1 - var(--kopf-e,0)))}
html[data-look="web"] .kopfzeile{background:rgba(252,251,249,calc(.86 - .86 * var(--kopf-e,0)))}
.kopfzeile::after{opacity:calc(1 - var(--kopf-e,0))}
.kopfzeile .logo{background:color-mix(in srgb,#fff calc(var(--kopf-e,0) * 100%),var(--blau))}
.kopfzeile .nav a{color:color-mix(in srgb,#fff calc(var(--kopf-e,0) * 100%),var(--blau))}
html[data-look="app"] .kopfzeile .pille-d{background:color-mix(in srgb,rgba(255,255,255,.22) calc(var(--kopf-e,0) * 100%),var(--pastel));
  color:color-mix(in srgb,#fff calc(var(--kopf-e,0) * 100%),var(--blau));-webkit-backdrop-filter:blur(calc(var(--kopf-e,0) * 12px));backdrop-filter:blur(calc(var(--kopf-e,0) * 12px))}
html[data-look="app"] .kopfzeile .pille-d[aria-selected="true"]{background:transparent;color:#fff}
.pille-d{transition:color .2s,transform var(--spring-press-dur) var(--spring-press)}
.film-buehne{top:0!important;height:100vh!important}

/* Icons: kommen federnd herein und machen dann alle paar Sekunden eine
   kleine Geste — versetzt, damit nie alle gleichzeitig zappeln (App: Moment-Icons) */
@keyframes ic-wippen{0%,86%,100%{transform:none}89%{transform:rotate(-12deg)}92%{transform:rotate(9deg)}95%{transform:rotate(-4deg)}}
@keyframes ic-hopsen{0%,86%,100%{transform:none}89%{transform:translateY(-5px) scale(1.06)}93%{transform:translateY(1px) scale(.97)}96%{transform:none}}
@keyframes ic-puls{0%,86%,100%{transform:none}90%{transform:scale(1.18)}94%{transform:scale(.95)}97%{transform:scale(1.03)}}
html[data-look="app"] .kachel .rund i{display:inline-block;animation:ic-wippen 7.5s ease-in-out infinite}
html[data-look="app"] .kachel:nth-child(3n+2) .rund i{animation-name:ic-hopsen;animation-duration:8.3s}
html[data-look="app"] .kachel:nth-child(3n) .rund i{animation-name:ic-puls;animation-duration:9.1s}
html[data-look="app"] .kachel:nth-child(1) .rund i{animation-delay:.6s}
html[data-look="app"] .kachel:nth-child(2) .rund i{animation-delay:2.1s}
html[data-look="app"] .kachel:nth-child(3) .rund i{animation-delay:3.7s}
html[data-look="app"] .kachel:nth-child(4) .rund i{animation-delay:1.3s}
html[data-look="app"] .kachel:nth-child(5) .rund i{animation-delay:4.4s}
html[data-look="app"] .kachel:nth-child(6) .rund i{animation-delay:2.9s}
html[data-look="app"].rv-an .rv .rund{transform:scale(.4) rotate(-20deg);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1) .18s,opacity .25s ease .18s}
html[data-look="app"].rv-an .rv.in .rund{transform:none;opacity:1}
html[data-look="app"].rv-an .rv .haken li{opacity:0;transform:translateX(-10px);transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
html[data-look="app"].rv-an .rv.in .haken li{opacity:1;transform:none}
html[data-look="app"].rv-an .rv.in .haken li:nth-child(2){transition-delay:.08s}
html[data-look="app"].rv-an .rv.in .haken li:nth-child(3){transition-delay:.16s}
html[data-look="app"].rv-an .rv.in .haken li:nth-child(4){transition-delay:.24s}
html[data-look="app"].rv-an .rv.in .haken li:nth-child(5){transition-delay:.32s}
html[data-look="app"].rv-an .rv.in .haken li:nth-child(6){transition-delay:.40s}
@media (prefers-reduced-motion:reduce){html[data-look="app"] .kachel .rund i{animation:none}}

/* Welten: größer, und die Bahn läuft endlos */
html[data-look="app"] .welt{flex-basis:clamp(240px,25vw,340px)}
.welten-bahn{scroll-snap-type:x mandatory}

/* Download-Box: mittig, weiß auf Blau */
html[data-look="app"] .karte.cta{padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);position:relative}
html[data-look="app"] .karte.cta .h2{color:#fff;text-wrap:balance}
html[data-look="app"] .karte.cta .lead{color:#fff;opacity:.9;margin-left:auto;margin-right:auto;max-width:52ch}
html[data-look="app"] .karte.cta .kicker{color:#fff;opacity:.8}
.cta-nina{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 18px;border:3px solid rgba(255,255,255,.6)}

/* ---------- Seitenfuß ----------
   Ein Raster statt drei loser Blöcke: oben Marke + Download, dann vier
   gleich breite Spalten, unten Rechtezeile. Jede Zeile durch eine Haarlinie
   getrennt, alles auf denselben Außenkanten wie Kopf und Inhalt. */
.seitenfuss{padding:72px 0 110px;font-size:14px}
.fuss-oben{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px;padding-bottom:32px;border-bottom:1px solid rgba(var(--blau-rgb),.14)}
.fuss-oben .marke{max-width:520px}
.fuss-oben .marke p{margin-top:14px;font-size:14px;line-height:1.6}
.fuss-oben .marke b{display:block;margin-top:14px;font-family:var(--kopf);font-size:18px;font-weight:700}
.fuss-oben .stores{margin-top:0;justify-content:flex-end}
.fuss-oben .stores img{height:44px}
.fuss-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:32px 0;border-bottom:1px solid rgba(var(--blau-rgb),.14)}
.fuss-raster h4{margin:0 0 14px;font-family:var(--klein);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.fuss-raster nav,.fuss-raster .spalte{display:grid;gap:10px;align-content:start}
.fuss-raster a{text-decoration:none;width:fit-content}
.fuss-raster a:hover{text-decoration:underline}
.sozial{display:flex;gap:10px}
.sozial a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:20px;text-decoration:none;transition:transform var(--spring-press-dur,300ms) var(--spring-press,ease)}
.sozial a:hover{text-decoration:none}
.sozial a:active{transform:scale(.92)}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;font-size:12.5px}
.siegel{display:flex;gap:8px;flex-wrap:wrap}
.siegel span{background:#fff;border-radius:999px;padding:6px 12px;font-family:var(--klein);font-size:11px;letter-spacing:.06em}
html[data-look="app"] .sozial a,html[data-look="app"] .siegel span{background:var(--pastel)}
@media (max-width:900px){.fuss-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.fuss-oben .stores{justify-content:flex-start}}

/* Hero in der App-Optik: Kinder vorne, Handy mit Home-Screen dahinter */
.hero-bild .bild-e{opacity:0}
html[data-look="app"] .hero-bild .bild-e{opacity:1}
html[data-look="app"] .hero-bild .bild-b{opacity:0}
html[data-look="app"] .hero-bild .bild-e{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 82%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 82%,transparent 100%)}
html[data-look="app"] .hero-raster{max-width:var(--breite)}
/* Schmale Handys: Kopf-Knopf einzeilig, Umschalter scrollt statt abzuschneiden */
.kopfzeile .btn{white-space:nowrap}
@media (max-width:400px){.kopfzeile .btn{padding:0 14px;font-size:13px}.logo{width:104px}}
.umschalter{max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none}
.umschalter::-webkit-scrollbar{display:none}
.umschalter>*{flex:0 0 auto}

/* ---------- Glow der Pillen: nie abgeschnitten ----------
   Ein Scroll-Container schneidet alles an seinem Rand ab — auch Schatten.
   Passt die Leiste in die Breite (data-passt, per JS gemessen), ist sie gar
   kein Scroll-Container. Muss sie scrollen, hat sie unten 46 px Luft, mehr
   als der Glow braucht. Der Glow ist länger und weicher als in der App. */
.pillen .marke-d{box-shadow:0 14px 30px -8px rgba(var(--blau-rgb),.42)}
#kopfPillen{padding-bottom:46px;margin-bottom:-42px}
html[data-look="app"] .symbolreihe{padding-bottom:46px;margin-bottom:-14px}
.shop-pillen{padding-bottom:46px;margin-bottom:-20px}
#kopfPillen[data-passt],.symbolreihe[data-passt],.shop-pillen[data-passt]{overflow:visible}

/* ---------- Shop-Pille ganz rechts, abgesetzt ----------
   Der Shop ist kein Abschnitt im Scrollverlauf, sondern ein eigener Ort —
   deshalb steht er hinter „Fragen", durch einen Strich getrennt, mit Tasche. */
.pillen-trenner{flex:0 0 auto;width:1px;height:24px;align-self:center;margin:0 6px;background:rgba(var(--blau-rgb),.2)}
.kopfzeile .pillen-trenner{background:color-mix(in srgb,rgba(255,255,255,.5) calc(var(--kopf-e,0) * 100%),rgba(var(--blau-rgb),.2))}
.pille-shop{display:inline-flex;align-items:center;gap:7px}
.pille-shop i{font-size:18px}

/* ---------- Warenkorb ---------- */
.kopf-rechts{display:flex;align-items:center;gap:10px}
.korb-knopf{position:relative;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:21px;
  background:color-mix(in srgb,rgba(255,255,255,.22) calc(var(--kopf-e,0) * 100%),var(--pastel,rgba(5,115,240,.08)));
  color:color-mix(in srgb,#fff calc(var(--kopf-e,0) * 100%),var(--blau));transition:transform var(--spring-press-dur) var(--spring-press)}
.korb-knopf:active{transform:scale(.92);transition:transform 90ms ease-out}
.korb-zahl{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--blau);color:#fff;
  font:700 11px/20px 'Quicksand',sans-serif;text-align:center;box-shadow:0 0 0 2px var(--grund)}
.korb-knopf.hopst{animation:korb-hopsen .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes korb-hopsen{0%{transform:scale(1)}30%{transform:scale(1.22) rotate(-8deg)}60%{transform:scale(.94) rotate(4deg)}100%{transform:none}}
.korb-sheet .karte-sheet{padding-bottom:28px}
.korb-liste{list-style:none;margin:6px 0 0;padding:0;display:grid}
.korb-liste li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(var(--blau-rgb),.1)}
.korb-bild{width:64px;height:64px;border-radius:16px;object-fit:cover;background:#EAF3FE;display:block;position:relative}
.korb-bild.gutschein{background:var(--blau)}
.korb-bild.gutschein.jahr{background:linear-gradient(135deg,var(--blau),#0B4FA8)}
.korb-bild.gutschein .zeichen{position:absolute;inset:18px;background:#fff;-webkit-mask:url(assets/logo-zeichen.svg) no-repeat center/contain;mask:url(assets/logo-zeichen.svg) no-repeat center/contain}
.korb-text{display:grid;gap:2px;min-width:0}
.korb-text .art{font:700 11px 'Quicksand',sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.korb-text b{font:700 16px/1.25 'Quicksand',sans-serif;color:var(--blau)}
.korb-text .preis{font:700 14px 'Quicksand',sans-serif}
.menge{display:flex;align-items:center;gap:4px;background:rgba(5,115,240,.08);border-radius:999px;padding:4px}
.menge button{width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:var(--blau);display:grid;place-items:center;font-size:16px;cursor:pointer}
.menge span{min-width:18px;text-align:center;font:700 15px 'Quicksand',sans-serif}
.korb-summe{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;font:700 16px 'Quicksand',sans-serif;color:var(--blau-tief,#0161D8)}
.korb-summe b{font-size:22px;color:var(--blau)}
.korb-hinweis{font-size:12px!important;opacity:.65;margin-top:4px}
.korb-kasse{width:100%;margin-top:18px}
.korb-leer{text-align:center;padding:18px 0 6px;display:grid;justify-items:center;gap:14px}
.korb-leer i{font-size:44px;color:var(--blau);opacity:.5}

/* ---------- Funktionen: Handy bleibt stehen, Schritte ziehen vorbei ----------
   Aufnahmen aus der echten App (Simulator). Kommt ein Schritt in die Mitte,
   wechselt das Handy per Überblendung auf seine Aufnahme und spielt sie von vorn. */
/* ---------- Funktionen · Highlight-Player (App-Optik) ----------
   Links das Handy, rechts die Funktionen als Liste. Die aktive Zeile klappt ihren
   Satz auf und füllt sich unten als Fortschritt (--p 0…1 aus der Videozeit). */
.fz{max-width:var(--breite);margin:40px auto 0;padding:0 var(--rand);display:grid;grid-template-columns:minmax(240px,360px) minmax(0,520px);justify-content:center;align-items:center;gap:clamp(28px,6vw,96px)}
.fz-buehne{display:flex;justify-content:center}
.fz-handy{position:relative;height:min(660px,calc(100vh - var(--kopf-h,138px) - 80px));min-height:460px;aspect-ratio:1206/2622;border-radius:48px;background:#0E1A33;padding:9px;
  box-shadow:0 30px 60px -20px rgba(var(--blau-rgb),.35),inset 0 0 0 2px #2B3552}
.fz-handy video{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover;border-radius:40px;background:#F4F7FE;
  opacity:0;transform:scale(.985);transition:opacity .45s cubic-bezier(.2,.8,.3,1),transform .45s cubic-bezier(.2,.8,.3,1)}
.fz-handy video.an{opacity:1;transform:none}
.fz-seite{display:grid;gap:18px}
.fz-liste{display:grid;gap:6px}
.fz-eintrag{position:relative;display:grid;gap:0;text-align:left;border:0;cursor:pointer;background:transparent;border-radius:24px;padding:14px 20px 16px;overflow:hidden;font:inherit;color:var(--blau);
  transition:background .3s ease}
.fz-eintrag:hover{background:rgba(var(--blau-rgb),.05)}
.fz-eintrag.an{background:rgba(var(--blau-rgb),.08)}
.fz-eintrag:focus-visible{outline:3px solid rgba(var(--blau-rgb),.4);outline-offset:2px}
.fz-kopf{display:flex;align-items:center;gap:12px;font:700 clamp(18px,1.7vw,22px)/1.25 'Quicksand',sans-serif;color:var(--blau);opacity:.55;transition:opacity .3s}
.fz-eintrag.an .fz-kopf,.fz-eintrag:hover .fz-kopf{opacity:1}
.fz-kopf .ph{font-size:24px;flex:0 0 auto}
.fz-titel .kurz{display:none}
.fz-neu{display:inline-block;background:#B0E600;color:#1E3A8A;font:700 11px 'Quicksand',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.fz-satz{display:block;max-height:0;overflow:hidden;font:600 16px/1.6 'Quicksand',sans-serif;color:var(--blau-tief);padding-left:36px;max-width:46ch;opacity:0;transition:max-height .35s ease,opacity .2s ease,margin .35s ease}
.fz-eintrag.an .fz-satz{max-height:9em;opacity:1;margin-top:8px;transition:max-height .5s cubic-bezier(.2,.8,.3,1),opacity .4s ease .1s,margin .4s}
.fz-lauf{position:absolute;left:20px;right:20px;bottom:7px;height:3px;border-radius:3px;background:rgba(var(--blau-rgb),.14);opacity:0;transition:opacity .3s}
.fz-lauf b{display:block;height:100%;border-radius:inherit;background:var(--blau);transform-origin:left;transform:scaleX(var(--p,0))}
.fz-eintrag.an .fz-lauf{opacity:1}
.fz-text{display:none}
.fz-steuer{display:flex;align-items:center;gap:12px;padding-left:20px}
.fz-play,.fz-weiter{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;font-size:18px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s}
.fz-play{background:var(--blau);color:#fff;box-shadow:0 10px 22px -8px rgba(var(--blau-rgb),.55)}
.fz-weiter{background:rgba(var(--blau-rgb),.08);color:var(--blau)}
.fz-play:active,.fz-weiter:active{transform:scale(.92)}
.fz-stand{font:700 13px 'Quicksand',sans-serif;color:var(--blau);opacity:.6;min-width:5.5em}
/* Handy-Format: Gerät oben, darunter die Funktionen als Pillenreihe (Fortschritt IN der Pille),
   der Satz steht einmal darunter und wechselt mit. */
@media (max-width:860px){
  .fz{grid-template-columns:1fr;gap:18px;margin-top:20px;padding:0}
  .fz-handy{height:min(calc(100svh - var(--kopf-h,120px) - 250px),540px);min-height:340px;border-radius:38px;padding:7px}
  .fz-handy video{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:32px}
  .fz-seite{gap:12px}
  .fz-liste{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px var(--rand) 10px;scroll-padding-inline:var(--rand)}
  .fz-liste::-webkit-scrollbar{display:none}
  .fz-eintrag{flex:0 0 auto;border-radius:999px;padding:0 18px;min-height:44px;display:flex;align-items:center;background:rgba(var(--blau-rgb),.08)}
  .fz-eintrag.an{background:rgba(var(--blau-rgb),.14)}
  .fz-kopf{font-size:15px;gap:8px;opacity:1;white-space:nowrap;position:relative;z-index:1}
  .fz-eintrag.an .fz-kopf{color:#fff}
  .fz-kopf .ph{font-size:18px}
  .fz-kopf .fz-neu{display:none}
  .fz-titel .lang{display:none}.fz-titel .kurz{display:inline}
  .fz-satz{display:none}
  .fz-lauf{inset:0;height:auto;border-radius:inherit;background:transparent;opacity:1}
  .fz-lauf b{background:var(--blau);border-radius:0}
  .fz-eintrag.an .fz-lauf b{transform:scaleX(max(var(--p,0),.0001))}
  .fz-eintrag:not(.an) .fz-lauf b{transform:scaleX(0)}
  /* aktive Pille: Blau füllt sich von links, der Rest bleibt hell — Schrift bleibt lesbar, weil der Pillengrund dunkler wird */
  .fz-eintrag.an{background:rgba(var(--blau-rgb),.55)}
  .fz-text{display:block;padding:0 var(--rand);min-height:4.8em;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.3,1)}
  .fz-text p{font:600 15px/1.55 'Quicksand',sans-serif;color:var(--blau-tief);text-align:center;max-width:36ch;margin:0 auto}
  .fz-text.wechselt{opacity:0;transform:translateY(8px)}
  .fz-steuer{justify-content:center;padding:0}
}
@media (prefers-reduced-motion:reduce){.fz-handy video,.fz-satz,.fz-text{transition:none}}

/* ---------- Runde 30.9. abends ---------- */
/* Glow: Die weiche Kante (::after) lag ÜBER den Pillen und deckte den Glow ab */
.kopfzeile::after{z-index:1}
.kopf-pillen{position:relative;z-index:2}
/* Store-Sheet (Rechner) */
.store-sheet p{margin-top:4px}
.store-sheet .stores{justify-content:flex-start;margin-top:18px}
/* Sprung: Ausblenden ohne View-Transition-API, und die Richtung für die API */
main{transition:opacity .17s ease}
html.springt main{opacity:0}
html[data-sprung="runter"]::view-transition-old(root){animation:sprung-raus-hoch .18s ease-in both}
html[data-sprung="runter"]::view-transition-new(root){animation:sprung-rein-unten .34s cubic-bezier(.2,.8,.3,1) both}
html[data-sprung="hoch"]::view-transition-old(root){animation:sprung-raus-runter .18s ease-in both}
html[data-sprung="hoch"]::view-transition-new(root){animation:sprung-rein-oben .34s cubic-bezier(.2,.8,.3,1) both}
@keyframes sprung-raus-hoch{to{opacity:0;transform:translateY(-24px)}}
@keyframes sprung-rein-unten{from{opacity:0;transform:translateY(32px)}}
@keyframes sprung-raus-runter{to{opacity:0;transform:translateY(24px)}}
@keyframes sprung-rein-oben{from{opacity:0;transform:translateY(-32px)}}
/* Passt die Reihe nicht und scrollt, reicht der Scrollbereich bis an den Bildschirmrand —
   sonst schneidet seine Kante den Glow seitlich ab (sichtbar als Rechteck unter „Übersicht“) */
#kopfPillen:not([data-passt]),.shop-pillen:not([data-passt]){margin-left:calc(-1*var(--rand));margin-right:calc(-1*var(--rand));padding-left:var(--rand);padding-right:var(--rand);scroll-padding-inline:var(--rand)}

/* ---------- Kasse (30.9. abends) ---------- */
/* Bis die wandernde Markierung sitzt, trägt die aktive Pille das Blau selbst —
   sonst steht ihre weiße Schrift bis nach dem Schriftladen auf hellem Grund (Shop-Pille „weg“) */
.pillen:not(.marke-da) .pille-d[aria-selected="true"]{background:var(--blau)!important}
/* Kassen-Pille rechts neben „Shop“: fährt auf, sobald etwas im Korb liegt, und wieder zu, wenn er leer ist */
.pille-kasse{display:inline-flex;align-items:center;gap:6px;max-width:0;padding-left:0!important;padding-right:0!important;margin-left:-8px;
  opacity:0;transform:scale(.5);overflow:hidden;pointer-events:none;white-space:nowrap;
  transition:max-width .46s cubic-bezier(.2,.8,.3,1),padding .46s cubic-bezier(.2,.8,.3,1),margin .46s cubic-bezier(.2,.8,.3,1),opacity .22s ease,transform .52s cubic-bezier(.34,1.56,.64,1),color .2s}
.pille-kasse.da{max-width:120px;padding-left:16px!important;padding-right:16px!important;margin-left:0;opacity:1;transform:none;pointer-events:auto}
.pille-kasse:not(.da){transition:max-width .36s cubic-bezier(.4,0,.6,1) .08s,padding .36s cubic-bezier(.4,0,.6,1) .08s,margin .36s cubic-bezier(.4,0,.6,1) .08s,opacity .2s ease,transform .3s ease}
.pille-kasse i{font-size:19px}
.pille-kasse .korb-zahl{position:static;box-shadow:none;min-width:20px;height:20px;line-height:20px;font-size:11px}
.pille-kasse[aria-selected="true"] .korb-zahl{background:#fff;color:var(--blau)}
.pille-kasse.hopst i{animation:korb-hopsen .6s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){.pille-kasse,.pille-kasse:not(.da){transition:opacity .2s}}
/* Kassen-Seite */
.kasse-inhalt{margin-top:clamp(20px,4vw,40px)}
.kasse-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:clamp(20px,4vw,48px);align-items:start}
.kasse-liste{margin:0;background:var(--weiss);border-radius:var(--r-karte);padding:8px clamp(18px,3vw,32px)}
.kasse-liste li:last-child{border-bottom:0}
.kasse-liste .korb-bild{width:84px;height:84px;border-radius:20px}
.kasse-liste li{grid-template-columns:84px 1fr auto;padding:18px 0}
.kasse-summe-karte{position:sticky;top:calc(var(--kopf-h,138px) + 20px);background:var(--pastel);border-radius:var(--r-karte);padding:24px clamp(20px,3vw,30px)}
.kasse-summe-karte .korb-summe:first-child{margin-top:0}
.korb-summe.klein{margin-top:8px;font-size:14px;opacity:.75}
.korb-summe.klein span:last-child{text-align:right}
.kasse-weiter{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:700 14px 'Quicksand',sans-serif;color:var(--blau);text-decoration:none}
.kasse-leer{text-align:center;padding:40px 0;display:grid;justify-items:center;gap:16px}
.kasse-leer i{font-size:56px;color:var(--blau);opacity:.45}
@media (max-width:760px){.kasse-raster{grid-template-columns:1fr}.kasse-summe-karte{position:static}.kasse-liste li{grid-template-columns:64px 1fr auto}.kasse-liste .korb-bild{width:64px;height:64px;border-radius:16px}}

/* ---------- Sprachumschalter (30.9. abends) ---------- */
.kopf-rechts{display:flex;align-items:center;gap:10px}
.sprache{position:relative}
.sprache-knopf{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;
  background:var(--pastel,rgba(var(--blau-rgb),.08));color:var(--blau);font:700 13px 'Quicksand',sans-serif;letter-spacing:.04em;transition:background .2s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.sprache-knopf i{font-size:18px}
.sprache-knopf:active{transform:scale(.94)}
.kopfzeile .sprache-knopf{background:color-mix(in srgb,rgba(255,255,255,.22) calc(var(--kopf-e,0) * 100%),var(--pastel,rgba(var(--blau-rgb),.08)));color:color-mix(in srgb,#fff calc(var(--kopf-e,0) * 100%),var(--blau))}
.sprache-menue{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;display:grid;padding:8px;border-radius:22px;background:#fff;
  box-shadow:0 18px 40px -12px rgba(var(--blau-rgb),.35),0 0 0 1px rgba(var(--blau-rgb),.08);z-index:40;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;pointer-events:none;visibility:hidden;
  transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.3,1),visibility 0s linear .26s}
.sprache.auf .sprache-menue{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .18s ease,transform .3s cubic-bezier(.34,1.3,.64,1),visibility 0s}
.sprache-menue a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;border-radius:14px;
  font:700 15px 'Quicksand',sans-serif;color:var(--blau);text-decoration:none}
.sprache-menue a:hover,.sprache-menue a:focus-visible{background:rgba(var(--blau-rgb),.07);outline:none}
.sprache-menue a i{opacity:0}
.sprache-menue a[aria-checked="true"]{background:rgba(var(--blau-rgb),.1)}
.sprache-menue a[aria-checked="true"] i{opacity:1}
@media (max-width:520px){.sprache-knopf{width:40px;padding:0;justify-content:center}.sprache-kurz{display:none}.kopf-rechts{gap:8px}}
/* Kiluni (Sprachfassungen): Wortbildmarke statt KinderGPT */
html[data-marke="kiluni"] .logo{-webkit-mask-image:url(assets/logo-kiluni.svg);mask-image:url(assets/logo-kiluni.svg);width:124px}
/* Shop außerhalb Deutschlands: physische Produkte ausgegraut */
.produkt.gesperrt .bild img{filter:grayscale(.85);opacity:.55}
.produkt.gesperrt .text{opacity:.6}
.produkt.gesperrt .plus{background:rgba(var(--blau-rgb),.25)}
.nur-de{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff;color:var(--blau);
  font:700 11.5px 'Quicksand',sans-serif;box-shadow:0 6px 14px -8px rgba(var(--blau-rgb),.5)}
.nur-de i{font-size:14px}
.nur-de-hinweis{display:flex;gap:10px;align-items:flex-start;background:rgba(var(--blau-rgb),.07);border-radius:16px;padding:12px 14px;margin:14px 0 0;font:600 14px/1.5 'Quicksand',sans-serif;color:var(--blau-tief)}
.nur-de-hinweis i{font-size:20px;flex:0 0 auto;color:var(--blau)}
.kaufen[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
/* Schmale Handys (≤ 400 px): Logo nur als Zeichen — mit Sprachknopf und „Kostenlos installieren“
   passt die Wortmarke dort nicht mehr in den Kopf (KinderGPT und Kiluni teilen das Zeichen) */
@media (max-width:400px){.kopfzeile .logo,html[data-marke="kiluni"] .kopfzeile .logo{width:36px;height:36px;-webkit-mask-image:url(assets/logo-zeichen.svg);mask-image:url(assets/logo-zeichen.svg)}}

/* ---------- Ausverkauft & Vormerken (1.10.2026) ---------- */
.produkt.ausverkauft .bild img{filter:saturate(.85)}
.produkt.ausverkauft .plus{background:#fff;color:var(--blau);box-shadow:inset 0 0 0 2px rgba(var(--blau-rgb),.25)}
.nur-de.vorgemerkt{background:var(--blau);color:#fff}
.vormerken{display:grid;gap:12px;margin-top:14px}
.vormerken .nur-de-hinweis{margin:0}
.vormerken .groessen{margin:2px 0 0}
.feld-d{display:grid;gap:6px;font:700 13px 'Quicksand',sans-serif;color:var(--blau)}
.feld-d input{height:52px;border-radius:16px;border:2px solid rgba(var(--blau-rgb),.18);background:#fff;padding:0 16px;font:600 16px 'Quicksand',sans-serif;color:var(--blau-tief);outline:none;transition:border-color .2s,box-shadow .2s}
.feld-d input::placeholder{color:rgba(var(--blau-rgb),.4)}
.feld-d input:focus{border-color:var(--blau);box-shadow:0 0 0 4px rgba(var(--blau-rgb),.12)}
.feld-d input[aria-invalid="true"]{border-color:#D6336C;box-shadow:0 0 0 4px rgba(214,51,108,.12)}
.feld-fehler{margin:-4px 0 0;font:600 13px 'Quicksand',sans-serif;color:#D6336C}
.vormerken .kaufen{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.vormerken .korb-hinweis{text-align:center;margin:0}
.vormerken-ok{display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:16px 18px;border-radius:18px;background:rgba(var(--blau-rgb),.08);animation:vormerken-rein .5s cubic-bezier(.34,1.4,.64,1)}
.vormerken-ok>i{font-size:28px;color:var(--blau);animation:ic-wippen 1s ease .15s}
.vormerken-ok b{font:700 17px 'Quicksand',sans-serif;color:var(--blau)}
.vormerken-ok p{margin:4px 0 0;font:600 14px/1.5 'Quicksand',sans-serif;color:var(--blau-tief)}
.vormerken-ok .vormerken-mail{opacity:.7;word-break:break-all}
.vormerken-ok + .kaufen{margin-top:12px;width:100%}
@keyframes vormerken-rein{from{opacity:0;transform:translateY(8px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.vormerken-ok,.vormerken-ok>i{animation:none}}

/* ---------- Hinweis Systemumstellung (1.10.2026) ---------- */
.hinweis-umstellung{background:#FFF4D6;color:#7A4B00;border-bottom:1px solid rgba(122,75,0,.12);overflow:hidden;max-height:200px;transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.hinweis-umstellung.weg{max-height:0;opacity:0}
.hinweis-umstellung .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.hinweis-zeichen{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#FFE29A;color:#8A5300;font-size:16px}
.hinweis-umstellung p{flex:1;margin:0;font:600 14px/1.45 'Quicksand',sans-serif}
.hinweis-umstellung b{font-weight:700}
.hinweis-umstellung a{color:#7A4B00;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hinweis-zu{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:#7A4B00;font-size:17px;cursor:pointer;display:grid;place-items:center}
.hinweis-zu:hover{background:rgba(122,75,0,.08)}
@media (max-width:600px){.hinweis-umstellung p span{display:none}.hinweis-umstellung p{font-size:13px}}
/* ---------- Systemstatus (Entwurf) ---------- */
.status-wrap{max-width:820px}
.status-gesamt{display:flex;gap:16px;align-items:flex-start;margin-top:clamp(20px,4vw,36px);padding:22px 24px;border-radius:var(--r-karte);background:#FFF4D6;color:#7A4B00}
.status-gesamt b{font:700 20px 'Quicksand',sans-serif}
.status-gesamt p{margin:6px 0 0;font:600 15px/1.55 'Quicksand',sans-serif}
.status-gesamt .status-punkt{margin-top:7px;width:14px;height:14px}
.status-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;background:#1F9D6B;flex:0 0 auto}
.status-punkt.eingeschraenkt{background:#E8A317}
.status-punkt.stoerung{background:#D6336C}
.status-gesamt .status-punkt{animation:status-puls 2s ease-in-out infinite}
@keyframes status-puls{50%{box-shadow:0 0 0 6px rgba(232,163,23,.25)}}
.status-liste{list-style:none;margin:18px 0 0;padding:6px clamp(16px,3vw,28px);background:#fff;border-radius:var(--r-karte)}
.status-liste li{padding:16px 0;border-bottom:1px solid rgba(var(--blau-rgb),.08)}
.status-liste li:last-child{border-bottom:0}
.status-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 16px 'Quicksand',sans-serif;color:var(--blau)}
.status-zustand{display:inline-flex;align-items:center;gap:8px;font:700 13px 'Quicksand',sans-serif;color:#1F7A55}
.status-zustand.eingeschraenkt{color:#8A5300}
.status-zustand.stoerung{color:#B02456}
.status-balken{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;margin-top:12px;height:28px}
.status-balken i{border-radius:4px;background:#1F9D6B;opacity:.85}
.status-balken i.eingeschraenkt{background:#E8A317}
.status-balken i.stoerung{background:#D6336C}
.status-legende{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:14px 4px 0;font:600 13px 'Quicksand',sans-serif;color:var(--blau-tief)}
.status-legende span{display:inline-flex;align-items:center;gap:7px}
.status-legende .status-zeitraum{margin-left:auto;opacity:.6}
.status-titel{margin-top:clamp(36px,6vw,56px)}
.status-meldung{margin-top:14px;padding:20px 24px;border-radius:24px;background:var(--pastel,rgba(var(--blau-rgb),.08))}
.status-meldung-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 13px 'Quicksand',sans-serif;color:var(--blau-tief)}
.status-marke{padding:4px 10px;border-radius:999px;font:700 12px 'Quicksand',sans-serif;background:#DFF5EA;color:#1F7A55}
.status-marke.eingeschraenkt{background:#FFE9B3;color:#7A4B00}
.status-meldung h3{margin:10px 0 0;font:700 18px 'Quicksand',sans-serif;color:var(--blau)}
.status-meldung p{margin:6px 0 0;font:600 15px/1.6 'Quicksand',sans-serif;color:var(--blau-tief)}
@media (prefers-reduced-motion:reduce){.status-gesamt .status-punkt{animation:none}.hinweis-umstellung{transition:none}}

/* ---------- Shop · Abschnitte (Kollektionen) ---------- */
.shop-gruppe{grid-column:1/-1;margin:clamp(22px,4vw,40px) 0 2px;padding-top:clamp(18px,3vw,26px);border-top:1px solid rgba(var(--blau-rgb),.12)}
.shop-raster>.shop-gruppe:first-child{margin-top:0;padding-top:0;border-top:0}
.shop-gruppe .kicker{display:inline-block;margin-bottom:6px}
.shop-gruppe .h3{margin:0}
.shop-gruppe p{margin:6px 0 0;font:600 15px/1.5 'Quicksand',sans-serif;color:var(--blau-tief);max-width:52ch}
.nur-de.kommt{background:#EAF3FE}
.status-gesamt.eingeschraenkt .status-punkt{background:#E8A317}

/* ---------- 1.10.2026 · Hinweis zentriert, Hero-Video, Logo-Einleitung ---------- */
.hinweis-umstellung .wrap{position:relative;justify-content:center;padding-left:56px;padding-right:56px}
.hinweis-umstellung p{flex:0 1 auto;text-align:center}
.hinweis-umstellung .hinweis-zu{position:absolute;right:max(8px,calc(var(--rand) - 8px));top:50%;transform:translateY(-50%)}
@media (max-width:600px){.hinweis-umstellung .wrap{padding-left:16px;padding-right:48px;justify-content:flex-start}.hinweis-umstellung p{text-align:left}}
.hero-bild .bild-v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 82%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 82%,transparent 100%)}
html[data-look="app"] .hero-bild .bild-v{opacity:1}
html[data-look="app"] .hero-bild .bild-e{opacity:0}
.logo{--logo-w:130px}
html[data-marke="kiluni"] .logo{--logo-w:124px}

/* ---------- Werkstatt-Leiste: Marke als Link ---------- */
.umschalter a.wahl{color:#fff;text-decoration:none;font-weight:600;padding:9px 16px;border-radius:999px;white-space:nowrap}
.umschalter a.wahl[aria-pressed="true"]{background:#fff;color:#1B2440}
/* ---------- Farbversuch: Bereichsfarben (1.10.2026) ----------
   Eltern = Grün aus dem Eltern-Bereich der App, Bildung = Violett aus dem Schul-Bereich. Die Seite rechnet
   überall mit --blau/--blau-rgb/--blau-tief/--pastel; ein Abschnitt bekommt einfach andere Werte. */
html[data-farbe="bereiche"],html[data-farbe="flaechen"]{
  --eltern:#1E8F5A;--eltern-rgb:30,143,90;--eltern-tief:#0E5A3A;--eltern-hell:#E7F8ED;
  --bildung:#6C5CE7;--bildung-rgb:108,92,231;--bildung-tief:#3A2E78;--bildung-hell:#EFECFD}
html[data-farbe="bereiche"] :is(#nicht,#eltern,#so-gehts,#preise,#faq),
html[data-farbe="flaechen"] :is(#nicht,#eltern,#so-gehts,#preise,#faq),
html:is([data-farbe="bereiche"],[data-farbe="flaechen"]) .kopfzeile[data-bereich="eltern"] #kopfPillen{
  --blau:var(--eltern);--blau-rgb:var(--eltern-rgb);--blau-tief:var(--eltern-tief);--blau-hell:var(--eltern-hell);
  --pastel:rgba(var(--eltern-rgb),.1);--pastel-2:rgba(var(--eltern-rgb),.16)}
html:is([data-farbe="bereiche"],[data-farbe="flaechen"]) :is(.hero .partner,#ueber-uns,.institution),
html:is([data-farbe="bereiche"],[data-farbe="flaechen"]) .kopfzeile[data-bereich="bildung"] #kopfPillen{
  --blau:var(--bildung);--blau-rgb:var(--bildung-rgb);--blau-tief:var(--bildung-tief);--blau-hell:var(--bildung-hell);
  --pastel:rgba(var(--bildung-rgb),.1);--pastel-2:rgba(var(--bildung-rgb),.16)}
#kopfPillen .pille-d,#kopfPillen .marke-d{transition:background-color .35s ease,color .35s ease,transform var(--spring-press-dur,.3s) var(--spring-press,ease),width .45s cubic-bezier(.34,1.3,.64,1),box-shadow .35s}
/* Flächen: die Bereiche bekommen zusätzlich einen hellen Hintergrund über die ganze Breite */
html[data-farbe="flaechen"] :is(#nicht,#eltern,#so-gehts,#preise,#faq){background:linear-gradient(180deg,rgba(236,247,240,0) 0,#ECF7F0 140px,#ECF7F0 calc(100% - 140px),rgba(236,247,240,0) 100%)}
html[data-farbe="flaechen"] #ueber-uns{background:linear-gradient(180deg,rgba(240,238,253,0) 0,#F0EEFD 140px,#F0EEFD calc(100% - 140px),rgba(240,238,253,0) 100%)}
html[data-farbe="flaechen"] .hero .partner,html[data-farbe="flaechen"] .institution{background:rgba(var(--bildung-rgb),.08);border-radius:28px;padding-top:22px;padding-bottom:22px}
.umschalter a[data-marke-wahl="kindergpt"]::before{content:"KinderGPT"}
.umschalter a[data-marke-wahl="kiluni"]::before{content:"Kiluni"}

/* ---------- Mobil auf App-Größe (1.10.2026, Messe-Feedback) ----------
   Pillen wie in der App (KGP.FilterPillen: 15 px/700, Polster 9 × 16 ≈ 38 px hoch), Welten-Kacheln kleiner,
   Sicherheits-Chat kompakt mit den Fragen DARUNTER, damit Frage und Antwort in einen Bildschirm passen. */
@media (max-width:700px){
  html[data-look="app"] .pille-d{min-height:38px;padding:0 16px;font-size:15px}
  html[data-look="app"] .pille-shop i,html[data-look="app"] .pille-kasse i{font-size:17px}
  html[data-look="app"] .fz-eintrag{min-height:38px;padding:0 15px}
  html[data-look="app"] .fz-kopf{font-size:14px;gap:7px}
  html[data-look="app"] .fz-kopf .ph{font-size:17px}
  html[data-look="app"] .welt{flex-basis:clamp(168px,48vw,210px);border-radius:20px}
  html[data-look="app"] .welt .name{font-size:16px;padding:36px 12px 12px}
  html[data-look="app"] .welten-bahn{gap:12px}
  /* Sicherheit: erst der Chat, darunter die Fragen als Pillen untereinander (1.10.2026, statt wischbarer Reihe) */
  html[data-look="app"] #sicherheit .mit-reitern{margin-top:24px!important}
  html[data-look="app"] #sicherheit .karte{display:flex;flex-direction:column;padding:12px}
  html[data-look="app"] #sicherheit .chat{order:1;min-height:0;padding:14px 16px 12px}
  html[data-look="app"] #chatChips{order:2;display:flex;flex-direction:column;align-items:flex-start;margin:12px 0 0;gap:8px}
  html[data-look="app"] #chatChips .chip{max-width:100%;white-space:normal;text-align:left;min-height:38px;padding:9px 15px;font-size:14px;line-height:1.35;border-radius:20px}
  html[data-look="app"] #sicherheit .karte .klein{order:3;margin-top:10px;font-size:12px}
  html[data-look="app"] .chatkopf-d{padding:4px 12px 4px 4px;margin-bottom:10px}
  html[data-look="app"] .chatkopf-d img{width:32px;height:32px}
  html[data-look="app"] .chatkopf-d b{font-size:14px}
  html[data-look="app"] .chatkopf-d small{font-size:10px}
  html[data-look="app"] .chat .kat{font-size:10px;margin-bottom:8px}
  html[data-look="app"] .chat .blase{font-size:13.5px;padding:9px 13px;max-width:84%}
  html[data-look="app"] .antwort{margin-top:10px}
  html[data-look="app"] .antwort p{font-size:13.5px;line-height:1.5}
  html[data-look="app"] .gabe-d{font-size:18px;gap:16px;margin-top:8px}
  html[data-look="app"] #sicherheit .chat .hinweis{font-size:12px;margin-top:10px}
}

/* ---------- Logo im Kopf: Bildmarke, auf der Startseite gestapelte Einleitung (1.10.2026) ----------
   .logo ist 72 × 72 gezeichnet und steht im Ruhezustand per scale(--logo-s0) als 40-px-Zeichen links.
   Der Schriftzug hängt darunter und ist nur in der Einleitung sichtbar (Rechnung: Kopf-Skript __logoIntro). */
.kopfzeile .logo>span{display:none}
html[data-look="app"] .kopfzeile .logo{--logo-s0:.556;--logo-farbe:color-mix(in srgb,#fff calc(var(--kopf-e,0) * 100%),var(--blau));
  position:relative;width:72px;height:72px;background:none;-webkit-mask:none;mask:none;transform-origin:left center;transform:scale(var(--logo-s0))}
html[data-look="app"] .kopfzeile .logo>span{display:block;position:absolute;background:var(--logo-farbe)}
html[data-look="app"] .kopfzeile .logo-zeichen{inset:0;-webkit-mask:url(assets/logo-zeichen.svg) no-repeat center/contain;mask:url(assets/logo-zeichen.svg) no-repeat center/contain}
html[data-look="app"] .kopfzeile .logo-wort{left:50%;top:calc(100% + 10px);width:156px;height:26.3px;margin-left:-78px;opacity:0;pointer-events:none;
  -webkit-mask:url(assets/logo-wort.svg) no-repeat center/contain;mask:url(assets/logo-wort.svg) no-repeat center/contain}
html[data-look="app"][data-marke="kiluni"] .kopfzeile .logo-wort{width:100px;height:31px;margin-left:-50px;-webkit-mask-image:url(assets/logo-kiluni-wort.svg);mask-image:url(assets/logo-kiluni-wort.svg)}
/* Mobil: „Kostenlos installieren“ raus aus dem Kopf (kommt im Hero und unten ohnehin) — rechts bleibt die Sprache */
@media (max-width:700px){html[data-look="app"] .kopf-rechts .btn{display:none}}

/* ---------- Inhalte entzerrt (1.10.2026, Messe-Feedback): Eltern · Premium-Vorteil · Über uns · Preise · FAQ ---------- */
/* Zeichen-Kreis wie bei den Sicherheits-Kacheln */
.rund-d{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--blau);font-size:25px;margin-bottom:16px}
.eltern-werkzeuge .karte p{margin-top:10px}
/* Kacheln mit Zeichen statt Häkchenliste */
.symbole-d{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.symbole-d.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.symbole-d li{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:#fff;font:700 14px/1.35 'Quicksand',sans-serif;color:var(--blau-tief)}
.symbole-d li i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pastel);color:var(--blau);font-size:20px}
@media (max-width:560px){.symbole-d.drei{grid-template-columns:1fr}.symbole-d.drei li{flex-direction:row;align-items:center}}
/* Premium-Vorteil */
.premium-eltern{align-items:start}
.premium-eltern .lead{margin-top:12px}
.premium-eltern>.text:last-of-type{padding-top:28px}
.eltern-chat2{background:#fff;border-radius:22px;padding:18px 20px;min-height:0}
.eltern-chat2 .kopf-zeichen{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blau);color:#fff;font-size:20px}
.eltern-chat2 .antwort img{display:none}
.hinweis-klein{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:0 6px;font:600 12.5px/1.55 'Quicksand',sans-serif;color:var(--blau-tief);opacity:.75}
.hinweis-klein i{font-size:17px;margin-top:1px;flex:0 0 auto}
.hinweis-klein strong{font-weight:700}
/* Aufklappen: weich über grid-template-rows */
.aufklapp{margin-top:16px}
.aufklapp-inhalt{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.2,.8,.3,1),opacity .3s ease}
.aufklapp-inhalt>div{overflow:hidden}
.aufklapp-inhalt p{margin:0 0 12px;font-size:15px;line-height:1.65}
.aufklapp.auf .aufklapp-inhalt{grid-template-rows:1fr;opacity:1}
.aufklapp-knopf{display:inline-flex;align-items:center;gap:8px;margin-top:4px;min-height:40px;padding:0 16px 0 6px;border:0;border-radius:999px;background:transparent;color:var(--blau);font:700 14px 'Quicksand',sans-serif;cursor:pointer}
.aufklapp-knopf i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;font-size:15px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.aufklapp.auf .aufklapp-knopf i{transform:rotate(45deg)}
.aufklapp-knopf .auf-text,.aufklapp.auf .aufklapp-knopf .zu-text{display:none}
.aufklapp.auf .aufklapp-knopf .auf-text{display:inline}
/* Über uns: eine ruhige Lesespalte */
.ueber-karte{margin:40px auto 0;max-width:820px}
.ueber-karte>p{font-size:17px;line-height:1.7;margin:0 0 14px}
.ueber-karte .aufklapp-inhalt p{font-size:17px;line-height:1.7}
/* Preise: zwei Karten, Premium mit Umschalter */
.preise-zwei{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:860px){.preise-zwei{grid-template-columns:1fr}}
.preis-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.abo-wahl{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.18)}
.abo-wahl button{position:relative;z-index:1;border:0;background:transparent;color:#fff;font:700 13px 'Quicksand',sans-serif;min-height:34px;padding:0 14px;border-radius:999px;cursor:pointer;transition:color .25s}
.abo-wahl button[aria-checked="true"]{color:var(--blau)}
.abo-marke{position:absolute;left:0;top:4px;height:34px;border-radius:999px;background:#fff;transition:transform .45s cubic-bezier(.34,1.3,.64,1),width .45s cubic-bezier(.34,1.3,.64,1)}
.preis[data-abo="monat"] .nur-jahr,.preis[data-abo="jahr"] .nur-monat{display:none}
.preis .nur-monat,.preis .nur-jahr{animation:abo-rein .35s cubic-bezier(.2,.8,.3,1)}
.preis a.nur-monat,.preis a.nur-jahr{animation:none}
@keyframes abo-rein{from{opacity:0;transform:translateY(6px)}}
/* FAQ am Desktop: Antwort klappt weich unter der Frage auf (Chrome/Edge; andere Browser öffnen ohne Bewegung) */
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .4s cubic-bezier(.2,.8,.3,1),content-visibility .4s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){.aufklapp-inhalt,.faq details::details-content{transition:none}}
/* FAQ am Desktop: Antwort unter der Frage zeigen (auf dem Handy bleibt sie verborgen, dort öffnet das Sheet) */
@media (min-width:701px){
  html[data-look="app"] .faq details p{display:block;padding:0 40px 20px 0;font:600 15px/1.6 'Quicksand',sans-serif;color:var(--blau-tief)}
  html[data-look="app"] .faq summary i{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
  html[data-look="app"] .faq details[open] summary i{transform:rotate(90deg)!important}
}

/* So funktioniert's: in der App-Optik der echte App-Screenshot mit den beiden Kindern */
.panel .bild-app{position:absolute;inset:0;opacity:0}
html[data-look="app"] .panel .bild-app{opacity:1}
html[data-look="app"] .panel:has(.bild-app) .bild-a,html[data-look="app"] .panel:has(.bild-app) .bild-b{opacity:0}

/* Scroll-Filme: Titel mittig (1.10.2026, Versuch) — waagerecht und senkrecht in der Bildmitte.
   translate setzt die Mitte, transform (aus dem Skript) bleibt fürs Ein-/Ausgleiten frei. */
.scrollfilm .film-text{left:0;right:0;top:50%;bottom:auto;margin-inline:auto;padding:0 var(--rand);max-width:880px;text-align:center;translate:0 -50%}
.scrollfilm .film-text p{margin-left:auto;margin-right:auto}

/* Scroll-Film als Video (1.10.2026): liegt über Standbild und Leinwand, blendet ein, sobald es geladen ist */
.film-rahmen .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;pointer-events:none}
.film-rahmen.video-da .film-video{opacity:1}

/* ---------- Abstände zwischen Abschnitten (1.10.2026) ----------
   Ein Rhythmus für die ganze Startseite: jeder Abschnitt bringt nur Luft nach OBEN mit, keine nach unten —
   so ist der Abstand zwischen zwei Abschnitten immer gleich, auch nach einem Scroll-Film.
   (Vorher: 128 + 128 = 256 px zwischen zwei Abschnitten, aber nur 20 px nach einigen Filmen.) */
main > .abschnitt{padding:clamp(80px,9vw,128px) 0 0}
main > .abschnitt:last-of-type{padding-bottom:clamp(80px,9vw,128px)}
main > .scrollfilm + .abschnitt{padding-top:clamp(64px,7vw,104px)}
/* Eltern: die Premium-Karte bekommt wieder ihren Abstand zu den beiden Karten darüber */
.premium-eltern{margin-top:18px}

/* ---------- Eltern-Bereich, zweite Fassung (1.10.2026) ----------
   Links die echte App (Telefon mit „Familie", davor zwei Karten aus „Kind verwalten"), rechts die Ampel:
   Gelb = was Eltern einstellen (Grenzen), Rot = was es bei uns nie gibt (Verbote). Rot gilt seitenweit
   für „gibt es nicht" — deshalb tragen auch die Kacheln unter „Was KinderGPT nicht ist" Rot. */
.eltern-buehne{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:14px clamp(24px,4vw,56px) 14px 14px}
.eltern-buehne .text{padding:24px 0}
.eltern-buehne .text>p{margin-top:10px}
.app-buehne{position:relative;padding:clamp(18px,3vw,34px) 0}
.app-buehne::before{content:'';position:absolute;left:4%;top:8%;width:62%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(30px)}
.app-telefon{position:relative;margin-left:9%;width:45%;border:7px solid #0E1A33;border-radius:36px;overflow:hidden;background:#0E1A33;
  box-shadow:0 30px 60px rgba(var(--blau-rgb),.22)}
.app-telefon img{display:block;width:100%;height:auto}
.app-karte{position:absolute;width:54%;border-radius:18px;box-shadow:0 22px 44px rgba(var(--blau-rgb),.2)}
.app-karte.zeit{right:3%;top:16%;rotate:2.5deg}
.app-karte.ruhe{right:6%;top:55%;rotate:-2deg}
.rv-an .rv .app-karte{transition:translate .9s cubic-bezier(.2,.8,.3,1) .25s,opacity .7s ease .25s}
.rv-an .rv:not(.in) .app-karte{translate:0 30px;opacity:0}
.rv-an .rv .app-karte.ruhe{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){.rv-an .rv .app-karte{transition:none;translate:none;opacity:1}}
.ampel{margin-top:22px}
.ampel-kopf{display:flex;align-items:center;gap:10px;font:700 15px/1.35 'Quicksand',sans-serif;color:var(--blau-tief)}
.ampel-kopf .punkt{flex:0 0 auto;width:10px;height:10px;border-radius:50%}
.ampel ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ampel li{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:5px 15px 5px 6px;border-radius:999px;background:#fff;font:700 14px/1.3 'Quicksand',sans-serif;color:var(--blau-tief)}
.ampel li i{position:relative;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;font-size:16px;flex:0 0 auto}
.ampel.gelb .punkt{background:#F2A93B}
.ampel.gelb li i{background:#FFF1D6;color:#B7791F}
.ampel.rot .punkt{background:#D6336C}
.ampel.rot li i{background:#FDE9EF;color:#D6336C}
.ampel.rot li i::after{content:'';position:absolute;width:21px;height:2px;border-radius:2px;background:currentColor;rotate:-45deg;box-shadow:0 0 0 1.5px #FDE9EF}
html[data-look="app"] .kachel.nein .rund{background:#fff;color:#D6336C}
@media (max-width:860px){
  .eltern-buehne{grid-template-columns:1fr;padding:12px}
  .eltern-buehne .text{padding:14px 10px 10px}
  .app-telefon{margin-left:6%;width:52%;border-width:5px;border-radius:28px}
  .app-karte{width:58%;border-radius:14px}
  .app-karte.zeit{right:3%}
  .app-karte.ruhe{right:5%;top:56%}
}

/* ---------- Premium · „Mehr lesen" über die ganze Breite (1.10.2026) ---------- */
.premium-mehr{grid-column:1/-1;margin:-30px 0 6px}   /* holt die Text-Polster (28) und die Rasterlücke zurück */
.pm-themen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:4px}
.pm-themen>div{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;background:#fff}
.pm-themen i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pastel);color:var(--blau);font-size:20px}
.pm-themen b{font:700 16px/1.3 'Quicksand',sans-serif;color:var(--blau-tief)}
.pm-themen span{font:600 14px/1.5 'Quicksand',sans-serif;color:var(--blau-tief);opacity:.78}
.pm-unten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;margin:22px 0 6px}
.pm-text p{margin:0 0 12px;font-size:15px;line-height:1.65}
.pm-vergleich{padding:6px 18px;border-radius:22px;background:#fff}
.pm-zeile{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:12px;padding:12px 0;border-top:1px solid rgba(var(--blau-rgb),.1);font:600 13.5px/1.4 'Quicksand',sans-serif;color:var(--blau-tief)}
.pm-zeile:first-child{border-top:0}
.pm-zeile.kopf span{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.65}
.pm-zeile [role=rowheader]{font-weight:700}
.pm-zeile [role=cell]{display:flex;gap:6px;align-items:flex-start}
.pm-zeile [role=cell] i{flex:0 0 auto;font-size:17px;opacity:.5}
.pm-zeile .gut{color:var(--blau);font-weight:700}
.pm-zeile .gut i{opacity:1}
@media (max-width:860px){
  .premium-mehr{padding:0 10px}
  .pm-themen,.pm-unten{grid-template-columns:1fr}
  .pm-zeile{grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:12.5px}
}
.statement+.eltern-buehne{margin-top:48px}   /* wie .raster */

/* ---------- Eltern-Abschnitt in Eltern-Grün (1.10.2026) ----------
   Auch bei „Blau": der Abschnitt zeigt die echte App, und deren Eltern-Bereich ist grün. Der Abschnitt bekommt
   dieselben Werte wie im Farbversuch „Bereiche" und eine leichte grüne Fläche über die ganze Breite. */
#eltern{--eltern:#1E8F5A;--eltern-rgb:30,143,90;--eltern-tief:#0E5A3A;--eltern-hell:#E7F8ED;
  --blau:var(--eltern);--blau-rgb:var(--eltern-rgb);--blau-tief:var(--eltern-tief);--blau-hell:var(--eltern-hell);
  --pastel:rgba(var(--eltern-rgb),.1);--pastel-2:rgba(var(--eltern-rgb),.16);
  background:linear-gradient(180deg,rgba(236,247,240,0) 0,#ECF7F0 160px,#ECF7F0 calc(100% - 160px),rgba(236,247,240,0) 100%);
  padding-bottom:clamp(64px,7vw,96px)}
#eltern+.abschnitt{padding-top:clamp(40px,4vw,56px)}   /* die grüne Fläche bringt ihre Luft schon mit */
#eltern{color:var(--blau-tief)}   /* Fließtext erbt sonst das am body berechnete Blau */
#eltern .karte{background:rgba(255,255,255,.55)}
#eltern .ampel li,#eltern .pm-themen>div,#eltern .pm-vergleich,#eltern .eltern-chat2,#eltern .symbole-d li{background:#fff}
#eltern .symbole-d li i,#eltern .pm-themen i{background:var(--eltern-hell)}

/* ---------- Was KinderGPT nicht ist / ist (1.10.2026) ---------- */
.ist-wahl{grid-column:2!important;grid-row:1 / span 3;align-self:end;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--pastel);justify-self:end}   /* gleich breite Hälften, sonst sitzt die Marke schief */
.ist-wahl button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  font:700 14px 'Quicksand',sans-serif;color:var(--blau-tief);cursor:pointer;transition:color .3s ease;white-space:nowrap}
.ist-wahl button i{font-size:18px}
.ist-wahl button[data-ist="nein"][aria-pressed="true"]{color:#D6336C}
.ist-wahl button[data-ist="ja"][aria-pressed="true"]{color:var(--blau)}
.ist-marke{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(var(--blau-rgb),.12);
  transition:translate .45s cubic-bezier(.34,1.3,.64,1)}
#nicht.ist .ist-marke{translate:100% 0}
.ist-wahl button{flex:1 1 0;justify-content:center}
.nur-ja{display:none}
#nicht.ist .nur-ja{display:inline}
#nicht.ist p.nur-ja{display:block}
#nicht.ist .nur-nein{display:none}
.wende{display:grid;perspective:1100px}
.wende>.kachel{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .75s cubic-bezier(.34,1.18,.64,1) calc(var(--i,0) * 70ms)}
.wende>.ja{transform:rotateY(180deg)}
#nicht.ist .wende>.nein{transform:rotateY(-180deg)}
#nicht.ist .wende>.ja{transform:rotateY(0)}
html[data-look="app"] .kachel.ja .rund{background:#fff;color:#1E8F5A}
@media (max-width:700px){.ist-wahl{grid-column:1!important;grid-row:auto;justify-self:start;margin-top:18px}}
@media (prefers-reduced-motion:reduce){.wende>.kachel{transition:opacity .2s ease;transform:none!important}.wende>.ja{opacity:0}#nicht.ist .wende>.nein{opacity:0}#nicht.ist .wende>.ja{opacity:1}}

/* ---------- Eltern-Chat in der Grammatik der App (1.10.2026) ---------- */
.ec-app{display:flex;flex-direction:column;gap:14px;padding:16px 16px 14px;border-radius:26px;
  background:linear-gradient(180deg,#fff 0,#fff 55%,var(--eltern-hell,#E7F8ED) 100%);box-shadow:0 18px 40px rgba(var(--blau-rgb),.12)}
.ec-kopf{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px}
.ec-kreis{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--blau-tief);font-size:20px;box-shadow:0 4px 14px rgba(var(--blau-rgb),.12)}
.ec-pille{justify-self:center;display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 18px 4px 4px;border-radius:999px;background:#fff;box-shadow:0 4px 14px rgba(var(--blau-rgb),.12)}
.ec-zeichen{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blau);color:#fff;font-size:18px}
.ec-pille b{display:block;font:700 15px/1.2 'Quicksand',sans-serif;color:var(--blau-tief)}
.ec-pille small{display:block;font:600 11.5px/1.3 'Quicksand',sans-serif;color:var(--blau-tief);opacity:.7}
.ec-ki{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:16px;background:#FFF4DC;color:#8A5A0B;font:600 12.5px/1.4 'Quicksand',sans-serif}
.ec-ki i{font-size:20px;flex:0 0 auto}
.ec-blase{align-self:flex-end;max-width:84%;padding:12px 16px;border-radius:22px 22px 6px 22px;background:var(--eltern-hell,#E7F8ED);font:600 15px/1.45 'Quicksand',sans-serif;color:var(--blau-tief)}
.ec-antwort p{margin:0;font:600 15px/1.55 'Quicksand',sans-serif;color:var(--blau-tief)}
.ec-icons{display:flex;gap:18px;margin-top:10px;font-size:19px;color:var(--blau-tief)}
.ec-eingabe{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:6px 6px 6px 18px;border-radius:999px;background:#fff;
  box-shadow:0 4px 14px rgba(var(--blau-rgb),.1);font:600 14px 'Quicksand',sans-serif;color:var(--blau-tief)}
.ec-eingabe>span:first-child{opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-mikro{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--blau);color:#fff;font-size:19px}
@media (max-width:700px){.ec-blase,.ec-antwort p{font-size:14px}}

/* ---------- Shop: zweite Achse „nach Welt" und Kollektions-Bänder (1.10.2026) ---------- */
.welt-wahl{display:flex;justify-content:safe center;gap:14px;overflow-x:auto;scrollbar-width:none;margin:18px calc(-1 * var(--rand,20px)) 6px;padding:4px var(--rand,20px) 6px}
.welt-wahl::-webkit-scrollbar{display:none}
.welt-wahl[hidden]{display:none}
.welt-knopf{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;width:76px;padding:0;border:0;background:none;cursor:pointer;
  font:600 12.5px/1.25 'Quicksand',sans-serif;color:var(--blau-tief);text-align:center}
.welt-knopf .kreis{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--pastel);color:var(--blau);font-size:24px;
  box-shadow:0 0 0 0 var(--blau);transition:box-shadow .3s cubic-bezier(.34,1.3,.64,1),transform var(--spring-press-dur,.3s) var(--spring-press,ease)}
.welt-knopf .kreis img{width:100%;height:100%;object-fit:cover}
.welt-knopf[aria-pressed="true"] .kreis{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blau)}
.welt-knopf[aria-pressed="true"]{font-weight:700;color:var(--blau)}
.welt-knopf:active .kreis{transform:scale(.94)}
.shop-gruppe.kollektion{display:flex;align-items:center;gap:16px;padding:18px 22px;border:0;border-radius:22px;background:var(--koll-bg);margin-top:clamp(22px,4vw,40px)}
.shop-raster>.shop-gruppe.kollektion:first-child{margin-top:0;padding-top:18px}
.koll-zeichen{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--koll-farbe);font-size:26px}
.kollektion .kicker{color:var(--koll-farbe)}
.kollektion[data-saison="herbst"]{--koll-bg:#FFF0E2;--koll-farbe:#C2541A}
.kollektion[data-saison="winter"]{--koll-bg:#E8F2FD;--koll-farbe:#2F6FB8}
.kollektion[data-saison="sommer"]{--koll-bg:#FFF6D6;--koll-farbe:#B0820B}
.kollektion[data-saison="basic"]{--koll-bg:var(--pastel);--koll-farbe:var(--blau)}
@media (max-width:700px){.shop-gruppe.kollektion{padding:14px 16px;gap:12px}.koll-zeichen{width:44px;height:44px;font-size:22px}.welt-knopf{width:68px}.welt-knopf .kreis{width:56px;height:56px}}

/* ---------- Was KinderGPT (nicht) ist, 2.10.2026 ----------
   Eltern-Information → derselbe grüne Grund wie der Eltern-Abschnitt, der direkt folgt (eine durchgehende Fläche).
   Kacheln bleiben weiß; Rot = gibt es nicht, Grün = das ist KinderGPT. Bei „Ist“ wird „nicht“ durchgestrichen. */
#nicht{--eltern:#1E8F5A;--eltern-rgb:30,143,90;--eltern-tief:#0E5A3A;--eltern-hell:#E7F8ED;
  --blau:var(--eltern);--blau-rgb:var(--eltern-rgb);--blau-tief:var(--eltern-tief);--blau-hell:var(--eltern-hell);
  --pastel:rgba(var(--eltern-rgb),.1);--pastel-2:rgba(var(--eltern-rgb),.16);
  color:var(--blau-tief);background:linear-gradient(180deg,rgba(236,247,240,0) 0,#ECF7F0 160px,#ECF7F0 100%);padding-bottom:clamp(64px,7vw,96px)}
#nicht+#eltern{background:linear-gradient(180deg,#ECF7F0 0,#ECF7F0 calc(100% - 160px),rgba(236,247,240,0) 100%);padding-top:clamp(16px,2vw,32px)}
#nicht .kachel{background:#fff}
#nicht .kachel .rund{box-shadow:0 0 0 1px rgba(var(--eltern-rgb),.14)}
#nicht .ist-wahl{background:#fff}
#nicht .ist-marke{background:var(--eltern-hell)}
.ist-wahl button[data-ist="ja"][aria-pressed="true"]{color:#1E8F5A}
#nicht s.weg{text-decoration:none;position:relative;color:rgba(var(--eltern-rgb),.45)}
#nicht s.weg::after{content:'';position:absolute;left:-2px;right:-2px;top:54%;height:.09em;border-radius:2px;background:#D6336C;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.3,1) .15s}
#nicht.ist s.weg::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){#nicht s.weg::after{transition:none}}

/* ---------- Preise: drei Karten nebeneinander am Desktop (2.10.2026); Handy unverändert mit Umschalter ---------- */
.jahr-karte{display:none}
@media (min-width:861px){
  .preise-drei{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px}
  .preise-drei .jahr-karte{display:flex;flex-direction:column}
  .preise-drei .abo-wahl{display:none}
  .preise-drei .preis.top .nur-jahr{display:none!important}
  .preise-drei .preis.top div.nur-monat{display:block!important}
  .preise-drei .preis.top a.nur-monat{display:inline-flex!important}
}

/* ---------- Partner-Aufruf im HillcrownAI-Stil (2.10.2026) ----------
   Schwarz-Weiß, Inter Tight für die Überschrift, Zeichen als Anker davor — wie auf hillcrownai.com. Steht mit
   Abstand unter dem Download und gehört optisch schon zum Fuß. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/inter-tight.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/inter.woff2') format('woff2')}
.partner-hc{margin-top:clamp(72px,9vw,128px);padding:clamp(28px,4vw,52px);border-radius:16px;background:#000;color:#fff;display:grid;gap:16px;justify-items:start}
.hc-kicker{margin:0;font:500 13px/1.3 'Inter',system-ui,sans-serif;letter-spacing:.02em;color:#a1a1a6}
.hc-titel{margin:0;max-width:22ch;font:700 clamp(26px,3.1vw,40px)/1.1 'Inter Tight','Inter',system-ui,sans-serif;   /* wie .h2 der Seite (28–44 px Quicksand); Inter Tight wirkt größer, daher eine Stufe kleiner */
  letter-spacing:-.028em;color:#fff;text-wrap:balance}
.hc-zeichen{display:inline-block;width:.95em;margin-right:.28em;vertical-align:.04em;color:#fff}
.hc-zeichen svg{display:block;width:100%;height:auto}
.hc-text{margin:0;max-width:40em;font:400 16px/1.55 'Inter',system-ui,sans-serif;color:#d2d2d7}
.hc-knopf{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:8px;padding:0 24px;border-radius:999px;background:#fff;color:#000;font:600 15px 'Inter',system-ui,sans-serif;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.hc-knopf span{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.hc-knopf:hover span{transform:translateX(4px)}
.hc-knopf:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:700px){.hc-text{font-size:15px}}

/* Peter-Texte 10/2026 ----------
   Neue Bausteine der deutschen Startseite nach Peters Texten: Partnerzeile mit Titel, Definitionsblock (#idee),
   Buchmesse-Satz unter den Welten, Titel vor der Sicherheits-Demo, Satz im Eltern-Bereich und der eigene
   Abschnitt Eltern-Chat (#eltern-chat) auf derselben grünen Fläche wie der Eltern-Bereich. */
/* Hero: Peters Titel ist zwei Sätze lang; etwas kleiner und ausgeglichen umbrochen, damit er am Desktop in drei Zeilen steht */
html[data-look="app"] .hero .h1{font-size:clamp(34px,3.8vw,54px);text-wrap:balance}
.partner .partner-titel{margin:0 auto 8px;max-width:none;text-align:center;font:700 clamp(18px,1.8vw,22px)/1.3 var(--kopf);letter-spacing:0;text-transform:none;color:var(--blau)}
/* Definitionsblock: eine ruhige, zentrierte Aussage ohne Haarlinie */
#idee .statement{max-width:920px;margin:0 auto}
html[data-look="app"] #idee .statement{display:block;text-align:center;border-top:0;padding-top:0}
#idee .h2{text-wrap:balance}
#idee .lead{margin-left:auto;margin-right:auto;max-width:60ch;text-wrap:pretty}
.idee-pointe{display:block;margin-top:12px;font-size:1.12em;font-weight:700;color:var(--blau)}
/* Welten: „Geschichten können jetzt antworten.“ unter den Kacheln */
.welten-fuss{max-width:760px;margin:clamp(36px,4vw,56px) auto 0}
.welten-fuss .h3{font-size:clamp(24px,2.6vw,34px);text-wrap:balance}
/* Sicherheit: Titel vor der Demo */
.vor-demo{margin-top:clamp(36px,4vw,52px)}
.vor-demo .h3{max-width:30ch;text-wrap:balance}
.vor-demo p{margin-top:10px;max-width:60ch;font-size:clamp(15px,1.35vw,18px);line-height:1.6}
#sicherheit .kachel .h3{text-wrap:balance}
#eltern .statement .h2{text-wrap:balance}
/* Eltern-Bereich: der eine Satz statt der Verbotsliste */
.eltern-buehne .text>.eltern-satz{margin-top:22px;font:700 16px/1.5 'Quicksand',sans-serif;color:var(--blau-tief)}
/* Eltern-Chat als eigener Abschnitt: Werte und Fläche wie #eltern, die beiden Abschnitte bilden eine Fläche */
#eltern-chat{--eltern:#1E8F5A;--eltern-rgb:30,143,90;--eltern-tief:#0E5A3A;--eltern-hell:#E7F8ED;
  --blau:var(--eltern);--blau-rgb:var(--eltern-rgb);--blau-tief:var(--eltern-tief);--blau-hell:var(--eltern-hell);
  --pastel:rgba(var(--eltern-rgb),.1);--pastel-2:rgba(var(--eltern-rgb),.16);
  color:var(--blau-tief);background:linear-gradient(180deg,#ECF7F0 0,#ECF7F0 calc(100% - 160px),rgba(236,247,240,0) 100%);padding-bottom:clamp(64px,7vw,96px)}
#eltern:has(+#eltern-chat){background:#ECF7F0;padding-bottom:0}
#nicht+#eltern:has(+#eltern-chat){background:#ECF7F0}
#eltern+#eltern-chat{padding-top:clamp(56px,6vw,88px)}
#eltern-chat+.abschnitt{padding-top:clamp(40px,4vw,56px)}
#eltern-chat .karte{background:rgba(255,255,255,.55)}
#eltern-chat .pm-themen>div,#eltern-chat .pm-vergleich,#eltern-chat .symbole-d li{background:#fff}
#eltern-chat .symbole-d li i,#eltern-chat .pm-themen i{background:var(--eltern-hell)}
#eltern-chat .premium-eltern{margin-top:0}