/* ==========================================================================
   tutario-v2.css — Gestaltung v2 (Design-Upgrade, ab 22.10.2026)
   Schicht über tutario-design.css (Claude, Fassung 1, unverändert kopiert). Wird danach geladen.

   1. Typo-Skala (DU-10)        H1 62–68 / 56 / 38 px, H2 40 / 36 / 28 px, Merksätze
   2. Kopfzeile, Kapitelzeile
   3. Länderkopf (DU-20)        hell, Titel über volle Breite, Foto, Landeskarte als Datenleiste
   4. Statuswähler (DU-20)      „Ihre Lage“ — Antwort dunkel, mit Beratern und Hauptaktion
   5. Formen (DU-11)            bild · band · lese (eine Lesespalte) · rand (Ausweichform) · paar · gegen · tabelle (dunkel)
                                · moment (hellblau, eigenes Modul) · schritte — je Form eine eigene Silhouette
   6. Bausteine                 Gegenüberstellung, Musterpreis, Fußnoten, Kurz gesagt
   7. Beratung (DU-12)          dunkler Abschluss: Formular führt, Doppelporträt, Telefon und Siegel in einer Zeile
   8. Fragen, Unterlagen        Fragen → Beratung → Anhang als Kolophon
   9. Handy-Verdichtung
   Regeln wie im Fundament: nur tut-Klassen, nur Markenfarben, keine Schatten/Verläufe/Versalien.
   ========================================================================== */

:root { --tut-inhalt: 1160px; }

/* ---------- 1. Typo-Skala ---------- */
.tut-seite { font-size: 17px; line-height: 1.5; }
.tut-seite :where(p) { margin-bottom: 14px; }
.tut-seite :where(p:last-child) { margin-bottom: 0; }
.tut-seite :where(h1, h2, h3) { overflow-wrap: break-word; }
.tut-seite :where(h1) { font-size: 38px; line-height: 1.04; letter-spacing: -0.02em; }
.tut-seite :where(h2) { font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; }
.tut-seite :where(h3) { font-size: 20px; line-height: 1.25; }
.tut-haken li { margin-bottom: var(--tut-8); }
.tut-lead { font-size: 19px; line-height: 1.45; font-weight: 600; color: var(--tut-text); margin: 0 0 var(--tut-16); max-width: 46ch; }
.tut-sprung { display: inline-flex; align-items: center; min-height: var(--tut-klick); }
@media (min-width: 768px) {
  .tut-seite { font-size: 18px; line-height: 1.6; }
  .tut-seite :where(p) { margin-bottom: 16px; }
  .tut-seite :where(p:last-child) { margin-bottom: 0; }
  .tut-seite :where(h1) { font-size: 56px; }
  .tut-seite :where(h2) { font-size: 36px; line-height: 1.12; }
  .tut-seite :where(h3) { font-size: 22px; }
  .tut-haken li { margin-bottom: var(--tut-12); }
  .tut-lead { font-size: 21px; }
}
@media (min-width: 1080px) {
  .tut-seite :where(h1) { font-size: 68px; line-height: 1.02; letter-spacing: -0.025em; }
  .tut-seite :where(h2) { font-size: 40px; }
  .tut-lead { font-size: 22px; }
}

/* ---------- 2. Kopfzeile und Kapitelzeile ---------- */
.tut-telefon { display: inline-flex; align-items: center; min-height: var(--tut-klick); font-weight: 600; font-size: 16px; text-decoration: none; color: var(--tut-petrol); white-space: nowrap; }
.tut-telefon:hover { text-decoration: underline; }
.tut-inhaltnav { margin: 0; }
.tut-inhalt ol { max-width: var(--tut-inhalt); margin-inline: auto; gap: var(--tut-16); }
.tut-inhalt a { min-width: var(--tut-klick); justify-content: center; padding-inline: var(--tut-4); }

/* ---------- 3. Länderkopf ---------- */
/* Hell (Fläche 2) — nie der Petrol-Kopf der Produktseite. Handy: Titel, Einordnung, Aktion, Berater, Landeskarte, Foto.
   Desktop: Titel über volle Breite · links Einordnung, rechts Foto · darunter Landeskarte als Datenleiste. */
.tut-landkopf { background: var(--tut-flaeche-2); padding-block: var(--tut-8) 0; }
.tut-pfad { display: flex; flex-wrap: wrap; gap: 0 var(--tut-8); margin: 0; padding: 0; list-style: none; font-size: 15px; }
.tut-pfad li { margin: 0; display: inline-flex; align-items: center; }
.tut-pfad li + li::before { content: "/"; margin-right: var(--tut-8); color: var(--tut-petrol-mittel); }
.tut-pfad a { display: inline-flex; align-items: center; min-height: var(--tut-klick); color: var(--tut-petrol-mittel); }
.tut-pfad span { color: var(--tut-petrol-mittel); }
.tut-landkopf h1 { margin: var(--tut-4) 0 var(--tut-16); }
.tut-landkopf .tut-h1-zeile2 { display: block; font-size: 20px; line-height: 1.3; letter-spacing: 0; font-weight: 400; margin-top: var(--tut-12); color: var(--tut-petrol-mittel); }
.tut-landkopf__lead { font-size: 18px; line-height: 1.5; margin: 0 0 var(--tut-20); max-width: 40ch; }
/* Preis im Kopf: eine Zeile, kein Kasten. Die Leiter weiter unten bleibt die Übersicht. */
.tut-landkopf__ab { margin: 0 0 var(--tut-20); }
.tut-landkopf__ab a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; text-decoration: none; color: inherit; }
.tut-landkopf__ab-label { flex: 1 0 100%; font-size: 14px; font-weight: 600; color: var(--tut-petrol-mittel); }
.tut-landkopf__ab strong { font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--tut-petrol); }
.tut-landkopf__ab-zeit { font-size: 16px; color: var(--tut-petrol-mittel); }
.tut-landkopf__ab-fall { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--tut-petrol-mittel); max-width: 38ch; }
.tut-landkopf__ab a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.tut-landkopf__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tut-4) var(--tut-24); }
.tut-landkopf__aktion .tut-button { width: 100%; }
.tut-landkopf__aktion .tut-link-block { font-weight: 600; }

/* Berater im ersten Bildschirm: zwei echte Gesichter nebeneinander (nie überlappende Kreise) */
.tut-kopfberater { display: flex; align-items: center; gap: var(--tut-12); margin-top: var(--tut-12); padding-top: var(--tut-12); border-top: 1px solid var(--tut-linie); text-decoration: none; color: var(--tut-text); min-height: var(--tut-klick); }
.tut-gesichter { display: flex; gap: var(--tut-4); flex: none; }
.tut-gesichter img { width: 44px; height: 54px; object-fit: cover; object-position: 50% 15%; border-radius: 6px; background: var(--tut-weiss); }
.tut-kopfberater__text { font-size: 15px; line-height: 1.35; }
@media (min-width: 768px) { .tut-kopfberater .tut-gesichter img { width: 60px; height: 72px; } .tut-kopfberater__text { font-size: 16px; } }
.tut-kopfberater__text strong { display: block; color: var(--tut-petrol); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tut-kopfberater:hover strong { text-decoration-thickness: 2px; }

/* Handy: Titel mit Kernzahl, Einordnung und Aktion, Landeskarte, dann das Länderfoto nachgeladen (nicht im ersten Bildschirm — Ladezeit).
   Ab Tablet: Fotostreifen unter dem Titel */
.tut-landkopf__innen { display: flex; flex-direction: column; }
.tut-landkopf__titel { order: 1; }
.tut-landkopf__foto { order: 5; margin: 0 calc(-1 * var(--tut-rand)); }
.tut-landkopf__text { order: 3; }
.tut-landkarte { order: 4; }
.tut-landkopf__foto img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 0; background: var(--tut-flaeche-1); }

.tut-landkarte { margin: var(--tut-24) 0; background: var(--tut-weiss); border-radius: var(--tut-radius); padding: var(--tut-20) var(--tut-20) var(--tut-8); }
.tut-landkarte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tut-12); padding-bottom: var(--tut-12); border-bottom: 2px solid var(--tut-petrol); }
.tut-landkarte__land { margin: 0; font-size: 26px; line-height: 1.1; font-weight: 300; letter-spacing: -0.015em; color: var(--tut-petrol); }
.tut-landkarte__stand { margin: 0; font-size: 14px; color: var(--tut-petrol-mittel); white-space: nowrap; }
.tut-landkarte dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--tut-16); margin: 0; }
.tut-landkarte dl > div { padding: 10px 0; border-bottom: 1px solid var(--tut-linie); }
.tut-landkarte dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.tut-landkarte dt { font-size: 14px; font-weight: 600; color: var(--tut-petrol-mittel); line-height: 1.3; }
.tut-landkarte dd { margin: 2px 0 0; font-size: 14px; line-height: 1.3; }
.tut-landkarte dd strong { display: block; font-size: 20px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; color: var(--tut-petrol); margin-bottom: 2px; }

@media (min-width: 768px) {
  .tut-landkopf { padding-block: var(--tut-16) 0; }
  .tut-landkopf .tut-h1-zeile2 { font-size: 24px; }
  .tut-landkopf__lead { font-size: 20px; }
  .tut-landkopf__aktion .tut-button { width: auto; }
  .tut-landkopf__foto { order: 2; margin: 0 0 var(--tut-24); }
  .tut-landkopf__foto img { aspect-ratio: 16 / 7; border-radius: var(--tut-radius); }
  .tut-landkarte { margin: var(--tut-24) 0 var(--tut-48); padding: var(--tut-24) var(--tut-32) var(--tut-12); }
  .tut-landkarte dl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--tut-32); }
  .tut-landkarte dl > div { padding: var(--tut-12) 0; }
  .tut-landkarte dl > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--tut-linie); }
  .tut-landkarte dl > div:nth-last-child(-n+3) { border-bottom: 0; }
  .tut-landkarte dd { font-size: 15px; line-height: 1.35; }
  .tut-landkarte dd strong { font-size: 24px; }
}
@media (min-width: 1080px) {
  .tut-landkopf__innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "titel titel" "text foto" "karte karte"; column-gap: var(--tut-64); }
  .tut-landkopf__foto { margin: 0; }
  .tut-landkopf__titel { grid-area: titel; padding-top: var(--tut-24); }
  .tut-landkopf h1 { font-size: 62px; margin-bottom: var(--tut-32); }
  .tut-landkopf .tut-h1-zeile2 { font-size: 28px; margin-top: var(--tut-16); }
  .tut-landkopf__ab strong { font-size: 36px; }
  .tut-landkopf__text { grid-area: text; padding-top: var(--tut-8); }
  .tut-landkopf__foto { grid-area: foto; margin: 0; }
  .tut-landkopf__foto img { aspect-ratio: 16 / 10; }
  .tut-landkarte { grid-area: karte; margin: var(--tut-32) 0 var(--tut-64); padding: var(--tut-32) var(--tut-48) var(--tut-16); }
  .tut-landkarte__land { font-size: 32px; }
  .tut-landkarte dd strong { font-size: 24px; }
}

/* ---------- 3b. Signatur — das eine Aussage-Band je Land (belegte Kernzahl oder Kernwort), direkt unter dem Kopf ---------- */
.tut-signatur { background: var(--tut-petrol); padding-block: var(--tut-32) 40px; }
.tut-signatur__was { font-size: 16px; font-weight: 600; margin: 0 0 var(--tut-8); opacity: .9; }
/* Wert steht immer in einer Zeile (white-space: nowrap); lange Werte (--lang, ab 9 Zeichen) eine Stufe kleiner. Text immer darunter. */
.tut-signatur__wert { font-size: 50px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 var(--tut-16); white-space: nowrap; font-variant-numeric: proportional-nums; }
.tut-signatur--lang .tut-signatur__wert { font-size: 40px; }
.tut-signatur__text { font-size: 17px; line-height: 1.45; margin: 0; max-width: 52ch; }
.tut-signatur__text a { font-weight: 600; white-space: nowrap; }
/* mehrere Werte: nebeneinander, jeder mit Beschriftung direkt darunter */
.tut-signatur__wert--teile { display: flex; flex-wrap: wrap; gap: var(--tut-16) var(--tut-32); }
.tut-signatur__teil { display: flex; flex-direction: column; }
.tut-signatur__zu { font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-top: var(--tut-8); }
@media (min-width: 1080px) { .tut-signatur__wert--teile { column-gap: var(--tut-64); } .tut-signatur__zu { font-size: 18px; margin-top: var(--tut-12); } }
@media (min-width: 768px) {
  .tut-signatur { padding-block: var(--tut-48); }
  .tut-signatur__wert { font-size: 88px; }
  .tut-signatur--lang .tut-signatur__wert { font-size: 72px; }
}
@media (min-width: 1080px) {
  .tut-signatur { padding-block: var(--tut-64) 72px; }
  /* Wert links in seiner eigenen Breite (eine Zeile), Erklärung rechts unten bündig — keine leere Petrol-Hälfte */
  .tut-signatur__innen { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "was was" "wert text"; column-gap: var(--tut-64); align-items: end; }
  .tut-signatur__was { grid-area: was; font-size: 18px; margin-bottom: var(--tut-12); }
  .tut-signatur__wert { grid-area: wert; font-size: 112px; margin: 0; }
  .tut-signatur--lang .tut-signatur__wert { font-size: 92px; }
  .tut-signatur__text { grid-area: text; font-size: 20px; line-height: 1.45; max-width: 40ch; padding-bottom: 10px; padding-left: var(--tut-32); border-left: 1px solid var(--tut-linie-hell); }
}
/* Ohne belegte Zahl: ruhige Variante, der Kernsatz in Zwischenüberschriftgröße statt eines Riesenworts */
.tut-signatur__satz { font-size: 22px; line-height: 1.3; font-weight: 400; margin: 0; max-width: 34ch; text-wrap: balance; }
.tut-signatur__satz a { font-weight: 600; white-space: nowrap; }
@media (min-width: 768px) { .tut-signatur__satz { font-size: 30px; } }
@media (min-width: 1080px) {
  .tut-signatur--satz .tut-signatur__innen { display: block; }
  .tut-signatur__satz { font-size: 40px; line-height: 1.2; font-weight: 300; letter-spacing: -0.015em; max-width: 30ch; }
}
/* Gegenüberstellung ohne Zahl (z. B. mit USA / ohne USA): zwei Wahlworte, nicht ein Satz in Displaygröße */
.tut-signatur--wahl .tut-signatur__wert { font-size: 36px; white-space: normal; }
.tut-signatur--wahl .tut-signatur__teil + .tut-signatur__teil { padding-left: var(--tut-24); border-left: 1px solid var(--tut-linie-hell); }
@media (min-width: 768px) { .tut-signatur--wahl .tut-signatur__wert { font-size: 48px; } }
@media (min-width: 1080px) {
  .tut-signatur--wahl .tut-signatur__wert { font-size: 56px; }
  .tut-signatur--wahl .tut-signatur__teil + .tut-signatur__teil { padding-left: var(--tut-48); }
}

/* Beitragsleiter wie auf der LP: Überschrift, eine Bedingungszeile, Altersreihe, Leistungen, ein Knopf. */
.tut-leiter { background: var(--tut-weiss); padding-block: var(--tut-32) 40px; border-top: 1px solid var(--tut-linie); border-bottom: 1px solid var(--tut-linie); }
.tut-leiter__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; margin-bottom: 20px; }
.tut-leiter__kopf h2 { margin: 0; }
.tut-leiter__tarif { margin: 0; font-size: 15px; line-height: 1.45; }
.tut-leiter__bedingung { flex: 1 0 100%; margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.tut-leiter__wischen { margin: 0 0 var(--tut-8); font-size: 14px; color: var(--tut-petrol-mittel); }
.tut-leiter__reihe { display: flex; overflow-x: auto; background: var(--tut-weiss); border: 1px solid var(--tut-linie); border-radius: var(--tut-radius); }
.tut-leiter__stufe { flex: 1 0 150px; padding: 20px 12px; text-align: center; border-left: 1px solid var(--tut-linie); }
.tut-leiter__stufe:first-child { border-left: 0; background: var(--tut-petrol); color: #fff; }
.tut-leiter__alter { font-size: 15px; font-weight: 600; }
.tut-leiter__betrag { font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0; font-variant-numeric: proportional-nums; }
.tut-leiter__zeit { font-size: 14px; }
.tut-leiter__stufe:first-child .tut-leiter__zeit { color: #fff; }
.tut-leiter__fuss { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: center; margin-top: 20px; }
.tut-leiter__leistungen { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; font-size: 16px; font-weight: 600; }
.tut-leiter__leistungen li { display: flex; align-items: center; gap: 8px; }
.tut-leiter__leistungen li::before { content: ""; width: 7px; height: 12px; border-right: 2px solid var(--tut-petrol); border-bottom: 2px solid var(--tut-petrol); transform: rotate(40deg); margin-bottom: 3px; flex: none; }
.tut-leiter__satz { margin: 12px 0 0; font-size: 15px; }
.tut-gesprach { background: var(--tut-flaeche-2); padding-block: 48px 56px; }
.tut-gesprach__satz { margin: 0 0 16px; max-width: 34em; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--tut-petrol); }
.tut-gesprach__leute { display: grid; gap: 12px; }
.tut-gesprach__person { display: grid; grid-template-columns: 84px 1fr; gap: 14px 16px; align-items: center; background: var(--tut-weiss); border: 1px solid var(--tut-linie); border-radius: var(--tut-radius); padding: 14px; }
.tut-gesprach__person img { width: 84px; height: 104px; object-fit: cover; object-position: center top; border-radius: 12px; background: var(--tut-flaeche-1); }
.tut-gesprach__name { margin: 0 0 10px; line-height: 1.3; }
.tut-gesprach__name strong { display: block; color: var(--tut-petrol); }
.tut-gesprach__name span { color: var(--tut-petrol-mittel); font-size: 15px; }
.tut-gesprach__person .tut-button { width: auto; max-width: 100%; }
.tut-gesprach__ruf { margin: 8px 0 0; font-size: 15px; }
.tut-gesprach__ruf a { color: var(--tut-petrol); font-weight: 600; white-space: nowrap; }
@media (min-width: 900px) {
  .tut-gesprach__leute { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
@media (min-width: 768px) {
  .tut-leiter__wischen { display: none; }
  .tut-leiter__betrag { font-size: 30px; }
}

/* Länderanker auf dem Handy nach der Signatur (Desktop: Foto bleibt im Kopf) */
.tut-landfoto-handy { display: none; }
@media (max-width: 767px) {
  .tut-landfoto-handy { display: block; margin: 0; }
  .tut-landfoto-handy img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tut-flaeche-1); }
}
/* Kapitelzeile als echte Leiste */
.tut-inhaltnav { border-top: 1px solid var(--tut-linie); }
@media (min-width: 1080px) { .tut-inhalt a { min-height: 60px; font-size: 17px; font-weight: 600; } }

/* ---------- 4. Statuswähler — das Herzstück: Auswahl über volle Breite, Antwort groß auf heller Fläche ---------- */
.tut-lage { padding-block: var(--tut-48); }
.tut-lage__intro { max-width: 60ch; }
.tut-lage__mehr { margin: var(--tut-12) 0 0; font-size: 16px; }
.tut-lage__mehr a { display: inline-flex; align-items: center; min-height: var(--tut-klick); font-weight: 600; }
@media (min-width: 1080px) {
  .tut-lage__kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--tut-64); align-items: end; }
  .tut-lage__kopf h2 { margin: 0; }
}
/* Antwort: Lage, typischer Zugang, typische Lösung aus der Optionentabelle — jede Wahl hat eine sichtbare Folge */
.tut-lage__titel { font-size: 14px; font-weight: 600; color: var(--tut-petrol-mittel); margin: 0 0 var(--tut-4); }
.tut-lage__loesung { margin-top: var(--tut-16); padding-top: var(--tut-16); border-top: 1px solid var(--tut-linie-stark); }
.tut-lage__loesung p { font-size: 18px; line-height: 1.4; font-weight: 600; margin: 0; }
.tut-lage__wahl { display: flex; flex-wrap: wrap; gap: var(--tut-8); border: 0; padding: 0; margin: var(--tut-20) 0 0; min-width: 0; }
.tut-lage__wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tut-lage__wahl label { display: inline-flex; align-items: center; min-height: var(--tut-klick); padding: 8px 16px; border: 1px solid var(--tut-linie-stark); border-radius: var(--tut-radius-button); background: var(--tut-weiss); color: var(--tut-petrol); font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap; cursor: pointer; transition: background-color var(--tut-dauer), color var(--tut-dauer); }
.tut-lage__wahl label:hover { border-color: var(--tut-petrol); }
.tut-lage__wahl input:focus-visible + label { outline: 2px solid var(--tut-petrol); outline-offset: 2px; }
.tut-lage__fuss { font-size: 16px; margin: var(--tut-16) 0 0; max-width: 64ch; }

/* Antwort: hell (Fläche 2), groß, mit Kapitelsprung, den Menschen und der Hauptaktion — dunkel bleibt nur die Beratung */
.tut-lage__antwort { margin-top: var(--tut-16); background: var(--tut-flaeche-2); border-radius: var(--tut-radius); padding: var(--tut-24) var(--tut-20) var(--tut-20); }
.tut-lage__fall h3 { font-size: 16px; font-weight: 600; color: var(--tut-petrol-mittel); margin-bottom: var(--tut-8); }
.tut-lage__weg { font-size: 22px; line-height: 1.3; font-weight: 500; color: var(--tut-text); margin: 0; }
.tut-lage__mensch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tut-12) var(--tut-16); margin-top: var(--tut-24); padding-top: var(--tut-20); border-top: 1px solid var(--tut-linie-stark); }
.tut-lage__mensch-text { flex: 1 1 180px; font-size: 15px; line-height: 1.35; margin: 0; }
.tut-lage__mensch .tut-button { width: 100%; }
@supports selector(:has(a)) {
  .tut-lage__fall { display: none; }
  .tut-lage:has(#lage-1:checked) [data-lage="1"], .tut-lage:has(#lage-2:checked) [data-lage="2"], .tut-lage:has(#lage-3:checked) [data-lage="3"],
  .tut-lage:has(#lage-4:checked) [data-lage="4"], .tut-lage:has(#lage-5:checked) [data-lage="5"], .tut-lage:has(#lage-6:checked) [data-lage="6"],
  .tut-lage:has(#lage-7:checked) [data-lage="7"], .tut-lage:has(#lage-8:checked) [data-lage="8"], .tut-lage:has(#lage-9:checked) [data-lage="9"],
  .tut-lage:has(#lage-10:checked) [data-lage="10"] { display: block; }
  .tut-lage__wahl input:checked + label { background: var(--tut-petrol); border-color: var(--tut-petrol); color: var(--tut-weiss); }
}
@supports not selector(:has(a)) {
  .tut-lage__wahl { display: none; }
  .tut-lage__fall + .tut-lage__fall { border-top: 1px solid var(--tut-linie-hell); padding-top: var(--tut-16); margin-top: var(--tut-16); }
}
.tut-lage__hinweis { display: none; }
@media (min-width: 768px) { .tut-lage__mensch .tut-button { width: auto; } .tut-lage__antwort { padding: var(--tut-32); } .tut-lage__weg { font-size: 26px; } }
@media (min-width: 1080px) {
  .tut-lage { padding-block: var(--tut-96) var(--tut-64); }
  /* Desktop: links die Lagen als Liste (eine Zeile je Lage), rechts die Antwort so hoch wie die Liste */
  .tut-lage__auswahl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--tut-48); margin-top: var(--tut-48); align-items: stretch; }
  .tut-lage__wahl { flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; border-top: 2px solid var(--tut-petrol); }
  .tut-lage__wahl label { width: 100%; min-height: 56px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--tut-linie); border-radius: 0; background: transparent; font-size: 17px; white-space: normal; }
  .tut-lage__wahl label:hover { background: var(--tut-flaeche-1); }
  .tut-lage__antwort { display: flex; flex-direction: column; margin-top: 0; padding: var(--tut-48); }
  .tut-lage__fall h3 { font-size: 18px; }
  .tut-lage__weg { font-size: 32px; line-height: 1.22; font-weight: 400; letter-spacing: -0.01em; }
  .tut-lage__loesung { margin-top: var(--tut-24); padding-top: var(--tut-24); }
  .tut-lage__loesung p { font-size: 22px; }
  .tut-lage__mensch { margin-top: auto; padding-top: var(--tut-24); flex-wrap: nowrap; }
  .tut-lage__faelle { margin-bottom: var(--tut-32); }
}

/* ---------- 5. Formen ---------- */
/* 5a bild — Handy: Foto oben. Desktop: links das Foto, rechts der ganze Text, etwa gleich hoch. */
.tut-f-bild { background: var(--tut-weiss); }
.tut-f-bild__foto { position: relative; margin: 0; }
.tut-f-bild__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; background: var(--tut-flaeche-2); }
.tut-f-bild__foto figcaption { padding: var(--tut-8) var(--tut-rand) 0; font-size: 14px; color: var(--tut-petrol-mittel); }
.tut-f-bild__text { padding: 28px var(--tut-rand) 36px; max-width: calc(var(--tut-spalte) + 2 * var(--tut-rand)); }
.tut-bild-oben { object-position: 50% 25%; }
.tut-bild-mitte { object-position: 50% 50%; }
.tut-bild-unten { object-position: 50% 75%; }
@media (min-width: 768px) { .tut-f-bild__text { margin-inline: auto; } }
@media (min-width: 1080px) {
  .tut-f-bild {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: stretch;
    max-width: var(--tut-inhalt); margin-inline: auto; padding: 48px var(--tut-rand) 56px;
  }
  .tut-f-bild__foto { position: relative; height: auto; min-height: 100%; width: auto; margin: 0; float: none; }
  .tut-f-bild__foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; object-fit: cover; border-radius: var(--tut-radius); }
  .tut-f-bild__text { display: block; margin: 0; padding: 0; max-width: none; }
}

/* 5b band — Merksatz als reine Typografie auf hellem Grund, zwischen zwei Petrol-Linien (dunkel bleiben nur Lage-Antwort und Beratung) */
.tut-f-band { padding-block: var(--tut-48); }
.tut-f-band > .tut-wrap { border-top: 2px solid var(--tut-petrol); padding-top: var(--tut-24); }
.tut-f-band h2 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--tut-petrol-mittel); margin-bottom: var(--tut-12); }
.tut-f-band__merksatz { font-size: 28px; line-height: 1.22; font-weight: 300; letter-spacing: -0.015em; color: var(--tut-text); margin: 0 0 var(--tut-24); max-width: 30ch; text-wrap: balance; }
.tut-f-band__text p { font-size: 16px; }
@media (min-width: 768px) { .tut-f-band__merksatz { font-size: 36px; } }
/* Text unter dem Merksatz, gleiche linke Kante. Eine Einrückung liest sich als fehlendes Bild. */
@media (min-width: 1080px) { .tut-f-band__text { margin-left: 0; max-width: 68ch; } }
@media (min-width: 1080px) {
  .tut-f-band { padding-block: var(--tut-96); }
  .tut-f-band h2 { font-size: 22px; }
  .tut-f-band__merksatz { font-size: 52px; line-height: 1.12; max-width: 24ch; margin-bottom: var(--tut-48); }
  .tut-f-band > .tut-wrap { padding-top: var(--tut-32); }
}

/* 5d lese — die Grundform jedes Textkapitels: eine Lesespalte, mittig, der Kernsatz groß als Einstieg.
   Abwechslung kommt aus den Inhaltsformen dazwischen (Moment, Foto, Merksatz, Paar, Tabelle), nicht aus wechselnden Textspalten. */
.tut-f-lese { padding-block: var(--tut-48); }
.tut-f-lese__spalte { max-width: var(--tut-spalte); }
.tut-f-lese .tut-lead { font-size: 21px; line-height: 1.35; font-weight: 500; letter-spacing: -0.005em; max-width: 36ch; margin-bottom: var(--tut-20); }
@media (min-width: 768px) { .tut-f-lese .tut-lead { font-size: 26px; } }
@media (min-width: 1080px) {
  .tut-f-lese { padding-block: var(--tut-96); }
  .tut-f-lese__spalte { margin-inline: auto; max-width: 760px; }
  .tut-f-lese h2 { margin-bottom: var(--tut-24); }
  .tut-f-lese .tut-lead { font-size: 30px; line-height: 1.3; font-weight: 400; margin-bottom: var(--tut-32); }
}
/* lese ist eine Lesespalte — kein Zwei-Spalter mehr (Zweitmeinung R25: 6–8× „Überschrift links, Text rechts“) */
/* Flächen haben feste Rollen: Hellblau nur Kopf und Entscheidung (Lage, Optionen), Petrol nur Kernzahl, Länder-Moment, Beratung.
   Alle übrigen Formen sind weiß; Weiß auf Weiß trennt eine feine Linie, nie doppelter Leerraum */
:is(.tut-lage, .tut-kurz2, .tut-f-bild, .tut-f-lese, .tut-f-gegen, .tut-f-rand, .tut-f-band, .tut-f-paar, .tut-f-punkte, .tut-f-schritte, .tut-unterlagen) + :is(.tut-kurz2, .tut-f-lese, .tut-f-gegen, .tut-f-rand, .tut-f-paar, .tut-f-punkte, .tut-f-schritte, .tut-f-faq, .tut-unterlagen) > .tut-wrap { border-top: 1px solid var(--tut-linie); padding-top: var(--tut-48); }
:is(.tut-lage, .tut-kurz2, .tut-f-bild, .tut-f-lese, .tut-f-gegen, .tut-f-rand, .tut-f-band, .tut-f-paar, .tut-f-punkte, .tut-f-schritte, .tut-unterlagen) + :is(.tut-kurz2, .tut-f-lese, .tut-f-gegen, .tut-f-rand, .tut-f-paar, .tut-f-punkte, .tut-f-schritte, .tut-f-faq, .tut-unterlagen) { padding-top: 0; }
@media (min-width: 1080px) { :is(.tut-lage, .tut-kurz2, .tut-f-bild, .tut-f-lese, .tut-f-gegen, .tut-f-rand, .tut-f-band, .tut-f-paar, .tut-f-punkte, .tut-f-schritte, .tut-unterlagen) + :is(.tut-kurz2, .tut-f-lese, .tut-f-gegen, .tut-f-rand, .tut-f-paar, .tut-f-punkte, .tut-f-schritte, .tut-f-faq, .tut-unterlagen) > .tut-wrap { padding-top: var(--tut-96); } }

/* 5d2 rand — Ausweichform (nur wenn sonst zweimal Lesespalte folgen würde): Fließtext, daneben klebend der Kernsatz */
.tut-f-rand { padding-block: var(--tut-48); }
.tut-f-rand__innen { display: flex; flex-direction: column; gap: var(--tut-20); }
.tut-f-rand__rand { padding-top: var(--tut-12); border-top: 2px solid var(--tut-petrol); }
.tut-f-rand__satz { font-size: 21px; line-height: 1.35; font-weight: 500; letter-spacing: -0.005em; margin: 0; }
.tut-f-rand__beleg { margin-top: var(--tut-12); font-size: 14px; color: var(--tut-petrol-mittel); }
@media (min-width: 768px) { .tut-f-rand__satz { font-size: 26px; } }
@media (min-width: 1080px) {
  .tut-f-rand { padding-block: var(--tut-96); }
  .tut-f-rand h2 { max-width: 22ch; margin-bottom: var(--tut-32); }
  .tut-f-rand__innen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--tut-64); align-items: start; }
  .tut-f-rand__rand { order: 2; position: sticky; top: 96px; padding-top: var(--tut-20); }
  .tut-f-rand__satz { font-size: 30px; line-height: 1.28; font-weight: 400; }
  .tut-f-rand__text { order: 1; max-width: var(--tut-spalte); }
}

/* 5e paar — zwei kurze Textkapitel nebeneinander wie eine Zeitungsdoppelseite; Handy untereinander mit Trennlinie */
.tut-f-paar { padding-block: var(--tut-48); }
.tut-f-paar__innen { display: grid; row-gap: var(--tut-32); }
.tut-f-paar__kapitel + .tut-f-paar__kapitel { padding-top: var(--tut-32); border-top: 1px solid var(--tut-linie-stark); }
.tut-f-paar h2 { font-size: 26px; margin-bottom: var(--tut-12); }
.tut-f-paar__lead { font-size: 19px; line-height: 1.4; font-weight: 500; margin-bottom: var(--tut-16); }
.tut-f-paar__kapitel > p:not(.tut-f-paar__lead) { font-size: 16px; }
@media (min-width: 1080px) {
  .tut-f-paar { padding-block: var(--tut-96); }
  .tut-f-paar__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--tut-48); }
  .tut-f-paar__kapitel + .tut-f-paar__kapitel { padding: 0 0 0 var(--tut-48); border-top: 0; border-left: 1px solid var(--tut-linie-stark); }
  .tut-f-paar h2 { font-size: 34px; margin-bottom: var(--tut-20); max-width: 18ch; }
  .tut-f-paar__lead { font-size: 26px; line-height: 1.3; font-weight: 300; letter-spacing: -0.01em; margin-bottom: var(--tut-24); }
  .tut-f-paar__kapitel > p:not(.tut-f-paar__lead) { font-size: 17px; }
}

/* 5e2 gegen — deckt / deckt nicht: Titel über der Gegenüberstellung, zwei Listen mit klarer Kante */
.tut-f-gegen { padding-block: var(--tut-48); }
.tut-f-gegen__kopf { max-width: 760px; }
.tut-f-gegen .tut-lead { font-size: 21px; line-height: 1.35; font-weight: 500; max-width: 40ch; }
@media (min-width: 1080px) {
  .tut-f-gegen { padding-block: var(--tut-96); }
  .tut-f-gegen .tut-lead { font-size: 26px; font-weight: 400; }
  .tut-f-gegen .tut-gegen2 { margin-top: var(--tut-48); column-gap: var(--tut-96); }
  .tut-f-gegen .tut-gegen2 h3 { font-size: 24px; padding-bottom: var(--tut-12); margin-bottom: var(--tut-20); }
  .tut-f-gegen .tut-gegen2 li { font-size: 19px; line-height: 1.4; margin-bottom: var(--tut-16); }
}

/* 5e3 punkte — Fakten ohne Reihenfolge (z. B. was für Touristen gilt): ein Feldraster, jede Aussage groß unter einer Petrol-Kante, keine Nummern */
.tut-f-punkte { padding-block: var(--tut-48); }
.tut-f-punkte__kopf { max-width: 760px; margin-bottom: var(--tut-24); }
.tut-punkte { margin: 0; display: grid; gap: var(--tut-24); }
.tut-punkte > div { padding-top: var(--tut-12); border-top: 2px solid var(--tut-petrol); }
.tut-punkte dt { font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--tut-petrol); margin-bottom: var(--tut-8); }
.tut-punkte dd { margin: 0; font-size: 16px; line-height: 1.45; }
@media (min-width: 768px) { .tut-punkte { grid-template-columns: 1fr 1fr; gap: var(--tut-32) var(--tut-48); } .tut-punkte dt { font-size: 24px; } .tut-punkte dd { font-size: 17px; } }
@media (min-width: 1080px) {
  .tut-f-punkte { padding-block: var(--tut-96); }
  .tut-f-punkte__kopf { margin-bottom: var(--tut-48); }
  .tut-punkte { column-gap: var(--tut-96); row-gap: var(--tut-48); }
  .tut-punkte > div { padding-top: var(--tut-20); }
  .tut-punkte dt { font-size: 30px; letter-spacing: -0.01em; }
}

/* 5f tabelle — die Entscheidung als zweite dunkle Zäsur (Signatur oben, Tabelle Mitte, Beratung unten) */
.tut-f-tabelle { padding-block: var(--tut-48); background: var(--tut-petrol); color: var(--tut-weiss); }
.tut-f-tabelle h2, .tut-f-tabelle .tut-lead, .tut-f-tabelle .tut-matrix__hinweis { color: inherit; }
.tut-f-tabelle a { color: inherit; }
.tut-f-tabelle .tut-button--rahmen { border-color: var(--tut-weiss); color: var(--tut-weiss); }
.tut-f-tabelle__kopf { margin-bottom: var(--tut-24); max-width: 820px; }
.tut-f-tabelle__fuss { margin-top: var(--tut-24); }
.tut-f-tabelle .tut-preis { background: var(--tut-weiss); color: var(--tut-text); border-radius: var(--tut-radius); padding: var(--tut-20); }
.tut-f-tabelle .tut-preis a { color: var(--tut-petrol); }
@media (min-width: 1080px) {
  .tut-f-tabelle { padding-block: var(--tut-96); }
  .tut-f-tabelle__kopf { margin-bottom: var(--tut-48); }
  .tut-f-tabelle__kopf h2 { font-size: 48px; margin-bottom: var(--tut-20); }
  .tut-f-tabelle__kopf .tut-lead { font-size: 22px; font-weight: 400; max-width: 50ch; }
  .tut-f-tabelle__fuss { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--tut-64); align-items: start; margin-top: var(--tut-48); }
}

/* 5h moment — der Länder-Moment: eigenes Modul auf hellblauer Fläche (Petrol bleibt Signatur, Tabelle, Beratung) */
.tut-moment { padding-block: var(--tut-48); background: var(--tut-flaeche-2); color: var(--tut-text); }
.tut-moment h2 { color: var(--tut-petrol); }
.tut-moment__kopf { max-width: 820px; margin-bottom: var(--tut-32); }
.tut-moment h2 { margin-bottom: var(--tut-16); }
.tut-moment__lead { font-size: 20px; line-height: 1.4; margin: 0; max-width: 40ch; }
.tut-moment__text { margin-top: var(--tut-32); padding-top: var(--tut-24); border-top: 1px solid var(--tut-linie); max-width: 760px; }
.tut-moment__text p { font-size: 16px; }
.tut-moment__fuss { margin: var(--tut-24) 0 0; font-size: 16px; }
@media (min-width: 768px) { .tut-moment__lead { font-size: 24px; } }
@media (min-width: 1080px) {
  .tut-moment { padding-block: 112px; }
  .tut-moment h2 { font-size: 52px; max-width: 18ch; margin-bottom: var(--tut-24); }
  .tut-moment__lead { font-size: 28px; line-height: 1.3; font-weight: 300; max-width: 36ch; }
  .tut-moment__kopf { margin-bottom: var(--tut-64); }
  .tut-moment__text { margin-top: var(--tut-64); padding-top: var(--tut-32); }
  .tut-moment__text p { font-size: 17px; }
}
/* weg — Stationen einer Route: Handy senkrecht an einer Linie, Desktop waagerecht mit durchgehender Linie */
.tut-weg { list-style: none; margin: 0; padding: 0; }
.tut-weg > li { position: relative; margin: 0; padding: 0 0 var(--tut-24) 56px; }
.tut-weg > li::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: -8px; width: 2px; background: var(--tut-linie-hell); }
.tut-weg > li:last-child { padding-bottom: 0; }
.tut-weg > li:last-child::before { display: none; }
.tut-weg__nr { position: absolute; left: 0; top: 0; width: 28px; font-size: 36px; line-height: 1; font-weight: 300; text-align: center; font-variant-numeric: tabular-nums; color: var(--tut-petrol); background: var(--tut-flaeche-2); }
.tut-weg h3 { font-size: 21px; line-height: 1.25; margin: 2px 0 var(--tut-8); }
.tut-weg p { font-size: 16px; margin: 0; }
@media (min-width: 1080px) {
  .tut-weg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: var(--tut-48); border-top: 2px solid var(--tut-petrol); }
  .tut-weg > li { padding: var(--tut-32) 0 0; }
  .tut-weg > li::before { left: 0; top: -9px; bottom: auto; width: 16px; height: 16px; background: var(--tut-petrol); }
  .tut-weg > li:last-child::before { display: block; }
  .tut-weg__nr { position: static; display: block; width: auto; text-align: left; font-size: 88px; margin-bottom: var(--tut-16); background: none; }
  .tut-weg h3 { font-size: 24px; }
}
/* pruefliste — Bedingungen zum Abhaken, groß; Haken Petrol (Limette bleibt der Hauptaktion) */
.tut-pruef { list-style: none; margin: 0; padding: 0; display: grid; }
.tut-pruef li { position: relative; margin: 0; padding: var(--tut-16) 0 var(--tut-16) 44px; border-top: 1px solid var(--tut-linie); }
.tut-pruef li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 20px; height: 10px; border-left: 3px solid var(--tut-petrol); border-bottom: 3px solid var(--tut-petrol); transform: rotate(-45deg); }
.tut-pruef strong { display: block; font-size: 22px; line-height: 1.2; margin-bottom: var(--tut-4); }
.tut-pruef span { display: block; font-size: 16px; line-height: 1.4; }
@media (min-width: 768px) { .tut-pruef { grid-template-columns: 1fr 1fr; column-gap: var(--tut-48); } }
@media (min-width: 1080px) {
  .tut-pruef li { padding: var(--tut-24) 0 var(--tut-24) 60px; }
  .tut-pruef li::before { left: 6px; top: 34px; width: 26px; height: 13px; }
  .tut-pruef strong { font-size: 30px; letter-spacing: -0.01em; }
  .tut-pruef span { font-size: 17px; }
}
/* saeulen — die Wege im System nebeneinander, jede Säule ein großes Wort */
.tut-saeulen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tut-24) var(--tut-20); margin: 0; }
.tut-saeulen > div { padding-top: var(--tut-12); border-top: 2px solid var(--tut-petrol); }
.tut-saeulen dt { font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--tut-8); overflow-wrap: anywhere; }
.tut-saeulen dd { margin: 0; font-size: 15px; line-height: 1.4; }
@media (min-width: 1080px) {
  .tut-saeulen { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--tut-32); }
  .tut-saeulen > div { padding-top: var(--tut-24); }
  .tut-saeulen dt { font-size: 34px; margin-bottom: var(--tut-12); overflow-wrap: normal; }
  .tut-saeulen dd { font-size: 17px; }
}

/* Entscheidungstabelle. Handy: Zeilen mit Trennlinie (Lage fett, Weg darunter).
   Desktop: jede Zeile ein weißes Band auf der hellblauen Fläche, Lage fett links, Weg rechts (Zellen, keine Kästen) */
.tut-matrix { margin: 0; border-collapse: separate; border-spacing: 0 6px; border-top: 2px solid var(--tut-weiss); }
.tut-matrix tbody tr { padding: 12px 0; margin: 0; border: 0; border-bottom: 1px solid var(--tut-linie); }
.tut-matrix tbody th { display: block; padding: 0 0 4px; border: 0; background: transparent; font-size: 17px; line-height: 1.35; text-align: left; color: var(--tut-petrol); }
.tut-matrix td { display: block; padding: 0; border: 0; background: transparent; font-size: 16px; }
.tut-matrix td[data-spalte]::before { display: none; }
/* Die oben gewählte Lage hebt ihre Zeile hervor (reines CSS über :has; ohne :has bleibt die Tabelle neutral) */
.tut-matrix__hinweis { font-size: 14px; color: var(--tut-petrol-mittel); margin: 0 0 var(--tut-8); }
.tut-seite:has(#lage-1:checked) .tut-matrix tr[data-lage~="1"] > *, .tut-seite:has(#lage-2:checked) .tut-matrix tr[data-lage~="2"] > *,
.tut-seite:has(#lage-3:checked) .tut-matrix tr[data-lage~="3"] > *, .tut-seite:has(#lage-4:checked) .tut-matrix tr[data-lage~="4"] > *,
.tut-seite:has(#lage-5:checked) .tut-matrix tr[data-lage~="5"] > *, .tut-seite:has(#lage-6:checked) .tut-matrix tr[data-lage~="6"] > *,
.tut-seite:has(#lage-7:checked) .tut-matrix tr[data-lage~="7"] > *, .tut-seite:has(#lage-8:checked) .tut-matrix tr[data-lage~="8"] > *,
.tut-seite:has(#lage-9:checked) .tut-matrix tr[data-lage~="9"] > *, .tut-seite:has(#lage-10:checked) .tut-matrix tr[data-lage~="10"] > * { background: var(--tut-flaeche-2); color: var(--tut-text); }
.tut-seite:has(.tut-lage input:checked) .tut-matrix tr[data-lage] a { color: inherit; }
@media (min-width: 768px) {
  .tut-matrix { border-top: 0; }
  .tut-tabelle.tut-matrix thead th { font-size: 15px; color: var(--tut-petrol-mittel); border: 0; padding: 0 24px 4px; }
  .tut-f-tabelle .tut-tabelle.tut-matrix thead th { color: rgba(255, 255, 255, .75); }
  .tut-tabelle.tut-matrix tbody tr { display: table-row; margin: 0; }
  .tut-tabelle.tut-matrix tbody th { display: table-cell; width: 40%; padding: 18px 24px; border: 0; border-radius: var(--tut-radius) 0 0 var(--tut-radius); background: var(--tut-weiss); font-size: 18px; vertical-align: middle; color: var(--tut-text); }
  .tut-tabelle.tut-matrix td { display: table-cell; padding: 18px 24px; border: 0; border-left: 1px solid var(--tut-linie); border-radius: 0 var(--tut-radius) var(--tut-radius) 0; background: var(--tut-weiss); font-size: 17px; vertical-align: middle; color: var(--tut-text); }
}

/* 5g schritte — echte Reihenfolge: Handy senkrecht mit Linie, Desktop waagerecht über die volle Breite */
.tut-f-schritte { padding-block: var(--tut-48); }
.tut-f-schritte__kopf { max-width: var(--tut-spalte); margin-bottom: var(--tut-24); }
.tut-zeit { list-style: none; margin: 0; padding: 0; }
.tut-zeit > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--tut-16); margin: 0; padding-bottom: var(--tut-20); }
.tut-zeit > li:last-child { padding-bottom: 0; }
.tut-zeit > li::after { content: ""; position: absolute; left: 15px; top: 46px; bottom: 6px; width: 1px; background: var(--tut-linie-stark); }
.tut-zeit > li:last-child::after { display: none; }
.tut-zeit__nr { font-size: 40px; line-height: 1; font-weight: 300; color: var(--tut-petrol); font-variant-numeric: tabular-nums; }
.tut-zeit h3 { font-size: 19px; margin: 6px 0 var(--tut-4); }
.tut-zeit p { font-size: 16px; margin: 0; }
@media (min-width: 1080px) {
  .tut-f-schritte { padding-block: var(--tut-96); }
  .tut-f-schritte__kopf { margin-bottom: var(--tut-48); }
  .tut-zeit { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: var(--tut-32); border-top: 2px solid var(--tut-petrol); }
  .tut-zeit > li { display: block; padding: var(--tut-24) 0 0; }
  .tut-zeit > li::after { display: none; }
  .tut-zeit__nr { display: block; font-size: 72px; margin-bottom: var(--tut-16); }
  .tut-zeit h3 { font-size: 21px; margin-top: 0; }
}

/* ---------- 6. Bausteine ---------- */
/* Quellen je Kapitel als Fußnote — gesammelt im Quellenblock */
.tut-seite sup { font-size: 14px; line-height: 0; vertical-align: super; }
.tut-fn { font-weight: 500; color: var(--tut-petrol-mittel); text-decoration: none; margin-left: 2px; }
.tut-fn:hover { text-decoration: underline; }
.tut-dunkel .tut-fn { color: var(--tut-weiss); opacity: .85; }
.tut-belege { margin: var(--tut-16) 0 0; padding-left: 24px; font-size: 14px; color: var(--tut-text); }
.tut-belege li { margin-bottom: var(--tut-8); }
.tut-belege strong { color: var(--tut-petrol); }

/* Gegenüberstellung: deckt / deckt nicht */
.tut-gegen2 { display: grid; gap: var(--tut-16); margin: var(--tut-24) 0 0; }
.tut-gegen2 h3 { font-size: 18px; padding-bottom: var(--tut-8); border-bottom: 2px solid var(--tut-petrol); margin-bottom: var(--tut-12); }
.tut-gegen2 > div + div h3 { border-bottom-color: var(--tut-linie-stark); color: var(--tut-petrol-mittel); }
.tut-gegen2 li { font-size: 17px; }
@media (min-width: 768px) { .tut-gegen2 { grid-template-columns: 1fr 1fr; column-gap: var(--tut-48); } }

/* Musterpreis (DU-31): nur wenn die zentrale Quelle für diese Seite einen Fall hat */
.tut-preis { margin: 0; }
.tut-preis__titel { font-size: 16px; margin: 0 0 var(--tut-12); }
.tut-preis__zahlen { display: flex; flex-wrap: wrap; gap: var(--tut-16) var(--tut-32); margin: 0; }
.tut-preis__zahlen > div { display: flex; flex-direction: column; gap: var(--tut-4); }
.tut-preis__wert { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--tut-petrol); font-variant-numeric: proportional-nums; }
.tut-preis__wert small { font-size: 18px; font-weight: 400; }
.tut-preis__was { font-size: 15px; color: var(--tut-petrol-mittel); }
.tut-preis__hinweis { font-size: 14px; color: var(--tut-petrol-mittel); margin: var(--tut-12) 0 0; }
.tut-preis--klein .tut-preis__wert { font-size: 26px; }
.tut-preis--klein .tut-preis__wert small { font-size: 16px; }
.tut-tarif-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tut-12) var(--tut-24); margin-top: var(--tut-24); }

/* Kurz gesagt: Kurzantwort groß, Zielgruppen zweispaltig — weiß mit Linie, damit eine folgende getönte Form abgesetzt bleibt */
.tut-kurz2 { border-top: 1px solid var(--tut-linie); }
.tut-kurzantwort { font-size: 17px; line-height: 1.5; margin: 0 0 var(--tut-24); max-width: 38em; }
.tut-kurzantwort strong { color: var(--tut-petrol); }
.tut-zielgruppe a { text-decoration-color: var(--tut-linie-stark); }
.tut-zielgruppe a:hover { text-decoration-color: currentColor; }
.tut-zielgruppe { display: grid; gap: var(--tut-24); }
.tut-zielgruppe h3 { font-size: 18px; margin-bottom: var(--tut-12); }
.tut-zielgruppe li { font-size: 15px; }
@media (min-width: 768px) { .tut-kurzantwort { font-size: 22px; } .tut-zielgruppe { grid-template-columns: 3fr 2fr; column-gap: var(--tut-48); } .tut-zielgruppe li { font-size: 16px; } }
@media (min-width: 1080px) { .tut-kurzantwort { font-size: 25px; line-height: 1.45; font-weight: 300; } }

/* ---------- 7. Beratung — dunkler Abschluss: das Formular führt ---------- */
.tut-beratung { background: var(--tut-petrol-dunkel); padding-block: var(--tut-48); }
/* Handy: Überschrift → Menschen → Formular → Telefon und Siegel. Desktop: links Überschrift, Menschen, Telefon+Siegel · rechts das Formular */
.tut-beratung__innen { display: flex; flex-direction: column; }
.tut-beratung__kopf { order: 1; }
.tut-duo { order: 2; }
.tut-anfrage { order: 3; }
.tut-beratung__kontakt { order: 4; }
/* Doppelporträt: beide Menschen in einem Bild; der weiße Studiogrund verschmilzt mit der hellen Fläche (multiply) */
.tut-duo { margin: var(--tut-24) 0 0; }
.tut-duo__bild { display: flex; align-items: flex-end; max-width: 440px; background: var(--tut-flaeche-2); border-radius: var(--tut-radius); overflow: hidden; }
.tut-duo__bild img { flex: 1 1 0; min-width: 0; width: 50%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border-radius: 0; mix-blend-mode: multiply; }
/* Namen lesbar unter dem Bild, je Person unter ihrem Porträt */
.tut-duo figcaption { max-width: 440px; margin-top: var(--tut-12); font-size: 16px; line-height: 1.35; }
.tut-duo__namen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tut-16); }
.tut-duo__namen li { margin: 0; }
.tut-duo__namen strong { display: block; font-size: 19px; }
.tut-duo__namen li span { display: block; margin-top: 4px; font-size: 15px; }
/* Kontaktzeile: Telefon kräftig mit Zeiten und Termin, rechts daneben das Siegel */
.tut-beratung__kontakt { display: flex; align-items: center; justify-content: space-between; gap: var(--tut-16); margin-top: var(--tut-32); padding-top: var(--tut-20); border-top: 1px solid var(--tut-linie-hell); }
.tut-beratung__ruf { flex: 1 1 auto; min-width: 0; }
.tut-beratung__nummer { display: inline-flex; align-items: center; min-height: var(--tut-klick); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.tut-beratung__nummer:hover { text-decoration: underline; }
.tut-beratung__zeiten { font-size: 15px; margin: 0; }
.tut-beratung__termin { display: inline-flex; align-items: center; min-height: var(--tut-klick); font-weight: 600; }
.tut-beratung__siegel { flex: none; }
.tut-beratung__siegel #proSealWidget:empty { display: none; }
.tut-beratung__siegel #proSealWidget:not(:empty) + .tut-beratung__bewertung { display: none; }
.tut-beratung__bewertung { font-size: 16px; margin: 0; }
.tut-anfrage { margin-top: var(--tut-32); background: var(--tut-weiss); color: var(--tut-text); border-radius: var(--tut-radius); padding: var(--tut-24) var(--tut-20); }
.tut-dunkel .tut-anfrage h3 { color: var(--tut-petrol); font-size: 24px; }
.tut-dunkel .tut-anfrage a:not(.tut-button) { color: var(--tut-petrol); }
.tut-dunkel .tut-anfrage .tut-button--rahmen { border-color: var(--tut-petrol); color: var(--tut-petrol); }
.tut-anfrage > p { font-size: 16px; }
.tut-anfrage .hs-form-frame:empty { display: none; }
.tut-anfrage .hs-form-frame:not(:empty) + .tut-anfrage__ersatz { display: none; }
.tut-anfrage__ersatz { display: grid; gap: var(--tut-12); justify-items: start; font-size: 16px; }
.tut-anfrage:has(.hs-form-frame:not(:empty)) { padding: var(--tut-8); }
@media (min-width: 768px) { .tut-anfrage { padding: var(--tut-32); } }
@media (min-width: 1080px) {
  .tut-beratung { padding-block: 128px; }
  /* links Überschrift und Doppelporträt · rechts das Formular gleich hoch, oben bündig · Kontakt darunter über die Breite */
  .tut-beratung__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kopf anfrage" "duo anfrage" "kontakt kontakt"; grid-template-rows: auto 1fr auto; column-gap: var(--tut-64); align-items: stretch; }
  .tut-beratung__kopf { grid-area: kopf; }
  .tut-beratung__kopf p { font-size: 18px; line-height: 1.45; max-width: 42ch; }
  .tut-beratung h2 { font-size: 48px; max-width: 14ch; }
  .tut-duo { grid-area: duo; margin-top: var(--tut-32); }
  .tut-duo__bild, .tut-duo figcaption { max-width: none; }
  .tut-beratung__kontakt { grid-area: kontakt; margin-top: var(--tut-32); }
  .tut-beratung__nummer { font-size: 36px; }
  .tut-anfrage { grid-area: anfrage; margin-top: 0; height: 100%; }
}

/* ---------- 8. Fragen, Unterlagen ---------- */
.tut-f-faq { padding-block: var(--tut-48); }
.tut-f-faq .tut-akkordeon summary { font-size: 17px; }
@media (min-width: 1080px) { .tut-f-faq { padding-block: var(--tut-96); } .tut-f-faq__innen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--tut-64); align-items: start; } }

/* Anhang nach der Beratung, wie ein Dokumentenfuß */
.tut-unterlagen { padding-block: var(--tut-48); background: var(--tut-flaeche-1); }
.tut-unterlagen__innen { display: grid; gap: var(--tut-32); }
.tut-unterlagen h2, .tut-unterlagen .tut-quellen summary strong { font-size: 20px; line-height: 1.25; margin-bottom: var(--tut-12); color: var(--tut-petrol); }
.tut-unterlagen__intro { font-size: 15px; }
.tut-unterlagen .tut-dokumente a { grid-template-columns: 1fr; row-gap: 2px; padding: 8px 0; }
.tut-hinweise { list-style: none; margin: 0; padding: 0; }
.tut-hinweise li { position: relative; padding-left: 24px; font-size: 15px; margin-bottom: var(--tut-8); }
.tut-hinweise li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--tut-petrol-mittel); }
.tut-quellen ul { list-style: none; padding: 0; }
.tut-quellen li { margin: 0; }
.tut-quellen ul li a { display: inline-flex; align-items: center; min-height: var(--tut-klick); font-size: 15px; }
.tut-stand { font-size: 14px; color: var(--tut-petrol-mittel); margin: var(--tut-8) 0 0; }
.tut-weiter { margin-top: var(--tut-32); padding-top: var(--tut-20); border-top: 1px solid var(--tut-linie-stark); }
.tut-weiter h2 { font-size: 17px; margin-bottom: var(--tut-4); }
.tut-weiterliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tut-16); }
.tut-weiterliste li { margin: 0; }
.tut-weiterliste a { display: flex; align-items: center; min-height: var(--tut-klick); padding: 4px 0; font-size: 15px; line-height: 1.3; }
@media (min-width: 768px) {
  .tut-unterlagen .tut-dokumente a { grid-template-columns: 96px minmax(0, 1fr); padding: 10px 0; }
  .tut-unterlagen .tut-quellen summary { pointer-events: none; padding: 0; min-height: 0; }
  .tut-unterlagen .tut-quellen summary::after { display: none; }
  .tut-weiterliste { display: flex; flex-wrap: wrap; gap: 0 var(--tut-32); }
}
/* Dokumente als klare Zeilen (Behörde | Titel) mit Trennlinie */
.tut-unterlagen .tut-dokumente li { border-bottom: 1px solid var(--tut-linie); }
.tut-unterlagen .tut-quellen { margin-top: var(--tut-32); }
@media (min-width: 1080px) {
  .tut-unterlagen { padding-block: var(--tut-64); }
  .tut-unterlagen__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--tut-96); }
  .tut-hinweise li { margin-bottom: var(--tut-12); line-height: 1.5; }
  .tut-weiter { display: flex; align-items: baseline; gap: var(--tut-32); margin-top: var(--tut-48); }
  .tut-weiter h2 { flex: none; margin: 0; }
}

/* Kurz gesagt: links die Kurzantwort groß, rechts für wen und für wen weniger untereinander */
.tut-kurz2 { padding-block: var(--tut-48); }
.tut-kurz2__innen { display: grid; gap: var(--tut-24); }
.tut-zielgruppe__nein { padding-top: var(--tut-16); border-top: 1px solid var(--tut-linie); }
@media (min-width: 1080px) {
  .tut-kurz2 { padding-block: var(--tut-96); }
  .tut-kurz2__innen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--tut-64); align-items: start; }
  .tut-kurz2 .tut-kurzantwort { margin: 0; font-size: 28px; line-height: 1.4; }
  .tut-kurz2 .tut-zielgruppe { grid-template-columns: 1fr; row-gap: var(--tut-24); }
  .tut-kurz2 .tut-zielgruppe li { font-size: 15px; }
}


.tut-kleber[hidden] { display: none; }

/* Fuß als dunkler Markenabschluss (Vorschau; global gehört er zu DU-42) */
/* Fuß hell: Petrol-Vollflächen bleiben Kernzahl und Beratung (Zweitmeinung R24: Dunkel rationieren) */
.tut-fuss { background: var(--tut-flaeche-1); color: var(--tut-text); border-top: 0; padding-block: var(--tut-48); }
.tut-fuss a { color: var(--tut-petrol); }

/* ---------- 9. Handy-Verdichtung (am Ende, übersteuert die Formwerte) ---------- */
@media (max-width: 767px) {
  .tut-lage, .tut-f-lese, .tut-f-rand, .tut-f-band, .tut-f-paar, .tut-f-gegen, .tut-f-punkte, .tut-f-tabelle, .tut-f-schritte, .tut-moment, .tut-beratung, .tut-f-faq, .tut-unterlagen { padding-block: 32px; }
  .tut-fuss__links { flex-direction: row; flex-wrap: wrap; gap: 0 var(--tut-24); }
  /* Statusknöpfe als wischbare Reihe statt vier Zeilen Umbruch */
  .tut-lage__wahl { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: var(--tut-16) calc(-1 * var(--tut-rand)) 0; padding: 2px var(--tut-rand) 4px; gap: 6px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tut-lage__wahl::-webkit-scrollbar { display: none; }
  .tut-lage__wahl label { padding: 6px 14px; font-size: 15px; flex: none; }
  .tut-lage__hinweis { display: block; font-size: 14px; color: var(--tut-petrol-mittel); margin: var(--tut-12) 0 0; }
  .tut-lage__hinweis + .tut-lage__auswahl .tut-lage__wahl { margin-top: var(--tut-8); }
  /* Kapitelzeile: Ausblendung rechts zeigt, dass man wischen kann */
  .tut-inhalt ol { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tut-f-faq .tut-akkordeon summary { padding-block: 10px; min-height: 52px; }
  /* Landeskarte als Zeilen (Begriff links, Wert rechts) statt zwei gequetschter Spalten */
  .tut-landkarte dl { grid-template-columns: 1fr; }
  .tut-landkarte dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--tut-12); align-items: baseline; }
  .tut-landkarte dl > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--tut-linie); }
  .tut-landkarte dl > div:last-child { border-bottom: 0; }
  .tut-landkarte dd { margin: 0; }
  .tut-landkarte dd strong { font-size: 18px; }
  /* Kopffoto im Kopf aus (LCP); derselbe Anker steht nach der Signatur (.tut-landfoto-handy) */
  .tut-landkopf__foto { display: none; }
  .tut-f-tabelle .tut-matrix tbody th,
  .tut-f-tabelle .tut-matrix td { color: var(--tut-weiss); }
  .tut-f-tabelle .tut-matrix tbody tr { border-bottom-color: var(--tut-linie-hell); }
  /* Lage-Antwort schlank: Zugang, Lösung, Kapitel-Link, Knopf */
  .tut-lage__mensch-text { display: none; }
  .tut-lage__mensch { margin-top: var(--tut-16); padding-top: var(--tut-16); }
  /* Beratung: Telefon kleiner, damit es neben das Siegel passt; Doppelporträt flacher */
  .tut-beratung__nummer { font-size: 24px; }
  .tut-beratung__zeiten { font-size: 14px; }
  .tut-duo__bild img { aspect-ratio: 1 / 1; }
}