/* ==========================================================================
   tutario-design.css — Fundament der Webdesign-Handschrift Tutario
   Stand: 4. September 2026 · Fassung 1 · Quelle: gemeinsames-wissen/webdesign-handschrift.md (Fassung 4)

   Regeln für diese Datei
   - Alle Klassen tragen die Vorsilbe tut- (Cursors Filter lässt sie durch, HubSpot-Theme kollidiert nicht).
   - Handy zuerst: Grundwerte gelten ab 0 px, Desktop kommt per min-width dazu (768 px, 1080 px).
   - Nur Markenfarben. Rahmen und Linien sind Petrol mit Deckkraft, nie ein eigenes Grau.
   - Keine Schatten, keine Verläufe, keine Versalien. Radius 8 px (Karte/Feld/Bild), 30 px (Button).
   - Diese Datei wird im HubSpot-Child-Theme »CLEAN x Tutario« eingebunden; der Pfad der Schrift
     wird dort auf den HubSpot-Dateimanager umgestellt (Fahrplan Abschnitt 3/4).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift — Onest, selbst gehostet (SIL Open Font License 1.1, Google Fonts wird nicht geladen)
   Lokal: onest-variable-latin.woff2 liegt neben dieser Datei. Live: Pfad auf /hubfs/… umstellen.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("onest-variable-latin.woff2") format("woff2-variations"),
       url("onest-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Werte der Handschrift
   -------------------------------------------------------------------------- */
:root {
  --tut-petrol: #00424F;
  --tut-petrol-mittel: #024C5A;
  --tut-petrol-dunkel: #00333D;
  --tut-gruen: #B6C607;
  --tut-tuerkis: #00A9B8;
  --tut-tuerkis-mittel: #097E92;
  --tut-flaeche-1: #F5F8F8;
  --tut-flaeche-2: #E8F7F9;
  --tut-weiss: #FFFFFF;
  --tut-text: #20242B;

  /* Linien und Rahmen: Petrol mit Deckkraft, kein eigenes Grau */
  --tut-linie: rgba(0, 66, 79, 0.16);
  --tut-linie-stark: rgba(0, 66, 79, 0.32);
  --tut-linie-hell: rgba(255, 255, 255, 0.24);

  --tut-schrift: "Onest", "Segoe UI", system-ui, sans-serif;

  /* Achterraster */
  --tut-4: 4px; --tut-8: 8px; --tut-12: 12px; --tut-16: 16px; --tut-20: 20px; --tut-24: 24px;
  --tut-32: 32px; --tut-48: 48px; --tut-64: 64px; --tut-96: 96px;

  --tut-abschnitt: 48px;        /* Abschnittsabstand mobil; Desktop 96 px */
  --tut-rand: 20px;             /* Handy-Rand */
  --tut-inhalt: 1080px;         /* Inhaltsbreite */
  --tut-spalte: 720px;          /* Fließtextspalte */

  --tut-radius: 8px;
  --tut-radius-button: 30px;
  --tut-button-hoehe: 51px;
  --tut-klick: 44px;

  --tut-dauer: 0.22s;
}

/* --------------------------------------------------------------------------
   3. Grundlagen — gelten innerhalb von .tut-seite (Body oder Seitencontainer)
   -------------------------------------------------------------------------- */
.tut-seite {
  margin: 0;
  background: var(--tut-weiss);
  color: var(--tut-text);
  font-family: var(--tut-schrift);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.tut-seite *, .tut-seite *::before, .tut-seite *::after { box-sizing: border-box; }
.tut-seite :where(img, svg) { display: block; max-width: 100%; height: auto; }
.tut-seite :where(img) { border-radius: var(--tut-radius); }

/* Überschriften — Aussagen, Gewichte kontrastieren (700 gegen 400), enge Zeilenhöhe */
.tut-seite :where(h1, h2, h3, h4) {
  margin: 0 0 var(--tut-16);
  color: var(--tut-petrol);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  hyphens: manual;
}
.tut-seite :where(h1) { font-size: 28px; line-height: 1.1; letter-spacing: -0.005em; }
.tut-seite :where(h2) { font-size: 26px; }
.tut-seite :where(h3) { font-size: 18px; margin-bottom: var(--tut-8); }
.tut-seite :where(h4) { font-size: 18px; margin-bottom: var(--tut-8); }

/* Zweifarbige Überschrift: Zeile 1 Petrol fett, Zeile 2 Petrol mittel normal (Richtung C, Phase 2) */
.tut-h1-zwei { display: block; }
.tut-h1-zwei .tut-h1-zeile2 { display: block; color: var(--tut-petrol-mittel); font-weight: 400; margin-top: var(--tut-4); }

.tut-seite :where(p) { margin: 0 0 var(--tut-16); }
.tut-seite :where(p:last-child) { margin-bottom: 0; }
.tut-seite :where(ul, ol) { margin: 0 0 var(--tut-16); padding-left: 22px; }
.tut-seite :where(li) { margin-bottom: var(--tut-8); }
.tut-seite :where(li)::marker { color: var(--tut-petrol); }
.tut-seite :where(strong) { font-weight: 700; }
.tut-seite :where(small), .tut-sekundaer { font-size: 16px; }
.tut-seite :where(hr) { border: 0; border-top: 1px solid var(--tut-linie); margin: var(--tut-32) 0; }

/* Links im Fließtext: Petrol, unterstrichen, Hover Petrol dunkel */
.tut-seite :where(a) { color: var(--tut-petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tut-seite :where(a:hover) { color: var(--tut-petrol-dunkel); text-decoration-thickness: 2px; }

/* Tastaturfokus: 2 px Petrol mit 2 px Abstand — nie outline: none ohne Ersatz */
.tut-seite :focus-visible { outline: 2px solid var(--tut-petrol); outline-offset: 2px; }
.tut-seite :is(.tut-dunkel, .tut-kasten, .tut-vertrauen, .tut-kopfband, .tut-vergleichsband) :focus-visible { outline-color: var(--tut-weiss); }
.tut-sprung { position: absolute; left: -9999px; top: 8px; z-index: 30; padding: 8px 16px; background: var(--tut-weiss); color: var(--tut-petrol); }
.tut-sprung:focus { left: 8px; }

/* Zahlen: Tabellenziffern, damit Beiträge und Wartezeiten sauber untereinander stehen */
.tut-zahl, .tut-seite :where(td, th) { font-variant-numeric: tabular-nums; }

/* Zweittext (Rolle, Bildunterschrift, Stand): Petrol mittel — nur für Nicht-Fließtext-Elemente */
.tut-zweittext { color: var(--tut-petrol-mittel); }

/* Nur für Vorleseprogramme */
.tut-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   4. Breiten und Abschnitte
   -------------------------------------------------------------------------- */
.tut-wrap { width: 100%; max-width: var(--tut-inhalt); margin-inline: auto; padding-inline: var(--tut-rand); }
.tut-spalte { max-width: var(--tut-spalte); }

.tut-abschnitt { padding-block: var(--tut-abschnitt); }
.tut-abschnitt--eng { padding-block: var(--tut-32); }
.tut-abschnitt--ohne-oben { padding-top: 0; }

/* Flächen — der Rhythmus entsteht über Hintergrund und Breite, nicht über Kästen */
.tut-flaeche-1 { background: var(--tut-flaeche-1); }
.tut-flaeche-2 { background: var(--tut-flaeche-2); }
.tut-dunkel { background: var(--tut-petrol); color: var(--tut-weiss); }
.tut-dunkel h1, .tut-dunkel h2, .tut-dunkel h3, .tut-dunkel h4 { color: var(--tut-weiss); }
.tut-dunkel a { color: var(--tut-weiss); }
.tut-dunkel a:hover { color: var(--tut-weiss); }
.tut-dunkel li::marker { color: var(--tut-weiss); }
.tut-dunkel .tut-zweittext { color: var(--tut-weiss); }

/* Redaktionslayout (Messlatte Muster 2): Zwischenüberschrift links, Text rechts — erst ab 1080 px */
.tut-redaktion { display: block; }

/* Weitere Abschnittsformen für den Rhythmus: dunkles Band, zwei Spalten, drei Spalten, mittige Spalte */
.tut-band h2 { max-width: 720px; }
.tut-band__satz { max-width: 720px; font-size: 18px; margin-bottom: var(--tut-24); }
.tut-dunkel .tut-haken li::before { border-color: var(--tut-gruen); }
.tut-haken--zwei li strong { display: block; color: inherit; }
.tut-haken--kompakt { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tut-16); }
.tut-haken--kompakt li { font-size: 16px; }
.tut-zweispalt { display: grid; gap: var(--tut-24); margin: var(--tut-8) 0 var(--tut-16); }
.tut-dreispalt { display: grid; gap: var(--tut-32); }
.tut-dreispalt ul { padding-left: 20px; }
.tut-dreispalt li { font-size: 16px; }
.tut-spalte-breit { max-width: calc(var(--tut-spalte) + 200px); }

/* Kundenstimme: eine echte Bewertung, groß und leicht — kein Kasten, keine Sterne-Grafik */
.tut-stimme { padding-block: var(--tut-48); }
.tut-stimme__zitat { margin: 0 auto; max-width: 720px; }
.tut-stimme__text { font-size: 24px; font-weight: 300; line-height: 1.35; color: var(--tut-petrol); letter-spacing: -0.005em; text-wrap: balance; margin-bottom: var(--tut-12); }
.tut-stimme__zitat footer { font-size: 16px; color: var(--tut-petrol-mittel); }

/* Berater-Kurzzeile: früh auf der Seite, verweist auf das Berater-Modul */
.tut-berater-zeile { display: flex; align-items: center; gap: var(--tut-12); margin-top: var(--tut-24); padding: var(--tut-12) 0; border-top: 1px solid var(--tut-linie); border-bottom: 1px solid var(--tut-linie); text-decoration: none; min-height: var(--tut-klick); }
.tut-berater-zeile__fotos { display: flex; gap: var(--tut-4); flex: none; }
.tut-berater-zeile__fotos img { width: 48px; height: 48px; object-fit: cover; object-position: top center; border-radius: var(--tut-radius); background: var(--tut-flaeche-1); }
.tut-berater-zeile__text { display: flex; flex-direction: column; font-size: 16px; line-height: 1.35; }
.tut-berater-zeile__text strong { color: var(--tut-text); font-weight: 600; }
.tut-berater-zeile__text span { color: var(--tut-petrol); text-decoration: underline; text-underline-offset: 3px; }

/* Merksatz: ein typografischer Moment je Seite — groß, leicht, Petrol; kein Kasten, keine Linie */
.tut-merksatz { display: block; font-size: 24px; font-weight: 300; line-height: 1.3; color: var(--tut-petrol); letter-spacing: -0.005em; margin: var(--tut-8) 0 var(--tut-24); max-width: 560px; text-wrap: balance; }

/* Klappe: Liste, die auf dem Handy zu ist und ab data-tut-offen-ab (px) offen steht — tutario-site.js setzt den Zustand */
.tut-klappe { border-top: 1px solid var(--tut-linie); }
.tut-klappe:last-child { border-bottom: 1px solid var(--tut-linie); }
.tut-klappe summary { display: flex; align-items: center; justify-content: space-between; gap: var(--tut-16); min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; }
.tut-klappe summary::-webkit-details-marker { display: none; }
.tut-klappe summary :is(h2, h3) { margin: 0; }
.tut-klappe summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: var(--tut-4); border-right: 2px solid var(--tut-petrol); border-bottom: 2px solid var(--tut-petrol); transform: rotate(45deg); transition: transform var(--tut-dauer); }
.tut-klappe[open] > summary::after { transform: rotate(225deg); }
.tut-klappe ul, .tut-klappe .tut-klappe__inhalt { padding-bottom: var(--tut-8); }
.tut-klappe summary strong { color: var(--tut-petrol); }
.tut-mitte__text { max-width: var(--tut-spalte); }

/* --------------------------------------------------------------------------
   5. Buttons — eine grüne Hauptaktion je Seite, alles andere Petrol oder Rahmen
   -------------------------------------------------------------------------- */
.tut-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tut-8);
  min-height: var(--tut-button-hoehe); min-width: var(--tut-klick);
  padding: 12px 28px;
  border: 2px solid var(--tut-petrol); border-radius: var(--tut-radius-button);
  background: var(--tut-petrol); color: var(--tut-weiss);
  font: inherit; font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background-color var(--tut-dauer), border-color var(--tut-dauer), color var(--tut-dauer);
}
.tut-button:hover { background: var(--tut-petrol-dunkel); border-color: var(--tut-petrol-dunkel); color: var(--tut-weiss); text-decoration: none; }
.tut-button--haupt { background: var(--tut-gruen); border-color: var(--tut-gruen); color: var(--tut-petrol); }
.tut-button--haupt:hover { background: var(--tut-gruen); border-color: var(--tut-petrol); color: var(--tut-petrol); }
.tut-button--rahmen { background: transparent; color: var(--tut-petrol); }
.tut-button--rahmen:hover { background: var(--tut-petrol); color: var(--tut-weiss); }
.tut-dunkel .tut-button--rahmen { border-color: var(--tut-weiss); color: var(--tut-weiss); }
.tut-dunkel .tut-button--rahmen:hover { background: var(--tut-weiss); color: var(--tut-petrol); }
.tut-button--breit { width: 100%; }
.tut-button svg { width: 20px; height: 20px; flex: none; }

.tut-aktionen { display: flex; flex-direction: column; gap: var(--tut-12); align-items: stretch; }

/* Textlink mit Klickfläche (Menü, Fuß, Inhaltsverzeichnis): mindestens 44 px hoch */
.tut-link-block { display: inline-flex; align-items: center; min-height: var(--tut-klick); padding: 10px 0; }

/* --------------------------------------------------------------------------
   6. Kopfzeile (Pilot) — schmal, hell, ein Button rechts
   -------------------------------------------------------------------------- */
.tut-kopfzeile { border-bottom: 1px solid var(--tut-linie); background: var(--tut-weiss); }
.tut-kopfzeile__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--tut-16); min-height: 64px; }
.tut-logo { display: inline-flex; align-items: center; min-height: var(--tut-klick); }
.tut-logo img { width: auto; height: 34px; border-radius: 0; }
.tut-kopfzeile .tut-button { min-height: var(--tut-klick); padding: 8px 18px; font-size: 16px; }

/* --------------------------------------------------------------------------
   7. Kopf »Die Zahl« (Leistungsseite) — zweifarbige Überschrift, ein Petrol-Kasten
   -------------------------------------------------------------------------- */
.tut-kopf { padding-block: var(--tut-32) var(--tut-24); }
/* Handy-Reihenfolge: Überschrift → Kasten mit der Zahl → Hauptaktion (Adrian, 04.09.) */
.tut-kopf__innen > h1 { margin-bottom: var(--tut-20); }
.tut-kopf__innen > .tut-kasten { margin-bottom: var(--tut-20); }
.tut-kopf__einleitung { font-size: 18px; margin-bottom: var(--tut-24); }

.tut-kasten {
  background: var(--tut-petrol); color: var(--tut-weiss);
  border-radius: var(--tut-radius);
  padding: var(--tut-24) var(--tut-20);
}
.tut-kasten__zeile { margin: 0; font-size: 16px; }
.tut-kasten__zahl {
  display: block; margin: var(--tut-8) 0 var(--tut-4);
  font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
}
.tut-kasten__zahl .tut-zahl-block { white-space: nowrap; }
.tut-kasten__zahl small { font-size: 22px; font-weight: 400; white-space: nowrap; }
.tut-kasten__einordnung { margin: 0; font-size: 16px; }

/* Das »i«: Erklärung hinter einem Aufklapper, nie als dritter Satz */
.tut-info { margin-top: var(--tut-12); border-top: 1px solid var(--tut-linie-hell); padding-top: var(--tut-8); }
.tut-info summary {
  display: inline-flex; align-items: center; gap: var(--tut-8);
  min-height: var(--tut-klick); cursor: pointer; list-style: none;
  font-size: 16px; color: var(--tut-weiss);
}
.tut-info summary::-webkit-details-marker { display: none; }
.tut-info__i {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border: 1.5px solid var(--tut-weiss); border-radius: 50%;
  font-size: 14px; font-weight: 700; font-style: normal; line-height: 1;
}
.tut-info p { margin: var(--tut-4) 0 0; font-size: 16px; }

/* --------------------------------------------------------------------------
   8. Vertrauensband — dunkles Band, ProSeal mittig, kurzer Text
   Handy: nach dem ersten Inhaltsabschnitt · Desktop: direkt unter dem Kopf (siehe .tut-kopfgruppe)
   -------------------------------------------------------------------------- */
/* DOM-Reihenfolge = Handy-Reihenfolge (Kopf, Kapitelzeile, erster Abschnitt, Band); Desktop tauscht per order.
   main ist Flex-Spalte, damit die Kapitelzeile über die ganze Seite klebt. */
.tut-hauptteil { display: flex; flex-direction: column; }
.tut-hauptteil > * { order: 5; }
.tut-hauptteil > .tut-kopf { order: 1; }
.tut-hauptteil > .tut-inhaltnav { order: 2; }
.tut-hauptteil > .tut-erster { order: 3; }
.tut-hauptteil > .tut-vertrauen { order: 4; }
.tut-erster { padding-top: var(--tut-24); }

.tut-vertrauen { background: var(--tut-petrol-dunkel); color: var(--tut-weiss); padding-block: var(--tut-32); }
.tut-vertrauen__innen { display: flex; flex-direction: column; align-items: center; gap: var(--tut-20); text-align: center; }
.tut-vertrauen h2 { color: var(--tut-weiss); font-size: 22px; margin-bottom: var(--tut-8); }
.tut-vertrauen p { margin: 0; font-size: 16px; }
.tut-vertrauen a { color: var(--tut-weiss); }
/* Siegelfläche: ProSeal-Skript baut hier live das drehbare Siegel ein; im Piloten steht ein Platzhalter in Originaloptik */
.tut-proseal { width: 164px; min-height: 230px; flex: none; display: flex; flex-direction: column; align-items: center; }

/* --------------------------------------------------------------------------
   9. Foto als eigener Abschnitt — ein starkes Bild je Seite
   -------------------------------------------------------------------------- */
.tut-foto { margin: 0 auto; }
.tut-foto--abschnitt { padding: var(--tut-32) 0 0; }            /* Handy: Foto randlos, ein Bruch im Rhythmus */
.tut-foto--abschnitt img { border-radius: 0; }
.tut-foto--abschnitt figcaption { padding-inline: var(--tut-rand); }
.tut-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tut-radius); }
.tut-foto figcaption { margin-top: var(--tut-8); font-size: 14px; color: var(--tut-petrol-mittel); }

/* --------------------------------------------------------------------------
   10. Tabelle — Desktop klassisch, Handy als gestapelte Zeilen (nie abgeschnitten)
   -------------------------------------------------------------------------- */
.tut-tabelle { width: 100%; border-collapse: collapse; margin: 0 0 var(--tut-16); font-size: 16px; }
.tut-tabelle caption { text-align: left; font-weight: 700; color: var(--tut-petrol); padding-bottom: var(--tut-8); }
.tut-tabelle th, .tut-tabelle td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--tut-linie); }
.tut-tabelle th { font-weight: 700; color: var(--tut-petrol); }
.tut-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tut-tabelle tbody tr { display: block; padding: var(--tut-12) 0 var(--tut-4); border-bottom: 2px solid var(--tut-linie-stark); }
.tut-tabelle tbody tr:last-child { border-bottom: 0; }
.tut-tabelle td { display: block; border-bottom: 0; padding: var(--tut-4) 0; }
.tut-tabelle td[data-spalte]::before { content: attr(data-spalte); display: block; font-size: 14px; font-weight: 600; color: var(--tut-petrol-mittel); }
.tut-tabelle td:first-child { font-weight: 700; font-size: 18px; padding-bottom: var(--tut-8); }

/* Karten-Tabelle: auf dem Handy drei Karten zum Wischen (erste Zeile = Petrol, hervorgehoben), ab 768 px normale Tabelle */
.tut-tabelle--karten { display: block; margin-inline: calc(-1 * var(--tut-rand)); width: auto; max-width: none; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.tut-tabelle--karten tbody { display: flex; gap: var(--tut-12); overflow-x: auto; padding: var(--tut-4) var(--tut-rand) var(--tut-16); scroll-snap-type: x mandatory; scroll-padding-inline: var(--tut-rand); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tut-tabelle--karten tbody::-webkit-scrollbar { display: none; }
.tut-tabelle--karten tbody tr { flex: 0 0 78%; scroll-snap-align: start; padding: var(--tut-20); border: 0; border-radius: var(--tut-radius); background: var(--tut-flaeche-2); }
.tut-tabelle--karten tbody tr:first-child { background: var(--tut-petrol); color: var(--tut-weiss); }
.tut-tabelle--karten td { padding: var(--tut-8) 0; border-top: 1px solid var(--tut-linie); }
.tut-tabelle--karten tr:first-child td { border-top-color: var(--tut-linie-hell); }
.tut-tabelle--karten td:first-child { border-top: 0; padding-top: 0; font-size: 22px; padding-bottom: var(--tut-12); color: var(--tut-petrol); }
.tut-tabelle--karten tr:first-child td:first-child { color: var(--tut-weiss); }
.tut-tabelle--karten td[data-spalte]::before { color: var(--tut-petrol-mittel); }
.tut-tabelle--karten tr:first-child td[data-spalte]::before { color: var(--tut-weiss); opacity: .8; }
/* Knappe Tabelle: auf dem Handy drei kurze Absätze — Begriff, Satz, „Beispiel: …“ — ohne Feldbeschriftungen */
.tut-tabelle--knapp tbody tr { padding: var(--tut-16) 0 var(--tut-12); }
.tut-tabelle--knapp td[data-knapp]::before { display: none; }
.tut-tabelle--knapp td[data-spalte="Beispiel"] { font-size: 16px; }
.tut-tabelle--knapp td[data-spalte="Beispiel"]::before { display: inline; content: "Beispiel: "; font-size: 16px; }
.tut-tabelle__hinweis { font-size: 14px; color: var(--tut-petrol-mittel); margin: 0 0 var(--tut-16); }

/* --------------------------------------------------------------------------
   11. Akkordeon — natives <details>, ohne Skript bedienbar; tutario-site.js macht das Öffnen weich
   -------------------------------------------------------------------------- */
.tut-akkordeon { border-top: 1px solid var(--tut-linie); margin: 0 0 var(--tut-16); }
.tut-akkordeon > details { border-bottom: 1px solid var(--tut-linie); }
.tut-akkordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tut-16);
  min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; color: var(--tut-petrol);
}
.tut-akkordeon summary::-webkit-details-marker { display: none; }
.tut-akkordeon summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: var(--tut-4);
  border-right: 2px solid var(--tut-petrol); border-bottom: 2px solid var(--tut-petrol);
  transform: rotate(45deg); transition: transform var(--tut-dauer);
}
.tut-akkordeon details[open] > summary::after { transform: rotate(225deg); }
.tut-akkordeon__titel { display: block; }
.tut-akkordeon__titel small { display: block; font-size: 16px; font-weight: 400; color: var(--tut-text); margin-top: 2px; }
.tut-akkordeon__inhalt { padding: 0 0 var(--tut-20); }
.tut-akkordeon__inhalt > :first-child { margin-top: 0; }
.tut-akkordeon--faq .tut-akkordeon__inhalt { font-size: 18px; }

/* --------------------------------------------------------------------------
   12. Begriffsliste — Faktoren und Bedingungen ohne Kasten je Gedanke
   -------------------------------------------------------------------------- */
.tut-begriffe { margin: 0 0 var(--tut-16); }
.tut-begriffe > div { display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: var(--tut-12); padding: var(--tut-12) 0; border-top: 1px solid var(--tut-linie); }
.tut-begriffe > div:last-child { border-bottom: 1px solid var(--tut-linie); }
.tut-begriffe dt { font-weight: 700; color: var(--tut-petrol); font-size: 16px; }
.tut-begriffe dd { margin: 0; font-size: 16px; }

/* Häkchenliste — Häkchen als Linie, nicht als Icon im Kreis */
.tut-haken { list-style: none; padding: 0; margin: 0 0 var(--tut-16); }
.tut-haken li { position: relative; padding-left: 30px; margin-bottom: var(--tut-12); }
.tut-haken li::before {
  content: ""; position: absolute; left: 2px; top: 5px; width: 8px; height: 14px;
  border-right: 2.5px solid var(--tut-tuerkis-mittel); border-bottom: 2.5px solid var(--tut-tuerkis-mittel);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   13. Berater-Modul — zwei echte Fotos in Fotogröße nebeneinander, Name, Rolle, eine Zeile
   Fotos liegen an genau einer Stelle (Bild-URL im HTML), Beraterwechsel = Tausch.
   -------------------------------------------------------------------------- */
.tut-berater { background: var(--tut-flaeche-2); }
.tut-berater__innen { display: flex; flex-direction: column; gap: var(--tut-24); }
.tut-berater__personen { display: flex; gap: var(--tut-20); align-items: flex-start; }
.tut-berater__person { margin: 0; flex: 1 1 0; min-width: 0; }
.tut-berater__person img {
  width: 100%; max-width: 164px; aspect-ratio: 132 / 164; object-fit: cover; object-position: top center;
  border-radius: var(--tut-radius); background: var(--tut-flaeche-1);
}
.tut-berater__person figcaption { margin-top: var(--tut-8); font-size: 16px; line-height: 1.35; }
.tut-berater__person figcaption strong { display: block; color: var(--tut-petrol); font-size: 18px; }
.tut-berater__person figcaption span { display: block; color: var(--tut-petrol-mittel); font-size: 14px; margin-top: 2px; }
.tut-berater__text h2 { font-size: 26px; }
.tut-berater__kontakt { display: flex; flex-direction: column; gap: var(--tut-12); margin-top: var(--tut-8); }
.tut-berater__kontakt a:not(.tut-button) { display: inline-flex; align-items: center; min-height: var(--tut-klick); }

/* --------------------------------------------------------------------------
   14. Inhaltsverzeichnis — tutario-site.js füllt es aus den h2; Handy aufklappbar, Desktop offen in der linken Spalte
   -------------------------------------------------------------------------- */
/* Handy: klebende Kapitelzeile zum Wischen (Messlatte: waagerechte Reiter über dem Text, Feather) */
.tut-seite [id] { scroll-margin-top: 64px; } /* Sprungziele landen nicht unter der klebenden Kapitelzeile */
.tut-inhaltnav { position: sticky; top: 0; z-index: 15; margin: var(--tut-8) 0 0; background: var(--tut-weiss); border-bottom: 1px solid var(--tut-linie); }
.tut-inhalt summary { display: none; }
.tut-inhalt ol { list-style: none; margin: 0; padding: 0 var(--tut-rand); display: flex; gap: var(--tut-20); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--tut-rand); }
.tut-inhalt ol::-webkit-scrollbar { display: none; }
.tut-inhalt li { margin: 0; flex: none; }
.tut-inhalt a {
  display: flex; align-items: center; min-height: 48px; padding: 4px 0;
  font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--tut-petrol-mittel);
  border-bottom: 2px solid transparent;
}
.tut-inhalt a[aria-current="true"] { color: var(--tut-petrol); font-weight: 600; border-bottom-color: var(--tut-petrol); }
.tut-inhalt a:hover { color: var(--tut-petrol-dunkel); }


/* --------------------------------------------------------------------------
   15. Klebender Handy-Button — dieselbe Hauptaktion, nicht eine zweite
   tutario-site.js blendet ihn aus, solange der Kopf-Button sichtbar ist.
   -------------------------------------------------------------------------- */
.tut-kleber {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: var(--tut-12) var(--tut-rand) calc(var(--tut-12) + env(safe-area-inset-bottom));
  background: var(--tut-weiss); border-top: 1px solid var(--tut-linie);
  transform: translateY(0); transition: transform var(--tut-dauer);
}
.tut-kleber .tut-button { width: 100%; }
.tut-kleber.tut-kleber--weg { transform: translateY(110%); }
.tut-seite--mit-kleber { padding-bottom: 88px; }

/* --------------------------------------------------------------------------
   16. Fuß (Pilot) — Pflichtangaben, Links mit Klickfläche
   -------------------------------------------------------------------------- */
.tut-fuss { border-top: 1px solid var(--tut-linie); padding-block: var(--tut-32); font-size: 16px; }
.tut-fuss p { margin-bottom: var(--tut-8); }
.tut-fuss__links { display: flex; flex-direction: column; gap: 0; margin: var(--tut-8) 0 0; padding: 0; list-style: none; }
.tut-fuss__links li { margin: 0; }
.tut-fuss__links a, .tut-fuss__links span { display: inline-flex; align-items: center; min-height: var(--tut-klick); }

/* --------------------------------------------------------------------------
   17. HubSpot-Formular — Standardoptik auf Onest, Markenfarben, 8-px-Radius, 44-px-Felder
   Klassen des HubSpot-Formulars (v3/v4): .hs-form, .hs-form-field, .hs-input, .hs-button, .hs-error-msg,
   .hs-error-msgs, .hs-form-required, .submitted-message, .hs-richtext, .legal-consent-container
   -------------------------------------------------------------------------- */
.tut-seite .hs-form, .tut-formular { font-family: var(--tut-schrift); font-size: 18px; color: var(--tut-text); }
.tut-seite .hs-form fieldset { max-width: none; border: 0; padding: 0; margin: 0; }
.tut-seite .hs-form-field, .tut-formular__feld { margin-bottom: var(--tut-16); }
.tut-seite .hs-form-field > label, .tut-formular label { display: block; margin-bottom: var(--tut-4); font-size: 16px; font-weight: 600; color: var(--tut-petrol); }
.tut-seite .hs-form-required { color: var(--tut-petrol-mittel); margin-left: 2px; }
.tut-seite .hs-input, .tut-formular input:not([type="checkbox"]):not([type="radio"]), .tut-formular select, .tut-formular textarea {
  width: 100% !important; min-height: var(--tut-klick); padding: 10px var(--tut-12);
  border: 1px solid var(--tut-linie-stark); border-radius: var(--tut-radius);
  background: var(--tut-weiss); color: var(--tut-text);
  font: inherit; font-size: 18px; line-height: 1.3;
  transition: border-color var(--tut-dauer);
}
.tut-seite .hs-input:focus, .tut-formular input:focus, .tut-formular select:focus, .tut-formular textarea:focus { border-color: var(--tut-petrol); outline: 2px solid var(--tut-petrol); outline-offset: 2px; }
.tut-seite .hs-input.error, .tut-seite .hs-input[aria-invalid="true"], .tut-formular [aria-invalid="true"] { border: 2px solid var(--tut-petrol); }
.tut-seite .hs-error-msgs { list-style: none; margin: var(--tut-4) 0 0; padding: 0; }
.tut-seite .hs-error-msg, .tut-formular__fehler { display: block; font-size: 16px; color: var(--tut-petrol); }
.tut-seite .hs-form textarea.hs-input { min-height: 120px; resize: vertical; }
.tut-seite .hs-form .inputs-list { list-style: none; margin: 0; padding: 0; }
.tut-seite .hs-form .inputs-list li { margin: 0 0 var(--tut-8); }
.tut-seite .hs-form input[type="checkbox"].hs-input, .tut-seite .hs-form input[type="radio"].hs-input { width: 20px !important; height: 20px; min-height: 0; margin-right: var(--tut-8); accent-color: var(--tut-petrol); vertical-align: middle; }
.tut-seite .hs-form .hs-richtext, .tut-seite .hs-form .legal-consent-container { font-size: 16px; }
.tut-seite .hs-button, .tut-formular button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tut-button-hoehe); padding: 12px 28px;
  border: 2px solid var(--tut-gruen); border-radius: var(--tut-radius-button);
  background: var(--tut-gruen); color: var(--tut-petrol);
  font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; width: 100%;
  transition: border-color var(--tut-dauer);
}
.tut-seite .hs-button:hover, .tut-formular button[type="submit"]:hover { border-color: var(--tut-petrol); }
.tut-seite .submitted-message, .tut-formular__erfolg { padding: var(--tut-20); border: 2px solid var(--tut-petrol); border-radius: var(--tut-radius); color: var(--tut-petrol); font-weight: 600; }
.tut-seite .hs-form .hs-form-booleancheckbox-display { display: flex; align-items: flex-start; gap: var(--tut-8); }
.tut-seite .hs-form .hs-form-booleancheckbox-display > span { flex: 1; }

/* --------------------------------------------------------------------------
   18. Die eine Bewegung — Zahlenmoment im Kopf (tutario-site.js zählt hoch); Aufklappen wird weich
   -------------------------------------------------------------------------- */
.tut-akkordeon__inhalt, .tut-info p { transition: opacity var(--tut-dauer); }

/* --------------------------------------------------------------------------
   19. Ab 768 px — Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .tut-seite :where(h1) { font-size: 40px; letter-spacing: -0.01em; }
  .tut-seite :where(h2) { font-size: 30px; }
  .tut-seite :where(h3) { font-size: 23px; }
  .tut-seite :where(h4) { font-size: 20px; }

  .tut-aktionen { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--tut-16); }
  .tut-button--breit { width: auto; }
  .tut-kopfzeile .tut-button { min-height: var(--tut-klick); padding: 8px 22px; }

  .tut-kopf { padding-block: var(--tut-48); }
  .tut-kasten { padding: var(--tut-32); max-width: 520px; }
  .tut-kasten__zahl { font-size: 56px; }
  .tut-kasten__zahl small { font-size: 24px; }

  .tut-vertrauen__innen { flex-direction: row; text-align: left; gap: var(--tut-32); justify-content: center; }
  .tut-vertrauen__text { max-width: 560px; }

  .tut-foto img { aspect-ratio: 16 / 9; }

  /* Tabelle wieder klassisch */
  .tut-tabelle thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .tut-tabelle tbody tr { display: table-row; border-bottom: 0; padding: 0; }
  .tut-tabelle td { display: table-cell; padding: 14px 16px; border-bottom: 1px solid var(--tut-linie); }
  .tut-tabelle th { padding: 10px 16px; border-bottom: 2px solid var(--tut-linie-stark); }
  .tut-tabelle th:first-child, .tut-tabelle td:first-child { padding-left: 0; }
  .tut-tabelle th:last-child, .tut-tabelle td:last-child { padding-right: 0; }
  .tut-tabelle td[data-spalte]::before { display: none; }
  .tut-tabelle td:first-child { font-size: 16px; padding-bottom: 14px; }
  .tut-tabelle--karten { display: table; margin-inline: 0; width: 100%; overflow: visible; border-collapse: collapse; }
  .tut-tabelle--karten tbody { display: table-row-group; padding: 0; overflow: visible; }
  .tut-tabelle--karten tbody tr, .tut-tabelle--karten tbody tr:first-child { padding: 0; border-radius: 0; background: transparent; color: inherit; }
  .tut-tabelle--karten td, .tut-tabelle--karten tr:first-child td { border-top: 0; padding: 14px 16px; }
  .tut-tabelle--karten td:first-child, .tut-tabelle--karten tr:first-child td:first-child { font-size: 16px; color: var(--tut-text); padding-top: 14px; padding-bottom: 14px; }
  .tut-tabelle__hinweis { display: none; }
  .tut-tabelle--dunkel-spalte th:first-child, .tut-tabelle--dunkel-spalte td:first-child { background: var(--tut-flaeche-2); padding-left: 14px; padding-right: 14px; }
  .tut-tabelle--dunkel-spalte th:nth-child(2), .tut-tabelle--dunkel-spalte td:nth-child(2) { padding-left: 24px; }

  .tut-klappe[data-tut-offen-ab="768"], .tut-klappe[data-tut-offen-ab="768"]:last-child { border: 0; }
  .tut-klappe[data-tut-offen-ab="768"] summary { pointer-events: none; cursor: default; min-height: 0; padding: 0; margin-bottom: var(--tut-8); }
  .tut-klappe[data-tut-offen-ab="768"] summary::after { display: none; }
  .tut-begriffe { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tut-32); }
  .tut-begriffe > div { display: block; }
  .tut-begriffe dt { font-size: 18px; margin-bottom: var(--tut-4); }
  .tut-foto--abschnitt { padding-inline: var(--tut-rand); }
  .tut-foto--abschnitt img { border-radius: var(--tut-radius); }
  .tut-foto--abschnitt figcaption { padding-inline: 0; }
  .tut-merksatz { font-size: 30px; }
  .tut-haken--zwei { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tut-48); }
  .tut-zweispalt { grid-template-columns: 1fr 1fr; gap: var(--tut-48); }
  .tut-dreispalt { grid-template-columns: 1fr 1fr 1fr; }
  .tut-begriffe > div:nth-last-child(2) { border-bottom: 1px solid var(--tut-linie); }

  .tut-berater__person { flex: none; width: 164px; }
  .tut-berater__kontakt { flex-direction: row; align-items: center; gap: var(--tut-24); }

  .tut-fuss__links { flex-direction: row; flex-wrap: wrap; gap: 0 var(--tut-24); }

  .tut-kleber {
    display: flex; justify-content: center;
    padding: 12px 24px;
    border-radius: 0; box-shadow: none;
  }
  .tut-kleber .tut-button { width: auto; min-width: 280px; }
  .tut-seite--mit-kleber { padding-bottom: 88px; }
}

/* --------------------------------------------------------------------------
   20. Ab 1080 px — Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  :root { --tut-abschnitt: 96px; }
  .tut-seite :where(h1) { font-size: 46px; line-height: 1.08; letter-spacing: -0.015em; }
  .tut-abschnitt--eng { padding-block: var(--tut-48); }

  .tut-kopf { padding-block: var(--tut-64) var(--tut-96); }
  .tut-kopf__innen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--tut-64); row-gap: var(--tut-8); align-items: start; }
  .tut-kopf__innen > h1 { grid-column: 1; grid-row: 1; max-width: 620px; }
  .tut-kopf__innen > .tut-aktionen { grid-column: 1; grid-row: 2; }
  .tut-kopf__innen > .tut-kasten { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; max-width: none; padding: var(--tut-32) var(--tut-32) var(--tut-24); }
  .tut-kasten__zahl { font-size: 56px; }
  .tut-kasten__zahl small { font-size: 26px; }

  /* Desktop: Vertrauensband direkt unter dem Kopf */
  .tut-hauptteil > .tut-vertrauen { order: 2; }
  .tut-hauptteil > .tut-inhaltnav { order: 3; }
  .tut-hauptteil > .tut-erster { order: 4; padding-top: var(--tut-abschnitt); }

  /* Redaktionslayout: Zwischenüberschrift links, Text rechts */
  .tut-redaktion { display: grid; grid-template-columns: 300px minmax(0, var(--tut-spalte)); column-gap: var(--tut-64); align-items: start; }
  .tut-redaktion > h2 { position: sticky; top: 80px; margin-bottom: 0; grid-column: 1; grid-row: 1; }
  .tut-redaktion > :not(h2) { grid-column: 2; }

  /* Lesebereich mit klebendem Inhaltsverzeichnis links */
  .tut-lesen { display: grid; grid-template-columns: 260px minmax(0, var(--tut-spalte)); column-gap: var(--tut-96); align-items: start; }
  /* Desktop: dieselbe Kapitelzeile, mittig auf Inhaltsbreite, klebt oben */
  .tut-inhaltnav { margin: 0; }
  .tut-inhalt ol { max-width: var(--tut-inhalt); margin-inline: auto; gap: var(--tut-32); }

  .tut-foto img { aspect-ratio: 21 / 9; }
  .tut-vertrauen { padding-block: var(--tut-48); }
  .tut-klappe, .tut-klappe:last-child { border: 0; }
  .tut-klappe summary { pointer-events: none; cursor: default; min-height: 0; padding: 0; margin-bottom: var(--tut-8); }
  .tut-klappe summary::after { display: none; }
  .tut-stimme { padding-block: var(--tut-64); }
  .tut-stimme__text { font-size: 32px; }
  .tut-mitte { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; }
  .tut-mitte h2 { text-align: center; margin-bottom: var(--tut-32); }
  .tut-spalte-breit { margin-inline: auto; }
  .tut-berater__innen { flex-direction: row; align-items: center; gap: var(--tut-48); }
  .tut-berater__personen { flex: none; }
}

/* --------------------------------------------------------------------------
   21. Bewegung ausschalten, wenn das System es wünscht
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tut-seite *, .tut-seite *::before, .tut-seite *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Druck */
@media print {
  .tut-kleber, .tut-kopfzeile .tut-button { display: none !important; }
  .tut-seite a { color: var(--tut-text); }
}

/* ==========================================================================
   22. Wegweiser (Hub) — Ergänzung 04.09.2026, Pilot 2. Bestehende Klassen unverändert.
   Einstiege sind Linkzeilen mit Titel und einer Zeile, nie Karten; der erste Einstieg ist ein
   vollbreiter dunkler Block (der eine mutige Punkt des Hubs).
   ========================================================================== */
.tut-zeilen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tut-linie); }
.tut-zeilen li { margin: 0; border-bottom: 1px solid var(--tut-linie); }
.tut-zeile {
  display: flex; flex-direction: column; gap: 2px;
  min-height: var(--tut-klick); padding: 14px 0;
  text-decoration: none; color: var(--tut-text);
}
.tut-zeile strong { display: block; color: var(--tut-petrol); font-size: 18px; line-height: 1.3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tut-zeile span { font-size: 16px; }
.tut-zeile:hover strong { color: var(--tut-petrol-dunkel); text-decoration-thickness: 2px; }
.tut-zeile:hover { color: var(--tut-text); }

/* Erster Einstieg: dunkel, vollbreit, große Frage */
.tut-einstieg { background: var(--tut-petrol); color: var(--tut-weiss); border-radius: var(--tut-radius); padding: var(--tut-24) var(--tut-20) var(--tut-8); margin-bottom: var(--tut-32); }
.tut-einstieg h2, .tut-einstieg h3 { color: var(--tut-weiss); font-size: 26px; margin-bottom: var(--tut-4); }
.tut-einstieg p { font-size: 16px; margin-bottom: var(--tut-16); }
.tut-einstieg .tut-zeilen { border-top-color: var(--tut-linie-hell); }
.tut-einstieg .tut-zeilen li { border-bottom-color: var(--tut-linie-hell); }
.tut-einstieg .tut-zeilen li:last-child { border-bottom: 0; }
.tut-einstieg .tut-zeile, .tut-einstieg .tut-zeile strong, .tut-einstieg .tut-zeile:hover, .tut-einstieg .tut-zeile:hover strong { color: var(--tut-weiss); }

/* Weitere Einstiege: Überschrift + Zeilen, nebeneinander ab Tablet */
.tut-wege { display: grid; gap: var(--tut-32); }
.tut-wege h2, .tut-wege h3 { font-size: 22px; margin-bottom: var(--tut-8); }

/* Themenliste: Situation links, Startpunkt rechts — auf dem Handy untereinander */
/* Wege als Steckbrief: breitere Begriffsspalte, weil die Begriffe Links mit langen Wörtern sind */
.tut-begriffe--wege > div { grid-template-columns: 46% minmax(0, 1fr); }
.tut-begriffe--wege dt { hyphens: manual; overflow-wrap: anywhere; }
.tut-hub-kurz { margin-top: var(--tut-32); max-width: 720px; }
.tut-hub-kurz .tut-merksatz { max-width: 720px; }
.tut-begriffe dt a { display: inline-flex; align-items: center; min-height: var(--tut-klick); } /* Links als Begriff: Klickfläche 44 px */
.tut-themen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tut-linie); }
.tut-themen li { margin: 0; display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--tut-linie); font-size: 16px; }
.tut-themen li a { display: inline-flex; align-items: center; min-height: var(--tut-klick); font-weight: 600; }
.tut-themen li > span { color: var(--tut-text); }

@media (min-width: 768px) {
  .tut-einstieg { padding: var(--tut-32) var(--tut-32) var(--tut-12); }
  .tut-einstieg h2, .tut-einstieg h3 { font-size: 30px; }
  .tut-einstieg .tut-zeilen { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tut-48); border-top: 0; }
  .tut-einstieg .tut-zeilen li { border-top: 1px solid var(--tut-linie-hell); border-bottom: 0; }
  .tut-zeile { padding: 16px 0; }
  .tut-wege { grid-template-columns: 1fr 1fr; gap: var(--tut-48); }
  .tut-wege--drei { grid-template-columns: 1fr; }
  .tut-themen li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--tut-32); align-items: center; padding: 8px 0; }
  .tut-themen li a { min-height: var(--tut-klick); }
}
@media (min-width: 1080px) {
  .tut-einstieg { padding: var(--tut-48) var(--tut-48) var(--tut-16); margin-bottom: var(--tut-48); }
  .tut-einstieg h2, .tut-einstieg h3 { font-size: 36px; }
  .tut-einstieg > p { max-width: 620px; }
  .tut-wege--drei { grid-template-columns: 1fr 1fr 1fr; }
  .tut-hub-kopf { max-width: 880px; }
  .tut-kopf--wegweiser, .tut-hauptteil--wegweiser > .tut-kopf { padding-block: var(--tut-48) var(--tut-32); }
  /* Wegweiser: auf dem Desktop bleibt die Handy-Reihenfolge — erst die Einstiege, dann das Band (der Kopf trägt hier keine Handlung) */
  .tut-hauptteil--wegweiser > .tut-erster { order: 3; padding-top: var(--tut-24); }
  .tut-hauptteil--wegweiser > .tut-vertrauen { order: 4; }
  .tut-hauptteil--vergleich > .tut-erster { order: 2; padding-top: var(--tut-48); }
  .tut-hauptteil--vergleich > .tut-inhaltnav { order: 3; }
  .tut-begriffe--wege > div { display: grid; grid-template-columns: 44% minmax(0, 1fr); column-gap: var(--tut-24); }
  .tut-begriffe--wege dt { margin-bottom: 0; }
}

/* ==========================================================================
   23. Wissensseite — Ergänzung 04.09.2026, Pilot 3. Eine Lesespalte, Typografie trägt.
   ========================================================================== */
/* Der eine Fakt im Kopf: große Zahl als Typografie, kein Kasten */
.tut-fakt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--tut-16); align-items: baseline; margin: var(--tut-8) 0 var(--tut-24); padding: var(--tut-16) 0; border-top: 1px solid var(--tut-linie); border-bottom: 1px solid var(--tut-linie); max-width: 720px; }
.tut-fakt__zahl { font-size: 64px; font-weight: 700; line-height: 0.9; letter-spacing: -0.02em; color: var(--tut-petrol); font-variant-numeric: proportional-nums; }
.tut-fakt__text { margin: 0; font-size: 16px; line-height: 1.4; }
.tut-fakt__text strong { display: block; color: var(--tut-petrol); font-size: 18px; }
.tut-kopf__definition { font-size: 20px; line-height: 1.5; font-weight: 400; max-width: 720px; margin: 0 0 var(--tut-16); } /* Einstiegssatz groß gesetzt */
.tut-kopf__beispiel { font-size: 16px; max-width: 720px; margin: 0; }
.tut-kopf--lesen { padding-bottom: var(--tut-24); }

/* Lesespalte: Überschrift über dem Text, 720 px, auf dem Desktop mittig */
.tut-lesespalte { max-width: var(--tut-spalte); }

/* Begriff gegen Begriff: zwei Felder, das zweite getönt; Handy untereinander */
.tut-gegen { display: grid; gap: 0; margin: var(--tut-24) 0 var(--tut-16); border: 1px solid var(--tut-linie); border-radius: var(--tut-radius); overflow: hidden; }
.tut-gegen > div { padding: var(--tut-20); }
.tut-gegen > div + div { background: var(--tut-flaeche-2); border-top: 1px solid var(--tut-linie); }
.tut-gegen h3 { font-size: 18px; margin-bottom: var(--tut-8); }
.tut-gegen h3 small { display: block; font-size: 14px; font-weight: 500; color: var(--tut-petrol-mittel); margin-bottom: 2px; }
.tut-gegen p { font-size: 16px; }

/* Häkchenliste mit Minus: was nicht gedeckt ist */
.tut-haken--minus li::before { width: 12px; height: 0; top: 13px; left: 0; border: 0; border-bottom: 2.5px solid var(--tut-petrol-mittel); transform: none; }

/* Quellen: kleine Liste mit Stand */
.tut-quellen { font-size: 16px; }
/* Fußzone der Wissensseite: Grenzen, Weiterführend, Quellen — flach, kleiner, unter dem FAQ */
.tut-fusszone .tut-klappe summary h3 { font-size: 18px; }
.tut-fusszone .tut-klappe { font-size: 16px; }
.tut-fusszone .tut-klappe ul { padding-left: 20px; }
.tut-fusszone .tut-klappe .tut-sekundaer { margin-bottom: var(--tut-16); }
.tut-dunkel .tut-merksatz { color: var(--tut-weiss); }
.tut-dunkel .tut-sekundaer { color: var(--tut-weiss); }
/* Begriffsliste mit langen Erklärungen: schmalere Begriffsspalte auf dem Handy, Desktop einspaltig */
.tut-begriffe--lang > div { grid-template-columns: 30% minmax(0, 1fr); }
.tut-begriffe--lang dt { hyphens: manual; overflow-wrap: anywhere; }
.tut-quellen ul { padding-left: 20px; }

@media (min-width: 768px) {
  .tut-fakt__zahl { font-size: 88px; }
  .tut-abschnitt--breit .tut-lesespalte { max-width: none; }
  .tut-abschnitt--breit .tut-lesespalte > :not(table) { max-width: var(--tut-spalte); }
  .tut-gegen { grid-template-columns: 1fr 1fr; }
  .tut-gegen > div { padding: var(--tut-24); }
  .tut-gegen > div + div { border-top: 0; border-left: 1px solid var(--tut-linie); }
}
@media (min-width: 1080px) {
  .tut-lesespalte { margin-inline: auto; }
  .tut-abschnitt--breit .tut-lesespalte { max-width: none; }
  .tut-abschnitt--breit .tut-lesespalte > :not(table) { max-width: var(--tut-spalte); margin-inline: auto; }
  .tut-abschnitt--breit .tut-lesespalte > table { margin-inline: auto; }
  .tut-begriffe--lang { grid-template-columns: 1fr; }
  .tut-begriffe--lang > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--tut-32); }
  .tut-begriffe--lang > div:nth-last-child(2) { border-bottom: 0; }
  .tut-begriffe--lang dt { margin-bottom: 0; }
  .tut-kopf--lesen .tut-kopf__text { max-width: var(--tut-spalte); margin-inline: auto; } /* Wissensseite: Kopf sitzt auf derselben Kante wie die mittige Lesespalte */
  .tut-fakt { margin: var(--tut-16) 0 var(--tut-32); }
}

/* ==========================================================================
   24. Vergleichsseite — Ergänzung 04.09.2026, Pilot 4. Das Vergleichsband ist der Kopf.
   ========================================================================== */
/* Vergleichsband: dunkle Fläche, drei Karten (Reise-KV, EUKV, IKV); Handy: drei Karten zum Wischen, ab 768 nebeneinander */
.tut-vergleichsband { background: var(--tut-petrol); color: var(--tut-weiss); padding-block: var(--tut-32); }
.tut-vergleichsband h2 { color: var(--tut-weiss); font-size: 22px; margin-bottom: var(--tut-8); }
.tut-vergleichsband > .tut-wrap > p { font-size: 16px; margin-bottom: var(--tut-16); max-width: 720px; }
.tut-vergleichsband__karten { display: flex; gap: var(--tut-12); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--tut-rand)); padding: var(--tut-4) var(--tut-rand) var(--tut-16); }
.tut-vergleichsband__karten::-webkit-scrollbar { display: none; }
.tut-vkarte { flex: 0 0 80%; scroll-snap-align: start; background: var(--tut-weiss); color: var(--tut-text); border-radius: var(--tut-radius); padding: var(--tut-20); display: flex; flex-direction: column; }
.tut-vkarte--hervor { background: var(--tut-flaeche-2); }
.tut-vkarte h3 { font-size: 24px; margin-bottom: 2px; }
.tut-vkarte__unter { font-size: 14px; color: var(--tut-petrol-mittel); margin-bottom: var(--tut-12); }
.tut-vkarte dl { margin: 0 0 var(--tut-16); flex: 1; }
.tut-vkarte dl > div { padding: var(--tut-8) 0; border-top: 1px solid var(--tut-linie); font-size: 16px; }
.tut-vkarte dt { font-size: 14px; font-weight: 600; color: var(--tut-petrol-mittel); }
.tut-vkarte dd { margin: 0; }
.tut-vkarte .tut-link-block { align-self: flex-start; font-weight: 600; }
.tut-vergleichsband__hinweis { font-size: 14px; margin: 0 0 var(--tut-20); opacity: .85; }
.tut-vergleichsband__aktionen .tut-link-block { color: var(--tut-weiss); }
/* Vergleichsseite: Kopf → Vergleichsband → Kapitelzeile, auf allen Breiten; das Vertrauensband liegt im Lesebereich nach der Entscheidung */
.tut-hauptteil--vergleich > .tut-erster { order: 2; padding-top: var(--tut-32); }
.tut-hauptteil--vergleich > .tut-inhaltnav { order: 3; }
.tut-vergleichsband .tut-tabelle__hinweis { color: var(--tut-weiss); opacity: .8; }

/* Entscheidungshilfe: eine Frage, fünf Antworten — reines CSS über :has(); ohne :has stehen alle Antworten offen */
.tut-wahl { border: 1px solid var(--tut-linie); border-radius: var(--tut-radius); padding: var(--tut-20); }
.tut-wahl fieldset { border: 0; padding: 0; margin: 0 0 var(--tut-16); }
.tut-wahl legend { font-weight: 700; color: var(--tut-petrol); font-size: 18px; margin-bottom: var(--tut-8); }
.tut-wahl__option { display: flex; align-items: center; gap: var(--tut-12); min-height: var(--tut-klick); padding: 6px 0; cursor: pointer; font-size: 16px; }
.tut-wahl__option input { appearance: none; -webkit-appearance: none; width: var(--tut-klick); height: var(--tut-klick); margin: 0 -6px 0 -11px; flex: none; display: grid; place-content: center; cursor: pointer; border-radius: 50%; }
.tut-wahl__option input::before { content: ""; width: 22px; height: 22px; border: 2px solid var(--tut-petrol); border-radius: 50%; background: var(--tut-weiss); transition: background-color var(--tut-dauer); }
.tut-wahl__option input:focus-visible { outline: none; }
.tut-wahl__option input:focus-visible::before { outline: 2px solid var(--tut-petrol); outline-offset: 2px; }
.tut-wahl__option input:checked::before { background: var(--tut-petrol); box-shadow: inset 0 0 0 4px var(--tut-weiss); }
.tut-wahl__antwort { padding: var(--tut-16) 0 0; border-top: 1px solid var(--tut-linie); }
.tut-wahl__antwort p { margin-bottom: var(--tut-12); }
.tut-wahl__antwort strong { color: var(--tut-petrol); }
@supports selector(:has(input)) {
  .tut-wahl__antwort { display: none; }
  .tut-wahl__leer { display: none; }
  .tut-wahl:has(#wahl-1:checked) [data-wahl="1"], .tut-wahl:has(#wahl-2:checked) [data-wahl="2"], .tut-wahl:has(#wahl-3:checked) [data-wahl="3"],
  .tut-wahl:has(#wahl-4:checked) [data-wahl="4"], .tut-wahl:has(#wahl-5:checked) [data-wahl="5"] { display: block; }
  .tut-wahl:not(:has(input:checked)) .tut-wahl__leer { display: block; }
  .tut-wahl:has(input:checked) .tut-wahl__leer { display: none; }
}
.tut-wahl__leer { display: block; font-size: 16px; color: var(--tut-petrol-mittel); padding-top: var(--tut-16); border-top: 1px solid var(--tut-linie); margin: 0; }

/* Lange Linkliste in Spalten (Länder) */
.tut-liste--spalten { columns: 2; column-gap: var(--tut-24); padding-left: 20px; }
.tut-liste--spalten li { break-inside: avoid; }

@media (min-width: 768px) {
  .tut-vergleichsband { padding-block: var(--tut-48); }
  .tut-vergleichsband h2 { font-size: 26px; }
  .tut-vergleichsband__karten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--tut-16); overflow: visible; margin-inline: 0; padding: 0 0 var(--tut-16); }
  .tut-vkarte { flex: none; padding: var(--tut-24); }
  .tut-wahl { padding: var(--tut-24) var(--tut-32); }
  .tut-wahl__optionen { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: var(--tut-24); }
  .tut-liste--spalten { columns: 3; }
}
@media (min-width: 1080px) {
  .tut-vergleichsband { padding-block: var(--tut-64); }
  .tut-vergleichsband h2 { font-size: 30px; }
  .tut-liste--spalten { columns: 4; }
}

/* ==========================================================================
   25. Länderseite — Ergänzung 04.09.2026, Pilot 5. Kopfband mit Fotokarte und Zahlenmoment.
   ========================================================================== */
/* Kopfband: dunkle Fläche über die volle Breite, Text links, Fotokarte rechts (Handy: darunter) */
.tut-hauptteil > .tut-kopfband { order: 1; }
/* Länderseite: Kopfband → Status (erster) → Kapitelzeile → Band; Desktop: Band direkt unter dem Kopfband */
.tut-hauptteil--land > .tut-erster { order: 2; padding-top: var(--tut-32); }
.tut-hauptteil--land > .tut-inhaltnav { order: 3; }
.tut-hauptteil--land > .tut-vertrauen { order: 4; }
.tut-kopfband .tut-info { max-width: 560px; }
.tut-begriffe--stapel > div { grid-template-columns: 1fr; row-gap: 2px; }
.tut-dunkel .tut-begriffe dt, .tut-dunkel .tut-begriffe dd { color: var(--tut-weiss); }
.tut-dunkel .tut-begriffe > div { border-color: var(--tut-linie-hell); }
.tut-dunkel .tut-begriffe a { color: var(--tut-weiss); }
.tut-kopfband { background: var(--tut-petrol); color: var(--tut-weiss); padding-block: var(--tut-32) var(--tut-32); }
.tut-kopfband h1 { color: var(--tut-weiss); }
.tut-kopfband .tut-h1-zeile2 { color: var(--tut-weiss); opacity: .85; }
.tut-kopfband__innen { display: grid; gap: var(--tut-24); }
.tut-kopfband__text p { font-size: 18px; }
.tut-kopfband__text a:not(.tut-button) { color: var(--tut-weiss); }
.tut-kopfband .tut-aktionen { margin-top: var(--tut-20); }
.tut-kopfband .tut-link-block { color: var(--tut-weiss); }
.tut-fotokarte { margin: 0; border-radius: var(--tut-radius); overflow: hidden; background: var(--tut-petrol-dunkel); }
.tut-fotokarte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.tut-fotokarte figcaption { padding: var(--tut-12) var(--tut-16); font-size: 14px; }
/* Der eine Fakt auf dunkler Fläche */
.tut-fakt--hell { border-color: var(--tut-linie-hell); max-width: none; grid-template-columns: 1fr; row-gap: var(--tut-8); }
.tut-fakt--hell .tut-fakt__zahl, .tut-fakt--hell .tut-fakt__text strong { color: var(--tut-weiss); }
.tut-fakt--hell .tut-fakt__zahl small { font-size: 22px; font-weight: 400; }
.tut-fakt--hell .tut-fakt__text { color: var(--tut-weiss); }

/* Status → Weg: Linkzeilen mit Status links (fett) und Weg rechts; ab 768 zweispaltig */
.tut-wege-status { list-style: none; margin: 0 0 var(--tut-16); padding: 0; border-top: 1px solid var(--tut-linie); }
.tut-wege-status li { margin: 0; border-bottom: 1px solid var(--tut-linie); }
.tut-wege-status a { display: grid; gap: 2px; padding: 12px 0; min-height: var(--tut-klick); text-decoration: none; color: var(--tut-text); }
.tut-wege-status a strong { color: var(--tut-petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tut-wege-status a span { font-size: 16px; }
.tut-wege-status a:hover strong { color: var(--tut-petrol-dunkel); text-decoration-thickness: 2px; }

/* Steckbrief mit Titel: Begriff links, Wert rechts, auf Fläche 2 */
.tut-steckbrief { background: var(--tut-flaeche-2); border-radius: var(--tut-radius); padding: var(--tut-20); }
.tut-steckbrief h2, .tut-steckbrief h3 { font-size: 20px; margin-bottom: var(--tut-8); }
.tut-steckbrief dl { margin: 0; }
.tut-steckbrief dl > div { display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: var(--tut-12); padding: var(--tut-8) 0; border-top: 1px solid var(--tut-linie); font-size: 16px; }
.tut-steckbrief dt { font-weight: 700; color: var(--tut-petrol); }
.tut-steckbrief dd { margin: 0; }
.tut-steckbrief dd strong { color: var(--tut-petrol); }

/* Schritte: echte Reihenfolge, Ziffern als Typografie (kein Kreis) */
.tut-schritte { list-style: none; margin: 0 0 var(--tut-16); padding: 0; counter-reset: schritt; }
.tut-schritte > li { counter-increment: schritt; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--tut-12); padding: var(--tut-12) 0; border-top: 1px solid var(--tut-linie); margin: 0; }
.tut-schritte > li::before { content: counter(schritt); font-size: 32px; font-weight: 300; line-height: 1; color: var(--tut-petrol); }
.tut-schritte h3 { font-size: 18px; margin-bottom: 2px; }
.tut-schritte p { font-size: 16px; margin: 0; }

/* Dokumente: Linkzeilen mit Art links */
.tut-dokumente { list-style: none; margin: 0 0 var(--tut-16); padding: 0; border-top: 1px solid var(--tut-linie); }
.tut-dokumente li { margin: 0; border-bottom: 1px solid var(--tut-linie); }
.tut-dokumente a { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--tut-12); align-items: baseline; padding: 12px 0; min-height: var(--tut-klick); text-decoration: none; color: var(--tut-text); }
.tut-dokumente a > small { font-size: 14px; color: var(--tut-petrol-mittel); font-weight: 600; }
.tut-dokumente a > span { display: grid; }
.tut-dokumente a > span strong { color: var(--tut-petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tut-dokumente a > span small { font-size: 14px; }
.tut-dokumente a:hover strong { color: var(--tut-petrol-dunkel); text-decoration-thickness: 2px; }

@media (min-width: 768px) {
  .tut-kopfband { padding-block: var(--tut-48); }
  .tut-kopfband__text { max-width: 760px; }
  .tut-begriffe--stapel > div { grid-template-columns: 200px minmax(0, 1fr); }
  .tut-fakt--hell { grid-template-columns: auto minmax(0, 1fr); }
  .tut-fakt--hell .tut-fakt__zahl { font-size: 72px; }
  .tut-wege-status { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tut-48); border-top: 0; }
  .tut-wege-status li { border-top: 1px solid var(--tut-linie); border-bottom: 0; }
  .tut-steckbrief { padding: var(--tut-24) var(--tut-32); }
  .tut-steckbrief dl > div { grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--tut-24); }
  .tut-schritte > li { grid-template-columns: 56px minmax(0, 1fr); }
  .tut-schritte > li::before { font-size: 40px; }
}
@media (min-width: 1080px) {
  .tut-kopfband { padding-block: var(--tut-64); }
  /* Länderseite Desktop: erst die Wege je Status, dann das Band (zwei dunkle Flächen übereinander vermeiden) */
  .tut-hauptteil--land > .tut-erster { order: 2; padding-top: var(--tut-abschnitt); }
  .tut-hauptteil--land > .tut-vertrauen { order: 3; }
  .tut-hauptteil--land > .tut-inhaltnav { order: 4; }
}

/* ==========================================================================
   26. Anbieterseite — Ergänzung 04.09.2026, Pilot 6. Logo im Kopf, Steckbrief auf Petrol, Logo-Reihe der Mitbewerber.
   ========================================================================== */
.tut-anbieter-logo { display: flex; width: max-content; align-items: center; height: 56px; margin-bottom: var(--tut-16); }
.tut-anbieter-logo img { height: 100%; width: auto; border-radius: 0; }
/* Steckbrief auf Petrol: die Kasten-Form der Anbieterseite */
.tut-kasten--steckbrief { padding: var(--tut-20); }
.tut-kasten--steckbrief h2 { color: var(--tut-weiss); font-size: 20px; margin-bottom: var(--tut-8); }
.tut-kasten--steckbrief dl { margin: 0; }
.tut-kasten--steckbrief dl > div { display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: var(--tut-12); padding: var(--tut-8) 0; border-top: 1px solid var(--tut-linie-hell); font-size: 15px; }
.tut-kasten--steckbrief dt { font-weight: 600; }
.tut-kasten--steckbrief dd { margin: 0; }
.tut-kasten--steckbrief .tut-kasten__zeile { margin-bottom: var(--tut-4); }
/* Logo-Reihe: Mitbewerber im Rechner, ruhig, grau, gleich hoch */
.tut-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tut-12); list-style: none; margin: var(--tut-16) 0; padding: 0; }
.tut-logos li { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: var(--tut-8); background: var(--tut-weiss); border: 1px solid var(--tut-linie); border-radius: var(--tut-radius); }
.tut-logos img { max-height: 44px; width: auto; border-radius: 0; filter: grayscale(1); opacity: .8; }
@media (min-width: 768px) {
  .tut-anbieter-logo { height: 72px; }
  .tut-kasten--steckbrief { padding: var(--tut-24) var(--tut-24) var(--tut-16); max-width: none; }
  .tut-kasten--steckbrief dl > div { grid-template-columns: 140px minmax(0, 1fr); column-gap: var(--tut-16); font-size: 16px; }
  .tut-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1080px) {
  .tut-kopf__innen > .tut-kasten--steckbrief { padding: var(--tut-32) var(--tut-32) var(--tut-20); }
  .tut-logos { grid-template-columns: repeat(7, 1fr); }
}