/* =====================================================================
   G6 Info und Recht: Videos, FAQ, Über uns, Datenschutz, AGB
   Nur Ergänzungen zum Designsystem (tokens, base, komponenten). Jede Regel
   ist im Stil der Musterseite gebaut und im Bericht G6 gemeldet.
   ===================================================================== */

/* ---------- Rechtstexte: Inhaltsverzeichnis und Druckknopf ---------- */
.g6-recht{padding-top:var(--s-6)}
.g6-recht .artikel{gap:var(--s-6)}
.g6-recht .fliesstext--recht h2:first-child{margin-top:0}
/* Am Handy steht das Verzeichnis vor dem Text: dichter (40 px je Zeile, WCAG 2.5.8 verlangt 24), damit der Text früh kommt */
.g6-inhalt a{min-height:var(--ziel-min);padding:var(--s-2) 0;font-size:var(--text-15)}
@media (min-width:1100px){.g6-recht{padding-top:var(--abschnitt-oben)}.g6-inhalt a{min-height:42px;padding:var(--s-2) 0}}
.g6-drucken{margin-top:var(--s-3)}
.g6-drucken button{display:inline-flex;align-items:center;min-height:var(--ziel-min);padding:0;border:0;background:none;
  font:600 var(--text-15)/1.3 var(--schrift-text);color:var(--link);cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.g6-drucken button:hover{text-decoration-thickness:2px}
@media (min-width:720px) and (max-width:1099px){
  /* Tablet: Verzeichnis zweispaltig, bevor der Text beginnt */
  .g6-inhalt ol{columns:2;column-gap:var(--s-7)}
  .g6-inhalt li{break-inside:avoid}
}
@media (min-width:1100px){.g6-inhalt{max-height:calc(100vh - var(--kopf-hoehe) - 48px);overflow:auto;padding-right:var(--s-2)}}
/* Verzeichnis klappbar (unter 1100 px geschlossen): Titelzeile mit Winkel wie .frage, 44 px Tippziel */
.g6-inhalt__klapp>summary{list-style:none;display:flex;align-items:baseline;gap:var(--s-2);padding-block:var(--s-2);min-height:var(--ziel-min);margin:0;cursor:pointer;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.g6-inhalt__klapp>summary::-webkit-details-marker{display:none}
.g6-inhalt__klapp>summary::after{content:"";flex:none;align-self:center;margin-left:auto;width:14px;height:14px;background:var(--ink-3);-webkit-mask:var(--ico-runter) center/contain no-repeat;mask:var(--ico-runter) center/contain no-repeat;transition:transform var(--dauer-mittel) var(--ease)}
.g6-inhalt__klapp[open]>summary::after{transform:rotate(180deg);background:var(--ink)}
.g6-inhalt__klapp[open]>summary{border-bottom:0}
.g6-inhalt__zahl{font:400 var(--text-klein)/1.3 var(--schrift-text);color:var(--ink-3)}
@media (min-width:1100px){.g6-inhalt__klapp>summary{border-top:0}}

/* ---------- Abschnitte der Info-Seiten ---------- */
.abschnitt + .g6-abschnitt{padding-top:0}
.g6-lead{margin-top:var(--s-3);max-width:36em;font-size:var(--text-gross);line-height:1.55;color:var(--ink-2)}
.g6-schluss{display:grid;gap:var(--s-4);padding-top:var(--s-6);border-top:2px solid var(--ink);max-width:var(--breite-text)}
.g6-schluss .abschnitt__titel{max-width:24ch}
.g6-schluss p{max-width:36em;color:var(--ink-2)}
.g6-kontakt{font:700 var(--text-21)/1.3 var(--schrift-titel)}
.g6-kontakt a{text-decoration-thickness:2px;text-underline-offset:.2em}

/* ---------- FAQ: Fragen in Gruppen ---------- */
.g6-fragen .fragen{max-width:var(--breite-text)}
.g6-fragen .fragen + .abschnitt__titel{margin-top:var(--s-7)}
.g6-fragen .abschnitt__titel{font-size:var(--text-h3);margin-bottom:var(--s-3)}
.g6-fragen .frage__antwort{padding-bottom:var(--s-5)}

/* ---------- Videos: YouTube-Fassade (DESIGNSYSTEM 3.17) ---------- */
.g6-videos{display:grid;gap:var(--s-7)}
.g6-video{display:grid;gap:var(--s-3);align-content:start}
.g6-video .player{display:block}
.g6-video .player picture{position:absolute;inset:0}
.g6-video .player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Fassade: der ganze Rahmen ist der Knopf */
.g6-video button.player__start{width:100%;height:100%;padding:0}
.g6-video button.player__start:focus-visible{outline:3px solid var(--fokus);outline-offset:-3px}
.g6-video .player__start::before{left:auto;right:var(--s-3);bottom:var(--s-3);width:48px;height:48px;background:var(--tief)}
.g6-video .player__start::after{left:auto;right:calc(var(--s-3) + 14px);bottom:calc(var(--s-3) + 14px);width:20px;height:20px;background:var(--f-ink)}
.g6-video .player__start:hover::before{background:var(--ink)}
.g6-video.is-spielt .player,.g6-video .player:has(iframe){background:var(--tief)}
.player-legende__hinweis{font-size:var(--text-mini);line-height:1.4;color:var(--ink-3)}
.g6-video__titel{font:700 var(--text-21)/1.2 var(--schrift-titel);letter-spacing:-.01em;text-wrap:balance}
.g6-video__text{font-size:var(--text);line-height:1.55;color:var(--ink-2);max-width:36em}
.g6-video__meta{font-size:var(--text-klein);color:var(--ink-3)}
.g6-video__meta+.g6-video__titel{margin-top:calc(-1 * var(--s-2))}
/* Das grosse Quiz-Video: Bild und Text nebeneinander ab 900 px */
@media (min-width:900px){
  .g6-video--gross{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7);align-items:center}
  .g6-video--gross .player{grid-row:1/span 5}
  .g6-video--gross .g6-video__titel{font-size:var(--text-h3)}
}
/* Serie: Liste mit Bild links, Text rechts (ab 900 px); Ratgeber-Videos (zwei) nebeneinander */
.g6-videoliste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-7)}
@media (min-width:900px){
  #staatskunde-serie .g6-video{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-6);align-items:center}
  #staatskunde-serie .g6-video .player{grid-row:1/span 4}
  #ratgeber-videos .g6-videoliste{grid-template-columns:1fr 1fr;column-gap:var(--s-7)}
}
.g6-videos .abschnitt__titel{margin-bottom:var(--s-2)}
.g6-videos .abschnitt__lead{max-width:36em;margin-bottom:var(--s-5)}
.g6-hinweis-klein{max-width:40em;font-size:var(--text-klein);color:var(--ink-3)}
.g6-hinweis-klein a{color:var(--ink-2)}

/* ---------- Über uns: Text links, «Auf einen Blick» rechts (ab 1100 px), Karte der schriftlichen Tests ---------- */
.g6-ueber__raster{display:grid;gap:var(--s-7)}
@media (min-width:1100px){
  .g6-ueber__raster{grid-template-columns:minmax(0,var(--breite-text)) minmax(0,300px);column-gap:var(--s-9);justify-content:start}
  .g6-blick{grid-column:2;grid-row:1;position:sticky;top:calc(var(--kopf-hoehe) + 24px);align-self:start}
}
.g6-ueber .fliesstext h2{font-size:var(--text-h3)}
.g6-ueber .fliesstext h3{font-size:var(--text-h4)}
.g6-blick__titel{font:700 var(--text)/1.3 var(--schrift-titel);padding-bottom:var(--s-2);border-bottom:1px solid var(--linie)}
.g6-blick dl{margin:0}
.g6-blick dl>div{padding:var(--s-3) 0;border-bottom:1px solid var(--linie)}
.g6-blick dt{font-size:var(--text-mini);color:var(--ink-3)}
.g6-blick dd{margin:2px 0 0;font:600 var(--text-15)/1.4 var(--schrift-text);color:var(--ink)}
.g6-karte{margin-block:var(--s-5)}
.g6-karte svg{display:block;width:100%;height:auto}
.g6-karte path{fill:var(--karte-fill);stroke:var(--grund);stroke-width:1.2;vector-effect:non-scaling-stroke}
.g6-karte path.is-schriftlich{fill:var(--ink)}
.g6-karte figcaption{margin-top:var(--s-3);font-size:var(--text-klein);line-height:1.5;color:var(--ink-2)}
.g6-karte__legende{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-bottom:var(--s-2);color:var(--ink-3)}
.g6-karte__legende span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:var(--s-2);vertical-align:-1px;border-radius:var(--r-marke);background:var(--karte-fill)}
.g6-karte__legende span:first-child::before{background:var(--ink)}
.g6-ueber .empfehlung-frage,.g6-fragen .empfehlung-frage,.g6-videos .empfehlung-frage{max-width:var(--breite-text)}
.g6-buch{max-width:var(--breite-text)}
/* Kantonsbeispiele in der FAQ-Antwort: Name als eigene Zeile */
.fliesstext .g6-beispiele strong{display:block;font-weight:600}
/* Erster Abschnitt nach dem Seitenkopf (Bildband): engerer Anschluss, der Schnitt bildet schon die Grenze */
.seitenkopf + .g6-fragen,.seitenkopf + .g6-ueber,.seitenkopf + .g6-videos{padding-top:var(--s-7)}

/* 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}
}
/* FAQ: die spielbare Frage steht ohne Rubrik (Gesamtkritik Design 19) und braucht Abstand zur Kontaktzeile darüber */
.g6-schluss+.empfehlung-frage{padding-top:var(--s-8)}