/* G8 Produkte: Video-Kurs, Buch, Danke-Seiten (Rahmen V2, 11.11.2026).
   Nur Anordnung; Bausteine aus komponenten.css (.player, .lektion, .buch, .formular, .fragen, .hinweis).
   Tokens only: keine px-Schriftgrössen, Abstände über --s-*. */

/* ---------- gemeinsam ---------- */
.g8-preis{font-size:var(--text-gross);line-height:1.45;color:var(--ink-2);max-width:32em}
.g8-preis b{font:700 var(--text-h3)/1 var(--schrift-titel);color:var(--ink)}
.g8-klein{font-size:var(--text-klein);color:var(--ink-3);max-width:40em}
.g8-abstand{margin-top:var(--s-5)}
.g8-schmal{max-width:var(--breite-schmal)}
.g8-kauf{gap:var(--s-4)}
.g8-kauf .formular__aktionen{margin-top:0}
.g8-kauf .g8-mikro{margin-top:calc(-1 * var(--s-2))}

/* ---------- Video-Kurs: Kopf mit Kauf ---------- */
.g8-kopfkauf{display:grid;gap:var(--s-4);width:100%;max-width:var(--breite-schmal)}
.g8-kopfkauf .hinweis{margin:0}
.seitenkopf--artikel .seitenkopf__aktion:has(.g8-kopfkauf){margin-top:var(--s-2)}

/* ---------- Video-Kurs: Gratis-Lektion ---------- */
/* Linie im Satzspiegel statt randlos über die Section (Gesamtkritik Design 6) */
.g8-gratis{padding-top:0}
.g8-gratis__in{display:grid;gap:var(--s-5);border-top:1px solid var(--linie);padding-top:var(--abschnitt-oben)}
.g8-gratis__text .abschnitt__titel{margin-bottom:0}
.g8-player video{background:var(--tief)}
.g8-player.is-spielt{background:var(--tief)}
@media (min-width:900px){
  .g8-gratis__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-7);align-items:start}
}

/* ---------- Video-Kurs: Lektionsliste ---------- */
.g8-liste .abschnitt__lead{margin-top:calc(-1 * var(--s-2));margin-bottom:var(--s-5)}
.g8-teile{display:grid;gap:var(--s-6)}
.g8-teil__titel{font:700 var(--text-h4)/1.3 var(--schrift-titel);margin-bottom:var(--s-2)}
.g8-weiter{margin-top:var(--s-3)}
.g8-player-bereich .player-legende{margin-bottom:var(--s-2)}
@media (min-width:1000px){
  .g8-teile{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-7);align-items:start}
}

/* ---------- Video-Kurs und Buch: Kauf am Schluss ---------- */
.g8-schluss{border-top:2px solid var(--ink)}
.g8-schluss__in{display:grid;gap:var(--s-6)}
.g8-schluss__in .g8-preis{margin-top:var(--s-4)}
.g8-schluss__in .g8-klein{margin-top:var(--s-3)}
@media (min-width:900px){
  .g8-schluss__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7);align-items:start}
}

/* ---------- Buch: Kopf mit dem Buch als Gegenstand ---------- */
.g8-buchkopf .seitenkopf__in{gap:var(--s-5)}
.g8-buchkopf .buch{grid-template-columns:104px minmax(0,1fr);gap:var(--s-4) var(--s-5)}
.g8-buchkopf .buch__objekt{width:104px}
.g8-buchkopf .buch__titel{font-size:var(--text-h2);line-height:1.12;max-width:16ch;text-wrap:balance}
.g8-buchkopf .buch__text{font-size:var(--text-gross);line-height:1.5}
.g8-buchkopf .buch__kauf{grid-column:1/-1;display:grid;gap:var(--s-4);max-width:var(--breite-schmal)}
.g8-buchkopf .buch__preis{margin:var(--s-2) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3)}
.g8-buchkopf .buch__preis span{font:500 var(--text-15)/1.3 var(--schrift-text);color:var(--ink-2)}
@media (min-width:720px){
  .g8-buchkopf .buch{grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto 1fr;gap:var(--s-5) var(--s-7)}
  .g8-buchkopf .buch__objekt{width:200px;grid-row:1/span 2}
  .g8-buchkopf .buch__kauf{grid-column:2}
}
@media (min-width:1000px){
  .g8-buchkopf .buch{grid-template-columns:260px minmax(0,1fr);column-gap:var(--s-8)}
  .g8-buchkopf .buch__objekt{width:240px;margin-left:var(--s-3)}
}

/* ---------- Buch: Inhalt ---------- */
.g8-teile-buch{display:grid;gap:var(--s-5);margin-top:var(--s-5)}
.g8-teile-buch .buch__teil{margin:0}
.g8-teile-buch .buch__teil+p{margin-top:var(--s-2);color:var(--ink-2);max-width:40em}
@media (min-width:720px){.g8-teile-buch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-7)}}
.g8-teile-buch .buch__inhalt{columns:1;margin-top:var(--s-4)}
.g8-kapitel--2{counter-reset:kap 15}
.g8-teile-buch .buch__inhalt li{align-items:baseline}
.g8-abgrenzung{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--linie);max-width:40em}
.g8-abgrenzung p+p{margin-top:var(--s-2)}

/* ---------- Buch: drei Fragen ---------- */
.g8-fragen .stapel{margin-top:var(--s-5)}
.g8-fragen{overflow-x:hidden;overflow-x:clip}
@media (min-width:900px){
  .g8-fragen__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-7);align-items:start}
  .g8-fragen .stapel{margin-top:0}
}

/* ---------- Danke-Seite Buch ---------- */
.g8-danke{display:grid;gap:var(--s-5);max-width:var(--breite-mittel)}
.g8-danke .knopfreihe .knopf{min-width:11em}

/* ---------- Buch: Aufbau ---------- */
.g8-bau-titel{margin-top:var(--s-8)}
.g8-bau .werkzeug__name{font:700 var(--text-h4)/1.3 var(--schrift-titel)}
.g8-bau .werkzeug__text{max-width:36em}
.g8-mittel{max-width:var(--breite-mittel)}
.g8-weiter .pfeil{display:inline;min-height:0}
.g8-weiter .pfeil::after{display:inline-block;vertical-align:-2px;margin-left:var(--s-2)}

/* E-Mail-Adresse im Satz: als Ganzes umbrechen, nur wenn sie allein zu lang ist */
.g8-email{display:inline-block;max-width:100%;overflow-wrap:anywhere;hyphens:none}
.g8-abrechnung{margin-top:var(--s-4)}
.passwort-setzen+.g8-abrechnung{max-width:var(--breite-schmal)}
.g8-neu{margin-top:var(--s-3)}