/* G2 Quiz (test.php): Seitenraster und kleine Ergänzungen zu den Bausteinen aus komponenten.css
   (14 Lernkarte, 15 Quiz-Oberfläche, 16 Sheet, 17 Preise). Keine eigenen Farben, nur Tokens.
   Ergänzt (im Bericht gemeldet): Gebietswahl als Links, Fragensprache, Erklärung lädt, Rückblick-Karte. */

/* Lernkarte auf dem Quiz etwas breiter als die Kartenvorschau der Startseite */
.g2{--breite-schmal:520px;padding-top:var(--s-5)}
@media (min-width:1000px){.g2{--breite-schmal:600px}}
.seite-quiz .seitenkopf__titel{max-width:22ch}

/* Handy: zuerst die Frage. Der Schnitt im Seitenkopf erscheint ab 720 px, darunter
   würde er die erste Karte unter den ersten Bildschirm schieben. */
@media (max-width:719px){
  .seite-quiz .seitenkopf--werkzeug{padding-bottom:var(--s-5)}
  .seite-quiz .seitenkopf--werkzeug .seitenkopf__bild{display:none}
}

.g2__raster{display:grid;gap:var(--s-7)}
.g2__quiz{display:grid;gap:var(--s-4);min-width:0;align-content:start}
.g2__seite{display:grid;gap:var(--s-3);align-content:start;min-width:0}
/* Desktop: dieselben Spalten wie der Seitenkopf (7/5, Abstand s-7), die Gebietswahl beginnt an der Kante des Schnitts */
@media (min-width:1000px){
  .g2__raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7);align-items:start}
}
/* Die Schnitte der Gebietswahl setzt quiz.js erst, wenn die Spalte in die Nähe kommt (data-illu) */
.g2__titel{font:700 var(--text-h4)/1.25 var(--schrift-titel);text-wrap:balance}
.g2__titel:not(:first-child){margin-top:var(--s-5)}
.g2-leise{font-size:var(--text-klein);line-height:1.5;color:var(--ink-2)}
.g2-leise .pfeil{min-height:0}
.g2-leise .knopf--text,.g2 .restfragen .knopf--text{display:inline;min-height:0;padding:0;margin:0;font-size:inherit;line-height:inherit;vertical-align:baseline}
.g2 .restfragen{display:block;line-height:1.5}
.g2 .restfragen b{font-size:var(--text-gross);line-height:1}

/* Sprachhinweis it/es/pt/en: ein Satz über der Karte, der Grund darunter (die erste Frage bleibt im ersten Bildschirm) */
.g2-sprachhinweis{padding:var(--s-3) var(--s-4);align-items:center}
.g2-sprachgrund{max-width:var(--breite-schmal)}

/* Fragensprache: Deutsch · Français als echte Links */
.g2-fragensprache{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-4);font-size:var(--text-klein);color:var(--ink-2)}
.g2-fragensprache a{display:inline-flex;align-items:center;min-height:var(--ziel-min);color:var(--ink);font-weight:600}
.g2-fragensprache a[aria-current]{text-decoration:none;cursor:default}
.g2-fragensprache a[aria-current]::before{content:"";width:16px;height:16px;margin-right:var(--s-1);background:currentColor;-webkit-mask:var(--ico-haken) center/contain no-repeat;mask:var(--ico-haken) center/contain no-repeat}

/* Gebietswahl als Links in der Form der Wahlzeilen (DESIGNSYSTEM 3.14) */
.g2-gebiete{gap:var(--s-2)}
.g2-gebiet{text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent}
.g2-gebiet:hover{text-decoration:none}
.g2-gebiet:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.g2-gebiet__punkt{width:24px;height:24px;border:1.5px solid var(--rand-feld);border-radius:50%;background:var(--karte);display:grid;place-items:center;transition:background-color var(--dauer-kurz),border-color var(--dauer-kurz)}
.g2-gebiet__punkt::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--grund);transform:scale(0);transition:transform var(--dauer-kurz)}
.g2-gebiet[aria-current]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.g2-gebiet[aria-current] .g2-gebiet__punkt{background:var(--ink);border-color:var(--ink)}
.g2-gebiet[aria-current] .g2-gebiet__punkt::before{transform:scale(1)}
@media (hover:hover){.g2-gebiet:hover .g2-gebiet__punkt{border-color:var(--ink)}}
.g2-konto{display:flex;flex-wrap:wrap;gap:0 var(--s-5);font-size:var(--text-klein)}
.g2-konto a{display:inline-flex;align-items:center;min-height:var(--ziel-min);font-weight:600}

/* Karte im Quiz: ein Stapel mit einer Karte oben, die Reststapel-Karten dahinter */
.g2 .stapel{margin-bottom:var(--s-5)}
.g2 .stapel__deck{height:420px}
.g2 .lernkarte__frage{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
.g2 .lernkarte__seite--hinten .lernkarte__weiter{padding-top:var(--s-4)}
.g2 .lernkarte__seite--hinten .knopf--text{min-height:var(--ziel-min);font-size:var(--text-klein)}
.g2 .lernkarte__fuss{padding-top:var(--s-3)}
.g2 .g2-umdrehen{margin-left:0;padding:0;color:var(--link);font-size:var(--text-klein);font-weight:600}
/* Erklärung als Lerntext: Grösse und Farbe des Fliesstexts, nicht die kleine graue Notiz */
.g2 .lernkarte .erklaerung,.g2-review .erklaerung{font-size:var(--text);line-height:1.55;color:var(--ink)}
@media (max-width:719px){.g2 .lernkarte__bild{height:96px}}
.g2-erkl--laedt{font-size:var(--text-klein);color:var(--ink-3)}
.g2-erkl__fehler{display:grid;gap:var(--s-2);margin:var(--s-2) 0;font-size:var(--text-klein)}
.g2 .visual--kanton .kantonskarte{width:120px}
.g2 .lernkarte__seite .hinweis{margin:var(--s-2) 0}
.g2 .erklaerung--gesperrt p:first-child{display:block;-webkit-line-clamp:unset;overflow:visible}

/* Steuerung unter der Karte */
.g2 .quiz__steuer{min-height:var(--knopf-hoehe-klein)}
.g2 .quiz__steuer .knopf--text{padding:0}
.g2-steuer__rechts{margin-left:auto}
/* Simulation am Handy: Zurück und Weiter als Leiste am unteren Rand, bündig und flach wie das Dock */
@media (max-width:719px){
  .g2 .g2-leiste{position:sticky;bottom:0;z-index:var(--z-dock);margin-inline:calc(-1 * var(--gut));padding:var(--s-3) var(--gut) calc(var(--s-3) + env(safe-area-inset-bottom));background:var(--grund);border-top:1px solid var(--linie)}
}
.g2-fortsetzen .knopfreihe{margin-top:var(--s-2)}

/* Simulation: Raster unter der Karte, Auswertung, Rückblick auf eine Frage */
.g2-sim{display:grid;gap:var(--s-2)}
.g2-sim .simraster__legende{margin-top:var(--s-1)}
.g2-offen{display:grid;gap:var(--s-3)}
.g2-offen .knopfreihe{gap:var(--s-2) var(--s-4)}
.g2-review{scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-4))}
.g2-review .lernkarte--einzeln{max-width:none}
.g2-review .urteil{margin-top:var(--s-4)}

/* Ergebnis und Sperre im Fluss */
.g2-ergebnis{scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-4))}
.g2-ergebnis:focus{outline:none}
.g2-ergebnis__titel{font:700 var(--text-h4)/1.25 var(--schrift-titel);margin-top:var(--s-3)}
.g2-ergebnis .ergebnis__text a{font-weight:600}
.g2-sperre{display:grid;gap:var(--s-4);scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-4))}
.g2-sperre:focus{outline:none}
.g2-sperre .lernkarte__seite{gap:var(--s-4)}
.g2-sperre__titel{font:700 var(--text-h3)/1.15 var(--schrift-titel);text-wrap:pretty}
.g2-sperre__text{color:var(--ink-2);line-height:1.5}
.g2-tarif{margin-top:var(--s-1)}
.g2-tarif .tarif__zeile .knopf{white-space:nowrap}
.sheet .g2-tarif{margin-top:0}

@media (max-width:379px){
  .g2-tarif .tarif__zeile{grid-template-columns:1fr}
  .g2-tarif .tarif__zeile .knopf{width:100%}
}

/* Lernplan per E-Mail (nur mit V2_LERNPLAN) */
.g2-lernplan{margin-top:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--linie)}
.g2-lernplan #eq-lead-msg:empty{display:none}

/* Gebiet-Bildchen gleich gewichtet: Band mit Fokus statt contain (Gesamtkritik Design 14) */
.gebietwahl .illu{--m-size:cover;--m-pos:var(--m-fokus,center)}

/* Beispielfragen unter dem Quiz (de, fr; Konkurrenzanalyse 12.11., M1): Baustein 24 «Fragen und
   Antworten», je Gebiet eine Gruppe. Frage im summary, Antworten, Lösung, Erklärung und Merksatz
   im aufgeklappten Teil. Desktop zwei Spalten, Handy eine. */
.g2-beispiele{border-top:1px solid var(--linie)}
.g2-beispiele__raster{display:grid;gap:var(--s-6);margin-top:var(--s-6)}
@media (min-width:1000px){.g2-beispiele__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7)}}
.g2-beispiele__gebietname{font:700 var(--text-21)/1.25 var(--schrift-titel);margin-bottom:var(--s-2)}
.g2-beispiele .fragen{max-width:none}
.g2-beispiel>summary{font-size:var(--text-gross);line-height:1.35;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
.g2-beispiel__inhalt{display:grid;gap:var(--s-3);padding-right:0}
.g2-beispiel__optionen{margin:0;padding-left:1.6em;list-style:upper-alpha;display:grid;gap:var(--s-1);color:var(--ink-2)}
.g2-beispiel__optionen li::marker{font-weight:700;color:var(--ink)}
.g2-beispiel__richtig{margin:var(--s-1) 0 0}
.g2-beispiel .merksatz{margin:0}
.g2-beispiele__schluss{margin-top:var(--s-6)}