/* Montibit – Design-Vorschlag 2 («Neu», für 9- bis 12-Jährige). ERZEUGT von werkzeuge/design2_css.py aus design/tween-quelle.css –
   nicht hier ändern, sondern dort (und die Farben im Python-Skript). Jede Regel hängt an :root[data-design="tween"]: ohne den Schalter gilt nichts davon.
   Schrift Nunito selbst ausgeliefert (schriften/nunito.css, SIL Open Font License). Dunkelmodus wie im Spiel: Systemeinstellung
   (ausser data-theme="light") oder data-theme="dark" (Einstellungen → Anzeige). Profil-Farbe: data-akzent="violett" | "gruen" (sonst Blau). */
@import url("../schriften/nunito.css");
:root[data-design="tween"]{--display:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;--body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;--akz:var(--a-fill);--akz-brand:var(--a-brand);--marke-mittelblau:#1874e6;--marke-dunkelblau:#0c243a;--marke-hellblau:#a9d9fc;--marke-gelb:#fdc201;--marke-rot:#fa7001;--bg:#f9fafb;--paper:#ffffff;--d2-flaeche2:#f1f5f9;--ink:#0c243a;--muted:#5b6577;--line:#e2e8f0;--board:#047857;--board-soft:#d1fae5;--copper:#b45309;--copper-soft:#ffedd5;--chip:var(--akz-text);--chip-soft:var(--akz-soft);--bad:#dc2626;--bad-soft:#fee2e2;--violett:#6d28d9;--violett-soft:#ede9fe;--yellow:#a16207;--yellow-soft:#fef9c3;--grau-soft:#eef2f6;--knopf:#059669;--knopf-blau:var(--akz);--star:#fdc201;--star-rand:#d97706;--star-off:#e2e8f0;--bildflaeche:#ffffff;--sh:0 1px 2px rgba(12,36,58,.05),0 4px 16px rgba(12,36,58,.06);--d2-sh-gross:0 12px 32px rgba(12,36,58,.16),0 2px 6px rgba(12,36,58,.08);--kopf:var(--akz);--kopf-tief:var(--akz);--ok-flaeche:#ecfdf5;--ok-rand:#6ee7b7;--zu-flaeche:#f1f5f9;--leuchten:#fdc201;--bk-ico:#f1f5f9;--blase:#f1f5f9;--blase-rand:#e2e8f0;--schild:#ffffff;--schild-ink:#0c243a;--schild-mut:#5b6577;--schild-zu:#f1f5f9;--d2-flamme:#fa7001;--d2-flamme-soft:#fff7ed;--d2-flamme-ink:#c2410c;--d2-gruen:#10b981;--akz2:var(--a2-fill);--akz-text:var(--a-text-h);--akz-soft:var(--a-soft-h);--d2-glas:rgba(255,255,255,.86);--a-fill:#1874e6;--a-brand:#1874e6;--a-text-h:#1874e6;--a-text-d:#a9d9fc;--a-soft-h:#e4f1fe;--a-soft-d:#123a63;--a2-fill:#0c243a;}
:root[data-design="tween"][data-akzent="violett"]{--a-fill:#7c3aed;--a-brand:#8b5cf6;--a-text-h:#6d28d9;--a-text-d:#c4b5fd;--a-soft-h:#ede9fe;--a-soft-d:#3b2a63;--a2-fill:#1874e6;}
:root[data-design="tween"][data-akzent="gruen"]{--a-fill:#047857;--a-brand:#10b981;--a-text-h:#047857;--a-text-d:#6ee7b7;--a-soft-h:#d1fae5;--a-soft-d:#14433a;--a2-fill:#1874e6;}
@media (prefers-color-scheme:dark){:root[data-design="tween"]:not([data-theme="light"]){--bg:#0c243a;--paper:#133150;--d2-flaeche2:#1a3b5e;--ink:#f1f5f9;--muted:#a3b1c6;--line:#2a4b70;--board:#6ee7b7;--board-soft:#123b33;--copper:#fdba74;--copper-soft:#43301c;--chip:var(--akz-text);--chip-soft:var(--akz-soft);--bad:#fca5a5;--bad-soft:#4a2328;--violett:#c4b5fd;--violett-soft:#33295a;--yellow:#fde68a;--yellow-soft:#3f3720;--grau-soft:#1a3b5e;--knopf:#059669;--knopf-blau:var(--akz);--star:#fdc201;--star-rand:#d97706;--star-off:#2a4b70;--bildflaeche:#eef2f7;--sh:0 1px 2px rgba(0,0,0,.25),0 6px 20px rgba(0,0,0,.22);--d2-sh-gross:0 14px 36px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);--kopf:var(--akz);--kopf-tief:var(--akz);--ok-flaeche:#153a30;--ok-rand:#2f7d62;--zu-flaeche:#102c48;--leuchten:#fdc201;--bk-ico:#e2e8f0;--blase:#1a3b5e;--blase-rand:#2a4b70;--schild:#133150;--schild-ink:#f1f5f9;--schild-mut:#a3b1c6;--schild-zu:#102c48;--d2-flamme:#fa7001;--d2-flamme-soft:#43301c;--d2-flamme-ink:#fdba74;--d2-gruen:#34d399;--akz2:var(--a-fill);--akz-text:var(--a-text-d);--akz-soft:var(--a-soft-d);--d2-glas:rgba(19,49,80,.88);--win:#102c48;--win-ink:#e6edf3;--win-line:#2a4b70;--taskbar:#163556;color-scheme:dark}}
:root[data-design="tween"][data-theme="dark"]{--bg:#0c243a;--paper:#133150;--d2-flaeche2:#1a3b5e;--ink:#f1f5f9;--muted:#a3b1c6;--line:#2a4b70;--board:#6ee7b7;--board-soft:#123b33;--copper:#fdba74;--copper-soft:#43301c;--chip:var(--akz-text);--chip-soft:var(--akz-soft);--bad:#fca5a5;--bad-soft:#4a2328;--violett:#c4b5fd;--violett-soft:#33295a;--yellow:#fde68a;--yellow-soft:#3f3720;--grau-soft:#1a3b5e;--knopf:#059669;--knopf-blau:var(--akz);--star:#fdc201;--star-rand:#d97706;--star-off:#2a4b70;--bildflaeche:#eef2f7;--sh:0 1px 2px rgba(0,0,0,.25),0 6px 20px rgba(0,0,0,.22);--d2-sh-gross:0 14px 36px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);--kopf:var(--akz);--kopf-tief:var(--akz);--ok-flaeche:#153a30;--ok-rand:#2f7d62;--zu-flaeche:#102c48;--leuchten:#fdc201;--bk-ico:#e2e8f0;--blase:#1a3b5e;--blase-rand:#2a4b70;--schild:#133150;--schild-ink:#f1f5f9;--schild-mut:#a3b1c6;--schild-zu:#102c48;--d2-flamme:#fa7001;--d2-flamme-soft:#43301c;--d2-flamme-ink:#fdba74;--d2-gruen:#34d399;--akz2:var(--a-fill);--akz-text:var(--a-text-d);--akz-soft:var(--a-soft-d);--d2-glas:rgba(19,49,80,.88);--win:#102c48;--win-ink:#e6edf3;--win-line:#2a4b70;--taskbar:#163556;color-scheme:dark}
/* ===== Quelle für design/tween.css («:root[data-design="tween"]» = :root[data-design="tween"]) – nach jeder Änderung werkzeuge/design2_css.py laufen lassen ===== */

/* ---------- Grundlagen: Schrift, Flächen, Titel ---------- */
:root[data-design="tween"] body{font-family:var(--body);letter-spacing:.005em}
:root[data-design="tween"] h1,:root[data-design="tween"] h2,:root[data-design="tween"] h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
:root[data-design="tween"] h1{font-size:1.95rem}:root[data-design="tween"] h2{font-size:1.45rem}:root[data-design="tween"] h3{font-size:1.15rem}
:root[data-design="tween"] b{font-weight:800}
:root[data-design="tween"] .eyebrow{font:800 .78rem var(--display);letter-spacing:.08em}
:root[data-design="tween"] .lead{color:var(--muted)}
:root[data-design="tween"] .card,:root[data-design="tween"] .flaeche{border-radius:16px;box-shadow:var(--sh);border:1px solid var(--line)}
:root[data-design="tween"] #app{gap:20px}
:root[data-design="tween"] button:focus-visible,:root[data-design="tween"] a:focus-visible,:root[data-design="tween"] input:focus-visible,:root[data-design="tween"] label:focus-within,:root[data-design="tween"] [tabindex]:focus-visible{outline:3px solid var(--akz-brand);outline-offset:2px}
:root[data-design="tween"] ::selection{background:var(--akz-soft)}

/* ---------- Knöpfe: flach, 12 px Rundung, sofortige Rückmeldung ---------- */
:root[data-design="tween"] .btn{font:800 1.06rem/1.2 var(--display);background:var(--akz);border-radius:12px;padding:12px 22px;min-height:50px;letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(15,23,42,.14),0 6px 16px -6px color-mix(in srgb,var(--akz) 60%,transparent);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .2s,filter .2s,color .2s}
:root[data-design="tween"] .btn.blau{background:var(--akz2);box-shadow:0 1px 2px rgba(15,23,42,.14),0 6px 16px -6px color-mix(in srgb,var(--akz2) 60%,transparent)}
:root[data-design="tween"] .btn.rot{background:#dc2626;box-shadow:0 1px 2px rgba(15,23,42,.14)}
:root[data-design="tween"] .btn.alt{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 1px 2px rgba(15,23,42,.05)}
:root[data-design="tween"] .btn.klein{font-size:.96rem;padding:8px 16px;min-height:42px;border-radius:10px}
:root[data-design="tween"] .btn:active,:root[data-design="tween"] .btn.alt:active{box-shadow:0 1px 2px rgba(15,23,42,.14)}
:root[data-design="tween"] .rund{border-radius:14px;box-shadow:var(--sh);transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s}
:root[data-design="tween"] .linkknopf{color:var(--akz-text);font-weight:800}
@media (hover:hover){
  :root[data-design="tween"] .btn:hover:not(:disabled){filter:brightness(1.08) saturate(1.05)}
  :root[data-design="tween"] .btn.alt:hover:not(:disabled){filter:none;background:var(--akz-soft);color:var(--akz-text);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--akz-brand) 45%,var(--line))}
  :root[data-design="tween"] .rund:hover:not(:disabled){background:var(--akz-soft);color:var(--akz-text)}
}
/* Bewegung nur, wenn das Gerät sie nicht abgestellt hat (prefers-reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){
    :root[data-design="tween"] .btn:hover:not(:disabled),:root[data-design="tween"] .rund:hover:not(:disabled),:root[data-design="tween"] .lst-karte:hover,:root[data-design="tween"] .opt:hover:not(:disabled),:root[data-design="tween"] .wahl button:hover,:root[data-design="tween"] .profilkarte:hover,
    :root[data-design="tween"] .pk-karte:hover,:root[data-design="tween"] .at-wk:hover,:root[data-design="tween"] .hl-karte:hover,:root[data-design="tween"] .ba-karte:hover,:root[data-design="tween"] .mission:hover,:root[data-design="tween"] .vorschlaege button:hover,:root[data-design="tween"] .avatare button:hover,
    :root[data-design="tween"] .pool button:hover,:root[data-design="tween"] .w3-kiste button:hover:not(:disabled),:root[data-design="tween"] .sb-geraet:hover,:root[data-design="tween"] .mb-atlas:hover,:root[data-design="tween"] .pk-extra:hover:not(:disabled),:root[data-design="tween"] .profilkarte.neu:hover,
    :root[data-design="tween"] .d2-abz:hover,:root[data-design="tween"] .d2-farbe:hover,:root[data-design="tween"] .d2-mehr-eintrag:hover,:root[data-design="tween"] .d2-flamme-chip:hover,:root[data-design="tween"] .zu-mir:hover,:root[data-design="tween"] .hilfe-knopf:hover,:root[data-design="tween"] .pk-w:hover,:root[data-design="tween"] .at-lk:hover{transform:scale(1.02)}
    :root[data-design="tween"] .lst.zu .lst-karte:hover,:root[data-design="tween"] .lst.ausserpaket .lst-karte:hover{transform:scale(1.01)}
  }
  :root[data-design="tween"] .btn:active:not(:disabled),:root[data-design="tween"] .rund:active:not(:disabled),:root[data-design="tween"] .lst-karte:active,:root[data-design="tween"] .opt:active:not(:disabled),:root[data-design="tween"] .wahl button:active,:root[data-design="tween"] .profilkarte:active,
  :root[data-design="tween"] .pk-karte:active,:root[data-design="tween"] .at-wk:active,:root[data-design="tween"] .hl-karte:active,:root[data-design="tween"] .ba-karte:active,:root[data-design="tween"] .mission:active,:root[data-design="tween"] .vorschlaege button:active,:root[data-design="tween"] .avatare button:active,
  :root[data-design="tween"] .pool button:active,:root[data-design="tween"] .w3-kiste button:active:not(:disabled),:root[data-design="tween"] .sb-geraet:active,:root[data-design="tween"] .mb-atlas:active,:root[data-design="tween"] .pk-extra:active:not(:disabled),:root[data-design="tween"] .segment button:active,
  :root[data-design="tween"] .d2-abz:active,:root[data-design="tween"] .d2-farbe:active,:root[data-design="tween"] .d2-mehr-eintrag:active,:root[data-design="tween"] .d2-flamme-chip:active,:root[data-design="tween"] .zu-mir:active,:root[data-design="tween"] .hilfe-knopf:active,:root[data-design="tween"] .d2-nav button:active,:root[data-design="tween"] .pk-f:active,:root[data-design="tween"] .punkte button:active{transform:scale(.96)}
  :root[data-design="tween"] .lst-karte,:root[data-design="tween"] .opt,:root[data-design="tween"] .wahl button,:root[data-design="tween"] .profilkarte,:root[data-design="tween"] .pk-karte,:root[data-design="tween"] .at-wk,:root[data-design="tween"] .hl-karte,:root[data-design="tween"] .ba-karte,:root[data-design="tween"] .mission,:root[data-design="tween"] .vorschlaege button,:root[data-design="tween"] .avatare button,:root[data-design="tween"] .pool button,
  :root[data-design="tween"] .w3-kiste button,:root[data-design="tween"] .sb-geraet,:root[data-design="tween"] .mb-atlas,:root[data-design="tween"] .pk-extra,:root[data-design="tween"] .segment button,:root[data-design="tween"] .pk-f,:root[data-design="tween"] .punkte button,:root[data-design="tween"] .zu-mir,:root[data-design="tween"] .hilfe-knopf,:root[data-design="tween"] .pk-w,:root[data-design="tween"] .at-lk{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .2s,border-color .2s,color .2s}
  /* Fortschrittsbalken wachsen beim Erscheinen */
  :root[data-design="tween"] .balken i,:root[data-design="tween"] .d2-balken i,:root[data-design="tween"] .pk-balken i{animation:d2wachsen .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:left center}
}
@keyframes d2wachsen{from{transform:scaleX(0)}}
@keyframes d2auf{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes d2hoch{from{transform:translateY(100%)}}
@keyframes d2pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:none;opacity:1}}

/* ---------- Kopf: hell (dunkel im Dunkelmodus), Knöpfe 44 px, Logo kleiner ---------- */
:root[data-design="tween"] .kopfband{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line);color-scheme:inherit}
:root[data-design="tween"] .kopfband .innen{height:68px;gap:8px}
:root[data-design="tween"] .kopfknopf{--kh:44px;box-shadow:inset 0 0 0 1.5px var(--line)}
:root[data-design="tween"] .kopfknopf:active{box-shadow:inset 0 0 0 1.5px var(--line)}
:root[data-design="tween"] .logoknopf{height:44px;gap:7px;border-radius:12px;padding:0 4px}
:root[data-design="tween"] .logoknopf img{height:42px}
:root[data-design="tween"] .logoknopf img.lk-logo{height:40px}
:root[data-design="tween"] .kopfband .kopfknopf:focus-visible,:root[data-design="tween"] .kopfband .logoknopf:focus-visible,:root[data-design="tween"] .kopfband .rund:focus-visible,:root[data-design="tween"] .kopfband button:focus-visible{outline:3px solid var(--akz-brand);outline-offset:2px}
:root[data-design="tween"] .profilchip{background:var(--paper);color:var(--ink);font:800 1rem var(--display);padding:0 16px 0 4px;border-radius:12px}
:root[data-design="tween"] .profilchip .ava{width:36px;box-shadow:none;background:var(--d2-flaeche2)}
:root[data-design="tween"] .kopfband .sternchip,:root[data-design="tween"] .kopfband .innen .sternchip{background:var(--d2-flaeche2);color:var(--ink);box-shadow:none;height:44px;min-height:44px;border-radius:12px;font:800 1rem var(--display);padding:0 14px 0 10px}
:root[data-design="tween"] .kopfband .sternchip .stern{width:22px;height:22px}
:root[data-design="tween"] .kopfband .rund,:root[data-design="tween"] .kopfband .innen .rund{background:var(--d2-flaeche2);color:var(--ink);box-shadow:none;width:44px;height:44px;border-radius:12px}
:root[data-design="tween"] .kopfband .rund svg{width:22px;height:22px}
:root[data-design="tween"] .kopfband .menueknopf svg{width:24px;height:24px}
:root[data-design="tween"] .kopfband .menueknopf[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
:root[data-design="tween"] .kopfband .sternchip.knapp,:root[data-design="tween"] .zeitchip.knapp{background:var(--bad);color:#fff}
:root[data-design="tween"] .testmodus{font:800 .72rem var(--display);background:#fef3c7;color:#92400e;border-radius:8px;padding:4px 10px}
:root[data-design="tween"] .kopfmenue{background:var(--paper);color:var(--ink);border-radius:16px;padding:8px;box-shadow:0 0 0 1px var(--line),var(--d2-sh-gross)}
:root[data-design="tween"] .kopfmenue nav button{color:var(--ink);border-radius:10px;min-height:48px;font:700 1rem var(--display)}
:root[data-design="tween"] .kopfmenue nav button:hover,:root[data-design="tween"] .kopfmenue nav button:focus-visible{background:var(--akz-soft);color:var(--akz-text)}
:root[data-design="tween"] .kopfmenue .hinweis{border-top-color:var(--line);color:var(--muted)}
/* Flammen-Zähler (Lerntage diese Woche) neben den Sternen */
:root[data-design="tween"] .d2-flamme-chip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 13px 0 9px;border:0;border-radius:12px;background:var(--d2-flamme-soft);color:var(--d2-flamme-ink);
  font:800 1rem var(--display);cursor:pointer;flex:none;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
:root[data-design="tween"] .d2-flamme-chip svg{width:22px;height:22px;color:var(--d2-flamme)}
:root[data-design="tween"] .d2-flamme-chip.aus{background:var(--d2-flaeche2);color:var(--muted)}
:root[data-design="tween"] .d2-flamme-chip.aus svg{color:var(--muted);opacity:.7}
/* Dunkelmodus: Schriftzug in der hellen Fassung */
@media (prefers-color-scheme:dark){:root[data-design="tween"]:not([data-theme="light"]) .logoknopf img.lk-logo{content:url("../marke/montibit-logo-kopf-hell.svg?v=2026-10-22i")}}
:root[data-design="tween"][data-theme="dark"] .logoknopf img.lk-logo{content:url("../marke/montibit-logo-kopf-hell.svg?v=2026-10-22i")}

/* ---------- Wegleiste (Brotkrumen): schlicht, hell, klebt oben ---------- */
:root[data-design="tween"] .krumen{background:var(--d2-glas);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:none}
:root[data-design="tween"] .krumen .innen{min-height:54px;gap:8px}
:root[data-design="tween"] .krumen .rund{width:40px;height:40px;min-width:40px;min-height:40px;background:var(--d2-flaeche2);color:var(--ink);box-shadow:none;border-radius:12px}
:root[data-design="tween"] .krumen .rund svg{width:22px;height:22px}
:root[data-design="tween"] .krumen li.sep{color:var(--muted)}
:root[data-design="tween"] .krumen li button{color:var(--akz-text);font:700 .98rem var(--display);border-radius:10px}
:root[data-design="tween"] .krumen li button:hover{background:var(--akz-soft)}
:root[data-design="tween"] .krumen li.jetzt span{color:var(--ink);font:800 .98rem var(--display)}
:root[data-design="tween"] .krumen button:focus-visible,:root[data-design="tween"] .krumen .rund:focus-visible{outline:3px solid var(--akz-brand);outline-offset:2px}
/* ---------- Kopf nach Vorschlag 3 (Martin, 21.10.2026): Kopfband hellblau mit weissen Knöpfen, Pfad mittelblau mit weisser Schrift ---------- */
:root[data-design="tween"] .kopfband{background:#e4f1fe;box-shadow:none}
:root[data-design="tween"] .kopfband .sternchip,:root[data-design="tween"] .kopfband .innen .sternchip,:root[data-design="tween"] .kopfband .rund,:root[data-design="tween"] .kopfband .innen .rund,:root[data-design="tween"] .kopfband .profilchip,:root[data-design="tween"] .kopfband .d2-flamme-chip{background:#fff;box-shadow:0 1px 2px rgba(12,36,58,.08),0 0 0 1px rgba(12,36,58,.05)}
:root[data-design="tween"] .kopfband .profilchip .ava{background:#e4f1fe}
:root[data-design="tween"] .kopfband .menueknopf[aria-expanded="true"]{background:var(--dunkelblau,#0c243a);color:#fff}
:root[data-design="tween"] .krumen{background:#1874e6;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;border-bottom:0}
:root[data-design="tween"] .krumen .rund{background:rgba(255,255,255,.18);color:#fff}
:root[data-design="tween"] .krumen .rund:hover{background:rgba(255,255,255,.28)}
:root[data-design="tween"] .krumen li.sep{color:rgba(255,255,255,.7)}
:root[data-design="tween"] .krumen li button{color:#fff}
:root[data-design="tween"] .krumen li button:hover{background:rgba(255,255,255,.14)}
:root[data-design="tween"] .krumen li button svg{color:#fff}
:root[data-design="tween"] .krumen li.jetzt span{color:#fff}
:root[data-design="tween"] .krumen button:focus-visible,:root[data-design="tween"] .krumen .rund:focus-visible{outline:3px solid #fff;outline-offset:2px}

:root[data-design="tween"] .hilfe-leiste{top:66px}
:root[data-design="tween"] #panel{scroll-margin-top:72px}

/* ---------- Bipo: kleiner, ruhiger, Sprechblasen flach ---------- */
:root[data-design="tween"] .bit-fig{width:62px}
:root[data-design="tween"] .bit-fig.gross{width:92px}
:root[data-design="tween"] .bit-fig.mini{width:48px}
:root[data-design="tween"] .blase,:root[data-design="tween"] .sprechblase{border-radius:14px;font-weight:700;background:var(--blase);box-shadow:inset 0 0 0 1px var(--blase-rand);line-height:1.45}
:root[data-design="tween"] .blase{margin-bottom:22px;padding:11px 16px}
:root[data-design="tween"] .blase::before,:root[data-design="tween"] .sprechblase::before{width:14px;height:14px;border-radius:2px;background:var(--blase);box-shadow:-1px 1px 0 0 var(--blase-rand)}
:root[data-design="tween"] .blase::before{left:-6px;bottom:14px}
:root[data-design="tween"] .blase b{color:var(--board)}
:root[data-design="tween"] .bipo-echo{border-radius:12px;background:var(--akz-soft)}

/* ---------- Karten-Kopf und Fortschritt ---------- */
:root[data-design="tween"] .held{border:1px solid var(--line);box-shadow:var(--sh);background:radial-gradient(120% 140% at 100% 0%,var(--akz-soft),transparent 55%),var(--paper)}
:root[data-design="tween"] .held h1{font-size:2rem}
:root[data-design="tween"] .balken{height:12px;background:var(--line);border-radius:99px}
:root[data-design="tween"] .balken i{background:linear-gradient(90deg,var(--d2-gruen),#34d399);border-radius:99px}
:root[data-design="tween"] .held .balken{height:12px;border:0;background:var(--line)}
:root[data-design="tween"] .held .balken i{background:linear-gradient(90deg,var(--d2-gruen),#34d399);border-radius:99px}
:root[data-design="tween"] .fortschritt span{font:700 .95rem var(--display)}
:root[data-design="tween"] .pk-chip{border-radius:10px;font:700 .9rem var(--display);box-shadow:inset 0 0 0 1.5px var(--f)}
:root[data-design="tween"] .sternchip{border-radius:12px}
:root[data-design="tween"] .stufe-schild{border-radius:6px;font-weight:800}

/* ---------- Neu: «Weiter geht's» und «Wochen-Serie» auf der Karte ---------- */
:root[data-design="tween"] .d2-karte-reihe{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:980px){:root[data-design="tween"] .d2-karte-reihe{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
:root[data-design="tween"] .d2-weiter{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto;gap:14px 22px;align-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--f) 14%,var(--paper)),var(--paper) 70%);border-left:0;position:relative;overflow:hidden}
:root[data-design="tween"] .d2-weiter::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--f)}
:root[data-design="tween"] .d2-weiter-abz{grid-row:1;width:clamp(120px,14vw,168px);height:auto;aspect-ratio:1/1;display:block}   /* gross, Originalbild ohne Ring (21.10.2026) */
:root[data-design="tween"] .d2-weiter-abz img,:root[data-design="tween"] .d2-weiter-abz .abz-bald{width:100%;height:100%;display:block;object-fit:contain}
:root[data-design="tween"] .d2-weiter-text{display:flex;flex-direction:column;gap:8px;min-width:0;align-items:flex-start}
:root[data-design="tween"] .d2-weiter-text h2{font-size:1.35rem;line-height:1.22;overflow-wrap:anywhere;margin:0}
:root[data-design="tween"] .d2-weiter-text h2 small{display:block;font:800 .8rem var(--display);letter-spacing:.04em;color:#1874e6;margin-bottom:2px}
:root[data-design="tween"] .d2-weiter-stand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
:root[data-design="tween"] .d2-weiter-sterne{display:inline-flex;gap:2px}
:root[data-design="tween"] .d2-weiter-sterne .stern{width:22px;height:22px}
:root[data-design="tween"] .d2-weiter-schritt{font:700 .85rem var(--display);color:var(--ink);background:#e4f1fe;border-radius:999px;padding:4px 10px}
:root[data-design="tween"] .d2-weiter-text .btn{margin-top:4px}
:root[data-design="tween"] .d2-weiter .btn{justify-self:start}
:root[data-design="tween"] .d2-balken{height:10px;border-radius:99px;background:var(--line);overflow:hidden;max-width:420px}
:root[data-design="tween"] .d2-balken i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--d2-gruen),#34d399)}
:root[data-design="tween"] .d2-balken.klein{height:6px}
:root[data-design="tween"] .d2-woche{gap:12px}
:root[data-design="tween"] .d2-woche-blatt{display:grid;gap:12px;background:var(--d2-flaeche2);border-radius:14px;padding:14px}
:root[data-design="tween"] .d2-woche-blatt h2{display:none}   /* Titel steht schon im Fenster-Kopf */
/* Abschluss nach dem Anhören (21.10.2026): genug Luft rundum, Hauptknopf gross in der Mitte, «freiwillig»/«nochmals» darunter als ruhiger Link */
:root[data-design="tween"] .ah-ende{padding:30px 24px 26px!important;gap:18px;border-radius:16px;background:var(--d2-flaeche2)!important;border:0!important}
:root[data-design="tween"] .ah-ende .bit{justify-content:center}
:root[data-design="tween"] .ah-ende .sterne.gross .stern{width:40px;height:40px}
:root[data-design="tween"] .ah-ende .row{flex-direction:column-reverse;align-items:center;gap:6px;width:100%}
:root[data-design="tween"] .ah-ende #ahweiter{margin:4px auto 0;width:min(100%,380px)}
:root[data-design="tween"] .ah-ende #ahalle,:root[data-design="tween"] .ah-ende #ahnochmal{background:none;box-shadow:none;border:0;color:#1874e6;font:700 .95rem var(--display);text-decoration:underline;text-underline-offset:3px;min-height:40px;padding:6px 12px}
:root[data-design="tween"] .ah-ende #ahalle:hover,:root[data-design="tween"] .ah-ende #ahnochmal:hover{background:#e4f1fe;text-decoration:none}
/* «Weiter»-Knöpfe in Test, Prüfung und Spielen: gross, zentriert, mit kurzem Leuchten (21.10.2026) */
:root[data-design="tween"] #qw,:root[data-design="tween"] #sw,:root[data-design="tween"] #nach #zm,:root[data-design="tween"] .ah-ende #ahweiter,:root[data-design="tween"] .weiter-gross{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px auto 4px;width:min(100%,360px);min-height:58px;padding:12px 26px;border-radius:14px;font:800 1.15rem var(--display);background:#1874e6;color:#fff;box-shadow:0 10px 22px -8px rgba(24,116,230,.6)}
:root[data-design="tween"] #qw .ico,:root[data-design="tween"] #sw .ico,:root[data-design="tween"] #nach #zm .ico,:root[data-design="tween"] .ah-ende #ahweiter .ico,:root[data-design="tween"] .weiter-gross .ico,:root[data-design="tween"] .weiter-gross svg{width:22px;height:22px}
:root[data-design="tween"] #qw,:root[data-design="tween"] #sw,:root[data-design="tween"] #nach #zm,:root[data-design="tween"] .weiter-gross{scroll-margin-bottom:140px;scroll-margin-top:90px}   /* beim Hineinscrollen nicht hinter der Leiste unten */
:root[data-design="tween"] #qw:hover,:root[data-design="tween"] #sw:hover,:root[data-design="tween"] #nach #zm:hover,:root[data-design="tween"] .ah-ende #ahweiter:hover,:root[data-design="tween"] .weiter-gross:hover{background:#1569d0}
:root[data-design="tween"] #qw:focus-visible,:root[data-design="tween"] #sw:focus-visible,:root[data-design="tween"] #nach #zm:focus-visible,:root[data-design="tween"] .weiter-gross:focus-visible{outline:3px solid #0c243a;outline-offset:3px}
:root[data-design="tween"] .qantwort{text-align:center}:root[data-design="tween"] .qantwort .bit{text-align:left}
@keyframes d2weiter{0%{box-shadow:0 10px 22px -8px rgba(24,116,230,.6),0 0 0 0 rgba(24,116,230,.45)}70%{box-shadow:0 10px 22px -8px rgba(24,116,230,.6),0 0 0 16px rgba(24,116,230,0)}100%{box-shadow:0 10px 22px -8px rgba(24,116,230,.6),0 0 0 0 rgba(24,116,230,0)}}
@keyframes d2pfeil{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:no-preference){:root[data-design="tween"] #qw:not([hidden]),:root[data-design="tween"] #sw:not([hidden]),:root[data-design="tween"] #nach:not([hidden]) #zm,:root[data-design="tween"] .weiter-gross:not([hidden]){animation:d2weiter 1.6s ease-out 3}:root[data-design="tween"] #qw .ico,:root[data-design="tween"] #sw .ico,:root[data-design="tween"] #nach #zm .ico,:root[data-design="tween"] .weiter-gross .ico{animation:d2pfeil 1.1s ease-in-out infinite}}
/* Kasten «Expeditions-Karte» oben: kompakt (21.10.2026) */
:root[data-design="tween"] .held-karte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"kopf kopf" "lead bit" "fort bit";gap:8px 28px;align-items:center;padding:18px 22px}
:root[data-design="tween"] .held-karte .hk-kopf{grid-area:kopf;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
:root[data-design="tween"] .held-karte .hk-kopf h1{margin:0;font-size:1.85rem;line-height:1.15}
:root[data-design="tween"] .held-karte .hk-kopf .pk-chip{margin:0;flex:none}
:root[data-design="tween"] .held-karte .hk-lead{grid-area:lead;margin:0}
:root[data-design="tween"] .held-karte .hk-fort{grid-area:fort;display:flex;align-items:center;gap:12px}
:root[data-design="tween"] .held-karte .hk-fort .balken{flex:1;margin:0;min-width:80px}
:root[data-design="tween"] .held-karte .hk-fort span{font:700 .88rem var(--display);color:var(--muted);white-space:nowrap}
:root[data-design="tween"] .held-karte>:last-child{grid-area:bit;align-self:center;justify-self:end;margin:0}
@media (max-width:760px){:root[data-design="tween"] .held-karte{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "lead" "fort" "bit"}:root[data-design="tween"] .held-karte>:last-child{justify-self:start}:root[data-design="tween"] .held-karte .hk-fort span{white-space:normal}}
/* Karten auf der Expeditions-Karte im Stil des Serie-Fensters (21.10.2026): beide Karten gleich gebaut */
:root[data-design="tween"] .d2-karte-reihe>.flaeche{border-radius:16px;padding:20px 22px}
:root[data-design="tween"] .d2-woche{display:grid;gap:14px;align-content:start}
:root[data-design="tween"] .d2-wk-kopf{display:flex;align-items:center;gap:14px}
:root[data-design="tween"] .d2-wk-kopf h2{font-size:1.2rem;line-height:1.2;margin:0}
:root[data-design="tween"] .d2-wk-zahl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font:700 .88rem var(--display);color:var(--muted);margin-top:3px}
:root[data-design="tween"] .d2-wk-zahl b{font:800 1.35rem/1 var(--display);color:var(--ink)}
:root[data-design="tween"] .d2-wk-zahl b small{font-size:.85rem;color:var(--muted)}
:root[data-design="tween"] .d2-wk-zahl i{font-style:normal;opacity:.6}
:root[data-design="tween"] .d2-woche .d2-sb-tag{max-width:44px}
:root[data-design="tween"] .d2-wk-lob{margin:0;font:700 .95rem var(--display);color:var(--ink);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
:root[data-design="tween"] .d2-wk-lob .linkknopf{font:700 .9rem var(--display);color:#1874e6}
:root[data-design="tween"] .d2-weiter{align-content:center}
:root[data-design="tween"] .d2-weiter::before{display:none}
:root[data-design="tween"] .d2-weiter{box-shadow:inset 4px 0 0 var(--f),var(--sh)}
/* niedriger und gleich hoch wie der Kasten «Expeditions-Karte» (21.10.2026) */
:root[data-design="tween"] .d2-karte-reihe>.flaeche{padding:16px 20px}
:root[data-design="tween"] .d2-woche{gap:10px}
:root[data-design="tween"] .d2-wk-titel{flex:1;min-width:0}
:root[data-design="tween"] .d2-wk-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
:root[data-design="tween"] .d2-wk-zeile h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:root[data-design="tween"] .d2-wk-info{flex:none;white-space:nowrap}
:root[data-design="tween"] .d2-woche .d2-sb-tage li{gap:3px}
:root[data-design="tween"] .d2-woche .d2-sb-tag{max-width:38px;border-radius:10px}
:root[data-design="tween"] .d2-woche .d2-sb-ico{width:46px;height:46px;border-radius:12px}
:root[data-design="tween"] .d2-woche .d2-sb-ico svg{width:24px;height:24px}
:root[data-design="tween"] .d2-wk-lob{font:700 .88rem/1.35 var(--display)}
:root[data-design="tween"] .d2-weiter{gap:10px 20px}
:root[data-design="tween"] .d2-weiter-abz{width:clamp(104px,11vw,140px)}
:root[data-design="tween"] .d2-weiter-text{gap:5px}
:root[data-design="tween"] .d2-weiter-text h2{font-size:1.2rem}
:root[data-design="tween"] .d2-weiter-sterne .stern{width:19px;height:19px}
:root[data-design="tween"] .d2-weiter-text .btn{margin-top:2px;min-height:42px;padding:8px 18px}
/* Wochen-Serie-Fenster (Redesign 21.10.2026) */
:root[data-design="tween"] .d2-sb{display:grid;gap:16px}
:root[data-design="tween"] .d2-sb-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
:root[data-design="tween"] .d2-sb-zahl{display:flex;align-items:center;gap:12px;background:var(--d2-flaeche2);border-radius:14px;padding:14px 16px}
:root[data-design="tween"] .d2-sb-zahl.haupt{background:linear-gradient(135deg,#fff4e6,#ffe7cc)}
:root[data-design="tween"] .d2-sb-zahl b{display:block;font:800 2rem/1 var(--display);color:var(--ink)}
:root[data-design="tween"] .d2-sb-zahl b small{font-size:1rem;font-weight:700;color:var(--muted)}
:root[data-design="tween"] .d2-sb-zahl div>span{display:block;font:700 .85rem/1.3 var(--display);color:var(--muted);margin-top:4px}
:root[data-design="tween"] .d2-sb-ico{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#fd9a3c,#fa7001 55%,#e06300);box-shadow:0 6px 16px -6px rgba(224,99,0,.6)}
:root[data-design="tween"] .d2-sb-ico svg{width:28px;height:28px}
:root[data-design="tween"] .d2-sb-tage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
:root[data-design="tween"] .d2-sb-tage li{display:flex;flex-direction:column;align-items:center;gap:6px}
:root[data-design="tween"] .d2-sb-tag{width:100%;max-width:48px;aspect-ratio:1/1;border-radius:12px;display:grid;place-items:center;background:var(--d2-flaeche2);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-design="tween"] .d2-sb-tage li.spaeter .d2-sb-tag{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);opacity:.7}
:root[data-design="tween"] .d2-sb-tage li.an .d2-sb-tag{background:linear-gradient(160deg,#fd9a3c,#fa7001);box-shadow:none;color:#fff}
:root[data-design="tween"] .d2-sb-tage li.an .d2-sb-tag svg{width:60%;height:60%}
:root[data-design="tween"] .d2-sb-tage li.heute .d2-sb-tag{outline:2.5px solid #1874e6;outline-offset:2px}
:root[data-design="tween"] .d2-sb-tage b{font:700 .78rem var(--display);color:var(--muted)}
:root[data-design="tween"] .d2-sb-tage li.heute b{color:#1874e6}
:root[data-design="tween"] .d2-sb-lob{margin:0;text-align:center;font:800 1.05rem var(--display);color:var(--ink)}
:root[data-design="tween"] .d2-sb-regeln{background:#e4f1fe;border-radius:14px;padding:14px 16px}
:root[data-design="tween"] .d2-sb-regeln>b{display:block;font:800 .95rem var(--display);margin-bottom:8px;color:var(--ink)}
:root[data-design="tween"] .d2-sb-regeln ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
:root[data-design="tween"] .d2-sb-regeln li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.4;color:var(--ink)}
:root[data-design="tween"] .d2-sb-regeln li svg{width:18px;height:18px;flex:none;color:#fa7001;margin-top:2px}
:root[data-design="tween"] .d2-sb-los{width:100%;justify-content:center}
@media (max-width:480px){:root[data-design="tween"] .d2-sb-zahlen{grid-template-columns:1fr}}
:root[data-design="tween"] .kopfmenue .start-ico{width:26px;height:auto}
:root[data-design="tween"] .d2-woche-kopf{display:flex;align-items:center;gap:14px}
:root[data-design="tween"] .d2-woche-kopf h2{font-size:1.2rem}
:root[data-design="tween"] .d2-flamme{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#fd9a3c,#fa7001 55%,#e06300);box-shadow:0 6px 16px -6px rgba(234,88,12,.6)}
:root[data-design="tween"] .d2-flamme svg{width:30px;height:30px}
:root[data-design="tween"] .d2-flamme.aus{background:var(--d2-flaeche2);color:var(--muted);box-shadow:none}
:root[data-design="tween"] .d2-tage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
:root[data-design="tween"] .d2-tage li{display:flex;flex-direction:column;align-items:center;gap:4px;font:700 .82rem var(--display);color:var(--muted)}
:root[data-design="tween"] .d2-tag{width:min(40px,100%);aspect-ratio:1;border-radius:12px;display:grid;place-items:center;background:var(--d2-flaeche2);box-shadow:inset 0 0 0 1.5px var(--line);color:#fff}
:root[data-design="tween"] .d2-tag svg{width:62%;height:62%}
:root[data-design="tween"] .d2-tage li.an .d2-tag{background:linear-gradient(160deg,#fd9a3c,#fa7001);box-shadow:none}
:root[data-design="tween"] .d2-tage li.heute small{color:var(--akz-text)}
:root[data-design="tween"] .d2-tage li.heute .d2-tag{box-shadow:inset 0 0 0 1.5px var(--line),0 0 0 2.5px var(--paper),0 0 0 4.5px var(--akz-brand)}
:root[data-design="tween"] .d2-tage li.heute.an .d2-tag{box-shadow:0 0 0 2.5px var(--paper),0 0 0 4.5px var(--akz-brand)}
:root[data-design="tween"] .d2-tage li.spaeter .d2-tag{opacity:.55}
@media (prefers-reduced-motion:no-preference){:root[data-design="tween"] .d2-tage li.an .d2-tag svg{animation:d2pop .5s cubic-bezier(.2,1.4,.4,1) both}}
:root[data-design="tween"] .d2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root[data-design="tween"] .d2-tage li{position:relative}

/* ---------- Berg-Karte: das gemalte Bild bleibt, Schilder flacher ---------- */
:root[data-design="tween"] .berg{border-radius:20px;box-shadow:0 0 0 1px var(--line),var(--sh);max-width:none}   /* so breit wie die Karten darüber (21.10.2026) */
:root[data-design="tween"] .berg .schild{border:0;border-radius:12px;box-shadow:0 6px 18px -4px rgba(12,36,58,.35),0 0 0 1px rgba(12,36,58,.12);padding:8px 14px 9px}
:root[data-design="tween"] .berg .schild b{font-weight:800;font-size:1.25rem}
:root[data-design="tween"] .berg .schild small{font-weight:800}
:root[data-design="tween"] .berg .schild.zu{box-shadow:0 0 0 1px rgba(12,36,58,.15)}
:root[data-design="tween"] .berg .pill{border-radius:8px;font-weight:800}
:root[data-design="tween"] .berg .schild.jetzt .pill{background:var(--akz);color:#fff}
:root[data-design="tween"] .teilband{border:0;border-radius:12px;box-shadow:0 6px 18px -4px rgba(12,36,58,.4);padding:6px 22px 8px}
:root[data-design="tween"] .teilband::before,:root[data-design="tween"] .teilband::after{display:none}
:root[data-design="tween"] .teilband b{font-weight:800}
:root[data-design="tween"] .berg .fahne{border:0;font-weight:800;box-shadow:0 6px 16px -4px rgba(12,36,58,.45);background:var(--paper);color:var(--ink)}
:root[data-design="tween"] .berg-tipp .blase{border:0;box-shadow:0 8px 22px -6px rgba(12,36,58,.4);background:#fff;color:#0c243a;border-radius:14px}
:root[data-design="tween"] .berg-tipp .blase::before{border:0;background:#fff;box-shadow:none}
:root[data-design="tween"] .zu-mir{border:0;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:var(--d2-sh-gross);font:800 1rem var(--display);min-height:52px}
:root[data-design="tween"] .zu-mir .ava{box-shadow:none}
@media (max-width:640px){:root[data-design="tween"] .berg{border-radius:0;box-shadow:none}}

/* ---------- Welt: Kopf und Stationen ---------- */
:root[data-design="tween"] .weltkopf{border-radius:20px}
:root[data-design="tween"] .weltkopf .wk-abz{width:220px;height:220px;padding:6px;box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
:root[data-design="tween"] .weltkopf{gap:30px;padding:24px 30px}
:root[data-design="tween"] .weltkopf h1{font-size:2.2rem}
:root[data-design="tween"] .weltkopf .wk-unter{font-weight:700}
:root[data-design="tween"] .weltkopf .balken{background:rgba(255,255,255,.28)}
:root[data-design="tween"] .weltkopf .balken i{background:#fff}
:root[data-design="tween"] .stationen::before{width:4px;left:32px;border-radius:2px}
:root[data-design="tween"] .lst-nr{font-weight:800;box-shadow:0 0 0 4px var(--paper),inset 0 0 0 2.5px var(--line)}
:root[data-design="tween"] .lst-karte{border:1.5px solid var(--line);border-radius:16px;box-shadow:none;background:var(--paper)}
:root[data-design="tween"] .lst-karte:active{box-shadow:none}
:root[data-design="tween"] .lst-karte .bild,:root[data-design="tween"] .lst-karte .lst-abz{border-radius:12px}
@media (hover:hover){:root[data-design="tween"] .lst-karte:hover{border-color:color-mix(in srgb,var(--f,var(--akz-brand)) 55%,var(--line))}}
:root[data-design="tween"] .lst-text b{font-weight:800}
:root[data-design="tween"] .lst-los{border-radius:10px;font-weight:800}
:root[data-design="tween"] .lst.fertig .lst-karte{box-shadow:none;border-color:var(--ok-rand)}
:root[data-design="tween"] .lst.fertig .lst-nr{box-shadow:0 0 0 4px var(--paper)}
:root[data-design="tween"] .lst.jetzt .lst-karte{border-color:var(--f);box-shadow:0 0 0 4px color-mix(in srgb,var(--f) 16%,transparent)}
:root[data-design="tween"] .lst.jetzt .lst-nr{box-shadow:0 0 0 4px var(--paper),0 0 0 8px color-mix(in srgb,var(--f) 22%,transparent)}
:root[data-design="tween"] .lst.jetzt .lst-los{background:var(--akz)}
:root[data-design="tween"] .lst.zu .lst-karte,:root[data-design="tween"] .lst.ausserpaket .lst-karte{border-color:transparent}
:root[data-design="tween"] .lst.bonus .lst-karte{box-shadow:none;border-width:1.5px}
:root[data-design="tween"] .self{border-radius:16px}

/* ---------- Lektion: Kopf, Schrittleiste, Bilderbuch ---------- */
:root[data-design="tween"] .lektkopf{border-left:0;border-radius:16px;background:var(--paper);box-shadow:var(--sh);border:1px solid var(--line);position:relative;overflow:hidden}
:root[data-design="tween"] .lektkopf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--f)}
:root[data-design="tween"] .lektkopf .lk-nr{border-radius:14px;font-weight:800}
:root[data-design="tween"] .lektkopf h1{font-size:1.8rem}
:root[data-design="tween"] .schrittleiste{border-radius:16px;box-shadow:var(--sh);border:1px solid var(--line);--k:60px}
:root[data-design="tween"] .sl-schritt+.sl-schritt::before{height:4px;top:calc(var(--k) / 2 - 2px);border-radius:2px}
:root[data-design="tween"] .sl-schritt.weg::before{background:var(--d2-gruen)}
:root[data-design="tween"] .sl-kreis{box-shadow:inset 0 0 0 2.5px var(--line)}
:root[data-design="tween"] .sl-schritt.erledigt .sl-kreis{box-shadow:inset 0 0 0 2.5px var(--d2-gruen)}
:root[data-design="tween"] .sl-schritt[aria-selected="true"] .sl-kreis{box-shadow:0 0 0 4px var(--paper),0 0 0 7px color-mix(in srgb,var(--f,var(--akz)) 35%,transparent);transform:scale(1.06);animation:none}
:root[data-design="tween"] .sl-schritt.naechster:not([aria-selected="true"]) .sl-kreis{box-shadow:inset 0 0 0 2.5px var(--akz-brand);animation:d2leuchten 1.8s ease-in-out infinite}
@keyframes d2leuchten{50%{box-shadow:inset 0 0 0 2.5px var(--akz-brand),0 0 0 7px color-mix(in srgb,var(--akz-brand) 22%,transparent)}}
:root[data-design="tween"] .sl-name{font-weight:800}
:root[data-design="tween"] .sl-nr{font-weight:800}
:root[data-design="tween"] .sl-marke{box-shadow:0 0 0 2px var(--line)}
@media (hover:hover){:root[data-design="tween"] .sl-schritt:not(.zu):hover .sl-kreis{background:var(--akz-soft)}}
:root[data-design="tween"] .seite-text p b{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--akz-brand) 25%,transparent) 60%)}
:root[data-design="tween"] .bild{border-radius:16px}
:root[data-design="tween"] .sym{border-radius:12px}
:root[data-design="tween"] .buch-nav .rund{border-radius:14px;width:56px;height:56px}
:root[data-design="tween"] .buch-nav .rund.vor,:root[data-design="tween"] .ah-nav .rund.vor{background:var(--akz);color:#fff;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--akz) 60%,transparent)}
:root[data-design="tween"] .buch-nav .rund:not(.vor),:root[data-design="tween"] .ah-nav .rund:not(.vor){background:var(--akz-soft);color:var(--akz-text);box-shadow:none}
:root[data-design="tween"] .punkte button{border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:800;background:var(--d2-flaeche2)}
:root[data-design="tween"] .punkte button.gesehen{background:var(--akz-soft);color:var(--akz-text);box-shadow:none}
:root[data-design="tween"] .punkte button.jetzt{background:var(--akz);color:#fff;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--akz) 65%,transparent)}
:root[data-design="tween"] .punkte button.m{border-radius:12px;background:var(--yellow-soft);box-shadow:none}
:root[data-design="tween"] .punkte button.m.jetzt{background:var(--leuchten);box-shadow:none}
:root[data-design="tween"] .merke-zettel{border-radius:16px;transform:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--star) 45%,transparent)}
:root[data-design="tween"] .marker span{border-radius:8px;transform:none;box-shadow:none}
:root[data-design="tween"] .foto{border-radius:16px}
:root[data-design="tween"] .ah-seite{border-radius:16px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .ah-punkte i.jetzt{background:var(--akz)}
:root[data-design="tween"] .ah-punkte i.gehoert{background:var(--d2-gruen)}
:root[data-design="tween"] .knifflig,:root[data-design="tween"] .ah-hinweis{border-radius:12px}
:root[data-design="tween"] .zaehler{border-radius:10px;background:var(--d2-flaeche2);font-weight:800}

/* ---------- Mission und Test ---------- */
:root[data-design="tween"] .mission{border-radius:14px;background:var(--d2-flaeche2);box-shadow:inset 0 0 0 1.5px transparent}
:root[data-design="tween"] .mission:has(input:checked){background:var(--ok-flaeche);box-shadow:inset 0 0 0 1.5px var(--ok-rand)}
:root[data-design="tween"] .haken{border-radius:10px;border-width:2px}
:root[data-design="tween"] .mission input:checked+.haken{background:var(--d2-gruen);border-color:var(--d2-gruen)}
:root[data-design="tween"] .mtext b{font-weight:800}
:root[data-design="tween"] .kind{border-radius:6px;background:var(--akz);font-weight:800}
:root[data-design="tween"] .mission.self .kind{background:var(--copper)}
:root[data-design="tween"] .kind.neben,:root[data-design="tween"] .mission.self .kind.neben{background:var(--yellow-soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--star) 60%,transparent)}
:root[data-design="tween"] .opt{border:2px solid var(--line);border-radius:14px;box-shadow:none;min-height:60px}
:root[data-design="tween"] .opt:active{box-shadow:none}
@media (hover:hover){:root[data-design="tween"] .opt:hover:not(:disabled){border-color:var(--akz-brand);background:var(--akz-soft)}}
:root[data-design="tween"] .opt.right{border-color:var(--d2-gruen);background:var(--ok-flaeche);box-shadow:0 0 0 3px color-mix(in srgb,var(--d2-gruen) 25%,transparent)}
:root[data-design="tween"] .opt.wrong{border-color:var(--copper);background:var(--copper-soft);box-shadow:none}
:root[data-design="tween"] .qpunkte i.jetzt{background:var(--akz);box-shadow:0 0 0 3px var(--akz-soft)}
:root[data-design="tween"] .qpunkte i.ok{background:var(--d2-gruen)}
:root[data-design="tween"] .qpunkte i.halb{background:linear-gradient(90deg,var(--d2-gruen) 50%,var(--line) 50%)}
:root[data-design="tween"] .qpunkte i.leer{box-shadow:inset 0 0 0 2.5px var(--d2-gruen)}
:root[data-design="tween"] .score{font-weight:800}

/* ---------- Feier, Dialoge, Pause, Hinweise ---------- */
:root[data-design="tween"] .feier,:root[data-design="tween"] .dialog-schleier{background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
:root[data-design="tween"] .feier-karte,:root[data-design="tween"] .dialog{border-radius:20px;box-shadow:var(--d2-sh-gross);border:1px solid var(--line)}
:root[data-design="tween"] .dialog .bit-fig.gross,:root[data-design="tween"] .feier .bit-fig.gross{width:84px}
:root[data-design="tween"] .pause-schleier{background:radial-gradient(80% 60% at 50% 0%,var(--akz-soft),transparent 70%),var(--bg)}
:root[data-design="tween"] .regel-toast{border:0;border-left:5px solid var(--bad);border-radius:14px;box-shadow:var(--d2-sh-gross)}
:root[data-design="tween"] body.d2-mitnav .regel-toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
:root[data-design="tween"] .hilfe-knopf{background:#fdc201;color:#0c243a;box-shadow:0 6px 16px -6px rgba(217,119,6,.7);border-radius:12px;font:800 1.02rem var(--display)}
:root[data-design="tween"] .hilfe-knopf:active{box-shadow:0 2px 6px -2px rgba(217,119,6,.7)}
:root[data-design="tween"] .hl-karte{border-radius:14px}
:root[data-design="tween"] .vorschau{border-radius:clamp(0px,2vw,20px)}

/* ---------- Erststart, Profile, Figur ---------- */
:root[data-design="tween"] .einstieg{padding:28px;gap:24px}
:root[data-design="tween"] .einstieg>.bit-fig{width:112px}
:root[data-design="tween"] .einstieg h1{font-size:1.9rem}
:root[data-design="tween"] .schritte i{height:8px;width:22px;border-radius:99px}
:root[data-design="tween"] .schritte i.ok{background:var(--d2-gruen)}
:root[data-design="tween"] .schritte i.jetzt{width:40px;background:var(--akz)}
:root[data-design="tween"] .namensschild{border-radius:16px;background:var(--akz-soft)}
:root[data-design="tween"] .namensschild .nm{font-weight:800}
:root[data-design="tween"] .vorschlaege button{border:1.5px solid var(--line);border-radius:10px;font-weight:700;background:var(--paper)}
@media (hover:hover){:root[data-design="tween"] .vorschlaege button:hover{border-color:var(--akz-brand);background:var(--akz-soft)}}
:root[data-design="tween"] .feld,:root[data-design="tween"] .tinput{border:2px solid var(--line);border-radius:12px}
:root[data-design="tween"] .feld:focus,:root[data-design="tween"] .tinput:focus{border-color:var(--akz-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--akz-brand) 25%,transparent)}
:root[data-design="tween"] .wahl button{border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--sh)}
:root[data-design="tween"] .wahl button:active{box-shadow:none}
:root[data-design="tween"] .wahl button b{font-weight:800}
:root[data-design="tween"] .wahl button[aria-pressed="true"]{border-color:var(--akz-brand);background:var(--akz-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--akz-brand) 25%,transparent)}
:root[data-design="tween"] .wahl .vorschlag{border-radius:6px;font-weight:800}
:root[data-design="tween"] .avatare button{border-radius:14px;border-width:2px}
:root[data-design="tween"] .avatare button[aria-pressed="true"]{border-color:var(--akz-brand);background:var(--akz-soft);box-shadow:none}
:root[data-design="tween"] .bk-feld{border-radius:16px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .bk-kacheln button{border-radius:14px;border-width:2px;box-shadow:none}
:root[data-design="tween"] .bk-kacheln button[aria-pressed="true"]{border-color:var(--akz-brand);background:var(--akz-soft);box-shadow:none}
:root[data-design="tween"] .bk-reiter button i{border-width:2px}
:root[data-design="tween"] .bk-reiter button[aria-pressed="true"] i{background:var(--akz-soft);border-color:var(--akz-brand);box-shadow:none}
:root[data-design="tween"] .bk-reiter button[aria-pressed="true"]{color:var(--akz-text)}
:root[data-design="tween"] .bk-farben button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 0 0 4px var(--bg),0 0 0 7px var(--akz-brand)}
:root[data-design="tween"] .bk-vorschau .ava{box-shadow:var(--sh)}
:root[data-design="tween"] .profilkarte{border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--sh)}
:root[data-design="tween"] .profilkarte b{font-weight:800}
:root[data-design="tween"] .profilkarte.aktiv{border-color:var(--d2-gruen);box-shadow:0 0 0 3px color-mix(in srgb,var(--d2-gruen) 25%,transparent)}
:root[data-design="tween"] .profilkarte .pk-aktiv{border-radius:6px;background:var(--knopf);font-weight:800}
:root[data-design="tween"] .profilkarte.neu{border-style:dashed;color:var(--akz-text);box-shadow:none}

/* ---------- Einstellungen, Elternbereich ---------- */
:root[data-design="tween"] .einst-zeile{border-top:1px solid var(--line)}
:root[data-design="tween"] .einst-zeile .ez-ico{border-radius:12px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .einst-zeile b{font-weight:800}
:root[data-design="tween"] .schalter[aria-checked="true"]{background:var(--akz)}
:root[data-design="tween"] .segment{background:var(--d2-flaeche2);border-radius:12px}
:root[data-design="tween"] .segment button{border-radius:9px;font-weight:700}
:root[data-design="tween"] .segment button[aria-pressed="true"]{background:var(--paper);color:var(--akz-text);box-shadow:0 1px 3px rgba(15,23,42,.12)}
:root[data-design="tween"] .st-stimme{border-radius:12px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .st-stimme.an{border-color:var(--akz-brand);background:var(--akz-soft)}
:root[data-design="tween"] .st-regler input[type=range]{accent-color:var(--akz)}
:root[data-design="tween"] .rw,:root[data-design="tween"] .lw-land,:root[data-design="tween"] .lw-sprache{border-width:2px;border-radius:12px}
:root[data-design="tween"] .zahlwort,:root[data-design="tween"] .st-hinweis,:root[data-design="tween"] .pk-alle,:root[data-design="tween"] .pk-empf{border-radius:12px}
:root[data-design="tween"] .fteil{border-radius:12px;border-width:1.5px}
:root[data-design="tween"] .fb-band i{background:var(--d2-gruen)}
:root[data-design="tween"] .ez-ico.d2-ez-farbe i{width:26px;height:26px;border-radius:50%;background:conic-gradient(#1874e6 0 33%,#8b5cf6 0 66%,#10b981 0)}

/* ---------- Pakete, Montibit-Seite, Atlas ---------- */
:root[data-design="tween"] .pk-karte{border-radius:16px;border:1px solid var(--line)}
:root[data-design="tween"] .pk-karte.wahl{box-shadow:0 0 0 3px var(--f),var(--sh)}
:root[data-design="tween"] .pk-name{font-weight:800}
:root[data-design="tween"] .pk-zahlen span{border-radius:10px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .pk-zahlen b{font-weight:800}
:root[data-design="tween"] .pk-extra{border-radius:12px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .pk-w{border-radius:14px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .pk-wl li{border-radius:10px}
:root[data-design="tween"] .pk-gruppe button[aria-pressed="true"]{background:var(--akz);color:#fff;box-shadow:none}
:root[data-design="tween"] .pk-f[aria-pressed="true"]{background:var(--akz-soft);color:var(--akz-text);box-shadow:inset 0 0 0 2px var(--akz-brand)}
:root[data-design="tween"] .pk-f[aria-pressed="true"]::before{background:var(--akz-brand);box-shadow:inset 0 0 0 3px var(--akz-soft)}
:root[data-design="tween"] .pk-mk{border-radius:16px;background:linear-gradient(var(--f),var(--f)) top/100% 6px no-repeat,var(--d2-flaeche2)}
:root[data-design="tween"] .mb-held{border-radius:20px;box-shadow:inset 0 0 0 1px var(--line),var(--sh)}
:root[data-design="tween"] .mb-ziel{border-radius:20px}
:root[data-design="tween"] .mb-karte,:root[data-design="tween"] .mb-tafel,:root[data-design="tween"] .mb-zl,:root[data-design="tween"] .mb-ld{border-radius:14px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .mb-teil{border-radius:14px;border-left-width:5px}
/* Kapitel der Startseite (Martin, 21.10.2026): keine farbige Linie mehr; ruhige Trennung mit feiner Linie und viel Luft */
:root[data-design="tween"] .mb-abschnitt>h2{padding-bottom:0;font-size:clamp(1.45rem,2.4vw,1.75rem);letter-spacing:-.01em;line-height:1.2}
:root[data-design="tween"] .mb-abschnitt>h2::after{display:none}
:root[data-design="tween"] .mb-abschnitt{padding-top:40px;margin-top:16px;border-top:1px solid var(--line)}
:root[data-design="tween"] .mb-abschnitt>h2+p,:root[data-design="tween"] .mb-abschnitt>h2+.klein{margin-top:-4px}
:root[data-design="tween"] .mb-schritt{background:var(--akz);font-weight:800!important}
:root[data-design="tween"] .mb-atlas{border-radius:16px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--akz-brand) 45%,var(--line));background:linear-gradient(120deg,var(--akz-soft),var(--paper))}
:root[data-design="tween"] .mb-atlas-text>b{color:var(--akz-text)}
:root[data-design="tween"] .mb-atlas-los{border-radius:12px;background:var(--akz);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--akz) 60%,transparent)}
:root[data-design="tween"] .mb-atlas:hover .mb-atlas-los,:root[data-design="tween"] .mb-atlas:active .mb-atlas-los{box-shadow:0 6px 16px -6px color-mix(in srgb,var(--akz) 60%,transparent)}
:root[data-design="tween"] .mb-kz{border-radius:12px}
:root[data-design="tween"] .mb-berg-svg{border-radius:16px;box-shadow:0 0 0 1px var(--line),var(--sh)}
:root[data-design="tween"] .at-band{border-radius:16px;border:1px solid var(--line)}
:root[data-design="tween"] .at-wk{border-radius:14px}
:root[data-design="tween"] .at-lekt{border-radius:14px}
:root[data-design="tween"] .at-lk{border-radius:10px}
:root[data-design="tween"] .at-feld input{border-radius:12px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .at-feld input:focus{border-color:var(--akz-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--akz-brand) 25%,transparent)}
:root[data-design="tween"] .at-chips li{border-radius:8px}

/* ---------- Spiel-Module: nur Behälter und Knöpfe angleichen (Innenleben bleibt) ---------- */
:root[data-design="tween"] .arena{border-radius:16px}
:root[data-design="tween"] .pool button{border-width:2px;border-radius:14px;box-shadow:none}
:root[data-design="tween"] .pool button:active{box-shadow:none}
@media (hover:hover){:root[data-design="tween"] .pool button:hover{border-color:var(--akz-brand)}}
:root[data-design="tween"] .korb{border-width:2px;border-radius:14px;box-shadow:none}
:root[data-design="tween"] .korb:active{box-shadow:none}
:root[data-design="tween"] .sortkarte{border-radius:16px;border-color:var(--akz-brand)}
:root[data-design="tween"] .placed li{border-radius:12px}
:root[data-design="tween"] .placed li::before{background:var(--d2-gruen);border-radius:10px}
:root[data-design="tween"] .letters button{border-radius:10px}
:root[data-design="tween"] .bin-box{border-radius:14px}
:root[data-design="tween"] .tastatur{border-radius:14px}
:root[data-design="tween"] .ds-screen{border-radius:12px}
:root[data-design="tween"] .w3-buehne{border-radius:16px}
:root[data-design="tween"] .w3-kiste button{border-width:2px;border-radius:14px;box-shadow:none}
:root[data-design="tween"] .w3-chip{border-width:2px;box-shadow:none}
:root[data-design="tween"] .w3-hinweis,:root[data-design="tween"] .w3-symptom{border-radius:12px}
:root[data-design="tween"] .sb-geraet{border-width:2px;border-radius:14px;box-shadow:none}
:root[data-design="tween"] .sb-geraet.wach{box-shadow:none}
:root[data-design="tween"] .ba-karte{border-width:1.5px;border-radius:14px;box-shadow:none}
:root[data-design="tween"] .ba-karte.an{box-shadow:none}
:root[data-design="tween"] .ba{box-shadow:var(--sh),inset 0 0 0 1.5px color-mix(in srgb,var(--d2-gruen) 30%,transparent)}

/* ---------- Neu: Leiste unten (Karte · Lernen · Abzeichen · Profil · Mehr) ---------- */
:root[data-design="tween"] .d2-nav{position:fixed;left:0;right:0;bottom:0;z-index:28;display:flex;justify-content:space-around;gap:2px;
  padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));
  background:var(--d2-glas);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line)}
:root[data-design="tween"] .d2-nav[hidden]{display:none}
:root[data-design="tween"] .d2-nav button{flex:1 1 0;min-width:0;max-width:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;background:none;
  color:var(--muted);font:800 .76rem/1.1 var(--display);letter-spacing:.01em;border-radius:12px;cursor:pointer;padding:4px 2px;transition:transform .16s cubic-bezier(.2,.8,.2,1),color .2s}
:root[data-design="tween"] .d2-nav .d2-ico{width:58px;height:32px;border-radius:999px;display:grid;place-items:center;transition:background-color .2s}
:root[data-design="tween"] .d2-nav .d2-ico svg{width:24px;height:24px}
:root[data-design="tween"] .d2-nav .d2-nt{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-design="tween"].schrift-gross .d2-nav button{font-size:.7rem;letter-spacing:0}   /* Grosse Schrift: «Abzeichen» passt auch am Handy */
:root[data-design="tween"] .d2-nav .d2-nav-ava .ava{width:28px;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--line)}
:root[data-design="tween"] .d2-nav button[aria-current]{color:var(--akz-text)}
:root[data-design="tween"] .d2-nav button[aria-current] .d2-ico{background:var(--akz-soft)}
:root[data-design="tween"] .d2-nav button[aria-current] .d2-nav-ava .ava{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--akz-brand)}
@media (hover:hover){:root[data-design="tween"] .d2-nav button:hover{color:var(--ink)}:root[data-design="tween"] .d2-nav button:hover .d2-ico{background:var(--d2-flaeche2)}:root[data-design="tween"] .d2-nav button[aria-current]:hover .d2-ico{background:var(--akz-soft)}}
:root[data-design="tween"] .d2-nav button:focus-visible{outline:3px solid var(--akz-brand);outline-offset:-2px}
:root[data-design="tween"] body.d2-mitnav #app{padding-bottom:calc(40px + 72px + env(safe-area-inset-bottom,0px))}
:root[data-design="tween"] body.d2-mitnav .zu-mir{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* breite Bildschirme: schwebende Leiste mit Text neben dem Symbol */
@media (min-width:900px){
  :root[data-design="tween"] .d2-nav{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:6px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--d2-sh-gross)}
  :root[data-design="tween"] .d2-nav button{flex:0 1 auto;flex-direction:row;gap:8px;min-height:48px;max-width:none;font-size:.95rem;padding:4px 16px 4px 10px}
  :root[data-design="tween"] .d2-nav .d2-ico{width:auto;height:auto;background:none!important;border-radius:0}
  :root[data-design="tween"] .d2-nav button[aria-current]{background:var(--akz-soft)}
  @media (hover:hover){:root[data-design="tween"] .d2-nav button:hover{background:var(--d2-flaeche2)}:root[data-design="tween"] .d2-nav button[aria-current]:hover{background:var(--akz-soft)}}
  :root[data-design="tween"] body.d2-mitnav #app{padding-bottom:calc(44px + 80px)}
  :root[data-design="tween"] body.d2-mitnav .zu-mir{bottom:96px}
}
/* Handy: Profil und Zahnrad wohnen in der Leiste unten, der Kopf wird eine Zeile */
@media (max-width:599px){
  :root[data-design="tween"] body.d2-mitnav .kopfband .profilchip,:root[data-design="tween"] body.d2-mitnav .kopfband #menuk{display:none}
  :root[data-design="tween"] body.d2-mitnav .kopfband .innen::after{display:none}
  :root[data-design="tween"] .kopfband .innen{height:auto;min-height:56px;flex-wrap:wrap;gap:6px;padding-top:8px;padding-bottom:8px}
  :root[data-design="tween"] .kopfband .sternchip,:root[data-design="tween"] .kopfband .innen .sternchip{height:40px;min-height:40px;padding:0 10px 0 8px;flex:0 0 auto}
  :root[data-design="tween"] body.d2-mitnav .kopfband .status>.sternchip{flex:0 0 auto}
  :root[data-design="tween"] .kopfband .rund,:root[data-design="tween"] .kopfband .innen .rund{width:40px;height:40px}
  :root[data-design="tween"] .d2-flamme-chip{height:40px;padding:0 10px 0 7px}
  :root[data-design="tween"] body.d2-mitnav .kopfband .status>:first-child{margin-left:auto}
  :root[data-design="tween"] .logoknopf,:root[data-design="tween"] .logoknopf img{height:38px}
  :root[data-design="tween"] .logoknopf img.lk-logo{height:34px}
  :root[data-design="tween"] .hilfe-leiste{top:62px}
  :root[data-design="tween"] .kopfband .kopf-test{order:4}   /* Testmodus-Schild in die zweite Zeile, die Knöpfe bleiben oben */
}
@media (max-width:479px){:root[data-design="tween"] body.d2-mitnav .logoknopf img.lk-logo{content:url("../marke/montibit-kopf.svg?v=2026-10-22i")}}  /* schmal: nur Bipos Kopf */

/* ---------- Neu: Fenster (Abzeichen, Profil, Mehr) – am Handy von unten ---------- */
:root[data-design="tween"] .d2-schleier{align-items:end;padding:0}
:root[data-design="tween"] .d2-blatt{background:var(--paper);color:var(--ink);width:100%;max-width:680px;max-height:min(88vh,800px);overflow:auto;overscroll-behavior:contain;border-radius:20px 20px 0 0;
  padding:0 20px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:var(--d2-sh-gross);display:flex;flex-direction:column;gap:14px}
@media (prefers-reduced-motion:no-preference){:root[data-design="tween"] .d2-blatt{animation:d2hoch .3s cubic-bezier(.2,.9,.3,1)}}
@media (min-width:700px){
  :root[data-design="tween"] .d2-schleier{align-items:center;padding:16px}
  :root[data-design="tween"] .d2-blatt{border-radius:20px;padding:0 26px 26px;border:1px solid var(--line)}
  @media (prefers-reduced-motion:no-preference){:root[data-design="tween"] .d2-blatt{animation:d2auf .22s ease-out}}
}
:root[data-design="tween"] .d2-blatt-kopf{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 10px;background:var(--paper)}
:root[data-design="tween"] .d2-blatt-kopf h2{font-size:1.35rem}
:root[data-design="tween"] .d2-x{width:42px;height:42px;flex:none;border-radius:12px;border:0;background:var(--d2-flaeche2);color:var(--ink);cursor:pointer;display:grid;place-items:center}
:root[data-design="tween"] .d2-x svg{width:20px;height:20px}
@media (hover:hover){:root[data-design="tween"] .d2-x:hover{background:var(--akz-soft);color:var(--akz-text)}}
:root[data-design="tween"] .d2-blatt-inhalt{display:flex;flex-direction:column;gap:14px}
/* Fenster (21.10.2026): Abzeichen und Profil so breit wie das Spiel; Scrollleiste innerhalb der runden Ecken, mit Abstand zum Rand */
:root[data-design="tween"] .d2-schleier[data-d2blatt="abzeichen"] .d2-blatt,:root[data-design="tween"] .d2-schleier[data-d2blatt="profil"] .d2-blatt{max-width:min(1100px,100%)}
/* Scrollen nur im Inhalt (21.10.2026): der Titel bleibt stehen, die Leiste liegt innen mit Abstand zum Rand – die runden Ecken bleiben */
:root[data-design="tween"] .d2-blatt{overflow:hidden;display:flex;flex-direction:column}
:root[data-design="tween"] .d2-blatt-kopf{position:static;flex:none}
:root[data-design="tween"] .d2-blatt-inhalt{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:10px;margin-right:-10px;scrollbar-width:thin;scrollbar-color:#c3cfdd transparent}
:root[data-design="tween"] .d2-blatt-inhalt::-webkit-scrollbar{width:8px}
:root[data-design="tween"] .d2-blatt-inhalt::-webkit-scrollbar-track{background:transparent}
:root[data-design="tween"] .d2-blatt-inhalt::-webkit-scrollbar-thumb{background:#c3cfdd;border-radius:99px}
:root[data-design="tween"] .d2-blatt-inhalt::-webkit-scrollbar-thumb:hover{background:#9fb0c6}
@media (min-width:600px){:root[data-design="tween"] .d2-blatt{padding:0 32px 32px}:root[data-design="tween"] .d2-blatt-kopf{padding:22px 0 12px}}
:root[data-design="tween"] .d2-stand{display:flex;flex-direction:column;gap:8px}
:root[data-design="tween"] .d2-stand b{font:800 1.05rem var(--display)}
:root[data-design="tween"] .d2-stand .d2-balken{max-width:none}
:root[data-design="tween"] .d2-hinweis{background:var(--akz-soft);color:var(--ink);border-radius:12px;padding:10px 14px;font-weight:700}
:root[data-design="tween"] .d2-zwischen{font-size:1rem;color:var(--muted);margin-top:4px}
:root[data-design="tween"] .d2-abz-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
:root[data-design="tween"] .d2-abz{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:0;cursor:pointer;background:var(--d2-flaeche2);color:var(--ink);border-radius:14px;padding:10px 6px 10px;font:inherit;min-width:0;
  box-shadow:inset 0 0 0 1.5px transparent;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .2s}
@media (hover:hover){:root[data-design="tween"] .d2-abz:not(.zu):hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--f) 60%,var(--line));background:color-mix(in srgb,var(--f) 10%,var(--d2-flaeche2))}}
:root[data-design="tween"] .d2-abz.zu{cursor:default}
:root[data-design="tween"] .d2-abz-bild{width:100%;max-width:150px;aspect-ratio:1/1;height:auto;border-radius:50%;display:block;margin-bottom:6px}   /* so gross wie die Kachel erlaubt (Martin, 21.10.2026) */
:root[data-design="tween"] .d2-abz-bild img,:root[data-design="tween"] .d2-abz-bild .abz-bald{width:100%;height:100%;display:block;object-fit:contain}   /* Originalbild, quadratisch, ohne Zuschnitt */
:root[data-design="tween"] .d2-abz:not(.verdient) .d2-abz-bild{filter:grayscale(.85);opacity:.55}
:root[data-design="tween"] .d2-abz.verdient .d2-abz-bild{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--d2-gruen)}
:root[data-design="tween"] .d2-abz small{font:800 .7rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
:root[data-design="tween"] .d2-abz b{font:800 .92rem/1.2 var(--display);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;max-width:100%}
:root[data-design="tween"] .d2-abz-status{display:inline-flex;align-items:center;gap:3px;margin-top:2px;font:800 .72rem var(--display);border-radius:6px;padding:2px 7px;background:var(--akz-soft);color:var(--akz-text)}
:root[data-design="tween"] .d2-abz-status svg{width:12px;height:12px}
:root[data-design="tween"] .d2-abz-status.ok{background:var(--ok-flaeche);color:var(--board)}
:root[data-design="tween"] .d2-abz-status.zu{background:transparent;color:var(--muted)}
:root[data-design="tween"] .d2-profil-kopf{display:flex;align-items:center;gap:14px}
:root[data-design="tween"] .d2-profil-kopf .ava{width:72px;background:var(--d2-flaeche2)}
:root[data-design="tween"] .d2-profil-kopf b{display:block;font:800 1.35rem/1.15 var(--display);overflow-wrap:anywhere}
:root[data-design="tween"] .d2-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
:root[data-design="tween"] .d2-zahl{display:flex;flex-direction:column;gap:4px;background:var(--d2-flaeche2);border-radius:14px;padding:12px;min-width:0}
:root[data-design="tween"] .d2-zahl b{font:800 1.5rem/1 var(--display);font-variant-numeric:tabular-nums}
:root[data-design="tween"] .d2-zahl b small{font-size:.9rem;color:var(--muted);font-weight:700}
:root[data-design="tween"] .d2-zahl span{font:700 .82rem/1.2 var(--display);color:var(--muted)}
:root[data-design="tween"] .d2-farbwahl{display:flex;flex-direction:column;gap:4px}
:root[data-design="tween"] .d2-farbwahl>b{font:800 1.05rem var(--display)}
:root[data-design="tween"] .d2-farben{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
:root[data-design="tween"] .d2-farbe{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;border-radius:12px;padding:8px 14px 8px 8px;min-height:44px;background:var(--d2-flaeche2);color:var(--ink);font:800 .95rem var(--display);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
:root[data-design="tween"] .d2-farbe i{width:26px;height:26px;border-radius:8px;flex:none}
:root[data-design="tween"] .d2-farbe[data-d2akzent="blau"] i{background:#1874e6}
:root[data-design="tween"] .d2-farbe[data-d2akzent="violett"] i{background:#8b5cf6}
:root[data-design="tween"] .d2-farbe[data-d2akzent="gruen"] i{background:#10b981}
:root[data-design="tween"] .d2-farbe[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--akz-brand);background:var(--akz-soft);color:var(--akz-text)}
:root[data-design="tween"] .d2-farbe[aria-pressed="true"] i{box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
:root[data-design="tween"] .d2-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
:root[data-design="tween"] .d2-knoepfe .btn{flex:1 1 160px}
:root[data-design="tween"] .d2-mehr{display:flex;flex-direction:column;gap:4px}
:root[data-design="tween"] .d2-mehr-eintrag{display:flex;align-items:center;gap:14px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;border-radius:12px;padding:8px 12px 8px 8px;min-height:56px;font:800 1.02rem var(--display);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .2s}
:root[data-design="tween"] .d2-mehr-eintrag:hover{background:var(--akz-soft);color:var(--akz-text)}
:root[data-design="tween"] .d2-mehr-ico{width:42px;height:42px;flex:none;border-radius:12px;background:var(--d2-flaeche2);display:grid;place-items:center}
:root[data-design="tween"] .d2-mehr-ico svg,:root[data-design="tween"] .d2-mehr-ico img{width:26px;height:26px;object-fit:contain}
:root[data-design="tween"] .d2-mehr-eintrag:last-child{margin-top:6px;box-shadow:inset 0 1px 0 var(--line);border-radius:0 0 12px 12px;padding-top:14px}
:root[data-design="tween"] .d2-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:14px;font:800 1rem/1.3 var(--display);box-shadow:var(--d2-sh-gross);transition:opacity .35s}
@media (prefers-reduced-motion:no-preference){:root[data-design="tween"] .d2-toast{animation:d2auf .25s ease-out}}
:root[data-design="tween"] .d2-toast.weg{opacity:0}

/* ---------- Handy-Feinheiten ---------- */
@media (max-width:700px){
  :root[data-design="tween"] h1{font-size:1.65rem}
  :root[data-design="tween"] .card,:root[data-design="tween"] .flaeche{border-radius:16px}
  :root[data-design="tween"] .lektkopf h1{font-size:1.35rem}
  :root[data-design="tween"] .schrittleiste{--k:52px}
  :root[data-design="tween"] .weltkopf .wk-abz{width:150px;height:150px}
  :root[data-design="tween"] .einstieg>.bit-fig{width:80px}
  :root[data-design="tween"] .d2-weiter{grid-template-columns:auto minmax(0,1fr)}
  :root[data-design="tween"] .d2-weiter-abz{grid-row:auto;width:96px}
  :root[data-design="tween"] .d2-weiter .btn{align-self:stretch;justify-content:center}
  :root[data-design="tween"] .d2-weiter-text h2{font-size:1.12rem}
  :root[data-design="tween"] .d2-zahl b{font-size:1.25rem}
  :root[data-design="tween"] .d2-abz-raster{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  :root[data-design="tween"] .d2-abz-bild{max-width:120px}
}
@media (max-width:480px){:root[data-design="tween"] .schrittleiste{--k:46px}}

/* ---------- Probe-Lektion: keine Leiste unten, kein Menü ---------- */
:root[data-design="tween"].probe .d2-nav,:root[data-design="tween"].probe .d2-flamme-chip{display:none!important}