/* STARTSEITE "KNALL" (webknall, 20.10.2026; Marc zum Mockup: "Ja passt").
   Vier neue Teile, alle auf den Tokens von tokens.css / start.css:
   1 Alles lernen mit den Zeichen der App (Stil F, Variante A)
   2 "So geht Qraki": die Qraki-Familie als Comic in vier Bildern (Ben, Mia, Eltern)
   3 Die Reise als EINE Animation Erde -> Mond (start/reise_route.js, 3D-Schiff)
   4 Partner: ein Hook, sechs Karten, drei Zahlen, "Lass uns reden"
   Kleinste Schrift 14px. Bewegung ease-in-out; reduzierte Bewegung = alles steht. */

/* ---------- 1 ALLES LERNEN ---------- */
/* Die Zeichen der App, Stil F (Marc, 20.10.2026: "A ist ruhiger"): Dinge als weiche Flaechen,
   Details als Aussparung in der Farbe der Plakette. Pfade 1:1 aus Q_ICONS (karteibox_1.jsx);
   "Formeln" ist neu im selben Stil (Tafel, Wurzelzeichen ausgespart). Lila in Ruhe als
   Schrift-Lila, beim Zeigen wird die Plakette Lila - wie in der App. */
.lernen6{ padding:clamp(64px,10vh,110px) 0 clamp(24px,4vh,40px) !important; }
.r3 main#oben .lernen6 h2{ font-size:clamp(30px,3.8vw,48px); text-align:center; margin:0 0 clamp(26px,4vh,40px); }
.lern-g{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-width:640px; margin:0 auto; }
.lern-g > div{ display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--ink); font-size:16px; font-weight:800; letter-spacing:-.01em; }
.plak{ --icon-aus:#263548; width:clamp(60px,6.4vw,78px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:#263548; color:var(--lila-schrift);
  transition:background-color .25s ease-in-out, color .25s ease-in-out, transform .25s ease-in-out; }
.plak svg{ width:56%; height:56%; overflow:visible; fill:currentColor; }
.plak .q-ausf{ fill:var(--icon-aus); transition:fill .25s ease-in-out; }
.plak .q-auss{ fill:none; stroke:var(--icon-aus); stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease-in-out; }
.plak .q-strich{ fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.plak .q-trenn{ stroke:var(--icon-aus); stroke-width:1.8; stroke-linejoin:round; paint-order:stroke; transition:stroke .25s ease-in-out; }
@media (hover:hover){ .lern-g > div:hover .plak{ --icon-aus:var(--lila); background:var(--lila); color:#fff; transform:translateY(-2px); } }
.lern-satz{ margin:clamp(22px,3.4vh,32px) auto 0; text-align:center; color:var(--soft); font-weight:700; font-size:clamp(16px,1.4vw,18px); }

/* ---------- 2 FAMILIEN-COMIC ---------- */
.comic{ padding:clamp(90px,14vh,160px) 0 clamp(40px,6vh,70px) !important; }
.comic-kopf{ text-align:center; }
.r3 main#oben .comic-kopf h2{ margin-left:auto; margin-right:auto; }
.strip{ margin:clamp(30px,5vh,52px) auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px); max-width:1320px; padding:0 clamp(20px,3vw,40px); }
.panel{ position:relative; margin:0; border-radius:28px; overflow:hidden; aspect-ratio:4/5; background:#13202B; isolation:isolate; }
.panel > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.panel::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(12,27,37,0) 55%, rgba(12,27,37,.86) 100%); pointer-events:none; }
.panel-nr{ position:absolute; top:14px; left:14px; z-index:3; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#8B36FD; color:#fff; font-weight:900; font-size:16px; }
.blase-c{ position:absolute; z-index:3; max-width:72%; padding:10px 14px; border-radius:20px; background:#fff; color:#0C1B25; font-weight:900; font-size:clamp(15px,1.25vw,18px); line-height:1.2; letter-spacing:-.01em; box-shadow:0 12px 26px -12px rgba(0,0,0,.55); }
.blase-c::after{ content:""; position:absolute; bottom:-7px; width:16px; height:16px; background:#fff; }
.blase-c.rechts{ top:16px; right:14px; } .blase-c.rechts::after{ left:24px; border-radius:0 0 0 14px; transform:skewX(-18deg); }
.blase-c.links{ top:16px; left:58px; } .blase-c.links::after{ left:20px; border-radius:0 0 0 14px; transform:skewX(-18deg); }
.panel figcaption{ position:absolute; left:16px; right:16px; bottom:16px; z-index:3; color:#fff; font-weight:900; font-size:clamp(17px,1.5vw,21px); line-height:1.2; letter-spacing:-.015em; text-wrap:balance; }
.comic-fuss{ text-align:center; margin:clamp(24px,4vh,36px) 0 0; padding:0 20px; color:var(--ink); font-weight:900; font-size:clamp(18px,1.7vw,22px); }
.comic-fuss span{ color:var(--soft); font-weight:700; }

/* ---------- 3 REISE: Erde -> Mond ---------- */
.reise6{ position:relative; padding:clamp(90px,14vh,160px) 0 clamp(70px,10vh,120px) !important; overflow-x:clip;
  background:linear-gradient(180deg, var(--paper) 0, var(--raum) 200px, var(--raum) calc(100% - 200px), var(--paper) 100%); }
.reise6 .w-kopf{ text-align:center; }
.reise6 .lead{ margin-left:auto; margin-right:auto; }
.route-buehne{ position:relative; max-width:1320px; margin:clamp(20px,4vh,40px) auto 0; }
.route-buehne svg{ width:100%; height:auto; display:block; }
.route-buehne canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.route-buehne.mit-3d [data-flach]{ display:none; }
.erde-dreht{ animation:erdeDreht 40s linear infinite; }
@keyframes erdeDreht{ from{ transform:translateX(0); } to{ transform:translateX(-600px); } }
.halte{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); max-width:1120px; margin:clamp(10px,2vh,20px) auto 0; padding:0 clamp(20px,4vw,48px); }
.halt{ border-radius:24px; padding:18px 20px 20px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(196,166,255,.12); transition:background-color .6s ease-in-out, box-shadow .6s ease-in-out, transform .6s ease-in-out; }
.halt.an{ background:rgba(139,54,253,.16); box-shadow:inset 0 0 0 1.5px rgba(196,166,255,.55); transform:translateY(-3px); }
.halt i{ font-style:normal; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#263548; color:#C4A6FF; font-weight:900; font-size:15px; margin-bottom:10px; transition:background-color .6s, color .6s; }
.halt.an i{ background:#8B36FD; color:#fff; }
.halt b{ display:block; font-size:clamp(18px,1.6vw,21px); font-weight:900; letter-spacing:-.015em; color:var(--ink); }
.halt span{ display:block; margin-top:6px; font-size:15px; font-weight:700; line-height:1.45; color:var(--soft); }

/* ---------- 4 PARTNER ---------- */
.partner6{ padding:clamp(100px,15vh,170px) 0 clamp(30px,5vh,60px) !important; }
.partner6 .p-kopf{ text-align:center; }
.r3 main#oben .partner6 .p-kopf h2{ max-width:16ch; margin-left:auto; margin-right:auto; }
.partner6 .lead{ margin-left:auto; margin-right:auto; max-width:30ch; }
.p-gitter{ margin:clamp(34px,5vh,56px) auto 0; max-width:1320px; padding:0 clamp(20px,3vw,40px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
.pk{ position:relative; margin:0; border-radius:var(--rund-platz); overflow:hidden; background:#13202B; isolation:isolate; aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end; }
.pk > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--weich); }
.pk::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,16,24,0) 38%, rgba(8,16,24,.78) 70%, rgba(8,16,24,.95) 100%); }
@media (hover:hover){ .pk:hover > img{ transform:scale(1.04); } }
.pk-text{ padding:clamp(18px,2vw,26px); }
.pk-wer{ display:inline-flex; align-items:center; gap:8px; margin:0 0 10px; padding:6px 12px 6px 8px; border-radius:999px; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-weight:900; font-size:14px; letter-spacing:.02em; }
.pk-wer svg{ width:20px; height:20px; fill:currentColor; }
.pk-wer svg .aus{ fill:#4a3b6b; } .pk-wer svg .strich{ fill:none; stroke:currentColor; stroke-linecap:round; }
.r3 main#oben .pk h3{ margin:0; color:#fff; font-size:clamp(21px,1.9vw,27px); font-weight:900; line-height:1.12; letter-spacing:-.025em; text-wrap:balance; }
.pk p{ margin:10px 0 0; color:rgba(245,247,250,.82); font-size:15px; font-weight:700; line-height:1.4; }
.p-beweis{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px clamp(18px,3vw,40px); margin:clamp(30px,5vh,48px) auto 0; padding:0 20px; }
.p-beweis div{ text-align:center; }
.p-beweis b{ display:block; font-size:clamp(34px,4vw,52px); font-weight:900; letter-spacing:-.04em; color:#fff; line-height:1; }
.p-beweis span{ display:block; margin-top:6px; font-size:15px; font-weight:800; color:var(--soft); }
.reden{ margin:clamp(40px,7vh,80px) var(--rand) 0; border-radius:var(--rund); padding:clamp(70px,11vh,120px) 24px; text-align:center; background:var(--lila-flaeche); color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.reden-okto{ width:clamp(60px,6vw,80px); aspect-ratio:310.79/313.88; margin:0 auto clamp(18px,3vh,28px); color:#fff; animation:redenSchweb 5s ease-in-out infinite; }
.reden-okto svg{ width:100%; height:100%; display:block; }
.reden-okto.ruht{ animation-play-state:paused; }
@keyframes redenSchweb{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.r3 main#oben .reden h2{ color:#fff; font-size:clamp(44px,7vw,92px); }
.reden .lead{ color:rgba(255,255,255,.88); margin-left:auto; margin-right:auto; }
.reden .knopf-weiss{ margin-top:clamp(26px,4vh,40px); }

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .p-gitter{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .halte{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .lern-g{ gap:2px; }
  .lern-g > div{ font-size:14px; gap:8px; }
  .strip{ grid-template-columns:1fr; gap:14px; }
  .p-gitter{ grid-template-columns:1fr; }
  .pk{ aspect-ratio:1/1; }
  .halt{ padding:14px 16px 16px; display:grid; grid-template-columns:auto 1fr; column-gap:12px; }
  .halt i{ grid-row:span 2; margin:0; }
  .halt span{ margin-top:2px; }
}
@media (prefers-reduced-motion:reduce){ .erde-dreht, .reden-okto{ animation:none; } .halt, .plak, .pk > img{ transition:none; } }

/* ---------- Comic-Bild 4: das Qraki-Quiz auf dem gemalten Fernseher ----------
   Lage und Maske kommen aus dem Bild (hf/maske.js): left/top/width/height in Prozent des
   Bildes, das Bild hat genau das Format des Panels (4:5), darum passt es bei jeder Breite.
   Alles darin in cqw = Prozent der Schirmbreite, damit es mit dem Fernseher waechst. */
.panel-tv .tv-quiz{ position:absolute; z-index:1; left:var(--tv-l); top:var(--tv-t); width:var(--tv-b); height:var(--tv-h);
  container-type:inline-size; -webkit-mask:url(/bilder/illu/comic4-schirm.png) 0 0/100% 100% no-repeat; mask:url(/bilder/illu/comic4-schirm.png) 0 0/100% 100% no-repeat; }
.tq{ width:100%; height:100%; background:#0C1B25; color:#F5F7FA; padding:2.6cqw 4cqw 3cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--ui); }
.tq-kopf{ align-self:stretch; display:flex; align-items:center; gap:1.4cqw; font-size:3cqw; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#B8C2D0; }
.tq-marke{ font-weight:900; letter-spacing:-.01em; text-transform:none; color:#F5F7FA; font-size:3.4cqw; }
.tq-nr{ margin-left:auto; letter-spacing:0; }
.tq-frage{ margin:2cqw 0 2.4cqw; font-size:8.6cqw; font-weight:900; line-height:1.1; letter-spacing:-.01em; text-align:center; }
.tq-wahl{ display:grid; grid-template-columns:1fr 1fr; gap:1.8cqw; width:94%; }
.tq-w{ display:flex; align-items:center; gap:1.6cqw; background:#202C3A; border-radius:2cqw; padding:1.6cqw 2cqw; font-size:5.3cqw; font-weight:800; }
.tq-form{ width:4.6cqw; height:4.6cqw; flex:none; fill:currentColor; }
.tq-b{ flex:none; width:5.6cqw; height:5.6cqw; border-radius:50%; display:grid; place-items:center; font-size:3.3cqw; font-weight:900; }
.tq-w:nth-child(1){ color:#2BB3B1; } .tq-w:nth-child(1) .tq-b{ background:#2BB3B1; color:#fff; }
.tq-w:nth-child(2){ color:#4D8CEB; } .tq-w:nth-child(2) .tq-b{ background:#4D8CEB; color:#fff; }
.tq-w:nth-child(3){ color:#F2BC48; } .tq-w:nth-child(3) .tq-b{ background:#F2BC48; color:#2A1A00; }
.tq-w:nth-child(4){ color:#FF6FA8; } .tq-w:nth-child(4) .tq-b{ background:#FF6FA8; color:#3A0A1E; }
.tq-w > span:last-child{ color:#F5F7FA; }
.panel-tv .blase-c{ font-size:clamp(14px,1.05vw,16px); padding:7px 12px; border-radius:16px; }
.panel-tv{ --tv-l:26.333%; --tv-t:6.533%; --tv-b:63.583%; --tv-h:26.2%; }

/* ---------- ECHTE CODES IM BILD (start/codes_im_bild.js) ----------
   Das Skript legt .im-bild genau auf das gemalte Bild und bildet den Inhalt per matrix3d
   auf die vier Ecken der Tafel/Seite/des Schirms ab. Der Code ist unser echter Code
   (bilder/qr-app.svg, Stil "weich", nichts in der Mitte), Tinte Nachtblau auf Creme,
   darunter klein der Schriftzug. Ein warmer Schein haelt ihn in der Bildwelt. */
.im-bild{ position:absolute; left:0; top:0; width:0; height:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s ease-in-out; }
.im-bild.da{ opacity:1; }
.pk .im-bild{ z-index:-2; }
.im-bild > *{ position:absolute; left:0; top:0; transform-origin:0 0; }
.ib-code{ background:#F7F3EA; border-radius:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2%;
  box-shadow:0 0 0 14px rgba(255,214,150,.35), 0 0 90px 30px rgba(255,196,110,.38); }
.ib-code .ib-qr{ display:block; height:82%; width:auto; max-width:94%; aspect-ratio:1; }
.ib-code b{ font-family:var(--ui); font-weight:900; color:#0C1B25; font-size:80px; line-height:1; letter-spacing:-.02em; }
.ib-schwebt .ib-code{ box-shadow:0 0 0 18px rgba(255,214,150,.45), 0 0 160px 60px rgba(255,196,110,.5); }
/* Tablet am Creator-Bild: Kurzvideo (Hochformat) mit Fortschritt, Herz, Kommentar, Teilen,
   Kanal-Kreis - erkennbar "ein Video", aber KEINE echte Marke. Darunter der Code. */
.ib-maske{ -webkit-mask:url(/bilder/illu/creator-schirm.png) 0 0/100% 100% no-repeat; mask:url(/bilder/illu/creator-schirm.png) 0 0/100% 100% no-repeat; }
.ib-video{ background:#0C1B25; display:flex; flex-direction:column; font-family:var(--ui); color:#F5F7FA; overflow:hidden; }
.iv-film{ position:relative; flex:1; overflow:hidden; }
.iv-bild{ position:absolute; inset:0; background:#0C1B25 url(/bilder/illu/cover-dino.webp) center 40%/cover no-repeat; }
.iv-seite{ position:absolute; right:80px; bottom:190px; display:flex; flex-direction:column; gap:56px; }
.iv-seite i{ display:block; width:110px; height:110px; background:#fff; opacity:.95; -webkit-mask:var(--z) center/contain no-repeat; mask:var(--z) center/contain no-repeat; }
.iv-herz{ --z:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3S4 15.6 4 9.9A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 2.9c0 5.7-8 10.4-8 10.4z'/%3E%3C/svg%3E"); }
.iv-blase{ --z:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10.2A5.7 5.7 0 0 1 9.7 4.5h4.6A5.7 5.7 0 0 1 20 10.2v.3a5.7 5.7 0 0 1-5.7 5.7H10l-4.4 3.6v-4A5.7 5.7 0 0 1 4 10.5z'/%3E%3C/svg%3E"); }
.iv-teilen{ --z:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 4.5 21 11l-8 6.5v-3.8c-4.6 0-7.7 1.4-10 4.8.8-5 3.8-9.2 10-10z'/%3E%3C/svg%3E"); }
.iv-kanal{ position:absolute; left:60px; bottom:80px; display:flex; align-items:center; gap:24px; }
.iv-kanal i{ width:120px; height:120px; border-radius:50%; background:linear-gradient(140deg,#F2BC48,#FF6FA8); box-shadow:0 0 0 7px #fff; }
.iv-kanal em{ display:block; height:26px; border-radius:13px; background:rgba(255,255,255,.9); width:250px; }
.iv-kanal em + em{ width:160px; opacity:.6; margin-left:-8px; }
.iv-balken{ position:absolute; left:0; right:0; bottom:0; height:20px; background:rgba(255,255,255,.28); }
.iv-balken i{ display:block; width:62%; height:100%; background:#fff; }
.iv-unten{ flex:none; height:31%; display:flex; align-items:center; gap:40px; padding:0 44px; background:#F7F3EA; color:#0C1B25; }
.iv-unten .ib-qr{ height:86%; width:auto; aspect-ratio:1; flex:none; }
.iv-unten span{ font-size:62px; font-weight:800; line-height:1.15; color:#3A4A5C; }
.iv-unten b{ display:block; font-size:78px; font-weight:900; color:#0C1B25; letter-spacing:-.02em; }
@media (prefers-reduced-motion:reduce){ .im-bild{ transition:none; } }

/* ---------- SPRECHBLASEN SITZEN AM BILD (nicht am Bildschirm) ----------
   Das Panel ist immer 4:5; Lage in Prozent, Schrift in cqw des Panels - so bleibt jede
   Blase bei 320, 393 und 1440 px an derselben Stelle im Bild, der Zipfel am Sprecher. */
.panel{ container-type:inline-size; }
.blase-c{ font-size:clamp(13px,5.6cqw,19px); padding:2.8cqw 4.2cqw; border-radius:5.5cqw; max-width:70%; }
.blase-c::after{ width:4.6cqw; height:4.6cqw; bottom:-1.9cqw; }
.panel-nr{ width:max(28px,10cqw); height:max(28px,10cqw); top:4cqw; left:4cqw; font-size:max(14px,4.6cqw); }
.panel figcaption{ left:5cqw; right:5cqw; bottom:5cqw; font-size:clamp(16px,6.2cqw,22px); }
.panel-tv .blase-c{ font-size:clamp(12px,5cqw,17px); padding:2.2cqw 3.6cqw; border-radius:4.6cqw; }
.blase-c.links{ top:4.5%; left:17%; right:auto; } .blase-c.links::after{ left:16%; right:auto; border-radius:0 0 0 14px; transform:skewX(-18deg); }
.blase-c.rechts{ top:4.5%; right:4.5%; left:auto; } .blase-c.rechts::after{ left:16%; right:auto; border-radius:0 0 0 14px; transform:skewX(-18deg); }

/* PARTNER-KARTE: Bild oben, Text darunter (Runde 4) - nichts liegt mehr ueber dem Bild,
   die Codes auf Tafel, Seite und Tablet bleiben ganz zu sehen. */
.pk{ aspect-ratio:auto !important; justify-content:flex-start; background:#13202B; }
.pk::before{ content:none; }
.pk-bild{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.pk-bild > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--weich); }
.pk .pk-bild .im-bild{ z-index:1; }
@media (hover:hover){ .pk:hover .pk-bild > img{ transform:none; } }
.pk-text{ position:relative; margin-top:-30px; padding-top:0; }
.pk-bild::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(180deg, rgba(19,32,43,0), #13202B); z-index:2; pointer-events:none; }
.pk-wer{ position:relative; z-index:3; }
@media (max-width:560px){ .pk{ aspect-ratio:auto !important; } }

/* ---------- TAG UND NACHT (Runde 5: "weniger arg, harmonischer") ----------
   Hero Nacht -> Comic DAEMMERUNG -> Reise All -> Partner DAEMMERUNG -> Schluss Nacht.
   Variante A (Standard, sanft): kein Tag, sondern gedaempftes Morgen-/Abendblau mit einem
   warmen Hauch zum Rand hin - der Helligkeitssprung bleibt klein, Schrift bleibt hell wie
   ueberall. Variante B (mittel, html.tag-b, zum Vergleich per ?tag=b): heller Himmel,
   aber kein Creme; Schrift dort nachtblau. Lange Verlaeufe, kein Schnitt; statisch. */
.tag{ position:relative; isolation:isolate;
  background:linear-gradient(180deg, var(--paper) 0, #12263D 180px, #1E3A5E 360px, #2A4B75 52%, #34507D calc(100% - 420px),
    #4A4C77 calc(100% - 280px), #5A4A70 calc(100% - 190px), #2B2A45 calc(100% - 90px), var(--paper) 100%); }
.r3 .tag{ padding-top:clamp(170px,22vh,240px) !important; padding-bottom:clamp(190px,24vh,270px) !important; }
.tag .panel, .tag .pk{ box-shadow:0 26px 50px -28px rgba(5,10,25,.7); }
.r3 .tag .kicker{ color:#D2B8FF; }
.r3 .tag .lead{ color:rgba(245,247,250,.84); }
.tag .p-beweis span, .tag .comic-fuss span{ color:rgba(245,247,250,.78); }

html.tag-b .tag{ --tag-tinte:#13202B; --tag-leise:#3E4E62; --tag-lila:#5B21B6;
  background:linear-gradient(180deg, var(--paper) 0, #1D3758 140px, #48709F 300px, #8DAED2 450px, #AFC4DB 52%, #BCC3D6 calc(100% - 440px),
    #B49AAE calc(100% - 290px), #7E637F calc(100% - 180px), #2E2A45 calc(100% - 80px), var(--paper) 100%); }
html.tag-b .r3 .tag, html.tag-b body.r3 .tag{ padding-top:clamp(240px,28vh,300px) !important; padding-bottom:clamp(260px,30vh,320px) !important; }
html.tag-b .r3 main#oben .tag h2{ color:var(--tag-tinte); }
html.tag-b .r3 .tag .kicker{ color:var(--tag-lila); }
html.tag-b .r3 .tag .lead, html.tag-b .tag .p-beweis span, html.tag-b .tag .comic-fuss span{ color:var(--tag-leise); }
html.tag-b .tag .comic-fuss, html.tag-b .tag .p-beweis b{ color:var(--tag-tinte); }
html.tag-b .r3 main#oben .tag .reden h2{ color:#fff; } html.tag-b .r3 .tag .reden .lead{ color:rgba(255,255,255,.88); }
/* Nach dem Partner-Tag folgt der Schluss in der Nacht: der Abschnitt danach braucht keinen eigenen Rand */
.tag + .ende3{ margin-top:0; }

/* ---------- RUNDE 5 ----------
   CODES: nur noch dort per Code, wo die gemalte Flaeche leer ist und der Code sauber
   aufliegt (Buchseiten-Kaestchen, Schulzettel, Tablet, Fernseher). Gemalte Tafel-Codes
   (Zoo, Stadt, Museum, Hero, Gemeinsam) bleiben gemalt - sie sitzen im Licht des Bildes.
   Gedruckt = Tinte auf Papier: multipliziert mit der Seite, dadurch traegt der Code
   Licht, Schatten und Korn des Papiers mit; ein Hauch Unschaerfe wie im Bild. */
.ib-druck{ display:grid; place-items:center; }
.ib-druck img{ width:84%; height:auto; aspect-ratio:1; opacity:.86; filter:blur(.5px); }
.ib-gedruckt{ mix-blend-mode:multiply; }

/* Fernseher: dezenter Rahmen in Bildschirm-Perspektive (frontal), um den Schirm herum;
   Bens Muetze steht davor (Ausschnitt unten rechts). */
.panel-tv .tv-rahmen{ position:absolute; z-index:1; left:calc(var(--tv-l) - 1.1%); top:calc(var(--tv-t) - 1.4%); width:calc(var(--tv-b) + 2.2%); height:calc(var(--tv-h) + 2.6%);
  border-radius:1.6cqw; background:#05080D; box-shadow:0 0 0 .35cqw rgba(160,190,230,.16), 0 2cqw 4cqw -1cqw rgba(0,0,0,.6);
  clip-path:polygon(0 0,100% 0,100% 74%,76% 74%,76% 100%,0 100%); }
.panel-tv .tv-quiz{ z-index:2; border-radius:.6cqw; }
.tq-w{ gap:2cqw; }

/* Comic 4: Blasen am Sprecher. Mia (Mund bei 35 % / 48 %): "Jupiter!" rechts oberhalb von ihr,
   Zipfel nach links unten. Ben (Mund bei 82 % / 40 %): "Frage 3!" links neben ihm, Zipfel nach rechts unten. */
.blase-c.bei-mia{ top:34.5%; left:20%; right:auto; } .blase-c.bei-mia::after{ left:62%; right:auto; border-radius:0 0 0 14px; transform:skewX(-30deg); }
.blase-c.bei-ben{ top:34%; right:23%; left:auto; } .blase-c.bei-ben::after{ left:auto; right:8%; bottom:-1.9cqw; top:auto; width:4.6cqw; height:4.6cqw; border-radius:0 0 14px 0; transform:skewX(30deg); }
.blase-c.rechts.zipfel-weit::after{ left:8%; transform:skewX(-34deg); }

/* Schule: Kreide der Lehrkraft (Text per Code, nicht gemalt) und ein Zettel mit dem Code. */
@font-face{ font-family:'Gochi Hand'; src:url(/fonts/gochi-hand.woff2) format('woff2'); font-display:swap; }
.ib-kreide{ font-family:'Gochi Hand', cursive; color:rgba(244,246,240,.86); padding:20px 10px; filter:blur(.35px); }
.ib-kreide p{ margin:0; font-size:94px; line-height:1.28; letter-spacing:.01em; white-space:nowrap; }
.ib-kreide .k-titel{ font-size:116px; margin-bottom:24px; text-decoration:underline; text-decoration-thickness:6px; text-underline-offset:16px; }
.ib-kreide .k-pfeil{ position:absolute; right:-10px; bottom:120px; width:330px; height:auto; fill:none; stroke:rgba(244,246,240,.86); stroke-width:11; stroke-linecap:round; stroke-linejoin:round; }
.ib-kreide .k-scan{ position:absolute; right:150px; bottom:40px; font-size:84px; transform:rotate(-6deg); }
.ib-zettel{ grid-template-rows:1fr auto; padding:9% 0 10%; }
.ib-zettel img{ width:86%; opacity:.9; }
.ib-zettel span{ font-family:var(--ui); font-weight:800; font-size:92px; color:#2A3140; opacity:.85; filter:blur(.4px); }

.panel-tv .blase-c{ font-size:clamp(11px,4.2cqw,16px); padding:2cqw 3cqw; border-radius:4cqw; }
.blase-c.bei-mia::after{ transform:skewX(-14deg); }

/* ---------- HARMONIE (Abschluss Runde 5) ----------
   Eine Rundung und ein Schatten fuer alle Bildkarten, eine Ueberschriften-Skala, gleich
   gebaute Kicker. Das Comic-Raster darf am Desktop etwas breiter werden. */
:root{ --rund-bild:clamp(22px,2.2vw,30px); --schatten-bild:0 28px 56px -30px rgba(3,8,20,.75); }
.panel, .pk, .r3 .g-buehne .video-platz{ border-radius:var(--rund-bild) !important; box-shadow:var(--schatten-bild) !important; }
.strip{ max-width:1480px; }
.r3 main#oben .lernen6 h2, .r3 main#oben .create5 h2, .r3 main#oben .ende-leise h2{ font-size:clamp(34px,4.4vw,56px); }
.r3 main#oben .comic h2, .r3 main#oben .partner6 h2, .r3 main#oben .reise6 h2, .r3 main#oben .gemeinsam h2{ font-size:clamp(38px,5vw,64px); }
.lernen6 .kicker, .create5 .kicker{ text-align:center; }
.reden{ max-width:1240px; margin-left:auto !important; margin-right:auto !important; width:calc(100% - 2 * var(--rand)); }

/* =====================================================================================
   RUNDE 6: TAGESLAUF (Marc: "Sternenhimmel und Dunkelblau ... langsam Tag mit hellen
   Karten, dann wieder langsam Nacht; die richtigen Bilder im richtigen Ablauf").
   Ebenen: html Nachtblau -> canvas.himmel (Sterne + Kometen, fest) -> main. Nacht-Abschnitte
   sind durchsichtig (man sieht den Himmel), der Tag-Abschnitt legt einen langen Verlauf
   Nacht -> Morgen -> Tag -> Abendrot -> Nacht darueber.
   ===================================================================================== */
html{ background:var(--paper); }
body.r3{ background:transparent; }
canvas.himmel{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block; }
main#oben, .fuss3{ position:relative; z-index:1; }
.reise6{ background:radial-gradient(60% 40% at 50% 55%, rgba(40,24,90,.22), rgba(5,7,12,0) 70%) !important; }
.reise6 [data-sterne]{ display:none; }

/* Kopf der Teile (Kicker, Ueberschrift, Lead) - ueberall gleich gebaut */
.teil-kopf{ text-align:center; }
.r3 main#oben .teil-kopf h2{ margin-left:auto; margin-right:auto; max-width:16ch; font-size:clamp(38px,5vw,64px); }
.teil-kopf .lead{ margin-left:auto; margin-right:auto; max-width:34ch; }
.zwischen-kopf{ margin-top:clamp(110px,16vh,180px); }

/* ---------- Bild und Karte im Wechsel (wie die Takt-Zeilen der Live-Seite) ---------- */
.zeile{ display:grid; grid-template-columns:minmax(0,430px) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center;
  max-width:1060px; margin:clamp(56px,9vh,104px) auto 0; padding:0 clamp(20px,4vw,48px); }
.zeile.rechts{ grid-template-columns:minmax(0,1fr) minmax(0,430px); }
.zeile.rechts .z-bild{ order:2; }
.z-bild{ position:relative; margin:0; width:100%; aspect-ratio:4/5; border-radius:var(--rund-bild); overflow:hidden; box-shadow:var(--schatten-bild); background:#13202B; }
.z-bild > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.panel.z-bild::after{ content:none; }
.pk-bild.z-bild::after{ content:none; }
.pk-bild .im-bild{ z-index:1; }
.z-karte{ border-radius:var(--rund-bild); padding:clamp(24px,3vw,40px); background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(196,166,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.z-karte h3{ margin:0; color:var(--ink); font-size:clamp(26px,3vw,40px); font-weight:900; line-height:1.08; letter-spacing:-.03em; text-wrap:balance; }
.z-karte p{ margin:14px 0 0; color:var(--soft); font-size:clamp(16px,1.4vw,19px); font-weight:700; line-height:1.45; max-width:34ch; }
.z-nr{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--lila); color:#fff; font-weight:900; font-size:18px; margin-bottom:16px; }
.z-karte .pk-wer{ margin:0 0 16px; background:rgba(196,166,255,.14); color:var(--ink); }
.z-karte .pk-wer svg{ color:var(--lila-schrift); }
.z-karte .pk-wer svg .aus{ fill:#263548; }

/* ---------- Der Tag: langer Himmel, helle Karten ---------- */
.tag-teil{ position:relative; padding:clamp(320px,40vh,440px) 0 clamp(440px,54vh,560px) !important;
  --tag-tinte:#13202B; --tag-leise:#3D4C60;
  background:linear-gradient(180deg, rgba(12,27,37,0) 0, #142B47 200px, #2E5684 380px, #6F9CC8 560px, #A9CAE6 740px, #C4DBEE 920px,
    #CCE0F0 50%, #D3E1EA calc(100% - 960px), #E3D6C6 calc(100% - 760px), #D9AE96 calc(100% - 580px), #A77F8A calc(100% - 420px),
    #5C4C72 calc(100% - 260px), #24294A calc(100% - 120px), rgba(12,27,37,0) 100%); }
.r3 main#oben .tag-teil h2{ color:var(--tag-tinte); }
.r3 .tag-teil .kicker{ color:#5B21B6; }
.r3 .tag-teil .lead{ color:var(--tag-leise); }
.tag-teil .z-karte{ background:rgba(255,255,255,.66); box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 24px 48px -30px rgba(30,50,90,.45); }
.tag-teil .z-karte h3{ color:var(--tag-tinte); }
.tag-teil .z-karte p{ color:var(--tag-leise); }
.tag-teil .z-karte .pk-wer{ background:rgba(91,33,182,.1); color:#3B1A78; }
.tag-teil .z-karte .pk-wer svg{ color:#6D28D9; }
.tag-teil .z-karte .pk-wer svg .aus{ fill:#E9E4F4; }
.tag-teil .z-bild{ box-shadow:0 30px 60px -32px rgba(30,50,90,.6); }
.tag-teil .p-beweis{ margin-top:clamp(70px,10vh,110px); }
.tag-teil .p-beweis b{ color:var(--tag-tinte); } .tag-teil .p-beweis span{ color:var(--tag-leise); }

/* ---------- Die Nacht ---------- */
.nacht-teil{ padding:clamp(80px,12vh,140px) 0 clamp(60px,9vh,110px) !important; }
.nacht-teil .comic-fuss{ margin-top:clamp(56px,8vh,90px); }

/* ---------- Lass uns reden: ruhige Karte im Stil der anderen ---------- */
.reden-karte{ max-width:1060px; margin:clamp(70px,10vh,120px) auto 0; width:calc(100% - 2 * clamp(20px,4vw,48px));
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(18px,3vw,40px);
  border-radius:var(--rund-bild); padding:clamp(26px,3.4vw,44px); background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(196,166,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.reden-karte .reden-okto{ width:clamp(54px,5vw,68px); margin:0; color:var(--lila-schrift); }
.r3 main#oben .reden-karte h2{ margin:0; font-size:clamp(28px,3.2vw,40px); color:var(--ink); text-align:left; }
.reden-karte p{ margin:8px 0 0; color:var(--soft); font-weight:700; font-size:16px; line-height:1.45; max-width:46ch; }
.reden-knopf{ gap:10px; white-space:nowrap; }
.creator-teil{ padding-bottom:clamp(40px,6vh,80px) !important; }

@media (max-width:760px){
  .zeile, .zeile.rechts{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:clamp(44px,7vh,64px); max-width:520px; }
  .zeile.rechts .z-bild{ order:0; }
  .z-karte{ margin:-36px 14px 0; position:relative; z-index:3; padding:22px 22px 24px; }
  .tag-teil{ padding:clamp(300px,40vh,380px) 0 clamp(380px,50vh,460px) !important; }
  .reden-karte{ grid-template-columns:minmax(0,1fr); text-align:left; }
}
.ib-maske{ -webkit-mask-image:url(/bilder/illu/creator-nacht-schirm.png); mask-image:url(/bilder/illu/creator-nacht-schirm.png); }
.z-karte h3{ hyphens:manual; -webkit-hyphens:manual; } .reden-karte .reden-okto{ color:var(--lila-schrift); }
/* Morgen und Abend haengen an der Hoehe des Polsters: Kopfzeile und Zahlen stehen immer im Licht. */
.tag-teil{ --morgen:clamp(320px,40vh,440px); --abend:clamp(440px,54vh,560px);
  padding:var(--morgen) 0 var(--abend) !important;
  background:linear-gradient(180deg, rgba(12,27,37,0) 0, #142B47 calc(var(--morgen) * .3), #2E5684 calc(var(--morgen) * .55),
    #6F9CC8 calc(var(--morgen) * .8), #A9CAE6 var(--morgen), #C4DBEE calc(var(--morgen) + 220px),
    #CCE0F0 50%, #D3E1EA calc(100% - var(--abend) - 260px), #E3D6C6 calc(100% - var(--abend)), #D9AE96 calc(100% - var(--abend) * .78),
    #A77F8A calc(100% - var(--abend) * .58), #5C4C72 calc(100% - var(--abend) * .36), #24294A calc(100% - var(--abend) * .16), rgba(12,27,37,0) 100%); }
@media (max-width:760px){ .tag-teil{ --morgen:clamp(300px,40vh,380px); --abend:clamp(380px,50vh,460px); } }

/* ---------- RUNDE 7 ---------- */
/* Sprechblasen: je Sprecher eine Lage (Prozent im Bild), Zipfel zum Mund.
   Zipfel unten (Standard) oder oben (.zipfel-oben) - Spitze per skew zur Seite des Sprechers. */
.blase-c.bei-ben1{ top:6%; left:6%; right:auto; } .blase-c.bei-ben1::after{ left:30%; right:auto; border-radius:0 0 0 14px; transform:skewX(-10deg); }
.blase-c.bei-ben2{ top:15%; right:4%; left:auto; } .blase-c.bei-ben2::after{ left:10%; right:auto; border-radius:0 0 0 14px; transform:skewX(-40deg); }
.blase-c.bei-ben3{ top:12%; right:5%; left:auto; } .blase-c.bei-ben3::after{ left:18%; right:auto; border-radius:0 0 0 14px; transform:skewX(-22deg); }
/* Comic 4: Mama links oben im freien Wandstueck, Zipfel nach unten rechts zu ihrem Mund;
   Mia unten ueber der Sofalehne, Zipfel nach oben zu ihrem Mund. */
.blase-c.bei-mama{ top:20%; left:3%; right:auto; } .blase-c.bei-mama::after{ left:56%; right:auto; border-radius:0 0 14px 0; transform:skewX(28deg); }
.blase-c.bei-mia{ top:61.5%; left:28%; right:auto; } .blase-c.bei-mia::after{ top:-1.9cqw; bottom:auto; left:30%; right:auto; border-radius:14px 0 0 0; transform:skewX(22deg); }
.blase-c.bei-ben, .blase-c.links, .blase-c.rechts{ }

/* Lass uns reden: das Chat-Zeichen der App (Stil F) in Lila statt der Figur */
.reden-zeichen{ width:clamp(56px,5vw,68px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:rgba(139,54,253,.16); color:var(--lila-hell); }
.reden-zeichen svg{ width:56%; height:56%; fill:currentColor; overflow:visible; }
.reden-zeichen .q-strich{ fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }

/* Tag und Nacht: deutlich laengere, weichere Uebergaenge (mehr Stuetzpunkte, sanfte Kurve) */
.tag-teil{ --morgen:clamp(560px,75vh,780px); --abend:clamp(680px,88vh,900px);
  background:linear-gradient(180deg, rgba(12,27,37,0) 0, rgba(13,30,45,.6) calc(var(--morgen) * .08), #0F2338 calc(var(--morgen) * .18),
    #142B47 calc(var(--morgen) * .3), #1D3B5F calc(var(--morgen) * .42), #2A517D calc(var(--morgen) * .54), #3F6A99 calc(var(--morgen) * .65),
    #5A86B5 calc(var(--morgen) * .76), #7BA5CF calc(var(--morgen) * .86), #98BEE0 calc(var(--morgen) * .94), #A9CAE6 var(--morgen),
    #C4DBEE calc(var(--morgen) + 320px), #CCE0F0 50%, #D3E1EA calc(100% - var(--abend) - 340px),
    #DCDCD8 calc(100% - var(--abend) - 120px), #E3D6C6 calc(100% - var(--abend)), #E0C6B0 calc(100% - var(--abend) * .9),
    #D9AE96 calc(100% - var(--abend) * .8), #C69990 calc(100% - var(--abend) * .7), #A9828C calc(100% - var(--abend) * .6),
    #87698A calc(100% - var(--abend) * .5), #655380 calc(100% - var(--abend) * .4), #463E68 calc(100% - var(--abend) * .3),
    #2D2E50 calc(100% - var(--abend) * .2), #1A2238 calc(100% - var(--abend) * .1), rgba(12,27,37,.5) calc(100% - var(--abend) * .04), rgba(12,27,37,0) 100%); }
@media (max-width:760px){ .tag-teil{ --morgen:clamp(460px,64vh,580px); --abend:clamp(540px,74vh,660px); } }

/* ---------- RUNDE 8 ---------- */
/* Comic-Zipfel: geschwungenes, spitz zulaufendes Schwaenzchen (SVG) an der Blasenkante.
   Je Blase: --zx = Lage an der Unterkante (Anteil der Blasenbreite), --zw = Drehung
   (0 = nach unten, + = Richtung links), --zs = 1 / -1 (Spiegeln, Schwung nach rechts). */
.blase-c::after{ display:none !important; }
.blase-c .zipfel{ position:absolute; top:calc(100% - 1px); left:var(--zx,30%); width:clamp(15px,6cqw,24px); height:auto; aspect-ratio:24/28;
  fill:#fff; overflow:visible; transform-origin:44% 0; transform:translateX(-44%) scaleX(var(--zs,1)) rotate(var(--zw,0deg)); filter:drop-shadow(0 4px 4px rgba(0,0,0,.18)); }
.blase-c{ max-width:none; white-space:nowrap; }
/* Lagen: aus den Bildkoordinaten von Kopf/Mund (Prozent im Bild) */
.blase-c.bei-ben1{ top:6%; left:6%; } .bei-ben1{ --zx:38%; --zw:4deg; }
.blase-c.bei-ben2{ top:15%; right:4%; left:auto; } .bei-ben2{ --zx:14%; --zw:52deg; }
.blase-c.bei-ben3{ top:11%; right:5%; left:auto; } .bei-ben3{ --zx:16%; --zw:14deg; }
.blase-c.bei-mama{ top:19%; left:3%; right:auto; } .bei-mama{ --zx:58%; --zs:-1; --zw:-12deg; }
.blase-c.bei-mia{ top:34.8%; left:21.8%; right:auto; font-size:clamp(11px,3.6cqw,14px); padding:1.5cqw 2.6cqw; } .bei-mia{ --zx:56%; --zw:-6deg; --zs:-1; }
@media (max-width:420px){ .blase-c{ white-space:normal; } .blase-c.bei-ben1{ max-width:62%; } }

/* Abstaende: Inhalte laufen IN die langen Uebergaenge hinein (Marc). Der Tag-Abschnitt
   schiebt seinen Morgen unter "Alles lernen" und seinen Abend unter "Am Abend". */
.lernen6{ position:relative; z-index:2; }
.tag-teil{ z-index:1; margin-top:calc(var(--morgen) * -.42); padding-top:calc(var(--morgen) * .6) !important;
  padding-bottom:calc(var(--abend) * .62) !important; margin-bottom:calc(var(--abend) * -.5); }
.nacht-teil{ position:relative; z-index:2; }
#abend.nacht-teil{ padding-top:clamp(30px,5vh,60px) !important; }
.tag-teil > .teil-kopf:first-child + .zeile{ margin-top:clamp(36px,5vh,56px); }
/* Kopf im Morgen (noch dunkel): helle Schrift */
.r3 main#oben .tag-teil > .teil-kopf:first-child h2{ color:#fff; text-shadow:0 2px 18px rgba(8,20,40,.35); }
.r3 .tag-teil > .teil-kopf:first-child .kicker{ color:#D8C2FF; }
/* Zahlen im Abendlicht: auf eine helle Glaskarte */
.tag-teil .p-beweis{ width:max-content; max-width:calc(100% - 40px); margin-left:auto; margin-right:auto; padding:22px clamp(26px,4vw,48px);
  border-radius:var(--rund-bild); background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 24px 48px -30px rgba(30,30,70,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
/* Kopf am Abend: kraeftig hell */
.r3 main#oben #abend .teil-kopf h2{ color:#fff; text-shadow:0 2px 18px rgba(20,10,40,.4); }
.r3 #abend .teil-kopf .kicker{ color:#F1E8FF; }

/* ---------- Info-Blasen bei "Alles lernen" (gleicher Comic-Stil wie die Bild-Blasen) ---------- */
.lern-g > div{ position:relative; }
.lern-k6{ all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--ink); font-size:16px; font-weight:800; letter-spacing:-.01em; border-radius:18px; padding:4px 2px; }
.lern-k6:focus-visible{ outline:2.5px solid var(--lila-schrift); outline-offset:4px; }
@media (max-width:560px){ .lern-k6{ font-size:14px; gap:8px; } }
.lern-blase{ position:absolute; bottom:calc(100% + 18px); left:50%; z-index:5; width:max-content; max-width:min(250px, 78vw);
  padding:12px 15px 13px; border-radius:18px; background:#fff; color:#0C1B25; text-align:left; box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translate(-50%, 6px); transition:opacity .18s ease-in-out, transform .18s ease-in-out, visibility 0s .18s; pointer-events:none; }
.lern-blase b{ display:block; font-size:16px; font-weight:900; letter-spacing:-.01em; }
.lern-blase > span{ display:block; margin-top:3px; font-size:14px; font-weight:700; line-height:1.35; color:#3D4C60; }
.lern-blase .zipfel{ position:absolute; top:calc(100% - 1px); left:50%; width:20px; height:auto; aspect-ratio:24/28; fill:#fff; transform:translateX(-44%); overflow:visible; }
@media (hover:hover){ .lern-g > div:hover .lern-blase{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; } }
.lern-g > div:focus-within .lern-blase, .lern-g > div.offen .lern-blase{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; }
/* Rand-Kacheln: Blase nach innen schieben, Zipfel bleibt ueber dem Zeichen */
.lern-g > div:first-child .lern-blase{ left:0; transform:translate(0, 6px); }
.lern-g > div:first-child .lern-blase .zipfel{ left:clamp(26px,3.6vw,34px); }
.lern-g > div:last-child .lern-blase{ left:auto; right:0; transform:translate(0, 6px); }
.lern-g > div:last-child .lern-blase .zipfel{ left:auto; right:clamp(18px,3vw,28px); transform:none; }
@media (hover:hover){ .lern-g > div:first-child:hover .lern-blase, .lern-g > div:last-child:hover .lern-blase{ transform:none; } }
.lern-g > div:first-child:is(:focus-within,.offen) .lern-blase, .lern-g > div:last-child:is(:focus-within,.offen) .lern-blase{ transform:none; }
@media (prefers-reduced-motion:reduce){ .lern-blase{ transition:none; transform:translate(-50%,0); } .lern-g > div:first-child .lern-blase, .lern-g > div:last-child .lern-blase{ transform:none; } }
/* Handy: Blase sitzt mittig ueber der ganzen Reihe (passt immer in die Breite), der Zipfel
   wandert ueber das jeweilige Zeichen (--zl je Kachel). */
@media (max-width:560px){
  .lern-g{ position:relative; }
  .lern-g > div{ position:static; }
  .lern-g > div .lern-blase, .lern-g > div:first-child .lern-blase, .lern-g > div:last-child .lern-blase{ left:50%; right:auto; bottom:calc(100% - 8px); max-width:calc(100% - 8px); transform:translate(-50%, 6px); }
  .lern-g > div:is(:focus-within,.offen) .lern-blase, .lern-g > div:first-child:is(:focus-within,.offen) .lern-blase, .lern-g > div:last-child:is(:focus-within,.offen) .lern-blase{ transform:translate(-50%, 0); }
  .lern-g > div .lern-blase .zipfel, .lern-g > div:first-child .lern-blase .zipfel, .lern-g > div:last-child .lern-blase .zipfel{ left:var(--zl); right:auto; transform:translateX(-44%); }
  .lern-g > div:nth-child(1){ --zl:10%; } .lern-g > div:nth-child(2){ --zl:30%; } .lern-g > div:nth-child(3){ --zl:50%; } .lern-g > div:nth-child(4){ --zl:70%; } .lern-g > div:nth-child(5){ --zl:90%; }
}
@media (max-width:360px){ .lern-g{ gap:0; margin:0 -8px; } .lern-k6{ font-size:12px; letter-spacing:-.02em; } }

/* Info-Blasen oeffnen UNTER der Zeichen-Reihe (Runde 8b): oben verdeckten sie die Ueberschrift,
   am Desktop beim ersten Zeichen ebenfalls. Zipfel zeigt nach oben zum Zeichen; die Blase
   liegt kurz ueber dem Satz darunter. */
.lern-g > div .lern-blase{ bottom:auto !important; top:calc(100% + 16px); }
.lern-blase .zipfel{ top:auto !important; bottom:calc(100% - 1px); transform:translateX(-44%) scaleY(-1) !important; }
.lern-g > div:last-child .lern-blase .zipfel{ transform:scaleY(-1) !important; }
.lern-blase{ transform:translate(-50%, -6px); }
.lern-g > div:first-child .lern-blase, .lern-g > div:last-child .lern-blase{ transform:translate(0, -6px); }
@media (max-width:560px){
  .lern-g > div .lern-blase{ top:calc(100% - 2px); }
  .lern-g > div .lern-blase, .lern-g > div:first-child .lern-blase, .lern-g > div:last-child .lern-blase{ transform:translate(-50%, -6px); }
  .lern-g > div .lern-blase .zipfel, .lern-g > div:first-child .lern-blase .zipfel, .lern-g > div:last-child .lern-blase .zipfel{ transform:translateX(-44%) scaleY(-1) !important; }
}
@media (max-width:560px){ .lern-g > div .lern-blase{ top:calc(100% + 14px); } .lern-blase .zipfel{ width:14px; } }

/* ---------- RUNDE 9 ---------- */
/* Figuren-Blasen: Zipfel ~40 % kuerzer, Ansatz greift 3 Einheiten in die Blase (gleiche
   Fuellung, keine Naht), kein eigener Schatten, Drehung hoechstens ~30 Grad (kein Knick). */
.blase-c .zipfel{ width:clamp(9px,3.6cqw,13px); aspect-ratio:24/31; top:calc(100% - 3px); filter:none; transform-origin:44% 10%; }
.bei-ben1{ --zx:34%; --zw:0deg; }
.bei-ben2{ --zx:12%; --zw:28deg; }
.bei-ben3{ --zx:16%; --zw:10deg; }
.bei-mama{ --zx:62%; --zs:-1; --zw:-6deg; }
.bei-mia{ --zx:54%; --zs:-1; --zw:0deg; }

/* Info-Blasen = die Tipp-Blase der App (.halt-tipp in karteibox_1.jsx): weiss, Schrift #1B2735,
   Rundung 22, Schatten 0 14px 40px, Schrift 800, kleines Dreieck 20x10 - UEBER dem Knopf,
   Dreieck zeigt nach unten. Der Abstand Ueberschrift <-> Reihe gibt der Blase Platz. */
.lern-g{ margin-top:clamp(96px,10vw,112px); }
.lern-g > div .lern-blase, .lern-g > div:first-child .lern-blase, .lern-g > div:last-child .lern-blase{ top:auto !important; bottom:calc(100% + 12px) !important; }
.lern-blase{ background:#FFFFFF; color:#1B2735; border-radius:22px; padding:12px 16px 13px; box-shadow:0 14px 40px rgba(0,0,0,.5); font-family:var(--ui); font-weight:800; }
.lern-blase b{ font-size:15px; font-weight:900; color:#1B2735; }
.lern-blase > span{ font-size:14px; font-weight:800; color:#4A5868; }
.lern-blase .halt-pfeil{ position:absolute; bottom:-8px; left:var(--pl,50%); width:20px; height:10px; margin-left:-10px; background:#FFFFFF; clip-path:polygon(50% 100%, 0 0, 100% 0); }
.lern-g > div:first-child .lern-blase{ --pl:clamp(30px,3.6vw,39px); }
.lern-g > div:last-child .lern-blase{ --pl:calc(100% - clamp(30px,3.6vw,39px)); }
.lern-blase .zipfel{ display:none; }
/* Einblenden wie in der App (haltAuf, 0,2 s), ohne Bewegung bei reduzierter Bewegung */
.lern-blase{ transform:translate(-50%, 6px) scale(.96); transition:opacity .2s ease-in-out, transform .2s cubic-bezier(.3,1.3,.5,1), visibility 0s .2s; }
.lern-g > div:first-child .lern-blase, .lern-g > div:last-child .lern-blase{ transform:translate(0, 6px) scale(.96); }
@media (hover:hover){ .lern-g > div:hover .lern-blase{ transform:translate(-50%,0); } .lern-g > div:first-child:hover .lern-blase, .lern-g > div:last-child:hover .lern-blase{ transform:none; } }
.lern-g > div:is(:focus-within,.offen) .lern-blase{ transform:translate(-50%,0); }
.lern-g > div:first-child:is(:focus-within,.offen) .lern-blase, .lern-g > div:last-child:is(:focus-within,.offen) .lern-blase{ transform:none; }
@media (max-width:560px){
  .lern-g{ margin-top:118px; }
  .lern-g > div .lern-blase, .lern-g > div:first-child .lern-blase, .lern-g > div:last-child .lern-blase{ left:50%; right:auto; bottom:calc(100% + 10px) !important; transform:translate(-50%, 6px) scale(.96); --pl:var(--zl); }
  .lern-g > div:is(:focus-within,.offen) .lern-blase, .lern-g > div:first-child:is(:focus-within,.offen) .lern-blase, .lern-g > div:last-child:is(:focus-within,.offen) .lern-blase{ transform:translate(-50%,0); }
  .lern-g > div:nth-child(1){ --zl:10%; } .lern-g > div:nth-child(5){ --zl:90%; }
}
@media (prefers-reduced-motion:reduce){ .lern-blase, .lern-g > div .lern-blase{ transition:none; } }