/* =====================================================================
   G7 Konto und Kasse: Anmelden, Konto erstellen, Passwort, Bestätigung,
   Konto («Dein Stand»), Kasse, Danke-Seite, Download-Fehler.
   Nur Ergänzungen zum Designsystem (tokens, base, komponenten): Abstände
   über --s-*, Schrift über --text-*, keine Farben ausser Tokens. Im Bericht G7 gemeldet.
   ===================================================================== */

/* ---------- Konto-Seiten: Inhalt unter dem Seitenkopf ---------- */
.g7-inhalt{padding:var(--s-6) 0 var(--abschnitt-unten)}
.g7-inhalt>.wrap{display:grid;gap:var(--s-6)}
.g7-schmal{display:grid;gap:var(--s-5);max-width:var(--breite-schmal)}
.g7-schmal .formular{max-width:none}
.g7-mikro{font-size:var(--text-klein);line-height:1.5;color:var(--ink-2)}
.g7-mikro a{color:var(--ink);font-weight:600}
.g7-wechsel{padding-top:var(--s-5);border-top:1px solid var(--linie);font-size:var(--text-15);color:var(--ink-2)}
.g7-wechsel a{color:var(--ink);font-weight:600}
/* «Passwort vergessen?» rechts unter dem Passwortfeld, Tippziel 44 px */
.g7-vergessen{display:flex;justify-content:flex-end;margin-top:calc(-1 * var(--s-2))}
.g7-vergessen a{display:inline-flex;align-items:center;min-height:var(--ziel-min);font-size:var(--text-klein);font-weight:600;color:var(--ink)}
@media (min-width:720px){.g7-inhalt{padding-top:var(--s-7)}}

/* ---------- Kasse ---------- */
.g7-kasse{display:grid;gap:var(--s-7)}
.g7-kasse__form{display:grid;gap:var(--s-5);max-width:var(--breite-schmal)}
.g7-kasse__form .formular{max-width:none}
.g7-kasse__inhalt{font-size:var(--text);line-height:1.55}
.g7-kasse__frei{font-size:var(--text-klein);line-height:1.5;color:var(--ink-2)}
.g7-kasse .option--zeile{padding-block:var(--s-4)}
.g7-kasse .option--zeile small{font-size:var(--text-klein)}
.g7-kasse .option__zahl{font:700 var(--text-gross)/1.2 var(--schrift-text);color:var(--ink);font-variant-numeric:tabular-nums}
.g7-kasse .haken{padding-top:0}
.g7-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}
.g7-risiko b{font-weight:700}
.g7-risiko span{color:var(--ink-2)}
.g7-angemeldet{font-size:var(--text-15);color:var(--ink-2)}
.g7-angemeldet b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.g7-danach{display:grid;gap:var(--s-3);align-content:start}
.g7-danach h2{font:700 var(--text-h3)/1.15 var(--schrift-titel)}
.g7-danach p{color:var(--ink-2);line-height:1.55}
.g7-sicher{display:flex;gap:var(--s-2);align-items:center;font-size:var(--text-klein);color:var(--ink-3)}
.g7-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}
@media (min-width:1000px){
  .g7-kasse{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-8);align-items:start}
  .g7-danach{padding-top:var(--s-4);border-top:2px solid var(--ink)}
}

/* ---------- Danke-Seite: Lernweg in drei Schritten ---------- */
.g7-lernweg{display:grid;gap:var(--s-4);max-width:var(--breite-mittel)}
.g7-lernweg h2{font:700 var(--text-h3)/1.15 var(--schrift-titel)}
.g7-schritte{list-style:none;margin:0;padding:0;counter-reset:g7s;border-bottom:1px solid var(--linie)}
.g7-schritte li{counter-increment:g7s;display:grid;grid-template-columns:var(--s-7) 1fr;gap:var(--s-3);padding:var(--s-4) 0;border-top:1px solid var(--linie);line-height:1.5}
.g7-schritte li::before{content:counter(g7s);font:700 var(--text-h4)/1.3 var(--schrift-titel);color:var(--ink)}
.g7-lernweg .knopfreihe{margin-top:var(--s-2)}

/* ---------- Konto «Dein Stand» ---------- */
.g7-stand{display:grid;gap:var(--s-3)}
.g7-stand__satz{font-size:var(--text-gross);line-height:1.5}
.g7-stand__satz b{font:700 var(--text-21)/1 var(--schrift-titel)}
.g7-block{display:grid;gap:var(--s-4);align-content:start}
.g7-spalte{gap:var(--s-7)}
.g7-block .abschnitt__titel{margin-bottom:0}
/* nur Fliesstext-Absätze: Datum, Satz und Mikrotext behalten ihre eigene Zeilenhöhe (Gesamtkritik Design 10) */
.g7-block p:not([class]){line-height:1.55}
.g7-block__text{color:var(--ink-2)}
.g7-vergleich{font-size:var(--text-klein);line-height:1.5;color:var(--ink-2)}
.g7-gebietlink{font-size:var(--text-klein);font-weight:600;color:var(--ink);grid-column:2/-1}
.zugangsstatus .marke{flex:none}
.zugangsstatus__aktion .g7-mikro{flex-basis:100%}
.g7-abmelden{padding-top:var(--s-5);border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center;font-size:var(--text-15);color:var(--ink-2)}
.g7-abmelden b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}

/* ---------- Korrekturlauf (Kritik G7, 12.11.2026) ---------- */
/* Überschriften ausgeglichen umbrechen, kein einzelnes Wort auf der letzten Zeile (Wunsch an G0: allgemein in .seitenkopf__titel) */
.seite-konto .seitenkopf__titel,.seite-kasse .seitenkopf__titel,.seite-konto .seitenkopf__lead{text-wrap:balance}
/* Wer kassiert, direkt unter dem Bezahlknopf */
.g7-stripe{font-size:var(--text-klein);line-height:1.5;color:var(--ink-2)}
.g7-stripe a{color:var(--ink);font-weight:600}
/* Kasse am Handy: Wahl, Inhalt und Knopf früh im Bild; der Schnitt erst ab 720 px (Wunsch an G0: Option für werkzeug) */
@media (max-width:719px){
  .seite-kasse .seitenkopf--werkzeug{padding-bottom:var(--s-5)}
  .seite-kasse .seitenkopf--werkzeug .seitenkopf__bild{display:none}
  .seite-kasse .g7-kasse-abschnitt{padding-top:var(--s-5)}
}
/* Alleinstehende Links mit Tippziel 44 px */
.g7-wechsel a,.g7-abmelden a{display:inline-flex;align-items:center;min-height:var(--ziel-min)}

/* ---------- Nachbesserung Design 12.11. (Gesamtkritik Design 5, 10, 14) ---------- */
/* Konto-Kopf: die H1 bricht nicht vor dem letzten Wort, auch am Desktop nicht («Neues Passwort festlegen»).
   Wunsch an G0: diese Regeln in komponenten.css (.seitenkopf--konto) übernehmen. */
.seitenkopf--konto .seitenkopf__titel{max-width:none}
/* Handy: H1 neben dem kleinen Schnitt, Lead, Meta und Knöpfe darunter in voller Breite */
@media (max-width:719px){
  .seitenkopf--konto{padding-top:var(--s-6)}
  .seitenkopf--konto .seitenkopf__in{grid-template-columns:minmax(0,1fr) 96px;row-gap:var(--s-3);align-items:start}
  .seitenkopf--konto .seitenkopf__text{display:contents}
  .seitenkopf--konto .seitenkopf__titel{grid-column:1;grid-row:1;align-self:center}
  .seitenkopf--konto .seitenkopf__bild{grid-column:2;grid-row:1;width:96px}
  .seitenkopf--konto .seitenkopf__text>:not(.seitenkopf__titel){grid-column:1/-1}
  /* Konto ohne Lead: die E-Mail-Adresse steht direkt unter «Dein Stand», neben dem Schnitt */
  .seite-dashboard .seitenkopf--konto .seitenkopf__titel{align-self:end}
  .seite-dashboard .seitenkopf--konto .seitenkopf__text>.seitenkopf__meta{grid-column:1;grid-row:2;align-self:start}
  .seite-dashboard .seitenkopf--konto .seitenkopf__bild{grid-row:1/span 2;align-self:center}
}

/* Dashboard: der Seitenkopf hält unten schon Abstand, die Linie des Zugangs folgt ohne zweiten Leerraum */
.seite-dashboard .g7-inhalt{padding-top:0}
/* Dashboard: Knöpfe am Handy eine Breite, untereinander; zweite Gruppe (Weiter üben, Video-Kurs) mit Abstand */
@media (max-width:719px){
  .zugangsstatus__aktion{display:grid;gap:var(--s-2)}
  .zugangsstatus__aktion .knopf{width:100%}
  .zugangsstatus__aktion .pfeil{justify-self:start}
}
.zugangsstatus__aktion .g7-mikro+.knopf,.zugangsstatus__aktion .g7-mikro+.pfeil{margin-top:var(--s-2)}

/* Gebiet-Bildchen gleich gewichtet: Band mit Fokus statt contain (Querformat Geografie wie Hochformat Geschichte) */
.gebietstand .illu{--m-size:cover;--m-pos:var(--m-fokus,center)}