/* G1 Startseite und Sprach-Landingpages (V2 «Taschentrainer», Farbwelt a).
   Aufbau aus dem Entwurf v2-taschentrainer, Namen und Werte auf das Designsystem gebracht
   (DESIGNSYSTEM 8 «V2-Startseite auf Systemnamen»). Nur Tokens; Bausteine (.stapel, .lernkarte,
   .kantonsblatt, .gebietstand, .tarif, .zugang, .buch, .werkzeug, .anriss) kommen aus komponenten.css.
   Hier nur, was es nur auf diesen Seiten gibt: Hero, Abschnitts-Raster, Simulationsmuster, Posterreihe,
   Kantonsindex, Schlussbild. */

/* ---------- Hero: flache Granit-Fläche, der Stapel ist das Bild, der Linolschnitt läuft dahinter ---------- */
.hero{background:var(--flaeche);color:var(--f-ink);padding:var(--s-3) 0 var(--s-5);--fokus:var(--f-ink);--link:var(--f-ink);overflow-x:clip}
.hero__in{width:min(var(--breite-seite),100% - 2*var(--gut));margin-inline:auto;display:grid;gap:calc(var(--s-4) + 2px)}
.hero__lead{display:none;margin-top:var(--s-4);font-size:var(--text-gross);line-height:1.5;color:var(--f-ink-2);max-width:30em}
.hero--zugang .hero__lead{display:block}
.hero__bild{margin:0 calc(-1 * var(--gut));aspect-ratio:1600/760}
/* Die Karte deckt nur den Talboden: Zug und Viaduktbögen bleiben frei (ENDABNAHME-2, 1; gemessen −56 px) */
.hero__play{position:relative;z-index:var(--z-karte);margin-top:calc(var(--s-2) - var(--s-8))}
.hero .stapel{max-width:none;margin-bottom:var(--s-3)}
.hero__cta{display:grid;gap:var(--s-3);justify-items:start}
.hero__cta .hero__knopf{width:100%}
.hero__cta .knopfreihe{width:100%}
.hero__cta .knopfreihe .knopf{flex:1 1 12em}
.hero__sprache{font-size:var(--text-klein);line-height:1.45;color:var(--f-ink)}
.hero__note{font-size:var(--text-klein);line-height:1.45;color:var(--f-ink-2)}
.hero__note a{color:var(--f-ink)}
.hero .pflicht{font-size:var(--text-mini);color:var(--f-ink-2)}
/* Nach der Runde ist der Knopf der Endkarte die Handlung, der Hero-Knopf tritt zurück (ENDABNAHME-2, 7) */
.hero:has(.stapel.is-ende) .hero__knopf{display:none}
/* Weggewischte Karten liegen per transform ausserhalb und verbreitern die Seite nicht */
.hero__play .stapel__deck{touch-action:pan-y}

/* ---------- Kanton: Satz mit Auswahl, Karte als zweiter Weg, Antwort mit einer führenden Angabe ---------- */
.g1-kanton__in{display:grid;gap:var(--s-6)}
.g1-kanton__wahl{margin-top:var(--s-4)}
.g1-karte{margin-top:var(--s-5);aspect-ratio:699/453;position:relative}
.g1-karte:empty{background:none}
.g1-kanton__alle{margin-top:var(--s-4);color:var(--ink-2);max-width:30em}
.kantonsblatt__wort{font:800 var(--text-h1)/1 var(--schrift-titel);letter-spacing:-.03em;margin-bottom:var(--s-4);color:var(--ink)}
.kantonsblatt__notiz{margin-top:var(--s-4);font-size:var(--text-15);color:var(--ink-2);max-width:38em}
.kantonsblatt__weiter{margin-top:var(--s-2)}
/* Alle 26 Kantone als Links (SEO R12.3): ruhig, fliessend, unter Karte und Antwort */
.g1-kantone{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--linie)}
.g1-kantone__titel{font:700 var(--text-15)/1.3 var(--schrift-titel);color:var(--ink-2)}
.g1-kantone__liste{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s-4);font-size:var(--text-15)}
.g1-kantone__liste a{display:inline-block;padding:var(--s-1) 0;min-height:32px;text-decoration-color:var(--linie-stark)}
.g1-kantone__liste a:hover{text-decoration-color:currentColor}
.g1-kantone__weiter{margin-top:var(--s-2)}
@media (max-width:719px){.g1-kantone{margin-top:var(--s-5)}.g1-kantone__titel,.g1-kantone__liste{display:none}.g1-kantone__weiter{margin-top:0}}

/* ---------- Gebiete: je Gebiet ein Druck, Länge = Grösse des Gebiets, Füllung = eigene Antworten ---------- */
.g1-gebiete{padding-top:var(--s-2);padding-bottom:var(--abschnitt-gross)}
.g1-gebiete__in{display:grid;gap:var(--s-6)}
.g1-gebiete__kopf p{margin-top:var(--s-3);color:var(--ink-2);max-width:32em}
.g1-stand.gebietstand{gap:var(--s-5)}
.g1-stand li{grid-template-columns:64px 1fr auto;align-items:end;gap:var(--s-2) var(--s-3)}
.g1-stand .illu{grid-row:1/span 2;width:64px;height:56px;align-self:center}
.g1-stand .gebietstand__name{font:700 var(--text-gross)/1.2 var(--schrift-titel);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--linie-stark)}
.g1-stand .gebietstand__name:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.g1-stand .gebietstand__balken{grid-column:2/-1;width:calc(var(--anteil,1) * 100%);height:14px}
.g1-stand .gebietstand__balken i{width:0}
.g1-stand .gebietstand__balken i.has{min-width:4px}
/* Das grösste Gebiet führt: Schnitt randlos als Band (ENDABNAHME-2, 5) */
.g1-stand li.g1-stand__gross{grid-template-columns:1fr auto;margin-bottom:var(--s-2)}
.g1-stand .g1-stand__gross .illu{grid-column:1/-1;grid-row:1;width:auto;height:200px;aspect-ratio:auto;margin:0 calc(-1 * var(--gut)) var(--s-2);--m-size:cover;--m-pos:var(--m-fokus,center)}
.g1-stand__gross .gebietstand__name{font-size:var(--text-21)}
.g1-stand__gross .gebietstand__balken{grid-column:1/-1}

/* ---------- Sprachen (it, es, pt, en): ehrlich, warum die Fragen DE/FR sind ---------- */
/* Linie im Satzspiegel, nicht randlos über die Section (Gesamtkritik Design 6) */
.g1-sprachen{padding-top:0}
.g1-sprachen>.g1-sprachen__in{border-top:1px solid var(--linie);padding-top:var(--s-6)}
.g1-sprachen__in{display:grid;gap:var(--s-4)}
.g1-sprachen h2{font-size:var(--text-h3)}
.g1-sprachen__text{color:var(--ink-2);max-width:40em}
.g1-sprachen__wo{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;border-top:1px solid var(--linie);max-width:40em}
.g1-sprachen__wo li{padding:var(--s-3) 0;border-bottom:1px solid var(--linie)}
.g1-sprachen__wo li:first-child{font-weight:600}

/* ---------- Zugang: Simulation zum Ausprobieren, ein Satz, zwei Zeilen Preis ---------- */
.g1-zugang{padding:var(--abschnitt-oben) 0 var(--abschnitt-unten)}
.g1-zugang__in{display:grid;gap:var(--s-6)}
.g1-zugang__kopf p{margin-top:var(--s-4);font-size:var(--text-gross);color:var(--f-ink-2);max-width:32em}
.g1-sim{margin:0}
.g1-sim__karte{background:var(--karte);color:var(--ink);border-radius:var(--r-karte);box-shadow:var(--schatten-karte);padding:var(--s-4);max-width:var(--breite-schmal);--fokus:var(--ink);--link:var(--ink)}
.g1-sim__kopf{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--text-mini);color:var(--ink-3);margin-bottom:var(--s-3)}
.g1-sim__kopf span:first-child{font-weight:700;color:var(--ink)}
.g1-sim__frage{font:700 var(--text-21)/1.2 var(--schrift-titel);margin-bottom:var(--s-3)}
.g1-sim__antworten{margin-bottom:0}
.g1-sim__antworten .antwort{min-height:48px}
.g1-sim__status{margin-top:var(--s-3);font-size:var(--text-klein);color:var(--ink-2);min-height:2.9em}
.g1-sim figcaption{margin-top:var(--s-4);font-size:var(--text-15);color:var(--f-ink-2);max-width:30em}
.g1-zugang__satz{font-size:var(--text-gross);line-height:1.5;color:var(--f-ink);max-width:32em;padding-top:var(--s-4);border-top:1px solid var(--f-linie)}
.g1-zugang .tarif{margin-top:var(--s-5)}
.g1-zugang .tarif__was{font-size:var(--text-h3)}
.g1-zugang .tarif__was span{color:var(--f-ink)}
.g1-tarif--info{grid-template-columns:1fr}
.g1-zugang__klein{margin-top:var(--s-4);font-size:var(--text-klein);color:var(--f-ink-2);max-width:36em}
.g1-zugang__klein+.g1-zugang__klein{margin-top:var(--s-2)}
.g1-zugang__wege{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:0 var(--s-5)}

/* ---------- Fünf Antworten: dort, wo der Einwand entsteht, ohne Rubrik ---------- */
.g1-antworten__liste{display:grid;gap:0;border-top:1px solid var(--linie)}
.g1-antwort{padding:var(--s-4) 0;border-bottom:1px solid var(--linie)}
.g1-antwort h3{font-size:var(--text-21);line-height:1.25}
.g1-antwort p{margin-top:var(--s-2);color:var(--ink-2);max-width:36em}

/* ---------- Video-Kurs und Buch ---------- */
/* ohne eigene Linie: die Antwortliste darüber schliesst schon mit einer Linie ab (Gesamtkritik Design 6) */
.g1-kurs{padding:var(--abschnitt-unten) 0 var(--s-5)}
.g1-kurs__kopf p{margin:var(--s-4) 0 var(--s-3);max-width:34em;color:var(--ink-2)}
ol.g1-poster{list-style:none;margin:var(--s-6) 0 0;padding:0 var(--gut) var(--s-4);display:grid;grid-auto-flow:column;grid-auto-columns:min(240px,66vw);gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}
.g1-poster li{scroll-snap-align:start}
.g1-poster a{display:grid;gap:2px;text-decoration:none;color:var(--ink)}
.g1-poster img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-bild);background:var(--ink);margin-bottom:var(--s-2)}
.g1-poster__meta{font-size:var(--text-mini);color:var(--ink-3)}
.g1-poster__meta b{color:var(--ink);font-weight:700}
.g1-poster__titel{font-size:var(--text-15);line-height:1.35;font-weight:500}
.g1-poster a:hover .g1-poster__titel{text-decoration:underline}
.g1-poster a:focus-visible{outline-offset:4px}
.g1-buch{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--linie)}
.g1-buch .buch__titel{font-size:var(--text-h3)}

/* ---------- Werkzeuge und Weiterlesen: ruhige Listen ---------- */
.g1-werkzeuge,.g1-lesen{padding-bottom:var(--s-6)}
.g1-lesen{padding-top:var(--s-6)}
.g1-werkzeuge h2,.g1-lesen h2{font-size:var(--text-h3)}
.g1-werkzeuge__liste,.g1-lesen__liste{margin-top:var(--s-4)}
.g1-werkzeuge .werkzeug,.g1-lesen .anriss{align-content:start}
.g1-lesen .anriss__titel{font-size:var(--text-gross)}
.g1-lesen .anriss__text{font-size:var(--text-15)}

/* ---------- Schluss: das Ziel als Bild ---------- */
.g1-schluss{padding:var(--abschnitt-oben) 0 var(--abschnitt-unten)}
.g1-schluss__bild{width:100%;aspect-ratio:1400/838}
.g1-schluss__text{width:min(var(--breite-seite),100% - 2*var(--gut));margin-inline:auto;padding-top:var(--s-6)}
.g1-schluss__text p{margin:var(--s-3) 0 var(--s-5);font-size:var(--text-gross);color:var(--ink-2)}
.g1-schluss__text .knopf{width:100%}
.g1-schluss__text .g1-schluss__zweit{margin:var(--s-3) 0 0}

/* ---------- Landingpages it, es, pt, en ---------- */
.g1-landing .seitenkopf__aktion .knopf{min-width:12em}
.g1-landing__wo{padding-top:0}
.g1-landing__wo .g1-sprachen__wo{margin-top:0}
.g1-verfahren .fliesstext ol{margin-top:0}
.g1-verfahren .fliesstext li{margin-bottom:var(--s-3)}
.g1-landing__links{border-top:0}
.g1-landing__mikro{font-size:var(--text-klein);color:var(--ink-2);margin-top:var(--s-2)}
.g1-landing__links{margin-top:var(--s-4)}
.g1-landing__schluss{padding-top:0}
.g1-landing__schluss>.wrap{border-top:1px solid var(--linie);padding-top:var(--abschnitt-oben)}
.g1-landing__schluss h2{font-size:var(--text-h3);max-width:24ch}
.g1-landing__schluss .knopfreihe{margin-top:var(--s-5)}

/* ---------- ab Tablet ---------- */
@media (min-width:720px){
  .hero{padding:var(--s-7) 0 var(--s-7)}
  .hero__lead{display:block}
  .hero__sprache{display:none}
  .hero__cta .hero__knopf{width:auto;padding:0 var(--s-6)}
  .hero__cta .knopfreihe{width:auto}
  .hero__cta .knopfreihe .knopf{flex:0 0 auto}
  .g1-kanton__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8);align-items:start}
  .g1-kanton .kantonsblatt{border-top:0;border-left:2px solid var(--ink);padding:0 0 0 var(--s-7)}
  .g1-kanton__frage{position:sticky;top:calc(var(--kopf-hoehe) + var(--s-5))}
  .g1-karte{max-width:520px}
  .g1-gebiete__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8);align-items:start}
  .g1-stand li{grid-template-columns:80px 1fr auto}
  .g1-stand .illu{width:80px;height:64px}
  .g1-stand .g1-stand__gross .illu{width:auto;height:280px;margin:0 0 var(--s-2)}
  .g1-sprachen__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8);align-items:start}
  .g1-zugang__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-6) var(--s-8);align-items:start}
  .g1-zugang__kopf{grid-column:1;grid-row:1}
  .g1-zugang__kauf{grid-column:1;grid-row:2}
  .g1-sim{grid-column:2;grid-row:1/span 2;align-self:center}
  .g1-antworten__liste{grid-template-columns:1fr 1fr;column-gap:var(--s-7);border-top:0;border-bottom:1px solid var(--linie)}
  .g1-antwort{border-top:1px solid var(--linie);border-bottom:0}
  ol.g1-poster{padding-inline:max(var(--gut),(100% - var(--breite-seite)) / 2);scroll-padding-inline:max(var(--gut),(100% - var(--breite-seite)) / 2)}
  .g1-schluss{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--s-7);width:min(var(--breite-seite),100% - 2*var(--gut));margin-inline:auto}
  .g1-schluss__text{width:auto;padding:0 0 var(--s-2)}
  .g1-schluss__text .knopf{width:auto;padding:0 var(--s-6)}
}
/* Hero zweispaltig erst ab 1280 px: zwischen 1000 und 1279 lief die H1 über 5 bis 7 Zeilen (Endabnahme S1) */
@media (min-width:1280px){
  .hero{padding-bottom:0}
  .hero{padding-top:calc(var(--s-6) + var(--s-1))}
  .hero__in{grid-template-columns:minmax(0,1fr) 500px;grid-template-rows:auto auto 1fr;column-gap:calc(var(--s-8) + var(--s-2));row-gap:calc(var(--s-5) + var(--s-1))}
  .hero__text{grid-column:1/-1;grid-row:1;padding-top:var(--s-3);display:grid;grid-template-columns:minmax(0,1fr) 500px;column-gap:calc(var(--s-8) + var(--s-2));align-items:end}
  .hero h1{max-width:20ch}
  .hero__lead{margin:0 0 var(--s-2)}
  .hero__cta{grid-column:1;grid-row:2;align-self:start}
  .hero__play{grid-column:2;grid-row:2/span 2;margin:0 0 var(--s-6);align-self:start}
  .hero__bild{grid-column:1/-1;grid-row:3;align-self:end;aspect-ratio:auto;height:380px;margin:calc(-1 * var(--s-2)) calc((100% - 100vw) / 2) 0;--m-size:cover;--m-pos:center 22%}
}
.g1-landing .empfehlung-frage>h2{font-size:var(--text-h3)}

/* Leistung (R14): Abschnitte unter dem ersten Bildschirm erst rendern, wenn sie nahe sind; ihre Linolschnitt-Masken laden dann erst */
.g1-gebiete,.g1-zugang,.g1-antworten,.g1-kurs,.g1-werkzeuge,.g1-lesen,.g1-schluss{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- Nachbesserung Design 12.11. (Gesamtkritik Design 12, 14) ---------- */
/* Gebiete: die ganze Zeile ist das Tippziel (der Name allein war 20 bis 25 px hoch) */
.g1-stand li{position:relative}
.g1-stand .gebietstand__name::after{content:"";position:absolute;inset:0}
/* Gebiet-Bildchen gleich gewichtet: Band mit Fokus statt contain (das grosse Band hat das schon) */
.g1-stand li:not(.g1-stand__gross) .illu{--m-size:cover;--m-pos:var(--m-fokus,center)}