/* G4 Kantone (einbuergerung/index.php): Ergänzungen im Stil der Musterseite.
   Nur eigene Klassen mit Präfix g4-, sonst Bausteine aus komponenten.css
   (seitenkopf--kanton, kantonskarte, kantonsblatt, kantonzeile, tabelle--kosten, fragen, hinweis). */

/* Karte: Platz von Anfang an reserviert (kein Sprung, wenn karte.js das SVG einsetzt) */
.g4-karte{aspect-ratio:699/453;width:100%}
.g4-karte img{display:block;width:100%;height:auto}
.g4-karte:empty{background:transparent}

/* Übersicht: Karte zum Antippen, darunter der gewählte Kanton */
.g4-wahl{display:grid;gap:var(--s-3);align-content:start;max-width:520px}
.g4-wahl .kantonskarte{max-width:none}
.g4-wahl__hinweis{font-size:var(--text-klein);color:var(--ink-3)}
.g4-wahl__blatt{border-top:2px solid var(--ink);padding-top:var(--s-3);display:grid;gap:var(--s-2)}
.g4-wahl__blatt .kantonsblatt__gross{font-size:var(--text-21)}
@media (min-width:720px){
  .seitenkopf--kanton .g4-wahl{grid-column:2;grid-row:1/span 6}
  /* die Regel für .kantonskarte im Seitenkopf gilt nicht für die Karte in .g4-wahl: Hinweis bündig darunter */
  .seitenkopf--kanton .g4-wahl .kantonskarte{grid-column:auto;grid-row:auto}
}

/* Erster Abschnitt nach dem Seitenkopf: die Karte steht schon mit Luft darüber */
.g4-test{padding-top:var(--s-5)}

/* Zwei Spalten ab Tablet quer, am Handy untereinander */
.g4-zwei{display:grid;gap:var(--s-8)}
.g4-zwei>div{min-width:0}
@media (min-width:960px){.g4-zwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-9)}}
.g4-titel-folge{margin-top:var(--s-7)}

/* Angaben als Zeilen mit Linie (wie .kantonsblatt__liste) */
.g4-angaben{margin:0;display:grid;border-bottom:1px solid var(--linie)}
.g4-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)}
.g4-angaben dt{color:var(--ink-2)}
.g4-angaben dd{margin:0 0 0 auto;min-width:0;font-weight:600;text-align:right;overflow-wrap:anywhere}

/* Prüfung: längere Angaben untereinander statt rechtsbündig */
.g4-blatt .kantonsblatt__gross{max-width:30ch}
.g4-fakten{margin:var(--s-4) 0 0;display:grid}
.g4-fakten div{padding:var(--s-3) 0;border-top:1px solid var(--linie)}
.g4-fakten dt{font-size:var(--text-mini);font-weight:600;color:var(--ink-3);margin-bottom:2px}
.g4-fakten dd{margin:0;font-size:var(--text-15);line-height:1.5;color:var(--ink-2)}

.g4-satz{color:var(--ink-2);line-height:1.55;max-width:36em;margin-bottom:var(--s-4)}
.g4-grund{margin-top:var(--s-3);font-size:var(--text-15);line-height:1.5;color:var(--ink-2);max-width:36em}
.g4-grund b{color:var(--ink)}
.g4-hinweis{margin-top:var(--s-5)}
.g4-tabelle{margin-top:var(--s-4)}

/* Links, die weiterführen: untereinander, jeder ein ganzes Tippziel */
.g4-weiter{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);margin-top:var(--s-4)}

/* Ablauf: die Reihenfolge ist Information, darum Ziffern */
.g4-ablauf{list-style:none;margin:0;padding:0;counter-reset:g4;display:grid;gap:var(--s-4)}
.g4-ablauf li{counter-increment:g4;display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px var(--s-3)}
.g4-ablauf li::before{content:counter(g4);grid-row:1/span 2;font:800 var(--text-h3)/1 var(--schrift-titel);color:var(--ink)}
.g4-ablauf li>p{grid-column:2}
.g4-ablauf__titel{font-weight:700}
.g4-ablauf li>p+p{font-size:var(--text-15);line-height:1.5;color:var(--ink-2)}

.g4-dokumente{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie)}
.g4-dokumente li{padding:var(--s-3) 0;border-top:1px solid var(--linie);font-size:var(--text-15);line-height:1.45}

/* Vorbereitung: der Schlussaufruf mit dem einen roten Knopf. Linie im Satzspiegel, Text auf der Achse der Seite */
.g4-vor .g4-schmal{border-top:2px solid var(--ink);padding-top:var(--s-7)}
.g4-schmal{max-width:40rem}
.g4-vor__text{font-size:var(--text-gross);line-height:1.55;max-width:36em;margin-bottom:var(--s-4)}
.g4-mikro{margin-top:var(--s-2);font-size:var(--text-klein);color:var(--ink-3)}
.g4-h3{font:700 var(--text-h4)/1.3 var(--schrift-titel);margin:var(--s-7) 0 var(--s-3)}
.g4-gebiete{list-style:none;margin:0;padding:0;display:grid;border-bottom:1px solid var(--linie)}
.g4-gebiete li{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:var(--ziel-min);padding:var(--s-2) 0;border-top:1px solid var(--linie)}
.g4-gebiete span{font-size:var(--text-klein);color:var(--ink-3);white-space:nowrap}
@media (min-width:720px){.g4-gebiete{grid-template-columns:1fr 1fr;column-gap:var(--s-7);border-bottom:0}.g4-gebiete li:nth-last-child(-n+2){border-bottom:1px solid var(--linie)}}
.g4-frage{margin-top:var(--s-6)}
.g4-frage .empfehlung-frage{padding-block:0}
.g4-kurs{margin-top:var(--s-7)}
.g4-h3--erst{margin-top:0}
.g4-summe-text b{font-size:var(--text-h3);line-height:1.2}

/* Kantonslisten */
.g4-liste .kantonzeile>p{grid-column:2}
.g4-liste .g4-klein{font-size:var(--text-mini);color:var(--ink-3)}
/* Frage-Kasten ohne eigene Titelgrösse: er steht seit der Nachbesserung 12.11. überall ohne Rubrik (Gesamtkritik Design 11, 19) */

/* 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}
}