/* G3 Werkzeuge: Ergänzungen zum Designsystem V2 für Einbürgerungs-Check, Kosten-Rechner,
   Kantone-Quiz und Glossar. Nur Tokens, keine Farben fest, keine Schatten, keine Pillen.
   Neue Bausteine (im Bericht gemeldet): .werkzeug-flaeche, .jahre, .weiter-block, .kq__*, .glossar__*. */

/* ---------- gemeinsam ---------- */
.werkzeug-flaeche{display:grid;gap:var(--s-6)}
.werkzeug-flaeche__titel{font:700 var(--text-h3)/1.15 var(--schrift-titel);text-wrap:balance}
.werkzeug-text{max-width:var(--breite-text)}
.werkzeug-text h2{text-wrap:balance}
.werkzeug-text h3{font:700 var(--text-h4)/1.3 var(--schrift-titel);margin-top:var(--s-5)}
.werkzeug-text h3+p{margin-top:var(--s-2)}
.werkzeug-text p{color:var(--ink-2);line-height:1.6}

/* Schlussblock nach einem Ergebnis oder am Seitenende: flach, 2-px-Regel wie .empfehlung */
.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);font-size:var(--text);line-height:1.55}
.weiter-block .knopfreihe{margin-top:var(--s-1)}
.weiter-block__klein{font-size:var(--text-klein)!important;color:var(--ink-3)!important}
.empfehlung--ohne-bild{grid-template-columns:1fr}
@media (min-width:720px){.empfehlung--ohne-bild{grid-template-columns:1fr}}

/* ---------- Einbürgerungs-Check ---------- */
.check{display:grid;gap:var(--s-5);max-width:38rem}
.check .schritt{max-width:none}
.check .schritt[hidden]{display:none}
.check .schritt__frage{text-wrap:balance}
.schritt__hilfe{color:var(--ink-2);font-size:var(--text-15);line-height:1.5}
.check .satzwahl{font-size:var(--text-21)}
.check .hinweis{font-size:var(--text-15)}
.check .hinweis[hidden]{display:none}

/* Jahre und Alter: eine Zeile je Angabe, Wert als Auswahl rechts */
.jahre{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie)}
.jahre__zeile{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-1);padding:var(--s-3) 0;border-top:1px solid var(--linie)}
.jahre__zeile label{font-size:var(--text);line-height:1.35}
.jahre__zeile .wahl,.jahre__zeile .wahl select{width:100%}
.jahre__zeile .wahl select{font-size:var(--text-21)}
@media (min-width:720px){.jahre__zeile{grid-template-columns:minmax(0,1fr) 15rem;align-items:center;column-gap:var(--s-5)}}
.jahre__legende{font-weight:600;font-size:var(--text);margin-bottom:var(--s-1);padding:0}
.check__ueben{max-width:none}
.check__ueben [hidden]{display:none}
.jahre__zeile small{display:block;margin-top:2px;font-size:var(--text-mini);color:var(--ink-3)}

.check__ergebnis{display:grid;gap:var(--s-5)}
.check__ergebnis:focus{outline:none}
.check .pruefung__satz{max-width:none;text-wrap:balance}
.pruefung__liste li span{line-height:1.45}
.check__kanton{display:grid;gap:var(--s-2)}
.check__kanton p{line-height:1.55}
.check__kanton b{font-weight:600}

/* ---------- Kosten-Rechner ---------- */
.rechner{display:grid;gap:var(--s-5);max-width:40rem}
.rechner__ergebnis{display:grid;gap:var(--s-5)}
.rechner__ergebnis[hidden]{display:none}
/* Verkaufsblock nach dem Ergebnis: Hülle ohne eigenes Raster, die Kinder stehen im Raster von .rechner */
.rechner__weiter:not([hidden]){display:contents}
.rechner__satz{font-size:var(--text-gross);line-height:1.55}
.rechner .kosten__summe b{font-variant-numeric:tabular-nums}
.tabelle--kosten table,.kosten-vergleich table{font-variant-numeric:tabular-nums}
.kosten-vergleich td.zahl,.kosten-vergleich th.zahl{white-space:nowrap}
.kosten-vergleich tbody th a{color:var(--ink)}
@media (min-width:600px){.kosten-vergleich tr.is-gewaehlt{box-shadow:-8px 0 0 var(--grund-2),8px 0 0 var(--grund-2)}}

/* ---------- Kantone-Quiz ---------- */
.kq{display:grid;gap:var(--s-5)}
.kq__modus{max-width:100%}
.kq__buehne{display:grid;gap:var(--s-5);align-items:start}
@media (min-width:960px){.kq__buehne{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7)}}
.kq__karte{position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.kq__karte .kantonskarte{min-height:120px}
.kq__karte .kantonskarte--quiz path{cursor:pointer}
@media (hover:hover){.kq__karte .kantonskarte--quiz path:not(.is-richtig):not(.is-falsch):not(.is-gefunden):hover{fill:var(--karte-hover)}}
.kq__karte path.is-gesucht{fill:var(--richtig-ink)}
.kq__karte path.is-frage{fill:var(--karte-aktiv)}
.kq__panel{display:grid;gap:var(--s-4);align-content:start}
.kq__panel[hidden]{display:none}
.kq__panel .kantonequiz__aufgabe{text-wrap:balance}
.kq__panel .kantonequiz__rueckmeldung{font-weight:500;line-height:1.5}
.kq__panel .kantonequiz__rueckmeldung b{font-weight:700}
.kq__steuer{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.kq__steuer [hidden]{display:none}
.kq__hilfe{font-size:var(--text-klein);color:var(--ink-3);line-height:1.45}
.kq .antworten{margin:0}
.kq .antwort{font-size:var(--text)}
.kq .antwort:disabled{cursor:default;opacity:1}

/* Nahauswahl: am Handy liegen kleine Kantone dicht beieinander. Wer neben Basel-Stadt, Zug oder
   Appenzell tippt, wählt hier aus den Kantonen in der Nähe (Tippziele 44 px). */
.kq__nah{position:absolute;z-index:var(--z-karte);left:var(--x,8px);top:var(--y,8px);width:min(15rem,calc(100% - 16px));display:grid;gap:var(--s-2);padding:var(--s-3);background:var(--karte);border:1.5px solid var(--ink);border-radius:var(--r-feld);box-shadow:var(--schatten-pop)}
.kq__nah[hidden]{display:none}
.kq__nah p{font-size:var(--text-klein);color:var(--ink-2)}
.kq__nah button{min-height:var(--ziel-min);text-align:left;justify-content:flex-start}

.kq__ergebnis{display:grid;gap:var(--s-4)}
.kq__ergebnis[hidden]{display:none}
.kq__ergebnis p{line-height:1.55;color:var(--ink-2)}
.kq__ergebnis .kq__zeit{font-size:var(--text-klein);color:var(--ink-3)}

/* Lernen: Angaben zum gewählten Kanton, Klassen aus .kantonsblatt */
.kq .kantonsblatt__gross--satz{font-size:var(--text-gross)}
.kq .kantonsblatt__liste dd{max-width:60%}

.kantone-tabelle td,.kantone-tabelle th{vertical-align:top}
.kantone-tabelle tbody th a{color:var(--ink)}
@media (max-width:599px){
  .kantone-tabelle.tabelle--stapel td[data-label]{justify-content:flex-start;gap:var(--s-2)}
  .kantone-tabelle.tabelle--stapel td[data-label]::before{min-width:7.5em}
}

/* ---------- Glossar ---------- */
.glossar{display:grid;gap:var(--s-5)}
@media (min-width:1000px){.glossar{grid-template-columns:15rem minmax(0,var(--breite-text));gap:var(--s-8);align-items:start}}
.glossar__seite{display:grid;gap:var(--s-4)}
@media (min-width:1000px){.glossar__seite{position:sticky;top:calc(var(--kopf-hoehe) + var(--s-5))}}
.glossar__suche label{display:block;font-size:var(--text-klein);color:var(--ink-2);margin-bottom:var(--s-2)}
.glossar__zahl{font-size:var(--text-mini);color:var(--ink-3);margin-top:var(--s-2)}
.glossar__buchstaben{display:flex;flex-wrap:wrap;gap:var(--s-1);list-style:none;margin:0;padding:0}
.glossar__buchstaben a{display:grid;place-items:center;min-width:var(--ziel-min);height:var(--ziel-min);border-radius:var(--r-feld);background:var(--grund-2);color:var(--ink);font:700 var(--text-gross)/1 var(--schrift-titel);text-decoration:none}
@media (hover:hover){.glossar__buchstaben a:hover{background:var(--ink);color:var(--grund)}}
.glossar__buchstaben a.is-leer{opacity:.35;pointer-events:none}
.glossar__liste{min-width:0}
.glossar__liste h2{font:800 var(--text-h2)/1 var(--schrift-titel);margin:var(--s-7) 0 0;padding-bottom:var(--s-2);border-bottom:2px solid var(--ink);scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))}
.glossar__liste h2:first-child{margin-top:0}
.glossar__liste dl{display:block;margin:0}
.glossar__eintrag{padding:var(--s-4) 0;border-bottom:1px solid var(--linie);scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-5))}
.glossar__eintrag[hidden],.glossar__gruppe[hidden]{display:none}
.glossar__eintrag dt{font:700 var(--text-21)/1.25 var(--schrift-titel);margin:0;hyphens:auto}
.glossar__eintrag dd{margin:var(--s-2) 0 0;font-size:var(--text-artikel);line-height:1.65;color:var(--ink);hyphens:auto}
.glossar__eintrag dd p{max-width:var(--breite-text)}
.glossar__eintrag dd .glossar__gebiet{margin-top:var(--s-2);font-size:var(--text-mini);color:var(--ink-3);line-height:1.4}
.glossar__eintrag:target dt{background:var(--merk);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.glossar__leer{margin-top:var(--s-2);font-weight:600}
.glossar__leer[hidden]{display:none}
.glossar[data-suche] .glossar__buchstaben{display:none}
.werkzeug-vortext{margin:var(--s-2) 0 var(--s-4);color:var(--ink-2)}
/* Raster-Kinder dürfen schrumpfen (sonst drückt der Reiter die Karte über den Rand) */
.kq>*,.kq__buehne>*,.check>*,.rechner>*,.glossar>*{min-width:0}
.kantone-liste .kantonzeile__test{line-height:1.5}
/* Handy: erst die Aufgabe, dann die Karte (man liest die Frage, bevor man tippt) */
@media (max-width:959px){
  .kq__buehne{gap:var(--s-3)}
  .kq__buehne>.kq__panel:not([hidden]):not(.kq__ergebnis){display:contents}
  .kq__ergebnis{order:-1}
  .kq__panel .kantonequiz__stand,.kq__panel .kantonequiz__aufgabe,.kq__panel .satzwahl{order:-1}
  .kq__panel .antworten,.kq__panel .kantonequiz__rueckmeldung,.kq__panel .kq__steuer,.kq__panel .kantonsblatt{order:1}
  .kq__panel .kantonequiz__rueckmeldung:empty{display:none}
}
.kosten-offen{display:grid;gap:var(--s-3)}
.kosten-offen[hidden],.rechner .kosten[hidden]{display:none}
.kosten-offen p{line-height:1.55}
.kosten-offen .kosten__summe b{font-size:var(--text-h3)}
.kosten-vergleich__satz{font-size:var(--text-klein);color:var(--ink-2)}
/* Handy: eine Zeile je Kanton, Name links, Total rechts, darunter klein Kanton und Gemeinde (KRITIK G3 10) */
@media (max-width:599px){
  .kosten-vergleich.tabelle--stapel tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:var(--s-3);row-gap:0;padding:var(--s-2) 0;border:0;border-bottom:1px solid var(--linie)}
  .kosten-vergleich.tabelle--stapel th,.kosten-vergleich.tabelle--stapel td{border:0!important;padding:0}
  .kosten-vergleich.tabelle--stapel tbody th{grid-column:1/3;grid-row:1;margin:0;font-size:var(--text);line-height:1.4}
  .kosten-vergleich.tabelle--stapel td.kosten-vergleich__total{grid-column:3;grid-row:1;display:block;text-align:right;line-height:1.4}
  .kosten-vergleich.tabelle--stapel td.kosten-vergleich__total::before{content:none}
  .kosten-vergleich.tabelle--stapel td.kosten-vergleich__kt,.kosten-vergleich.tabelle--stapel td.kosten-vergleich__gm{grid-row:2;display:block;font-size:var(--text-mini);line-height:1.45;color:var(--ink-3);text-align:left}
  .kosten-vergleich.tabelle--stapel td.kosten-vergleich__kt{grid-column:1}
  .kosten-vergleich.tabelle--stapel td.kosten-vergleich__gm{grid-column:2/4}
  .kosten-vergleich.tabelle--stapel td.kosten-vergleich__kt,.kosten-vergleich.tabelle--stapel td.kosten-vergleich__gm{white-space:normal}
  .kosten-vergleich.tabelle--stapel td.kosten-vergleich__kt::before,.kosten-vergleich.tabelle--stapel td.kosten-vergleich__gm::before{content:attr(data-kurz);min-width:0;margin-right:.3em;color:var(--ink-3)}
  .kosten-vergleich.tabelle--stapel table,.kosten-vergleich.tabelle--stapel tbody{border:0}
  .kosten-vergleich.tabelle--stapel td.kosten-vergleich__satz{grid-column:1/-1;grid-row:2;display:block;line-height:1.45}
}
/* Hauptorte am Handy: Karte kleiner, damit Frage, Antworten und Rückmeldung in einen Bildschirm passen */
@media (max-width:959px){.kq[data-modus="hauptorte"] .kq__karte{width:min(100%,260px);justify-self:center}}
/* DS: .tabelle:has(tr.is-gewaehlt) zieht mit negativem Rand nach aussen, max-width:100% kürzt dann rechts (an G0 gemeldet) */
.kosten-vergleich.tabelle:has(tr.is-gewaehlt){max-width:none}

/* ---------- Nachbesserung Design 12.11. (Gesamtkritik Design 12, 13, 21) ---------- */
/* Werkzeugköpfe behalten am Handy ihr 150-px-Band (Koordinator 12.11.: Kai will mehr Grafik, nicht weniger). */
/* Kantonsnamen im Vergleich: Tippziel über die ganze Zeile (Handy) bzw. die Zellenhöhe (Tabelle) */
@media (max-width:599px){
  .kosten-vergleich.tabelle--stapel tbody tr{position:relative}
  .kosten-vergleich.tabelle--stapel tbody th a::after{content:"";position:absolute;inset:0}
}
@media (min-width:600px){
  .kosten-vergleich tbody th a{display:inline-block;padding-block:var(--s-3);margin-block:calc(-1 * var(--s-3))}
}

/* Kurs-Empfehlung: Poster gross genug, dass sein Titel lesbar bleibt (Gesamtkritik Design 13, Entscheid 7:
   Poster unverändert). Handy über dem Text in voller Breite, ab 720 px 280 px daneben.
   Wunsch an G0: in komponenten.css (.empfehlung--kurs) übernehmen, dann hier streichen. */
.empfehlung--kurs{grid-template-columns:minmax(0,1fr)}
.empfehlung--kurs img{width:100%;max-width:420px}
@media (min-width:720px){
  .empfehlung--kurs{grid-template-columns:280px minmax(0,1fr)}
  .empfehlung--kurs img{width:280px}
}

/* Kosten-Rechner vor der Kantonswahl: im Abschnitt steht nur das Auswahlfeld, der volle Abschnittsabstand
   (72 + 32 px) wirkt dann wie ein Loch über dem Vergleich. Nach der Wahl gilt wieder der normale Rhythmus. */
.abschnitt:has(.rechner .rechner__ergebnis[hidden]){padding-bottom:var(--s-5)}