/* Rahmen V2, gebündelt von tools/css_buendeln.py, nicht von Hand ändern. Quellen: css/tokens.css 43a8b3b2d4; css/base.css 8cd11e3b32; css/komponenten.css ce4ef01dac; css/rahmen.css d4b296b3dc */
/* ===== css/tokens.css ===== */
/* Designsystem einbuergerungsquiz.ch, Stand 11.11.2026
   Tokens der Farbwelt a «Granit und Alpenrot» (von Kai bestätigt, final). Herkunft: V2 «Taschentrainer», assets/css/style.css.
   Nur Variablen. Keine Regeln für Elemente. Reihenfolge beim Laden: tokens.css, base.css, komponenten.css (drucken.css mit media="print").

   Die Rollen der Farben (Kurzfassung, ganz in DESIGNSYSTEM.md):
   Papier  = Grund zum Lesen.          Granit = Übungsraum (wo die Lernkarte liegt), höchstens eine Fläche je Seite plus Fuss.
   Tinte   = Text, Links, Rahmen.      Alpenrot = deine Handlung und deine Wahl: Hauptknopf, gewählter Kanton, Logo-Karte, zweite Druckfarbe.
   Grün    = richtig, Ziegel = falsch, Leuchtstift-Gelb = Merksatz und Textauswahl. Sonst nichts. */

:root{
  /* ---------- Farbe: Flächen ---------- */
  --grund:#F3EFE7;          /* Papier, Seitengrund */
  --grund-2:#E7E1D6;        /* Papier dunkler: Balkenspur, Leerstellen, Info-Hinweis */
  --karte:#FFFFFF;          /* Lernkarte, Felder, Tabellenkopf hell */
  --flaeche:#2C3034;        /* Granit */
  --tief:#1E2124;           /* Granit tief, nur Fusszeile */

  /* ---------- Farbe: Schrift ---------- */
  --ink:#212529;            /* 13.5:1 auf Papier */
  --ink-2:#474C52;          /* 7.6:1 auf Papier, Fliesstext zweiter Ordnung */
  --ink-3:#5B6066;          /* 5.5:1 auf Papier, 4.9:1 auf --grund-2, Metazeilen */
  --f-ink:#F3EFE7;          /* auf Granit, 11.6:1 */
  --f-ink-2:#C9C5BD;        /* auf Granit, 7.7:1 */
  --tief-ink-2:#B9B5AE;     /* auf Granit tief, 7.9:1 */

  /* ---------- Farbe: Handlung (Alpenrot, eine Rolle) ---------- */
  --akzent:#BD271E;         /* Weiss darauf 6.1:1 */
  --akzent-ink:#FFFFFF;
  --akzent-hover:#9C1F17;   /* Weiss darauf 8.0:1 */
  --akzent-hell:#E0463A;    /* nur Grafik auf Granit (3.2:1), nie Schrift */

  /* Heller Knopf auf Granit */
  --hk:#F3EFE7; --hk-ink:#212529; --hk-hover:#FFFFFF;

  /* ---------- Farbe: Lernzustände ---------- */
  --richtig:#9AD6AE; --richtig-ink:#0B3A22;      /* 7.7:1 */
  --falsch:#F3C3B7;  --falsch-ink:#6A1A10;       /* 7.5:1; Fehler im Formular sind Ziegel, nie Alpenrot */
  --merk:#F5D86F;                                  /* Leuchtstift, Tinte darauf 11:1 */

  /* ---------- Farbe: Zustände (Hinweise, Marken). Fläche immer --grund-2, der Zustand steht nur im Zeichen ----------
     Mint- und Rosaflächen bleiben der Antwort vorbehalten (Lernkarte, Simulationsraster, Fehlerliste). */
  --zustand-info:#212529;      /* 11.9:1 auf --grund-2 */
  --zustand-erfolg:#0B3A22;    /*  9.8:1 */
  --zustand-warnung:#6B4A00;   /*  6.2:1, Bernstein-Tinte; auf Papier 7.0:1 */
  --zustand-fehler:#6A1A10;    /*  9.1:1 */

  /* ---------- Farbe: Linolschnitte (zwei Druckfarben als Masken) ---------- */
  --illu-ink-h:#2C3034; --illu-rot-h:#BD271E;    /* auf Papier */
  --illu-ink-f:#E9E3D8; --illu-rot-f:#E0463A;    /* auf Granit */

  /* ---------- Farbe: Kantonskarte ---------- */
  --karte-fill:#DED6C8; --karte-hover:#CCC2B1; --karte-aktiv:#BD271E; /* aktiv zu Fläche 4.2:1 */

  /* ---------- Farbe: Logo (Inline-SVG, Karten über Variablen) ---------- */
  --logo-f-frage:#F3EFE7; --logo-f-antwort:#E0463A;   /* auf Granit */
  --logo-h-frage:#212529; --logo-h-antwort:#BD271E;   /* auf Papier */

  /* ---------- Linien ---------- */
  --linie:color-mix(in srgb,var(--ink) 15%,transparent);     /* Trennlinie, rein dekorativ */
  --linie-stark:var(--ink);                                    /* 2px-Regel über Antwortblöcken, Tarifzeilen */
  --f-linie:color-mix(in srgb,var(--f-ink) 30%,transparent);
  --rand-feld:#6E7379;      /* Feldrahmen, 4.8:1 auf Weiss (WCAG 1.4.11) */

  /* ---------- Schrift ---------- */
  --schrift-titel:"Gabarito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-text:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Skala: Handy zuerst, mit clamp bis Desktop. Gabarito für h1 bis h4 und Zahlen, Lexend für alles Lesbare. */
  --text-h1:clamp(30px,7.4vw,60px);
  --text-h2:clamp(26px,5.6vw,44px);
  --text-h3:clamp(21px,4.4vw,30px);
  --text-h4:19px;                       /* auch Zwischentitel im Fliesstext, Kantonsblatt ohne Zahl */
  --text-21:21px;                       /* Kartentitel: Anriss, Lösung, Satzwahl, Sheet-Titel */
  --text-zahl:clamp(88px,26vw,148px);   /* die eine Zahl, die führt (Kantonsblatt, Ergebnis) */
  --text-gross:17px;
  --text-15:15px;                       /* Bedienelemente: Navigation, Menüzeilen, Tabellen, Hinweise */
  --text:16px;
  --text-klein:14px;
  --text-mini:13px;                     /* Untergrenze, nur Metazeilen */
  --text-artikel:17px;                  /* Fliesstext im Ratgeber, Desktop 18px */
  --zeile:1.55; --zeile-artikel:1.68; --zeile-titel:1.08;

  /* ---------- Abstände (4er-Raster) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:80px; --s-10:112px;
  --gut:16px;                           /* Seitenrand, ab 720px 32px */
  --abschnitt-oben:64px; --abschnitt-unten:72px; --abschnitt-gross:80px;

  /* ---------- Breiten ---------- */
  --breite-seite:1240px;                /* Rahmen von Kopf, Fuss, Seiten */
  --breite-text:40rem;                  /* Fliesstext im Artikel, Lexend etwa 66 Zeichen */
  --breite-mittel:880px;                /* Werkzeuge, Dashboard-Spalte */
  --breite-schmal:460px;                /* Anmelden, Registrieren, Lernkarte */

  /* ---------- Radien: Form nach Rolle ---------- */
  --r-marke:2px;   /* Marken, Kantonskürzel, Rundenmarken */
  --r-bild:3px;    /* Poster, Fotos */
  --r-feld:4px;    /* Eingabefelder, Zeichenquadrate */
  --r-knopf:6px;   /* Knöpfe, Antworten, Popover */
  --r-karte:12px;  /* nur Lernkarte, Sheet, Buch-Umschlag (Ecke) */

  /* ---------- Schatten: neutral, nur Lernkarte und was über ihr liegt ---------- */
  --schatten-karte:0 1px 0 rgba(0,0,0,.05),0 22px 34px -22px rgba(0,0,0,.55),0 4px 10px -6px rgba(0,0,0,.25);
  --schatten-pop:0 18px 40px -16px rgba(0,0,0,.45);
  --schatten-buch:0 22px 30px -18px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.18);
  --schatten-kopf:0 1px 0 var(--linie);

  /* ---------- Masse für Bedienung ---------- */
  --kopf-hoehe:60px;
  --knopf-hoehe:52px; --knopf-hoehe-klein:44px;
  --ziel-min:44px;                      /* kleinstes Tippziel */
  --feld-hoehe:52px;

  /* ---------- Bewegung: nur bei Zustandswechsel ---------- */
  --ease:cubic-bezier(.2,.75,.25,1);
  --ease-raus:cubic-bezier(.3,.6,.3,1);
  --dauer-kurz:.12s;     /* Hover, Farbe */
  --dauer-mittel:.2s;    /* Kopfzeile, Dock, Sheet */
  --dauer-karte:.55s;    /* Stapel nachrücken */
  --dauer-flip:.6s;      /* Karte umdrehen */

  /* ---------- Ebenen ---------- */
  --z-karte:1; --z-dock:40; --z-kopf:50; --z-sheet:70; --z-skip:100;

  color-scheme:light;
}

/* Abgeleitete Rollen, die sich je Fläche ändern dürfen */
:root{
  --illu-ink:var(--illu-ink-h); --illu-rot:var(--illu-rot-h);
  --fokus:var(--ink); --link:var(--ink);
}

@media (min-width:720px){
  :root{--gut:32px;--text-artikel:18px}
}

/* ===== css/base.css ===== */
/* Designsystem einbuergerungsquiz.ch: Grundlage. Schriften, Reset, Typografie, Links, Fokus, Auswahl,
   Formular- und Tabellen-Grundformen, Fliesstext für Ratgeber und Rechtstexte. Braucht tokens.css. */

/* ---------- Schriften: selbst gehostet, OFL. latin deckt de/fr/it/es/pt/en ganz ab (geprüft, siehe DESIGNSYSTEM.md),
   latin-ext lädt der Browser nur, wenn ein Zeichen daraus vorkommt (Namen wie Ayşe, Đorđević, Krasniqi im Konto) ---------- */
@font-face{font-family:"Gabarito";src:url(../assets/fonts/gabarito-latin.woff2) format("woff2");font-weight:400 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Gabarito";src:url(../assets/fonts/gabarito-latin-ext.woff2) format("woff2");font-weight:400 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lexend";src:url(../assets/fonts/lexend-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lexend";src:url(../assets/fonts/lexend-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-hoehe) + var(--s-3));background:var(--grund);hanging-punctuation:first}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--grund);color:var(--ink);font:400 var(--text)/var(--zeile) var(--schrift-text);
  overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;font-kerning:normal;caret-color:var(--ink)}
body>main{flex:1 0 auto}
img,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
iframe{border:0;display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--schrift-titel);font-weight:700;letter-spacing:-.015em;line-height:var(--zeile-titel);margin:0;text-wrap:balance}
h1{font-size:var(--text-h1);letter-spacing:-.02em;line-height:1.04}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3);line-height:1.15}
h4{font-size:var(--text-h4);line-height:1.25;letter-spacing:-.005em}
p,ul,ol,dl,dd,figure,blockquote,pre{margin:0}
p,li,dd,figcaption{text-wrap:pretty}
:where(ul[class],ol[class]){list-style:none;padding:0}   /* ohne Gewicht: jede Klasse darf Abstand und Liste selbst setzen */
abbr[title]{text-decoration:none}
b,strong{font-weight:700}
small{font-size:var(--text-klein)}
hr{border:0;border-top:1px solid var(--linie);margin:var(--s-6) 0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:target{scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-4))}

/* ---------- Links: Tinte, unterstrichen. Nie Rot. ---------- */
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
a[href^="http"]:not([href*="einbuergerungsquiz.ch"])::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.2em;vertical-align:.02em;background:currentColor;
  -webkit-mask:var(--ico-extern) center/contain no-repeat;mask:var(--ico-extern) center/contain no-repeat}
.ohne-extern::after{content:none!important}

/* ---------- Fokus, Auswahl, Caret: aus der Palette, nie Browser-Standard ---------- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:2px}
::selection{background:var(--merk);color:var(--ink)}
::placeholder{color:var(--ink-3);opacity:1}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 30%,transparent);border-radius:var(--r-feld);border:2px solid var(--grund)}
::-webkit-scrollbar-track{background:transparent}
html{scrollbar-color:color-mix(in srgb,var(--ink) 30%,transparent) transparent}

/* Zeichen als Masken (eine Quelle, Farbe aus currentColor). Pfeil, Haken, Kreuz, extern, Schloss, Info, Warnung. */
:root{
  --ico-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'/%3E%3C/svg%3E");
  --ico-zurueck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 8H3M7 3.5 2.5 8 7 12.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='square'/%3E%3C/svg%3E");
  --ico-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10.5 3.6 3.4L15.5 6' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-kreuz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 5.5 9 9m0-9-9 9' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-extern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2H10v5.5M10 2 2.5 9.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --ico-schloss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='2.5' y='7' width='11' height='8' rx='1.5'/%3E%3C/svg%3E");
  --ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='3.6' r='1.5'/%3E%3Cpath d='M6 7h3v6h1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --ico-achtung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v8' stroke='%23000' stroke-width='2.4'/%3E%3Ccircle cx='8' cy='13.4' r='1.5'/%3E%3C/svg%3E");
  --ico-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5v11L13.5 8Z'/%3E%3C/svg%3E");
  --ico-runter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Zeichen im Quadrat (Hinweise, Urteil, Fehler, Check): Quadrat mit ausgeschnittenem Zeichen */
  --q-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cmask id='m'%3E%3Crect width='26' height='26' fill='white'/%3E%3Cpath d='m7.5 13.5 3.6 3.4L18.5 9' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='26' height='26' rx='4' mask='url(%23m)'/%3E%3C/svg%3E");
  --q-kreuz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cmask id='m'%3E%3Crect width='26' height='26' fill='white'/%3E%3Cpath d='m8.5 8.5 9 9m0-9-9 9' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/mask%3E%3Crect width='26' height='26' rx='4' mask='url(%23m)'/%3E%3C/svg%3E");
  --q-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cmask id='m'%3E%3Crect width='26' height='26' fill='white'/%3E%3Ccircle cx='13' cy='7.6' r='1.7' fill='black'/%3E%3Cpath d='M10.5 11.5h3.2v7h1.8' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/mask%3E%3Crect width='26' height='26' rx='4' mask='url(%23m)'/%3E%3C/svg%3E");
  --q-achtung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cmask id='m'%3E%3Crect width='26' height='26' fill='white'/%3E%3Cpath d='M13 6.5v8.5' stroke='black' stroke-width='2.6'/%3E%3Ccircle cx='13' cy='19' r='1.7' fill='black'/%3E%3C/mask%3E%3Crect width='26' height='26' rx='4' mask='url(%23m)'/%3E%3C/svg%3E");
  --q-schloss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cmask id='m'%3E%3Crect width='26' height='26' fill='white'/%3E%3Cpath d='M10 12v-2.2a3 3 0 0 1 6 0V12' fill='none' stroke='black' stroke-width='1.8'/%3E%3Crect x='8' y='12' width='10' height='7.5' rx='1.2' fill='black'/%3E%3C/mask%3E%3Crect width='26' height='26' rx='4' mask='url(%23m)'/%3E%3C/svg%3E");
}

/* ---------- Hilfsklassen (wenige, bewusst) ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(var(--breite-seite),100% - 2*var(--gut));margin-inline:auto}
.wrap--mittel{width:min(var(--breite-mittel),100% - 2*var(--gut))}
.wrap--text{width:min(var(--breite-text),100% - 2*var(--gut))}
.wrap--schmal{width:min(var(--breite-schmal),100% - 2*var(--gut))}
.zahl{font-variant-numeric:tabular-nums;white-space:nowrap}
.nowrap{white-space:nowrap}

/* Sprung zum Inhalt */
.skip{position:absolute;left:12px;top:-80px;z-index:var(--z-skip);background:var(--merk);color:var(--ink);padding:var(--s-3) var(--s-4);font-weight:600;text-decoration:none;border-radius:var(--r-feld)}
.skip:focus{top:12px}

/* ---------- Formular-Grundformen (Komponente .feld in komponenten.css) ---------- */
input,select,textarea{accent-color:var(--ink)}
input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],input[type="url"],select,textarea{
  width:100%;min-height:var(--feld-hoehe);padding:var(--s-3) var(--s-4);background:var(--karte);color:var(--ink);border:1.5px solid var(--rand-feld);border-radius:var(--r-feld);
  font-size:var(--text);line-height:1.3;transition:border-color var(--dauer-kurz),box-shadow var(--dauer-kurz)}
textarea{min-height:120px;resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:var(--s-7);cursor:pointer;
  background-image:var(--ico-runter);background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
input:disabled,select:disabled,textarea:disabled{background:var(--grund-2);color:var(--ink-3);border-color:color-mix(in srgb,var(--ink) 25%,transparent);cursor:not-allowed}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
label{cursor:pointer}

/* ---------- Tabellen-Grundform (Komponente .tabelle in komponenten.css) ---------- */
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
caption{text-align:left;caption-side:top}
th,td{text-align:left;vertical-align:top;padding:var(--s-3) var(--s-3) var(--s-3) 0;border-bottom:1px solid var(--linie)}
th{font-weight:600}
thead th{font-size:var(--text-klein);color:var(--ink-2);border-bottom:2px solid var(--ink);vertical-align:bottom}
td.zahl,th.zahl{text-align:right;padding-right:0}

/* ---------- Fliesstext: Ratgeber, Kantonsseiten, Rechtstexte, FAQ-Antworten ----------
   Eine Klasse am Container, darin rohes HTML aus dem CMS bzw. den PHP-Dateien. */
.fliesstext{font-size:var(--text-artikel);line-height:var(--zeile-artikel);color:var(--ink);max-width:var(--breite-text)}
.fliesstext>*+*{margin-top:1em}
.fliesstext h2{font-size:var(--text-h3);line-height:1.15;margin-top:2em;scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))}
.fliesstext h3{font-size:var(--text-21);line-height:1.22;margin-top:1.7em}
.fliesstext h4{font-size:var(--text-h4);margin-top:1.5em}
.fliesstext h2+*,.fliesstext h3+*,.fliesstext h4+*{margin-top:.55em}
.fliesstext ul,.fliesstext ol{padding-left:1.35em}
.fliesstext li+li{margin-top:.4em}
.fliesstext ul>li::marker{content:"– ";color:var(--ink-3)}
.fliesstext ol>li::marker{font:700 .95em var(--schrift-titel);color:var(--ink)}
.fliesstext li>ul,.fliesstext li>ol{margin-top:.4em}
.fliesstext strong{font-weight:600}
.fliesstext a{text-decoration-thickness:1px}
.fliesstext blockquote{position:relative;padding-left:1.1em;font:500 1.12em/1.5 var(--schrift-titel);color:var(--ink)}
.fliesstext blockquote::before{content:"«";position:absolute;left:-.1em;top:-.06em;font-size:1.5em;line-height:1;color:var(--ink-3)}
.fliesstext blockquote p+p{margin-top:.6em}
.fliesstext blockquote footer,.fliesstext blockquote cite{display:block;margin-top:.5em;font:400 var(--text-klein)/1.4 var(--schrift-text);font-style:normal;color:var(--ink-3)}
.fliesstext figure{margin-block:1.8em}
.fliesstext figure img{border-radius:var(--r-bild);width:100%}
.fliesstext figcaption{margin-top:.6em;font-size:var(--text-klein);line-height:1.45;color:var(--ink-3)}
.fliesstext table{font-size:var(--text-15);line-height:1.4}
.fliesstext hr{margin:2.2em 0}
.fliesstext code{font:500 .92em/1 ui-monospace,"SF Mono",Menlo,monospace;background:var(--grund-2);padding:.1em .3em;border-radius:var(--r-marke)}
.fliesstext mark{background:var(--merk);color:var(--ink);padding:.04em .16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fliesstext dl{display:grid;gap:.2em 0}
.fliesstext dt{font-weight:600;margin-top:.8em}
.fliesstext dd{margin:0;color:var(--ink-2)}
.fliesstext>:first-child{margin-top:0}
.fliesstext :is(h2,h3)+.merkkasten{margin-top:1em}
/* Rechtstexte: dichter, Absatznummern in Gabarito */
.fliesstext--recht{font-size:var(--text);line-height:1.6}
.fliesstext--recht h2{font-size:var(--text-21);margin-top:1.8em}
.fliesstext--recht h3{font-size:var(--text-h4)}

/* ---------- Ruhige Fassung: keine Bewegung, alles vollständig ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ===== css/komponenten.css ===== */
/* Designsystem einbuergerungsquiz.ch: Komponenten. Braucht tokens.css und base.css.
   Regel aus V2: Nur die Lernkarte (und was als Karte auf ihr liegt: Sheet, Buch) hat Radius, Schatten und Tiefe.
   Alles andere ist flach, gesetzt, an einer linken Achse, getrennt durch Linien und Abstand.
   Namen: deutsch, BEM-artig (block__teil--variante), Zustände als is-* oder ARIA-Attribute. */

/* =====================================================================
   1 LOGO
   ===================================================================== */
.logo{display:block;flex:none;width:195.38px;height:22.73px}      /* Gabarito 800 in 24 px */
.logo--klein{width:162.82px;height:18.94px}                       /* Untergrenze 20 px */
.logo path{transition:fill var(--dauer-mittel)}

/* =====================================================================
   2 KOPFZEILE  (.kopf)  Seiten mit Granit-Hero: .kopf--flaeche, wird beim Scrollen hell (.is-hell)
   ===================================================================== */
.kopf{position:sticky;top:0;z-index:var(--z-kopf);background:var(--grund);color:var(--ink);box-shadow:var(--schatten-kopf);
  transition:background-color var(--dauer-mittel),color var(--dauer-mittel),box-shadow var(--dauer-mittel);
  --logo-frage:var(--logo-h-frage);--logo-antwort:var(--logo-h-antwort)}
.kopf--flaeche:not(.is-hell){background:var(--flaeche);color:var(--f-ink);box-shadow:none;--fokus:var(--f-ink);--link:var(--f-ink);
  --logo-frage:var(--logo-f-frage);--logo-antwort:var(--logo-f-antwort)}
.kopf__in{display:flex;align-items:center;gap:var(--s-3);height:var(--kopf-hoehe);width:min(var(--breite-seite),100% - 2*var(--gut));margin-inline:auto}
.kopf__logo{display:inline-flex;align-items:center;min-height:var(--ziel-min);color:inherit;text-decoration:none;white-space:nowrap}
.kopf__nav{display:none}
.kopf__nav a{display:inline-flex;align-items:center;min-height:var(--ziel-min);padding:0 var(--s-3);font-weight:500;font-size:var(--text-15);color:inherit;text-decoration:none}
.kopf__nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.kopf__nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;font-weight:600}
.kopf__ende{margin-left:auto;display:flex;align-items:center;gap:2px}
.kopf__sprache{display:inline-flex;align-items:center;gap:var(--s-1);height:var(--ziel-min);padding:0 var(--s-3);border:0;background:none;font-weight:600;font-size:var(--text-klein);color:inherit;border-radius:var(--r-knopf)}
.kopf__sprache::after{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--ico-runter) center/contain no-repeat;mask:var(--ico-runter) center/contain no-repeat}
.kopf__konto{display:none;align-items:center;gap:var(--s-2);min-height:var(--ziel-min);padding:0 var(--s-2);font-weight:600;font-size:var(--text-15);color:inherit;text-decoration:none}
.kopf__konto:hover{text-decoration:underline;text-underline-offset:.3em}
.kopf__konto--an{display:inline-flex}
.kopf__konto--an .kopf__konto-text{display:none}
.kopf__initiale{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-feld);background:currentColor;font:700 var(--text-klein)/1 var(--schrift-titel)}
.kopf__initiale span{color:var(--grund)}
.kopf--flaeche:not(.is-hell) .kopf__initiale span{color:var(--flaeche)}
.kopf__menue{width:var(--ziel-min);height:var(--ziel-min);border:0;background:none;display:grid;place-items:center;margin-right:calc(-1 * var(--s-3));color:inherit;border-radius:var(--r-knopf)}
.kopf__menue svg{width:22px;height:22px}
@media (min-width:1000px){
  .kopf__nav{display:flex;gap:0;margin-left:var(--s-5)}
  .kopf__konto{display:inline-flex;margin-left:var(--s-2)}
  .kopf__konto--an .kopf__konto-text{display:inline}
  .kopf__menue{display:none}
}

/* Popover für Sprachwahl und Menü (natives popover, Rückfall in kopf.js) */
.pop{margin:0;border:0;padding:var(--s-4);border-radius:var(--r-knopf);background:var(--karte);color:var(--ink);box-shadow:var(--schatten-pop);
  inset:auto;position:fixed;top:calc(var(--kopf-hoehe) + 4px);right:var(--gut);width:min(340px,calc(100vw - 2*var(--gut)));max-height:calc(100dvh - var(--kopf-hoehe) - 16px);overflow:auto;--fokus:var(--ink);--link:var(--ink)}
.pop::backdrop{background:rgba(20,20,20,.3)}
@supports not selector(:popover-open){.pop[popover]:not(.is-offen){display:none}}
.pop__kopf{font-weight:600;margin-bottom:var(--s-2)}
.pop__sprachen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.pop__sprachen a{position:relative;display:flex;align-items:center;min-height:46px;padding:0 var(--s-2) 0 var(--s-5);font-size:var(--text-15);text-decoration:none;border-top:1px solid var(--linie)}
.pop__sprachen a:hover{text-decoration:underline}
.pop__sprachen a[aria-current]{font-weight:700}
.pop__sprachen a[aria-current]::before{content:"";position:absolute;left:2px;width:14px;height:14px;background:currentColor;-webkit-mask:var(--ico-haken) center/contain no-repeat;mask:var(--ico-haken) center/contain no-repeat}
.pop__notiz{font-size:var(--text-mini);line-height:1.45;color:var(--ink-2);margin-top:var(--s-3)}
.pop--menue nav{display:grid}
.pop--menue nav a{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 var(--s-1);text-decoration:none;font:700 var(--text-21)/1.1 var(--schrift-titel);border-top:1px solid var(--linie)}
.pop--menue nav a:first-child{border-top:0}
.pop--menue nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.pop--menue .pop__konto{margin-top:var(--s-2);padding-top:var(--s-3);border-top:2px solid var(--ink);display:grid;gap:var(--s-2)}

/* =====================================================================
   3 PFLICHTHINWEIS  (.pflicht)  in Fuss, Menü, Seitenkopf von Übungs- und Werkzeugseiten
   ===================================================================== */
.pflicht{font-size:var(--text-mini);line-height:1.45;color:var(--ink-3)}
.seitenkopf--werkzeug .pflicht,.hero .pflicht,.zugang .pflicht{color:var(--f-ink-2)}

/* =====================================================================
   4 FUSSZEILE  (.fuss)
   ===================================================================== */
.fuss{background:var(--tief);color:var(--tief-ink-2);padding:var(--s-7) 0 calc(var(--s-7) + env(safe-area-inset-bottom));font-size:var(--text-15);
  --fokus:var(--f-ink);--link:var(--tief-ink-2);--logo-frage:var(--logo-f-frage);--logo-antwort:var(--logo-f-antwort)}
.fuss__in{display:grid;gap:var(--s-6)}
.fuss__marke{color:var(--f-ink);line-height:0}
.fuss__pflicht{margin-top:var(--s-3);max-width:28em;color:var(--tief-ink-2);font-size:var(--text-klein)}
.fuss__spalten{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-5)}
.fuss__titel{font:600 var(--text-klein)/1.3 var(--schrift-text);color:var(--f-ink);margin-bottom:var(--s-1)}
.fuss nav ul{list-style:none;margin:0;padding:0}
.fuss nav a{display:inline-block;padding:var(--s-3) 0;line-height:1.35;text-decoration:none;color:inherit}
.fuss nav a:hover{text-decoration:underline;color:var(--f-ink)}
.fuss__sprachen{display:flex;flex-wrap:wrap;gap:0 var(--s-4);padding-top:var(--s-4);border-top:1px solid color-mix(in srgb,var(--f-ink) 18%,transparent)}
.fuss__sprachen a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:inherit}
.fuss__sprachen a:hover{text-decoration:underline}
.fuss__sprachen a[aria-current]{color:var(--f-ink);font-weight:600}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-5);font-size:var(--text-mini)}
.dock-platz .fuss{padding-bottom:calc(var(--s-10) + env(safe-area-inset-bottom))}
@media (min-width:720px){
  .fuss__spalten{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s-4)}
  .fuss__sprachen,.fuss__unten{grid-column:1/-1}
  .dock-platz .fuss{padding-bottom:var(--s-7)}
}

/* =====================================================================
   5 BROTKRUMEN  (.pfad)  Handy: nur die Ebene darüber mit Zurück-Zeichen
   ===================================================================== */
.pfad{font-size:var(--text-klein);color:var(--ink-3)}
.pfad ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.pfad li{display:none;align-items:center}
.pfad li:nth-last-child(2){display:inline-flex}
.pfad li:nth-last-child(2) a::before{content:"";width:14px;height:14px;margin-right:var(--s-2);background:currentColor;-webkit-mask:var(--ico-zurueck) center/contain no-repeat;mask:var(--ico-zurueck) center/contain no-repeat}
.pfad a{display:inline-flex;align-items:center;min-height:var(--ziel-min);color:var(--ink-2);text-decoration:none}
.pfad a:hover{text-decoration:underline;color:var(--ink)}
.pfad [aria-current]{color:var(--ink-2)}
.seitenkopf--werkzeug .pfad,.seitenkopf--werkzeug .pfad a,.seitenkopf--werkzeug .pfad [aria-current]{color:var(--f-ink-2)}
@media (min-width:720px){
  .pfad li{display:inline-flex}
  .pfad li+li::before{content:"/";margin:0 var(--s-2);color:var(--ink-3)}
  .seitenkopf--werkzeug .pfad li+li::before{color:var(--f-ink-2)}
  .pfad li:nth-last-child(2) a::before{content:none}
  /* einzeilig: der letzte Eintrag kürzt sich mit «…», statt in eine eigene Zeile zu brechen */
  .pfad ol{flex-wrap:nowrap}
  .pfad li{flex:none}
  .pfad li:last-child{flex:0 1 auto;min-width:0}
  .pfad li:last-child [aria-current]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* =====================================================================
   6 LINOLSCHNITTE  (.illu)  zwei Druckfarben als Masken, Farbe aus der Fläche
   ===================================================================== */
.illu{position:relative;display:block}
.illu i{position:absolute;inset:0;background:var(--illu-ink);-webkit-mask:var(--m-ink) var(--m-pos,center)/var(--m-size,contain) no-repeat;mask:var(--m-ink) var(--m-pos,center)/var(--m-size,contain) no-repeat}
.illu i+i{background:var(--illu-rot);-webkit-mask-image:var(--m-rot);mask-image:var(--m-rot)}
.illu--cover,.lernkarte__bild,.seitenkopf__bild,.anriss__bild{--m-pos:var(--m-fokus,center)}
.illu--cover{--m-size:cover}
/* illu:start */ /* erzeugt von werkzeug/linol_css.py, nicht von Hand ändern */
.illu--hero{--m-ink:url(../assets/img/illu/hero-ink.webp);--m-rot:url(../assets/img/illu/hero-rot.webp);--m-fokus:31% 57%;aspect-ratio:1600/760}
.illu--geografie{--m-ink:url(../assets/img/illu/geografie-ink.webp);--m-rot:url(../assets/img/illu/geografie-rot.webp);--m-fokus:26% 80%;aspect-ratio:1200/611}
.illu--geschichte{--m-ink:url(../assets/img/illu/geschichte-ink.webp);--m-rot:url(../assets/img/illu/geschichte-rot.webp);--m-fokus:53% 90%;aspect-ratio:480/473}
.illu--politik{--m-ink:url(../assets/img/illu/politik-ink.webp);--m-rot:url(../assets/img/illu/politik-rot.webp);--m-fokus:79% 90%;aspect-ratio:480/408}
.illu--kultur{--m-ink:url(../assets/img/illu/kultur-ink.webp);--m-rot:url(../assets/img/illu/kultur-rot.webp);--m-fokus:39% 20%;aspect-ratio:508/293}
.illu--augustfeuer{--m-ink:url(../assets/img/illu/augustfeuer-ink.webp);--m-rot:url(../assets/img/illu/augustfeuer-rot.webp);--m-fokus:71% 65%;aspect-ratio:1000/726}
.illu--matterhorn{--m-ink:url(../assets/img/illu/matterhorn-ink.webp);--m-rot:url(../assets/img/illu/matterhorn-rot.webp);--m-fokus:49% 0%;aspect-ratio:1000/559}
.illu--bundeshaus{--m-ink:url(../assets/img/illu/bundeshaus-ink.webp);--m-rot:url(../assets/img/illu/bundeshaus-rot.webp);--m-fokus:51% 80%;aspect-ratio:1000/546}
.illu--versammlung{--m-ink:url(../assets/img/illu/versammlung-ink.webp);--m-rot:url(../assets/img/illu/versammlung-rot.webp);--m-fokus:37% 34%;aspect-ratio:1400/838}
.illu--konto{--m-ink:url(../assets/img/illu/konto-ink.webp);--m-rot:url(../assets/img/illu/konto-rot.webp);--m-fokus:39% 0%;aspect-ratio:1200/703}
.illu--prellbock{--m-ink:url(../assets/img/illu/prellbock-ink.webp);--m-rot:url(../assets/img/illu/prellbock-rot.webp);--m-fokus:50% 51%;aspect-ratio:1400/788}
.illu--schneeschleuder{--m-ink:url(../assets/img/illu/schneeschleuder-ink.webp);--m-rot:url(../assets/img/illu/schneeschleuder-rot.webp);--m-fokus:42% 70%;aspect-ratio:1400/759}
.illu--ratgeber{--m-ink:url(../assets/img/illu/ratgeber-ink.webp);--m-rot:url(../assets/img/illu/ratgeber-rot.webp);--m-fokus:50% 65%;aspect-ratio:1200/810}
.illu--videokurs{--m-ink:url(../assets/img/illu/videokurs-ink.webp);--m-rot:url(../assets/img/illu/videokurs-rot.webp);--m-fokus:47% 65%;aspect-ratio:1200/709}
.illu--sackmesser{--m-ink:url(../assets/img/illu/sackmesser-ink.webp);--m-rot:url(../assets/img/illu/sackmesser-rot.webp);--m-fokus:60% 51%;aspect-ratio:1000/690}
.illu--kind{--m-ink:url(../assets/img/illu/kind-ink.webp);--m-rot:url(../assets/img/illu/kind-rot.webp);--m-fokus:31% 51%;aspect-ratio:1200/849}
.illu--gespraech{--m-ink:url(../assets/img/illu/gespraech-ink.webp);--m-rot:url(../assets/img/illu/gespraech-rot.webp);--m-fokus:82% 90%;aspect-ratio:1200/823}
.illu--dauer{--m-ink:url(../assets/img/illu/dauer-ink.webp);--m-rot:url(../assets/img/illu/dauer-rot.webp);--m-fokus:15% 83%;aspect-ratio:1200/900}
.illu--kosten{--m-ink:url(../assets/img/illu/kosten-ink.webp);--m-rot:url(../assets/img/illu/kosten-rot.webp);--m-fokus:64% 100%;aspect-ratio:1200/723}
.illu--unterlagen{--m-ink:url(../assets/img/illu/unterlagen-ink.webp);--m-rot:url(../assets/img/illu/unterlagen-rot.webp);--m-fokus:83% 35%;aspect-ratio:1200/732}
.illu--sprache{--m-ink:url(../assets/img/illu/sprache-ink.webp);--m-rot:url(../assets/img/illu/sprache-rot.webp);--m-fokus:52% 73%;aspect-ratio:1200/843}
.illu--heirat{--m-ink:url(../assets/img/illu/heirat-ink.webp);--m-rot:url(../assets/img/illu/heirat-rot.webp);--m-fokus:40% 35%;aspect-ratio:1200/610}
.illu--familie{--m-ink:url(../assets/img/illu/familie-ink.webp);--m-rot:url(../assets/img/illu/familie-rot.webp);--m-fokus:48% 39%;aspect-ratio:1200/705}
.illu--niederlassung{--m-ink:url(../assets/img/illu/niederlassung-ink.webp);--m-rot:url(../assets/img/illu/niederlassung-rot.webp);--m-fokus:67% 55%;aspect-ratio:1200/1009}
.illu--abgelehnt{--m-ink:url(../assets/img/illu/abgelehnt-ink.webp);--m-rot:url(../assets/img/illu/abgelehnt-rot.webp);--m-fokus:43% 42%;aspect-ratio:1200/824}
.illu--generationen{--m-ink:url(../assets/img/illu/generationen-ink.webp);--m-rot:url(../assets/img/illu/generationen-rot.webp);--m-fokus:75% 67%;aspect-ratio:1200/787}
/* illu:ende */
/* Hero am grossen Bildschirm mit hoher Dichte: Masken in 3200 x 1520 (nur dort geladen, Handy unverändert) */
@media (min-width:1000px) and (min-resolution:1.5dppx){.illu--hero{--m-ink:url(../assets/img/illu/hero-ink-3200.webp);--m-rot:url(../assets/img/illu/hero-rot-3200.webp)}}
/* Bänder mit fester Höhe füllen die Breite: das Seitenverhältnis gilt dann nicht */
.seitenkopf__bild,.anriss--gross .anriss__bild,.lernkarte__bild{aspect-ratio:auto}
/* Auf Granit: die Fläche setzt die hellen Druckfarben */
.auf-flaeche,.seitenkopf--werkzeug,.hero,.zugang,.sheet__kopf{--illu-ink:var(--illu-ink-f);--illu-rot:var(--illu-rot-f)}

/* =====================================================================
   7 SEITENKÖPFE  (.seitenkopf)  Varianten: werkzeug, artikel, recht, konto, fehler, kanton
   ===================================================================== */
.seitenkopf{padding:var(--s-4) 0 var(--s-6)}
.seitenkopf__in{width:min(var(--breite-seite),100% - 2*var(--gut));margin-inline:auto;display:grid;gap:var(--s-4)}
.seitenkopf__titel{font-size:var(--text-h1);max-width:18ch}
.seitenkopf__lead{font-size:var(--text-gross);line-height:1.5;color:var(--ink-2);max-width:34em}
.seitenkopf__meta{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);font-size:var(--text-klein);color:var(--ink-3)}
.seitenkopf__aktion{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-top:var(--s-1)}
.seitenkopf__text{display:grid;gap:var(--s-3);align-content:start}
.seitenkopf__bild{margin-inline:calc(-1 * var(--gut))}

/* Werkzeug und Übung: Granit, der Schnitt schliesst unten randlos ab */
.seitenkopf--werkzeug{background:var(--flaeche);color:var(--f-ink);padding-bottom:0;--fokus:var(--f-ink);--link:var(--f-ink)}
.seitenkopf--werkzeug .seitenkopf__lead{color:var(--f-ink-2)}
.seitenkopf--werkzeug .seitenkopf__bild{height:150px;--m-size:cover;margin-top:var(--s-2)}
/* Artikel: Papier, Schnitt als Bildband unter dem Titel */
.seitenkopf--artikel .seitenkopf__titel{font-size:var(--text-h2);max-width:22ch;text-wrap:pretty}
.seitenkopf--artikel .seitenkopf__bild{height:190px;--m-size:cover;margin-top:var(--s-2)}
/* Recht: Papier, kein Bild, kompakt */
.seitenkopf--recht{padding-bottom:var(--s-5);border-bottom:1px solid var(--linie)}
.seitenkopf--recht .seitenkopf__titel{font-size:var(--text-h2)}
/* Konto: Papier, kleiner Schnitt rechts */
.seitenkopf--konto .seitenkopf__in{grid-template-columns:minmax(0,1fr) 112px;align-items:end}
.seitenkopf--konto .seitenkopf__text{display:grid;gap:var(--s-3)}
.seitenkopf--konto .seitenkopf__titel{font-size:var(--text-h2)}
.seitenkopf--konto .seitenkopf__bild{margin:0;width:112px;aspect-ratio:1200/762}
/* Fehler: grosser Schnitt, ein Satz, Wege weiter */
.seitenkopf--fehler{padding-top:var(--s-6)}
.seitenkopf--fehler .seitenkopf__code{font:700 var(--text-15)/1 var(--schrift-titel);color:var(--ink-3)}
.seitenkopf--fehler .seitenkopf__bild{margin-inline:calc(-1 * var(--gut));height:200px;--m-size:cover}
/* Kanton: die Karte mit dem roten Kanton ist das Bild */
.seitenkopf--kanton .seitenkopf__in{align-items:start}
.seitenkopf--kanton .kantonskarte{max-width:420px}
@media (min-width:720px){
  .seitenkopf{padding:var(--s-6) 0 var(--s-7)}
  .seitenkopf--werkzeug{padding-bottom:0}
  /* 720 bis 999 px: noch einspaltig, das Bild als Band darunter (zweispaltig erst ab 1000 px, wie die Navigation) */
  .seitenkopf--werkzeug .seitenkopf__bild{height:200px}
  .seitenkopf--artikel .seitenkopf__bild{height:240px}
  .seitenkopf--fehler .seitenkopf__bild{height:280px;--m-size:contain}
  .seitenkopf--konto .seitenkopf__in{grid-template-columns:minmax(0,1fr) 220px}
  .seitenkopf--konto .seitenkopf__bild{width:220px}

}@media (min-width:1000px){
  .seitenkopf--werkzeug .seitenkopf__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7);align-items:end}
  .seitenkopf--werkzeug .seitenkopf__text{gap:var(--s-4);padding-bottom:var(--s-7)}
  .seitenkopf--werkzeug .seitenkopf__bild{margin:0 calc(-1 * var(--gut)) 0 0;height:300px;--m-pos:center bottom;--m-size:contain}
  .seitenkopf--artikel .seitenkopf__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7)}
  .seitenkopf--artikel .seitenkopf__in>:not(.seitenkopf__bild){grid-column:1}
  .seitenkopf--artikel .seitenkopf__bild{grid-column:2;grid-row:1/span 6;align-self:stretch;margin:0;height:auto;min-height:280px;--m-size:contain;--m-pos:right center}
  .seitenkopf--fehler .seitenkopf__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-7);align-items:center}
  .seitenkopf--fehler .seitenkopf__bild{grid-column:2;grid-row:1/span 6;margin:0;height:360px;--m-size:contain}
  .seitenkopf--kanton .seitenkopf__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:var(--s-7)}
  .seitenkopf--kanton .kantonskarte{grid-column:2;grid-row:1/span 6}
}
@media (min-width:1000px){
  .fuss__in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--s-7)}
}


/* =====================================================================
   8 KNÖPFE  (.knopf)  Brücke: .btn* (quiz.js) teilen dieselben Regeln
   Rot (.knopf--akzent) höchstens einmal je Bildschirm: die Hauptaktion.
   ===================================================================== */
.knopf,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:var(--knopf-hoehe);padding:0 var(--s-5);border-radius:var(--r-knopf);border:0;
  background:var(--ink);color:var(--grund);font:600 var(--text)/1.15 var(--schrift-text);text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color var(--dauer-kurz),color var(--dauer-kurz),box-shadow var(--dauer-kurz);-webkit-tap-highlight-color:transparent}
.knopf:hover,.btn:hover{background:#000;text-decoration:none}
.knopf:active,.btn:active{transform:translateY(1px)}
.knopf::after,.btn::after{content:none}
.knopf--akzent,.btn-primary{background:var(--akzent);color:var(--akzent-ink)}
.knopf--akzent:hover,.btn-primary:hover{background:var(--akzent-hover)}
.knopf--rand,.btn-outline,.btn-secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.knopf--rand:hover,.btn-outline:hover,.btn-secondary:hover{background:var(--ink);color:var(--grund)}
.knopf--hell{background:var(--hk);color:var(--hk-ink)}
.knopf--hell:hover{background:var(--hk-hover)}
.knopf--rand-hell{background:transparent;color:var(--f-ink);box-shadow:inset 0 0 0 2px var(--f-ink)}
.knopf--rand-hell:hover{background:var(--f-ink);color:var(--flaeche)}
.knopf--text,.btn-ghost{background:transparent;color:var(--link);padding:0;min-height:var(--ziel-min);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;font-weight:600}
.knopf--text:hover,.btn-ghost:hover{background:transparent;text-decoration-thickness:2px}
.knopf--klein,.btn-sm{min-height:var(--knopf-hoehe-klein);padding:0 var(--s-4);font-size:var(--text-15)}
.knopf--breit,.btn-block{display:flex;width:100%}
.knopf__zeichen{width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--z) center/contain no-repeat;mask:var(--z) center/contain no-repeat}
.knopf__zeichen--pfeil{--z:var(--ico-pfeil)}
.knopf__zeichen--schloss{--z:var(--ico-schloss)}
.knopf__zeichen--play{--z:var(--ico-play)}
.knopf:disabled,.knopf[aria-disabled="true"],.btn:disabled{background:var(--grund-2);color:var(--ink-3);box-shadow:none;cursor:not-allowed;transform:none}
.knopf[aria-busy="true"]{cursor:progress}
.knopfreihe,.btn-group{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.knopfreihe--stapel{display:grid;gap:var(--s-3)}
/* Link mit Pfeil (eine Handlung, die weiterführt) */
.pfeil{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--ziel-min);font-weight:600;color:var(--link);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.pfeil::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ico-pfeil) center/contain no-repeat;mask:var(--ico-pfeil) center/contain no-repeat}
.pfeil:hover{text-decoration-thickness:2px}
.pfeil[href^="http"]:not([href*="einbuergerungsquiz.ch"])::after{-webkit-mask-image:var(--ico-extern);mask-image:var(--ico-extern);width:12px;height:12px}
/* Auf Granit sind dunkle Knöpfe hell */
.auf-flaeche .knopf:not([class*="knopf--"]),.seitenkopf--werkzeug .knopf:not([class*="knopf--"]),.zugang .knopf:not([class*="knopf--"]){background:var(--hk);color:var(--hk-ink)}

/* =====================================================================
   9 FORMULARE  (.formular, .feld)  Pflicht ist die Regel, freiwillige Felder werden genannt.
   ===================================================================== */
.formular{display:grid;gap:var(--s-5);max-width:var(--breite-schmal)}
.formular__aktionen{display:grid;gap:var(--s-3);margin-top:var(--s-1)}
.formular__fuss{font-size:var(--text-klein);color:var(--ink-2)}
.feld,.form-group{display:grid;gap:var(--s-2)}
.feld__label,.form-label{font-weight:600;font-size:var(--text-15);line-height:1.3;color:var(--ink);display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);align-items:baseline}
.feld__zusatz{font-weight:400;font-size:var(--text-klein);color:var(--ink-3)}
.feld__pflicht{font-weight:400;font-size:var(--text-klein);color:var(--ink-3)}
.feld__hilfe,.form-hint{font-size:var(--text-klein);line-height:1.45;color:var(--ink-2)}
.feld__fehler,.form-error{display:flex;gap:var(--s-2);align-items:flex-start;font-size:var(--text-klein);line-height:1.4;font-weight:600;color:var(--falsch-ink)}
.feld__fehler::before,.form-error::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:var(--r-marke);background:var(--falsch-ink);
  -webkit-mask:var(--q-kreuz) center/contain no-repeat;mask:var(--q-kreuz) center/contain no-repeat}
.feld--fehler input,.feld--fehler select,.feld--fehler textarea,.form-input.is-invalid,[aria-invalid="true"]{border-color:var(--falsch-ink)!important;box-shadow:inset 0 0 0 1px var(--falsch-ink)}
.feld--fehler input:focus-visible,[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 2px var(--falsch-ink)}
.form-input{width:100%}
/* Passwort mit Anzeigen */
.feld__passwort{position:relative}
.feld__passwort input{padding-right:var(--s-10)}
.feld__zeigen{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:var(--ziel-min);padding:0 var(--s-3);border:0;background:none;font-weight:600;font-size:var(--text-klein);color:var(--ink);text-decoration:underline;text-underline-offset:.2em;border-radius:var(--r-feld)}
/* Checkbox (.haken) und Radio (.option): eigene Form, natives Element bleibt bedienbar */
.haken,.option{display:grid;grid-template-columns:24px 1fr;gap:var(--s-3);align-items:start;min-height:var(--ziel-min);padding:var(--s-3) 0;font-size:var(--text);line-height:1.4;cursor:pointer}
.haken input,.option input{appearance:none;-webkit-appearance:none;margin:0;width:24px;height:24px;border:1.5px solid var(--rand-feld);background:var(--karte);display:grid;place-items:center;cursor:pointer;transition:background-color var(--dauer-kurz),border-color var(--dauer-kurz)}
.haken input{border-radius:var(--r-feld)}
.option input{border-radius:50%}
.haken input::before{content:"";width:16px;height:16px;background:var(--grund);-webkit-mask:var(--ico-haken) center/contain no-repeat;mask:var(--ico-haken) center/contain no-repeat;transform:scale(0);transition:transform var(--dauer-kurz)}
.option input::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--grund);transform:scale(0);transition:transform var(--dauer-kurz)}
.haken input:checked,.option input:checked{background:var(--ink);border-color:var(--ink)}
.haken input:checked::before,.option input:checked::before{transform:scale(1)}
.haken input:hover,.option input:hover{border-color:var(--ink)}
.haken input:focus-visible,.option input:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;box-shadow:none}
.haken small,.option small{display:block;color:var(--ink-2);font-size:var(--text-klein);margin-top:2px}
.feld--fehler .haken input{border-color:var(--falsch-ink)}
/* Wahlzeilen: Radio als ganze Zeile (Gebietwahl, Check-Schritte, Zugangsdauer) */
.wahlzeilen{display:grid;gap:var(--s-2)}
.option--zeile{grid-template-columns:24px 1fr auto;align-items:center;padding:var(--s-3) var(--s-4);border:1.5px solid var(--linie);border-radius:var(--r-knopf);background:var(--karte);transition:border-color var(--dauer-kurz)}
@media (hover:hover){.option--zeile:hover{border-color:var(--ink-2)}}
.option--zeile:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.option--zeile b{font-weight:600}
.option__zahl{font-size:var(--text-klein);color:var(--ink-3);white-space:nowrap}
/* Auswahl im Satz (V2): «Ich wohne im Kanton [Zürich]» */
.satzwahl{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3);font:600 var(--text-21)/1.3 var(--schrift-titel)}
.wahl{position:relative;display:inline-flex;align-items:center;max-width:100%}
.wahl select{font:700 var(--text-21)/1.2 var(--schrift-titel);color:var(--ink);background:transparent none;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:var(--s-2) var(--s-6) var(--s-1) 0;min-height:var(--ziel-min);width:auto;max-width:100%}
.wahl select:focus-visible{box-shadow:none;outline:3px solid var(--fokus);outline-offset:2px}
.wahl::after{content:"";position:absolute;right:4px;width:16px;height:16px;background:var(--ink);pointer-events:none;-webkit-mask:var(--ico-runter) center/contain no-repeat;mask:var(--ico-runter) center/contain no-repeat}
/* Suche (Glossar) */
.suche{position:relative}
.suche input{padding-left:var(--s-7)}
.suche::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);border:2px solid var(--ink-2);border-radius:50%;box-sizing:border-box;clip-path:none}
.suche::after{content:"";position:absolute;left:29px;top:calc(50% + 6px);width:7px;height:2px;background:var(--ink-2);transform:rotate(45deg)}

/* =====================================================================
   10 HINWEISE  (.hinweis)  Fläche plus Zeichen im Quadrat. Kein Streifen, kein Schatten.
   ===================================================================== */
.hinweis,.alert{display:grid;grid-template-columns:28px 1fr;gap:var(--s-1) var(--s-3);align-items:start;padding:var(--s-4);border-radius:var(--r-feld);background:var(--grund-2);color:var(--ink);font-size:var(--text-15);line-height:1.5;
  --hz:var(--q-info);--hz-bg:var(--zustand-info)}
.hinweis::before,.alert::before{content:"";grid-row:1/span 3;width:28px;height:28px;background:var(--hz-bg);
  -webkit-mask:var(--hz) center/contain no-repeat;mask:var(--hz) center/contain no-repeat}
.hinweis__titel{font-weight:700;grid-column:2;padding-top:2px}
.hinweis>:not(.hinweis__titel){grid-column:2}
.hinweis a{color:inherit;font-weight:600}
.hinweis ul{margin:var(--s-2) 0 0;padding-left:1.2em}
.hinweis--erfolg,.alert-success{--hz:var(--q-haken);--hz-bg:var(--zustand-erfolg)}
.hinweis--warnung,.alert-warning{--hz:var(--q-achtung);--hz-bg:var(--zustand-warnung)}
.hinweis--fehler,.alert-error,.alert-danger{--hz:var(--q-kreuz);--hz-bg:var(--zustand-fehler)}
.hinweis--leise{background:transparent;padding:0}

/* =====================================================================
   11 MARKEN  (.marke)  kleine Etiketten mit Bedeutung, keine Deko-Pillen
   ===================================================================== */
.marke{display:inline-flex;align-items:center;gap:var(--s-1);height:24px;padding:0 var(--s-2);border-radius:var(--r-marke);background:var(--grund-2);color:var(--ink);font:600 var(--text-mini)/1 var(--schrift-text);white-space:nowrap;vertical-align:middle}
.marke--tinte{background:var(--ink);color:var(--grund);font:700 var(--text-mini)/1 var(--schrift-titel);letter-spacing:.04em}
.marke--rand{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.marke--erfolg,.marke--warnung,.marke--fehler,.marke--gesperrt,.marke--gesehen{background:var(--grund-2);color:var(--ink)}
.marke--erfolg::before,.marke--warnung::before,.marke--fehler::before,.marke--gesperrt::before,.marke--gesehen::before{content:"";width:12px;height:12px;flex:none;background:var(--mz-farbe,currentColor);-webkit-mask:var(--mz) center/contain no-repeat;mask:var(--mz) center/contain no-repeat}
.marke--erfolg,.marke--gesehen{--mz:var(--ico-haken);--mz-farbe:var(--zustand-erfolg)}
.marke--warnung{--mz:var(--ico-achtung);--mz-farbe:var(--zustand-warnung)}
.marke--fehler{--mz:var(--ico-kreuz);--mz-farbe:var(--zustand-fehler)}
.marke--gesperrt{--mz:var(--ico-schloss)}
.auf-flaeche .marke,.zugang .marke{background:color-mix(in srgb,var(--f-ink) 16%,transparent);color:var(--f-ink)}

/* =====================================================================
   12 LISTEN-KARTEN  flach, Zeilen mit Linie. Ganze Zeile klickbar über den Titel-Link.
   ===================================================================== */
.zeilen{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie)}
.zeilen>li{border-top:1px solid var(--linie)}
.zeilen--2{display:grid}
@media (min-width:720px){.zeilen--2{grid-template-columns:1fr 1fr;column-gap:var(--s-7);border-bottom:0}.zeilen--2>li:nth-last-child(-n+2){border-bottom:1px solid var(--linie)}}

/* Artikel-Anriss */
.anriss{position:relative;display:grid;gap:var(--s-2);padding:var(--s-4) 0}
.anriss__meta{font-size:var(--text-mini);color:var(--ink-3)}
.anriss__titel{font:700 var(--text-21)/1.2 var(--schrift-titel);letter-spacing:-.01em}
.anriss__titel a{text-decoration:none}
.anriss__titel a::after{content:"";position:absolute;inset:0}
.anriss:hover .anriss__titel a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.anriss__titel a:focus-visible{outline:none}
.anriss:has(a:focus-visible){outline:3px solid var(--fokus);outline-offset:4px}
.anriss__text{font-size:var(--text);color:var(--ink-2);max-width:36em}
.anriss--gross{padding-top:0}
.anriss--gross .anriss__bild{height:190px;margin:0 calc(-1 * var(--gut)) var(--s-3);--m-size:cover}
.anriss--gross .anriss__titel{font-size:var(--text-h3)}
@media (min-width:720px){
  .anriss--gross{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:var(--s-7);align-items:center}
  .anriss--gross .anriss__bild{grid-row:1/span 4;grid-column:1;height:300px;margin:0}
  .anriss--gross>:not(.anriss__bild){grid-column:2}
}

/* Werkzeug-Zeile: Name, Satz, echte Vorschau */
.werkzeug{position:relative;display:grid;gap:var(--s-1);padding:var(--s-4) 0}
.werkzeug__name{font-weight:600;font-size:var(--text-gross)}
.werkzeug__name a{text-decoration:underline;text-underline-offset:.2em}
.werkzeug__name a::after{content:"";position:absolute;inset:0}
.werkzeug:hover .werkzeug__name a{text-decoration-thickness:2px}
.werkzeug__text{font-size:var(--text-15);color:var(--ink-2)}
.werkzeug__vorschau{margin-top:var(--s-1);font-size:var(--text-mini);color:var(--ink-3)}
.werkzeug__vorschau b{color:var(--ink);font-weight:600}

/* Lektion: Poster, Modul, Dauer, Zustand */
.lektion{position:relative;display:grid;grid-template-columns:128px 1fr;gap:var(--s-1) var(--s-4);padding:var(--s-4) 0;align-items:start}
.lektion__poster{grid-row:1/span 3;position:relative;aspect-ratio:16/9;border-radius:var(--r-bild);overflow:hidden;background:var(--ink)}
.lektion__poster img{width:100%;height:100%;object-fit:cover}
.lektion__meta{font-size:var(--text-mini);color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);align-items:center}
.lektion__meta b{color:var(--ink);font-weight:700}
.lektion__titel{font-weight:600;font-size:var(--text);line-height:1.35}
.lektion__titel a{text-decoration:none}
.lektion__titel a::after{content:"";position:absolute;inset:0}
.lektion:hover .lektion__titel a{text-decoration:underline}
.lektion__stand{grid-column:2;height:4px;background:var(--grund-2);margin-top:var(--s-2);position:relative}
.lektion__stand i{position:absolute;inset:0 auto 0 0;width:var(--wert,0%);background:var(--ink)}
.lektion.is-gesperrt .lektion__poster img{opacity:.45}
.lektion.is-gesperrt .lektion__poster::after{content:"";position:absolute;left:8px;bottom:8px;width:26px;height:26px;border-radius:var(--r-feld);background:var(--grund);
  -webkit-mask:var(--q-schloss) center/contain no-repeat;mask:var(--q-schloss) center/contain no-repeat}
.lektion.is-aktuell{box-shadow:inset 3px 0 0 transparent}
.lektion.is-aktuell .lektion__titel{font-weight:700}
@media (min-width:720px){.lektion{grid-template-columns:200px 1fr;column-gap:var(--s-5)}.lektion__titel{font-size:var(--text-gross)}}

/* Kanton-Zeile (Übersicht der 26 Kantone) */
.kantonzeile{position:relative;display:grid;grid-template-columns:44px 1fr;gap:2px var(--s-3);padding:var(--s-4) 0;align-items:start;align-content:start}
.kantonzeile .marke--tinte{grid-row:1/span 2;justify-content:center;height:28px;margin-top:1px}
.kantonzeile__name{font:700 var(--text-h4)/1.25 var(--schrift-titel)}
.kantonzeile__name a{text-decoration:none}
.kantonzeile__name a::after{content:"";position:absolute;inset:0}
.kantonzeile:hover .kantonzeile__name a{text-decoration:underline}
.kantonzeile__test{font-size:var(--text-klein);color:var(--ink-2);line-height:1.45}
@media (min-width:720px){.kantone-liste{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-7)}}
@media (min-width:1100px){.kantone-liste{grid-template-columns:1fr 1fr 1fr}}

/* =====================================================================
   13 TABELLEN  (.tabelle)  Wrapper scrollt, Handy stapelt mit data-label
   ===================================================================== */
.tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabelle:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.tabelle table{min-width:100%}
.tabelle caption{font:700 var(--text-h4)/1.3 var(--schrift-titel);margin-bottom:var(--s-3)}
.tabelle td,.tabelle th{font-size:var(--text-15)}
.tabelle tfoot td,.tabelle tfoot th{border-top:2px solid var(--ink);border-bottom:0;font-weight:700}
.tabelle__quelle{margin-top:var(--s-2);font-size:var(--text-mini);color:var(--ink-3)}
.tabelle tr.is-gewaehlt td,.tabelle tr.is-gewaehlt th{background:var(--grund-2)}
.tabelle tr.is-gewaehlt>:first-child{position:relative;box-shadow:calc(-1 * var(--s-3)) 0 0 var(--grund-2)}
.tabelle tr.is-gewaehlt>:last-child{box-shadow:var(--s-3) 0 0 var(--grund-2)}
.tabelle:has(tr.is-gewaehlt){padding-inline:var(--s-3);margin-inline:calc(-1 * var(--s-3))}
.tabelle tr.is-gewaehlt th::before{content:"";position:absolute;left:calc(-1 * var(--s-2) - 2px);top:1.05em;width:8px;height:8px;background:var(--akzent);border-radius:1px}
@media (max-width:599px){
  .tabelle--stapel table,.tabelle--stapel tbody,.tabelle--stapel tr,.tabelle--stapel td,.tabelle--stapel th{display:block}
  .tabelle--stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabelle--stapel tr{padding:var(--s-3) 0;border-bottom:1px solid var(--linie)}
  .tabelle--stapel th,.tabelle--stapel td{border:0;padding:2px 0}
  .tabelle--stapel tbody th{font:700 var(--text-gross)/1.3 var(--schrift-titel);margin-bottom:var(--s-1)}
  .tabelle--stapel td[data-label]{display:grid;gap:0;padding-top:var(--s-1);text-align:left}
  .tabelle--stapel td[data-label]::before{content:attr(data-label);font-size:var(--text-mini);color:var(--ink-3);font-weight:400}
  .tabelle--stapel td.zahl{text-align:left}
  .tabelle--stapel tr.is-gewaehlt{background:var(--grund-2);box-shadow:calc(-1 * var(--s-3)) 0 0 var(--grund-2),var(--s-3) 0 0 var(--grund-2)}
  .tabelle--stapel tr.is-gewaehlt>*{background:transparent;box-shadow:none}
}
/* Preise: Lage, Dauer, Preis */
.tabelle--preise td.zahl{font-weight:600;font-variant-numeric:tabular-nums}
/* Kosten: Bund, Kanton, Gemeinde, Total */
.tabelle--kosten td.zahl{white-space:nowrap}

/* =====================================================================
   14 LERNKARTE UND STAPEL  (.stapel, .lernkarte)  aus V2 herausgelöst, JS: js/stapel.js
   ===================================================================== */
.stapel{position:relative;perspective:1600px;margin-bottom:var(--s-4);max-width:var(--breite-schmal)}
.stapel__deck{position:relative;height:400px;transition:height .35s var(--ease)}
.lernkarte{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--dauer-karte) var(--ease),opacity .3s;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  --illu-ink:var(--illu-ink-h);--illu-rot:var(--illu-rot-h);--fokus:var(--ink);--link:var(--ink)}
.lernkarte[data-pos="0"]{z-index:5;transform:none}
.lernkarte[data-pos="1"]{z-index:4;transform:translate3d(7px,8px,-30px) rotate(2.4deg)}
.lernkarte[data-pos="2"]{z-index:3;transform:translate3d(-6px,14px,-60px) rotate(-2.2deg)}
.lernkarte[data-pos="3"]{z-index:2;transform:translate3d(0,22px,-90px);opacity:0}
.lernkarte[data-pos="1"] .lernkarte__seite,.lernkarte[data-pos="2"] .lernkarte__seite{pointer-events:none}
.lernkarte[data-pos="1"] .lernkarte__seite>*,.lernkarte[data-pos="2"] .lernkarte__seite>*{visibility:hidden}
.lernkarte.is-ziehen{transition:none}
.lernkarte.is-raus{transition:transform .42s var(--ease-raus),opacity .42s;opacity:0}
.lernkarte__innen{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--dauer-flip) var(--ease)}
.lernkarte.is-gedreht .lernkarte__innen{transform:rotateY(180deg)}
.lernkarte__seite{position:absolute;top:0;left:0;right:0;height:var(--h,100%);border-radius:var(--r-karte);background:var(--karte);color:var(--ink);padding:var(--s-4) var(--s-4) var(--s-4);
  display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--schatten-karte);overflow:hidden}
.lernkarte__seite--hinten{transform:rotateY(180deg)}
/* Ohne Stapel (Quiz-Seite, Musterseite): eine Karte im Fluss */
.lernkarte--einzeln{position:relative;inset:auto;max-width:var(--breite-schmal)}
/* eine Seite direkt in der Karte: steht still (Musterseite, Ergebnis) */
.lernkarte--einzeln>.lernkarte__seite{position:relative;height:auto;transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}
/* beide Seiten in __innen: drehbar mit .is-gedreht (Quiz-Seite); beide liegen in derselben Rasterzelle, die Karte ist so hoch wie die längere */
.lernkarte--einzeln>.lernkarte__innen{position:relative;inset:auto;display:grid}
.lernkarte--einzeln>.lernkarte__innen>.lernkarte__seite{position:relative;grid-area:1/1;height:auto}
.lernkarte__bild.illu--geschichte,.lernkarte__bild.illu--politik{--m-size:contain;--m-pos:center}
.lernkarte__bild{flex:none;height:112px;margin:calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-4);--m-size:cover;border-bottom:1px solid var(--linie)}
.lernkarte__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);font-size:var(--text-mini);color:var(--ink-3);margin-bottom:var(--s-3)}
.lernkarte__gebiet{display:inline-flex;align-items:center;gap:var(--s-2);min-width:0}
.lernkarte__stand{white-space:nowrap}
.lernkarte__stand b{color:var(--ink);font-weight:700}
.lernkarte__frage{font:700 var(--text-21)/1.18 var(--schrift-titel);letter-spacing:-.01em;margin-bottom:var(--s-4);text-wrap:pretty}
.lernkarte__fuss{margin-top:auto;padding-top:var(--s-1);font-size:var(--text-mini);color:var(--ink-3)}
.lernkarte__umdrehen{margin-left:auto;border:0;background:none;font-size:var(--text-mini);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:var(--s-3) 0;min-height:var(--ziel-min)}
.lernkarte__weiter{margin-top:auto;padding-top:var(--s-2);display:grid;gap:var(--s-1);justify-items:center}
.lernkarte__weiter .knopf--akzent{width:100%}
.lernkarte__mehr{border:0;background:none;font-weight:600;font-size:var(--text-klein);color:var(--link);padding:var(--s-3);min-height:var(--ziel-min);text-decoration:underline;text-underline-offset:4px;align-self:center}
@media (min-width:1000px){
  .lernkarte__seite{padding:var(--s-5) var(--s-5) var(--s-5)}
  .lernkarte__frage{font-size:var(--text-h3)}
  .lernkarte__bild{height:132px;margin:calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4)}
}

/* Rundenmarken: drei Quadrate füllen sich mit den eigenen Antworten */
.rundenmarken{display:inline-flex;gap:var(--s-1);flex:none}
.rundenmarken i{width:15px;height:15px;border-radius:var(--r-marke);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 35%,transparent);display:grid;place-items:center;transition:background-color .15s}
.rundenmarken i.ok,.rundenmarken i.no{box-shadow:none}
.rundenmarken i.ok{background:var(--richtig)}
.rundenmarken i.no{background:var(--falsch)}
.rundenmarken i.ok::before,.rundenmarken i.no::before{content:"";width:11px;height:11px;background:var(--richtig-ink);-webkit-mask:var(--ico-haken) center/contain no-repeat;mask:var(--ico-haken) center/contain no-repeat}
.rundenmarken i.no::before{background:var(--falsch-ink);-webkit-mask-image:var(--ico-kreuz);mask-image:var(--ico-kreuz)}

/* Antworten A bis D, Zustände richtig/falsch/blass/gesperrt */
.antworten{list-style:none;margin:0 0 var(--s-3);padding:0;display:grid;gap:var(--s-2)}
.antwort{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:50px;padding:var(--s-2) var(--s-3) var(--s-2) var(--s-2);border-radius:var(--r-knopf);border:1.5px solid var(--linie);background:var(--karte);
  text-align:left;font:500 var(--text)/1.25 var(--schrift-text);color:var(--ink);text-decoration:none;transition:background-color var(--dauer-kurz),border-color var(--dauer-kurz),color var(--dauer-kurz)}
.antwort__buchstabe{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-feld);background:var(--grund);font:700 var(--text-mini)/1 var(--schrift-text)}
.antwort__buchstabe::before{content:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--az) center/contain no-repeat;mask:var(--az) center/contain no-repeat}
@media (hover:hover){.antwort:hover{border-color:var(--ink-2)}}
.antwort[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--karte)}
.antwort[aria-pressed="true"] .antwort__buchstabe{background:color-mix(in srgb,var(--karte) 18%,transparent);color:var(--karte)}
.antwort.is-richtig{background:var(--richtig);border-color:var(--richtig-ink);color:var(--richtig-ink)}
.antwort.is-falsch{background:var(--falsch);border-color:var(--falsch-ink);color:var(--falsch-ink);text-decoration:line-through;text-decoration-thickness:1.5px}
.antwort.is-richtig .antwort__buchstabe,.antwort.is-falsch .antwort__buchstabe{font-size:0}
.antwort.is-richtig .antwort__buchstabe{background:var(--richtig-ink);color:var(--richtig);--az:var(--ico-haken)}
.antwort.is-falsch .antwort__buchstabe{background:var(--falsch-ink);color:var(--falsch);--az:var(--ico-kreuz)}
.antwort.is-richtig .antwort__buchstabe::before,.antwort.is-falsch .antwort__buchstabe::before{content:""}
.antwort.is-blass{opacity:.5}
.antworten.is-gesperrt .antwort{pointer-events:none}

/* Rückseite: Urteil, Lösung, Visual, Erklärung, Merksatz */
.urteil{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.urteil__zeichen{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--text-15)}
.urteil__zeichen::before{content:"";width:24px;height:24px;border-radius:var(--r-feld);
  -webkit-mask:var(--uz) center/contain no-repeat;mask:var(--uz) center/contain no-repeat}
.urteil--richtig .urteil__zeichen::before{background:var(--richtig-ink);--uz:var(--q-haken)}
.urteil--falsch .urteil__zeichen::before{background:var(--falsch-ink);--uz:var(--q-kreuz)}
.loesung{font:700 var(--text-h4)/1.2 var(--schrift-titel);margin-bottom:var(--s-2)}
.loesung small{display:block;font:400 var(--text-mini)/1.3 var(--schrift-text);color:var(--ink-3);margin-bottom:2px}
.erklaerung{font-size:var(--text);line-height:1.6;color:var(--ink)}   /* Lerntext: volle Grösse und Tinte */
.erklaerung--gesperrt{display:grid;gap:var(--s-2)}
.erklaerung--gesperrt p:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.erklaerung__schloss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);font-size:var(--text-klein);color:var(--ink)}
.merksatz{margin:var(--s-3) 0 var(--s-4);font:700 var(--text-gross)/1.45 var(--schrift-titel);color:var(--ink)}
.merksatz__label{display:block;font:600 var(--text-mini)/1.3 var(--schrift-text);color:var(--ink-3);margin-bottom:2px}
.merksatz mark{background:var(--merk);color:var(--ink);padding:.05em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Visual nach der Antwort: Zahl, Jahr auf der Zeitachse, Kantone auf der Karte */
.visual{margin:var(--s-1) 0 var(--s-3)}
.visual--zahl{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.visual--zahl b{font:800 var(--text-h2)/1 var(--schrift-titel);letter-spacing:-.03em}
.visual--zahl span{font-size:var(--text-klein);color:var(--ink-2)}
.visual--zahl small{flex:0 0 100%;font:400 var(--text-mini)/1.3 var(--schrift-text);color:var(--ink-3);margin-bottom:calc(-1 * var(--s-1))}
.visual--jahr .visual--zahl{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-2)}
.visual--jahr{font-size:var(--text-mini);color:var(--ink-3)}
.zeitachse{position:relative;height:44px;margin:0 var(--s-2)}
.zeitachse::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:var(--ink)}
.zeitachse__ende{position:absolute;top:28px;white-space:nowrap;font-size:var(--text-mini);color:var(--ink-3)}
.zeitachse__ende--von{left:-8px}
.zeitachse__ende--bis{right:-8px}
.zeitachse__punkt{position:absolute;top:0;left:var(--x);transform:translateX(-50%);display:grid;justify-items:center;gap:3px}
.zeitachse__punkt b{font:800 var(--text-h4)/1 var(--schrift-titel);color:var(--ink);background:var(--karte);padding:0 var(--s-1)}
.zeitachse__punkt i{width:12px;height:12px;background:var(--ink);border-radius:1px;transform:rotate(45deg)}
.visual__text{margin-top:var(--s-1);font-size:var(--text-klein);color:var(--ink-2)}
.visual--kanton{display:grid;grid-template-columns:120px 1fr;gap:var(--s-3);align-items:center}

/* Ende der Runde und Fehlerliste */
.lernkarte__seite--ende{gap:var(--s-3)}
.ende__titel{font:700 var(--text-h3)/1.1 var(--schrift-titel)}
.lernkarte__seite--ende>p{font-size:var(--text-klein);color:var(--ink-2)}
.lernkarte__seite--ende .knopf{width:100%;margin-top:auto}
.fehlerliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.fehlerliste li{display:grid;grid-template-columns:20px 1fr;gap:var(--s-1) var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--linie);font-size:var(--text-klein);line-height:1.4}
.fehlerliste li::before{content:"";grid-row:1/span 4;width:18px;height:18px;margin-top:1px;border-radius:var(--r-marke);background:var(--richtig-ink);
  -webkit-mask:var(--q-haken) center/contain no-repeat;mask:var(--q-haken) center/contain no-repeat}
.fehlerliste li.no::before{background:var(--falsch-ink);-webkit-mask-image:var(--q-kreuz);mask-image:var(--q-kreuz)}
.fehlerliste__frage{color:var(--ink)}
.fehlerliste__deine{color:var(--falsch-ink)}
.fehlerliste__deine s{text-decoration-thickness:1px}
.fehlerliste__richtig{font-weight:600;color:var(--ink)}
.fehlerliste mark{background:var(--merk);color:var(--ink);padding:.03em .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* =====================================================================
   15 QUIZ-OBERFLÄCHE  (.quiz)  Kopf mit Fortschritt, Bühne, Restfragen, Sprachhinweis
   ===================================================================== */
.quiz{display:grid;gap:var(--s-4);max-width:var(--breite-schmal)}
.fortschritt{display:grid;gap:var(--s-2)}
.fortschritt__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);font-size:var(--text-klein);color:var(--ink-2)}
.fortschritt__zeile b{color:var(--ink);font:700 var(--text)/1 var(--schrift-titel)}
.fortschritt__balken{height:6px;background:var(--grund-2);position:relative;overflow:hidden}
.fortschritt__balken i{position:absolute;inset:0 auto 0 0;width:var(--wert,0%);background:var(--ink);transition:width .3s var(--ease)}
.auf-flaeche .fortschritt__zeile{color:var(--f-ink-2)}
.auf-flaeche .fortschritt__zeile b{color:var(--f-ink)}
.auf-flaeche .fortschritt__balken{background:color-mix(in srgb,var(--f-ink) 18%,transparent)}
.auf-flaeche .fortschritt__balken i{background:var(--f-ink)}
.quiz__steuer{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.restfragen{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-4);border-radius:var(--r-feld);background:var(--grund-2);color:var(--ink);font-size:var(--text-klein)}
.restfragen b{font:700 var(--text-gross)/1 var(--schrift-titel)}

/* Gebietwahl: vier Gebiete und «alle gemischt», mit echter Anzahl */
.gebietwahl .option--zeile{grid-template-columns:24px 64px 1fr auto}
.gebietwahl .illu{width:64px;height:44px;--m-size:contain}

/* Ergebnis */
.ergebnis{display:grid;gap:var(--s-4)}
.ergebnis__zahl{display:flex;align-items:flex-end;gap:var(--s-3)}
.ergebnis__zahl b{font:800 var(--text-zahl)/.82 var(--schrift-titel);letter-spacing:-.04em}
.ergebnis__zahl span{font:700 var(--text-21)/1.15 var(--schrift-titel);padding-bottom:var(--s-1)}
.ergebnis__satz{font:700 var(--text-h3)/1.25 var(--schrift-titel);max-width:26ch}
.ergebnis__text{color:var(--ink-2);max-width:34em}

/* Simulation: 48 Felder. Ohne Uhr. Rückmeldung erst am Schluss. */
.simraster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:var(--s-1);max-width:var(--breite-schmal)}
.simraster button{display:grid;place-items:center;width:100%;aspect-ratio:1;min-height:36px;border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:var(--r-marke);background:var(--karte);
  font:600 var(--text-mini)/1 var(--schrift-text);color:var(--ink);padding:0}
@media (hover:hover){.simraster button:hover{border-color:var(--ink)}}
.simraster .is-beantwortet{background:var(--ink);border-color:var(--ink);color:var(--karte)}
.simraster .is-aktuell{box-shadow:0 0 0 2px var(--grund),0 0 0 4px var(--ink);font-weight:800}
.simraster .is-richtig{background:var(--richtig);border-color:var(--richtig-ink);color:var(--richtig-ink)}
.simraster .is-falsch{background:var(--falsch);border-color:var(--falsch-ink);color:var(--falsch-ink);position:relative}
.simraster .is-falsch::after{content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;background:var(--falsch-ink);-webkit-mask:var(--ico-kreuz) center/contain no-repeat;mask:var(--ico-kreuz) center/contain no-repeat}
.simraster__legende i.r{background:var(--richtig);border-color:var(--richtig-ink)}
.simraster__legende i.f{background:var(--falsch);border-color:var(--falsch-ink)}
.simraster__legende{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-3);font-size:var(--text-mini);color:var(--ink-2)}
.simraster__legende span{display:inline-flex;align-items:center;gap:var(--s-2)}
.simraster__legende i{width:14px;height:14px;border-radius:var(--r-marke);border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);background:var(--karte)}
.simraster__legende i.b{background:var(--ink);border-color:var(--ink)}
@media (min-width:720px){.simraster{grid-template-columns:repeat(12,minmax(0,1fr));max-width:600px}.simraster button{min-height:0}}

/* Leerzustand und Laden */
.leer{display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-6) 0;max-width:30em}
.leer .illu{width:180px;margin-bottom:var(--s-1)}
.leer__titel{font:700 var(--text-21)/1.25 var(--schrift-titel)}
.leer__text{color:var(--ink-2)}
.laden{display:grid;gap:var(--s-3);padding:var(--s-4) var(--s-4);border-radius:var(--r-karte);background:var(--karte);box-shadow:var(--schatten-karte);max-width:var(--breite-schmal)}
.laden__zeile{height:14px;border-radius:var(--r-marke);background:var(--grund-2)}
.laden__zeile--titel{height:24px;width:85%}
.laden__zeile--antwort{height:50px;border-radius:var(--r-knopf)}
.laden__text{font-size:var(--text-mini);color:var(--ink-3)}
[aria-busy="true"] .laden__zeile{opacity:.85}

/* =====================================================================
   16 SHEET UND DIALOG  (.sheet)  Paywall, Bestätigungen. Handy: von unten, Desktop: Mitte.
   ===================================================================== */
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:min(90dvh,760px);padding:0;border:0;border-radius:var(--r-karte) var(--r-karte) 0 0;
  background:var(--karte);color:var(--ink);box-shadow:var(--schatten-pop);overflow:auto;overscroll-behavior:contain;
  transition:transform var(--dauer-mittel) var(--ease),opacity var(--dauer-mittel),display var(--dauer-mittel) allow-discrete,overlay var(--dauer-mittel) allow-discrete}
.sheet[open]{transform:none}
@starting-style{.sheet[open]{transform:translateY(40px);opacity:0}}
.sheet::backdrop{background:rgba(20,22,24,.5)}
.sheet__kopf{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:1fr auto;gap:var(--s-3);align-items:start;padding:var(--s-4) var(--s-4) var(--s-4);background:var(--flaeche);color:var(--f-ink);--fokus:var(--f-ink)}
.sheet__kopf::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:calc(-1 * var(--s-4));border-radius:2px;background:color-mix(in srgb,var(--f-ink) 40%,transparent)}
.sheet__titel{font:700 var(--text-21)/1.15 var(--schrift-titel);margin-top:var(--s-2)}
.sheet__unter{grid-column:1/-1;font-size:var(--text-15);color:var(--f-ink-2)}
.sheet__zu{width:var(--ziel-min);height:var(--ziel-min);margin:calc(-1 * var(--s-1)) calc(-1 * var(--s-2)) 0 0;border:0;background:none;color:inherit;display:grid;place-items:center;border-radius:var(--r-knopf)}
.sheet__zu::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ico-kreuz) center/contain no-repeat;mask:var(--ico-kreuz) center/contain no-repeat}
.sheet__inhalt{padding:var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));display:grid;gap:var(--s-4)}
.sheet__fuss{font-size:var(--text-klein);color:var(--ink-2)}
@media (min-width:720px){
  .sheet{inset:0;margin:auto;width:min(560px,calc(100vw - 64px));border-radius:var(--r-karte);max-height:min(86dvh,760px)}
  .sheet__kopf{padding:var(--s-5) var(--s-5) var(--s-4)}
  .sheet__kopf::before{content:none}
  .sheet__inhalt{padding:var(--s-5) var(--s-5) var(--s-5)}
}

/* =====================================================================
   17 PREISE  (.tarif)  Lebenslage-Zeilen, Zusatz Video-Kurs, Buch
   ===================================================================== */
.tarif{display:grid;gap:var(--s-4)}
.tarif__zeile{display:grid;grid-template-columns:1fr auto;gap:var(--s-1) var(--s-4);align-items:center;padding-top:var(--s-4);border-top:2px solid var(--ink)}
.tarif__lage{grid-column:1/-1;font-size:var(--text-klein);color:var(--ink-2)}
.tarif__was{font:700 var(--text-h3)/1.1 var(--schrift-titel)}
.tarif__was span{display:block;font:500 var(--text)/1.3 var(--schrift-text);margin-top:2px}
.tarif .knopf{min-height:48px;min-width:11.5em;padding:0 var(--s-4);font-size:var(--text-15)}
.tarif__zusatz{display:grid;grid-template-columns:24px 1fr;gap:var(--s-1) var(--s-3);padding:var(--s-4) 0 0;border-top:1px solid var(--linie);font-size:var(--text-15)}
.tarif__zusatz b{font-weight:600}
.tarif__zusatz s{color:var(--ink-3)}
.tarif__klein{font-size:var(--text-klein);color:var(--ink-2)}
.auf-flaeche .tarif__zeile,.zugang .tarif__zeile{border-top-color:var(--f-ink)}
.auf-flaeche .tarif__lage,.zugang .tarif__lage,.auf-flaeche .tarif__klein,.zugang .tarif__klein{color:var(--f-ink-2)}
.auf-flaeche .tarif__zusatz,.zugang .tarif__zusatz{border-top-color:var(--f-linie)}
.auf-flaeche .haken input,.zugang .haken input{background:transparent;border-color:var(--f-ink-2)}
.auf-flaeche .haken input:checked,.zugang .haken input:checked{background:var(--f-ink);border-color:var(--f-ink)}
.auf-flaeche .haken input::before,.zugang .haken input::before{background:var(--flaeche)}
/* Zugang-Block (Startseite, Kasse): Granit */
.zugang{background:var(--flaeche);color:var(--f-ink);--fokus:var(--f-ink);--link:var(--f-ink)}
.zugang .tarif__was span{color:var(--f-ink)}
/* In der Paywall (weisses Sheet) */
.sheet .tarif__zeile{border-top-color:var(--ink)}

/* =====================================================================
   18 DASHBOARD
   ===================================================================== */
.konto-raster{display:grid;gap:var(--s-7)}
@media (min-width:1000px){.konto-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-8);align-items:start}}
.abschnitt__titel{font:700 var(--text-h3)/1.15 var(--schrift-titel);margin-bottom:var(--s-4)}
/* Zugangsstatus mit Ablaufdatum */
.zugangsstatus{display:grid;gap:var(--s-2);padding-top:var(--s-4);border-top:2px solid var(--ink)}
.zugangsstatus__zeile{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;font-size:var(--text-klein);color:var(--ink-2)}
.zugangsstatus__datum{font:700 var(--text-h3)/1.15 var(--schrift-titel);letter-spacing:-.01em}
.zugangsstatus__rest{font-size:var(--text);color:var(--ink-2)}
.zugangsstatus__aktion{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center}
.zugangsstatus--bald .zugangsstatus__rest{color:var(--zustand-warnung);font-weight:600}
.zugangsstatus--abgelaufen .zugangsstatus__datum{color:var(--ink-2)}
/* Stand je Gebiet (aus V2 .stand): Länge = Grösse des Gebiets, Füllung = gesehen, Text = richtig */
.gebietstand{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5)}
.gebietstand li{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s-2) var(--s-3);align-items:baseline}
.gebietstand .illu{grid-row:1/span 3;width:64px;height:50px;align-self:center}
.gebietstand__name{font:700 var(--text-gross)/1.2 var(--schrift-titel)}
.gebietstand__zahl{font-size:var(--text-klein);color:var(--ink-2);white-space:nowrap}
.gebietstand__zahl b{color:var(--ink)}
.gebietstand__balken{grid-column:2/-1;align-self:start;display:block;height:12px;width:100%;background:var(--grund-2);position:relative;overflow:hidden}
.gebietstand__balken i{position:absolute;left:0;top:0;bottom:0;width:var(--wert,0%);background:var(--ink);transition:width .3s var(--ease)}
/* Variante: die Länge zeigt die Grösse des Gebiets (Startseite, V2); dann --anteil am li setzen (Gebiet / grösstes Gebiet) */
.gebietstand--groesse .gebietstand__balken{width:calc(var(--anteil,1) * 100%)}
.gebietstand__notiz{grid-column:2/-1;font-size:var(--text-mini);color:var(--ink-3)}
/* Letzte Runden */
.runden{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie)}
.runden li{display:grid;grid-template-columns:1fr auto;gap:2px var(--s-4);padding:var(--s-3) 0;border-top:1px solid var(--linie);align-items:baseline}
.runden__art{font-weight:600}
.runden__wann{font-size:var(--text-mini);color:var(--ink-3)}
.runden__wert{grid-row:1/span 2;grid-column:2;font:700 var(--text-21)/1 var(--schrift-titel);text-align:right;align-self:center}
.runden__wert small{display:block;font:400 var(--text-mini)/1.4 var(--schrift-text);color:var(--ink-3);margin-top:3px}
.runden a{font-size:var(--text-klein)}
/* Kurs-Fortschritt */
.kursstand{display:grid;gap:var(--s-3)}
.kursstand__satz{font-size:var(--text)}
.kursstand__satz b{font:700 var(--text-h4)/1 var(--schrift-titel)}

/* =====================================================================
   19 VIDEO-KURS  Player-Rahmen, gesperrte Lektion, Gratis-Vorschau, Video-Fassade
   ===================================================================== */
.player{position:relative;aspect-ratio:16/9;background:var(--tief);color:var(--f-ink);border-radius:var(--r-bild);overflow:hidden;--fokus:var(--f-ink)}
.player video,.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player__start{position:absolute;inset:0;display:block;border:0;background:transparent;color:var(--f-ink);cursor:pointer}
.player__start::before{content:"";position:absolute;left:var(--s-4);bottom:var(--s-4);width:56px;height:56px;border-radius:var(--r-knopf);background:var(--hk);transition:background-color var(--dauer-kurz)}
.player__start::after{content:"";position:absolute;left:calc(var(--s-4) + 18px);bottom:calc(var(--s-4) + 17px);width:22px;height:22px;background:var(--hk-ink);-webkit-mask:var(--ico-play) center/contain no-repeat;mask:var(--ico-play) center/contain no-repeat}
.player__start:hover::before{background:var(--hk-hover)}
.player__start:focus-visible{outline-offset:-4px}
.player__dauer{position:absolute;right:var(--s-3);bottom:var(--s-3);padding:var(--s-1) var(--s-2);border-radius:var(--r-marke);background:var(--tief);color:var(--f-ink);font:600 var(--text-mini)/1 var(--schrift-text)}
/* Gesperrt: deckende Fläche, das Poster höchstens als kleine Vorschau, nichts scheint durch */
.player--gesperrt{aspect-ratio:auto}
.player__sperre{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s-4);align-items:start;padding:var(--s-5) var(--s-4);background:var(--tief)}
.player__sperre>div{display:grid;gap:var(--s-3);justify-items:start}
.player .player__vorschau{position:static;width:64px;height:auto;aspect-ratio:16/9;border-radius:var(--r-marke);opacity:.55}
.player__sperre p{max-width:28em;color:var(--f-ink-2);font-size:var(--text-15)}
.player__sperre b{font:700 var(--text-21)/1.2 var(--schrift-titel);color:var(--f-ink)}
@media (min-width:720px){.player__sperre{grid-template-columns:112px minmax(0,1fr);padding:var(--s-6)}.player .player__vorschau{width:112px}}
.player-legende{margin-top:var(--s-3);display:grid;gap:2px}
.player-legende__meta{font-size:var(--text-mini);color:var(--ink-3)}
.player-legende__titel{font:700 var(--text-21)/1.2 var(--schrift-titel)}
.player-legende__hinweis{font-size:var(--text-mini);color:var(--ink-3)}
/* auf Granit: Meta und Hinweis in der hellen zweiten Schrift (7.7:1 statt ink-3 auf Granit) */
:is(.auf-flaeche,.abschnitt--flaeche,.seitenkopf--werkzeug,.zugang) :is(.player-legende__meta,.player-legende__hinweis){color:var(--f-ink-2)}

/* =====================================================================
   20 BUCH  3D ruhig: leicht gedreht, Rücken und Seitenschnitt aus CSS, keine Bewegung
   ===================================================================== */
.buch{display:grid;grid-template-columns:120px 1fr;gap:var(--s-5);align-items:start}
.buch__objekt{perspective:900px;width:120px}
.buch__koerper{position:relative;transform:rotateY(-18deg);transform-style:preserve-3d;transform-origin:left center}
.buch__koerper img{position:relative;width:100%;aspect-ratio:520/735;object-fit:cover;border-radius:2px var(--r-bild) var(--r-bild) 2px;box-shadow:var(--schatten-buch)}
.buch__koerper::before{content:"";position:absolute;top:2%;bottom:2%;right:-9px;width:10px;background:#EFE9DE;box-shadow:inset 0 0 0 1px #D9D0C0;transform:rotateY(70deg);transform-origin:left center}
.buch__koerper::after{content:"";position:absolute;inset:0 auto 0 0;width:6%;background:rgba(0,0,0,.18);border-radius:2px 0 0 2px}
.buch__titel{font-size:var(--text-h3)}
.buch__text{margin-top:var(--s-3);color:var(--ink-2);max-width:32em}
.buch__preis{font:700 var(--text-h3)/1 var(--schrift-titel);margin:var(--s-4) 0}
.buch__formate{display:flex;gap:var(--s-2);margin-top:var(--s-3)}
.buch__inhalt{counter-reset:kap;list-style:none;margin:0;padding:0;columns:1;column-gap:var(--s-7)}
.buch__inhalt li{counter-increment:kap;display:grid;grid-template-columns:32px 1fr;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--linie);break-inside:avoid;font-size:var(--text-15)}
.buch__inhalt li::before{content:counter(kap);font:700 var(--text-15)/1.4 var(--schrift-titel);color:var(--ink-3)}
.buch__teil{font:700 var(--text-h4)/1.3 var(--schrift-titel);margin:var(--s-4) 0 var(--s-2)}
@media (min-width:720px){
  .buch{grid-template-columns:200px 1fr;gap:var(--s-7)}
  .buch__objekt{width:200px}
  .buch__inhalt{columns:2}
}

/* =====================================================================
   21 WERKZEUG-ERGEBNISSE  Check (ohne Ampel), Kosten, Kantone-Quiz, Schritte
   ===================================================================== */
/* Schritte des Checks */
.schritte{display:grid;gap:var(--s-3)}
.schritte__zeile{display:flex;justify-content:space-between;font-size:var(--text-klein);color:var(--ink-2)}
.schritte__zeile b{color:var(--ink)}
.schritte__punkte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:var(--s-1)}
.schritte__punkte li{height:6px;background:var(--grund-2)}
.schritte__punkte li.is-fertig,.schritte__punkte li[aria-current]{background:var(--ink)}
.schritt{display:grid;gap:var(--s-4);max-width:var(--breite-schmal)}
.schritt__frage{font:700 var(--text-h3)/1.2 var(--schrift-titel)}
.schritt__steuer{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-top:var(--s-2)}
/* Ergebnis des Checks: eine Aussage, dann jede Voraussetzung mit Zeichen. Keine Ampelkreise. */
.pruefung{display:grid;gap:var(--s-4)}
.pruefung__satz{font:700 var(--text-h3)/1.2 var(--schrift-titel);max-width:24ch}
.pruefung__liste{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie)}
.pruefung__liste li{display:grid;grid-template-columns:28px 1fr;gap:2px var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--linie)}
.pruefung__liste li::before{content:"";grid-row:1/span 2;width:26px;height:26px;border-radius:var(--r-feld);background:var(--pz-bg);
  -webkit-mask:var(--pz) center/contain no-repeat;mask:var(--pz) center/contain no-repeat}
.pruefung__liste .is-erfuellt{--pz:var(--q-haken);--pz-bg:var(--zustand-erfolg)}
.pruefung__liste .is-offen{--pz:var(--q-kreuz);--pz-bg:var(--zustand-fehler)}
.pruefung__liste .is-pruefen{--pz:var(--q-achtung);--pz-bg:var(--zustand-warnung)}
.pruefung__liste b{font-weight:600}
.pruefung__liste span{font-size:var(--text-klein);color:var(--ink-2)}
/* Kosten-Rechner: ein gestapelter Balken in Tinte-Tönen, darunter die Tabelle */
.kosten{display:grid;gap:var(--s-4)}
.kosten__summe{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.kosten__summe b{font:800 var(--text-h2)/1 var(--schrift-titel);letter-spacing:-.02em}
.kosten__summe span{font-size:var(--text-15);color:var(--ink-2)}
.kosten__balken{display:flex;height:22px;gap:2px}
.kosten__balken i{flex:var(--teil) 1 0;min-width:4px;background:var(--ink)}
.kosten__balken i:nth-child(2){background:var(--ink-2)}
.kosten__balken i:nth-child(3){background:var(--karte-hover)}
.kosten__legende{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);font-size:var(--text-mini);color:var(--ink-2)}
.kosten__legende span{display:inline-flex;align-items:center;gap:var(--s-2)}
.kosten__legende i{width:12px;height:12px;background:var(--ink)}
.kosten__legende span:nth-child(2) i{background:var(--ink-2)}
.kosten__legende span:nth-child(3) i{background:var(--karte-hover)}
/* Kantone-Quiz */
.kantonequiz{display:grid;gap:var(--s-3)}
.kantonequiz__aufgabe{font:700 var(--text-h3)/1.2 var(--schrift-titel)}
.kantonequiz__stand{display:flex;gap:var(--s-4);font-size:var(--text-klein);color:var(--ink-2)}
.kantonequiz__stand b{color:var(--ink);font:700 var(--text)/1 var(--schrift-titel)}
.kantonequiz__rueckmeldung{min-height:1.5em;font-weight:600}
.kantonequiz__rueckmeldung.is-richtig{color:var(--richtig-ink)}
.kantonequiz__rueckmeldung.is-falsch{color:var(--falsch-ink)}

/* =====================================================================
   22 KANTONSKARTE  (.kantonskarte)  SVG, antippbar. Rot nur der gewählte Kanton.
   ===================================================================== */
.kantonskarte{position:relative}
.kantonskarte svg{width:100%;height:auto;overflow:visible}
.kantonskarte path{fill:var(--karte-fill);stroke:var(--grund);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill var(--dauer-kurz)}
.kantonskarte--wahl path{cursor:pointer}
@media (hover:hover){.kantonskarte--wahl path:hover{fill:var(--karte-hover)}}
.kantonskarte path.is-aktiv,.kantonskarte path.is-aktiv:hover{fill:var(--karte-aktiv)}
.kantonskarte path.is-richtig{fill:var(--richtig-ink)}
.kantonskarte path.is-falsch{fill:var(--falsch)}
.kantonskarte path.is-gefunden{fill:color-mix(in srgb,var(--richtig) 70%,var(--karte-fill))}
.kantonskarte path:focus-visible{outline:none}
.kantonskarte__fokus{fill:none;stroke:none;pointer-events:none}
.kantonskarte__fokus.is-an{stroke:var(--ink);stroke-width:3;vector-effect:non-scaling-stroke}
.kantonskarte__marke{pointer-events:none}
.kantonskarte__treffer circle{fill:transparent;pointer-events:none}
@media (pointer:coarse){.kantonskarte__treffer circle{pointer-events:auto;cursor:pointer}}
.kantonskarte__marke rect{fill:var(--ink)}
.kantonskarte__marke text{fill:var(--grund);font:700 var(--text-21)/1 var(--schrift-titel);letter-spacing:.02em}
.kantonskarte__fuss{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-2);font-size:var(--text-mini);color:var(--ink-3)}
.kantonskarte--klein path{stroke-width:1}
.kantonskarte--klein .kantonskarte__marke{display:none}
.auf-flaeche .kantonskarte path{fill:color-mix(in srgb,var(--f-ink) 22%,var(--flaeche));stroke:var(--flaeche)}
.auf-flaeche .kantonskarte path.is-aktiv{fill:var(--akzent-hell)}
/* Kantonsblatt: die Antwort auf «Wie prüft dein Kanton?» */
.kantonsblatt{border-top:2px solid var(--ink);padding-top:var(--s-5)}
.kantonsblatt.is-neu{animation:neu .18s ease-out}
@keyframes neu{from{opacity:.35}}
.kantonsblatt__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-2);font:700 var(--text-15)/1.2 var(--schrift-titel);color:var(--ink-2)}
.kantonsblatt__zahl{display:flex;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-4)}
.kantonsblatt__zahl b{font:800 var(--text-zahl)/.82 var(--schrift-titel);letter-spacing:-.04em;color:var(--ink)}
.kantonsblatt__zahl span{font:700 var(--text-21)/1.1 var(--schrift-titel);padding-bottom:var(--s-1);max-width:10em;text-wrap:balance}
.kantonsblatt__gross{font:700 var(--text-h3)/1.2 var(--schrift-titel);letter-spacing:-.01em;max-width:28ch;text-wrap:balance}
.kantonsblatt__gross--satz{font:500 var(--text-h4)/1.45 var(--schrift-text);letter-spacing:0;max-width:34em;text-wrap:pretty}
.kantonsblatt__detail{margin-top:var(--s-3);font-size:var(--text);line-height:1.55;color:var(--ink-2);max-width:36em}
.kantonsblatt__liste{margin:var(--s-5) 0 0;display:grid}
.kantonsblatt__liste div{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-top:1px solid var(--linie);font-size:var(--text-15)}
.kantonsblatt__liste dt{color:var(--ink-2)}
.kantonsblatt__liste dd{margin:0;font-weight:600;text-align:right}
.kantonsblatt__quelle{margin-top:var(--s-3);font-size:var(--text-mini);color:var(--ink-3)}

/* =====================================================================
   23 ARTIKEL-BAUSTEINE  Inhaltsverzeichnis, Autor/Stand, Merksatz-Kasten, Weiterlesen, Empfehlung
   ===================================================================== */
.artikel{display:grid;gap:var(--s-6)}
.artikel__seite{order:-1}
@media (min-width:1100px){.artikel__seite{order:0}.artikel{grid-template-columns:minmax(0,var(--breite-text)) minmax(0,260px);column-gap:var(--s-8);justify-content:start}.artikel__seite{grid-column:2;grid-row:1}}
.autor{display:flex;flex-wrap:wrap;gap:2px var(--s-3);font-size:var(--text-klein);color:var(--ink-3)}
.autor a{color:var(--ink-2)}
.inhalt{font-size:var(--text-15)}
.inhalt__titel{font:700 var(--text)/1.3 var(--schrift-titel);margin-bottom:var(--s-2)}
.inhalt ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.inhalt li{border-bottom:1px solid var(--linie)}
.inhalt a{display:flex;align-items:center;min-height:42px;padding:var(--s-2) 0;text-decoration:none;color:var(--ink-2);line-height:1.35}
.inhalt a:hover{color:var(--ink);text-decoration:underline}
.inhalt a[aria-current="true"]{color:var(--ink);font-weight:600}
@media (min-width:1100px){.inhalt{position:sticky;top:calc(var(--kopf-hoehe) + 24px)}}
/* Merksatz-Kasten im Artikel (alt: .highlight, .frage-box) */
.merkkasten{padding:var(--s-4) var(--s-4);background:var(--karte);border-radius:var(--r-feld);font-size:var(--text);line-height:1.55}
.merkkasten__label{display:block;font:600 var(--text-mini)/1.3 var(--schrift-text);color:var(--ink-3);margin-bottom:var(--s-1)}
.merkkasten p{font:700 var(--text-h4)/1.5 var(--schrift-titel)}
.merkkasten mark{background:var(--merk);color:var(--ink);padding:.05em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Empfehlung am Ende: Buch oder Kurs, echtes Material */
.empfehlung{display:grid;grid-template-columns:96px 1fr;gap:var(--s-4);padding-top:var(--s-5);border-top:2px solid var(--ink);align-items:start}
.empfehlung img{width:96px;border-radius:2px;box-shadow:0 10px 16px -10px rgba(0,0,0,.55)}
.empfehlung--kurs img{aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-bild);box-shadow:none}
.empfehlung__titel{font:700 var(--text-21)/1.2 var(--schrift-titel)}
.empfehlung__text{margin-top:var(--s-2);font-size:var(--text-15);color:var(--ink-2)}
.empfehlung .knopfreihe{margin-top:var(--s-3)}
@media (min-width:720px){.empfehlung{grid-template-columns:140px 1fr;gap:var(--s-5)}.empfehlung img{width:140px}}
.weiterlesen__titel{font:700 var(--text-21)/1.2 var(--schrift-titel);margin-bottom:var(--s-2)}

/* =====================================================================
   24 FRAGEN UND ANTWORTEN  (.fragen)  ruhig: Frage als Zeile, kleiner Winkel, Antwort als Fliesstext
   ===================================================================== */
.fragen{border-bottom:1px solid var(--linie);max-width:var(--breite-text)}
.frage{border-top:1px solid var(--linie)}
.frage>summary{list-style:none;display:grid;grid-template-columns:1fr 20px;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;cursor:pointer;font:700 var(--text-h4)/1.3 var(--schrift-titel);color:var(--ink)}
.frage>summary::-webkit-details-marker{display:none}
.frage>summary::after{content:"";width:14px;height:14px;justify-self:end;background:var(--ink-3);-webkit-mask:var(--ico-runter) center/contain no-repeat;mask:var(--ico-runter) center/contain no-repeat;transition:transform var(--dauer-mittel) var(--ease)}
.frage[open]>summary::after{transform:rotate(180deg);background:var(--ink)}
.frage>summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.frage>summary:focus-visible{outline-offset:4px}
.frage__antwort{padding:0 var(--s-6) var(--s-5) 0;font-size:var(--text)}
.frage__antwort.fliesstext{font-size:var(--text);line-height:1.6}
.frage::details-content{transition:height var(--dauer-mittel) var(--ease),content-visibility var(--dauer-mittel) allow-discrete;height:0;overflow:clip}
.frage[open]::details-content{height:auto}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}

/* =====================================================================
   25 SEGMENT UND REITER  (.segment)  zwei bis vier Ansichten derselben Sache
   ===================================================================== */
.segment{display:inline-flex;width:max-content;justify-self:start;align-self:flex-start;padding:3px;gap:2px;border-radius:var(--r-knopf);box-shadow:inset 0 0 0 1.5px var(--ink);max-width:100%;overflow-x:auto}
.segment [role="tab"]{min-height:var(--ziel-min);padding:0 var(--s-4);border:0;border-radius:4px;background:transparent;font:600 var(--text-klein)/1 var(--schrift-text);color:var(--ink);white-space:nowrap}
.segment [role="tab"]:hover{background:var(--grund-2)}
.segment [role="tab"][aria-selected="true"]{background:var(--ink);color:var(--grund)}
.segment--reiter{display:flex;width:auto;justify-self:stretch;padding:0;gap:var(--s-4);border-radius:0;box-shadow:inset 0 -1px 0 var(--linie)}
.segment--reiter [role="tab"]{min-height:var(--ziel-min);padding:0;border-radius:0;font-size:var(--text-15);color:var(--ink-2);box-shadow:inset 0 -3px 0 transparent}
.segment--reiter [role="tab"]:hover{background:transparent;color:var(--ink)}
.segment--reiter [role="tab"][aria-selected="true"]{background:transparent;color:var(--ink);box-shadow:inset 0 -3px 0 var(--ink)}
[role="tabpanel"]{padding-top:var(--s-4)}
[role="tabpanel"]:focus-visible{outline-offset:4px}

/* =====================================================================
   26 DOCK  (.dock)  Handy: bündige Leiste, erst nach dem ersten Bildschirm, weicht anderen Hauptknöpfen
   ===================================================================== */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--gut) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:var(--grund);box-shadow:0 -1px 0 var(--linie);transform:translateY(105%);transition:transform var(--dauer-mittel) var(--ease);visibility:hidden}
.dock.is-an{transform:none;visibility:visible}
.dock .knopf{flex:1;min-height:48px}
.dock__text{font-size:var(--text-mini);line-height:1.3;color:var(--ink-2)}
@media (min-width:720px){.dock{display:none}}

/* =====================================================================
   27 FEHLERSEITE  Wege weiter
   ===================================================================== */
.wege{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie);max-width:30em}
.wege li{border-top:1px solid var(--linie)}
.wege a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:52px;text-decoration:none;font-weight:600}
.wege a::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--ico-pfeil) center/contain no-repeat;mask:var(--ico-pfeil) center/contain no-repeat}
.wege a:hover{text-decoration:underline}

/* =====================================================================
   28 ABSCHNITTE  Abstand nach Gewicht, keine Schablone
   ===================================================================== */
.abschnitt{padding:var(--abschnitt-oben) 0 var(--abschnitt-unten)}
.abschnitt--eng{padding:var(--s-6) 0}
.abschnitt--flaeche{background:var(--flaeche);color:var(--f-ink);--fokus:var(--f-ink);--link:var(--f-ink);--illu-ink:var(--illu-ink-f);--illu-rot:var(--illu-rot-f)}
.abschnitt__lead{margin-top:var(--s-3);color:var(--ink-2);max-width:34em}
.abschnitt--flaeche .abschnitt__lead{color:var(--f-ink-2)}

/* =====================================================================
   29 KLASSEN IM ARTIKEL-HTML  (bleiben dauerhaft, 17 Ratgeber-Artikel und der Autopilot schreiben sie)
   .frage-box (80×), .niveau-table (24×), .highlight (18×), .ratgeber-buch-hinweis (17×)
   ===================================================================== */
.fliesstext .frage-box{padding:var(--s-4) var(--s-4);background:var(--karte);border-radius:var(--r-feld);font-size:var(--text);line-height:1.55}
.fliesstext .frage-box>*+*{margin-top:.5em}
.fliesstext .frage-box strong:first-child{display:block;font:700 var(--text-h4)/1.35 var(--schrift-titel)}
.fliesstext .highlight{background:var(--merk);color:var(--ink);padding:.04em .16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fliesstext p.highlight,.fliesstext div.highlight{display:block;padding:var(--s-4) var(--s-4);background:var(--karte);border-radius:var(--r-feld);font:700 var(--text-gross)/1.5 var(--schrift-titel)}
.fliesstext .niveau-table{font-size:var(--text-15)}
.fliesstext .niveau-table th{background:transparent}
.fliesstext .niveau-table td:first-child{font-weight:600;white-space:nowrap}
.fliesstext .ratgeber-buch-hinweis{all:revert;display:block;margin-top:2em;padding-top:var(--s-4);border-top:2px solid var(--ink);font-size:var(--text);color:var(--ink-2)}
.fliesstext .ratgeber-buch-hinweis[style]{background:none!important;border-left:0!important;border-radius:0!important;box-shadow:none!important;padding-left:0!important}


/* =====================================================================
   30 ANGABEN  (.angaben)  Zeilen mit Linie: Beschriftung links, Wert rechts. Aus G4 übernommen.
   --untereinander für lange Werte (Wert unter der Beschriftung, linksbündig)
   ===================================================================== */
.angaben{margin:0;display:grid;border-bottom:1px solid var(--linie)}
.angaben>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px var(--s-4);padding:var(--s-3) 0;border-top:1px solid var(--linie);font-size:var(--text-15)}
.angaben dt{color:var(--ink-2)}
.angaben dd{margin:0 0 0 auto;min-width:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.angaben--untereinander>div{display:block}
.angaben--untereinander dt{font-size:var(--text-mini);font-weight:600;color:var(--ink-3);margin-bottom:2px}
.angaben--untereinander dd{margin:0;font-weight:400;text-align:left;line-height:1.5;color:var(--ink-2)}
:is(.auf-flaeche,.zugang,.abschnitt--flaeche) .angaben,:is(.auf-flaeche,.zugang,.abschnitt--flaeche) .angaben>div{border-color:var(--f-linie)}
:is(.auf-flaeche,.zugang,.abschnitt--flaeche) .angaben dt{color:var(--f-ink-2)}

/* =====================================================================
   31 ABLAUF  (ol.ablauf)  nummerierte Schritte, nur wo die Reihenfolge Information ist. Aus G4 und G7.
   --zeilen: mit Linien, kleinere Ziffer (Danke-Seite, Lernweg)
   ===================================================================== */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:ablauf;display:grid;gap:var(--s-4)}
.ablauf>li{counter-increment:ablauf;display:grid;grid-template-columns:var(--s-6) minmax(0,1fr);gap:2px var(--s-3)}
.ablauf>li::before{content:counter(ablauf);grid-row:1/span 3;font:800 var(--text-h3)/1 var(--schrift-titel);color:var(--ink)}
.ablauf>li>*{grid-column:2}
.ablauf__titel{font-weight:700;line-height:1.35}
.ablauf__text{font-size:var(--text-15);line-height:1.5;color:var(--ink-2)}
.ablauf--zeilen{gap:0;border-bottom:1px solid var(--linie)}
.ablauf--zeilen>li{grid-template-columns:var(--s-7) minmax(0,1fr);padding:var(--s-4) 0;border-top:1px solid var(--linie);line-height:1.5}
.ablauf--zeilen>li::before{font:700 var(--text-h4)/1.3 var(--schrift-titel)}

/* =====================================================================
   32 KANTONE KOMPAKT  (ul.kantone-kompakt)  alle 26 als Liste zum Wechseln (Fuss der Kantonsseite). Aus G4.
   ===================================================================== */
.kantone-kompakt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)}
.kantone-kompakt li{min-width:0}
.kantone-kompakt a,.kantone-kompakt [aria-current]{display:flex;align-items:center;min-height:var(--ziel-min);font-size:var(--text-15)}
.kantone-kompakt [aria-current]{font-weight:700}
@media (min-width:720px){.kantone-kompakt{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.kantone-kompakt{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* =====================================================================
   33 KAUFFORMULAR  (form.formular.kaufformular)  Preis, E-Mail (nur ohne Konto), ein roter Knopf, Satz darunter. Aus G8.
   ===================================================================== */
.kaufformular{gap:var(--s-4)}
.kaufformular .formular__aktionen{margin-top:0}
.kaufformular__preis{font-size:var(--text-gross);line-height:1.45;color:var(--ink-2)}
.kaufformular__preis b{font:700 var(--text-h3)/1 var(--schrift-titel);color:var(--ink);margin-right:var(--s-1)}
.kaufformular__mikro{margin-top:calc(-1 * var(--s-2));font-size:var(--text-klein);line-height:1.45;color:var(--ink-2)}
/* Zahlungszeile mit Schloss (Kauf und Kasse) */
.sicher{display:flex;gap:var(--s-2);align-items:center;font-size:var(--text-klein);color:var(--ink-3)}
.sicher::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ico-schloss) center/contain no-repeat;mask:var(--ico-schloss) center/contain no-repeat}

/* =====================================================================
   34 WEITER-BLOCK  (.weiter-block)  Schluss nach einem Ergebnis oder am Seitenende: 2-px-Regel, Satz, Knöpfe. Aus G3.
   ===================================================================== */
.weiter-block{display:grid;gap:var(--s-3);padding-top:var(--s-5);border-top:2px solid var(--ink);max-width:var(--breite-text)}
.weiter-block__titel{font:700 var(--text-21)/1.25 var(--schrift-titel);text-wrap:balance}
.weiter-block>p{color:var(--ink-2);line-height:1.55}
.weiter-block .knopfreihe{margin-top:var(--s-1)}
.weiter-block>.weiter-block__klein{font-size:var(--text-klein);color:var(--ink-3)}

/* =====================================================================
   35 KASSE  (.kasse)  Raster der Zahlungsseite: Formular links, «Danach» rechts (ab 1000 px). Aus G7.
   ===================================================================== */
.kasse{display:grid;gap:var(--s-7)}
.kasse__form{display:grid;gap:var(--s-5);max-width:var(--breite-schmal)}
.kasse__form .formular{max-width:none}
.kasse__inhalt{line-height:1.55}
.kasse__frei{font-size:var(--text-klein);line-height:1.5;color:var(--ink-2)}
.kasse .option--zeile{padding-block:var(--s-4)}
.kasse .option__zahl{font:700 var(--text-gross)/1.2 var(--schrift-text);color:var(--ink);font-variant-numeric:tabular-nums}
.kasse__risiko{display:grid;gap:var(--s-1);padding-top:var(--s-4);border-top:1px solid var(--linie);font-size:var(--text-15);line-height:1.5}
.kasse__risiko span{color:var(--ink-2)}
.kasse__danach{display:grid;gap:var(--s-3);align-content:start}
.kasse__danach h2{font:700 var(--text-h3)/1.15 var(--schrift-titel)}
.kasse__danach p{color:var(--ink-2);line-height:1.55}
@media (min-width:1000px){
  .kasse{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-8);align-items:start}
  .kasse__danach{padding-top:var(--s-4);border-top:2px solid var(--ink)}
}

/* ===== css/rahmen.css ===== */
/* Rahmen V2 (G0): Ergänzungen zu den Bausteinen in includes/v2/, die das Designsystem nicht abdeckt.
   Gehört nicht zum Spiegel (tools/ds_sync.sh schützt die Datei). Nur Tokens des Designsystems. */

/* Spielbare Frage am Inhaltsende (v2_empfehlung('frage')): weggewischte Karten liegen per transform
   ausserhalb und dürften die Seite nicht verbreitern. */
.empfehlung-frage{overflow-x:hidden;overflow-x:clip;display:grid;gap:var(--s-3)}
.empfehlung-frage .stapel{margin-top:var(--s-2)}
.empfehlung-frage .knopfreihe{margin-top:var(--s-2)}

/* Zugang auf Papier (v2_empfehlung('zugang') ohne flaeche): Linien in Tinte statt der hellen Granit-Linie */
.empfehlung-zugang .tarif__zeile{border-top-color:var(--ink)}
.empfehlung-zugang .tarif__lage,.empfehlung-zugang .tarif__klein{color:var(--ink-2)}
.empfehlung-zugang .abschnitt__lead+.tarif,.zugang .abschnitt__lead+.tarif{margin-top:var(--s-5)}

/* Passwort nach dem Kauf (v2_passwort_setzen): Hinweis, Fehler und Formular untereinander, schmal */
.passwort-setzen{display:grid;gap:var(--s-4);max-width:var(--breite-schmal)}

/* Fusszeile, Linkblöcke (G0c): alle 26 Kantone, Testgebiete, Ratgeber. Fliesslisten statt Spalten,
   damit 38 Links am Handy kompakt bleiben; Abstand und Zeilenhöhe halten die Tippziele über 24 px (WCAG 2.5.8). */
.fuss__index{display:grid;gap:var(--s-5);padding-top:var(--s-5);border-top:1px solid color-mix(in srgb,var(--f-ink) 18%,transparent)}
.fuss__liste{display:flex;flex-wrap:wrap;gap:0 var(--s-4)}
.fuss .fuss__liste a{padding:var(--s-1) 0;font-size:var(--text-klein);line-height:1.4}
@media (min-width:720px){
  .fuss__index{grid-column:1/-1;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);column-gap:var(--s-7)}
}

/* Hinweis unter dem Player (Video-Kurs gesperrt oder kaputt, Videos-Seite). Die Grundregel steht seit dem
   Abgleich vom 11.11. in komponenten.css; hier Zeilenhöhe und die helle Fassung auf Granit. */
.player-legende__hinweis{line-height:1.4}
.auf-flaeche .player-legende__hinweis,.abschnitt--flaeche .player-legende__hinweis,.seitenkopf--werkzeug .player-legende__hinweis{color:var(--f-ink-2)}