/* Präsentationsbausteine — kundenneutral.
   Im Quellstand lagen 487 style-Attribute im Dokument; damit war die Seite für
   einen zweiten Kunden nicht umfärbbar. Hier trägt jeder Baustein eine Klasse
   und jede Farbe eine Variable.

   Keine Regel dieser Datei greift über einen Vorfahren in einen fremden
   Baustein hinein. Welche Farben gelten, sagt die Palette, die der Abschnitt
   per data-grund setzt; ein Baustein liest sie und fragt nicht, wo er steht.
   Die frühere Fassung tat das Gegenteil — sie färbte jede Überschrift im
   dunklen Abschnitt weiß und traf damit auch die weißen Karten darin. */

/* Die getönte Fläche läuft über das ganze Fenster, der Text darin steht in
   einer Spalte mit garantiertem Abstand zum Rand. Beides erledigt ein Raster
   aus drei Spalten: zwei Ränder und die Mitte. Ohne das saß der Aufmacher in
   einem 1080er Kasten und seine Überschrift klebte an dessen Kante. */
.p-seite { width: 100%; margin: 0; padding: 0; }

.p-hero, .p-abschnitt {
  display: grid;
  grid-template-columns:
    [voll-start] minmax(var(--rand), 1fr)
    [inhalt-start] minmax(0, var(--seitenbreite))
    [inhalt-ende] minmax(var(--rand), 1fr)
    [voll-ende];
}
.p-hero > *, .p-abschnitt > * { grid-column: inhalt-start / inhalt-ende; }
/* Ein Element, das die ganze Fläche einnehmen soll, holt sich die Randspalten
   zurück — etwa ein Bild, das bis an den Fensterrand laufen darf. */
.p-hero > [data-breite="voll"], .p-abschnitt > [data-breite="voll"] { grid-column: voll-start / voll-ende; }
.p-hero > *:first-child, .p-abschnitt > *:first-child { margin-top: 0; }

/* Die Kopfleiste klebt oben; ohne diese Zeile landet ein Sprungziel darunter. */
.p-hero, .p-abschnitt { scroll-margin-top: calc(var(--kopf-hoehe) + 8px); }

/* ── Aufmacher ───────────────────────────────────────────────────────── */
/* Der Verlauf läuft von der Markenfläche zu einer abgedunkelten Fassung
   derselben Farbe. Jede Textfarbe der dunklen Palette ist gegen die hellere
   der beiden gerechnet, also gilt sie auf der ganzen Strecke. */
.p-hero {
  background: linear-gradient(135deg, var(--marke-primaer-flaeche) 0%, color-mix(in srgb, var(--marke-primaer-flaeche) 78%, #000) 100%);
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px); margin-bottom: 0;
}
.p-hero h1 {
  font-size: clamp(1.85rem, 1.1rem + 3.2vw, 2.85rem);
  line-height: 1.12; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 20px; max-width: 20ch;
}

/* ── Abschnitt ───────────────────────────────────────────────────────── */
.p-abschnitt { padding: var(--raum-flaeche) 0; border-bottom: 1px solid var(--linie); }
.p-abschnitt:last-of-type { border-bottom: none; }

.p-kicker {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--akzent-schrift); margin-bottom: 14px;
}
.p-abschnitt h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.95rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 20px; max-width: 26ch; color: var(--text); }
.p-abschnitt h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.p-abschnitt h4 { font-size: 0.95rem; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.p-abschnitt p { line-height: 1.75; color: var(--text-weich); margin: 0 0 18px; max-width: 68ch; }

/* ── Kennzahlen ──────────────────────────────────────────────────────── */
.p-kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px; margin: 36px 0 8px; padding: 0; list-style: none;
}
.p-kennzahl { border-left: 3px solid var(--akzent-schrift); padding-left: 18px; }
.p-kennzahl-wert { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--primaer-schrift); }
.p-kennzahl-text { display: block; font-size: 0.85rem; line-height: 1.55; color: var(--text-leise); margin-top: 8px; }

/* ── Erklärkasten ────────────────────────────────────────────────────── */
.p-kasten {
  background: var(--flaeche-leise); border-left: 3px solid var(--primaer-schrift);
  padding: 24px 28px; margin: 32px 0; border-radius: 0 3px 3px 0;
}
.p-kasten p:last-child { margin-bottom: 0; }

/* ── Balkenvergleich ─────────────────────────────────────────────────── */
.p-balken { margin: 28px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.p-balken li { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.p-balken-name { font-size: 0.88rem; font-weight: 700; color: var(--text-weich); }
.p-balken-schiene { background: var(--linie); height: 22px; border-radius: 3px; overflow: hidden; }
.p-balken-fuellung { height: 100%; background: var(--text-leise); border-radius: 3px; }
.p-balken li[data-rolle="eigen"] .p-balken-fuellung { background: var(--akzent-schrift); }
.p-balken li[data-rolle="fremd"] .p-balken-fuellung {
  background: color-mix(in srgb, var(--text-leise) 45%, var(--flaeche));
}
.p-balken li[data-rolle="fremd"] .p-balken-name { font-weight: 400; }
.p-balken li[data-rolle="ziel"] .p-balken-fuellung {
  background: repeating-linear-gradient(45deg, var(--primaer-schrift) 0 8px, color-mix(in srgb, var(--primaer-schrift) 60%, var(--flaeche)) 8px 16px);
}
.p-balken-wert { font-size: 0.88rem; font-weight: 700; color: var(--text); min-width: 58px; text-align: right; }

/* ── Flussdiagramm ───────────────────────────────────────────────────── */
.p-fluss {
  display: flex; align-items: stretch; gap: 0; margin: 32px 0;
  padding: 0; list-style: none; flex-wrap: wrap;
}
.p-fluss li {
  flex: 1 1 170px; background: var(--flaeche-erhoben); border: 1px solid var(--linie);
  padding: 18px 20px; position: relative;
}
.p-fluss li + li { border-left: none; }
/* Die Pfeilspitze ist eine Form, kein Zeichen: der Rechtspfeil U+2192 fehlt in
   jedem üblichen Lateinschnitt, und ein Blatt, das für alle Kunden gilt, darf
   nicht darauf hoffen, dass die mitgelieferte Schrift ihn zufällig führt. */
.p-fluss li::after {
  content: ""; position: absolute; right: -7px; top: 50%;
  width: 13px; height: 13px; transform: translateY(-50%);
  background: var(--akzent-schrift); clip-path: polygon(0 16%, 0 84%, 100% 50%);
  z-index: 2;
}
.p-fluss li:last-child::after { content: none; }
.p-fluss-titel { display: block; font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.p-fluss-text { display: block; font-size: 0.8rem; line-height: 1.55; color: var(--text-leise); }
/* Getönt wird gegen die eigene Fläche, nicht gegen Weiß: derselbe Baustein
   steht je nach Abschnitt auf hellem oder auf dunklem Grund. */
.p-fluss li[data-rolle="ziel"] {
  background: var(--flaeche-akzent);
  border-color: var(--akzent-schrift);
}
.p-fluss li[data-rolle="start"] { border-left: 3px solid var(--primaer-schrift); }

/* ── Zeitraster über zwölf Monate ────────────────────────────────────── */
/* Breiter als ein Telefon: die Fläche rollt seitlich. Dass sie das tut, sagen
   drei Dinge — ein Schatten an der Kante, zu der noch Inhalt liegt, eine
   Zeile darunter und die Beschriftung für Vorlesewerkzeuge. Vorher rollte
   sie stumm, und wer nicht zufällig wischte, hielt die Hälfte für den Rest. */
.p-raster, .p-tabelle-rahmen {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--flaeche) 30%, transparent) left center / 44px 100% no-repeat local,
    linear-gradient(to left, var(--flaeche) 30%, transparent) right center / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--schatten), transparent) left center / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--schatten), transparent) right center / 18px 100% no-repeat scroll;
}
.p-raster { margin: 28px 0 16px; }
.p-rollhinweis {
  display: none;
  font-size: 0.76rem; color: var(--text-leise); margin: 8px 0 0;
}
.p-raster-tabelle { width: 100%; border-collapse: collapse; min-width: 640px; }
.p-raster-tabelle th {
  font-size: 0.68rem; font-weight: 700; color: var(--text-leise);
  text-align: center; padding: 0 0 10px; font-variant-numeric: tabular-nums;
}
.p-raster-tabelle th:first-child { text-align: left; width: 160px; }
.p-raster-tabelle td { padding: 4px 1px; }
.p-raster-tabelle td:first-child { font-size: 0.82rem; font-weight: 700; color: var(--text-weich); padding-right: 14px; }
.p-raster-spur { display: block; height: 26px; border-radius: 3px; background: var(--linie); }
.p-raster-spur[data-an="ja"] { background: var(--primaer-schrift); }
.p-raster-spur[data-an="ja"][data-art="wahlweise"] {
  background: repeating-linear-gradient(45deg, var(--primaer-schrift) 0 6px, transparent 6px 12px);
  border: 1px dashed var(--primaer-schrift);
}
.p-raster-spur[data-an="ja"][data-art="start"] {
  background: var(--akzent-schrift);
}
.p-raster-spur[data-an="ja"][data-art="ziel"] {
  background: color-mix(in srgb, var(--primaer-schrift) 70%, var(--flaeche));
  border: 1px solid var(--primaer-schrift);
}
.p-raster-hinweis { font-size: 0.78rem; line-height: 1.6; color: var(--text-leise); margin-top: 12px; }

/* ── Karten ──────────────────────────────────────────────────────────── */
.p-karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px; margin: 32px 0; padding: 0; list-style: none;
}
.p-karte { background: var(--flaeche-erhoben); border: 1px solid var(--linie); border-top: 3px solid var(--primaer-schrift); padding: 24px; }
.p-karte[data-rolle="wahlweise"] { border-top-style: dashed; }
.p-karte[data-rolle="beleg"] {
  border-top-color: var(--akzent-schrift);
  background: var(--flaeche-akzent);
}
.p-karte-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--marke-primaer-flaeche); color: var(--auf-primaer);
  font-size: 0.82rem; font-weight: 700; margin-bottom: 14px;
}
.p-karte-meta {
  display: block; font-size: 0.74rem; font-weight: 700; color: var(--text-leise);
  letter-spacing: 0.04em; margin: 0 0 12px;
}
.p-karte-marke {
  display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 3px 10px; border-radius: 12px;
  background: var(--flaeche-akzent);
  color: var(--akzent-schrift);
  border: 1px solid var(--akzent-schrift); margin-bottom: 12px;
}
.p-karte p { font-size: 0.88rem; margin-bottom: 14px; }
.p-karte ul { margin: 0; padding-left: 18px; }
.p-karte li { font-size: 0.86rem; line-height: 1.65; color: var(--text-weich); margin-bottom: 7px; }
.p-karte-fuss { font-size: 0.76rem; color: var(--text-leise); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linie); }

/* ── Tabelle ─────────────────────────────────────────────────────────── */
.p-tabelle-rahmen { margin: 32px 0; }
.p-tabelle { width: 100%; border-collapse: collapse; min-width: 620px; }
.p-tabelle th {
  text-align: left; font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-leise);
  padding: 0 16px 12px 0; border-bottom: 2px solid var(--primaer-schrift);
}
.p-tabelle td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--linie); font-size: 0.88rem; line-height: 1.65; color: var(--text-weich); vertical-align: top; }
.p-tabelle td:first-child { font-weight: 700; color: var(--text); }
/* Ein Preis darf nicht zwischen Zahl und Währung brechen. Er steht in einer
   Fläche, die ohnehin rollt — der Umbruch fehlt hier also niemandem. */
.p-tabelle td:last-child { white-space: nowrap; font-weight: 700; color: var(--primaer-schrift); text-align: right; padding-right: 0; }
.p-tabelle tr[data-rolle="summe"] td {
  border-top: 2px solid var(--primaer-schrift); border-bottom: none;
  font-weight: 700; color: var(--text); background: var(--flaeche-leise);
}

/* ── Einwand und Antwort ─────────────────────────────────────────────── */
.p-einwaende { margin: 28px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.p-einwand { border-left: 3px solid var(--linie); padding-left: 20px; }
.p-einwand-frage { display: block; font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.p-einwand-antwort { display: block; font-size: 0.86rem; line-height: 1.7; color: var(--text-leise); }

/* ── Zeitstrahl ──────────────────────────────────────────────────────── */
.p-strahl { display: flex; gap: 0; margin: 32px 0; padding: 0; list-style: none; flex-wrap: wrap; }
.p-strahl li { flex: 1 1 150px; text-align: center; padding: 18px 12px; border-top: 3px solid var(--linie); position: relative; }
.p-strahl li[data-rolle="jetzt"] { border-top-color: var(--akzent-schrift); }
.p-strahl li[data-rolle="ziel"] { border-top-color: var(--primaer-schrift); }
.p-strahl li[data-rolle="start"] { border-top-color: color-mix(in srgb, var(--akzent-schrift) 60%, var(--text-leise)); }
.p-strahl li[data-rolle="warnung"] {
  border-top-style: dashed;
  border-top-color: color-mix(in srgb, var(--text-leise) 60%, var(--primaer-schrift));
  background: var(--flaeche-leise);
}
.p-strahl li[data-rolle="warnung"] .p-strahl-wert { color: var(--text-weich); }
.p-strahl-marke { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-leise); margin-bottom: 8px; }
.p-strahl-wert { display: block; font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.p-strahl-text { display: block; font-size: 0.8rem; line-height: 1.55; color: var(--text-leise); }

/* ── Offene Fragen ───────────────────────────────────────────────────── */
.p-fragen { margin: 32px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 26px; }
.p-frage { border-left: 3px solid var(--akzent-schrift); padding-left: 22px; }
.p-frage h3 { margin-bottom: 12px; }
.p-frage-optionen { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.p-frage-optionen li { font-size: 0.87rem; line-height: 1.65; color: var(--text-weich); }
.p-frage-optionen strong { color: var(--text); }
.p-frage-folge { font-size: 0.83rem; color: var(--text-leise); margin: 0; }

/* ── Leiser Grund: Atem zwischen zwei lauten Abschnitten ─────────────── */
/* Die Palette in grundlage.css vertauscht für diesen Ton die Flächen: der
   Abschnitt wird grau, was darauf liegt weiß. Die zweite Hälfte kam bisher
   nicht an, weil .p-abschnitt seine Fläche gar nicht setzt — ohne diese Regel
   blieb der leise Ton ein Attribut ohne Bild. */
.p-abschnitt[data-grund="leise"] { background: var(--flaeche); }

/* ── Dunkler Grund: der Abschnitt, auf den alles zuläuft ─────────────── */
/* Nur die Fläche. Alles Weitere steht in der Palette, die das Element über
   denselben Grundsatz mitbringt — ein Attribut, eine Wahrheit. */
.p-abschnitt[data-grund="dunkel"] {
  background: linear-gradient(135deg, var(--marke-primaer-flaeche) 0%, color-mix(in srgb, var(--marke-primaer-flaeche) 78%, #000) 100%);
  border-bottom: none;
}

/* ── Spaltenliste ────────────────────────────────────────────────────── */
.p-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-top: 32px; }
.p-spalte h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; color: var(--akzent-schrift); }
.p-spalte ul { margin: 0; padding: 0; list-style: none; }
.p-spalte li { font-size: 0.95rem; line-height: 1.8; color: var(--text-weich); }

/* ── Quellhinweis ────────────────────────────────────────────────────── */
.p-quelle { font-size: 0.76rem; line-height: 1.65; color: var(--text-leise); margin: 12px 0 0; max-width: 72ch; }

/* ── Belegverzeichnis ────────────────────────────────────────────────── */
.p-belege { padding: 32px 28px 36px; background: var(--flaeche-leise); color: var(--text-leise); border-radius: 4px; }
.p-belege h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-leise); margin: 0 0 12px; }
.p-belege ol { margin: 0; padding-left: 20px; text-align: left; }
.p-belege li { font-size: 0.82rem; line-height: 1.8; color: var(--text-leise); margin-bottom: 6px; }
.p-belege li a { color: var(--primaer-schrift); }

@media (max-width: 760px) {
  .p-hero h1 { font-size: 1.9rem; }
  .p-abschnitt h2 { font-size: 1.45rem; }
  .p-balken li { grid-template-columns: 1fr; gap: 6px; }
  .p-balken-wert { text-align: left; }
  .p-fluss li::after { content: none; }
  .p-fluss li + li { border-left: 1px solid var(--linie); }
  /* Auf breiten Fenstern passt alles ins Bild; erst hier wird die Zeile
     gebraucht, und nur hier steht sie. */
  .p-rollhinweis { display: block; }

  /* Die Tabelle rollt hier nicht mehr, sie stapelt. Vorher lag genau die
     Spalte draussen, wegen der man die Tabelle liest: wer den Kostenteil am
     Telefon aufschlug, sah drei Leistungsnamen und keinen einzigen Betrag.
     Ein Rollhinweis heilt das nicht — er steht unter der Tabelle und kommt
     damit zu spät. Jede Zeile wird ein Block, jede Zelle bekommt ihren
     Spaltennamen aus data-spalte davor. Das Raster daneben stapelt nicht:
     dort ist die Aussage die Lage der Balken zueinander, die beim Stapeln
     verschwindet. */
  .p-tabelle-rahmen { overflow-x: visible; background: none; }
  .p-tabelle-rahmen + .p-rollhinweis { display: none; }
  .p-tabelle { min-width: 0; }
  .p-tabelle thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .p-tabelle tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--linie); }
  /* Flex und nicht Grid: im Raster wird jeder Textknoten ein eigenes Feld,
     und die Fußnote hinter dem Betrag rutschte dadurch in eine Zeile für
     sich. Hier bleibt der Zellinhalt ein Fluss und die Fußnote am Betrag. */
  /* Der Abstand hängt am Namen und nicht am Fluss: eine Lücke zwischen allen
     Teilen risse auch den Betrag von seiner Fußnote los. */
  .p-tabelle td {
    display: flex; padding: 4px 0; border: none;
  }
  .p-tabelle td::before {
    content: attr(data-spalte);
    flex: 0 0 6.5em; margin-right: 14px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-leise); padding-top: 0.3em;
  }
  .p-tabelle td:last-child { text-align: left; white-space: normal; }
  .p-tabelle tr[data-rolle="summe"] {
    border-top: 2px solid var(--primaer-schrift); border-bottom: none;
    background: var(--flaeche-leise); padding: 14px 16px 16px;
  }
  .p-tabelle tr[data-rolle="summe"] td { background: none; border-top: none; }
}

@media print {
  .p-abschnitt { page-break-inside: avoid; }
}

/* ── Aufmacherzeile ───────────────────────────────────────────────────── */
/* Links wie die Überschrift darüber. Zentriert stand sie auf einer zweiten
   Achse, und die Seite wirkte, als wären zwei Layouts übereinandergelegt. */
.p-hero-zeile {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.7;
  max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 40px);
  color: var(--text-weich);
}

/* ── Fußnote an einer Zahl ────────────────────────────────────────────── */
/* Der Anker erbt die Farbe seines Absatzes und zeigt sich durch die punktierte
   Linie. Vorher trug er die leise Textfarbe und stand damit als blasse Ziffer
   in einer dunklen Zeile — sichtbar nur, wenn man sie schon suchte. */
/* Die Ziffer war am Telefon sechs Pixel breit und zehn hoch. Ein Ziel von
   24 mal 24 Pixeln lässt sich mitten in einer Zeile nicht herstellen, ohne die
   Zeile darüber zu überdecken und deren Verweise unklickbar zu machen — die
   Zielgrößenregel nimmt Verweise im Fließtext genau deshalb aus. Was ohne
   Schaden geht, ist hier getan: die Ziffer wird größer und bekommt Fläche zu
   beiden Seiten, sodass sich die Breite mehr als verdoppelt. */
.p-beleg { font-size: 0.7em; margin-left: 2px; }
.p-beleg a {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding: 0 3px;
}
.p-beleg a:hover { background: color-mix(in srgb, var(--akzent-schrift) 18%, var(--flaeche)); }

/* Der Status sagt, wie fest die Zahl steht. Eine Schätzung als Messwert
   auszugeben, war der eigentliche Mangel des Quellstands. */
.p-beleg-status {
  display: inline-block;
  margin-right: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--flaeche-leise); color: var(--text-leise);
  border: 1px solid var(--linie);
}
.p-beleg-status[data-status="belegt"] {
  background: var(--flaeche-akzent);
  color: var(--akzent-schrift);
  border-color: color-mix(in srgb, var(--akzent-schrift) 45%, var(--flaeche-akzent));
}
.p-beleg-status[data-status="eigene-daten"] {
  background: var(--flaeche-primaer);
  color: var(--primaer-schrift);
  border-color: color-mix(in srgb, var(--primaer-schrift) 30%, var(--flaeche-primaer));
}
.p-beleg-status[data-status="schaetzung"],
.p-beleg-status[data-status="prognose"] { background: var(--flaeche-leise); }
/* Ein Warnzeichen trägt seine eigene Fläche und seine eigene Schrift: es soll
   in jeder Palette gleich aussehen und tut das nur mit festen Werten. */
.p-beleg-status[data-status="ungeklaert"] { background: #fff4f4; color: #9b2c2c; border-color: #f3c9c9; }