/* lw.css – Lernwelt, CI-Ableger szudarek.com, Stand 17.09.2026 (Kopf: Heimweg, Kopfband mit Relief – Block am Dateiende). Werte: CI v2 §1 + Registereintrag
«Träger Lernwelt». Kontraste: KONTRAST.md. Bronze nie Text auf hell, Slate nie Text.
Überarbeitung 16.09.2026: Bildschirmtext mindestens 16 px (R6); Ausnahmen begründet in KONTRAST.md.
CI-Abgleich 16.09.2026 mit /assets/style.css (Live-Stand): Naht 4 px, Navigation, Tasten, Spalte, Überschriften,
Fusszeile als Navy-Streifen; Dunkelmodus ruht (Homepage hat keinen, Werte nicht beschlossen). Tabelle: CI_ABGLEICH_2026-09-16.md */
@font-face{font-family:"Public Sans";src:url("/assets/fonts/PublicSans-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/Newsreader-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* Token hell */
:root{
/* CI v2 §1 */
--navy:#0B1F33;--creme:#F4F2ED;--brass:#C39A5B;--slate:#536B80;
/* Schrift */
--gutter:clamp(18px,5vw,26px);--breite:calc(60rem + 2*clamp(18px,5vw,26px));
--sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--serif:Newsreader,Georgia,"Times New Roman",serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--ground:#F4F2ED;--panel:#FFFFFF;--panel-2:#EAE7DF;--paper:#F4F2ED;--ink:#0B1F33;--ink-2:#3A4B5C;--muted:#56687A;--line:#DCD7CC;--line-strong:#768290;--forest:#0B1F33;--forest-soft:#E4E8EC;
--accent:#6E4B1F;--accent-soft:#F1E6D3;--on-accent:#F4F2ED;
--btn:#0B1F33;--on-btn:#F4F2ED;--focus:#0B1F33;--kopf:#0B1F33;--kopf-ink:#F4F2ED;--kopf-ink-2:#C1C4C4;--kopf-ok:#7BC79C;--kopf-bad:#EE8B8B;--naht:#C39A5B;
/* Ampel (Inhalt, immer mit Symbol + Wort) */
--ok:#2F6B4F;--ok-bg:#E3EFE7;--warn:#8A6212;--warn-bg:#F5EBD5;--bad:#9C3030;--bad-bg:#F6E2E2;
/* Parteien (Inhalt; gleiche Werte wie politiker.json, gebraucht von templates.html) */
--partei-svp:#2E7D32;--partei-fdp:#1565C0;--partei-mitte:#EF6C00;--partei-sp:#C62828;--partei-glp:#00796B;--partei-gruene:#4CAF50;--partei-evp:#FFB300;--partei-edu:#5D4037;--partei-parteilos:#546E7A;--partei-uebrige:#9E9E9E;
/* Illustrationen (templates.html) */
--sand:#E9E1CF;--ocker:#C8A24A;--stone:#B8BDB9;--wood:#8A6A45;--sky:#DCE8EE;--water:#C9DCE6;--water-ink:#4F6E80;
/* Naturtöne (Beschluss Marcel 17.09.2026): nur Bildwelt – Illustrationen, Symbolflächen der Übungen; nie für Fliesstext. Kontraste: KONTRAST.md */
--lw-natur-gruen:#3D6B4F;--lw-natur-himmel:#DCE8EE;--lw-natur-fels:#B8BDB9;
/* Kantonskarte */
--map-bg:#F7F4EC;--map-bz1:#E9DFC6;--map-bz2:#E1D5B8;--map-bz3:#EDE4CE;--map-rand:#FFFFFF;--map-nb:#B9C0C7;--map-see:#BFD7E6;--map-see-rand:#8DB2C8;--map-see-ink:#3F7192;--map-ink:#0B1F33;--map-ink-2:#3A4B5C;--map-halo:#F7F4EC;--map-hl:#D9B98A;--map-ok:#7BC79C;--map-bad:#EE8B8B;--shadow:none;--r:10px;
color-scheme:light;
}
/* Token dunkel (App-Rolle, Registereintrag) – RUHT seit CI-Abgleich 16.09.2026: Die Homepage hat keinen
Dunkelmodus, die Werte (u. a. Kopf #1A3553 statt Navy) sind nicht beschlossen (CI v2 §1 «kein weiterer Farbwert»,
§4 «Navy ist der Kopf»). Die Werte bleiben hier stehen und greifen nur bei , das nichts setzt.
Wird der Dunkelmodus beschlossen, genügt es, diesen Block wieder in @media screen and (prefers-color-scheme: dark) zu stellen. */
@media screen{
:root[data-theme="dark"]{color-scheme:dark;
--ground:#070D14;--panel:#0F1A26;--panel-2:#172433;--paper:#0F1A26;--ink:#F4F2ED;--ink-2:#C9CFD6;--muted:#9AA6B2;--line:#243345;--line-strong:#6B7B8C;--forest:#A9C1DA;--forest-soft:#1C2B3C;--accent:#C39A5B;--accent-soft:#33291A;--on-accent:#0B1F33;--btn:#F4F2ED;--on-btn:#0B1F33;--focus:#F4F2ED;--kopf:#1A3553;--ok:#7BC79C;--ok-bg:#16271F;--warn:#E0B45F;--warn-bg:#2E2410;--bad:#EE8B8B;--bad-bg:#331C1C;--sand:#2A2A22;--ocker:#C8A24A;--stone:#4A5561;--wood:#B08A5E;--sky:#1C2F3D;--water:#1F4058;--water-ink:#8FB0C2;--map-bg:#0F1A26;--map-bz1:#1E2C3B;--map-bz2:#233345;--map-bz3:#1A2735;--map-rand:#070D14;--map-nb:#3A4A5C;--map-see:#1F4058;--map-see-rand:#3E6A88;--map-see-ink:#8FB0C2;--map-ink:#F4F2ED;--map-ink-2:#C9CFD6;--map-halo:#0F1A26;--map-hl:#7A6038;--map-ok:#2F6B4F;--map-bad:#9C3030;--shadow:0 1px 2px rgba(0,0,0,.5);
}
}
:root[data-schrift="gross"]{font-size:112.5%}
/* Grundlagen */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;min-width:320px}
h1,h2,h3,h4{font-family:var(--sans);text-wrap:balance;margin:0;line-height:1.2;color:var(--ink)}
/* CI §2 und Homepage (.name, .recht h2, .probe__titel): Überschriften sprechen als Person – Newsreader 500 */
h1,h2{font-family:var(--serif);font-weight:500;font-optical-sizing:auto}
h1{font-size:clamp(1.75rem,4.6vw,2.5rem);letter-spacing:-.01em;line-height:1.1}
h2{font-size:1.375rem;letter-spacing:-.005em}
h3{font-size:1.0625rem;font-weight:650}
p{margin:0}
a{color:inherit;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.04em;line-height:1.3;color:var(--ink)}
.intro{max-width:66ch;color:var(--ink)}
.hinweis-klein{font-size:1rem;line-height:1.5}
.stack{display:flex;flex-direction:column;gap:16px}
.muted{color:var(--muted)}
.hidden{display:none!important}
.abstand-oben{margin-top:12px}.abstand-unten{margin-bottom:12px}.zentriert{text-align:center}
.fehler{color:var(--bad);font-weight:600}.fehler:empty{display:none}
.kopier-hilfe{position:fixed;left:-9999px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.top :focus-visible{outline-color:var(--kopf-ink)}
/* Überschriften bekommen nach Routenwechsel programmatisch den Fokus (Vorlesen); sie sind keine Bedienelemente, darum ohne Ring */
:is(h1,h2,h3)[tabindex="-1"]:focus{outline:none}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Hülle: Navy-Leiste 52 px + Bronzenaht 2 px */
/* Naht wie Homepage .naht: 4 px Bronze (vorher 2 px) */
.top{position:sticky;top:0;z-index:20;background:var(--kopf);color:var(--kopf-ink);border-bottom:4px solid var(--naht)}
.top .in{max-width:var(--breite);height:52px;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;font-family:var(--serif);font-weight:500;font-optical-sizing:auto;font-size:1.375rem;line-height:1.05;letter-spacing:-.01em;color:var(--kopf-ink);white-space:nowrap}
.brand i{display:none}
nav.main{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
/* wie Homepage .nav a: Public Sans 600, Versalien, Sperrung .06em, Creme gedämpft; aktiv voll + 2 px Bronze (16 px statt 14 px wegen R6) */
nav.main{gap:clamp(4px,1.2vw,10px)}
nav.main a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:0 8px;color:var(--kopf-ink-2);white-space:nowrap}
nav.main a.on,nav.main a[aria-current="page"]{color:var(--kopf-ink);box-shadow:inset 0 -2px 0 var(--naht)}
.pills{display:flex;gap:8px;align-items:center;margin-left:8px}
.pill-xp{font-size:1rem;padding:4px 10px;border-radius:99px;background:rgba(244,242,237,.12);color:var(--kopf-ink);font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill-xp svg{width:16px;height:16px}
.code-link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(244,242,237,.55);border-radius:999px;color:var(--kopf-ink);font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.code-link.on{border-color:var(--naht);box-shadow:inset 0 0 0 1px var(--naht)}
.brand{margin-right:auto}
nav.main{margin-left:0}
.pills{margin-left:8px}
main{max-width:var(--breite);margin:0 auto;padding:clamp(24px,4vw,40px) var(--gutter) 56px}
.view{display:flex;flex-direction:column;gap:22px;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sync,.sync-dot{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:1rem;font-weight:500;color:var(--ink-2);white-space:nowrap;--sd-ok:var(--ok);--sd-bad:var(--bad)}
.top .sync,.top .sync-dot{color:var(--kopf-ink-2);--sd-ok:var(--kopf-ok);--sd-bad:var(--kopf-bad)}
.sync::before,.sync-dot::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:2px solid currentColor;background:transparent}
.sync.on::before,.sync-dot.on::before{background:var(--sd-ok);border-color:var(--sd-ok)}
.sync.err::before,.sync-dot.err::before{width:10px;height:10px;border-radius:1px;transform:rotate(45deg);background:var(--sd-bad);border-color:var(--sd-bad)}
.sync-dot.readonly::before{border-radius:2px}
/* Bausteine */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:18px 20px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
/* Tasten wie Homepage .taste: Pille, Public Sans 600, Sperrung .04em; voll = Navy auf Creme, still = transparent mit Rahmen
(Rahmen #768290 statt rgba(11,31,51,.34), weil Bedienelemente 3 : 1 brauchen); App-Höhe 48 px statt 56 px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 22px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;font-family:var(--sans);font-weight:600;font-size:1.0625rem;letter-spacing:.03em;line-height:1.25;text-align:center;text-decoration:none;transition:background .12s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--btn);color:var(--on-btn);border-color:var(--btn)}
/* wie .taste--bronze: Bronze-Fläche, Navy-Schrift (6,43 : 1) */
.btn.accent{background:var(--brass);color:var(--navy);border-color:var(--brass)}
.btn.ghost{border-color:transparent;background:transparent;text-decoration:underline}
.btn.sm{min-height:44px;padding:6px 16px;font-size:1rem}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:20px;height:20px}
.tag{display:inline-block;font-size:1rem;font-weight:600;line-height:1.35;padding:3px 9px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tag.rot{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.tag.gelb{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.tag.gruen{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.tag.accent{background:var(--accent);color:var(--on-accent);border-color:transparent}
.bar{height:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--forest);width:0;transition:width .35s ease}
.bar.acc i{background:var(--accent)}
.kv{display:flex;flex-direction:column;gap:2px}
.kv b{font-size:1.75rem;font-weight:700;letter-spacing:-.015em;line-height:1.1;font-variant-numeric:tabular-nums}
.kv span{font-size:1rem;color:var(--muted)}
.kv.hot b{color:var(--accent)}
hr.sep{border:0;border-top:1px solid var(--line);margin:4px 0}
table{border-collapse:collapse;width:100%;font-size:1rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:1rem;font-weight:600;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
.tablewrap,.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
:is(.lesson,.tabelle-scroll) th{background:var(--panel-2);color:var(--ink);font-weight:650;border-bottom:2px solid var(--line-strong);vertical-align:bottom}
:is(.lesson,.tabelle-scroll) td{font-size:1rem}
.tabelle-block{display:flex;flex-direction:column;gap:4px;min-width:0}
.tabelle-hinweis{margin:0;font-size:1rem;color:var(--muted);text-align:right}
.kw-legende{margin-top:6px;font-size:1rem;color:var(--ink-2)}
.start-meldung{border-left:4px solid var(--warn);background:var(--warn-bg)}
.start-meldung p:not(.fehler){color:var(--ink)}
.pruefung-offen{border:2px solid var(--forest);box-shadow:inset 4px 0 0 var(--forest)}
.btn.pruefung-abbrechen{color:var(--bad);border-color:var(--bad);background:var(--panel)}
body.ohne-navigation :is(nav.main,.bottom){display:none!important}
body.ohne-navigation main{padding-bottom:40px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);max-width:calc(100% - 32px);background:var(--ink);color:var(--ground);padding:12px 18px;border-radius:8px;font-size:1rem;opacity:0;transition:.25s;z-index:50;pointer-events:none;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%)}
/* Fusszeile wie Homepage .fuss: Navy-Streifen (Zeile, kein Feld, CI v2 §4/§10). Der Abgrenzungssatz steht davor auf Creme,
damit der Streifen eine Zeile bleibt. 16 px statt 13 px (R6), Links 44 px hoch. */
.lw-fuss{margin-top:8px}
.fuss-abgrenzung{max-width:var(--breite);margin:0 auto;padding:18px var(--gutter) 22px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.fuss-abgrenzung>span{display:block;max-width:66ch;padding-top:14px;border-top:1px solid rgba(83,107,128,.34)}
.fuss{background:var(--navy);color:var(--creme);padding:2px 0 4px}
.fuss__innen{max-width:var(--breite);margin:0 auto;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:center;gap:0 1.25rem;font-family:var(--sans);font-size:1rem;line-height:1.35;color:var(--kopf-ink-2);min-width:0}
.fuss a{display:inline-flex;align-items:center;min-height:44px;color:var(--kopf-ink-2);text-decoration:none}
.fuss a:hover{color:var(--creme);text-decoration:underline}
.fuss :focus-visible{outline-color:var(--creme)}
.recht :is(p,a,td,th,li),footer :is(p,a){overflow-wrap:anywhere}
/* Einstieg */
.start-wahl,.start:not(.view){display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:599px){.start-wahl,.start:not(.view){grid-template-columns:1fr}}
:is(.start-wahl,.start:not(.view))>:is(.btn,.bigbtn){width:100%;min-height:72px;margin:0}
:is(.start-wahl,.start:not(.view))>.btn{font-size:1.125rem}
.start-area:empty{display:none}
.bigbtn{font:inherit;width:100%}
.bigbtn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.code-karte{display:flex;flex-direction:column;gap:14px;max-width:34rem;padding:22px 20px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r)}
.code-karte .code,.code-karte .code-gross{margin:0;padding:10px 14px;border-radius:8px;background:var(--panel-2);border-left:4px solid var(--brass);font-family:var(--mono);font-size:clamp(1.5rem,7vw,2.75rem);font-weight:600;line-height:1.3;letter-spacing:.12em;color:var(--ink);font-variant-numeric:tabular-nums slashed-zero;word-break:keep-all;overflow-wrap:normal;hyphens:none}
.code-karte :is(.code,.code-gross)>span{display:inline-block;white-space:nowrap}
.code-karte .frist{font-size:1rem;color:var(--ink-2)}
.code-karte .code-warnung{padding:10px 14px;border-radius:8px;background:var(--bad-bg);color:var(--bad)}
.code-karte .code-warnung b{font-weight:650}
.code-karte .code-warnung::before{content:"⚠ ";content:"⚠ "/"";font-weight:700}
.code-karte .aktionen{display:flex;flex-wrap:wrap;gap:8px}
.code-feld{width:100%;min-height:56px;padding:10px 14px;font-family:var(--mono);font-size:1.5rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink)}
.code-zettel,.druck-fuss{display:none}
body.druck-zettel>.code-zettel,:is(body.druckansicht,.view.druck) .druck-fuss{display:block}
.druck-fuss{margin-top:16px;padding-top:8px;border-top:1px solid var(--brass);font-size:1rem;color:var(--ink-2)}
.hinweis{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:var(--r)}
.hinweis h2,.hinweis h3,.hinweis .titel{font-family:var(--sans);font-size:1rem;font-weight:650;color:var(--ink)}
.hinweis p{font-size:1.0625rem;line-height:1.5}
.hinweis .wahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hinweis .aus{margin-left:auto}
.themen-uebersicht{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:10px}
.themen-uebersicht .thema{padding:14px 16px;gap:8px}
@media (hover:hover){.thema:hover{border-color:var(--line-strong);background:var(--panel-2)}}
.themen-uebersicht .thema .n{font-size:1.0625rem;font-weight:600}
.themen-uebersicht .summe,.themen-uebersicht .folgen{grid-column:1/-1;font-size:1rem;color:var(--ink-2)}
.stand{display:inline-flex;align-items:center;gap:6px;font-size:1rem;font-weight:600}
.stand::before{font-weight:700}
.stand.sicher{color:var(--ok)}.stand.sicher::before{content:"✓";content:"✓"/""}
.stand.arbeit{color:var(--warn)}.stand.arbeit::before{content:"◐";content:"◐"/""}
.stand.offen{color:var(--ink-2)}.stand.offen::before{content:"○";content:"○"/""}
/* Startseite */
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:stretch}
@media(max-width:760px){.hero{grid-template-columns:1fr}}
.lead{display:flex;flex-direction:column;gap:10px}
.lead h1{font-family:var(--serif);font-weight:500;font-optical-sizing:auto;font-size:clamp(2.25rem,6vw,3rem);letter-spacing:-.01em;line-height:1.05}
.lead .rule{margin-bottom:2px}
.lead .counters{margin-top:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.weiter-wahl .bigbtn span{text-wrap:balance}
.rule{width:52px;height:3px;background:var(--brass)}
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.counter{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.counter span{overflow-wrap:anywhere;hyphens:auto}
.coach{border-left:4px solid var(--brass)}
.coach .who{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.coach .who i{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent);font-style:normal;font-weight:700;font-size:1rem}
.coach .body p+p{margin-top:8px}
.today{display:flex;flex-direction:column;gap:12px}
.blocklist{display:flex;flex-direction:column}
.block{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;min-height:56px;padding:10px 14px;border-top:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer}
.block:first-child{border-top:0}
.block.pause{cursor:default;color:var(--muted)}
.block .ic{width:36px;height:36px;border-radius:8px;background:var(--forest-soft);display:grid;place-items:center;color:var(--forest)}
.block .ic svg{width:20px;height:20px}
.block.done .ic{background:var(--ok-bg);color:var(--ok)}
.block .t b{display:block;font-weight:600;font-size:1rem}
.block .t span{font-size:1rem;color:var(--muted)}
.block .min{font-size:1rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.block.done .t b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.days{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
@media(max-width:640px){.days{grid-template-columns:repeat(6,1fr)}}
.day-dot{aspect-ratio:1;min-height:44px;border-radius:8px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--ink-2);font-size:1rem;gap:1px;background:var(--panel)}
.day-dot b{font-size:1rem;color:var(--ink)}
.day-dot.today{border:2px solid var(--accent);background:var(--accent-soft)}
.day-dot.done{background:var(--ok-bg);border-color:transparent}
.day-dot.done b{color:var(--ok)}
.day-dot.test{border-style:dashed}
/* Themenübersicht: Gruppen als echtes DOM (section > h3 + ul), 16.09.2026 (R6 aus PRÜFUNG 6) */
.themen{display:flex;flex-direction:column;gap:20px}
.themen-gruppe h3{margin:0 0 8px}
.themen-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));gap:8px}
.themen-liste>li{display:flex;min-width:0}
.themen-liste>li>.thema{flex:1 1 auto;min-width:0}
.thema{display:flex;flex-direction:column;gap:6px;min-height:56px;padding:11px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);text-decoration:none;color:inherit}
.themen-gruppe[data-teil="sz"] .thema{border-left:3px solid var(--brass)}
.thema .n{font-size:1.0625rem;font-weight:600;line-height:1.3}
.thema .s{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 8px;font-size:1rem;color:var(--muted);font-variant-numeric:tabular-nums}
.thema .s>span:first-child{font-weight:600}
.thema.gruen .s>span:first-child{color:var(--ok)}.thema.gelb .s>span:first-child{color:var(--warn)}
.thema.gruen .s>span:first-child::before{content:"✓ ";content:"✓ "/""}
.thema.gelb .s>span:first-child::before{content:"◐ ";content:"◐ "/""}
/* offen = noch keine Antwort: leerer Balken und Wort «offen» doppeln «noch nicht geübt» */
.thema.offen .bar,.thema.offen .s>span:first-child{display:none}
.thema.offen .s>span:last-child::before{content:"○ ";content:"○ "/""}
.thema .bar{height:6px}
.thema.rot .bar i{background:var(--bad)}.thema.gelb .bar i{background:var(--warn)}.thema.gruen .bar i{background:var(--ok)}
.view:has(>.themen) .row:has(>a[href^="#/lektion/"]){display:grid;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));gap:0 24px}
.view:has(>.themen) .row>a.btn[href^="#/lektion/"]{justify-content:flex-start;text-align:left;font-weight:500;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;background:transparent;text-decoration:none;align-items:baseline}
.view:has(>.themen) .row>a.btn[href^="#/lektion/"]:hover{text-decoration:underline}
.view:has(>.themen) .row>a.btn[href^="#/lektion/"]::before{content:"→";content:"→"/"";flex:none;color:var(--accent)}
.view:has(>.themen)>.hinweis-klein{border-top:2px solid var(--brass);padding-top:10px;width:max-content;max-width:100%;color:var(--ink-2)}
/* Aktivitätsrahmen */
.act-head{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap}
.act-head h2{font-size:clamp(1.5rem,3.8vw,1.875rem);font-weight:500;letter-spacing:-.01em}
.act-head .back{min-height:44px;margin:-10px 0 -6px;text-decoration:none;color:var(--ink-2);font-size:1rem;display:inline-flex;align-items:center;gap:4px}
.act-head .back:hover{text-decoration:underline}
.act-head .back+h2{flex-basis:100%;min-width:0}
.act-head .back+h2:has(~.timer){flex-basis:auto;flex:1 1 60%}
.act-head .timer{margin-left:auto;font-size:1rem;color:var(--muted);display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.act-head .timer b{color:var(--ink);font-weight:600}
.act-head .timer.over b{color:var(--accent)}
.progress-strip{display:flex;gap:4px}
.progress-strip i{flex:1;height:5px;border-radius:2px;background:var(--line)}
.progress-strip i.ok{background:var(--ok)}.progress-strip i.bad{background:var(--bad)}.progress-strip i.cur{background:var(--forest)}.progress-strip i.part{background:var(--warn)}
/* Lektion (Newsreader) */
.view:has(>.lesson) .act-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,4vw,1.875rem);letter-spacing:-.005em}
.lesson{max-width:720px}
.lesson .sec{margin-bottom:24px}
.lesson .sec p,.lesson .sec li{font-family:var(--serif);font-optical-sizing:auto;font-size:1.1875rem;line-height:1.62;max-width:66ch}
.lesson .sec p+p{margin-top:12px}
.lesson .sec h3,.lesson .sec h4{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:0 0 8px}
.lesson figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow:hidden}
.lesson figure svg{width:100%;height:auto;display:block}
.lesson figcaption{font-size:1rem;color:var(--muted);margin-top:8px;text-align:center}
.merke{background:var(--forest-soft);border-left:4px solid var(--forest);border-radius:0 var(--r) var(--r) 0;padding:12px 16px;font-size:1.0625rem}
.merke b{color:var(--ink)}
.check{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.check .eyebrow{margin-bottom:8px}
.check.flash{outline:3px solid var(--accent);outline-offset:6px;transition:outline-color .3s}
/* Fragen */
.q{display:flex;flex-direction:column;gap:14px;min-width:0}
.q .prompt,.opt{overflow-wrap:break-word;hyphens:auto}
.q .prompt{font-size:1.125rem;font-weight:600;line-height:1.4;text-wrap:pretty}
.q .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--ink);cursor:pointer;text-align:left;width:100%;font-size:1.0625rem;line-height:1.4;transition:background .1s}
.opt .k{font-size:1rem;font-weight:600;color:var(--muted);min-width:18px;padding-top:2px}
.opt.sel{border-color:var(--forest);background:var(--forest-soft);box-shadow:inset 0 0 0 1px var(--forest)}
.opt.ok{border-color:var(--ok);background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok)}
.opt.bad{border-color:var(--bad);background:var(--bad-bg);box-shadow:inset 0 0 0 1px var(--bad)}
.opt.miss{border:2px dashed var(--ok)}
.opt[disabled]{cursor:default}
.fillin{display:flex;gap:8px;flex-wrap:wrap}
.fillin input,.openin{flex:1;min-width:min(200px,100%);min-height:48px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink);font-size:1.0625rem}
.openin{width:100%;min-height:96px;resize:vertical}
.feedback{border-radius:var(--r);padding:12px 14px;font-size:1rem;line-height:1.5;display:flex;gap:10px;align-items:flex-start}
.feedback.ok{background:var(--ok-bg);color:var(--ok)}
.feedback.bad{background:var(--bad-bg);color:var(--bad)}
.feedback.part{background:var(--warn-bg);color:var(--warn)}
.feedback .x{color:var(--ink)}
.feedback b{display:block;margin-bottom:2px}
.feedback svg{width:22px;height:22px;flex:none;margin-top:1px}
.kw{display:inline-block;padding:2px 7px;border-radius:4px;background:var(--panel);border:1px solid var(--line);font-size:1rem;margin:2px 3px 0 0}
.kw.hit{border-color:var(--ok);color:var(--ok)}
.kw.miss{border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.match{display:flex;flex-direction:column;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-height:56px;padding:10px;border:1px dashed var(--line-strong);border-radius:var(--r)}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:99px;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);cursor:grab;user-select:none;-webkit-user-select:none;font-size:1rem;touch-action:pan-y;box-shadow:var(--shadow);max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.chip.sel{border-color:var(--forest);background:var(--forest-soft);box-shadow:inset 0 0 0 1px var(--forest)}
.chip.drag{position:fixed;z-index:60;pointer-events:none;opacity:.92;transform:scale(1.05)}
.chip.ok{border-color:var(--ok);background:var(--ok-bg)}
.chip.bad{border-color:var(--bad);background:var(--bad-bg)}
.buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:10px}
.bucket{min-width:0;border:1px solid var(--line-strong);border-radius:var(--r);min-height:96px;padding:10px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.bucket h4{font-size:1rem;font-weight:600;color:var(--ink-2)}
.bucket.over{border-color:var(--forest);background:var(--forest-soft)}
.bucket .chips{border:0;padding:0;min-height:44px}
.order{display:flex;flex-direction:column;gap:8px}
.oitem{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px 6px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.oitem>*{min-width:0;overflow-wrap:break-word;hyphens:auto}
.oitem .n{color:var(--muted);font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.oitem .mv{display:flex;gap:4px}
.oitem .mv button{width:44px;height:44px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);cursor:pointer}
.oitem.ok{border-color:var(--ok);background:var(--ok-bg)}.oitem.bad{border-color:var(--bad);background:var(--bad-bg)}
.oitem.drag{opacity:.4}
@media (max-width:480px){.oitem{grid-template-columns:20px minmax(0,1fr) 44px;gap:8px;font-size:1rem}.oitem .mv{flex-direction:column}}
:is(.oitem,.chip):is(.drag,.dragging){touch-action:none}
/* Karteikarten */
.card-wrap{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0;width:100%}
.row.filter{gap:8px}
.row.filter .btn:not(.primary){font-weight:500}
.flash{min-height:230px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:48px 24px 24px;display:flex;flex-direction:column;justify-content:center;gap:12px;cursor:pointer;position:relative}
.flash .side{font-size:1.3125rem;font-weight:500;line-height:1.4;text-wrap:pretty}
.flash .ans{font-size:1.375rem;color:var(--forest);font-weight:650}
.flash .hint{font-size:1rem;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.flash .box{position:absolute;top:14px;right:14px;font-size:1rem;color:var(--muted)}
.flash .topic{position:absolute;top:12px;left:14px}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.leitner{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.leitner div{text-align:center;padding:8px 4px;border-radius:8px;background:var(--panel-2);font-size:1rem;color:var(--ink-2)}
@media (max-width:480px){.leitner{grid-template-columns:1fr;gap:4px}.leitner div{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;padding:8px 12px;text-align:left}}
.leitner div b{display:block;font-size:1.125rem;color:var(--ink);font-variant-numeric:tabular-nums}
.karte-druck{display:grid;grid-template-columns:1fr 1fr;margin:0 0 12px;background:var(--panel);border:1px solid var(--line-strong);border-radius:4px;break-inside:avoid}
.karte-druck>*{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px;min-height:9rem}
.karte-druck>*+*{border-left:1px dashed var(--line-strong)}
.karte-druck .vorn{font-weight:600;font-size:1.0625rem}
.karte-druck small{font-size:1rem;color:var(--muted)}
/* Blitz, Karte, Resultate */
.blitz-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.blitz-head .t{font-size:2.5rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.blitz-head .t.low{color:var(--accent)}
.streak{font-size:1rem;color:var(--muted)}
.streak b{color:var(--accent)}
.map-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;overflow:hidden}
.map-wrap svg{width:100%;height:auto;display:block;max-height:70vh}
.map-wrap .bezirk{cursor:pointer;transition:fill .12s}
.map-wrap .see,.map-wrap .poi,.map-wrap .ort{cursor:pointer}
.map-wrap .hit{fill:var(--ok-bg)!important;stroke:var(--ok)!important;stroke-width:3}
.map-wrap .wrong{fill:var(--bad-bg)!important;stroke:var(--bad)!important;stroke-width:3}
.map-wrap .glow{filter:drop-shadow(0 0 4px var(--accent));fill:var(--accent-soft)!important}
.map-wrap g.hit *{stroke:var(--ok)!important;stroke-width:3.5!important;fill:var(--ok-bg)}
.map-wrap g.wrong *{stroke:var(--bad)!important;stroke-width:3.5!important}
.map-wrap g.hit text,.map-wrap g.wrong text{display:block!important;stroke:none!important;fill:var(--ink)!important;font-weight:600}
.map-game #labels .bz-label,.map-game #labels .see-label,.map-game #pois text,.map-game #orte text{display:none}
.map-game.show-orte #orte text{display:block}
.map-task{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.map-task .q{font-size:1.125rem;font-weight:600;margin:4px 0 8px;line-height:1.35}
.map-fb{font-size:1rem;margin:6px 0 8px;min-height:1.5em}
.map-fb.ok{color:var(--ok)}
.map-fb.bad{color:var(--bad)}
.map-info{margin-top:12px}
label.check,.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:1rem;padding:6px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);cursor:pointer}
:is(label.check,.chk) input[type=checkbox]{width:24px;height:24px;margin:0;flex:none;accent-color:var(--forest)}
.result{display:flex;flex-direction:column;gap:14px}
.score{display:flex;align-items:baseline;gap:8px}
.score b{font-size:2.75rem;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.score span{color:var(--muted)}
.rev{display:flex;flex-direction:column;gap:10px}
.rev .item{padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.rev .item.bad{border-left:4px solid var(--bad)}.rev .item.ok{border-left:4px solid var(--ok)}.rev .item.part{border-left:4px solid var(--warn)}
.rev .item .p{font-weight:600}
.rev .item::before{display:block;font-weight:700;margin-bottom:4px}
.rev .item.ok::before{content:"✓ Richtig";color:var(--ok)}
.rev .item.part::before{content:"◐ Teilweise richtig";color:var(--warn)}
.rev .item.bad::before{content:"✕ Nicht richtig";color:var(--bad)}
.rev .item .a{font-size:1rem;color:var(--ink-2);margin-top:4px}
.rev .item .e{font-size:1rem;color:var(--muted);margin-top:4px}
.log{display:flex;flex-direction:column;gap:8px}
.log .e{display:grid;grid-template-columns:96px 1fr auto;gap:10px;font-size:1rem;padding:8px 0;border-bottom:1px solid var(--line)}
.log .e:last-child{border-bottom:0}
.log .e .d,.log .e .s{font-size:1rem;color:var(--muted);font-variant-numeric:tabular-nums}
.log .e .s{color:var(--ink-2)}
.bigbtn{text-align:left;display:flex;gap:14px;align-items:center;min-height:64px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.bigbtn .ic{width:44px;height:44px;border-radius:10px;background:var(--forest-soft);color:var(--forest);display:grid;place-items:center;flex:none}
.bigbtn .ic svg{width:24px;height:24px}
.bigbtn b{display:block;font-weight:600}
.bigbtn span{font-size:1rem;color:var(--muted)}
/* Tab-Leiste unten (Handy) */
.bottom{display:none}
@media(max-width:640px){
nav.main{display:none}
.bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--panel);border-top:1px solid var(--line-strong);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:56px;text-decoration:none;font-size:1rem;letter-spacing:-.01em;font-weight:500;color:var(--ink-2);border-radius:8px}
.bottom a svg{width:24px;height:24px}
.bottom a.on,.bottom a[aria-current="page"]{color:var(--ink);font-weight:650;background:var(--forest-soft);box-shadow:inset 0 3px 0 var(--brass)}
main{padding-bottom:40px}
.row.filter{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;scrollbar-width:thin;scroll-padding:var(--gutter)}
.row.filter .btn{flex:none}
.bigbtn{padding:12px 14px;gap:12px;min-height:60px}
.bigbtn .ic{width:40px;height:40px}
.top .in{gap:8px}
.pills{margin-left:auto}
body:not(.ohne-navigation,.recht-seite){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.toast{bottom:84px}
.pill-xp{display:none}
.brand{font-size:1.25rem}
.code-link{padding:0 12px;letter-spacing:.04em}
.pills{gap:6px}
}
/* Mittlere Breiten (641–959 px): Die Navigation in Versalien braucht Platz – Statuswort nur für Vorlesegeräte, Symbol bleibt */
@media (min-width:641px) and (max-width:959px){
.top .sync-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.top .sync{min-width:24px;justify-content:center}
nav.main{gap:0}
nav.main a{padding:0 7px;letter-spacing:.04em}
}
@media (min-width:641px) and (max-width:719px){
.top .in{gap:8px;padding:0 16px}
nav.main a{padding:0 6px;letter-spacing:.02em}
.code-link{padding:0 12px;letter-spacing:.04em}
}
/* Sehr schmale Geräte (< 380 px): Statuswort nur für Vorlesegeräte, Form des Symbols bleibt (voll · Ring · Raute); Wortlaut auch im Logbuch */
@media (max-width:379px){
.top .sync-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.top .sync{min-width:24px;justify-content:center}
}
/* Illustrationen, Filme, Kantone */
.hero-ill{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:22px;background:var(--panel)}
.hero-ill svg{width:100%;height:auto;display:block}
.film .stage{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--paper)}
.film .stage svg{width:100%;min-width:800px;height:auto;display:block}
.film .step{opacity:0;transform:translateY(8px);transition:opacity .55s ease,transform .55s ease}
.film .step.on{opacity:1;transform:none}
.film .step.on [data-anim=rise]{animation:filmRise .7s ease both}
.film .step.on [data-anim=slide-left]{animation:filmSlideL .7s ease both}
.film .step.on [data-anim=slide-right]{animation:filmSlideR .7s ease both}
.film .step.on [data-anim=pulse]{animation:filmPulse 1.2s ease 2;transform-box:fill-box;transform-origin:center}
@keyframes filmRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes filmSlideL{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes filmSlideR{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes filmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.film .step{transition:none;transform:none}.film .step.on [data-anim]{animation:none}}
.film .caption{display:flex;gap:12px;align-items:flex-start;padding:12px 4px 6px;min-height:58px}
.film .caption .n{font-size:1rem;color:var(--muted);padding-top:3px;white-space:nowrap}
.film .caption p{font-size:1.0625rem;line-height:1.5;margin:0;text-wrap:pretty}
.film .ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
.film .dots{display:flex;flex-wrap:wrap;flex:1 1 100%;order:2;min-width:0;justify-content:center}
.film-info{min-width:0;overflow-wrap:anywhere}
.film .ctrl .btn{min-width:44px}
.film .dot{position:relative;width:44px;height:44px;border:0;background:transparent;padding:0;cursor:pointer}
.film .dot::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--line-strong);background:var(--panel)}
.film .dot::after{content:"";position:absolute;inset:0 -6px}
.film .dot.on::before{background:var(--forest);border-color:var(--forest)}
.kt-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:start}
@media(max-width:760px){.kt-grid{grid-template-columns:1fr}}
.map-wrap.ch .kanton{cursor:pointer;transition:fill .12s}
.map-wrap.ch .kanton.sel{fill:var(--accent-soft)!important;stroke:var(--accent)!important;stroke-width:2}
.map-wrap.ch .kanton.hit{fill:var(--ok-bg)!important;stroke:var(--ok)!important;stroke-width:2.5}
.map-wrap.ch .kanton.wrong{fill:var(--bad-bg)!important;stroke:var(--bad)!important;stroke-width:2.5}
.map-wrap.ch .kanton.glow{fill:var(--accent-soft)!important;stroke:var(--accent)!important;stroke-width:2.5}
.kt-side table td{font-size:1rem;padding:6px 8px}
.kt-side td:first-child{color:var(--muted);width:38%}
.merk p{font-size:1rem;padding:8px 10px;border-radius:8px;background:var(--panel-2);margin:0 0 6px}
.poi-fig{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:560px;margin:0 auto 14px;background:var(--paper)}
.poi-fig svg{width:100%;height:auto;display:block}
/* Fotos, Politik, Atlas */
.foto{max-width:100%;height:auto;display:block;border-radius:8px}
.q-img{margin:4px 0 12px;display:flex;justify-content:flex-start}
.q-img img{width:min(240px,60vw);height:min(240px,60vw);object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.q-img.wide img{width:100%;height:auto;max-height:340px;object-fit:contain;background:var(--panel-2)}
.poi-fig.photo{background:var(--panel-2);display:flex;justify-content:center}
.poi-fig.photo img{max-height:380px;width:auto;max-width:100%;object-fit:contain;border-radius:0}
/* Parteietikett: Farbe = Inhalt, Name immer ausgeschrieben. Klassen p-* statt style="--pc" (CSP). */
.ptag{display:inline-block;font-size:1rem;font-weight:600;line-height:1.35;padding:2px 8px;border-radius:5px;background:var(--pc,var(--partei-uebrige));color:#FFFFFF;white-space:nowrap}
.p-svp{--pc:var(--partei-svp)}.p-fdp{--pc:var(--partei-fdp)}.p-sp{--pc:var(--partei-sp)}.p-glp{--pc:var(--partei-glp)}.p-edu{--pc:var(--partei-edu)}.p-parteilos{--pc:var(--partei-parteilos)}
.p-mitte{--pc:var(--partei-mitte)}.p-gruene{--pc:var(--partei-gruene)}.p-evp{--pc:var(--partei-evp)}.p-uebrige{--pc:var(--partei-uebrige)}
.ptag.p-mitte,.ptag.p-gruene,.ptag.p-evp,.ptag.p-uebrige{color:#0B1F33}
/* ohne p-Klasse ist die Grundfarbe unbekannt: neutrales Etikett (Text --ink), Parteifarbe als Marke */
.ptag:not([class*="p-"]){background:var(--panel-2);color:var(--ink);border:1px solid var(--line-strong);padding-left:6px}
.ptag:not([class*="p-"])::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;background:var(--pc,var(--partei-uebrige));box-shadow:0 0 0 1px var(--ink)}
.pol-panel{margin:10px 0}
.pol-grid{min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pol-grid.compact{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
.pol-card{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);cursor:pointer;text-align:left;overflow:hidden;transition:transform .12s,box-shadow .12s}
.pol-card.open{grid-column:span 2;box-shadow:var(--shadow);border-color:var(--line-strong)}
.pol-card.extra{opacity:.9}
.pol-card.extra .pol-img::after{content:"Verwaltung";position:absolute;top:8px;left:8px;font-size:1rem;font-weight:600;padding:2px 7px;border-radius:4px;background:rgba(11,31,51,.85);color:#F4F2ED}
.pol-img{position:relative;aspect-ratio:1/1;background:var(--panel-2)}
.pol-img img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.pol-role{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:1rem;font-weight:600;background:rgba(11,31,51,.85);color:#F4F2ED}
.pol-body{padding:0 10px 10px;font-size:1rem;line-height:1.35;overflow-wrap:anywhere;hyphens:auto;min-width:0}
.pol-body b{display:block;font-size:1rem;margin-bottom:4px}
.pol-line{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:1rem}
.pol-dept{font-size:1rem;color:var(--ink-2);margin-top:4px}
.pol-detail{overflow-wrap:anywhere;font-size:1rem;line-height:1.5;color:var(--ink-2);border-top:1px dashed var(--line);padding:8px 0 0;margin:0 10px 12px}
.wer-img{display:flex;justify-content:center;margin-bottom:14px}
.wer-img img{width:min(280px,70vw);height:min(280px,70vw);object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.karte-fig{margin:14px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px}
.karte-fig img{width:100%;height:auto;cursor:zoom-in;border-radius:6px}
.karte-fig figcaption{font-size:1rem;color:var(--muted);padding:8px 4px 2px;line-height:1.45}
.foto-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:12px;margin:14px 0}
.foto-strip figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:zoom-in}
.foto-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;display:block}
.foto-strip figcaption{font-size:1rem;line-height:1.4;padding:8px 10px;color:var(--ink-2)}
.atlas-wrap{overflow:auto;max-height:70vh;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2);-webkit-overflow-scrolling:touch}
.atlas-wrap img{width:100%;height:auto;max-width:none;display:block;cursor:zoom-in;border-radius:0;transition:width .15s}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(7,13,20,.94);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.lb-in{max-width:min(1200px,100%);max-height:100%;overflow:auto;text-align:center}
.lb-in img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:6px;background:#FFFFFF}
.lb-cap{color:#F4F2ED;font-size:1rem;margin-top:10px}
.lb-x{margin-top:10px}
.credits{margin-top:14px;font-size:1rem;color:var(--muted)}
.credits summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.credits ul{margin:6px 0 0;padding-left:18px;line-height:1.5}
.pol-card.open .pol-img{aspect-ratio:16/10}
.pol-card.open .pol-img img{object-position:50% 20%}
/* Karteikarten-Visuals */
.flash .cv{margin-top:6px;border-top:1px dashed var(--line);padding-top:12px;cursor:default;width:100%;min-width:0}
.cv-title{font-size:1rem;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.cv-person{display:flex;gap:14px;align-items:center}
.cv-portrait{width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--line);flex:none}
.cv-person-txt b{font-size:1.0625rem}
.cv-persons{display:flex;flex-wrap:wrap;gap:10px}
.cv-mini{display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;text-align:center;font-size:1rem;line-height:1.25}
.cv-mini img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.cv-mini b{font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.cv-hemi-svg{width:min(320px,100%);height:auto;display:block;margin:0 auto}
.cv-legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:6px;font-size:1rem}
.cv-leg i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--pc,var(--partei-uebrige));margin-right:5px;vertical-align:-1px}
.cv-leg.mark{font-weight:700}
.cv-hl{font-weight:700}
.cv-foto{margin:0}
.cv-foto img{max-height:240px;width:auto;max-width:100%;border-radius:8px;border:1px solid var(--line);display:block}
.cv-foto figcaption{font-size:1rem;color:var(--muted);margin-top:6px}
.cv-svg svg{width:100%;height:auto;max-height:300px;display:block}
.cv-map svg,.cv-map-svg{width:min(420px,100%);height:auto;display:block;margin:0 auto}
.cv-bars{display:grid;width:100%;grid-template-columns:minmax(0,auto) minmax(80px,1fr) auto;gap:6px 10px;align-items:center;font-size:1rem}
.cv-bar{display:contents}
.cv-bar .b{display:block;min-width:80px;height:14px;background:var(--panel-2);border-radius:7px;overflow:hidden}
.cv-bar .b i{display:block;height:100%;background:var(--forest);border-radius:7px}
.cv-bar.mark .b i{background:var(--accent)}
.cv-bar.mark .l,.cv-bar.mark .v{font-weight:700}
.cv-bar .v{font-size:1rem;font-variant-numeric:tabular-nums}
.cv-tl-svg{width:100%;height:auto;display:block}
.cv-tiles{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
.cv-tiles.n3{grid-template-columns:repeat(3,1fr)}
.cv-tiles.n4{grid-template-columns:repeat(4,1fr)}
@media (max-width:480px){.cv-tiles.n4{grid-template-columns:repeat(2,1fr)}}
.cv-tile{background:var(--panel-2);border-radius:8px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.cv-tile b{font-size:1.375rem;color:var(--forest);line-height:1.15;font-variant-numeric:tabular-nums}
.cv-tile span{font-size:1rem;color:var(--ink-2);line-height:1.3}
.cv-tile.mark{background:var(--accent-soft)}
.cv-tile.mark b{color:var(--accent)}
.cv-steps{display:flex;flex-direction:column;gap:4px}
.cv-step{background:var(--panel-2);border-radius:6px;padding:6px 10px;font-size:1rem;display:flex;gap:8px;align-items:center;width:52%;min-width:min(200px,100%);max-width:100%}
.cv-step .k{font-size:1rem;color:var(--muted);min-width:14px}
.cv-step.mark{background:var(--accent-soft);font-weight:700}
.cv-kv{width:100%;border-collapse:collapse;font-size:1rem}
.cv-kv td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.cv-kv td:first-child{color:var(--ink-2);width:42%}
.cv-kv td:last-child{font-weight:600}
/* Kantonskarte aus Geodaten */
.szmap-wrap{width:100%;overflow:auto;background:var(--map-bg);border:1px solid var(--line);border-radius:var(--r);-webkit-overflow-scrolling:touch}
.szmap{width:100%;height:auto;display:block;touch-action:manipulation;font-family:var(--sans);-webkit-tap-highlight-color:transparent}
.szmap .bg{fill:var(--map-bg)}
.szmap .nbline{fill:none;stroke:var(--map-nb);stroke-width:1.1;stroke-dasharray:3 2.2;stroke-linejoin:round}
.szmap .bezirk{fill:var(--map-bz1);stroke:var(--map-rand);stroke-width:1.5;stroke-linejoin:round;transition:fill .15s,fill-opacity .15s;cursor:pointer}
.szmap .bezirk:nth-child(2n){fill:var(--map-bz2)}
.szmap .bezirk:nth-child(3n){fill:var(--map-bz3)}
.szmap .kanton{fill:none;stroke:var(--forest);stroke-width:2.2;stroke-linejoin:round;pointer-events:none}
.szmap .gemeinde{fill:transparent;stroke:var(--map-ink-2);stroke-opacity:.5;stroke-width:.65;stroke-dasharray:2.2 1.6;stroke-linejoin:round;pointer-events:none;display:none}
.szmap .gm.on .gemeinde{display:block}
.szmap.pickgm .gm.on .gemeinde{pointer-events:fill;cursor:pointer}
.szmap .seefl{fill:var(--map-see);stroke:var(--map-see-rand);stroke-width:.7;cursor:pointer;transition:fill .15s}
.szmap .hitsee .hit{fill:none;stroke:transparent;stroke-width:9;pointer-events:stroke;cursor:pointer}
.szmap .pois,.szmap .orte{display:none}
.szmap .pois.on,.szmap .orte.on{display:block}
.szmap .poi,.szmap .ort{cursor:pointer}
.szmap .poi .mark{fill:var(--accent);stroke:var(--map-bg);stroke-width:.9;stroke-linejoin:round}
.szmap .poi .dot{fill:var(--map-bg)}
.szmap .poi .hit,.szmap .ort .hit{fill:transparent}
.szmap .ort .dot{fill:var(--map-ink);stroke:var(--map-bg);stroke-width:1.1}
.szmap .ort.r3{display:none}
.szmap.detail .ort.r3{display:block}
.szmap .labels text{pointer-events:none;fill:var(--map-ink-2);paint-order:stroke;stroke:var(--map-halo);stroke-width:2.2;stroke-linejoin:round}
.szmap .lab-bz{font-size:13px;font-weight:700;letter-spacing:.1em;fill:var(--map-ink-2)}
.szmap .lab-see{font-size:9.5px;font-style:italic;fill:var(--map-see-ink);stroke:var(--map-see)}
.szmap .lab-ort{font-size:9px;font-weight:600;fill:var(--map-ink)}
.szmap .lab-ort.r2{font-size:8px;font-weight:500}
.szmap .lab-ort.r3{display:none}
.szmap.detail .lab-ort.r3{display:block;font-size:7px;font-weight:500}
.szmap .lab-poi{font-size:7px;fill:var(--accent);display:none}
.szmap.detail .lab-poi{display:block}
.szmap .lab-nb{font-size:11px;font-weight:600;fill:var(--muted);letter-spacing:.1em}
.szmap.quiz .labels text{display:none}
.szmap.quiz .labels text.show,.szmap.quiz .labels text.lab-nb{display:block}
.szmap .scale line{stroke:var(--map-ink-2);stroke-width:1}
.szmap .scale text{font-size:8px;fill:var(--map-ink-2)}
.szmap .credit{font-size:6px;fill:var(--muted)}
.szmap .bezirk.hl,.szmap .gemeinde.hl{fill:var(--map-hl);fill-opacity:1}
.szmap .seefl.hl{fill:var(--water-ink)}
.szmap .bezirk.ok,.szmap .gemeinde.ok{fill:var(--map-ok);fill-opacity:1}
.szmap .bezirk.bad,.szmap .gemeinde.bad{fill:var(--map-bad);fill-opacity:1}
.szmap .seefl.ok{fill:var(--ok)}
.szmap .seefl.bad{fill:var(--bad)}
.szmap .ort.ok .dot,.szmap .poi.ok .mark{fill:var(--ok)}
.szmap .ort.bad .dot,.szmap .poi.bad .mark{fill:var(--bad)}
.szmap .ort.hl .dot,.szmap .poi.hl .mark{fill:var(--accent)}
.szmap .ort.ok .dot,.szmap .ort.bad .dot,.szmap .ort.hl .dot{r:5}
.szmap .glow{animation:szglow 1.1s ease-in-out infinite}
@keyframes szglow{0%,100%{fill:var(--map-hl)}50%{fill:var(--brass)}}
.szmap .dim{fill-opacity:.4}
.szmap .pin .ring{fill:none;stroke:var(--accent);stroke-width:1.6;animation:pinring 1.2s ease-out infinite}
.szmap .pin .c{fill:var(--accent);stroke:var(--map-bg);stroke-width:.8}
.szmap .pin.ok .ring{stroke:var(--ok)}
.szmap .pin.ok .c{fill:var(--ok)}
@keyframes pinring{0%{r:4;opacity:1}100%{r:16;opacity:0}}
.szmap.static{pointer-events:none}
@media (max-width:600px){
.szmap .lab-bz{font-size:15px}
.szmap .lab-ort{font-size:11px}
.szmap .lab-ort.r2{font-size:9.5px}
.szmap .lab-see{font-size:11px}
.szmap .lab-nb{font-size:12px}
.szmap .ort .hit{r:20}
.szmap .poi .hit{r:16}
.szmap .ort .dot{r:4.4}
.szmap .hitsee .hit{stroke-width:16}
}
@media (hover:hover){
nav.main a:hover{color:var(--kopf-ink)}
.btn:not(.primary,.accent,.ghost,.pruefung-abbrechen):hover{background:var(--panel-2)}
.btn.primary:hover{background:var(--btn);filter:brightness(1.15)}
.btn.pruefung-abbrechen:hover{background:var(--bad-bg)}
.block:hover{background:var(--panel-2)}
.block.pause:hover{background:transparent}
.opt:not(.sel,.ok,.bad,[disabled]):hover{background:var(--panel-2)}
.map-wrap .bezirk:hover{fill:var(--forest-soft)}
.bigbtn:hover{background:var(--panel-2)}
.map-wrap.ch .kanton:hover{fill:var(--forest-soft)}
.pol-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
}
/* Rechtliches (rechtliches.html, body.recht-seite): Satz wie Homepage /rechtliches/ – Newsreader-Fliesstext,
Abschnitte durch Linien statt Karten, Zwischentitel Public Sans 600 in Versalien */
.recht-seite nav.main{display:flex}
.recht-seite .recht{gap:0;max-width:44rem}
.recht-seite .recht>.panel{background:transparent;border:0;border-radius:0;box-shadow:none;padding:clamp(26px,4vw,40px) 0}
.recht-seite .recht>.panel+.panel{border-top:1px solid rgba(83,107,128,.34)}
.recht-seite .recht>.panel:first-child{padding-top:0}
.recht-seite .recht h1{margin-bottom:.6rem}
.recht-seite .recht h2{font-size:1.5rem;margin:0 0 1rem}
.recht-seite .recht h3{margin:1.6rem 0 .5rem;font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.recht-seite .recht :is(p,li){font-family:var(--serif);font-size:1.0625rem;line-height:1.65}
.recht-seite .recht p{margin:0 0 .9rem}
.recht-seite .recht ul{margin:0 0 .9rem;padding-left:1.2rem}
.recht-seite .recht .panel .panel{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:var(--r);margin:0 0 1.2rem}
.recht-seite .recht :is(td,th){font-family:var(--sans)}
/* Ihr Ort: Kanton und Gemeinde (Stufe 1, 16.09.2026) – nur bestehende Farbvariablen */
.ort-karte{display:flex;flex-direction:column;gap:10px;border-left:4px solid var(--brass)}
.ort-karte .eyebrow{margin:0}
.ort-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:1.125rem}
.ort-name b{font-weight:650}
.ort-name span{color:var(--ink-2)}
.ort-hinweis{border-left-color:var(--warn);background:var(--warn-bg)}
.ort-hinweis-text{font-weight:600;color:var(--ink)}
.ort-hinweis .ort-wahl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.ort-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:18px 28px;align-items:start}
.ort-block{display:flex;flex-direction:column;gap:8px;min-width:0}
.ort-block label{font-size:1rem}
.ort-combo{position:relative}
.ort-feld,.ort-select{width:100%;min-height:48px;padding:10px 13px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink);font-size:1.0625rem}
.ort-select[disabled]{opacity:.6}
.ort-liste{list-style:none;margin:4px 0 0;padding:4px;max-height:min(22rem,60vh);overflow-y:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px}
.ort-option{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 12px;min-height:44px;padding:8px 12px;border-radius:6px;cursor:pointer}
.ort-option-name{font-weight:600}
.ort-option-kt{font-size:1rem;color:var(--muted)}
.ort-option[aria-selected="true"]{background:var(--forest-soft);box-shadow:inset 0 0 0 2px var(--forest)}
@media (hover:hover){.ort-option:hover{background:var(--panel-2)}}
.ort-tabelle th{width:38%;font-weight:600;color:var(--ink-2)}
.ort-tabelle td{overflow-wrap:anywhere}
@media (max-width:480px){.ort-tabelle,.ort-tabelle tbody,.ort-tabelle tr,.ort-tabelle th,.ort-tabelle td{display:block;width:auto}.ort-tabelle th{border-bottom:0;padding-bottom:0}}
.ort-offen{font-weight:600;color:var(--warn)}
.ort-links{margin:0;padding-left:1.1rem}
.ort-links li{margin:0}
.ort-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.ort-zahlen h3,.ort-kanton h3{margin-top:18px}
.ort-datenstand,.ort-kanton .hinweis{display:block}
.ort-stand{max-width:66ch}
.kanton-info{padding:0}
.kanton-info.eigen{border-left:4px solid var(--brass)}
.kanton-info summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 12px;min-height:48px;padding:10px 16px;cursor:pointer}
.kanton-info summary{list-style:none}
.kanton-info summary::-webkit-details-marker{display:none}
.kanton-info-name::before{content:"▸ ";content:"▸ "/"";color:var(--muted)}
.kanton-info[open] .kanton-info-name::before{content:"▾ ";content:"▾ "/""}
.kanton-info-name{font-weight:650}
.kanton-info-kurz{font-size:1rem;color:var(--ink-2)}
.kanton-info-inhalt{padding:0 16px 14px}
@media (hover:hover){.kanton-info summary:hover{background:var(--panel-2)}}
/* Druck */
@media print{
@page{size:A4;margin:14mm 16mm}
:root{--ground:#FFFFFF;--panel:#FFFFFF;--paper:#FFFFFF;--shadow:none}
html,body{background:#FFFFFF!important;color:#0B1F33}
body{font-size:11pt;line-height:1.45;min-height:0}
.top,nav.main,.bottom,.toast,.pills,footer,.lw-fuss,.lightbox,.btn,.nicht-drucken,.act-head .back,.act-head .timer,.card-actions,.code-karte,.hinweis .wahl,.film .ctrl,.chk{display:none!important}
main{max-width:none;padding:0}
.view{animation:none;gap:6mm}
.panel,.check,.flash,.map-wrap,.szmap-wrap,.pol-card,.rev .item{box-shadow:none;break-inside:avoid}
a{text-decoration:none}
h1{font-size:18pt}h2{font-size:14pt}h3{font-size:12pt}
.lesson .sec p,.lesson .sec li{font-size:11.5pt;line-height:1.5;max-width:none}
.lesson .sec,.merke,figure,table{break-inside:avoid}
.code-zettel{display:block;width:95mm;margin:0 0 8mm;padding:6mm 7mm;border:1pt dashed #0B1F33;break-inside:avoid;color:#0B1F33}
body.druck-zettel>:not(.code-zettel){display:none!important}
.code-zettel :is(.code,.code-gross){margin:2mm 0;font-family:var(--mono);font-size:22pt;font-weight:600;letter-spacing:.12em;word-break:keep-all;white-space:nowrap}
.code-zettel p{font-size:10.5pt}
.karte-druck{grid-template-columns:1fr 1fr;height:60mm;margin:0;border:.5pt solid #768290;border-radius:0;break-inside:avoid}
.karte-druck+.karte-druck{border-top:0}
.karte-druck>*{min-height:0;padding:6mm 7mm;overflow:hidden}
.karte-druck>*+*{border-left:.75pt dashed #0B1F33}
.karte-druck .vorn{font-size:13pt}
.karte-druck .hinten{font-size:11pt}
.karte-druck small{font-size:10pt;color:#3A4B5C}
.druck-fuss{display:block;margin-top:8mm;padding-top:2mm;border-top:.75pt solid #C39A5B;font-size:10pt;line-height:1.4;color:#3A4B5C;break-inside:avoid}
.druck-liste li{break-inside:avoid;margin-bottom:3mm}
.ptag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ── Etappe A «Bilder zurück» (17.09.2026) ── */
/* Lektion: Kopfbild und Grafiken */
figure.hero-ill{margin:0 0 22px}
.hero-ill figcaption{font-size:1rem;color:var(--ink-2);padding:10px 14px;border-top:1px solid var(--line);line-height:1.45}
.thema-kopf{margin-bottom:16px}
.thema-kopf svg{max-height:260px}
.fig-block{display:flex;flex-direction:column;gap:4px;min-width:0}
.lesson figure.fig-block{padding:10px}
.fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-radius:6px}
/* kleinste Grafikschrift 13 Einheiten (viewBox 720): ab 776 px Breite ist sie mind. 14 px */
.fig-scroll svg{min-width:776px}
/* Themenliste: Illustration links, Ring rechts */
.thema.mit-bild,.thema:has(.thema-ring){flex-direction:row;align-items:center;gap:12px}
.thema-txt{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0}
.thema-ill{flex:none;width:88px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--lw-natur-himmel);border:1px solid var(--line)}
.thema-ill svg{width:100%;height:100%;display:block}
.thema-ring{flex:none;position:relative;width:52px;height:52px;display:grid;place-items:center}
.thema-ring .ring{position:absolute;inset:0;width:100%;height:100%}
.thema-ring-wert{position:relative;font-size:1rem;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.thema .thema-txt .bar{display:none}
.ring-bg{stroke:var(--line)}
.ring-v{stroke:var(--line-strong)}
.thema.gruen .ring-v{stroke:var(--ok)}.thema.gelb .ring-v{stroke:var(--warn)}.thema.rot .ring-v{stroke:var(--bad)}
@media (max-width:379px){.thema-ill{width:64px}}
/* Heute: Hauptknopf und Gewichtung */
.heute-kopf{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;overflow:hidden}
.heute-kopf.mit-bild{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.heute-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.heute-bild{order:-1;margin:-20px -20px 0;border-bottom:1px solid var(--line);background:var(--lw-natur-himmel)}
.heute-bild svg{width:100%;height:auto;display:block;max-height:220px}
.btn.jetzt{align-self:stretch;min-height:60px;font-size:1.25rem;margin-top:6px;border-radius:14px}
.jetzt-sub{color:var(--ink-2)}
.heute-zahlen{grid-template-columns:repeat(3,minmax(0,1fr))}
.heute-zahlen .counter{padding:10px 12px}
.heute-zahlen .counter b{font-size:1.375rem}
.heute-ueben{margin-top:8px}
.heute-themen .themen-liste{grid-template-columns:1fr}
@media (min-width:760px){
.heute-kopf.mit-bild{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
.heute-bild{order:0;margin:-20px -20px -20px 0;border-bottom:0;border-left:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.heute-bild svg{max-height:none;height:100%;min-height:300px}
.btn.jetzt{align-self:flex-start;padding:10px 34px}
}
/* Übungen als Einladung */
.spiele .bigbtn.spiel{flex-direction:column;align-items:flex-start;gap:10px;padding:18px;min-height:150px;position:relative}
.spiel .ic{width:56px;height:56px;border-radius:14px}
.spiel .ic svg{width:32px;height:32px}
.spiel b{font-size:1.125rem}
.spiel .spiel-los{position:absolute;top:18px;right:18px;font-size:1.25rem;font-weight:650;color:var(--ink-2)}
.spiel[data-ton="navy"] .ic{background:var(--forest-soft);color:var(--navy)}
.spiel[data-ton="bronze"] .ic{background:var(--accent-soft);color:var(--accent)}
.spiel[data-ton="himmel"] .ic{background:var(--lw-natur-himmel);color:var(--navy)}
.spiel[data-ton="fels"] .ic{background:var(--lw-natur-fels);color:var(--navy)}
.spiel[data-ton="gruen"] .ic{background:var(--lw-natur-gruen);color:var(--creme)}
@media (max-width:640px){.spiele .bigbtn.spiel{flex-direction:row;align-items:center;min-height:84px;padding:14px 44px 14px 14px}.spiel .spiel-los{top:50%;transform:translateY(-50%);right:16px}}
/* Rückmeldung richtig: Häkchen zeichnet sich */
.feedback svg.hak{width:28px;height:28px}
.hak circle,.hak path{stroke-dasharray:1;stroke-dashoffset:0}
.hak circle{animation:hakZug .45s ease-out both}
.hak path{animation:hakZug .35s ease-out .3s both}
.feedback.ok{animation:hakPuls .5s ease-out}
@keyframes hakZug{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hakPuls{from{transform:scale(.98)}60%{transform:scale(1.01)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.hak circle,.hak path,.feedback.ok{animation:none}}
/* Lernkarte: Themenbild auf der Vorderseite */
.flash-ill{align-self:center;width:min(220px,70%);aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--lw-natur-himmel);border:1px solid var(--line)}
.flash-ill svg{width:100%;height:100%;display:block}
/* Bilder mit Breite/Höhe: Seitenverhältnis halten */
img.foto[width][height]{height:auto}
@media print{.heute-bild,.flash-ill,.thema-ill{display:none}}
.thema-txt .n{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
.flash .topic{max-width:calc(100% - 150px);line-height:1.3}
@media (max-width:640px){.flash{padding-top:76px}}
.themen .themen-liste{grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr))}
/* Grafiken dürfen breiter als die Textspalte (720 px) sein, damit Grafiktext am Desktop ohne Wischen >= 14 px bleibt */
.lesson figure.fig-block{width:max(100%,min(820px,calc(100vw - 2*var(--gutter) - 16px)))}
/* ── Etappe B «Sage und Zeit» (17.09.2026): Geschichten, Fakt oder Sage?, Zeitstrahl, Tagesaufgabe. Kontraste: KONTRAST.md ── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Band über der Tafel: Farbe + Wort + Zeichen */
.gs-band{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:10px 14px;border-left:6px solid currentColor;font-size:1rem;line-height:1.4}
.gs-band svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gs-band b{font-size:1.0625rem;letter-spacing:.04em;text-transform:uppercase}
.gs-band .gs-band-erkl{color:var(--ink);flex:1 1 16rem}
.gs-sage{background:var(--warn-bg);color:var(--warn)}
.gs-beleg{background:var(--ok-bg);color:var(--ok)}
.gs-deutung{background:var(--forest-soft);color:var(--navy)}
.gs-fazit{background:var(--panel-2);color:var(--navy)}
.gs-legende{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.gs-legende .gs-band{border-radius:6px}
/* Tafel */
.gs-tafel{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gs-bild{background:var(--lw-natur-himmel);line-height:0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gs-bild svg{display:block;width:100%;height:auto}
.gs-tafel figcaption{padding:16px 18px 20px}
.gs-tafel figcaption h3{font-family:var(--serif);font-weight:500;font-size:1.375rem;margin-bottom:6px}
.gs-text{font-size:1.1875rem;line-height:1.55;max-width:60ch}
.gs-ansicht .gs-tafel{max-width:52rem;width:100%;margin-inline:auto}
.gs-steuerung{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;max-width:52rem;width:100%;margin:-8px auto 0}
.gs-steuerung .btn{min-width:120px}
.gs-steuerung .btn[disabled]{opacity:.45;cursor:default}
.gs-mitte{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.gs-zaehler{font-weight:600;white-space:nowrap}
.gs-punkte{display:flex;gap:6px}
.gs-punkte i{width:10px;height:10px;border-radius:50%;border:2px solid var(--line-strong);background:transparent}
.gs-punkte i.war{background:var(--line-strong)}
.gs-punkte i.an{background:var(--navy);border-color:var(--navy);transform:scale(1.2)}
.gs-tipp,.gs-quellen{max-width:52rem;width:100%;margin-inline:auto}
.gs-quellen summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.gs-quellen ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:6px}
@media (max-width:560px){
.gs-steuerung{grid-template-columns:1fr 1fr;margin-top:-10px}
.gs-mitte{grid-column:1 / -1;grid-row:1}
.gs-steuerung .btn{min-width:0;width:100%}
.gs-tafel figcaption{padding:14px 14px 16px}
.gs-text{font-size:1.125rem}
}
/* Übersicht Geschichten */
.gs-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:16px}
.gs-karte{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:inherit;text-decoration:none}
.gs-karte:hover{background:var(--panel-2)}
.gs-karte-bild{line-height:0;background:var(--lw-natur-himmel)}
.gs-karte-bild svg{width:100%;height:auto;display:block}
.gs-karte-txt{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.gs-karte-txt b{font-family:var(--serif);font-weight:500;font-size:1.375rem}
.gs-karte-stand{color:var(--muted);margin-top:4px}
/* Fakt oder Sage? */
.fs-karte .eyebrow{color:var(--muted)}
.fs-aussage{font-family:var(--serif);font-size:clamp(1.375rem,3.4vw,1.75rem);line-height:1.3;margin:10px 0 18px;text-wrap:balance}
.fs-aussage:focus{outline:none}
.fs-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fs-wahl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:112px;padding:14px;border:2px solid var(--line-strong);border-radius:14px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;text-align:center}
.fs-wahl b{font-size:1.5rem;letter-spacing:.02em}
.fs-wahl>span:last-child{color:var(--muted)}
.fs-zeichen svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fs-wahl:not([disabled]):hover{background:var(--panel-2)}
.fs-wahl[disabled]{cursor:default}
.fs-wahl.ok{border-color:var(--ok);background:var(--ok-bg);box-shadow:inset 0 0 0 2px var(--ok)}
.fs-wahl.bad{border-color:var(--bad);background:var(--bad-bg);box-shadow:inset 0 0 0 2px var(--bad)}
.fs-wahl[disabled]:not(.ok):not(.bad){opacity:.55}
.fs-rueck{margin-top:14px}
.fs-rueck .quelle{margin-top:6px}
.fs-rueckblick{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.fs-rueckblick li{padding:10px 12px;border-radius:8px;border-left:5px solid currentColor;background:var(--panel-2)}
.fs-rueckblick li.ok{color:var(--ok);background:var(--ok-bg)}
.fs-rueckblick li.bad{color:var(--bad);background:var(--bad-bg)}
.fs-rueckblick li b{margin-right:4px}
.fs-rueckblick li{color:var(--ink)}
.fs-rueckblick li.ok b{color:var(--ok)}.fs-rueckblick li.bad b{color:var(--bad)}
.fs-rueckblick li.ok{border-left-color:var(--ok)}.fs-rueckblick li.bad{border-left-color:var(--bad)}
/* Zeitstrahl */
.zs-feld h3{display:flex;gap:6px;align-items:center}
.zs-vorrat{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:10px;margin-top:10px;min-height:64px}
.zs-karte,.zs-platz{font:inherit;color:var(--ink);text-align:left;cursor:pointer;border-radius:10px;background:var(--panel)}
.zs-karte{display:flex;align-items:center;gap:10px;min-width:0;min-height:64px;padding:8px 12px;border:1px solid var(--line-strong);touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 1px 0 var(--line)}
.zs-karte:hover{background:var(--panel-2)}
.zs-karte.gewaehlt{border-color:var(--navy);background:var(--forest-soft);box-shadow:inset 0 0 0 2px var(--navy)}
.zs-sym{flex:none;width:40px;height:40px;border-radius:8px;background:var(--lw-natur-himmel);color:var(--navy);display:grid;place-items:center}
.zs-sym svg{width:30px;height:30px}
.zs-titel{font-weight:600;line-height:1.3;overflow-wrap:break-word;hyphens:auto;min-width:0}
.zs-strahl{list-style:none;margin:12px 0 0;padding:0 0 0 26px;display:grid;gap:10px;position:relative}
.zs-strahl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:4px;border-radius:2px;background:var(--brass)}
.zs-strahl li{position:relative}
.zs-strahl li::before{content:"";position:absolute;left:-23px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--panel);border:3px solid var(--navy)}
.zs-platz{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;padding:8px 12px;border:2px solid var(--line-strong);flex-wrap:wrap}
.zs-platz:not(.leer){touch-action:none;user-select:none;-webkit-user-select:none}
.zs-platz.leer{border-style:dashed;background:transparent;color:var(--muted)}
.zs-waehlt .zs-platz{border-color:var(--navy)}
.zs-waehlt .zs-platz.leer{background:var(--forest-soft);color:var(--ink)}
.zs-platz.ziel{background:var(--accent-soft);border-color:var(--accent)}
.zs-nr{flex:none;width:28px;height:28px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font-weight:700;color:var(--ink)}
.zs-belegt{display:flex;align-items:center;gap:10px;flex:1 1 12rem;min-width:0}
.zs-jahr{margin-left:auto;font-weight:700;font-size:1.25rem}
.zs-marke{font-weight:600;white-space:nowrap}
.zs-platz.ok{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.zs-platz.ok .zs-marke{color:var(--ok)}
.zs-platz.bad{border-style:solid;border-color:var(--bad);background:var(--bad-bg)}
.zs-platz.bad .zs-marke{color:var(--bad)}
.zs-platz[disabled]{cursor:default;opacity:1}
.zs-quelle{opacity:.35}
.zs-geist{position:fixed;z-index:80;pointer-events:none;width:13rem;transform:rotate(-2deg);box-shadow:0 8px 24px rgba(11,31,51,.25)}
.zs-fertig .zs-vorrat,.zs-fertig .zs-vorrat-titel{display:none}
.zs-loesung{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.zs-loesung li{display:grid;grid-template-columns:40px 4rem minmax(0,1fr);gap:10px;align-items:center}
.zs-loesung li>b{font-size:1.25rem}
@media (max-width:480px){.zs-vorrat{grid-template-columns:1fr;gap:8px}.zs-karte{min-height:56px}.zs-jahr{margin-left:38px}}
/* Tagesaufgabe (Heute) */
.tagesaufgabe{border-left:4px solid var(--brass)}
.tagesaufgabe.erledigt{border-left-color:var(--ok)}
.tages-kopf{display:flex;gap:14px;align-items:center}
.tages-ic{flex:none;width:52px;height:52px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.tages-ic svg{width:30px;height:30px}
.erledigt .tages-ic{background:var(--ok-bg);color:var(--ok)}
.tages-status{font-weight:400;color:var(--ink-2)}
.erledigt .tages-status,.tages-fertig{font-weight:600;color:var(--ok)}
.tages-fertig svg{width:22px;height:22px;vertical-align:-5px;color:var(--ok)}
@media (prefers-reduced-motion:reduce){.gs-punkte i.an{transform:none}.zs-geist{transform:none}}
@media print{.gs-steuerung,.gs-tipp,.fs-knoepfe{display:none}}
.score{flex-wrap:wrap;column-gap:10px}
.score b{white-space:nowrap}
/* ── Etappe C «Entdecken» (17.09.2026): Teile im Erstaufruf – Heute-Blickfang, Abzeichen, Mitteilung, Schwyz-Karte mit Komponente.
Karte, Album und Quiz selbst: app/entdecken.css (nachgeladen). */
.album-blick{position:relative;display:flex;gap:14px;align-items:center;padding-right:48px;text-decoration:none;color:inherit;border-left:4px solid var(--lw-natur-gruen)}
.album-blick:hover{border-color:var(--line-strong);border-left-color:var(--lw-natur-gruen)}
.album-blick-ic{flex:none;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--lw-natur-gruen);color:var(--creme)}
.album-blick-ic svg{width:32px;height:32px}
.album-blick-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.album-blick-txt>b{font-family:var(--serif);font-size:1.375rem;font-weight:500;line-height:1.2}
.album-blick-zahl{color:var(--ink-2)}
.album-punkte{display:grid;grid-template-columns:repeat(13,minmax(0,14px));gap:4px;margin-top:6px}
.album-punkte i{height:14px;border-radius:3px;border:1px solid var(--line-strong);background:var(--panel)}
.album-punkte i.an{background:var(--lw-natur-gruen);border-color:var(--lw-natur-gruen)}
.album-blick .spiel-los{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.25rem;font-weight:650;color:var(--ink-2)}
.medaille{width:48px;height:48px;flex:none;overflow:visible}
.medaille .m-scheibe{fill:var(--navy);stroke:var(--brass);stroke-width:2.5}
.medaille .m-innen{fill:none;stroke:var(--brass);stroke-width:1;opacity:.75}
.medaille .m-band{fill:var(--brass)}
.medaille .m-zeichen path{fill:none;stroke:var(--creme);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.medaille.aus .m-scheibe{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:4 3}
.medaille.aus .m-innen{display:none}
.medaille.aus .m-zeichen path{stroke:var(--muted)}
.abz-liste,.abz-themen{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.abz-liste{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.abz-liste .abz{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.abz-liste .abz.aus{border-style:dashed;background:var(--ground)}
.abz-liste .medaille{width:56px;height:56px;margin-top:2px}
.abz-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.abz-status{font-weight:600;color:var(--muted)}
.abz.an .abz-status{color:var(--ok)}
.abz-text{color:var(--ink-2)}
.abz-zwischen{margin-top:18px;font-size:1.0625rem;font-weight:650}
.abz-themen{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.abz-themen .abz{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow-wrap:anywhere;hyphens:manual}
.abz-themen .abz.aus{border-style:dashed;background:var(--ground)}
.abz-themen .medaille{width:40px;height:40px;grid-row:1/3}
.abz-mini{color:var(--muted)}
.abz-themen .abz.an .abz-mini{color:var(--ok);font-weight:600}
.toast.abz-meldung{display:flex;align-items:center;gap:12px;width:max-content;max-width:min(560px,calc(100% - 32px));padding:10px 18px 10px 12px;background:var(--navy);color:var(--creme);border:1px solid var(--brass)}
.toast.abz-meldung b{display:block}
.toast.abz-meldung .medaille{width:40px;height:40px}
.szmap-wrap.karte{background:none;border:0;border-radius:0;overflow:visible}
.szmap.mit-komponente .credit{display:none}
.szmap .lab-skala{fill:var(--map-ink-2)}
.szmap-quelle{margin:0}
/* top folgt der Kopfhoehe (--kf-kopf, Etappe F): mit dem festen Wert 76 px rutschte das
Infofeld ab 861 px unter das klebende Band (Fable-Abnahme F, Befund 1). */
@media (min-width:861px){.sz-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}.sz-grid>.map-info{position:sticky;top:calc(var(--kf-kopf) + 12px)}}
@media (max-width:860px){.sz-grid{display:flex;flex-direction:column;gap:14px}}
@media (prefers-reduced-motion:reduce){.toast.abz-meldung{transition:none}}
.map-input{min-height:48px;padding:8px 12px;font-size:1.0625rem;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--ink)}
@media (max-width:480px){.abz-themen{grid-template-columns:1fr}}
/* Testphase (Freischaltung 17.09.2026) */
.etikett-test{display:inline-block;margin-right:8px;padding:0 8px;border:1px solid var(--brass,#C39A5B);border-radius:999px;font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.04em;line-height:1.5;color:var(--ink,#0B1F33);vertical-align:baseline}
.fuss-test{max-width:var(--breite);margin:0 auto;padding:0 var(--gutter) 18px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.fuss-test>span{display:block;max-width:66ch}
.fuss-test a{display:inline-block;min-height:44px;line-height:44px}
/* Kopf, Etappe F (17.09.2026, Befund Marcel: drei Navy-Zonen, rund 28 Prozent der
Bildschirmhöhe, «Lernwelt» doppelt, Relief zu gross und zu kontraststark).
Ziel: EINE Navy-Zone, Relief als ruhiger Hintergrund (vollständig, «contain», unten
bündig auf der Naht, gedämpft), Text links auf freiem Navy, Kopf samt Naht ≤ 150 px
(Handy) bzw. ≤ 180 px (Desktop). Die klebende Navigation bleibt: Handy untere Leiste,
Desktop Kopfzeile. Ziele ≥ 44 px, Bildschirmtext ≥ 16 px (R6).
DÄMPFUNG: relief-voll.webp und relief-minimal.webp sind deckende Bilder; ihr Grund ist
#0B1E33 und damit praktisch das Navy der Fläche (#0B1F33). Eine eigene Ebene mit
opacity dämpft deshalb nur die Bronzestriche, nicht den Grund – kein Aufhellen, keine
Kante. Deshalb liegt das Relief in einem ::after und nicht im background der Fläche. */
/* A «EIN BAND»: Kopfzeile und Kopfband sind eine einzige klebende Navy-Fläche.
Zeile 1 (44 px): «← szudarek.com» links, Navigation (ab 641 px) und Sync/Code rechts.
Zeile 2: Wortmarke «Lernwelt Einbürgerung», auf dem Desktop dazu die Unterzeile.
Das Relief liegt NUR hinter Zeile 2 (top:var(--kf-z1)); so steht die Bedienzeile nie
auf dem Bild, und der Text links bleibt auf freiem Navy. Gemessene Höhe siehe
AENDERUNGEN_F_2026-09-17.md. Auf Heute/Einstieg trägt das Band den Titel, darum ist
das h1 der Ansicht dort nur noch für Vorlesegeräte da (kein doppeltes «Lernwelt»). */
/* WORTMARKE IN GRUNDSEITEN-GROESSE, Etappe F2 (17.09.2026, Auftrag Marcel).
Gemessen auf szudarek.com (assets/style.css, .name): Newsreader 500, Laufweite -0,01em,
Zeilenhoehe 1,05, Groesse clamp(1.9rem,6.6vw,2.5rem) – das sind 30,4 px von 320 bis 460 px
(die Untergrenze traegt) und 40 px ab 606 px (die Obergrenze traegt), bei 375 / 768 / 1280 px
also 30,4 / 40 / 40 px. Die Lernwelt setzt dieselbe Schrift in derselben Groesse.
Unterschiedlich ist die Laenge: «Marcel Szudarek» misst bei 30,4 px 213 px, «Lernwelt
Einbuergerung» 277 px. Einzeilig bliebe bei 375 px zwischen Rand und Relief kein Platz
(Spalte 337 px), und Kopftext darf nie auf dem Bild stehen. Deshalb steht die Wortmarke
unter 641 px ZWEIZEILIG («Lernwelt» / «Einbuergerung», Umbruch
) und
ab 641 px einzeilig – die Schriftgroesse bleibt in beiden Faellen die der Grundseite.
Zeile 2 ist genau so hoch wie ihr Satz: 2 × 1,05 × Schriftgrad + 8 px Fussluft; ab 641 px
traegt sie eine Zeile und behaelt die 72 px der Etappe F.
Kopfhoehe samt Naht: 110 px (320) · 120 px (375) · 122 px (390) · 132 px (444–640) ·
120 px (ab 641). Vorgabe Marcel: Handy hoechstens ~132 px, Desktop hoechstens ~150 px.
Unter 444 px traegt 8,1vw die Groesse (= 30,4 px bei 375 px, wie die Grundseite); bei 320 px
sind das 25,9 px statt 30,4 px – nur so bleibt neben der zweiten Zeile Platz fuer das Relief. */
/* Masse des Bandes stehen auf :root, weil html sie fuer scroll-padding-top braucht. */
:root{--kf-z1:44px;--kf-marke:clamp(1.5rem,min(8.1vw,max(1.9rem,6.6vw)),2.25rem);--kf-z2:calc(2.1 * var(--kf-marke) + 8px);
--kf-naht:4px;--kf-kopf:calc(var(--kf-z1) + var(--kf-z2) + var(--kf-naht))}
@media (min-width:641px){:root{--kf-marke:2.5rem;--kf-z2:72px}}
/* Das Band klebt oben. Ohne scroll-padding-top schiebt jedes scrollIntoView (Fokus nach
Routenwechsel, Sprungmarken, Kartenfeld) sein Ziel unter das Band. Mit der Angabe haelt
der Browser den Kopf frei. Geprueft am Bildwechsel der Bildgeschichte (shots_b). */
html{scroll-padding-top:var(--kf-kopf)}
/* RELIEF AN DER INHALTSKANTE, Etappe F2 (17.09.2026, Auftrag Marcel, nachgeschaerft am
selben Tag): Das Bild lief bis zur rechten Fensterkante und stand damit weiter rechts als
jeder Inhalt. Es endet jetzt genau dort, wo der Lerninhalt endet – an der SICHTBAREN rechten
Kante der Inhaltskarten (.heute-kopf, .panel, a.thema), nicht an der Kante der Spalte.
Das ist die Inhaltsspalte (--breite = 60rem + 2 × Rand, mittig) MINUS ihres Randes:
right = max(0, (100% - --breite)/2) + --gutter. Bei 1280 px sind das 1120 px, bei 375 px
356 px. Rechts daneben bleibt Navy.
Die Breite des Bildes bleibt an die Hoehe von Zeile 2 gekoppelt (Seitenverhaeltnis 1600:638
= 2,508), ist aber auf 37 Prozent der Bandbreite gedeckelt: auf schmalen Schirmen stuende es
sonst unter der zweizeiligen Wortmarke. Weil das Bild um --gutter nach links rueckt, ist der
Deckel enger als in der ersten Fassung (dort 42 Prozent). Der Deckel macht das Bild nur
schmaler und damit niedriger («contain», nichts wird beschnitten); unten bleibt es durch
«right bottom» buendig auf der Naht, die Luft entsteht oben als Himmel – dieselbe Regel wie
auf der Grundseite. */
.top.kopf-a{position:sticky;top:0;overflow:hidden;--kf-bild:min(calc(var(--kf-z2) * 2.508),37%)}
.top.kopf-a::after{content:"";position:absolute;top:var(--kf-z1);bottom:0;width:var(--kf-bild);
right:calc(max(0px,(100% - var(--breite)) / 2) + var(--gutter));
opacity:.7;pointer-events:none;background:url("/assets/relief-voll.webp?v=3") right bottom / contain no-repeat}
.kopf-a .in{position:relative;z-index:1;height:auto;display:block;padding:0 var(--gutter)}
.kopf-z1{display:flex;align-items:center;gap:10px;min-height:var(--kf-z1)}
.kopf-z2{display:flex;align-items:baseline;gap:14px;min-height:var(--kf-z2);padding-bottom:8px}
.kopf-a .heimweg-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:auto;
color:var(--kopf-ink-2);text-decoration:none;font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.kopf-a .heimweg-link:hover{color:var(--kopf-ink);text-decoration:underline;text-underline-offset:.2em}
.kopf-a .brand{margin-right:0;font-size:var(--kf-marke);line-height:1.05}
/* Der Umbruch der Wortmarke steht im Markup (
) und ruht ab 641 px.
Das Leerzeichen steht VOR dem Umbruch: so lesen Vorlesegeraete und die einzeilige Fassung
«Lernwelt Einbuergerung», und am Zeilenende faellt es weg. */
@media (min-width:641px){.kopf-a .marke-um{display:none}}
.kopf-a .kopf-unter{display:none;font-family:var(--serif);font-weight:400;font-size:1.0625rem;line-height:1.3;color:var(--kopf-ink-2);white-space:nowrap}
.kopf-a nav.main{margin-left:0}
/* Fokusring nach innen: .top hat overflow:hidden, sonst schneidet die Bandkante den Ring
der Bedienelemente in Zeile 1 oben ab (Fable-Abnahme F, Befund 3). */
.kopf-z1 :focus-visible{outline-offset:-4px}
/* 641 bis 719 px: Hier steht die Navigation in Versalien neben dem Heimweg; mit dem Wort
«szudarek.com» lief sie über und «LOGBUCH» wurde abgeschnitten (Fable-Abnahme F, Befund 2).
In diesem Fenster bleibt der Pfeil als Taste (44 px). Das Wort ruht nur für das Auge, es
bleibt im zugänglichen Namen «Zurück zu szudarek.com». Unter 641 px steht die Navigation
in der unteren Leiste, dort ist Platz für das Wort. */
@media (min-width:641px) and (max-width:719px){
.kopf-a .heimweg-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kopf-a .heimweg-link{min-width:44px;justify-content:center;gap:0}
}
/* Statuswort erst ab 720 px: in Zeile 1 steht links «← szudarek.com» statt der kurzen
Wortmarke; mit dem Wort «nur auf diesem Gerät» liefe die Zeile bei 390 px über. Form und
Farbe des Symbols bleiben, der Wortlaut bleibt für Vorlesegeräte. */
@media (max-width:719px){
.kopf-a .sync-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kopf-a .sync{min-width:24px;justify-content:center}
}
.kopf-a .pills{margin-left:0}
@media (min-width:900px){
.kopf-a .kopf-unter{display:block}
/* 900 bis 1011 px: Die Unterzeile steht hier schon im Band, die Inhaltsspalte ist aber noch
so breit wie das Fenster (--breite = 1012 px). Wortmarke (396 px) und Unterzeile (294 px)
reichen bei 900 px bis 729 px; das volle Relief (181 px) begaenne bei 719 px und laege damit
unter der Unterzeile. Deshalb ist es hier auf den Rest der Spalte gedeckelt (110 px bei
900 px); ab 971 px traegt wieder das volle Mass von 181 px. Unten bleibt es buendig,
beschnitten wird nichts – der Deckel macht das Bild nur kleiner. */
.top.kopf-a{--kf-bild:min(calc(var(--kf-z2) * 2.508),calc(100% - 790px))}
/* Unterzeile steht ab hier im Band – im Inhalt entfaellt sie, damit sie nicht doppelt steht */
body:not(.druckansicht) :is(#main .heute-text, #main .view.einstieg>.lead)>:is(.rule,.eyebrow){display:none}
}
@media (max-width:640px){
.kopf-a .pills{margin-left:0}
}
/* Die Sonderregel unter 360 px aus Etappe F (Zeile 2 auf 52 px, Wortmarke bis 16 px) ist
mit F2 entfallen: Zeile 2 folgt jetzt von selbst dem Schriftgrad (2,1 × Grad + 8 px), und
der Grad folgt unter 444 px der Fensterbreite (8,1vw). Bei 320 px sind das 25,9 px, Zeile 2
62 px, Kopf 110 px; das Relief ist dort auf 37 Prozent gedeckelt (118 px) und beginnt bei
184 px, die zweite Zeile «Einbürgerung» endet bei 169 px – 15 px freies Navy dazwischen. */
@supports selector(:has(a)){
@media screen{
body:not(.druckansicht) :is(#main .heute-text, #main .view.einstieg>.lead)>h1{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
}
@media print{.top.kopf-a::after{display:none!important}.kopf-a .heimweg-link{display:none!important}}
/* ── Etappe G «Kurztest und Rangliste» (18.09.2026) ─────────────────────────
Im Erstaufruf stehen nur die Karte auf «Heute»/Einstieg und die Stile der öffentlichen
Ansichten #/kurztest und #/rangliste; Fragen und Code liegen im Modul lw-kurztest.js. */
.kurztest-karte{border-left:4px solid var(--brass)}
.kt-zeile{display:flex;gap:14px;align-items:center}
.kt-ic{flex:none;width:52px;height:52px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.kt-ic svg{width:30px;height:30px}
.kurztest-karte h2{margin:0}
.kurztest-karte .muted{font-weight:400}
.view.kurztest .kt-kopf{margin-bottom:6px}
.kt-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.kt-liste li{display:flex;gap:10px;align-items:flex-start}
.kt-liste li svg{flex:none;width:24px;height:24px;color:var(--accent);margin-top:2px}
.kt-start{min-width:13rem}
.kt-ergebnis{border-left:4px solid var(--brass)}
.kt-punkte{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kt-punkte b{font-family:var(--serif);font-size:3rem;font-weight:500;line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums}
.kt-punkte span{color:var(--muted)}
.kt-satz{margin-top:6px;font-size:1.125rem}
.kt-rang{border-left:4px solid var(--slate)}
.kt-form{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.kt-label{font-weight:600}
.kt-form input[type=text],.view.kurztest input[type=password]{width:100%;max-width:22rem;min-height:48px;padding:8px 14px;font-family:var(--sans);font-size:1.0625rem;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink)}
.kt-kanton{display:flex;gap:10px;align-items:center;min-height:44px;margin-top:8px;cursor:pointer}
.kt-check{flex:none;width:24px;height:24px}
.kt-melden{margin-top:10px}
.kt-melden.fehler{color:var(--bad);font-weight:600}
.kt-erklaer{margin-bottom:6px}
.kt-rangliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kt-rangliste li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;padding:10px 8px;border-bottom:1px solid var(--line)}
.kt-rangliste li:last-child{border-bottom:0}
.kt-platz{flex:none;min-width:2.5ch;text-align:right;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.kt-mitte{flex:1 1 8rem;min-width:8rem;display:flex;flex-direction:column;gap:2px}
.kt-n{font-weight:600;overflow-wrap:anywhere}
.kt-meta{font-size:1rem;color:var(--ink-2)}
.kt-ich{font-size:1rem;font-weight:600;color:var(--accent)}
.kt-p{flex:none;display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.kt-p b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.kt-p>span{font-size:1rem;color:var(--muted)}
.kt-rangliste li.eigen{background:var(--accent-soft);border-radius:8px;border-bottom-color:transparent}
.kt-rangliste li.eigen .kt-n{color:var(--accent)}
.kt-tun{flex:none;margin-left:auto}
.kt-fuss{margin-top:18px}
/* Kurztest und Rangliste laufen ohne Zugangscode: die Sync-Anzeige des Kopfes entfaellt dort */
body.ohne-sync #sync{display:none}