/* ============================================================
   BASE — Reset + Struktur-Utilities. KEINE Designmeinung.
   Alle Werte kommen aus tokens.css. Diese Datei wird nie pro
   Projekt angepasst — Anpassung passiert NUR in tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--schrift-text);
  font-size: var(--text-m);
  line-height: var(--zeilenhoehe-text);
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  -webkit-font-smoothing: antialiased;
}

img, picture, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  line-height: var(--zeilenhoehe-eng);
  font-weight: var(--display-gewicht, 600);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-l); }

a { color: var(--farbe-akzent); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 2px;
}

/* --- Layout-Utilities --- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--raum-2);
}
.sektion { padding-block: var(--raum-sektion); }
.textspalte { max-width: var(--textspalte); }

.raster { display: grid; gap: var(--raum-3); }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .raster-2, .raster-3 { grid-template-columns: 1fr; }
}

.stapel > * + * { margin-block-start: var(--raum-2); }
.stapel-gross > * + * { margin-block-start: var(--raum-3); }

/* --- Komponenten-Grundformen (Charakter kommt aus Tokens) --- */
.knopf {
  display: inline-block;
  font-family: var(--schrift-display);
  font-size: var(--text-m);
  padding: 0.75em 1.5em;
  border-radius: var(--radius);
  border: var(--linie);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  text-decoration: none;
  cursor: pointer;
}
.knopf--sekundaer { background: transparent; color: var(--farbe-text); }

.karte {
  border: var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-flach);
  padding: var(--raum-3);
  background: var(--farbe-flaeche);
}

.linie-oben { border-top: var(--linie); padding-top: var(--raum-2); }

blockquote {
  border-left: 3px solid var(--farbe-akzent);
  padding-left: var(--raum-2);
  font-size: var(--text-l);
}

table { border-collapse: collapse; width: 100%; }
/* Tabellen im Artikel: auf schmalen Viewports seitlich scrollen statt abschneiden (Blog, 06.09.2026) */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--raum-2) * -1); padding-inline: var(--raum-2); }
.tabelle-scroll table { min-width: 34rem; }
th, td { text-align: left; padding: var(--raum-1) var(--raum-2); border-bottom: var(--linie); }
th { font-family: var(--schrift-display); }

label { display: block; font-size: var(--text-s); margin-bottom: var(--raum-1); }
input, textarea, select {
  font: inherit;
  width: 100%;
  padding: 0.6em 0.8em;
  border: var(--linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}
/* Feld-Paar: zwei zusammengehoerige Felder nebeneinander, z. B. PLZ + Ort
   (Rueckfluss schilk-partner-2, 08/2026) */
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--raum-2); }

/* --- Prose: langer Fließtext (Blog!) — von Anfang an dabei --- */
.prose { max-width: var(--textspalte); }
.prose > * + * { margin-block-start: var(--raum-2); }
.prose h2 { margin-block-start: var(--raum-4); }
.prose h3 { margin-block-start: var(--raum-3); }
.prose figcaption { font-size: var(--text-s); color: var(--farbe-text-gedimmt); margin-top: var(--raum-1); }
.prose ul, .prose ol { padding-left: 1.2em; }

.meta { font-size: var(--text-s); color: var(--farbe-text-gedimmt); }

/* ============================================================
   JOURNEY-KOMPONENTEN — Struktur für die Sektionen aus
   journey/02-sektionen.md. Weiter ohne Designmeinung: alle
   Werte aus Tokens, Charakter entsteht in tokens.css.
   ============================================================ */

/* Volle Breite (Alt-Fläche, Akzentband). Innen immer ein .container. */
.band { padding-block: var(--raum-sektion); }
.band--alt { background: var(--farbe-flaeche-alt); }
.band--akzent { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); }
.band--akzent a, .band--akzent h2 { color: inherit; }
.band--akzent .knopf { background: var(--farbe-auf-akzent); color: var(--farbe-akzent); }

/* Hero: Text links, optional Medium rechts. Asymmetrie über --split. */
.hero { padding-block: var(--raum-4) var(--raum-sektion); }
.hero__ergebnis { font-size: var(--text-l); max-width: 45ch; }

/* Zwei Spalten, absichtlich ungleich (Archetyp-abhängig via --split) */
.split { display: grid; gap: var(--raum-3); grid-template-columns: var(--split, 3fr 2fr); align-items: start; }
.split--umgekehrt { grid-template-columns: var(--split-um, 2fr 3fr); }
@media (max-width: 860px) { .split, .split--umgekehrt { grid-template-columns: 1fr; } }

/* CTA-Gruppe: primär + sekundär (Telefon) nebeneinander */
.cta-gruppe { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center; }
.cta-gruppe .meta { flex-basis: 100%; }   /* "Was danach passiert" unter den Knöpfen */

/* Vertrauensleiste: harte Fakten, keine Icons (journey/02-sektionen.md) */
.fakten { display: flex; flex-wrap: wrap; gap: var(--raum-3); list-style: none; padding: 0; }
.fakten > li { flex: 1 1 12ch; }
.fakten strong { display: block; font-family: var(--schrift-display); font-size: var(--text-l); }

/* Kennzahl als Beweiselement — Zahlen sind Inhalt, nicht Deko */
.kennzahl { font-family: var(--schrift-display); font-size: var(--text-display); line-height: var(--zeilenhoehe-eng); }

/* Ablauf: nummerierte Schritte mit Zeitangabe */
.schritte { list-style: none; padding: 0; counter-reset: schritt; }
.schritte > li { counter-increment: schritt; display: grid; grid-template-columns: 3ch 1fr; gap: var(--raum-2); padding-block: var(--raum-2); border-top: var(--linie); }
.schritte > li::before { content: counter(schritt); font-family: var(--schrift-display); font-size: var(--text-l); }
.schritte .meta { grid-column: 2; }

/* Kundenstimme: Zitat + Zuordnung mit Ort */
.stimme { margin: 0; }
.stimme blockquote { margin: 0; }
.stimme figcaption { font-size: var(--text-s); margin-top: var(--raum-2); }
.stimme img { width: 3.5rem; height: 3.5rem; border-radius: var(--radius); object-fit: cover; }

/* Angebotstreppe / Pakete — die empfohlene Stufe ist erkennbar */
.pakete { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.paket { border: var(--linie); border-radius: var(--radius); padding: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-2); }
.paket--empfohlen { border-color: var(--farbe-akzent); border-width: 2px; }
.paket__preis { font-family: var(--schrift-display); font-size: var(--text-xl); }
.paket ul { list-style: none; padding: 0; }
.paket li + li { margin-top: var(--raum-1); }
.paket .knopf { margin-top: auto; text-align: center; }

/* FAQ: funktioniert ohne JS, Text ist immer im DOM (GEO!) */
.faq-liste > details { border-top: var(--linie); padding-block: var(--raum-2); }
.faq-liste summary { font-family: var(--schrift-display); font-size: var(--text-l); cursor: pointer; }
.faq-liste summary::marker { color: var(--farbe-akzent); }
.faq-liste > details > *:not(summary) { margin-top: var(--raum-2); max-width: var(--textspalte); }

/* Vorher/Nachher: zwei Bilder, ohne JS vollständig nutzbar */
.vergleich { display: grid; gap: var(--raum-2); grid-template-columns: 1fr 1fr; }
.vergleich figcaption { font-size: var(--text-s); color: var(--farbe-text-gedimmt); margin-top: var(--raum-1); }
@media (max-width: 560px) { .vergleich { grid-template-columns: 1fr; } }

/* Risikoumkehr: ein Satz, groß, direkt vor dem Abschluss-CTA */
.zusage { font-family: var(--schrift-display); font-size: var(--text-xl); max-width: 45ch; }

/* Einsatzgebiet: echte Orte, kein Keyword-Teppich */
.orte { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); list-style: none; padding: 0; }

/* Sticky-Kontaktleiste — NUR mobil, NUR wenn journey.yaml sticky-mobil: true */
.sticky-kontakt { display: none; }
@media (max-width: 720px) {
  .sticky-kontakt {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 10;
    border-top: var(--linie); background: var(--farbe-flaeche);
  }
  .sticky-kontakt > * { flex: 1; text-align: center; padding: var(--raum-2); text-decoration: none; }
  .sticky-kontakt > * + * { border-left: var(--linie); }
  body:has(.sticky-kontakt) { padding-bottom: 4.5rem; }
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprunglink { position: absolute; left: -9999px; }
.sprunglink:focus { left: var(--raum-2); top: var(--raum-2); z-index: 20; background: var(--farbe-flaeche); padding: var(--raum-1) var(--raum-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   PROJEKT-ERGAENZUNGEN paul-klarmann (04.09.2026)
   Komponenten aus dna.yaml: Macht-Buehne, laute Versal-Typo,
   Signatur-Unterstrich (gelb), EIN gedrehtes Element, kantige Knoepfe.
   ============================================================ */

:root { --display-gewicht: 700; }

.knopf { border-radius: var(--radius-klein); font-weight: 700; }
.knopf[data-cta="primaer"] { box-shadow: var(--schatten-schwebend); }

/* Wortmarke: KLARMANN_ mit gelbem Cursor-Unterstrich */
.wortmarke { font-family: var(--schrift-display); font-weight: 800; letter-spacing: 0.01em; }
.wortmarke .cursor { color: var(--farbe-signatur); }

/* Die dunkelblaue Macht-Buehne (max. 2 pro Seite) */
.band--buehne { background: var(--farbe-buehne); color: var(--farbe-auf-buehne); }
.band--buehne a, .band--buehne h2, .band--buehne h3 { color: inherit; }
.band--buehne .knopf { background: var(--farbe-auf-buehne); color: var(--farbe-buehne); }
.band--buehne .meta { color: var(--farbe-auf-buehne-gedimmt); }

/* Der EINE laute Versal-Moment (mutiger Zug, nur im Hero) */
.buehne-typo {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: var(--text-buehne);
  line-height: var(--zeilenhoehe-eng);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Signatur-Unterstrich: unter dem lauten H1-Wort */
.unterstrich-signatur { display: inline-block; border-bottom: 0.09em solid var(--farbe-signatur); line-height: 1.15; }

/* Signatur-Unterstrich unter Kennzahlen (Stat-Variante) */
.stat-unterstrich::after { content: ""; display: block; height: 4px; width: 3.5rem; background: var(--farbe-signatur); border-radius: 2px; margin-top: 0.35rem; }

/* Signatur als Aufzaehlungs-Strich */
.liste-signatur { list-style: none; padding: 0; }
.liste-signatur > li { margin: 0.4rem 0; padding-left: 0.9rem; border-left: var(--akzentkante); }

/* GENAU EIN gedrehtes Element pro Seite (das Verspielte) */
.gedreht { transform: var(--drehung-verspielt); box-shadow: var(--schatten-schwebend); border-radius: var(--radius); }

/* Kopfzeile: auf schmalen Screens umbrechen statt abschneiden */
.hauptnav { flex-wrap: wrap; row-gap: var(--raum-1); }
@media (max-width: 720px) {
  .hauptnav { gap: var(--raum-2); }
  .hauptnav .knopf { margin-left: 0 !important; }
}

/* Menuepunkte: wie Menue, nicht wie Textlinks (Korrektur Paul 04.09.2026) */
.hauptnav a:not(.knopf) { text-decoration: none; color: var(--farbe-text); font-weight: 600; }
.hauptnav a:not(.knopf):hover { color: var(--farbe-akzent); }

/* Google-Beweis im Hero: gelbe Sterne prominent, ohne Bewertungszahl */
.google-sterne { display: inline-flex; align-items: center; gap: var(--raum-1); font-weight: 600; }
.google-sterne .sterne { color: var(--farbe-signatur); font-size: var(--text-l); letter-spacing: 0.06em; }

/* ============================================================
   FEINSCHLIFF-PASS 04.09.2026 (Paul: "bau die Seite noch mal bisl um")
   Gleicher Vertrag, mehr Wucht: Sektionskoepfe groesser, Signatur-
   Unterstrich zeichnet sich beim Laden, Beweis-Buehne mit grossen
   Zahlen (Countup per JS), empfohlene Stufe als Eisblau-Karte mit
   gelber Oberkante, Ablauf mit grossen Nummern, FAQ mit Plus/Minus.
   ============================================================ */

/* Sektionskopf: zentriert, gross, kurze Zeile */
.sektionskopf { text-align: center; max-width: 24ch; margin-inline: auto; font-size: var(--text-3xl); line-height: var(--zeilenhoehe-eng); }
.sektionskopf + .untertitel { text-align: center; max-width: var(--textspalte); margin-inline: auto; color: var(--farbe-text-gedimmt); font-size: var(--text-l); }

/* Hero: Zitat als eigene Zeile, Unterstrich zeichnet sich */
.hero-zitat { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-xl); color: var(--farbe-akzent); }
.unterstrich-signatur { position: relative; border-bottom: none; }
.unterstrich-signatur::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.09em; background: var(--farbe-signatur); transform-origin: left; animation: unterstrich-zeichnen 700ms ease-out 350ms both; }
@keyframes unterstrich-zeichnen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Angebots-Treppe: empfohlene Stufe mit Eisblau-Fuellung und gelber Oberkante */
.paket { position: relative; }
.paket--empfohlen { background: var(--farbe-flaeche-alt); }
.paket--empfohlen::before { content: ""; position: absolute; top: -2px; left: var(--raum-3); width: 3.5rem; height: 5px; background: var(--farbe-signatur); border-radius: 0 0 2px 2px; }
.paket__preis { font-size: var(--text-2xl); font-weight: 800; }
.paket h3 { min-height: 2.4em; }

/* Beweis-Buehne: grosse Zahlen, Nebenfaelle als Innenkarten */
.beweis-zahlen { display: flex; gap: var(--raum-4); flex-wrap: wrap; }
.beweis-zahl { font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-3xl); line-height: var(--zeilenhoehe-eng); }
.beweis-nebenfall { background: var(--farbe-auf-buehne-flaeche); border-radius: var(--radius); padding: var(--raum-2) var(--raum-3); border-left: var(--akzentkante); }
.beweis-nebenfall p { margin: 0; }
.beweis-nebenfall .meta { margin-bottom: var(--raum-1); }

/* Kundenstimmen: Zitat traegt, Name mit Signatur-Strich */
.stimme.karte { display: flex; flex-direction: column; gap: var(--raum-2); }
.stimme blockquote { font-size: var(--text-m); line-height: var(--zeilenhoehe-text); flex: 1; }
.stimme figcaption { border-left: var(--akzentkante); padding-left: var(--raum-2); font-weight: 600; font-size: var(--text-s); margin-top: 0; }

/* Ablauf: grosse Nummern in Markenblau, Zeitangabe rechts */
.schritte--gross > li { grid-template-columns: 4ch 1fr auto; align-items: start; column-gap: var(--raum-3); padding-block: var(--raum-3); }
.schritte--gross > li::before { font-size: var(--text-3xl); font-weight: 800; color: var(--farbe-akzent); line-height: 1; }
.schritte--gross .meta { grid-column: 3; grid-row: 1; white-space: nowrap; padding-top: 0.5em; }
.schritte--gross h3 { margin: 0; }
@media (max-width: 720px) {
  .schritte--gross > li { grid-template-columns: 3ch 1fr; }
  .schritte--gross .meta { grid-column: 2; grid-row: auto; white-space: normal; padding-top: 0; }
}

/* Einwaende: Frage mit Signatur-Strich */
.einwand h3 { border-left: var(--akzentkante); padding-left: var(--raum-2); }

/* FAQ: Plus/Minus statt Browser-Dreieck */
.faq-liste summary { list-style: none; display: flex; justify-content: space-between; gap: var(--raum-2); align-items: baseline; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: "+"; color: var(--farbe-akzent); font-weight: 800; font-size: var(--text-xl); flex-shrink: 0; }
.faq-liste details[open] summary::after { content: "\2212"; }

/* Kontakt-Buehne: Termin-Karte */
.termin-karte { background: var(--farbe-flaeche); color: var(--farbe-text); border-radius: var(--radius); padding: var(--raum-2); }

/* Footer mit Wortmarke */
.fuss { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-3); justify-content: center; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .unterstrich-signatur::after { animation: none; }
}

/* ============================================================
   KORREKTURRUNDE 2, 04.09.2026 (Paul): sticky Header mit schrumpfendem
   Logo, Menuepunkte mittig, Kicker sichtbar, Zitat-Sektion, Leistungs-
   karten, Journey-Board (Touchpoints + Psychologie), Fallbeispiel-Karte,
   Werkzeugkasten nach Phasen, Ablauf in 4 Spalten, Investitions-Buehne.
   ============================================================ */

/* Header: sticky, drei Zonen (Logo, Menue mittig, Knopf), Logo schrumpft */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--farbe-flaeche); border-bottom: var(--linie); }
.kopf .hauptnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--raum-3); padding-block: var(--raum-2); }
.kopf .hauptnav .menue { display: flex; gap: var(--raum-3); justify-content: center; }
.kopf .hauptnav .knopf { justify-self: end; margin-left: 0 !important; }
.kopf .logo img { height: 3.25rem; width: auto; transition: height 200ms ease; }
.kopf.geschrumpft .logo img { height: 2rem; }
.kopf.geschrumpft .hauptnav { padding-block: var(--raum-1); }
@media (max-width: 720px) {
  .kopf .hauptnav { grid-template-columns: 1fr auto; }
  .kopf .hauptnav .menue { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: var(--raum-2); flex-wrap: wrap; }
  .kopf .logo img { height: 2.25rem; }
}

/* Kicker: sichtbar, mit Signatur-Strich, kein Uppercase (Verbotskatalog) */
.kicker { font-family: var(--schrift-display); font-weight: 700; color: var(--farbe-akzent); font-size: var(--text-m); display: inline-flex; align-items: center; gap: var(--raum-1); }
.kicker::before { content: ""; display: inline-block; width: 1.6rem; height: 4px; background: var(--farbe-signatur); border-radius: 2px; }
.kicker--mittig { justify-content: center; width: 100%; }
.band--buehne .kicker { color: var(--farbe-auf-buehne-gedimmt); }

/* Vertrauensleiste: 4 Fakten in einer Zeile */
.fakten--leiste { justify-content: center; gap: var(--raum-3) var(--raum-4); border-block: var(--linie); padding-block: var(--raum-3); margin: 0; }
.fakten--leiste li { text-align: center; max-width: 16rem; font-size: var(--text-s); color: var(--farbe-text-gedimmt); }
.fakten--leiste strong { color: var(--farbe-text); font-size: var(--text-xl); }

/* Zitat-Sektion (problem-anerkennung): die ruhige Stelle */
.zitat-gross { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.35; max-width: 30ch; margin: 0 auto; text-align: center; }
.zitat-gross strong { color: var(--farbe-akzent); }
.zitat-person { display: flex; align-items: center; justify-content: center; gap: var(--raum-2); font-weight: 600; }
.zitat-person img { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; object-position: 50% 12%; }  /* Paul 07.09.2026: groesser, Ausschnitt hoeher */

/* Leistungen: 2 grosse Karten mit Link */
.leistungen { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.leistung { border: var(--kontur); border-radius: var(--radius); padding: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-2); background: var(--farbe-flaeche); }
.leistung h3 { font-size: var(--text-xl); }
.leistung .preis { font-family: var(--schrift-display); font-weight: 800; color: var(--farbe-akzent); }
.leistung .weiter { margin-top: auto; font-weight: 700; text-decoration: none; color: var(--farbe-akzent); border-bottom: 2px solid var(--farbe-signatur); align-self: flex-start; }
.leistung .weiter:hover { color: var(--farbe-buehne); }

/* Journey-Board: 6 Touchpoints, Frage im Kopf + was ich pruefe */
.journey-board { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); counter-reset: tp; }
.touchpoint { background: var(--farbe-flaeche); border: var(--kontur); border-radius: var(--radius); padding: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-1); counter-increment: tp; position: relative; }
.touchpoint::before { content: "0" counter(tp); font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-2xl); color: var(--farbe-akzent); line-height: 1; }
.touchpoint::after { content: ""; position: absolute; top: var(--raum-3); right: var(--raum-3); width: 2.2rem; height: 4px; background: var(--farbe-signatur); border-radius: 2px; }
.touchpoint h3 { font-size: var(--text-l); margin: 0; }
.touchpoint .frage { font-family: var(--schrift-display); font-weight: 700; color: var(--farbe-buehne); font-size: var(--text-m); }
.touchpoint .pruefe { font-size: var(--text-s); color: var(--farbe-text-gedimmt); margin: 0; }
.touchpoint .pruefe b { color: var(--farbe-text); }

/* Fallbeispiel-Karte: Vorher / Nachher */
.fall { border: var(--kontur); border-radius: var(--radius); padding: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-3); background: var(--farbe-flaeche); }
.fall__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--raum-2); align-items: flex-start; border-bottom: var(--linie); padding-bottom: var(--raum-2); }
.fall__kopf h3 { margin: 0; font-size: var(--text-xl); }
.fall__tags { display: flex; flex-wrap: wrap; gap: var(--raum-1); list-style: none; padding: 0; margin: 0; }
.fall__tags li { font-size: var(--text-s); font-weight: 600; color: var(--farbe-akzent); background: var(--farbe-flaeche-alt); border-radius: var(--radius-klein); padding: 0.2em 0.7em; }
.vergleich--liste { display: grid; gap: var(--raum-3); grid-template-columns: 1fr 1fr; }
.vergleich--liste > div { border-radius: var(--radius); padding: var(--raum-3); }
.vergleich--liste .vorher { background: var(--farbe-flaeche-alt); }
.vergleich--liste .nachher { border: 2px solid var(--farbe-akzent); }
.vergleich--liste h4 { margin: 0 0 var(--raum-2); font-size: var(--text-m); }
.vergleich--liste ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--raum-1); }
.vergleich--liste .vorher li::before { content: "\00D7"; color: var(--farbe-text-gedimmt); margin-right: var(--raum-1); font-weight: 700; }
.vergleich--liste .nachher li::before { content: "\2713"; color: var(--farbe-akzent); margin-right: var(--raum-1); font-weight: 700; }
.fall__fuss { display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: center; justify-content: space-between; border-top: var(--linie); padding-top: var(--raum-3); }
.fall__fuss blockquote { margin: 0; max-width: 40ch; }
.weitere-faelle { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.weiterer-fall { border-left: var(--akzentkante); padding-left: var(--raum-2); }
.weiterer-fall .beweis-zahl { font-size: var(--text-2xl); }
@media (max-width: 720px) { .vergleich--liste { grid-template-columns: 1fr; } }

/* Werkzeugkasten nach Journey-Phasen */
.werkzeuge { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.werkzeuge h3 { font-size: var(--text-m); padding-bottom: var(--raum-1); border-bottom: 3px solid var(--farbe-signatur); display: inline-block; }
.werkzeuge ul { list-style: none; padding: 0; margin: var(--raum-2) 0 0; display: flex; flex-direction: column; gap: 0.35rem; font-weight: 500; }

/* Ablauf in 4 Spalten mit gelber Oberkante */
.ablauf-spalten { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); counter-reset: ablauf; }
.ablauf-spalten > div { border-top: 4px solid var(--farbe-signatur); padding-top: var(--raum-2); counter-increment: ablauf; }
.ablauf-spalten > div::before { content: "0" counter(ablauf); font-family: var(--schrift-display); font-weight: 800; color: var(--farbe-akzent); display: block; margin-bottom: var(--raum-1); }
.ablauf-spalten h3 { font-size: var(--text-l); margin: 0 0 var(--raum-1); }
.ablauf-spalten .meta { margin-top: var(--raum-1); }

/* Investitions-Buehne: zwei Spalten */
.investition { display: grid; gap: var(--raum-4); grid-template-columns: 1fr 1fr; align-items: start; }
.investition ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--raum-2); font-size: var(--text-l); }
.investition li { border-left: var(--akzentkante); padding-left: var(--raum-2); }
@media (max-width: 720px) { .investition { grid-template-columns: 1fr; } }

/* ============================================================
   KORREKTURRUNDE 3, 05.09.2026 (Paul): Zitat breiter mit Anfuehrungs-
   zeichen, Werkzeug-Wolke statt Spalten, Touchpoint-Zeilen (Was er will /
   Was er braucht), Investitions-Zusagen als ruhige Liste.
   ============================================================ */

.zitat-gross { max-width: 46ch; font-size: var(--text-2xl); line-height: 1.3; }

.touchpoint .zeile { font-size: var(--text-s); color: var(--farbe-text-gedimmt); margin: 0; }
.touchpoint .zeile b { color: var(--farbe-text); }

.wolke { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--raum-2); list-style: none; padding: 0; margin: 0; max-width: 56rem; margin-inline: auto; }
.wolke li { border: var(--kontur); border-radius: var(--radius-klein); padding: 0.55em 1.1em; font-weight: 600; background: var(--farbe-flaeche); font-size: var(--text-s); }
.wolke li.betont { border: 2px solid var(--farbe-akzent); color: var(--farbe-akzent); }

.investition .zusagen li { border-left: 0; padding: var(--raum-2) 0 var(--raum-2) 1.6rem; position: relative; font-size: var(--text-m); }
.investition .zusagen li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 0.7rem; height: 0.7rem; background: var(--farbe-signatur); border-radius: 2px; }
.investition .zusagen li + li { border-top: 1px solid var(--farbe-auf-buehne-flaeche); }

/* ============================================================
   KORREKTURRUNDE 4, 05.09.2026 (externes Aenderungsbriefing, von Paul
   eingereicht): Situations-Karten mit priorisierter Kundengewinnung,
   Journey-System als Strecke auf der Buehne (baut sich beim Scrollen auf),
   Ergebnis-Liste, Fallbeispiel mit Screenshot, gestapeltes CTA-Band,
   Investition zentriert.
   ============================================================ */

/* Leistungen: zwei Situationen, Kundengewinnung priorisiert (3fr/2fr, Eisblau + Akzentrahmen) */
.leistungen--prio { grid-template-columns: 3fr 2fr; }
.leistung--prio { background: var(--farbe-flaeche-alt); border: 2px solid var(--farbe-akzent); padding: var(--raum-4); }
.leistung .kicker { font-size: var(--text-s); }
.leistung h3 { font-size: var(--text-xl); line-height: 1.2; }
@media (max-width: 720px) { .leistungen--prio { grid-template-columns: 1fr; } .leistung--prio { padding: var(--raum-3); } }

/* Journey-System: Strecke mit 6 Stationen auf der dunklen Buehne */
.strecke { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--raum-2); }
.strecke::before { content: ""; position: absolute; left: 3%; right: 3%; top: calc(1.1rem - 2px); height: 4px; background: var(--farbe-signatur); border-radius: 2px; transform-origin: left; transform: scaleX(0); transition: transform 900ms ease; }
.strecke.sichtbar::before { transform: scaleX(1); }
.station { position: relative; padding-top: 3.2rem; opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; transition-delay: calc(var(--i, 0) * 140ms + 250ms); }
.strecke.sichtbar .station { opacity: 1; transform: none; }
.station__nr { position: absolute; top: 0; left: 0; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--farbe-buehne); border: 3px solid var(--farbe-signatur); color: var(--farbe-auf-buehne); font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-s); display: inline-flex; align-items: center; justify-content: center; }
.station h3 { font-size: var(--text-m); margin: 0 0 var(--raum-1); color: var(--farbe-auf-buehne); }
.station p { font-size: var(--text-s); color: var(--farbe-auf-buehne-gedimmt); margin: 0; }
.werkzeug-zeile { text-align: center; color: var(--farbe-auf-buehne-gedimmt); max-width: 62ch; margin-inline: auto; border-top: 1px solid var(--farbe-auf-buehne-flaeche); padding-top: var(--raum-3); }
@media (max-width: 900px) {
  .strecke { grid-template-columns: 1fr; padding-left: 3.2rem; gap: var(--raum-3); }
  .strecke::before { left: calc(1.1rem - 2px); right: auto; top: 0; bottom: 0; width: 4px; height: auto; transform-origin: top; transform: scaleY(0); }
  .strecke.sichtbar::before { transform: scaleY(1); }
  .station { padding-top: 0; }
  .station__nr { left: -3.2rem; top: -0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .strecke::before, .station { transition: none; transform: none; opacity: 1; }
}

/* Ergebnis: Ueberschrift links, Liste rechts */
.ergebnis-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--raum-2); font-size: var(--text-l); }
.ergebnis-liste li { padding-left: 2rem; position: relative; }
.ergebnis-liste li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--farbe-akzent); font-weight: 800; }

/* Fallbeispiel mit Screenshot */
.fall__oben { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3); align-items: center; }
.fall__bild { margin: 0; border-radius: var(--radius); overflow: hidden; border: var(--kontur); }
.fall__bild figcaption { font-size: var(--text-s); color: var(--farbe-text-gedimmt); padding: var(--raum-1) var(--raum-2); border-top: var(--kontur); }
@media (max-width: 720px) { .fall__oben { grid-template-columns: 1fr; } }

/* CTA-Band gestapelt und zentriert */
.band--akzent .zusage--mittig { text-align: center; margin-inline: auto; max-width: 42ch; font-size: var(--text-xl); }

/* Investition zentriert, kompakt */
.investition--mittig { text-align: center; max-width: var(--textspalte); margin-inline: auto; }

/* ============================================================
   LEISTUNGSSEITEN 05.09.2026 (/webseite, /kundengewinnung): Hero als
   Split mit Bild-Element, Browser-Mock mit Scan-Linie (webseite, der
   mutige Zug dieser Seite), Journey-Schiene im Hero (kundengewinnung),
   dunkle Karte, Pruefliste. Alles aus Tokens.
   ============================================================ */

.lp-hero { padding-block: var(--raum-4) var(--raum-sektion); overflow: hidden; }
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); gap: var(--raum-4); align-items: center; }
.lp-hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch; }
.lp-hero .lead { font-size: var(--text-l); max-width: 58ch; }
.lp-hero .wolke { justify-content: flex-start; margin: 0; }
@media (max-width: 860px) { .lp-hero__grid { grid-template-columns: 1fr; } .lp-hero h1 { max-width: none; } }

/* Browser-Mock (webseite): das EINE gedrehte Element dieser Seite */
.mock { position: relative; border: var(--kontur); border-radius: var(--radius); background: var(--farbe-flaeche); overflow: hidden; transform: rotate(1.5deg); box-shadow: var(--schatten-schwebend); }
.mock__top { height: 2.2rem; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.8rem; border-bottom: var(--kontur); background: var(--farbe-flaeche-alt); }
.mock__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--farbe-linie); }
.mock__body { position: relative; min-height: 22rem; padding: 1.3rem; }
.mock__zeile { height: 0.65rem; border-radius: var(--radius-klein); background: var(--farbe-flaeche-alt); margin-top: 0.7rem; }
.mock__zeile--kurz { width: 55%; }
.mock__zeile--mittel { width: 80%; }
.mock__titel { width: 78%; height: 2rem; border-radius: var(--radius-klein); background: var(--farbe-buehne); margin-top: 1rem; }
.mock__titel--kurz { width: 58%; margin-top: 0.4rem; }
.mock__knopf { width: 8rem; height: 2.2rem; border-radius: var(--radius-klein); background: var(--farbe-akzent); margin-top: 1.2rem; }
.mock__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.8rem; }
.mock__karte { height: 6rem; border-radius: var(--radius-klein); background: var(--farbe-flaeche-alt); border: var(--kontur); }
.mock__label { position: absolute; right: 1rem; top: 1rem; border-radius: var(--radius-klein); padding: 0.35rem 0.6rem; background: var(--farbe-buehne); color: var(--farbe-auf-buehne); font-size: var(--text-s); font-weight: 700; }
.scan { position: absolute; left: 0; right: 0; top: 2.2rem; height: 3px; background: var(--farbe-signatur); animation: scan 3.7s ease-in-out infinite; }
@keyframes scan { 0% { top: 2.4rem; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 1.2rem); opacity: 0; } }
@media (max-width: 640px) { .mock__raster { grid-template-columns: 1fr 1fr; } .mock__karte:nth-child(3) { display: none; } .mock__body { min-height: 18rem; } }

/* Journey-Karte im Hero (kundengewinnung): Schiene, Station wandert */
.journey-karte { background: var(--farbe-buehne); color: var(--farbe-auf-buehne); border-radius: var(--radius); padding: var(--raum-3); }
.journey-karte h2 { font-size: var(--text-l); margin: 0 0 var(--raum-2); color: inherit; }
.schiene { position: relative; display: grid; gap: var(--raum-2); }
.schiene::before { content: ""; position: absolute; left: 0.5rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--farbe-auf-buehne-flaeche); }
.schritt { position: relative; padding-left: 2.1rem; opacity: 0.5; transition: opacity 450ms ease; }
.schritt::before { content: ""; position: absolute; left: 0.2rem; top: 0.3rem; width: 0.65rem; height: 0.65rem; border-radius: 999px; background: var(--farbe-auf-buehne); }
.schritt.aktiv { opacity: 1; }
.schritt.aktiv::before { background: var(--farbe-signatur); outline: 4px solid var(--farbe-auf-buehne-flaeche); }
.schritt strong { display: block; }
.schritt span { display: block; font-size: var(--text-s); color: var(--farbe-auf-buehne-gedimmt); }

/* Dunkle Karte (z. B. "Nicht mein Fokus") */
.karte--buehne { background: var(--farbe-buehne); color: var(--farbe-auf-buehne); border-color: transparent; }
.karte--buehne h3, .karte--buehne .kicker { color: inherit; }
.karte--buehne ul { padding-left: 1.1rem; margin: var(--raum-2) 0 0; }
.karte--buehne li + li { margin-top: 0.4rem; }

/* Beweis-Faelle als Karten mit gelber Kante */
.faelle { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

@media (prefers-reduced-motion: reduce) {
  .scan { animation: none; display: none; }
  .schritt { transition: none; opacity: 1; }
}

/* ============================================================
   KORREKTUR 05.09.2026 (Paul): Hero-Fakten statt Chips, Zitate ohne
   linken Strich (alle Seiten), Zitat-Block mit Luft, Pruefliste enger.
   ============================================================ */

/* Zitate: kein linker Strich mehr, auf keiner Seite */
blockquote { border-left: 0; padding-left: 0; }

/* Hero-Fakten: Wert gross, Label klein, gelber Strich, keine Chips */
.hero-fakten { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4); list-style: none; padding: var(--raum-3) 0 0; margin: var(--raum-3) 0 0; border-top: var(--linie); }  /* Korrektur Paul 05.09.2026: Linie braucht Luft zum Anruf-Knopf */
.hero-fakten li { display: flex; flex-direction: column; position: relative; padding-left: 1.3rem; }
.hero-fakten li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.8rem; height: 4px; background: var(--farbe-signatur); border-radius: 2px; }
.hero-fakten strong { font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-l); color: var(--farbe-buehne); line-height: 1.15; }
.hero-fakten span { font-size: var(--text-s); color: var(--farbe-text-gedimmt); }

/* Zitat-Block unter Karten: eigener Absatz mit Luft und Absender */
.zitat-block { margin-top: var(--raum-4); padding-top: var(--raum-4); border-top: var(--linie); display: flex; flex-direction: column; gap: var(--raum-2); align-items: center; }
.zitat-block .zitat-gross { font-size: var(--text-xl); }

/* Pruefliste: erster Punkt mit Abstand zur Ueberschrift, Punkte enger */
.ergebnis-liste { gap: 0.6rem; }
h2 + .ergebnis-liste { margin-top: var(--raum-2); }
.split--mitte { align-items: center; }

/* ============================================================
   RUNDE 5, 05.09.2026 (Paul + Funnel-Briefing): Consent-Banner
   (weisse Schrift auf beiden Knoepfen, mobil eingeklappter Text),
   Facts als Definitionsliste (Grounding Page v1.6), Projektcheck-
   Landingpage (/angebot-anfordern, mehrstufiges Formular), Teaser,
   KI-als-Werkzeug-Sektionen, Ismeta-Flow, Diagnose auf /kundengewinnung.
   Alles aus Tokens, keine neuen Farben.
   ============================================================ */

/* Consent-Banner prive.eu: IDs sind die prive-eigenen, !important noetig,
   weil prive sein CSS zur Laufzeit nach unseren Stylesheets einhaengt.
   Ablehnen (dunkelblau) und Annehmen (markenblau) bleiben gleich gross und
   auf gleicher Ebene (DSK-Orientierungshilfe), nur die Schrift ist jetzt weiss. */
#cm, #cm #c-ttl, #cm #c-txt, #cm label, #cm a, #cm .cc-txt-mehr, #cm #c-bns button, #cm #c-bns button p, #s-inr, #s-inr #s-ttl, #s-bns button, #s-bns button p { color: var(--farbe-auf-akzent) !important; }  /* Paul 06.09.2026: Text war grau, jetzt weiss */
#cm #c-s-bn, #s-bns #s-rall-bn { background: var(--farbe-buehne) !important; }
#cm #c-p-bn, #s-bns #s-all-bn { background: var(--farbe-akzent) !important; }
#cm #c-bns button, #s-bns button { border-radius: var(--radius-klein) !important; }
.cc-txt-mehr { display: none; }
@media (max-width: 720px) {
  #cm { padding: 1rem 1rem 0.9rem !important; }
  #c-ttl { font-size: 1rem !important; }
  #c-txt { display: block; font-size: 0.85rem !important; line-height: 1.45 !important; }
  #c-txt.cc-txt-zu { max-height: 3.9rem; overflow: hidden; }
  .cc-txt-mehr { display: inline-block; margin-top: 0.4rem; padding: 0; font: inherit; font-size: 0.85rem; text-decoration: underline; background: none; border: 0; color: inherit; cursor: pointer; }
  #c-bns button { font-size: 0.95rem !important; padding: 0.7em 1em !important; }
}

/* Facts: Kerndaten als Definitionsliste (Merkmal/Wert, ein Fakt pro Paar) */
.data-grid { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 0; margin: 0; border-top: var(--linie); }
.data-grid dt, .data-grid dd { margin: 0; padding: var(--raum-1) var(--raum-2) var(--raum-1) 0; border-bottom: var(--linie); }
.data-grid dt { font-family: var(--schrift-display); font-weight: 700; }
@media (max-width: 560px) {
  .data-grid { grid-template-columns: 1fr; }
  .data-grid dt { border-bottom: 0; padding-bottom: 0; }
}
.prose h2 { border-left: var(--akzentkante); padding-left: var(--raum-2); }
.quellen li + li { margin-top: var(--raum-1); }

/* Kopfzeile der Landingpage: Logo, Rueckweg, Telefon. Kein Menue, nicht sticky. */
.kopf--lp { position: static; }
.kopf--lp .hauptnav, .lp-hero--check .container { max-width: calc(44rem + 2 * var(--raum-2)); }  /* Kopf und Hero buendig mit dem Check (Paul 06.09.2026) */
.kopf--lp .hauptnav { grid-template-columns: auto 1fr auto; }
.kopf--lp .rueckweg { justify-self: center; font-weight: 600; text-decoration: none; color: var(--farbe-text-gedimmt); font-size: var(--text-s); }
.kopf--lp .rueckweg:hover { color: var(--farbe-akzent); }
.kopf--lp .telefon { justify-self: end; font-weight: 700; text-decoration: none; color: var(--farbe-text); }
@media (max-width: 720px) {
  .kopf--lp .hauptnav { grid-template-columns: 1fr auto; }
  .kopf--lp .rueckweg { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* Hero der Landingpage: kompakt, keine Grafik ueber dem Formular */
.lp-hero--check { padding-block: var(--raum-3) var(--raum-3); }
.lp-hero--check .lead { max-width: 52ch; }
.lp-hero--check .hero-fakten { margin-top: var(--raum-2); padding-top: var(--raum-2); }

/* Projektcheck: mehrstufiges Formular */
.check { max-width: 44rem; margin-inline: auto; }
.check__fortschritt { position: sticky; top: 0; z-index: 5; background: var(--farbe-flaeche-alt); padding: var(--raum-2) 0; }  /* Paul 09.09.2026: ohne Strich */
.check__fortschritt-zeile { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-s); color: var(--farbe-text-gedimmt); font-weight: 600; }
.check__balken { height: 5px; background: var(--farbe-linie); border-radius: 3px; margin-top: var(--raum-1); overflow: hidden; }
.check__balken span { display: block; height: 100%; width: 0; background: var(--farbe-signatur); border-radius: 3px; transition: width 300ms ease; }
.check__schritt { border: 0; padding: var(--raum-3) 0 0; margin: 0; min-width: 0; }
.check__schritt[hidden] { display: none; }
.check__schritt legend:focus { outline: none; }
.check__schritt legend { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-2xl); line-height: var(--zeilenhoehe-eng); padding: 0; margin-bottom: var(--raum-1); text-wrap: balance; }
.check__hilfe { color: var(--farbe-text-gedimmt); font-size: var(--text-s); margin: 0 0 var(--raum-2); }
.wahlen { display: grid; gap: var(--raum-1); margin-top: var(--raum-2); }
.wahl { position: relative; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wahl label { display: flex; align-items: center; gap: var(--raum-2); margin: 0; font-size: var(--text-m); font-weight: 600; padding: 0.9em 1em; border: 2px solid var(--farbe-linie); border-radius: var(--radius-klein); background: var(--farbe-flaeche); cursor: pointer; min-height: 3.4rem; }
.wahl label::before { content: ""; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border: 2px solid var(--farbe-linie); border-radius: 999px; background: var(--farbe-flaeche); }
.wahl input[type="checkbox"] + label::before { border-radius: 4px; }
.wahl label:hover { border-color: var(--farbe-akzent); }
.wahl input:checked + label { border-color: var(--farbe-akzent); background: var(--farbe-flaeche-alt); color: var(--farbe-buehne); }
.wahl input:checked + label::before { background: var(--farbe-akzent); border-color: var(--farbe-akzent); box-shadow: inset 0 0 0 3px var(--farbe-flaeche); }
.wahl input:focus-visible + label { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.check__hinweis { display: none; margin-top: var(--raum-2); padding: var(--raum-2); border-left: var(--akzentkante); background: var(--farbe-flaeche-alt); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; font-size: var(--text-s); }
.check__schritt:has(input[data-hinweis]:checked) .check__hinweis { display: block; }
.check__feld { margin-top: var(--raum-2); }
.check__feld label { font-size: var(--text-s); font-weight: 600; }
.check__feld input, .check__feld textarea { font-size: max(1rem, var(--text-m)); border-radius: var(--radius-klein); border: 2px solid var(--farbe-linie); }
.check__feld input:focus, .check__feld textarea:focus { border-color: var(--farbe-akzent); outline: none; }
.check__feld .fehler { display: none; color: var(--farbe-fehler); font-size: var(--text-s); font-weight: 600; margin-top: 0.3rem; }
.check__feld.ungueltig .fehler, .check__schritt.ungueltig > .fehler { display: block; }
.check__schritt > .fehler { display: none; color: var(--farbe-fehler); font-weight: 600; font-size: var(--text-s); margin-top: var(--raum-1); }
.check__feld.ungueltig input, .check__feld.ungueltig textarea { border-color: var(--farbe-fehler); }
.check__schritt.ungueltig .wahl label { border-color: var(--farbe-fehler); }
.check__einwilligung.ungueltig input { outline: 2px solid var(--farbe-fehler); outline-offset: 2px; }
.check__einwilligung { display: flex; gap: var(--raum-2); align-items: flex-start; margin-top: var(--raum-3); }
.check__einwilligung input { width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--farbe-akzent); }
.check__einwilligung label { font-size: var(--text-s); margin: 0; }
.honig { position: absolute; left: -9999px; }
.check__nav { display: flex; gap: var(--raum-2); justify-content: space-between; align-items: center; margin-top: var(--raum-3); padding-top: var(--raum-3); border-top: var(--linie); }
.check__nav .knopf { min-height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; }
.check__nav .knopf[data-cta="weiter"] { box-shadow: var(--schatten-schwebend); }
.check__nav .knopf[hidden] { display: none; }
@media (max-width: 560px) {
  .check__nav { flex-direction: column-reverse; align-items: stretch; }
  .check__nav .knopf { width: 100%; }
}
.check__danke { display: none; }
.check__danke:target, .check__danke--sichtbar { display: block; }
.check--fertig .check__formular, .check--fertig .check__fortschritt { display: none; }
.check__haken { width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--farbe-akzent); color: var(--farbe-auf-akzent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--text-xl); animation: haken 400ms ease-out both; }
@keyframes haken { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.check__optionen { display: grid; gap: var(--raum-3); grid-template-columns: 1fr 1fr; margin-top: var(--raum-3); }
.check__optionen .karte h3 { font-size: var(--text-l); }
@media (max-width: 720px) { .check__optionen { grid-template-columns: 1fr; } }
.check__fehler-box { display: none; margin-top: var(--raum-2); padding: var(--raum-2); border: 2px solid var(--farbe-fehler); color: var(--farbe-fehler); border-radius: var(--radius-klein); font-size: var(--text-s); }
.check__fehler-box.sichtbar { display: block; }
@media (prefers-reduced-motion: reduce) { .check__balken span { transition: none; } .check__haken { animation: none; } }

/* Projektcheck-Teaser auf /webseite: Text links, Mini-Fortschritt rechts */
.teaser { display: grid; grid-template-columns: 3fr 2fr; gap: var(--raum-4); align-items: center; border: 2px solid var(--farbe-akzent); border-radius: var(--radius); padding: var(--raum-4); background: var(--farbe-flaeche); }
.teaser__mini { border: var(--kontur); border-radius: var(--radius); padding: var(--raum-3); background: var(--farbe-flaeche-alt); }
.teaser__mini .check__fortschritt { position: static; background: transparent; border: 0; padding: 0; }
.teaser__mini .check__balken span { width: 14%; }
.teaser__mini .wahlen { margin-top: var(--raum-2); }
.teaser__mini .wahl label { min-height: 2.6rem; padding: 0.6em 0.9em; font-size: var(--text-s); pointer-events: none; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; padding: var(--raum-3); } }

/* Ismeta-Flow: sechs Stationen mit Pfeil */
.fluss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1); list-style: none; padding: 0; margin: 0; }
.fluss li { font-weight: 700; font-size: var(--text-s); padding: 0.5em 0.9em; border: var(--kontur); border-radius: var(--radius-klein); background: var(--farbe-flaeche); }
.fluss li.betont { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.fluss li + li::before { content: "\2192"; margin-right: var(--raum-1); color: var(--farbe-text-gedimmt); font-weight: 400; }
.fluss-karte { border: var(--kontur); border-radius: var(--radius); padding: var(--raum-3); background: var(--farbe-flaeche); display: flex; flex-direction: column; gap: var(--raum-2); }
.fluss-karte h3 { font-size: var(--text-l); }

/* Beispiele: nummerierte Karte auf Eisblau (Paul 06.09.2026: hingen in der Luft) */
.beispiele { list-style: none; padding: var(--raum-2) var(--raum-3); margin: 0; border: var(--kontur); border-radius: var(--radius); background: var(--farbe-flaeche-alt); counter-reset: bsp; display: grid; grid-template-columns: 1fr; }
.beispiele li { counter-increment: bsp; display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; gap: var(--raum-2); padding: var(--raum-2) 0; font-weight: 600; font-size: var(--text-m); }
.beispiele li + li { border-top: var(--linie); }
.beispiele li::before { content: "0" counter(bsp); font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-xl); color: var(--farbe-akzent); line-height: 1; }
.beispiele li::after { content: ""; display: block; grid-column: 2; width: 1.6rem; height: 4px; background: var(--farbe-signatur); border-radius: 2px; margin-top: 0.35rem; }

/* Diagnose auf /kundengewinnung: Auswahl als Knoepfe, Antwort klappt auf (details, ohne JS nutzbar) */
.diagnose { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--raum-1); }
.diagnose details { border: 2px solid var(--farbe-linie); border-radius: var(--radius-klein); background: var(--farbe-flaeche); }
.diagnose summary { list-style: none; cursor: pointer; font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-m); padding: 0.9em 1em; display: flex; justify-content: space-between; align-items: center; gap: var(--raum-2); min-height: 3.4rem; }
.diagnose summary::-webkit-details-marker { display: none; }
.diagnose summary::after { content: "+"; color: var(--farbe-akzent); font-weight: 800; font-size: var(--text-xl); flex-shrink: 0; }
.diagnose details[open] { border-color: var(--farbe-akzent); }
.diagnose details[open] summary { color: var(--farbe-buehne); background: var(--farbe-flaeche-alt); border-radius: var(--radius-klein) var(--radius-klein) 0 0; }
.diagnose details[open] summary::after { content: "\2212"; }
.diagnose details > p { margin: var(--raum-2) 1em var(--raum-2); padding: 0 0 0 var(--raum-2); border-left: var(--akzentkante); }
.diagnose details:hover { border-color: var(--farbe-akzent); }

/* Teaser-Attrappe: sieht aus wie eine Auswahlkarte, ist aber kein Formularfeld */
.teaser__mini .schein { display: flex; align-items: center; gap: var(--raum-2); font-size: var(--text-s); font-weight: 600; padding: 0.6em 0.9em; border: 2px solid var(--farbe-linie); border-radius: var(--radius-klein); background: var(--farbe-flaeche); min-height: 2.6rem; }
.teaser__mini .schein::before { content: ""; flex-shrink: 0; width: 1rem; height: 1rem; border: 2px solid var(--farbe-linie); border-radius: 999px; background: var(--farbe-flaeche); }
.teaser__mini .schein--aktiv { border-color: var(--farbe-akzent); color: var(--farbe-buehne); }
.teaser__mini .schein--aktiv::before { background: var(--farbe-akzent); border-color: var(--farbe-akzent); box-shadow: inset 0 0 0 3px var(--farbe-flaeche); }

/* ============================================================
   BLOG, 06.09.2026 (Briefing Blog paulklarmann.de): Uebersicht mit
   hervorgehobenem Beitrag und Karten, Artikel mit Kopf (Label, H1,
   Autorzeile, Antwortabsatz), Praxisbox, Leistungsbezug, Weiterlesen,
   Autorenbox. Alles aus Tokens.
   ============================================================ */

.thema-label { display: inline-block; font-size: var(--text-s); font-weight: 700; color: var(--farbe-akzent); background: var(--farbe-flaeche-alt); border-radius: var(--radius-klein); padding: 0.2em 0.7em; }
.band--alt .thema-label, .karte .thema-label { background: var(--farbe-flaeche); border: var(--kontur); }

/* Uebersicht */
.blog-top { display: grid; grid-template-columns: 2fr 3fr; gap: var(--raum-4); align-items: center; border: 2px solid var(--farbe-akzent); border-radius: var(--radius); padding: var(--raum-4); background: var(--farbe-flaeche); }
.blog-top h2 { font-size: var(--text-2xl); }
.blog-top h2 a, .blog-karte h3 a { color: inherit; text-decoration: none; }
.blog-top h2 a:hover, .blog-karte h3 a:hover { color: var(--farbe-akzent); }
.blog-top__bild { margin: 0; border-radius: var(--radius); overflow: hidden; border: var(--kontur); }
@media (max-width: 860px) { .blog-top { grid-template-columns: 1fr; padding: var(--raum-3); } }
.blog-karten { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.blog-karte { border: var(--kontur); border-radius: var(--radius); padding: var(--raum-3); background: var(--farbe-flaeche); display: flex; flex-direction: column; gap: var(--raum-2); }
.blog-karte h3 { font-size: var(--text-l); }
.blog-karte .meta { margin-top: auto; }

/* Artikel */
.artikel-bahn { max-width: 48rem; margin-inline: auto; }
.artikel-kopf h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; }
.autor-zeile { display: flex; align-items: center; gap: var(--raum-2); }
.autor-zeile img { width: 3.5rem; height: 3.5rem; border-radius: 999px; object-fit: cover; object-position: 50% 12%; }
.antwort { font-size: var(--text-l); border-left: var(--akzentkante); padding-left: var(--raum-2); }
.artikel-text .prose { max-width: none; }
.artikel-text .prose p, .artikel-text .prose li { font-size: var(--text-m); }
.artikel-text .prose h2 { border-left: 0; padding-left: 0; font-size: var(--text-xl); }
.praxis-box { margin-top: var(--raum-4); border: 2px solid var(--farbe-akzent); border-radius: var(--radius); padding: var(--raum-3); background: var(--farbe-flaeche-alt); }
.praxis-box h2 { font-size: var(--text-xl); }
.leistungs-bezug { border-top: var(--linie); border-bottom: var(--linie); padding-block: var(--raum-2); }
.weiterlesen ul { list-style: none; padding: 0; margin: var(--raum-1) 0 0; display: flex; flex-direction: column; gap: var(--raum-1); }
.weiterlesen li { border-left: var(--akzentkante); padding-left: var(--raum-2); }
.fuss__titel { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-l); }
.autor-box { display: grid; grid-template-columns: 6rem 1fr; gap: var(--raum-3); align-items: start; border: var(--kontur); border-radius: var(--radius); padding: var(--raum-3); background: var(--farbe-flaeche); }
.autor-box img { width: 6rem; height: 6rem; border-radius: var(--radius); object-fit: cover; object-position: 50% 12%; }
@media (max-width: 560px) { .autor-box { grid-template-columns: 1fr; } }

/* Zitat auf dem Akzentband (Startseite cta-band, Paul 07.09.2026): Zitat wie auf den
   Leistungsseiten, Knopf zentriert */
.zitat-band { text-align: center; }
.zitat-band .zitat-block { margin-top: 0; padding-top: 0; border-top: 0; }
.zitat-band .zitat-gross, .zitat-band .zitat-person { color: inherit; }
.zitat-band .zitat-gross strong { color: var(--farbe-signatur); }

/* Portraet ohne Drehung (Seiten, deren gedrehtes Element schon vergeben ist) */
.portraet-ruhig { margin: 0; overflow: hidden; border-radius: var(--radius); border: var(--kontur); }

/* Ueber-mich-Kasten unter dem Projektcheck (Paul 07.09.2026): Gesicht und Belege fuer Ads-Besucher.
   Kicker oben, Bild buendig mit der Oberkante der Ueberschrift, drei Fakten in voller Breite,
   Bewertung als eigener kleiner Kasten. */
.ueber-mich { max-width: 44rem; margin: var(--raum-4) auto 0; display: flex; flex-direction: column; gap: var(--raum-3); border: var(--kontur); border-radius: var(--radius); padding: var(--raum-3); background: var(--farbe-flaeche); }
.ueber-mich__kopf { display: grid; grid-template-columns: 10rem 1fr; gap: var(--raum-3); align-items: start; }
.ueber-mich__bild { margin: 0; border-radius: var(--radius); overflow: hidden; }
.ueber-mich__bild img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; }
.ueber-mich h2 { font-size: var(--text-xl); margin: 0; }
.ueber-mich__fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-2) var(--raum-3); list-style: none; padding: var(--raum-2) 0 0; margin: 0; border-top: var(--linie); }
.ueber-mich__fakten li { display: flex; flex-direction: column; position: relative; padding-left: 1.3rem; }
.ueber-mich__fakten li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.8rem; height: 4px; background: var(--farbe-signatur); border-radius: 2px; }
.ueber-mich__fakten strong { font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-l); color: var(--farbe-buehne); line-height: 1.15; }
.ueber-mich__fakten span { font-size: var(--text-s); color: var(--farbe-text-gedimmt); }
.ueber-mich__bewertung { border: var(--kontur); border-radius: var(--radius-klein); background: var(--farbe-flaeche-alt); padding: var(--raum-2) var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-1); }
.ueber-mich__bewertung blockquote { font-size: var(--text-m); margin: 0; }
.ueber-mich__bewertung .meta { margin: 0; }
@media (max-width: 560px) { .ueber-mich__kopf { grid-template-columns: 1fr; } .ueber-mich__bild { max-width: 10rem; } .ueber-mich__fakten { grid-template-columns: 1fr; } }

/* Projektcheck ohne Hero (Paul 07.09.2026): kompakter Kopf ueber dem Fortschritt */
.check__kopf { margin-bottom: var(--raum-3); }
.check__kopf h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.01em; }
.check__kopf .meta { margin-top: var(--raum-1); }

/* Erfolgsseite /anfrage-erhalten: gestapelt, gleiche Breite wie der Check */
.erhalten { max-width: 44rem; margin-inline: auto; }
.erhalten h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; }
.erhalten .termin-karte { padding: 0; }

/* Hero-Fakten im Projektcheck: vier in einer Reihe (Paul 07.09.2026) */
.hero-fakten--eng { gap: var(--raum-2) var(--raum-3); }
.hero-fakten--eng li { padding-left: 1.1rem; }
.hero-fakten--eng li::before { width: 0.65rem; }
.hero-fakten--eng span a { color: inherit; }
.hero-fakten--eng strong { white-space: nowrap; }
@media (min-width: 640px) { .hero-fakten--eng { flex-wrap: nowrap; justify-content: space-between; } .hero-fakten--eng li { flex: 0 0 auto; } }

/* Preisspanne auf der Erfolgsseite */
.preis-band { padding-block: var(--raum-sektion); }
.preis-band h2 { font-size: var(--text-xl); }
.preis-band__spanne { display: inline-block; font-size: var(--text-3xl); font-weight: 800; color: var(--farbe-buehne); border-bottom: 0.12em solid var(--farbe-signatur); line-height: 1.15; }

/* RUNDE 6 (Paul 09.09.2026): Preischeck mit Ergebnis vor den Kontaktdaten, /webseite mit weniger Kaesten */
.check__intro { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-l); line-height: 1.35; margin-bottom: var(--raum-3); }
.check__intro br + * { font-weight: 500; }
.check__schritt legend h2 { font-size: var(--text-2xl); line-height: var(--zeilenhoehe-eng); margin: 0; }
.ergebnis-box { border: 2px solid var(--farbe-akzent); border-radius: var(--radius); background: var(--farbe-flaeche); padding: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-1); margin-top: var(--raum-2); }
.ergebnis-box__spanne { font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1.1; color: var(--farbe-buehne); }
.ergebnis-box__spanne::after { content: ""; display: block; height: 5px; width: 4rem; background: var(--farbe-signatur); border-radius: 2px; margin-top: 0.4rem; }
.check__kontakt { margin-top: var(--raum-4); padding-top: var(--raum-3); border-top: var(--linie); }
.check__kontakt h3 { font-size: var(--text-xl); margin-bottom: var(--raum-1); }
.umfang-zeile { text-align: center; max-width: var(--textspalte); margin-inline: auto; color: var(--farbe-text-gedimmt); font-size: var(--text-m); }
.umfang-zeile strong { color: var(--farbe-text); }
.leistungs-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--raum-2) var(--raum-4); counter-reset: ll; }
.leistungs-liste li { counter-increment: ll; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: var(--raum-2); padding: var(--raum-2) 0; border-top: var(--linie); }
.leistungs-liste li::before { content: "0" counter(ll); font-family: var(--schrift-display); font-weight: 800; color: var(--farbe-akzent); font-size: var(--text-l); line-height: 1.3; grid-row: 1 / 3; }
.leistungs-liste strong { font-family: var(--schrift-display); font-size: var(--text-l); }
.leistungs-liste span { color: var(--farbe-text-gedimmt); font-size: var(--text-s); }

/* Ergebnis: Leistungslisten mit Haken (immer dabei / bei dir zusaetzlich) */
.ergebnis-box__leistungen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2) var(--raum-3); margin-top: var(--raum-2); padding-top: var(--raum-2); border-top: var(--linie); }
.ergebnis-box__leistungen .fuss__titel { font-size: var(--text-m); margin-bottom: var(--raum-1); }
.haken-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--text-s); }
.haken-liste li { padding-left: 1.5rem; position: relative; }
.haken-liste li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--farbe-akzent); font-weight: 800; }
@media (max-width: 560px) { .ergebnis-box__leistungen { grid-template-columns: 1fr; } }

/* ============================================================
   RUNDE 7, 09.09.2026 (Paul, Screenshots): /webseite Kanal-Sektion als
   Pruefliste + Fallvitrine, Beispiele als drei Spalten mit gelber Kante,
   Luft unter dem Intro von "Was drin ist", Person-Sektion mit Sternen +
   Knopf, Eigenbau-Kasten und Merkzettel im Preischeck, dezente Effekte
   (Einblenden beim Scrollen, Hover auf Karten und Knoepfen). Alles Tokens.
   ============================================================ */

/* "Was drin ist": Liste bekommt Luft zum Intro (vorher schlug margin:0 den Stapel-Abstand) */
.leistungs-liste { margin-top: var(--raum-4); }
.leistungs-liste li { transition: border-color 220ms ease; }
.leistungs-liste li:hover { border-top-color: var(--farbe-akzent); }

/* Kanal-Sektion: Pruefliste links, Fallvitrine rechts, Trennlinie dazwischen */
.kanal-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--raum-4); align-items: start; margin-top: var(--raum-4); }
.kanal-split > * + * { border-left: var(--linie); padding-left: var(--raum-4); }
.kanal-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--raum-3); }
.kanal-liste li { position: relative; padding-left: 3.4rem; font-size: var(--text-m); color: var(--farbe-text-gedimmt); line-height: var(--zeilenhoehe-text); min-height: 2.4rem; }
.kanal-liste li strong { color: var(--farbe-text); }
.kanal-liste li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--farbe-flaeche-alt); color: var(--farbe-akzent); font-weight: 800; font-size: var(--text-l); display: inline-flex; align-items: center; justify-content: center; transition: background-color 220ms ease, color 220ms ease; }
.kanal-liste li:hover::before { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); }
.fall-vitrine { display: flex; flex-direction: column; gap: var(--raum-2); }
.fall-vitrine h3 { font-size: var(--text-xl); line-height: 1.2; }
.fall-vitrine .fluss { gap: var(--raum-1) var(--raum-2); }
.fall-vitrine .meta a { display: inline-flex; align-items: center; gap: 0.3em; font-weight: 600; }
.fall-vitrine .meta a::after { content: "\2197"; font-size: 0.85em; }
@media (max-width: 860px) {
  .kanal-split { grid-template-columns: 1fr; gap: var(--raum-3); }
  .kanal-split > * + * { border-left: 0; padding-left: 0; border-top: var(--linie); padding-top: var(--raum-3); }
}

/* Vitrine: Quellen links, Browser-Mock in der Mitte, Ergebnis rechts (nur Deko, aria-hidden) */
.vitrine { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--raum-2); align-items: center; margin-block: var(--raum-1); }
.vitrine__quellen { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--raum-2); }
.vitrine__quellen li { position: relative; font-size: var(--text-s); font-weight: 700; padding: 0.4em 0.9em; border: var(--kontur); border-radius: 999px; background: var(--farbe-flaeche); }
.vitrine__quellen li::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--raum-2); border-top: 2px dashed var(--farbe-linie); }
.vitrine__mock { border: var(--kontur); border-radius: var(--radius); background: var(--farbe-flaeche); overflow: hidden; box-shadow: var(--schatten-hover); }
.vitrine__mock .mock__top { height: 1.7rem; }
.vitrine__inhalt { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--raum-2); padding: var(--raum-2); align-items: center; }
.vitrine__marke { font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-s); color: var(--farbe-buehne); display: block; margin-bottom: 0.5rem; }
.vitrine__titel { height: 0.9rem; border-radius: var(--radius-klein); background: var(--farbe-buehne); margin-top: 0.4rem; width: 90%; }
.vitrine__titel--kurz { width: 65%; }
.vitrine__zeile { height: 0.45rem; border-radius: var(--radius-klein); background: var(--farbe-flaeche-alt); margin-top: 0.45rem; width: 80%; }
.vitrine__knopf { display: inline-block; margin-top: 0.7rem; padding: 0.35em 0.7em; border-radius: var(--radius-klein); background: var(--farbe-akzent); color: var(--farbe-auf-akzent); font-size: 0.7rem; font-weight: 700; }
.vitrine__bild { aspect-ratio: 4 / 3; border-radius: var(--radius-klein); background: var(--farbe-auf-buehne-gedimmt); border: var(--kontur); }
.vitrine__ergebnis { position: relative; max-width: 8.5rem; font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-s); color: var(--farbe-buehne); line-height: 1.25; padding-left: var(--raum-2); }
.vitrine__ergebnis::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--raum-2) - 0.3rem); border-top: 2px dashed var(--farbe-linie); }
.vitrine__ergebnis strong { display: block; font-size: var(--text-xl); color: var(--farbe-akzent); line-height: 1.1; border-bottom: 0.12em solid var(--farbe-signatur); width: max-content; margin-bottom: 0.25rem; }
@media (max-width: 560px) {
  .vitrine { grid-template-columns: 1fr; }
  .vitrine__quellen { flex-direction: row; flex-wrap: wrap; }
  .vitrine__quellen li::after, .vitrine__ergebnis::before { display: none; }
  .vitrine__ergebnis { max-width: none; padding-left: 0; }
}

/* Beispiele als drei Spalten: gelbe Kante links, Nummer mit Strich, grosse Zeile, Fussnote */
.faelle--spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-4); margin-top: var(--raum-3); }
.fall-spalte { border-left: var(--akzentkante); padding-left: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-2); transition: border-color 220ms ease, transform 220ms ease; }
.fall-spalte:hover { border-left-color: var(--farbe-akzent); transform: translateX(4px); }
.fall-spalte__nr { font-family: var(--schrift-display); font-weight: 800; color: var(--farbe-signatur); display: inline-flex; align-items: center; gap: var(--raum-2); font-size: var(--text-m); }
.fall-spalte__nr::after { content: ""; width: 2rem; height: 3px; background: var(--farbe-signatur); border-radius: 2px; }
.fall-spalte .meta { margin: 0; }
.fall-spalte h3 { font-size: var(--text-2xl); line-height: 1.08; margin: 0; }
.fall-spalte h3 span { display: block; }
.fall-spalte p { color: var(--farbe-text-gedimmt); }
.fall-spalte__fuss { display: inline-flex; align-items: center; gap: var(--raum-2); margin-top: auto; padding-top: var(--raum-2); font-size: var(--text-s); color: var(--farbe-text-gedimmt); }
.fall-spalte__fuss::before { content: ""; width: 1.6rem; height: 3px; background: var(--farbe-signatur); border-radius: 2px; flex-shrink: 0; }
.faelle-abschluss { display: flex; align-items: center; gap: var(--raum-3); color: var(--farbe-text-gedimmt); font-size: var(--text-s); font-weight: 600; text-align: center; margin: var(--raum-4) 0 0; }
.faelle-abschluss::before, .faelle-abschluss::after { content: ""; flex: 1; border-top: var(--linie); }
@media (max-width: 860px) { .faelle--spalten { grid-template-columns: 1fr; gap: var(--raum-3); } .fall-spalte h3 { font-size: var(--text-xl); } }

/* Person-Sektion: Sterne und Knopf in einer Zeile */
.person-beweis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2) var(--raum-3); margin-top: var(--raum-3); }
.person-beweis .google-sterne { margin: 0; }
.ueber-mich .person-beweis { margin-top: 0; }

/* Preischeck: Merkzettel (Impressum/Datenschutz zaehlen nicht mit) sichtbar statt grau */
.check__merke { display: flex; gap: var(--raum-2); align-items: flex-start; margin-top: var(--raum-2); padding: var(--raum-2) var(--raum-3); border: 2px solid var(--farbe-akzent); border-radius: var(--radius-klein); background: var(--farbe-flaeche); font-weight: 600; font-size: var(--text-m); }
.check__merke::before { content: "i"; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--farbe-akzent); color: var(--farbe-auf-akzent); font-family: var(--schrift-display); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1rem; }

/* Preischeck: Eigenbau-Kasten zwischen Formular und Ueber-mich (dunkle Karte) */
.eigenbau { max-width: 44rem; margin: var(--raum-4) auto 0; padding: var(--raum-4); border-radius: var(--radius); background: var(--farbe-buehne); color: var(--farbe-auf-buehne); display: flex; flex-direction: column; gap: var(--raum-2); }
.eigenbau h2 { font-size: var(--text-2xl); line-height: var(--zeilenhoehe-eng); color: inherit; }
.eigenbau p { color: var(--farbe-auf-buehne-gedimmt); max-width: var(--textspalte); }
.eigenbau p strong { color: var(--farbe-auf-buehne); }
.eigenbau__schluss { margin-top: var(--raum-2); padding-top: var(--raum-2); border-top: 1px solid var(--farbe-auf-buehne-flaeche); font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-l); line-height: 1.3; color: var(--farbe-auf-buehne); }
.eigenbau__schluss strong { color: var(--farbe-signatur); }
@media (max-width: 560px) { .eigenbau { padding: var(--raum-3); } }
/* Eigenbau ueber dem Check (Paul 09.09.2026): Rest hinter "Weiterlesen", Strich + mittig */
.eigenbau--oben { margin: 0 0 var(--raum-3); }
.check__fortschritt { scroll-margin-top: var(--raum-2); }
.eigenbau__mehr { display: flex; flex-direction: column; gap: var(--raum-2); }
.eigenbau__mehr summary { list-style: none; cursor: pointer; text-align: center; padding-top: var(--raum-2); border-top: 1px solid var(--farbe-auf-buehne-flaeche); font-family: var(--schrift-display); font-weight: 700; color: var(--farbe-signatur); }
.eigenbau__mehr summary::-webkit-details-marker { display: none; }
.eigenbau__mehr summary:hover { color: var(--farbe-auf-buehne); }
.eigenbau__mehr summary .eigenbau__auf, .eigenbau__mehr[open] summary .eigenbau__zu { display: none; }
.eigenbau__mehr[open] summary .eigenbau__auf { display: inline; }
.eigenbau__mehr[open] summary { order: 99; }
.eigenbau__mehr .eigenbau__schluss { margin-top: 0; }
/* Intro als Info-Kasten mit i-Symbol */
.check__intro--kasten { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-2); align-items: start; padding: var(--raum-2) var(--raum-3); border: 2px solid var(--farbe-akzent); border-radius: var(--radius-klein); background: var(--farbe-flaeche); }
.check__intro--kasten::before { content: "i"; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--farbe-akzent); color: var(--farbe-auf-akzent); font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-m); line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.15rem; }

/* Effekte, dosiert: Hover auf Knoepfen und Karten, Einblenden beim Scrollen.
   Reduced motion schaltet alles ab (Regel oben: transition none). */
.knopf { transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease; }
.knopf:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.knopf[data-cta="primaer"]:hover, .check__nav .knopf[data-cta="weiter"]:hover { box-shadow: var(--schatten-schwebend); }
.knopf:active { transform: translateY(0); }
.karte, .touchpoint, .blog-karte, .leistung, .teaser { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.touchpoint:hover, .blog-karte:hover, .leistung:hover, .stimme.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); border-color: var(--farbe-akzent); }
.ablauf-spalten > div { transition: border-color 220ms ease; }
.ablauf-spalten > div:hover { border-top-color: var(--farbe-akzent); }
.faq-liste summary { transition: color 180ms ease; }
.faq-liste summary:hover { color: var(--farbe-akzent); }
.fluss li { transition: transform 180ms ease, border-color 180ms ease; }
.fluss li:hover { transform: translateY(-2px); border-color: var(--farbe-akzent); }
.js-enthuellen :where([data-enthuellen]) { opacity: 0; transform: translateY(18px); transition: opacity var(--dauer-enthuellen) ease, transform var(--dauer-enthuellen) ease; }
.js-enthuellen :where([data-enthuellen].sichtbar) { opacity: 1; transform: none; }

/* ============================================================
   MOBIL-KORREKTUR 10.09.2026 (Paul, iPhone-Screenshots): Kopf kompakt
   (Menue kleiner, beim Scrollen nur Logo + Knopf), Ueberschriften mit
   Silbentrennung statt Ueberlauf, Hero-H1 kleiner, Fortschrittszeile
   ohne Umbruch. Groessen selbst kommen aus der Mobil-Skala in tokens.css.
   ============================================================ */
@media (max-width: 720px) {
  .kopf .hauptnav { gap: var(--raum-1) var(--raum-2); padding-block: var(--raum-1); }
  .kopf .logo img { height: 1.9rem; }
  .kopf .hauptnav .knopf { font-size: var(--text-s); padding: 0.6em 1em; }
  .kopf .hauptnav .menue { gap: 0.2rem var(--raum-2); font-size: var(--text-s); }
  .kopf.geschrumpft .hauptnav .menue { display: none; }
  .kopf.geschrumpft .logo img { height: 1.6rem; }
  h1, h2, .sektionskopf, .buehne-typo { hyphens: auto; overflow-wrap: anywhere; }
  .lp-hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .lp-hero { padding-block: var(--raum-3) var(--raum-sektion); }
  .check__fortschritt-zeile { gap: var(--raum-2); }
  .check__fortschritt-zeile span:first-child { white-space: nowrap; }
  .check__fortschritt-zeile span:last-child { text-align: right; }
  .fakten--leiste strong { font-size: var(--text-l); }
  /* Kicker einzeilig statt zweizeilig neben dem Strich (Paul: "sieht komisch aus") */
  .kicker { font-size: var(--text-s); }
  .kicker::before { flex-shrink: 0; }
}

/* Burger im mobilen Kopf (Paul 10.09.2026): nur sichtbar, wenn das Menue beim
   Scrollen eingeklappt ist. Sitzt mittig zwischen Logo und Knopf, klappt das
   Menue als zweite Zeile wieder auf. Eingefuegt von js/seite.js. */
.burger { display: none; }
@media (max-width: 720px) {
  .kopf .hauptnav { grid-template-columns: auto 1fr auto; }
  .kopf .hauptnav .menue { grid-column: 1 / -1; }
  .kopf .hauptnav .knopf { grid-column: 3; }
  .burger { grid-column: 2; justify-self: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 0.32rem; }
  .burger span { display: block; width: 1.4rem; height: 2px; background: var(--farbe-text); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; }
  .kopf.geschrumpft .burger { display: inline-flex; }
  .kopf.geschrumpft.menue-offen .hauptnav .menue { display: flex; }
  .kopf.menue-offen .burger span:nth-child(1) { transform: translateY(0.45rem) rotate(45deg); }
  .kopf.menue-offen .burger span:nth-child(2) { opacity: 0; }
  .kopf.menue-offen .burger span:nth-child(3) { transform: translateY(-0.45rem) rotate(-45deg); }
}