/* =============================================================================
   website.css — Layout und Gestalt der Firmenkunden-Website
   =============================================================================
   HERKUNFT: Diese Datei ist die Überführung des abgenommenen Prototyps
   (prototyp/scroll-startseite.html, dritte Fassung) in das Seitensystem.
   Der Prototyp bleibt als Referenz liegen und wird nicht mehr angefasst —
   was hier steht, muss dort gemessen werden können.

   Der Auftraggeber hat als Referenz bl-ems.de genannt und entschieden:
   "Volle Wucht, aber in Jochens Farben." Daraus folgen die vier Merkmale,
   die diese Datei trägt:
     – strenger Flächenwechsel hell → dunkel → hell → dunkel
     – Überschriften in Versalien, Sans, Schriftstärke 700, bis 72 px,
       zweifarbig: zweite Zeile in der Signalfarbe
     – Kapitel-Label mit Signalpunkt über jeder Überschrift
     – feste Navigation oben, schwebender Rufknopf unten rechts

   REGELN, die hier ohne Ausnahme gelten:
     1. KEIN fester Farbwert. Alles kommt aus marke.css; fehlende Töne werden
        per color-mix aus den vorhandenen abgeleitet.
     2. Bewegt wird ausschliesslich über transform und opacity.
     3. Jeder Startzustand einer Animation hängt an .has-js UND an
        "prefers-reduced-motion: no-preference". Ohne JavaScript und bei
        eingestellter Bewegungsreduzierung steht alles fertig da.
     4. Eingeblendet wird nur über die Klasse .reveal aus marke.css.
   ========================================================================== */

:root {
  /* Höhe der festen Navigationsleiste. Sprungmarken, sticky-Elemente und der
     Innenabstand der ersten Sektion hängen daran — deshalb genau EINE Quelle. */
  --kopf: 84px;
}
@media (min-width: 900px) { :root { --kopf: 70px; } }

/* Sicherheitsnetz gegen waagerechtes Schieben bei 375 px. `clip` statt
   `hidden`, weil `hidden` einen Scrollcontainer erzeugt und damit jedes
   position:sticky aushebeln würde. */
body { overflow-x: clip; }

/* =============================================================================
   TYPOGRAFIE — DIE WUCHT
   =============================================================================
   marke.css setzt Überschriften in der Serifenschrift, klein und ruhig. Genau
   das las der Auftraggeber zweimal als "austauschbar". Hier wird umgestellt:
   Sans, Schriftstärke 700, Versalien, bis 72 px. Die Serife bleibt für Zahlen,
   Zitate und Schlusssätze — dort trägt sie und ist Jochens Handschrift.
   ========================================================================== */

h1, h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  max-width: none;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(30px, 8vw, 72px); line-height: 1.03; }
h2 { font-size: clamp(24px, 6.2vw, 48px); line-height: 1.05; }
@media (min-width: 760px) {
  h1 { font-size: clamp(46px, 5.6vw, 72px); }
  h2 { font-size: clamp(32px, 3.9vw, 48px); }
}
h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.25;
}

/* Der Ton — die zweite Zeile jeder Hauptüberschrift.
   Auf Papier das volle Zinnober, auf dunklem Grund die aufgehellte Fassung:
   --zinnober auf --tiefe läge bei 2,3:1 und wäre unlesbar. */
.ton { color: var(--zinnober); }
.fl-tanne .ton, .fl-tiefe .ton, .fl-tinte .ton { color: var(--zinnober-hell); }

/* Das Kapitel-Label über jeder Überschrift. Baut auf .pos aus marke.css auf
   und ergänzt nur den Punkt in der Signalfarbe. */
.kapitel {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.22em;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.kapitel::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--zinnober);
}
.fl-tanne .kapitel::before, .fl-tiefe .kapitel::before,
.fl-tinte .kapitel::before { background: var(--zinnober-hell); }
.mitte .kapitel { justify-content: center; }

.mitte { text-align: center; }
.mitte p, .mitte .lead { margin-inline: auto; }

.lead { max-width: 46ch; }
.abschnitt-kopf .lead { margin-top: 20px; }
ul.blank, ol.blank { list-style: none; margin: 0; padding: 0; }

/* Die Blöcke eines Abschnitts (Kopf, Karten, Bildplatz, Merksatz …) sind
   Geschwister im .wrap. Ihr Abstand steht EINMAL hier — sonst müsste ihn jeder
   Baustein selbst mitbringen und jeder anders. */
section > .wrap > * + * { margin-top: clamp(30px, 3.6vw, 48px); }

/* marke.css setzt .zeile-wert auf white-space: nowrap — richtig für Zahlen,
   falsch für "gebundener Versicherungsvertreter". Bei 375 px zog dieser Wert
   die Rasterspalte auf 360 px auf und machte die Seite 9 px zu breit.
   Deshalb: nowrap nur noch für Zahlenwerte. */
.zeile-wert { white-space: normal; }
.zeile-wert.zahl { white-space: nowrap; }

/* =============================================================================
   FLÄCHEN
   =============================================================================
   Die drei Grundflächen (--tanne, --tiefe, --blatt) stehen in marke.css. Hier
   kommt die vierte dazu: die dunkelste. marke.css kennt sie nur als
   Schriftfarbe (--tinte); hier trägt sie die Fusszeile, damit der letzte
   Abschnitt und die Fusszeile nicht zu einer Fläche verschmelzen.
   ========================================================================== */

section {
  padding-block: clamp(58px, 7.4vw, 112px);
  scroll-margin-top: var(--kopf);
}

/* Die erste Sektion einer Seite liegt unter der festen Leiste. Statt den
   Platz auf <main> zu legen (dann stünde über einer hellen Sektion ein
   grüner Streifen), bekommt die Sektion SELBST den Zuschlag — ihre Fläche
   läuft dann unter der Leiste durch. Die Bühne rechnet ihren Kopfabstand
   selbst und wird deshalb ausgenommen. */
main > section:first-child:not(.buehne) {
  padding-top: calc(clamp(58px, 7.4vw, 112px) + var(--kopf));
}

.fl-tinte { background: var(--tinte); color: var(--kreide); }
.fl-tinte h1, .fl-tinte h2, .fl-tinte h3 { color: var(--kreide); }
.fl-tinte p { color: var(--kreide-matt); }
.fl-tinte .pos, .fl-tinte .klein { color: var(--kreide-matt); }

/* Sprungmarke: für Tastatur- und Screenreader-Nutzung, sichtbar erst bei Fokus */
.sprungmarke {
  position: absolute; left: -9999px;
  padding: .75rem 1rem; background: var(--tanne); color: var(--kreide);
}
.sprungmarke:focus { left: 1rem; top: 1rem; z-index: 100; }

main { display: block; }

/* =============================================================================
   FESTE NAVIGATION
   =============================================================================
   Die Fläche liegt in einem ::before und wird per opacity eingeblendet, sobald
   gescrollt wird — kein Farbwechsel, kein Umbruch, nur opacity. Über der Bühne
   bleibt sie durchsichtig, damit das Bild ungeschnitten steht.
   ========================================================================== */
.leiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--kreide);
}
.leiste::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--tinte) 90%, transparent);
  border-bottom: 1px solid var(--linie-dunkel);
  opacity: 0;
  transition: opacity 320ms var(--kurve);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.leiste.fest::before { opacity: 1; }

/* Ohne JavaScript bleibt die Klasse .fest aus. Damit die Leiste über einer
   HELLEN ersten Sektion trotzdem lesbar ist, steht die Fläche dann fest. */
.no-js .leiste::before { opacity: 1; }

/* Mobil zwei Reihen (Name + Anrufen / Themenfelder), ab 900 px eine.
   Die Themenfelder verschwinden bewusst NICHT in einem Menü — sie sind die
   Gliederung der Seite und sollen auf jedem Gerät sichtbar sein. */
.leiste-innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "marke ruf" "felder felder";
  align-items: center;
  column-gap: 14px;
}
.leiste-marke {
  grid-area: marke;
  align-self: center;
  height: 52px;
  display: flex; align-items: center;
  font-size: 14px;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  white-space: nowrap;
}
.leiste-marke span { color: var(--zinnober-hell); }
.leiste-marke:hover { color: var(--kreide); }

.leiste-felder {
  grid-area: felder;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 32px;
  border-top: 1px solid var(--linie-dunkel);
  /* Sechs Felder passen bei 375 px nicht nebeneinander. Sie wandern deshalb
     in einen eigenen, waagerecht schiebbaren Streifen — die SEITE schiebt
     dadurch nicht (Regel 7), und kein Feld verschwindet in einem Menü. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.leiste-felder::-webkit-scrollbar { display: none; }
.leiste-felder ul {
  display: flex; align-items: center; gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.leiste-felder a {
  position: relative;
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-variation-settings: 'wght' 600;
  color: var(--kreide-matt);
  text-decoration: none;
  padding-block: 4px;
  white-space: nowrap;
}
.leiste-felder a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--zinnober-hell);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--kurve);
}
.leiste-felder a:hover,
.leiste-felder a.aktiv,
.leiste-felder a[aria-current="page"] { color: var(--kreide); }
.leiste-felder a.aktiv::after,
.leiste-felder a[aria-current="page"]::after { transform: scaleX(1); }
.leiste-ruf { grid-area: ruf; }

@media (min-width: 900px) {
  .leiste-innen { display: flex; align-items: center; gap: 0; height: 70px; }
  .leiste-marke { height: auto; font-size: 15.5px; }
  .leiste-felder {
    height: auto; border-top: none; overflow: visible;
    margin-left: auto;
  }
  .leiste-felder ul { gap: clamp(14px, 1.9vw, 30px); }
  .leiste-felder a { font-size: 11.5px; letter-spacing: 0.14em; }
  .leiste-ruf { margin-left: clamp(16px, 2vw, 30px); }
}

/* =============================================================================
   KNÖPFE — die Signalfarbe trägt die Handlung
   ========================================================================== */
.cta-signal {
  background: var(--zinnober);
  color: var(--kreide);
  border-radius: 2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 13.5px;
  padding: 15px 28px;
}
.cta-signal:hover,
.fl-blatt .cta-signal:hover { background: color-mix(in srgb, var(--zinnober) 80%, var(--tinte)); color: var(--kreide); }
.fl-blatt .cta-signal { background: var(--zinnober); color: var(--kreide); }
/* Der helle volle Knopf: dieselbe Schrift und Größe wie .cta-signal, damit
   zwei Knöpfe nebeneinander gleich hoch und gleich gesetzt sind (Bühne der
   Startseite, 30.09.2026). Rot bleibt dem ersten Knopf vorbehalten. */
.cta-hell {
  background: var(--blatt); color: var(--tanne);
  border-radius: 2px; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 13.5px; padding: 15px 28px;
}
.cta-hell:hover { background: #fff; color: var(--tiefe); }
.cta-klein { padding: 9px 16px; font-size: 11.5px; }

.cta-linie {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid currentColor;
  padding: 14px 26px;
  font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 600; font-variation-settings: 'wght' 600;
  text-decoration: none; cursor: pointer;
  background: none; color: inherit; font-family: var(--sans);
  transition: background 200ms var(--kurve), color 200ms var(--kurve);
}
.cta-linie:hover { background: var(--kreide); color: var(--tinte); }
.fl-blatt .cta-linie:hover { background: var(--tanne); color: var(--blatt); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mitte .knopfreihe { justify-content: center; }

/* Der schwebende Kontaktknopf. KEIN WhatsApp — im Projekt wurde bewusst auf
   Telefon umgestellt. Er steht auf JEDER Seite (layout_fuss). */
.ruftaste {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--zinnober);
  color: var(--kreide);
  text-decoration: none;
  padding: 13px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; font-variation-settings: 'wght' 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--tinte) 45%, transparent);
  transition: transform 240ms var(--kurve), background 240ms var(--kurve);
}
.ruftaste:hover {
  color: var(--kreide);
  background: color-mix(in srgb, var(--zinnober) 82%, var(--tinte));
  transform: translateY(-2px);
}
.ruftaste svg { width: 17px; height: 17px; flex: none; fill: currentColor; }

/* =============================================================================
   BÜHNE — Bild, Schleier, zwei Zeilen in zwei Farben
   ========================================================================== */
.buehne {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--kopf) + 40px);
  padding-bottom: clamp(40px, 5vw, 72px);
  overflow: hidden;
}
/* Ohne diese Zeile schrumpft .wrap im Raster auf Inhaltsbreite und zentriert
   sich falsch — betrifft jede senkrecht zentrierte Sektion. */
.buehne > .wrap { width: 100%; }

.buehne-bild { position: absolute; inset: -6% 0; z-index: -2; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 76% 18%; }

/* Der Schleier hat zwei Aufgaben: Kontrast für die Schrift und Jochen
   FREISTELLEN. Deshalb liegt der dunkle Teil links, wo der Text steht, und
   läuft nach rechts aus, wo das Gesicht steht. */
.buehne-schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--tinte) 93%, transparent) 0%,
      color-mix(in srgb, var(--tinte) 86%, transparent) 58%,
      color-mix(in srgb, var(--tinte) 24%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--tinte) 62%, transparent) 0%,
      transparent 34%,
      color-mix(in srgb, var(--tinte) 78%, transparent) 100%);
}
@media (max-width: 759px) {
  /* Auf dem Handy ist keine Spalte frei — dort deckt der Schleier flächig ab. */
  .buehne-bild img { object-position: 66% 14%; }
  .buehne-schleier {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--tinte) 74%, transparent) 0%,
      color-mix(in srgb, var(--tinte) 66%, transparent) 40%,
      color-mix(in srgb, var(--tinte) 92%, transparent) 100%);
  }
}

/* KEIN max-width auf der H1: "EIN ANSPRECHPARTNER" ist ein Wort zu viel für
   19 Zeichen — mit Deckel bräche der Umbruch mitten im Wort. Der Deckel sitzt
   stattdessen am Fliesstext. */
.buehne h1 { margin: 6px 0 22px; }
.buehne .lead { font-size: clamp(16px, 1.8vw, 20px); color: var(--kreide); max-width: 44ch; }
@media (min-width: 760px) { .buehne .lead { font-size: 20px; } }

/* Kennzeichenband unter der Bühne — vier harte Fakten, keine Werbung. */
.merkband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0 26px;
  border-top: 1px solid var(--linie-dunkel);
  padding-top: 16px;
  margin-top: clamp(34px, 4.6vw, 62px);
}
.merkband p { margin: 0; padding: 6px 0; max-width: none; }
.merkband strong {
  display: block; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--zinnober-hell);
  margin-bottom: 3px;
}

.abwaerts {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--kreide-matt);
}
.abwaerts i {
  display: block; width: 1px; height: 30px; background: var(--linie-dunkel);
  position: relative; overflow: hidden;
  font-style: normal;
}
.abwaerts i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--zinnober-hell); transform-origin: top;
}
.has-js .abwaerts i::after { animation: rutsch 2.1s var(--kurve) infinite; }
@keyframes rutsch {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* =============================================================================
   KARTEN — der Baustein für Problem, Grundsätze, Branchen
   ========================================================================== */
.karten { display: grid; gap: clamp(16px, 1.8vw, 24px); }
@media (min-width: 720px) { .karten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) { .karten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 620px) { .karten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .karten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 620px) { .karten-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .karten-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karte {
  background: var(--blatt-tief);
  border-top: 3px solid var(--zinnober);
  padding: clamp(22px, 2.6vw, 32px);
}
.karte h3 { margin-bottom: 10px; }
.karte p { font-size: 15.5px; margin-bottom: 0; }
.karte .nr {
  display: block;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  font-variation-settings: 'opsz' 40, 'wght' 300;
  color: var(--zinnober);
  margin-bottom: 14px;
}
.fl-tanne .karte, .fl-tiefe .karte, .fl-tinte .karte {
  background: color-mix(in srgb, var(--kreide) 7%, transparent);
  border-top-color: var(--zinnober-hell);
}
.fl-tanne .karte .nr, .fl-tiefe .karte .nr, .fl-tinte .karte .nr { color: var(--zinnober-hell); }
/* Die aufgehellte Kartenfläche (7% Kreide auf Tanne/Tiefe/Tinte, ≈ rgb(58,74,72))
   ist heller als die reine Sektionsfläche darunter — die geerbte Fließtext-
   farbe (--kreide-matt, 5,4:1 auf reiner Tanne) fällt darauf auf 4,42:1 und
   reisst die AA-Schwelle (Fund per Kontrast-Scan). Wurzel-Fix an der
   Karte selbst (nicht je Element): eigens für diese hellere Fläche
   nachgerechneter Ton, gilt für JEDE Karte auf diesem Grund — auch
   .weiter-karte, die dieselbe Fläche erbt. */
.fl-tanne .karte p, .fl-tiefe .karte p, .fl-tinte .karte p { color: #B9C4BF; } /* 5,2:1 auf der aufgehellten Kartenfläche */

/* =============================================================================
   BILDPLÄTZE UND BILDER
   =============================================================================
   Platzhalter und echtes Bild tragen denselben Rahmen und dieselbe Signalkante
   an der oberen linken Ecke — dadurch ändert sich die Wirkung der Seite nicht,
   wenn ein Platzhalter später durch das echte Bild ersetzt wird.
   ========================================================================== */
.platzhalter {
  position: relative;
  display: grid; place-items: center;
  padding: 18px;
  text-align: center;
  border: 1px dashed var(--linie-hell);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--tinte) 7%, transparent) 0 2px,
      transparent 2px 12px),
    var(--blatt-tief);
  color: var(--tinte-matt);
  aspect-ratio: 16 / 9;
}
.platzhalter span {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; font-variation-settings: 'wght' 600;
  max-width: 26ch;
}
.platzhalter::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 34px; height: 3px; background: var(--zinnober);
}
.fl-tanne .platzhalter, .fl-tiefe .platzhalter, .fl-tinte .platzhalter {
  border-color: var(--linie-dunkel);
  color: var(--kreide-matt);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--kreide) 9%, transparent) 0 2px,
      transparent 2px 12px),
    color-mix(in srgb, var(--tinte) 55%, var(--tanne));
}
.fl-tanne .platzhalter::before, .fl-tiefe .platzhalter::before,
.fl-tinte .platzhalter::before { background: var(--zinnober-hell); }

.platz-breit { aspect-ratio: 21 / 6; }
/* Gedeckelt: ein 4:5-Feld über die halbe Seitenbreite wird 690 px hoch und
   drückt den Text daneben in die Mitte einer leeren Fläche. */
.platz-hoch  { aspect-ratio: 4 / 5; max-width: 400px; margin-inline: auto; width: 100%; }
.platz-schmal { aspect-ratio: 3 / 2; }

.bildfeld { position: relative; margin: 0; }
.bildfeld img { width: 100%; }
.bildfeld picture { display: block; }
.bildfeld::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1;
  width: 42px; height: 4px; background: var(--zinnober);
}
.fl-tanne .bildfeld::before, .fl-tiefe .bildfeld::before,
.fl-tinte .bildfeld::before { background: var(--zinnober-hell); }
.bildfeld figcaption {
  margin-top: 10px;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--tinte-matt);
}
.fl-tanne .bildfeld figcaption, .fl-tiefe .bildfeld figcaption,
.fl-tinte .bildfeld figcaption { color: var(--kreide-matt); }

/* =============================================================================
   DER KREIS DER FIRMENBERATUNG — das Leitmotiv der Marke
   =============================================================================
   Vier massive Ringsegmente statt einer Linie. Bandbreite 100 von Radius 206 —
   rund die halbe Radiuslänge, also echte Flächen. Jedes Segment endet in einer
   Pfeilspitze und beginnt mit der passenden Kerbe: der Kreis liest sich als
   Kreislauf MIT RICHTUNG.

   FARBEN: Der Ring ist HELL auf dem grünen Grund — vier Abstufungen von
   --kreide nach --tanne, per color-mix abgeleitet. Die Schrift darauf ist
   --tinte (5,3:1 bis 10,9:1). --zinnober markiert das aktive Segment.

   ZWEI GRÖSSEN, eine Geometrie:
     .kreis-figur              die volle Fassung (Startseite, Stufe "buehne")
     .kreis-figur.kreis-klein  die kleine Fassung für Themenfeld-Seiten
                               (Stufe "signatur") — hebt das eigene Segment
                               hervor und zeigt, wo man im Kreis steht.
   ========================================================================== */
#kreis { position: relative; isolation: isolate; }

/* Schmale Schirme: der Ring steht als eigener, breiter Block ÜBER den
   Stationen — nicht sticky. Ein 350-px-Ring als Dauerbalken über dem Text
   frässe die halbe Bildschirmhöhe weg. */
.kreis-feld { margin-bottom: clamp(30px, 5.4vw, 54px); }
/* max-width: none — marke.css deckelt jeden Absatz auf 62 Zeichen; ohne diese
   Zeile stünde die zentrierte Marginalie in einem zu schmalen Kasten und damit
   sichtbar links neben dem Ring. */
.kreis-marke  { margin: 0 0 16px; max-width: none; letter-spacing: 0.2em; text-align: center; }
.kreis-siegel { max-width: none; display: none; }
.kreis-figur  { width: min(100%, 480px); margin-inline: auto; }
.kreis-szenen { margin-top: clamp(20px, 3vw, 28px); }

.kreis-figur svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* Der Schlagschatten ist der billigste Teil des Volumens: er hebt den hellen
     Ring von der grünen Fläche ab. */
  filter: drop-shadow(0 12px 26px color-mix(in srgb, var(--tinte) 55%, transparent));
}

/* --- Der Ring ------------------------------------------------------------ */
.ring-bahn { fill: none; stroke: color-mix(in srgb, var(--kreide) 16%, transparent); stroke-width: 1; }

.seg-flaeche { stroke: none; }
.seg-a .seg-flaeche { fill: color-mix(in srgb, var(--kreide) 90%, var(--tanne)); }
.seg-b .seg-flaeche { fill: color-mix(in srgb, var(--kreide) 74%, var(--tanne)); }
.seg-c .seg-flaeche { fill: color-mix(in srgb, var(--kreide) 58%, var(--tanne)); }
.seg-d .seg-flaeche { fill: color-mix(in srgb, var(--kreide) 42%, var(--tanne)); }

/* Glanz aussen, Schattenlippe innen — das lässt das flache Band wie einen
   gewölbten Körper aussehen. Beides fest, nichts davon animiert. */
.seg-glanz { fill: none; stroke: color-mix(in srgb, var(--kreide) 46%, transparent); stroke-width: 7; }
.seg-lippe { fill: none; stroke: color-mix(in srgb, var(--tinte) 16%, transparent); stroke-width: 9; }

/* Das aktive Segment. Zwei Auflagen, die per OPACITY kommen — kein Farbwechsel
   auf dem Grundsegment, damit "nur transform und opacity" buchstäblich gilt. */
.seg-signal { fill: color-mix(in srgb, var(--zinnober) 34%, var(--kreide)); opacity: 0; transition: opacity 480ms var(--kurve); }
.seg-kante  { fill: none; stroke: var(--zinnober); stroke-width: 6; stroke-linejoin: round; opacity: 0; transition: opacity 480ms var(--kurve); }
.seg.aktiv .seg-signal, .seg.aktiv .seg-kante { opacity: 1; }

.seg-icon { fill: none; stroke: var(--tinte); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg-nr, .seg-titel { text-anchor: middle; font-family: var(--sans); }
.seg-nr {
  font-size: 13px; font-weight: 600; letter-spacing: 0.34em;
  font-variant-numeric: tabular-nums lining-nums;
  fill: color-mix(in srgb, var(--tinte) 72%, transparent);
}
.seg-titel {
  font-size: 20px; font-weight: 700; font-variation-settings: 'wght' 700;
  letter-spacing: 0.045em; fill: var(--tinte);
}

/* --- Die Mitte: der Betrieb ---------------------------------------------- */
.kreis-teilung  { fill: none; stroke: color-mix(in srgb, var(--kreide) 20%, transparent); stroke-width: 1; }
.mitte-scheibe  { fill: var(--tiefe); stroke: color-mix(in srgb, var(--kreide) 26%, transparent); stroke-width: 1.5; }
.mitte-klein    { text-anchor: middle; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.34em; fill: var(--kreide-matt); }
.mitte-gross    { text-anchor: middle; font-family: var(--sans); font-size: 26px; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: 0.02em; fill: var(--kreide); }
.mitte-strich   { stroke: var(--zinnober-hell); stroke-width: 2.5; }
.speiche        { stroke: color-mix(in srgb, var(--kreide) 34%, transparent); stroke-width: 1.6; }
.speiche-punkt  { fill: color-mix(in srgb, var(--kreide) 42%, transparent); }
.kreis-puls     { fill: none; stroke: var(--zinnober-hell); stroke-width: 3; opacity: 0;
                  transform-box: fill-box; transform-origin: 50% 50%; }

/* Auf schmalen Schirmen wird der Ring rund 330 px breit — dort wachsen
   Beschriftung und Nummer, damit sie in CSS-Pixeln gerechnet lesbar bleiben. */
@media (max-width: 699px) {
  .seg-titel { font-size: 22px; }
  .seg-nr    { font-size: 15px; letter-spacing: 0.28em; }
  .mitte-gross { font-size: 28px; }
  .mitte-klein { font-size: 13px; }
}

/* --- Legende / Szenenanzeige --------------------------------------------- */
.kreis-szenen { display: grid; gap: 10px; }
.kreis-szene { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.kreis-szene .pos { margin: 0; color: var(--zinnober-hell); }
.szene-titel {
  font-family: var(--sans);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 700; font-variation-settings: 'wght' 700;
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--kreide);
}

/* --- Die kleine Fassung für Themenfeld-Seiten ----------------------------- */
.kreis-klein-feld { width: min(100%, 320px); margin-inline: auto; }
.kreis-klein { width: min(100%, 300px); }
.kreis-klein svg { filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--tinte) 45%, transparent)); }
/* Die Beschriftung des Rings ist bei 300 px nicht mehr lesbar. Statt sie zu
   vergrössern (dann läuft sie über die Segmentkante hinaus) tragen Nummer und
   Titel unter der Figur — die Grafik zeigt die STELLUNG im Kreis, die
   Bildunterschrift den Namen. */
.kreis-klein .seg-titel { font-size: 24px; }
.kreis-klein .seg-nr    { font-size: 17px; letter-spacing: 0.24em; }
.kreis-klein .mitte-gross { font-size: 30px; }
.kreis-klein .mitte-klein { font-size: 14px; }
.kreis-stand { margin: 14px 0 0; max-width: none; text-align: center; }

/* --- Stationen (Startseite) ---------------------------------------------- */
/* padding-top gehört erst AB 920px hierher (siehe Media-Query weiter unten):
   dort steht .kreis-feld sticky und mittig auf Augenhöhe, und der Vorlauf
   schiebt die Strecke auf dieselbe Höhe ein. Unter 920px ist .kreis-feld nur
   die kleine klebende Etage-Leiste — ohne eigene Bühne, die einen Vorlauf
   bräuchte. Ein ungeschützter 4vh-Vorlauf hier riss auf dem Handy zusätzlich
   zum eigenen Randabstand von .kreis-feld eine leere Fläche zwischen Leiste
   und Achsenbild auf (Fund per Kontrast-Scan-Screenshot, 390 px). */
.station { padding-block: clamp(26px, 3.2vw, 46px); }
.station + .station,
.zwischenruf + .station { border-top: 1px solid var(--linie-dunkel); }
.station h3 {
  font-size: clamp(19px, 2.6vw, 30px);
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--kreide);
}
.station > p:not(.pos) { font-size: 16px; margin-bottom: 20px; }
.station-nr {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  font-variation-settings: 'opsz' 48, 'wght' 300;
  color: var(--zinnober-hell);
  display: block;
  margin-bottom: 6px;
}
.station .platzhalter, .station .bildfeld { margin-top: 22px; }

/* =============================================================================
   SACHGEBIETE — die Liste, die auf jeder Themenfeld-Seite wiederkommt
   ========================================================================== */
.sachgebiete .pos { margin-bottom: 8px; }
.sachgebiete ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  column-gap: 26px;
}
.sachgebiet {
  border-top: 1px solid var(--linie-hell);
  padding: 8px 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--tinte-matt);
  display: flex; align-items: center; gap: 10px;
}
/* Das Icon ersetzt den frueheren Punkt vor jedem Sachgebiet — Strichzeichnung
   in der Signalfarbe, damit die Kontozeile ihr rotes "Prüfvermerk"-Element
   behaelt, nur jetzt gegenstaendlich statt als reiner Punkt. */
.sachgebiet-icon {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  color: var(--zinnober);
}
.sachgebiet-icon svg { display: block; width: 100%; height: 100%; }
.sachgebiet-text { flex: 1; min-width: 0; }

.fl-tanne .sachgebiet, .fl-tiefe .sachgebiet, .fl-tinte .sachgebiet {
  border-top-color: var(--linie-dunkel);
  color: var(--kreide-matt);
}
.fl-tanne .sachgebiet-icon, .fl-tiefe .sachgebiet-icon,
.fl-tinte .sachgebiet-icon { color: var(--zinnober-hell); }

/* =============================================================================
   MERKSATZ / ZWISCHENRUF — der hervorgehobene Satz zwischen zwei Blöcken
   ========================================================================== */
.zwischenruf {
  margin: 0;
  padding: clamp(30px, 3.6vw, 52px) 0 0;
  border-top: 1px solid var(--linie-hell);
}
.fl-tanne .zwischenruf, .fl-tiefe .zwischenruf,
.fl-tinte .zwischenruf { border-top-color: var(--linie-dunkel); }
.zwischenruf blockquote {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 31px);
  line-height: 1.22;
  font-style: italic;
  font-variation-settings: 'opsz' 32, 'wght' 400;
  text-indent: -.42em;
  max-width: 24ch;
}
.fl-tanne .zwischenruf blockquote, .fl-tiefe .zwischenruf blockquote,
.fl-tinte .zwischenruf blockquote { color: var(--kreide); }
.zwischenruf figcaption { margin: 0; }

/* =============================================================================
   ZAHLENBAND UND BILANZ
   ========================================================================== */
.zahlenband { display: grid; gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(28px, 3.4vw, 44px); }
@media (min-width: 620px) { .zahlenband { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zahlkachel { border-top: 2px solid var(--zinnober); padding-top: 16px; }
.fl-tanne .zahlkachel, .fl-tiefe .zahlkachel, .fl-tinte .zahlkachel { border-top-color: var(--zinnober-hell); }
.zahlkachel .gross {
  display: block;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(52px, 7.4vw, 96px);
  line-height: .95;
  font-variation-settings: 'opsz' 60, 'wght' 300;
  color: var(--tanne);
  margin-bottom: 8px;
}
.fl-tanne .zahlkachel .gross, .fl-tiefe .zahlkachel .gross,
.fl-tinte .zahlkachel .gross { color: var(--kreide); }
.zahlkachel p { margin: 0; font-size: 14.5px; }

.bilanz { list-style: none; margin: clamp(28px,3.4vw,44px) 0 0; padding: 0; }
.bilanz .zeile { padding: 14px 0; }
.bilanz .zeile-wert { color: var(--zinnober); }
.fl-tanne .bilanz .zeile-wert, .fl-tiefe .bilanz .zeile-wert,
.fl-tinte .bilanz .zeile-wert { color: var(--zinnober-hell); }

.satz {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.14;
  font-variation-settings: 'opsz' 40, 'wght' 400;
  max-width: 22ch;
}

/* =============================================================================
   ABLAUF — nummerierte Schritte an einer wachsenden Linie
   ========================================================================== */
.ablauf { position: relative; margin-top: clamp(30px, 3.6vw, 48px); }
.ablauf-spur {
  position: absolute; left: 13px; top: 12px; bottom: 12px; width: 2px;
  background: var(--linie-hell);
}
.fl-tanne .ablauf-spur, .fl-tiefe .ablauf-spur,
.fl-tinte .ablauf-spur { background: var(--linie-dunkel); }
.ablauf-spur i {
  position: absolute; inset: 0; display: block;
  background: var(--zinnober);
  transform: scaleY(1);          /* ohne JavaScript: voll */
  transform-origin: top;
}
.fl-tanne .ablauf-spur i, .fl-tiefe .ablauf-spur i,
.fl-tinte .ablauf-spur i { background: var(--zinnober-hell); }
.schritt {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 22px;
  padding-bottom: clamp(24px, 2.6vw, 36px);
}
.schritt:last-child { padding-bottom: 0; }
.schritt-marke {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blatt);
  border: 2px solid var(--zinnober);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-variation-settings: 'wght' 700;
  color: var(--zinnober);
  font-variant-numeric: tabular-nums lining-nums;
}
.fl-tanne .schritt-marke, .fl-tiefe .schritt-marke, .fl-tinte .schritt-marke {
  background: var(--tiefe);
  border-color: var(--zinnober-hell);
  color: var(--zinnober-hell);
}
.schritt-koerper h3 { margin-bottom: 8px; }

/* Das Bild je Schritt ist bewusst KLEIN und im Hochkant-nahen Format: ein
   16:9-Bild über die halbe Seitenbreite riss zwischen Text und Bild ein Loch
   von 400 px auf. Hier hält die Zeile die Höhe des Textes. */
.schritt-bild { margin-top: 18px; aspect-ratio: 3 / 2; }
/* Komplettprüfung 01.10.2026 (K8): Ohne Spaltenangabe landete das Bild unter
   760 px in der 28-px-Spalte der Nummer — 57 px breite Streifen. */
.schritt-bild { grid-column: 2; }
@media (min-width: 760px) {
  .schritt {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 240px);
    column-gap: 34px;
    align-items: start;
  }
  .schritt-koerper p { max-width: 52ch; }
  .schritt-bild { grid-column: 3; grid-row: 1; margin-top: 0; }
}

/* =============================================================================
   PERSON
   ========================================================================== */
.person-raster { display: grid; gap: clamp(26px, 3.4vw, 48px); align-items: center; }
@media (min-width: 820px) { .person-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.person-raster > * { min-width: 0; }
.person-fakten { list-style: none; margin: 26px 0 0; padding: 0; }
.person-fakten .zeile { padding: 12px 0; }

/* =============================================================================
   HÄUFIGE FRAGEN
   =============================================================================
   Die Klassennamen kommen aus faq_block() (.faq, .faq__eintrag, .faq__antwort).
   Der Baustein setzt zusätzlich die Namen aus dem Prototyp (.fragen, .frage,
   .frage-text), damit dieselbe Gestalt für beide Schreibweisen gilt.
   ========================================================================== */
.faq, .fragen { margin-top: clamp(26px, 3.2vw, 42px); border-top: 1px solid var(--linie-hell); }
.faq h2 { margin-bottom: clamp(14px, 1.8vw, 24px); padding-top: clamp(20px, 2.4vw, 30px); }
.fl-tanne .faq, .fl-tiefe .faq, .fl-tinte .faq,
.fl-tanne .fragen, .fl-tiefe .fragen, .fl-tinte .fragen { border-top-color: var(--linie-dunkel); }

.faq__eintrag, .frage { border-bottom: 1px solid var(--linie-hell); padding: 0; }
.fl-tanne .faq__eintrag, .fl-tiefe .faq__eintrag, .fl-tinte .faq__eintrag,
.fl-tanne .frage, .fl-tiefe .frage, .fl-tinte .frage { border-bottom-color: var(--linie-dunkel); }

.faq__eintrag summary, .frage summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.7vw, 18.5px);
  font-weight: 600; font-variation-settings: 'wght' 600;
  text-transform: uppercase; letter-spacing: 0.01em;
  line-height: 1.25;
}
.faq__eintrag summary::-webkit-details-marker,
.frage summary::-webkit-details-marker { display: none; }
.faq__eintrag summary::after, .frage summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-size: 24px; line-height: 1;
  color: var(--zinnober);
  transition: transform 280ms var(--kurve);
}
.fl-tanne .faq__eintrag summary::after, .fl-tiefe .faq__eintrag summary::after,
.fl-tinte .faq__eintrag summary::after,
.fl-tanne .frage summary::after, .fl-tiefe .frage summary::after,
.fl-tinte .frage summary::after { color: var(--zinnober-hell); }
.faq__eintrag[open] summary::after, .frage[open] summary::after { transform: rotate(45deg); }
.faq__antwort, .frage-text { padding: 0 0 22px; max-width: 66ch; }
.faq__antwort p, .frage-text p { font-size: 15.5px; }

/* -----------------------------------------------------------------------------
   DIE FACHTIEFE HINTER EINEM AUFKLAPPER  (mehr_dazu())

   Erbt die Mechanik der FAQ — dieselbe .frage/.frage-text-Schreibweise, also
   auch dasselbe Plus-Zeichen und dieselbe Drehung beim Oeffnen. Sie sitzt aber
   INNERHALB eines Loesungsbausteins und muss deshalb leiser sein als ein
   eigener Abschnitt: keine Versalien, kleiner gesetzt, oben nur eine feine
   Linie statt eines Rahmens.
   -------------------------------------------------------------------------- */
/* UMGEBAUT 30.09.2026 (Variante B): der Baustein hat keine helle Insel mehr,
   er steht direkt auf Tanne. Die frühere Sonderregel (--zinnober-dunkel für
   die helle Insel) wäre hier dunkel auf dunkel — deshalb Kreide für die
   Zeile, das "+" in --zinnober-hell (4,7:1 auf Tanne). Oben eine gepunktete
   Linie: der Aufklapper ist der Beleg zum Posten, kein eigener Abschnitt. */
.loesung .tiefe { margin-top: 26px; border-top: 1px dotted var(--kreide-matt); border-bottom: 0; }
.loesung .tiefe summary {
  padding: 14px 0;
  font-size: clamp(13.5px, 1.4vw, 15px);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500; font-variation-settings: 'wght' 500;
}
.fl-tanne .loesung .tiefe summary, .fl-tiefe .loesung .tiefe summary { color: var(--kreide-matt); }
.fl-tanne .loesung .tiefe summary::after, .fl-tiefe .loesung .tiefe summary::after { color: var(--zinnober-hell); }
.loesung .tiefe summary::after { font-size: 19px; }

.loesung .tiefe-text { padding: 0 0 16px; }
.loesung .tiefe-text p { font-size: 15px; }
.loesung .tiefe-text p + p { margin-top: 12px; }

/* =============================================================================
   ABSCHLUSS, FORMULAR UND FUSSZEILE
   ========================================================================== */
.abschluss { position: relative; isolation: isolate; overflow: hidden; }
.abschluss-grund {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 120% at 50% 0%,
      color-mix(in srgb, var(--zinnober) 22%, transparent),
      transparent 62%);
}
.kontaktband { display: grid; gap: 22px; margin-top: clamp(30px, 3.6vw, 46px); }
@media (min-width: 720px) { .kontaktband { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kontaktband .pos { color: var(--zinnober-hell); margin-bottom: 6px; }
.kontaktband a { text-decoration: none; font-size: 17px; }

/* Honigtopf: unsichtbar für Menschen, aber nicht per display:none — manche
   Bots erkennen das und lassen das Feld dann leer. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.erstgespraech h2 { margin-bottom: clamp(12px, 1.4vw, 18px); }
.erstgespraech > p { max-width: 46ch; }

/* Feld und Beschriftung stehen untereinander — aber über die Beschriftung,
   NICHT über die Absätze: ein flex-Absatz zerlegte den Datenschutzhinweis in
   drei Zeilen ("Näheres in der" / Link / "."), weil jedes Kind eines
   flex-Containers eine eigene Zeile bekommt. */
.formular p { max-width: 28rem; margin: 0 0 18px; }
.formular label {
  display: block; margin-bottom: 6px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.formular input, .formular select { width: 100%; }
.formular input, .formular select {
  font-family: var(--sans); font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--linie-ui);
  background: var(--blatt);
  color: var(--tinte);
  border-radius: 2px;
}
.formular button {
  align-self: flex-start;
  font-family: var(--sans);
  background: var(--zinnober); color: var(--kreide);
  border: none; border-radius: 2px; cursor: pointer;
  padding: 15px 28px;
  font-size: 13.5px; font-weight: 600; font-variation-settings: 'wght' 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: background 200ms var(--kurve);
}
.formular button:hover { background: color-mix(in srgb, var(--zinnober) 80%, var(--tinte)); }
.formular__hinweis { font-size: 13px; color: var(--tinte-matt); max-width: 46ch; }
.fl-tanne .formular__hinweis, .fl-tiefe .formular__hinweis,
.fl-tinte .formular__hinweis { color: var(--kreide-matt); }

.krumen ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 clamp(18px, 2vw, 28px); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.krumen li + li::before { content: "\203A"; margin-right: .5rem; }
.krumen a { text-decoration: none; }
.autorenzeile { font-size: 13px; color: var(--tinte-matt); }
.fl-tanne .autorenzeile, .fl-tiefe .autorenzeile, .fl-tinte .autorenzeile { color: var(--kreide-matt); }
.video video { width: 100%; height: auto; }

.fussleiste { padding-block: clamp(40px, 4.6vw, 64px); }
.fussleiste-raster { display: grid; gap: 26px; }
@media (min-width: 760px) { .fussleiste-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.fussleiste-raster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.fussleiste-raster h3 { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 12px; color: var(--kreide-matt); }
/* Zweite Überschrift in derselben Spalte („Direkt zu" unter dem Weg durch den
   Betrieb) — sonst klebt sie an der Liste darüber und liest sich als deren
   letzter Eintrag. */
.fussleiste-raster nav + h3 { margin-top: 24px; }
.fussleiste-marke {
  display: block; margin-bottom: 12px;
  font-size: 15.5px; font-weight: 700; font-variation-settings: 'wght' 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  max-width: none;
}
.fussleiste-marke span { color: var(--zinnober-hell); }
.fussleiste-hinweis {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--linie-dunkel);
}
/* Platz für den schwebenden Rufknopf, damit er die letzte Zeile nicht deckt. */
.fussleiste-hinweis .klein { max-width: 62ch; padding-right: 150px; }
@media (max-width: 520px) { .fussleiste-hinweis .klein { padding-right: 0; padding-bottom: 56px; } }

/* =============================================================================
   ZEILENWEISER AUFBAU VON ÜBERSCHRIFTEN
   =============================================================================
   Jede Zeile steht in einem eigenen Fenster und fährt von unten herein.
   Zeilenhöhe 1.06em, Zugabe oben/unten, dann wieder herausgenommen — damit der
   Zeilenabstand exakt bleibt und Unterlängen sichtbar sind.
   Abgesichert: ohne JavaScript setzt ".no-js .reveal" (marke.css) die
   Verschiebung auf none; bei reduzierter Bewegung gewinnt die
   !important-Regel aus marke.css.
   ========================================================================== */
.zeilenmaske { display: block; overflow: hidden; padding: .08em 0 .18em; margin-bottom: -.26em; }
.zeilenmaske:last-child { margin-bottom: -.18em; }
.zeilenauf { display: block; transform: translateY(120%); }

/* =============================================================================
   AB 920 PX — DER RING BEKOMMT DIE HALBE SEITE
   =============================================================================
   In der dritten Fassung stand er in einer 20-rem-Spalte, also auf rund einem
   Viertel der Breite. Das war der Grund, warum er beiläufig wirkte. Jetzt teilt
   er sich die Fläche hälftig mit den Stationen, bleibt beim Scrollen stehen und
   steht mittig im Bild.
   ========================================================================== */
@media (min-width: 920px) {
  .kreis-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 0 clamp(30px, 3.6vw, 58px);
  }
  .kreis-feld {
    position: sticky;
    top: calc(var(--kopf) + 2vh);
    align-self: start;
    z-index: 2;
    /* Der Ring soll auf Augenhöhe stehen, nicht am oberen Rand kleben. */
    min-height: calc(100vh - var(--kopf) - 4vh);
    display: grid;
    align-content: center;
    margin: 0;
    padding: 0;
  }
  .kreis-marke  { margin: 0 0 clamp(14px, 1.6vw, 22px); text-align: center; }
  /* 64vh deckelt die Höhe: der ganze Block — Zeile, Ring, Legende, Siegel —
     muss in ein Fenster passen, sonst hakt position: sticky. */
  .kreis-figur  { width: 100%; max-width: min(100%, 64vh); }
  .kreis-klein  { width: min(100%, 300px); max-width: min(100%, 300px); }
  .kreis-szenen { margin-top: clamp(18px, 2vw, 26px); justify-items: center; }
  .kreis-szene  { justify-content: center; }
  .kreis-siegel { display: block; margin: 12px 0 0; text-align: center; color: var(--zinnober-hell); }

  .stationen {
    border-left: 1px solid var(--linie-dunkel);
    padding-left: clamp(30px, 3.6vw, 58px);
    padding-top: 10vh;
  }
  /* Mehr Weg je Station: der Aufbau eines Segments braucht Strecke, sonst
     springt der Ring in vier Sprüngen statt zu wachsen. */
  .station { min-height: 44vh; }
}

/* Ab 1240 px darf der Kreis-Abschnitt aus dem 1180-px-Raster ausbrechen. Er ist
   das Leitmotiv der Marke — er verträgt mehr Fläche als ein Textabschnitt. */
@media (min-width: 1240px) {
  #kreis > .kreis-raster { max-width: 1320px; }
}

/* =============================================================================
   STARTZUSTÄNDE DER CHOREOGRAFIE
   =============================================================================
   Alles hier hängt an .has-js UND an "Bewegung erwünscht". Die Klasse has-js
   setzt animation.js SELBST als erste Anweisung — sie ist damit der Beweis,
   dass die Datei läuft, nicht das Versprechen eines Inline-Skripts.
   Ohne JavaScript greift keine dieser Regeln: Kreis vollständig, Balken voll,
   alle vier Szenen untereinander lesbar, Zahlen stehen als Endwert im Text.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Der Ring baut sich auf: Segmente leer, Beschriftungen leer, Speichen leer,
     Mitte leer. Alles nur opacity — kein Element wird versetzt eingehängt,
     deshalb kann beim Laden nichts springen. */
  .has-js .kreis-figur .seg        { opacity: 0; }
  .has-js .kreis-figur .seg-marke  { opacity: 0; }
  .has-js .kreis-figur .speiche-gr { opacity: 0; transition: opacity 540ms var(--kurve); }
  .has-js .kreis-figur .speiche-gr.gesetzt { opacity: 1; }
  .has-js .kreis-mitte             { opacity: 0; }

  /* Legende: ab 920 px liegen die vier Zeilen übereinander und wechseln mit der
     gelesenen Station. Darunter stehen sie als Liste — dort ist der Ring längst
     fertig, wenn man zu lesen anfängt. */
  @media (min-width: 920px) {
    .has-js .kreis-szenen { display: grid; }
    .has-js .kreis-szene {
      grid-area: 1 / 1;
      opacity: 0; transform: translateY(7px);
      transition: opacity 400ms var(--kurve), transform 400ms var(--kurve);
    }
    .has-js .kreis-szene.aktiv { opacity: 1; transform: none; }
    .has-js .kreis-szenen.szenen-frei { display: grid; }
    .has-js .szenen-frei .kreis-szene { grid-area: auto; opacity: 1; transform: none; }
  }

  .has-js .kreis-siegel { opacity: 0; transition: opacity 520ms var(--kurve); }
  .has-js .geschlossen .kreis-siegel { opacity: 1; }

  /* DER MOMENT DES KREISSCHLUSSES: zwei Ringe laufen aus dem Band heraus, die
     ganze Figur atmet einmal. Beides rein transform + opacity. */
  .has-js .geschlossen .kreis-puls  { animation: puls 1000ms var(--kurve) forwards; }
  .has-js .geschlossen .kreis-puls-innen { animation: puls-innen 1000ms var(--kurve) 160ms forwards; }
  .has-js .geschlossen .kreis-figur { animation: schub 820ms var(--kurve); }

  /* Die Fortschrittslinie des Ablaufs startet leer. */
  .has-js [data-fortschritt] { transform: scaleY(0); }

  /* ---------------------------------------------------------------------------
     STUFE "SIGNATUR" — der markante Moment im Kopfbereich
     ---------------------------------------------------------------------------
     Der kleine Kreis setzt sich einmal zusammen: die vier Segmente drehen aus
     13 Grad Rückstand auf ihren Platz (dieselbe Richtung, die die Pfeilspitze
     behauptet), Beschriftung und Mitte kommen nach, zuletzt leuchtet das eigene
     Segment auf. Rein CSS-Übergänge, ausgelöst durch die Klasse .kreis-an — die
     Stufe braucht deshalb KEIN GSAP und funktioniert auch dann, wenn die
     Bibliothek fehlt.
     ------------------------------------------------------------------------ */
  .has-js .kreis-klein .seg {
    transform-box: view-box;
    transform-origin: 220px 220px;
    transform: rotate(-13deg);
    transition: opacity 620ms var(--kurve), transform 720ms var(--kurve);
  }
  .has-js .kreis-klein .seg-marke { transition: opacity 520ms var(--kurve); }
  .has-js .kreis-klein .kreis-mitte {
    transform-box: view-box;
    transform-origin: 220px 220px;
    transform: scale(.9);
    transition: opacity 560ms var(--kurve) 380ms, transform 560ms var(--kurve) 380ms;
  }
  .has-js .kreis-klein.kreis-an .seg        { opacity: 1; transform: none; }
  .has-js .kreis-klein.kreis-an .seg-marke  { opacity: 1; }
  .has-js .kreis-klein.kreis-an .speiche-gr { opacity: 1; }
  .has-js .kreis-klein.kreis-an .kreis-mitte { opacity: 1; transform: none; }
  /* Versatz je Segment — der Ring baut sich im Uhrzeigersinn auf. */
  .has-js .kreis-klein .seg-a { transition-delay:   0ms; }
  .has-js .kreis-klein .seg-b { transition-delay:  90ms; }
  .has-js .kreis-klein .seg-c { transition-delay: 180ms; }
  .has-js .kreis-klein .seg-d { transition-delay: 270ms; }
  .has-js .kreis-klein .seg-a .seg-marke { transition-delay: 280ms; }
  .has-js .kreis-klein .seg-b .seg-marke { transition-delay: 370ms; }
  .has-js .kreis-klein .seg-c .seg-marke { transition-delay: 460ms; }
  .has-js .kreis-klein .seg-d .seg-marke { transition-delay: 550ms; }
  .has-js .kreis-klein .speiche-gr { transition-delay: 520ms; }
  /* Das eigene Segment leuchtet zuletzt auf — das ist der Moment. */
  .has-js .kreis-klein .seg-signal,
  .has-js .kreis-klein .seg-kante { transition-delay: 760ms; }
  .has-js .kreis-klein.kreis-an .kreis-puls { animation: puls 1100ms var(--kurve) 700ms forwards; }
}

@keyframes puls {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.09); }
}
@keyframes puls-innen {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(0.82); }
}
@keyframes schub {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* =============================================================================
   THEMENFELD-SEITEN — KREIS MIT EINORDNUNG, ABRAT-HINWEIS, QUERVERWEISE
   =============================================================================
   Ergänzung zum Design-Transfer vom 13.08.2026: Diese drei Muster kannte der
   Prototyp noch nicht, weil er nur die Startseite zeigte. Sie entstehen mit
   der ersten Themenfeld-Seite (/vorsorge/). Alle Werte kommen ausschliesslich
   aus den Variablen dieser Datei bzw. aus marke.css.
   ========================================================================== */

/* Kleiner Kreis und Einordnungstext nebeneinander, sobald Platz ist. Der Kreis
   behält seine feste Breite (.kreis-klein-feld), der Text nimmt den Rest. */
.kreis-einordnung {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 760px) {
  .kreis-einordnung { grid-template-columns: minmax(240px, 320px) 1fr; }
}
.kreis-einordnung-text > * + * { margin-top: 16px; }

/* Der Hinweis, in dem Jochen von einer Lösung abrät — deutlich hervorgehoben
   durch eine Signalkante links, wie ein Prüfvermerk am Rand. */
.abrat {
  border-left: 4px solid var(--zinnober);
  padding-left: clamp(20px, 2.6vw, 32px);
}
.fl-tanne .abrat, .fl-tiefe .abrat, .fl-tinte .abrat { border-left-color: var(--zinnober-hell); }
.abrat > * + * { margin-top: 16px; }
.abrat .satz { margin-bottom: 0; }

/* Querverweis-Karten: dieselbe Kachel wie .karte (siehe KARTEN weiter oben),
   nur als Link. Ein <a> ist inline — display:block macht daraus wieder eine
   Kachel, ohne dass die .karte-Regeln selbst angefasst werden müssen. */
a.karte { display: block; text-decoration: none; }
a.karte:hover h3 { color: var(--zinnober); }
.fl-tanne a.karte:hover h3, .fl-tiefe a.karte:hover h3,
.fl-tinte a.karte:hover h3 { color: var(--zinnober-hell); }

/* =============================================================================
   DIE FÜNF STUFEN — BAND UND ÜBERLEITUNGSSATZ
   =============================================================================
   Umbau vom 13.08.2026: aus vier gleichrangigen Bereichen wurde eine Abfolge.
   Das Band ist die kleine Fassung dieser Abfolge auf jeder Stufen-Seite — es
   ersetzt dort die kleine Rundgang-Figur, deren vier Segmente die Geschichte
   jetzt nicht mehr abbilden könnten.

   Kein einziger fester Farbwert: alles kommt aus marke.css. Die Linie, an der
   die Halte hängen, ist dieselbe Kontolinie wie überall auf der Seite.
   ========================================================================== */

.stufenband { margin: clamp(20px, 3vw, 32px) 0 0; }
.stufenband ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
/* Ab genug Breite legen sich die Halte nebeneinander an eine gemeinsame Linie —
   erst dort liest sich das Band als Weg statt als Liste. */
@media (min-width: 720px) {
  .stufenband ol {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    border-top: var(--achse) solid var(--linie-hell);
  }
  .fl-tanne .stufenband ol,
  .fl-tiefe .stufenband ol,
  .fl-tinte .stufenband ol { border-top-color: var(--linie-dunkel); }
}

.stufe-halt { position: relative; }
.stufe-halt > a,
.stufe-halt > span,
.stufe-halt { display: block; }
.stufe-halt > a {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Der Innenraum eines Haltes — gleich, ob Link oder aktueller Halt. */
.stufe-halt > a,
.stufe-halt.jetzt {
  padding: 12px 14px 12px 0;
}
@media (min-width: 720px) {
  .stufe-halt > a,
  .stufe-halt.jetzt { padding: 14px 16px 16px 0; }
}

/* Die Marke am oberen Rand: der zurückgelegte Teil des Weges ist gefüllt,
   der aktuelle Halt trägt die Signalfarbe. Ein Rechteck statt eines Punktes,
   weil die Linie darüber ebenfalls gerade ist. */
@media (min-width: 720px) {
  .stufe-halt::before {
    content: "";
    position: absolute;
    top: calc(var(--achse) * -1);
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
  }
  .stufe-halt.jetzt::before { background: var(--zinnober); }
  .fl-tanne .stufe-halt.jetzt::before,
  .fl-tiefe .stufe-halt.jetzt::before,
  .fl-tinte .stufe-halt.jetzt::before { background: var(--zinnober-hell); }
}

.stufe-nr {
  display: block;
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  color: var(--tinte-matt);
}
.fl-tanne .stufe-nr, .fl-tiefe .stufe-nr, .fl-tinte .stufe-nr { color: var(--kreide-matt); }

.stufe-name {
  display: block;
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--tinte-matt);
}
.fl-tanne .stufe-name, .fl-tiefe .stufe-name, .fl-tinte .stufe-name { color: var(--kreide-matt); }

/* Der eigene Halt steht in der vollen Textfarbe — er ist der einzige, der
   nicht angeklickt werden kann, und muss trotzdem der lauteste sein. */
.stufe-halt.jetzt .stufe-nr,
.stufe-halt.jetzt .stufe-name { color: var(--tinte); font-weight: 600; }
.fl-tanne .stufe-halt.jetzt .stufe-nr, .fl-tiefe .stufe-halt.jetzt .stufe-nr,
.fl-tinte .stufe-halt.jetzt .stufe-nr,
.fl-tanne .stufe-halt.jetzt .stufe-name, .fl-tiefe .stufe-halt.jetzt .stufe-name,
.fl-tinte .stufe-halt.jetzt .stufe-name { color: var(--kreide); }

.stufe-halt > a:hover .stufe-name,
.stufe-halt > a:focus-visible .stufe-name { color: var(--zinnober); }
.fl-tanne .stufe-halt > a:hover .stufe-name, .fl-tiefe .stufe-halt > a:hover .stufe-name,
.fl-tinte .stufe-halt > a:hover .stufe-name,
.fl-tanne .stufe-halt > a:focus-visible .stufe-name,
.fl-tiefe .stufe-halt > a:focus-visible .stufe-name,
.fl-tinte .stufe-halt > a:focus-visible .stufe-name { color: var(--zinnober-hell); }

/* Der Überleitungssatz: der eine Satz, der diese Stufe aus der vorigen
   begründet. Serifenschrift und eine Signalkante links — dieselbe Kante wie
   beim Abrat-Hinweis, weil beides Randbemerkungen der Seite an sich selbst
   sind und nicht Fliesstext. */
.ueberleitung {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 3px solid var(--zinnober);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);
  line-height: 1.35;
  max-width: 24ch;
  color: var(--tinte);
}
.fl-tanne .ueberleitung, .fl-tiefe .ueberleitung, .fl-tinte .ueberleitung {
  border-left-color: var(--zinnober-hell);
  color: var(--kreide);
}

/* Die Karte, die auf die nächste Stufe zeigt. Dieselbe Kachel wie überall,
   nur breiter gesetzt: sie ist ein Weiterweg, keine Auswahl unter mehreren. */
.weiter-karte { max-width: 40rem; }
.weiter-karte .weiter-satz {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--zinnober);
}
/* NACHGEBESSERT 25.09.2026 (Haus-System /inhaber/, Kontrast-Scan): --zinnober-hell
   war am 26.08.2026 auf 4,7:1 gegen die REINE Tanne-Fläche nachgerechnet
   worden. Seither hat .fl-tanne .karte (24.09.2026, Haus-System) eine eigene,
   aufgehellte Kartenfläche bekommen (color-mix mit 7% Kreide, ≈ rgb(58,74,72))
   — dagegen liegt --zinnober-hell nur noch bei 3,82:1, unter AA. Der
   normale .karte-p-Text ist an der .karte-Wurzel selbst nachgezogen (siehe
   dort) — hier bleibt nur der Sonderfall .weiter-satz (eigene Klasse, eigene
   Größe). */
.fl-tanne .weiter-karte .weiter-satz, .fl-tiefe .weiter-karte .weiter-satz,
.fl-tinte .weiter-karte .weiter-satz { color: #F5AE94; } /* 5,0:1 auf der aufgehellten Kartenfläche */

/* =============================================================================
   DAS HAUS — DAS BILDMOTIV DER STARTSEITE (ab 13.08.2026)
   =============================================================================
   Übernommen aus dem gewählten Wegwerf-Entwurf
   prototyp/grafik-varianten/variante-3-fundament.html. Begründung der Auswahl:
   .superpowers/sdd/2026-08-13-firmenkunden-website-fundament/grafik-varianten.md

   Raster, Klebrigkeit und Stationsspalte sind dieselben wie beim Rundgang
   (.kreis-raster / .kreis-feld / .stationen, oben) — hier stehen nur die
   Farben der Figur, die Legende und die Startzustände der Choreografie.

   HELLIGKEIT TRÄGT BEDEUTUNG: Das Fundament ist der hellste Baustein (das
   Wichtigste, nicht ersetzbar), das Dach der dunkelste (ersetzbar). Wer das
   Bild sieht, versteht die Reihenfolge, ohne eine Zeile zu lesen.
   Kein fester Farbwert — alle Töne kommen aus marke.css, Zwischenstufen per
   color-mix.
   ========================================================================== */
.hs-fundament { fill: color-mix(in srgb, var(--kreide) 92%, var(--tanne)); }
.hs-geschoss  { fill: color-mix(in srgb, var(--kreide) 74%, var(--tanne)); }
.hs-dach      { fill: color-mix(in srgb, var(--kreide) 46%, var(--tanne)); }

/* NACHGEBESSERT 25.09.2026 (Haus-System /haftung/, Kontrast-Scan): Etage 3
   ("Ansprüche von aussen") ist keine Raumfläche wie die drei übrigen Etagen
   — sie hat deshalb bewusst keinen Platz in der Helligkeits-Bedeutungsskala
   oben. Trägt sie Steine (nur auf /haftung/ und in der vollen Etage), sitzen
   diese trotzdem auf .stein/.stein-symbol in Tinte/Tinte-matt (siehe dort) —
   ohne eigene helle Unterlage verschwinden sie auf der Tanne-Fläche der
   Stufenseite. Derselbe Farbwert wie .hs-geschoss: kein neuer Ton, nur eine
   weitere helle Insel. */
.hs-pfeilflaeche { fill: color-mix(in srgb, var(--kreide) 74%, var(--tanne)); }

/* NACHGEBESSERT 25.09.2026 (Haus-System /sachwerte/, Kontrast-Scan): .hs-dach
   selbst (46% Kreide) reicht als Unterlage nur fuer den GESETZTEN Stein
   (Fill --tanne, ~3,4:1) — der Umriss-Zustand vor dem Setzen (Strich in
   --tinte-matt, Symbol ebenso, siehe .stein/.stein-symbol) kam gegen .hs-dach
   nur auf 2,14:1 statt der geforderten 3:1 fuer Grafik (Scan /sachwerte/,
   25.09.2026 — der erste Fall, in dem Etage 4 echte Bausteine traegt).
   Gleiche Reparatur wie bei .hs-pfeilflaeche fuer Etage 3: eine
   helle Insel NUR unter der Steinreihe, nicht unter dem ganzen Dach — sonst
   aendert sich die Dachfarbe auch dort, wo Etage 4 nur als Kontext ohne
   eigene Steine steht (Startseite, die anderen drei Stufenseiten). Derselbe
   Farbwert wie .hs-geschoss/.hs-pfeilflaeche: 3,88:1 fuer den Umriss-Zustand,
   6,2:1 fuer den gesetzten Stein gegen diese Flaeche. */
.hs-dachflaeche { fill: color-mix(in srgb, var(--kreide) 74%, var(--tanne)); }

.hs-grund     { stroke: color-mix(in srgb, var(--kreide) 55%, transparent); stroke-width: 2.5; }
.hs-schraffur { stroke: color-mix(in srgb, var(--kreide) 26%, transparent); stroke-width: 1.3; }

.hs-nr {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.3em; font-variant-numeric: tabular-nums lining-nums;
  fill: color-mix(in srgb, var(--tinte) 72%, transparent);
}
.hs-titel {
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  font-variation-settings: 'wght' 700; letter-spacing: 0.05em;
  fill: var(--tinte);
}
.hs-titel-mitte { text-anchor: middle; font-size: 13.5px; }
.hs-icon { fill: none; stroke: var(--tinte); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hs-tuer {
  fill: color-mix(in srgb, var(--tinte) 18%, transparent);
  stroke: color-mix(in srgb, var(--tinte) 55%, transparent); stroke-width: 1.6;
}

/* Die Randnotizen sind die Pointe des Bildes und stehen deshalb in der
   Handschrift der Marke (Serife, kursiv) — sie kommentieren die Zeichnung,
   sie beschriften sie nicht. */
.hs-notiz { font-family: var(--serif); font-style: italic; font-size: 12.5px; fill: var(--kreide-matt); }

/* Stufe 03 ist kein Baustein, sondern eine Kraft: drei Pfeile, die gegen die
   Wand drücken. Sie stehen auf der grünen Fläche, nicht auf einem Baustein —
   deshalb hell. */
.hs-pfeil { fill: none; stroke: color-mix(in srgb, var(--kreide) 80%, transparent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hs-pfeil-wort {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; fill: var(--kreide-matt); text-anchor: end;
}
.hs-tag {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  font-variation-settings: 'wght' 700; letter-spacing: 0.06em;
  fill: var(--kreide); text-anchor: end;
}
.hs-tag-links { text-anchor: start; }

/* Stufe 05: der gestrichelte Weg von der Tür zum Nachfolger — der Ausgang aus
   dem Bild. */
.hs-weg        { fill: none; stroke: color-mix(in srgb, var(--kreide) 75%, transparent); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.hs-weg-spitze { fill: none; stroke: color-mix(in srgb, var(--kreide) 75%, transparent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hs-icon-hell  { fill: none; stroke: var(--kreide); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Der Prüfvermerk in der Signalfarbe markiert die gerade gelesene Stufe.
   Nur opacity — er liegt deckungsgleich über der Figur und verschiebt nichts. */
.hs-kante      { fill: none; stroke: var(--zinnober); stroke-width: 5; stroke-linejoin: round; opacity: 0; transition: opacity 480ms var(--kurve); }
.hs-kante-hell { fill: none; stroke: var(--zinnober-hell); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 480ms var(--kurve); }
.haus-figur [data-teil].aktiv .hs-kante,
.haus-figur [data-teil].aktiv .hs-kante-hell { opacity: 1; }

/* --- Die Legende unter der Figur ------------------------------------------
   Nummer und Kurzname kommen aus dem Seitenregister (haus() in bausteine.php).
   Der Strich links markiert die gerade gelesene Stufe. */
.legende { list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; display: grid; gap: 7px; }
.legende li { display: flex; align-items: baseline; gap: 10px; }
.legende .mark {
  flex: none; width: 14px; height: 2px; background: var(--zinnober-hell);
  opacity: 0; transform: translateY(-4px); transition: opacity 300ms var(--kurve);
}
.legende li.aktiv .mark { opacity: 1; }
.legende .pos { margin: 0; color: var(--zinnober-hell); }
.legende .t {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  font-variation-settings: 'wght' 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--kreide);
}
@media (min-width: 920px) {
  .legende { justify-content: center; justify-items: start; width: max-content; margin-inline: auto; }
}

/* Der Überleitungssatz steht auf den Stufen-Seiten in einer breiten Spalte und
   verträgt dort seine 24 Zeichen. In einer Station der Startseite ist die
   Spalte selbst schon schmal — dort trennte er mitten im Wort. */
.station .ueberleitung { max-width: 34ch; }

/* Der Merksatz unter der Figur. Er ersetzt das .kreis-siegel des Rundgangs und
   steht IMMER — er ist die Aussage des Bildes, nicht ihre Belohnung. */
.figur-satz {
  margin: 14px 0 0; max-width: none; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 14.5px;
}

/* Der Weiterweg am Fuss einer Station: der Weg von der Startseite in die Stufe.
   Kein Knopf — die Station ist eine Leseprobe, kein Angebot. */
.station-weiter { margin-top: clamp(18px, 2vw, 26px); }
.station-weiter a {
  display: inline-block;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  font-variation-settings: 'wght' 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--zinnober); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--zinnober) 45%, transparent);
  padding-bottom: 5px;
  transition: color 300ms var(--kurve), border-color 300ms var(--kurve);
}
.fl-tanne .station-weiter a, .fl-tiefe .station-weiter a, .fl-tinte .station-weiter a {
  color: var(--zinnober-hell);
  border-bottom-color: color-mix(in srgb, var(--zinnober-hell) 45%, transparent);
}
.station-weiter a:hover, .station-weiter a:focus-visible {
  color: var(--tinte); border-bottom-color: var(--tinte);
}
.fl-tanne .station-weiter a:hover, .fl-tiefe .station-weiter a:hover,
.fl-tinte .station-weiter a:hover,
.fl-tanne .station-weiter a:focus-visible, .fl-tiefe .station-weiter a:focus-visible,
.fl-tinte .station-weiter a:focus-visible { color: var(--kreide); border-bottom-color: var(--kreide); }

/* Ab 920 px steht die Figur fest neben den Stationen. Das Haus ist höher als
   breit (viewBox 460×500) — der Deckel ist deshalb schärfer als beim Ring,
   damit Marginalie, Figur, Legende und Merksatz zusammen in ein Fenster
   passen. Sonst hakt position: sticky. */
@media (min-width: 920px) {
  .kreis-figur.haus-figur { max-width: min(100%, 46vh); }
}

/* =============================================================================
   STARTZUSTAND DER CHOREOGRAFIE DES HAUSES
   =============================================================================
   Alles hier hängt an .has-js UND an "Bewegung erwünscht" — genau wie beim
   Ring. Ohne JavaScript greift keine dieser Regeln: Das Haus steht vollständig,
   samt Pfeilen, Übergabe und Legende.
   Animiert werden ausschliesslich opacity und transform, deshalb kann beim
   Laden nichts springen. Der Boden trägt kein data-teil und steht immer —
   die leere Baustelle, bevor das Fundament gesetzt wird.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .has-js .haus-figur [data-teil] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
  }
  /* Die Ansprüche kommen von rechts, der Nachfolger geht nach links: die
     Richtung der Bewegung ist dieselbe, die das Bild behauptet. */
  .has-js .haus-figur [data-teil="3"] { transform: translateX(18px); }
  .has-js .haus-figur [data-teil].da  { opacity: 1; transform: none; }

  .has-js .legende li { opacity: 0.4; transition: opacity 300ms var(--kurve); }
  .has-js .legende li.da { opacity: 1; }
}

/* =============================================================================
   DAS HAUS KLEIN — WIEDERERKENNUNG AUF DEN NEBENSEITEN (Spec 3.2)
   =============================================================================
   Erstgespräch (samt Danke-Ansicht), Impressum, Datenschutz, Erstinformation
   zeigen keine eigene Etage — sie tragen das Haus nur als kleine Kachel vor
   der Überschrift, damit die Website auch abseits der vier Stufen als EIN
   System erkennbar bleibt. Die Farben der Figur (.hs-fundament etc., oben)
   sind für eine Tanne-Fläche berechnet — deshalb die grüne Kachel, nicht die
   Fläche der jeweiligen Seite darunter (die wechselt: blatt bei den meisten
   Nebenseiten). haus_klein() liefert das Haus dekorativ (aria-hidden) und im
   engen Ausschnitt HAUS_AUSSCHNITT_ENG — ohne ihn liesse der volle viewBox
   bei so geringer Breite vor allem Leerfläche über dem Dachfirst sehen.
   ========================================================================== */
.haus-klein {
  width: 64px;
  background: var(--tanne);
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 14px;
}
.haus-klein svg { width: 100%; height: auto; display: block; }

/* =============================================================================
 *  DIE ACHSE — Bauprinzip der Themenseiten seit dem 21.08.2026
 * =============================================================================
 *  Spec: docs/superpowers/specs/2026-08-21-seiten-bauprinzip-design.md
 *  Markup: strang(), loesung(), selbstfrage() in lib/bausteine.php,
 *          die vier Schaubilder in lib/achsen.php
 *
 *  Die senkrechte Linie ist ein RAHMEN an der Haltmarke, kein Bild und kein
 *  Pseudo-Element mit fester Höhe: So läuft sie über jeden Textblock durch,
 *  ganz gleich wie lang er wird, und sie bricht auf dem Telefon nicht.
 * ========================================================================== */

.achsenbild { margin: 32px 0 0; }
.achsenbild svg { display: block; width: 100%; height: auto; }
.achsenbild figcaption {
  font-size: 13px; color: var(--tinte-matt); margin-top: 10px; max-width: 60ch;
}
.fl-tanne .achsenbild figcaption,
.fl-tiefe .achsenbild figcaption,
.fl-tinte .achsenbild figcaption { color: var(--kreide-matt); }

/* Beschriftung IN den Schaubildern. Die Farben stehen als Zahl im SVG, weil
   Fremdsysteme (E-Mail-Vorschau, PDF-Export) currentColor nicht zuverlässig
   auflösen — hier stehen nur Schriftschnitt und Grösse. */
.s-titel { font-family: var(--sans); font-size: 11.5px; font-weight: 600;
           letter-spacing: 0.09em; text-transform: uppercase; fill: #16211F; }
.s-text  { font-family: var(--sans); font-size: 11.5px; fill: #4E5B57; }
.s-notiz { font-family: var(--serif); font-style: italic; font-size: 12.5px; fill: #4E5B57; }
.s-rot   { font-family: var(--sans); font-size: 11px; font-weight: 600;
           letter-spacing: 0.04em; fill: #C23B22; }
.s-nr     { font-family: var(--serif); font-size: 15px; font-weight: 600; fill: #16211F; }
.s-nr-rot { font-family: var(--serif); font-size: 15px; font-weight: 600; fill: #C23B22; }
.s-auf-rot { fill: #C23B22; }
.s-luecke { font-family: var(--serif); font-size: 21px; font-weight: 600; fill: #C23B22; }

/* "Die Lücke" (achse_zeit_danach) sitzt auf BLATT innerhalb von .ax-flaeche
   und lag dort unter 4,5:1: #C23B22 gegen die tatsächliche Mischfläche aus
   Seiten-Hintergrund und der Zinnober-Tönung von .ax-flaeche (nachgerechnet
   ≈ rgb(236,219,212)) ergibt nur 3,97:1. .s-text/.s-notiz sind an derselben
   Stelle unauffällig (kein Verstoß) und bleiben unverändert. */
.s-luecke.s-auf-flaeche { fill: #A83420; } /* dunkler als --zinnober, 4,93:1 gegen die Mischfläche */

/* Umbau vom 24.09.2026: Seit /mitarbeiter/ den Kopf auf Tanne trägt,
   steht das Achsenbild dort auf grünem statt auf hellem Grund. .s-titel,
   .s-text, .s-notiz, .s-rot, .s-auf-rot und .s-luecke stehen FREI auf der
   Zeichenfläche (kein eigener heller Kreis darunter) — anders als .s-nr und
   .s-nr-rot, die immer auf ihrer eigenen hellen Punkt-Scheibe sitzen und
   deshalb unverändert bleiben. Gleiches Prinzip wie .achsenbild figcaption
   oben: Werte fest verdrahtet statt über var(), aus demselben Grund
   (Fremdsysteme lösen currentColor/var() nicht zuverlässig auf). */
.fl-tanne .s-titel { fill: #EDF0EA; } /* --kreide, 9,9:1 auf Tanne */
.fl-tanne .s-text, .fl-tanne .s-notiz { fill: #A9B5AF; } /* --kreide-matt, 5,4:1 auf Tanne */
.fl-tanne .s-rot, .fl-tanne .s-auf-rot, .fl-tanne .s-luecke { fill: #ED8C6E; } /* --zinnober-hell, 4,7:1 auf Tanne — NICHT --zinnober, das ist auf Tanne zu dunkel */

/* Hauptlinie, Klammer, die beiden Abzweig-Pfade und die Pfeilspitze in
   achse_mitarbeiterweg() (lib/achsen.php) standen frei auf der Zeichenfläche
   wie .s-titel & Co. oben — ebenfalls Hex statt var(), aus demselben
   Fremdsysteme-Grund. Nur diese eine Achsenfunktion ist umgebaut; die
   anderen drei Achsenbilder stehen auf hellem Grund und bleiben
   unverändert. Die Kreisumrandungen (.s-nr/.s-nr-rot-Kreise) sind bewusst
   NICHT mit umgestellt: Ihr Rand ist für Kontrast gegen die EIGENE helle
   Kreisfläche gebaut (Tinte auf #FBF6F4/#F2F3EF ≈ 15:1), nicht gegen Tanne
   — ein heller Rand (Kreide) wäre auf der ebenfalls hellen Kreisfläche fast
   unsichtbar (≈1,05:1) und würde den Ring schlechter machen, nicht besser.
   Die helle Füllung selbst kontrastiert bereits mit ≥10:1 gegen Tanne. */
.ax-linie { stroke: #16211F; } /* --tinte, unverändert wie vorher inline */
.ax-klammer, .ax-abzweig { stroke: #C23B22; } /* --zinnober, unverändert wie vorher inline */
.ax-spitze { fill: #C23B22; } /* --zinnober, unverändert wie vorher inline */
.fl-tanne .ax-linie { stroke: #EDF0EA; } /* --kreide, 9,9:1 auf Tanne */
.fl-tanne .ax-klammer, .fl-tanne .ax-abzweig { stroke: #ED8C6E; } /* --zinnober-hell, 4,65:1 auf Tanne */
.fl-tanne .ax-spitze { fill: #ED8C6E; } /* --zinnober-hell, 4,65:1 auf Tanne */

/* Ergänzung 24.09.2026: dieselbe Falle wie oben, jetzt in den drei übrigen
   Achsenbildern (achse_berufsleben, achse_anspruchsweg, achse_zeit_danach,
   lib/achsen.php) — Hauptlinie, roter Strich, Schild und Füllfläche
   standen dort noch mit festen Hex-Werten frei auf der Zeichenfläche.
   .ax-schild ist eine EIGENE Klasse statt .ax-linie: Die zwei 7-px-Linien
   bilden das Haftungsschild, die Kernaussage von /haftung/ — eine
   spätere Änderung an der Schildfarbe soll nicht jede andere Achsenlinie
   mitziehen. .ax-spitze-tinte ist das Tinte-Gegenstück zu .ax-spitze, für
   die Pfeilspitze zur Gesellschafter-Rolle (die bleibt Tinte, nicht
   Zinnober). Die Stationskreise bleiben aus demselben Grund wie oben
   unangetastet. */
.ax-rot     { stroke: #C23B22; } /* --zinnober, unverändert wie vorher inline */
.ax-schild  { stroke: #16211F; } /* --tinte, unverändert wie vorher inline */
.ax-flaeche { fill: #C23B22; fill-opacity: .13; } /* --zinnober, unverändert wie vorher inline */
.ax-spitze-tinte { fill: #16211F; } /* --tinte, unverändert wie vorher inline */
.fl-tanne .ax-rot    { stroke: #ED8C6E; } /* --zinnober-hell, 4,65:1 auf Tanne */
.fl-tanne .ax-schild { stroke: #EDF0EA; } /* --kreide, 9,9:1 auf Tanne */
/* Reine Füllfläche mit Alpha < 0,5 — der Kontrast-Scanner zählt das als
   Dekor und prüft keine Pflichtzahl (Global Constraints: Kontrast gilt für
   Text/Grafik-Linien, keine Flächentönung). Opacity auf Tanne leicht
   angehoben, weil die dunklere Fläche darunter die Tönung sonst schluckt. */
.fl-tanne .ax-flaeche { fill: #ED8C6E; fill-opacity: .16; }
.fl-tanne .ax-spitze-tinte { fill: #EDF0EA; } /* --kreide, 9,9:1 auf Tanne */

/* "Die Lücke", "zahlen, ohne einzunehmen" und "und die Kunden sind
   inzwischen woanders" (achse_zeit_danach) sitzen INNERHALB von
   .ax-flaeche — ihre tatsächliche Fläche ist auf Tanne
   also nicht Tanne pur, sondern Tanne mit der Zinnober-Tönung darüber
   vermischt (#ED8C6E bei 16% Deckkraft über Tanne ≈ rgb(76,74,68)). Die
   normalen .fl-tanne-Farben von .s-luecke/.s-text/.s-notiz sind dafür zu
   knapp (nachgerechnet 3,64:1 bzw. 4,20:1 — unter der Pflicht von 4,5:1,
   da 21px/600 laut Scanner-Regel nicht als "gross" zaehlt). .s-auf-flaeche
   ist eine zusätzliche Klasse NUR für diese drei Texte, mit eigener,
   hellerer .fl-tanne-Farbe gegen genau diese Mischfläche (nachgerechnet,
   sRGB-Alphamischung wie im Scanner):
     .s-luecke.s-auf-flaeche  #F5B49B — 5,01:1 gegen rgb(76,74,68)
     .s-text/.s-notiz.s-auf-flaeche #C2CBC6 — 5,34:1 gegen rgb(76,74,68)
   Die Fläche selbst (Deckkraft) bleibt unverändert — sie ist auf dem
   Screenshot bereits klar sichtbar, nur die Deckkraft zu ändern hätte das
   Problem nicht gelöst: selbst bei 6 % Deckkraft bliebe Zinnober-hell
   unter 4,5:1. */
.fl-tanne .s-luecke.s-auf-flaeche { fill: #F5B49B; }
.fl-tanne .s-text.s-auf-flaeche, .fl-tanne .s-notiz.s-auf-flaeche { fill: #C2CBC6; }

/* --- Der durchlaufende Strang: links die Achse, rechts der Text ----------- */
.strang { display: grid; grid-template-columns: 92px 1fr; margin-top: 34px; }
.halt   { display: contents; }

.haltmarke {
  position: relative; border-right: 2px solid var(--tinte); padding: 0 0 54px;
}
.haltmarke::before {
  content: attr(data-nr);
  position: absolute; right: -19px; top: 0; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blatt); border: 2px solid var(--tinte); color: var(--tinte);
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
/* Die Zeitmarke steht im Seitenrand. Mehr als etwa 14 Zeichen laufen aus dem
   Blatt heraus — deshalb der Hinweis im PHP-Doc von strang(). */
.haltmarke .zeit {
  position: absolute; right: 30px; top: 6px; width: 112px; text-align: right;
  white-space: nowrap; font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--tinte-matt);
}
.halt:last-child .haltmarke { border-right-color: transparent; }

/* Rot markiert den gefährdeten Abschnitt der Achse — dieselbe Aussage wie im
   Schaubild darüber: hier kommt ohne Zutun nichts. */
.halt.rot .haltmarke { border-right-color: var(--zinnober); }
.halt.rot .haltmarke::before {
  border-color: var(--zinnober); color: var(--zinnober); background: #FBF6F4;
}

/* Umbau vom 24.09.2026: Die Kontoachse selbst (.haltmarke) und ihre Zeitmarke
   stehen seit dem Umbau auf Tanne im freien Grün, nicht mehr auf Blatt — die
   Rundmarke davor (.haltmarke::before) bleibt unangetastet, sie traegt ihr
   eigenes helles Rund (var(--blatt) bzw. #FBF6F4) unabhaengig von der
   Flaeche. Für die Linie selbst gilt dasselbe Muster wie bei .zeile/.konto
   in marke.css: --linie-hell wird zu --linie-dunkel. Beim gefaehrdeten
   Abschnitt (.halt.rot) gilt dasselbe Signalfarben-Muster wie bei den
   anderen Tanne-Regeln: --zinnober wird zu --zinnober-hell, sonst ist die
   Linie auf Tanne zu dunkel fuer den Kontrast, den sie als Aussage braucht. */
.fl-tanne .haltmarke { border-right-color: var(--linie-dunkel); }
.fl-tanne .haltmarke .zeit { color: var(--kreide-matt); }
.fl-tanne .halt.rot .haltmarke { border-right-color: var(--zinnober-hell); }

.haltinhalt { padding: 0 0 54px 30px; }
.haltinhalt h3 {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  margin: 2px 0 10px; line-height: 1.22; max-width: 26ch;
}
.haltinhalt p { max-width: 58ch; margin: 0 0 13px; }
.haltinhalt p.matt { color: var(--tinte-matt); }
/* NACHGEBESSERT 25.09.2026 (Haus-System /inhaber/, Kontrast-Scan): --tinte-matt ist
   für Blatt gedacht (6,4:1 dort) und schlägt auf Tanne/Tiefe/Tinte die
   normale .fl-tanne p-Regel (--kreide-matt) — Spezifität ".haltinhalt p.matt"
   ist höher als ".fl-tanne p". Ergebnis: dunkler Text auf dunklem Grund,
   1,60:1. Wurzel-Fix: dieselbe Insel-Regel wie bei .pos/.klein/.stufe-name
   oben — auf den drei dunklen Flächen gilt --kreide-matt (5,4:1 auf Tanne). */
.fl-tanne .haltinhalt p.matt, .fl-tiefe .haltinhalt p.matt,
.fl-tinte .haltinhalt p.matt { color: var(--kreide-matt); }

/* Die Frage, die der Leser sich selbst beantwortet (NEPQ). */
.selbstfrage {
  font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-style: italic;
  color: var(--tinte); border-left: 2px solid var(--zinnober);
  padding-left: 14px; margin: 28px 0 22px; max-width: 48ch; line-height: 1.35;
}
/* Umbau vom 24.09.2026: die Selbstfrage ist laut Spec 4.4/6.4 das dominante
   Element jeder Station — auf Tanne braucht sie deshalb zwingend eine
   eigene Regel, nicht nur die allgemeine ".fl-tanne p"-Zeile (die trifft
   hier nicht, .selbstfrage ist ein <p>, aber mit eigener, hoeher
   spezifischer Farbregel, die sonst gewinnen wuerde). */
.fl-tanne .selbstfrage { color: var(--kreide); border-left-color: var(--zinnober-hell); }

/* --- Kundenstimmen (Startseite, 30.09.2026) -------------------------------
   Dieselbe Bauart wie die Lösungsbausteine: kein Kasten, Linie oben,
   Randspalte links (Name, Betrieb), rechts der Satz in der Serifenschrift. */
.bewertung-zeile { margin: clamp(30px, 3.6vw, 48px) 0 0; font: 400 1rem/1.5 var(--sans); color: var(--kreide-matt); }
.bewertung-zeile strong { font: 500 clamp(26px, 2.6vw, 34px)/1 var(--serif); color: var(--kreide); margin-right: 10px; }
.bewertung-zeile a { color: var(--kreide); text-underline-offset: 3px; }
/* Zeitraum zum Schnitt (BGH I ZR 143/23) — eigene Zeile, gleich hell wie der Rest der Zeile */
.bewertung-zeitraum { display: block; margin-top: 6px; font-size: 13.5px; color: var(--kreide-matt); }
.stimmen { margin: 18px 0 0; max-width: 980px; }
.stimme { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 22px 0 24px; border-top: 1px solid var(--linie-dunkel); }
.stimme figcaption { margin: 0; }
.stimme-name { display: block; font: 500 1.02rem/1.35 var(--sans); color: var(--kreide); }
.stimme-betrieb { display: block; font: 500 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--zinnober-hell); margin-top: 4px; }
.stimme blockquote { margin: 0; font: 400 clamp(19px, 1.7vw, 22px)/1.45 var(--serif); color: var(--kreide); hyphens: manual; -webkit-hyphens: manual; }
.fl-tanne .stimmen-herkunft { margin: 0; padding-top: 16px; border-top: 1px solid var(--linie-dunkel); max-width: 980px; font-size: 13.5px; color: var(--kreide-matt); }
@media (min-width: 760px) {
  .stimme { grid-template-columns: 240px minmax(0, 1fr); gap: 0 36px; }
  .stimme figcaption { padding-right: 20px; border-right: 1px solid var(--linie-dunkel); }
}

/* --- Der Lösungsbaustein am Haltepunkt ------------------------------------
   UMGEBAUT 30.09.2026 (Raoul: „sieht aus wie die BETA-Version einer Seite"):
   kein heller Kasten mehr. Jeder Baustein ist ein POSTEN auf dem Kontoblatt —
   feine Linie oben, links eine Randspalte mit laufender Nummer, Symbol und
   Art-Zeile, rechts der Inhalt. Abgehoben wird über Rangordnung und Linie,
   nicht über eine Fläche. Alle 17 Bausteine stehen auf Tanne, deshalb helle
   Schrift (Kreide). Probe mit drei Varianten: Raoul wählte „B · Randspalte".

   Die Nummer zählt das CSS selbst (counter), damit keine Seite sie pflegen
   muss und sie im Textabzug nicht als Wort auftaucht. */
body { counter-reset: loesung; }
.loesung {
  counter-increment: loesung;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--linie-dunkel);
  margin: 40px 0 0; padding: 0 0 8px; max-width: 760px;
  color: var(--kreide);
}
.loesung-kopf {
  display: flex; align-items: center; gap: 14px; padding: 20px 0 16px;
}
.loesung-kopf::before {
  content: counter(loesung, decimal-leading-zero);
  font: 400 40px/1 var(--serif); color: var(--kreide); letter-spacing: -.01em;
}
.loesung-kopf .sachgebiet-icon { width: 28px; height: 28px; color: var(--kreide); flex: none; }
.loesung-kopf .sachgebiet-icon svg { width: 100%; height: 100%; }
/* Art-Zeile: am Mittelpunkt in zwei Zeilen — oben leise, unten rot. Der
   Punkt selbst bleibt im Text (Screenreader, Textabzug), nur unsichtbar. */
.loesung .art {
  font: 500 11px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--zinnober-hell); margin: 0; max-width: none;
}
/* 01.10.2026: .fl-tiefe zieht überall mit, wo hier .fl-tanne für Bausteine steht
   (der Firmen-Rechtsschutz auf /haftung/ steht jetzt auf Tiefe). */
/* .fl-tanne davor: sonst gewinnt ".fl-tanne .loesung p" (Fließtextgröße,
   Kreide-matt) gegen die Art-Zeile. Keine Silbentrennung („LÖ-SUNG"). */
.fl-tanne .loesung .art, .fl-tiefe .loesung .art { font-size: 11px; color: var(--zinnober-hell); hyphens: none; -webkit-hyphens: none; }
.loesung .art-oben { display: block; color: var(--kreide-matt); }
.loesung .art-punkt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.loesung .art-unten { display: block; }

.loesung h4 {
  font: 500 clamp(26px, 2.6vw, 34px)/1.12 var(--serif); letter-spacing: -.01em;
  color: var(--kreide); margin: 0 0 14px;
}
/* Bestätigung steht laut Spec 6.2 vor dem Kontrastpaar: erst hören, dass
   schon etwas richtig läuft, bevor die Frage kommt, was noch fehlt. */
.loesung .bestaetigung { font: 400 1.1rem/1.55 var(--sans); color: var(--kreide); margin: 0 0 4px; }
.fl-tanne .loesung p, .fl-tiefe .loesung p { font-size: 15.5px; line-height: 1.6; margin: 0 0 8px; color: var(--kreide-matt); max-width: none; }
.fl-tanne .loesung .bestaetigung, .fl-tiefe .loesung .bestaetigung { font-size: 1.1rem; color: var(--kreide); }
.loesung p:last-child { margin: 0; }

/* Genau EINE Lösung je Seite trägt .stark. Wer eine zweite hervorhebt, hat
   keine Hervorhebung mehr. Ohne Kasten trägt die Nummer die Hervorhebung. */
.loesung.stark .loesung-kopf::before { color: var(--zinnober-hell); }

@media (min-width: 920px) {
  .loesung { grid-template-columns: 120px minmax(0, 1fr); margin-top: 56px; }
  /* Die Randspalte bleibt stehen, solange man in DIESEM Baustein liest. */
  .loesung-kopf {
    flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 26px 20px 26px 0; border-right: 1px solid var(--linie-dunkel);
    position: sticky; top: calc(var(--kopf) + 24px); align-self: start;
  }
  .loesung-kopf::before { font-size: 56px; }
  .loesung-kopf .sachgebiet-icon { width: 32px; height: 32px; }
  .loesung-inhalt { padding: 24px 0 0 32px; }
}

/* --- Rechtstexte: Impressum, Erstinformation, Datenschutz -----------------
   Sie folgen anderen Regeln als die Verkaufsseiten. Niemand liest sie zum
   Vergnügen; sie müssen auffindbar und überfliegbar sein, nicht schön. Die
   Zwischenüberschriften der Seiten wären hier mit 47px so laut wie die
   Seitenüberschrift selbst — in einem Text mit zwölf Abschnitten ergäbe das
   eine Wand. Deshalb kleine, klar abgesetzte h2 mit viel Luft davor.

   Bis zum 26.08.2026 brachten diese drei Seiten ihr eigenes Stylesheet mit
   (Inter/Oswald in Petrol) und sahen aus wie eine fremde Website. */
.rechtstext { max-width: 62ch; }
.rechtstext h2 {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--tinte); margin: 34px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--linie-hell);
}
.rechtstext h3 {
  font-family: var(--serif); font-size: 16.5px; font-weight: 600;
  color: var(--tinte); margin: 22px 0 6px;
}
.rechtstext p,
.rechtstext address { font-size: 15.5px; line-height: 1.65; margin: 0 0 12px; max-width: none; }
.rechtstext address { font-style: normal; }
.rechtstext a { color: var(--zinnober); text-underline-offset: 2px; overflow-wrap: anywhere; }
.rechtstext ul { font-size: 15.5px; line-height: 1.65; margin: 0 0 12px 20px; }
.rechtstext li { margin: 0 0 5px; }

/* --- Der Befund: die eine Aussage, die zum Gespräch führt ------------------
   Sparsam einsetzen — höchstens einmal je Seite. Sie steht dort, wo der Leser
   etwas über SEINEN Betrieb erfährt, das er selbst nachsehen kann. Genau das
   ist der Punkt, an dem aus Lesen ein Anruf wird; ein zweiter Befund auf
   derselben Seite nimmt dem ersten die Wirkung. */
.befund {
  background: #FBF6F4; border-left: 3px solid var(--zinnober);
  padding: 16px 18px; margin: 18px 0; max-width: 58ch;
  font-size: 16px; line-height: 1.5; color: var(--tinte);
}
.befund strong { font-family: var(--serif); font-size: 17.5px; }

/* --- Das Kontrastpaar vor der Erklärung -----------------------------------
   Zwei Wege, gleich gestaltet. Keine Seite ist die schlechte — der Leser
   entscheidet (Spec 6.1: der dominante Typ will bestätigt, nicht belehrt
   werden). Deshalb: kein Zinnober auf der tragenden Seite mehr. */
/* UMGEBAUT 30.09.2026 (Variante B): beide Seiten bleiben GLEICH hell — die
   Probe hatte die linke gedämpft, das wäre eine leise Wertung gegen 6.1.
   Getrennt werden sie nur durch die Kontoachse (senkrechte Linie). Nebeneinander
   erst, wenn die Spalte breit genug ist — siehe Container-Regel weiter unten. */
.kontrast { margin: 26px 0 6px; hyphens: manual; -webkit-hyphens: manual; }
.kontrast-wege { display: grid; gap: 22px; }
/* border/padding: 0 — die FAQ nutzt dieselbe Klasse .frage mit Unterstrich. */
.fl-tanne .kontrast .frage, .fl-tiefe .kontrast .frage { font: 500 1.1rem/1.38 var(--serif); color: var(--kreide); margin: 0 0 8px; border: 0; padding: 0; }
.fl-tanne .kontrast .antwort, .fl-tiefe .kontrast .antwort { font: 400 1rem/1.6 var(--sans); color: var(--kreide); margin: 0; }
/* Der Vorteil ist der Saldo: kursiv, doppelt unterstrichen wie die Endsumme
   unter einer Buchung. Die Linie liegt am <span>, damit sie nur so lang ist
   wie der Satz — und bei Umbruch unter jeder Zeile. */
.fl-tanne .kontrast .vorteil, .fl-tiefe .kontrast .vorteil {
  margin: 28px 0 0;
  font: italic 400 clamp(20px, 2vw, 24px)/1.4 var(--serif); color: var(--kreide);
}
.kontrast .vorteil span {
  border-bottom: 3px double var(--zinnober-hell); padding-bottom: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.loesung-inhalt { container-type: inline-size; }
/* Ein Erklärabsatz nach dem Saldo braucht Abstand, sonst klebt er an der Doppellinie. */
.fl-tanne .loesung .kontrast + p, .fl-tiefe .loesung .kontrast + p { margin-top: 22px; }
@container (min-width: 500px) {
  /* Zwei Spalten mit 52px Abstand, die Achse als 1px-Linie genau in der
     Mitte — gezeichnet vom gemeinsamen Rahmen, nicht von einer Hälfte. */
  .kontrast-wege {
    grid-template-columns: 1fr 1fr; gap: 0 52px;
    background: linear-gradient(var(--linie-dunkel), var(--linie-dunkel)) center / 1px 100% no-repeat;
  }
}

/* --- Der Zitat-Platz (Spec 4.7) --------------------------------------------
   Steht auf Tanne, deshalb helle Schrift (--kreide). Wird heute nie gerendert
   — JOCHEN_ZITAT ist leer, bis Jochen den Satz liefert (siehe zitat() in
   bausteine.php) —, das CSS liegt trotzdem schon bereit. */
.zitat{display:grid;gap:24px;max-width:780px;margin:0 auto}
.zitat blockquote p{font:500 clamp(1.4rem,2.6vw,2rem)/1.35 var(--serif);color:var(--kreide);margin:0}
.zitat figcaption{color:var(--kreide-matt)}
.zitat-bild{display:none}

/* --- Die Etage — Kopf jeder Stufenseite -----------------------------------
   Mobil zuerst: eine klebende Leiste unter dem Kopfbalken, Haus winzig links,
   die Plätze als Reihe zum Tippen (Spec 7). Ab 920 px übernimmt .kreis-feld
   dieselbe Sticky-Mechanik wie das Haus auf der Startseite — die Etage wird
   dort zur stehenden Spalte mit Namen, die Strecke läuft rechts vorbei.
   Die Klebe-Eigenschaften selbst stehen NICHT hier, sondern am Elternteil
   .kreis-feld (siehe die max-width:919px-Regel weiter unten): ein
   sticky-Element klebt nur innerhalb der Box SEINES Elternteils, und
   .kreis-feld war unter 920px exakt so hoch wie .etage-feld selbst — kein
   Spielraum zum Kleben. */
.etage-feld {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center;
  padding: 6px 12px; color: var(--kreide);
}
.etage-haus { max-width: 40px; margin: 0; }
.etage-haus svg { width: 100%; height: auto; }

/* Unter 920px klebt .kreis-feld selbst, nicht mehr .etage-feld (siehe oben):
   sein eigener Elternteil .kreis-raster reicht bis zum Ende der Strecke
   (.stationen ist sein Geschwister) — das gibt echten Spielraum zum Kleben,
   anders als .etage-feld in seinem eigenen, gleich hohen Elternteil.
   :has(> .etage-feld) trifft nur .kreis-feld MIT einer Etage-Leiste drin —
   das grosse Haus der Startseite bleibt bewusst nicht-sticky (siehe
   Kommentar bei .kreis-feld weiter oben: ein 350px-Ring als Dauerbalken
   fraesse die halbe Bildschirmhoehe weg). */
@media (max-width: 919px) {
  .kreis-feld:has(> .etage-feld) {
    position: sticky; top: var(--kopf); z-index: 40; background: var(--tanne);
  }
  /* Baustein-Anker (#baustein-...) liegen in .stationen, direkt unter der
     jetzt klebenden Etage-Leiste — ohne eigenen Randabstand landet ein
     Sprung dorthin unter Kopfbalken UND Leiste versteckt. 64px = die
     gemessene Höhe von .etage-feld bei 390px (Haus-SVG 52px + 2×6px
     Auffüllung). +24px zusätzlich: .loesung UND sein Elternteil .haltinhalt
     tragen beide .reveal (je 12px Einblend-Versatz) — springt der Sprung ein
     noch nie sichtbares Ziel an, rechnet der Browser mit dessen unsichtbarem
     (verschobenem) Anfangszustand; gemessen per Kontrast-Scan-Hilfsskript
     mit stillgelegten .reveal-Übergängen: ohne die 24px blieben die obersten
     ~24px von .loesung unter der Leiste verdeckt. */
  .loesung { scroll-margin-top: calc(var(--kopf) + 64px + 24px); }
}

/* Nachtrag 15.09.2026 zu Spec 3.2/4.3: Die Etage steht als allein stehendes
   Bauteil da — bis sie voll ist, ist der Rest des Hauses unsichtbar, nur mit
   JS (ohne JS steht das ganze Haus von Anfang an, Spec 4.3: die Bewegung ist
   Zugabe). Ist sie voll (.haus-komplett, serverseitig bei $voll oder von
   animation.js gesetzt), baut sich das Haus um das Bauteil herum auf — "das
   Haus baut sich um das Bauteil, nicht andersherum". Die Sichtbarkeit gilt
   unabhängig von der Bewegungspräferenz; nur der gestaffelte Übergang
   (unten) hängt an "Bewegung erwünscht" — genau wie die Haus-Choreografie
   der Startseite (.haus-figur weiter unten). */
.has-js .etage-haus:not(.haus-komplett) [data-teil]:not(.aktiv) { opacity: 0; }
.etage-haus.haus-komplett [data-teil] { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Der Uebergang haengt NUR am Einblenden (.haus-komplett). Haengt er am
     Ausgangszustand, laeuft er beim Laden rueckwaerts: Das Haus steht kurz
     komplett und verschwindet dann Teil fuer Teil — das Gegenteil der Idee.
     Etage 2 ist immer schon da, sie braucht keine Verzoegerung. */
  .etage-haus.haus-komplett [data-teil] { transition: opacity .6s var(--kurve); }
  .etage-haus.haus-komplett [data-teil="1"] { transition-delay: 0s; }
  .etage-haus.haus-komplett [data-teil="3"] { transition-delay: .25s; }
  .etage-haus.haus-komplett [data-teil="4"] { transition-delay: .5s; }
}

/* Die Steine liegen in der Etagenfläche (z. B. .hs-geschoss) — einer hellen,
   papierartigen Fläche, nicht auf der grünen Seite selbst. Deshalb Tinte/
   Linie statt Kreide/Tanne, sonst verschwindet der leere Stein darauf. */
.stein { fill: none; stroke: var(--tinte-matt); stroke-dasharray: 3 2; }
.stein-symbol { fill: none; stroke: var(--tinte-matt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.platz.gesetzt .stein { fill: var(--tanne); stroke: var(--tinte); stroke-dasharray: none; }
.platz.gesetzt .stein-symbol { stroke: var(--kreide); }
.platz.jetzt .stein { stroke: var(--zinnober); stroke-width: 2; }
/* Ohne JavaScript ist die Etage voll — gilt auch für die Steine im SVG.
   Nachtrag 25.09.2026 (Sofort-Analyse, ganzes Haus): auf .etage-haus eingegrenzt,
   statt auf jeden .platz-Stein zu wirken. Die Analyse zeigt echte, dauerhaft
   gemischte Zustände (gesetzt/offen je nach Betrieb) in IHREM eigenen Haus
   (.analyse-haus) — dort wuerde diese Regel ausnahmslos ALLE Steine fuellen
   und den Unterschied zwischen "trifft zu" und "trifft nicht zu" unsichtbar
   machen, mit oder ohne JavaScript. */
html:not(.has-js) .etage-haus .platz .stein { fill: var(--tanne); stroke: var(--tinte); stroke-dasharray: none; }
html:not(.has-js) .etage-haus .platz .stein-symbol { stroke: var(--kreide); }

.etage-marke { display: none; margin: 0 0 12px; }
.etage-plaetze { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px;
                 overflow-x: auto; scrollbar-width: none; }
.platz a { display: flex; align-items: center; gap: 8px; text-decoration: none;
           color: var(--kreide-matt); border: 1px dashed var(--linie-dunkel);
           border-radius: 3px; padding: 6px; transition: all .25s var(--kurve); }
/* Ohne "color: inherit" gewinnt die dunkle Fläche weiter oben
   (.fl-tanne/.fl-tiefe/.fl-tinte .sachgebiet-icon, gleiche Spezifität, aber
   frueher im Code) und faerbt JEDES Symbol in der Leiste dauerhaft Zinnober —
   leer, gesetzt oder aktiv sehen dann gleich aus. Das Symbol soll stattdessen
   die Farbe des umgebenden <a> uebernehmen (.platz a / .platz.gesetzt a /
   .platz.jetzt a unten): Zinnober bleibt so allein dem Rahmen des aktiven
   Platzes vorbehalten (Spec 3.4). */
.platz .sachgebiet-icon { width: 22px; height: 22px; flex: none; color: inherit; }
.platz-name { display: none; font: 500 .78rem/1.25 var(--sans); }
.platz.gesetzt a { border-style: solid; border-color: var(--kreide-matt); color: var(--kreide); }
.platz.jetzt a   { border-color: var(--zinnober-hell); color: var(--kreide); }
/* Diese Regel gilt nur fuer die Leiste (.platz ist dort das <li>, der <a>
   darin bekommt Rahmen/Farbe von ".platz a" oben) — fuer die Steine im
   Haus-SVG greift sie nie, siehe Fund unten. Bewusst NICHT auf ".platz:hover"
   umbenannt: Border ist keine vererbte CSS-Eigenschaft, und die eigene,
   unbedingte Farbe von ".platz a" oben würde die vom <li> geerbte Farbe
   ohnehin überschreiben — eine reine Umbenennung ("Korrigieren zu
   .platz:hover") hätte die Leiste ohne sichtbare Wirkung gelassen UND das
   Haus-SVG nicht repariert. Stattdessen ergänzt die Zeile darunter gezielt
   die fehlende SVG-Wirkung, im selben Stein-Muster wie .platz.gesetzt .stein
   und .platz.jetzt .stein oben. */
.platz a:hover   { border-color: var(--kreide); color: var(--kreide); }
/* Ohne JavaScript ist die Etage voll. */
html:not(.has-js) .platz a { border-style: solid; border-color: var(--kreide-matt); color: var(--kreide); }
/* Sichtbarer Fokus fuer die Stein-Links im SVG: der voreingestellte
   Fokusrahmen eines Browsers ist auf einem SVG-Element oft unsichtbar. Das
   <a> im Haus TRAEGT die Klasse platz (anders als in der Leiste, wo .platz
   das <li> ist) — deshalb hier direkt .platz:focus-visible, im selben Muster
   wie .platz.gesetzt .stein und .platz.jetzt .stein oben. */
.platz:focus-visible .stein { stroke: var(--zinnober); stroke-width: 2; }
/* Dieselbe Luecke gilt fuer die Maus — ohne diese Zeile gibt ein Stein
   im Haus-SVG beim Hovern keinerlei Rueckmeldung,
   waehrend die Leiste ".platz a:hover" bereits hat. Gleiche Wirkung wie der
   Fokusrahmen darueber, damit Maus- und Tastaturbedienung gleich aussehen. */
.platz:hover .stein { stroke: var(--zinnober); stroke-width: 2; }

/* Ab 920 px übernimmt .kreis-feld die Klebrigkeit (siehe oben) — die Etage
   selbst braucht dann keine eigene Leiste mehr, nur noch die Spaltenmaße. */
@media (min-width: 920px) {
  .etage-feld {
    position: static; z-index: auto; display: block; background: none; padding: 0;
  }
  .etage-haus { max-width: min(100%, 34vh); margin: 0 0 14px; }
  .etage-marke { display: block; }
  /* Die Leiste ist reines Handy-Inhaltsverzeichnis (Nachtrag 15.09.): ab
     920 px stehen die Bausteine als Steine im Haus-SVG selbst. Sie bleibt
     dennoch im Accessibility-Tree — display:none wuerde sie dort ebenfalls
     entfernen, und die sieben Sprungziele waeren fuer Tastatur und
     Screenreader nirgends mehr erreichbar (Nachtrag 22.09.2026). Deshalb nur
     visuell versteckt, nicht aus dem Baum genommen. */
  .etage-plaetze {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* Der Kopftext nimmt dieselbe Breite wie das Raster darunter (.wrap, ab 1240 px
   1320 px) — sonst stehen Kopf und Etage an verschiedenen Kanten. Nur die
   Absaetze bleiben auf Lesemass; die Ueberschrift braucht die volle Breite,
   sonst bricht sie mitten im Wort. */
.stufen-kopf-text { margin-bottom: clamp(30px, 3.6vw, 48px); }
.stufen-kopf-text p { max-width: var(--measure); }
@media (min-width: 1240px) { .stufen-kopf-text { max-width: 1320px; } }

/* Die volle Etage im Abschluss (Spec 4.3/4.7): Etage plus die zwei Wege
   darunter, mittig auf der Tanne-Fläche — dieselbe Breite, die die Etage im
   Kopf als Spalte des .kreis-raster ohnehin hat. */
.etage-abschluss { max-width: 640px; margin-inline: auto; text-align: center; }
/* .etage-feld ist mobile-first sticky (siehe oben) — richtig für die Etage im
   Kopf, die beim Scrollen zeigt, wo man steht. Die Etage hier am Ende zeigt
   nur den fertigen Endzustand und navigiert nicht; sie darf nicht kleben. */
.etage-abschluss .etage-feld { position: static; z-index: auto; }
.etage-abschluss .etage-plaetze { justify-content: center; }
.etage-abschluss .knopfreihe { justify-content: center; margin-top: clamp(20px, 2.4vw, 32px); }

/* Die drei Bausteine des Pakets auf /mitarbeiter/. */
/* Seit 30.09.2026 (Variante B) keine hellen Kacheln mehr: drei Spalten,
   getrennt nur durch die Achse, wie das Kontrastpaar darüber. */
.bausteine { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 22px 0 0; border-top: 1px solid var(--linie-dunkel); }
.bausteine div { padding: 14px 14px 4px; }
.bausteine div:first-child { padding-left: 0; }
.bausteine div + div { border-left: 1px solid var(--linie-dunkel); }
.bausteine { hyphens: manual; -webkit-hyphens: manual; }
.bausteine h5 { font: 500 16px/1.3 var(--serif); color: var(--kreide); margin: 0 0 6px; }
.bausteine div { min-width: 0; }
.fl-tanne .bausteine p { font-size: 14.5px; line-height: 1.55; color: var(--kreide-matt); margin: 0; max-width: none; }

/* --- Nebenwege: vollständig da, aber sichtbar untergeordnet ---------------
   Sie stehen bewusst NICHT als gleich grosse Kacheln nebeneinander — das war
   der verworfene Zwischenstand vom 21.08. („Ein Kreis sagt: alles gleich
   wichtig, eine Story braucht eine Abfolge"). */
.nebenwege { margin: 16px 0 0; max-width: 58ch; border-top: 1px solid var(--linie-hell); }
.nebenwege > .ueber {
  font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--tinte-matt); margin: 12px 0 8px; max-width: none;
}
.nebenwege dl { margin: 0; }
.nebenwege dt { font-family: var(--serif); font-size: 16.5px; font-weight: 600; margin: 0 0 4px; }
.nebenwege dd { margin: 0 0 14px; font-size: 14px; color: var(--tinte-matt); }
.nebenwege dd .pruef { display: block; margin-top: 4px; color: var(--tinte); }

/* NACHGEBESSERT 25.09.2026 (Haus-System /sachwerte/, Kontrast-Scan):
   .nebenwege ist fuer Blatt gebaut (--tinte-matt/--tinte auf hellem Papier)
   — seit die Achse dieser Seite wie auf den anderen drei Stufenseiten auf
   Tanne steht, lag die Liste an Station 1 zu dunkel (1,45–1,60:1 statt
   4,5:1). Wurzel-Fix wie bei .haltinhalt p.matt oben: auf den drei dunklen
   Flaechen die helle Fassung, Rand ebenso (--linie-hell zu --linie-dunkel,
   wie bei .haltmarke). */
.fl-tanne .nebenwege, .fl-tiefe .nebenwege, .fl-tinte .nebenwege { border-top-color: var(--linie-dunkel); }
.fl-tanne .nebenwege > .ueber, .fl-tiefe .nebenwege > .ueber, .fl-tinte .nebenwege > .ueber,
.fl-tanne .nebenwege dd, .fl-tiefe .nebenwege dd, .fl-tinte .nebenwege dd { color: var(--kreide-matt); }
.fl-tanne .nebenwege dd .pruef, .fl-tiefe .nebenwege dd .pruef, .fl-tinte .nebenwege dd .pruef { color: var(--kreide); }

@media (max-width: 759px) {
  .strang { grid-template-columns: 56px 1fr; }
  .haltmarke .zeit { display: none; }
  .haltinhalt { padding: 0 0 44px 18px; }
  .haltinhalt h3 { font-size: 21px; }
  .bausteine { grid-template-columns: 1fr; }
  .bausteine div { padding: 14px 0 4px; }
  .bausteine div + div { border-left: 0; border-top: 1px solid var(--linie-dunkel); }
}

/* Das Zusatzbild an einem Haltepunkt steht in der Textspalte, nicht über die
   ganze Breite — es ist ein Detail der Station, nicht die Achse selbst. */
.achsenbild.schmal { max-width: 58ch; margin: 18px 0 0; }

/* Die Balken im Kostenbild von bild_offene_stelle(): gespart in derselben
   ruhigen Linienfarbe wie sonst im System, kostet bewusst in Zinnober — hier
   markiert der Rotstift die Kosten, nicht einen "schlechten Weg" (Ausnahme
   zu 3.4). */
.balken.gespart { fill: var(--linie-ui); }
.balken.kostet { fill: var(--zinnober); }

/* Ergänzung 24.09.2026: bild_offene_stelle() steht in #achse jetzt auf
   Tanne. --linie-ui kommt dort nur auf 2,85:1,
   --zinnober auf 2,14:1 — beide unter 3:1 fuer Flaechen, die eine Groesse
   zeigen sollen (WCAG 1.4.11). Helle Gegenstuecke, Unterschied zwischen
   gespart/kostet bleibt (Grau-Gruen gegen Warm-Koralle, kein Farbton wird
   gleich). Die Groessenunterschiede der drei "kostet"-Balken selbst stecken
   in der SVG-Breite (width-Attribut), nicht in der Farbe, und bleiben
   unangetastet. */
.fl-tanne .balken.gespart { fill: var(--kreide-matt); } /* 5,38:1 auf Tanne, ersetzt --linie-ui (2,85:1) */
.fl-tanne .balken.kostet { fill: var(--zinnober-hell); } /* 4,65:1 auf Tanne, ersetzt --zinnober (2,14:1) */

/* =============================================================================
   Kamera — alle Stufenseiten (Plan 2026-09-29, Raoul: Variante A „Kamera")
   =============================================================================
   Raouls Befund: Etage viel zu klein, 50:50 lässt links Leere und quetscht
   rechts den Text, Pfeile ohne Wand und Dach ohne Haus tragen nicht.
   Hier: ⅓ Haus / ⅔ Text, die Etage herangezoomt (ETAGE_KAMERA in
   lib/bausteine.php), die Nachbar-Etagen als blasse Kontur ohne Schrift.
   Eingegrenzt über .kreis-raster:has(.etage-feld): Startseite (Ring) und
   Abschluss-Etage (.etage-abschluss) bleiben unberührt. */
.has-js .etage-haus.kamera:not(.haus-komplett) [data-teil]:not(.aktiv) { opacity: .28; }
.etage-haus.kamera:not(.haus-komplett) [data-teil]:not(.aktiv) text,
.etage-haus.kamera:not(.haus-komplett) [data-teil]:not(.aktiv) .hs-icon { visibility: hidden; }

@media (min-width: 920px) {
  .kreis-raster:has(.etage-feld) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0 clamp(28px, 3vw, 48px);
  }
  .kreis-raster .etage-feld .etage-haus { max-width: min(100%, 460px); margin: 0 auto; }
  .kreis-raster .etage-feld .etage-haus svg { max-height: 64vh; }
  /* Die Beschriftung steht jetzt gross genug IN der Grafik — keine zweite. */
  .kreis-raster .etage-feld .etage-marke { display: none; }

  .kreis-raster:has(.etage-feld) .haltinhalt p { max-width: 64ch; }
  /* Die Kontrastpaare (zwei Wege nebeneinander nur bei genug Breite, keine
     automatische Trennung) regelt seit 30.09.2026 der Baustein selbst —
     siehe .kontrast und @container weiter oben. */
}
@media (min-width: 920px) {
  /* Nur eine senkrechte Linie (die Achse im Text) — die Trennlinie der
     Stationsspalte samt ihrem Einzug schenkte der Textspalte ~60 px weg. */
  .kreis-raster:has(.etage-feld) .stationen { border-left: 0; padding-left: 0; }
}
/* Wie der Kreis der Startseite darf dieses Raster aus dem 1180-px-Rahmen
   ausbrechen — sonst bleiben für die ⅔ Text nur ~600 px. */
@media (min-width: 1240px) {
  .kreis-raster:has(.etage-feld) { max-width: 1320px; }
}
/* Im Zoom stehen die Randnotizen („ersetzbar", „nicht ersetzbar") ausserhalb
   des Ausschnitts und würden angeschnitten — sie gehören zum ganzen Haus und
   erscheinen, wenn die Kamera zurückfährt. Ebenso die Pfeile der Etage 3:
   im Ausschnitt von Etage 1, 2 und 4 blieben von ihnen nur Spitzen am Rand. */
.etage-haus.kamera:not(.haus-komplett) .hs-notiz { visibility: hidden; }
.etage-feld[data-etage="1"] .etage-haus.kamera:not(.haus-komplett) [data-teil="3"],
.etage-feld[data-etage="2"] .etage-haus.kamera:not(.haus-komplett) [data-teil="3"],
.etage-feld[data-etage="4"] .etage-haus.kamera:not(.haus-komplett) [data-teil="3"] { opacity: 0; }

/* =============================================================================
   TEXTE IN DER SEITENMITTE (Raoul 01.10.2026)
   =============================================================================
   Vorher standen die einspaltigen Abschnitte am linken Rand, rechts blieb
   leere Fläche. Jetzt:
   – der Kopf eines Abschnitts (Kapitelzeile, Überschrift, Vorspann) steht
     zentriert,
   – die Textstücke darunter bilden EINE gemeinsame Spalte in der Mitte. Innen
     bleibt der Text linksbündig — zentrierte Absätze über mehrere Zeilen
     liest das Auge schlecht, weil jede Zeile woanders anfängt.
   Alle Textstücke bekommen dieselbe Breite in rem, sonst stünden ihre linken
   Kanten versetzt — „ch" hängt an der Schriftgröße, der größere Vorspann
   wäre damit breiter als der Absatz darunter.
   Nicht betroffen: Raster (Karten, Ablauf, Person, Stimmen, FAQ) und die
   Zeitachse mit dem Haus — die füllen die Breite ohnehin selbst.
   ========================================================================== */
.abschnitt-kopf { text-align: center; }
.abschnitt-kopf .kapitel { justify-content: center; max-width: none; }
.abschnitt-kopf h2, .abschnitt-kopf h1,
.abschnitt-kopf .lead { margin-inline: auto; }

/* Der Kopf der Startseiten-Geschichte (#stufen) ist von Hand gesetzt und
   trägt die Klasse .mitte schon — er braucht nichts weiter. */

section:not(.buehne) > .wrap > p,
section:not(.buehne) > .wrap > details,
section:not(.buehne) > .wrap > .abrat,
section:not(.buehne) > .wrap > div.reveal,
section:not(.buehne) > .wrap > nav.krumen {
  width: min(100%, 40rem);
  max-width: none;
  margin-inline: auto;
}
/* Die Zitatleiste (Überleitung) hat ihren roten Strich links — mit ihr
   zusammen zentriert die ganze Spalte, der Strich bleibt am Text. */
section:not(.buehne) > .wrap > .ueberleitung { width: min(100%, 40rem); }
/* Der Kopf der Stufenseiten trägt unter dem eigentlichen Kopf noch Überschriften
   ohne abschnitt() (z. B. „Privat bezahlen oder über den Betrieb?" in #leitthese,
   „Alles hängt an einer Person."). Sie stehen genauso mittig, die Absätze in
   derselben 40rem-Spalte. */
.stufen-kopf-text > h2, #leitthese > h2 { text-align: center; margin-inline: auto; }
#leitthese > h2 { margin-bottom: clamp(18px, 2vw, 26px); }
#leitthese > p, #leitthese > details {
  width: min(100%, 40rem);
  max-width: none;
  margin-inline: auto;
}
/* Die Karte zum nächsten Schritt (unten auf jeder Stufenseite). */
.weiter-karte { margin-inline: auto; }
/* Die Fragen-Blöcke: Überschrift mittig, die Liste als Spalte in der Mitte
   (etwas breiter als der Fließtext, weil die Fragen einzeilig bleiben sollen). */
section:not(.buehne) > .wrap > section.faq { width: min(100%, 48rem); margin-inline: auto; }
section:not(.buehne) > .wrap > section.faq > h2 { text-align: center; }

/* =============================================================================
   BEISPIELBILD DER AUSWERTUNG (Startseite, #analyse-hinweis, Raoul 01.10.2026)
   =============================================================================
   Links der Text, rechts ein echter Ausschnitt der Auswertung — leicht schräg
   wie ein Blatt, das auf dem Tisch liegt. Das Bild trägt die Fläche „Tanne",
   der Abschnitt „Tinte": Der Schatten und die helle Kante lösen das Blatt
   vom Grund. Auf schmalen Bildschirmen steht das Bild unter dem Text, gerade.
   ========================================================================== */
.hinweis-raster {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  max-width: 64rem;
  margin-inline: auto;
}
.hinweis-text p { max-width: 34rem; }
.hinweis-beispiel { margin: 0; max-width: 26rem; justify-self: center; }
.hinweis-beispiel img {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--kreide) 22%, transparent);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.hinweis-beispiel figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--kreide-matt);
  text-align: center;
}
@media (min-width: 860px) {
  .hinweis-raster { grid-template-columns: 1fr minmax(0, 24rem); }
  .hinweis-beispiel img { transform: rotate(2.2deg); transition: transform .4s ease; }
  .hinweis-beispiel a:hover img { transform: rotate(0deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .hinweis-beispiel img { transition: none; }
}


/* ============================================================================
   KOPF-HAUS (01.10.2026) — Raoul: Kopf interessanter, Idee 1 „Haus in Linien"
   =============================================================================
   Hinter dem Seitenkopf steht das Haus als feine Linienzeichnung (dieselbe
   Form wie das Haus der Seite, nur ohne Füllung und Text). Beim Laden baut
   es sich von unten auf: Fundament (= der Inhaber), dann Geschoss, dann die drei
   Pfeile von rechts (Haftung), dann Dach. Gesamt ca. 2,8 s, einmal. Erzeugt von kopf_haus_linien() in lib/kopf-haus.php.

   – Die Linien sind Kreide mit wenig Deckkraft: auf Tanne dezent, die
     Überschrift bleibt voll lesbar.
   – Je Stufenseite ist die eigene Etage betont (kh-betont): Fundament /inhaber/,
     Geschoss /mitarbeiter/, Pfeile /haftung/, Dach /sachwerte/.
   – Das Fundament ist leicht betont (Zinnober-hell, etwas dicker) — auf der
     Inhaber-Seite geht es um den Inhaber.
   – Der Rahmen ist eine feste Höhe oben in der Sektion und schneidet ab
     (overflow hidden): kein horizontales Scrollen, kein Layout-Sprung.
   – Reduzierte Bewegung: fertiges Standbild, keine Animation.
   ========================================================================== */
.fl-tanne:has(> .kopf-haus) { position: relative; }
.kopf-haus {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(600px, 60vw, 860px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Der Text liegt darüber. */
.kopf-haus ~ .wrap { position: relative; z-index: 1; }

.kopf-haus svg { position: absolute; display: block; height: auto; overflow: visible; }
/* Lage „rechts": groß, rechts unten im Rahmen, rechts angeschnitten. */
/* 01.10.2026: etwas kleiner (34 statt 40 vw) — so bleibt das Haus rechts vom
   Vorspann, auch wenn der Text vier Zeilen lang ist (/haftung/, /sachwerte/). */
.kopf-haus-rechts svg { width: clamp(340px, 34vw, 560px); right: -3vw; bottom: 0; }
/* Lage „mitte": zentriert hinter dem Text, sehr schwach. */
.kopf-haus-mitte svg { width: clamp(340px, 70vw, 980px); left: 50%; bottom: 4%; transform: translateX(-50%); }
.kopf-haus-mitte { --kh-deckung: 11%; }

.kopf-haus { --kh-deckung: 20%; }
.kh-teil {
  fill: none;
  stroke: color-mix(in srgb, var(--kreide) var(--kh-deckung), transparent);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.kh-teil.kh-betont {
  stroke: color-mix(in srgb, var(--zinnober-hell) 55%, transparent);
  stroke-width: 1.9;
}
.kh-boden, .kh-tuer { stroke-width: 0.8; }

@media (prefers-reduced-motion: no-preference) {
  .kh-teil {
    stroke-dashoffset: 1;
    animation: kh-zeichnen .7s cubic-bezier(.45, 0, .25, 1) forwards;
  }
  .kh-1 { animation-delay: .15s; }
  .kh-boden { animation-duration: .5s; animation-delay: 0s; }
  .kh-2 { animation-delay: .85s; }
  .kh-tuer { animation-delay: 1.3s; animation-duration: .5s; }
  /* Reihenfolge: Fundament, Geschoss, Tür, Pfeile (nacheinander von oben nach
     unten, 01.10.2026), zuletzt das Dach */
  .kh-3 { animation-delay: 1.35s; animation-duration: .45s; }
  .kh-3:nth-of-type(2) { animation-delay: 1.5s; }
  .kh-3:nth-of-type(3) { animation-delay: 1.65s; }
  .kh-4 { animation-delay: 1.95s; animation-duration: .8s; }
}
@keyframes kh-zeichnen { to { stroke-dashoffset: 0; } }

@media (max-width: 700px) {
  /* Handy: kleiner und tiefer — das Haus steht hinter Kapitelende, Knopf und
     Brotkrumen, nicht hinter Überschrift und Vorspann. */
  .kopf-haus { height: 780px; --kh-deckung: 11%; }
  .kopf-haus-rechts svg { width: 76vw; right: -10vw; }
  /* Die betonte Etage bleibt, aber blasser — der Text ist hier vier bis sieben
     Zeilen länger als am Desktop und läuft teils über das Haus (01.10.2026). */
  .kh-teil.kh-betont { stroke: color-mix(in srgb, var(--zinnober-hell) 42%, transparent); stroke-width: 1.7; }
}


/* ============================================================================
   PORSCHE-ANIMATION (01.10.2026) — Abschnitt #altersvorsorge-firma, /inhaber/
   =============================================================================
   Raouls Wahl: Variante C „Porsche verwandelt sich". Erzeugt von
   porsche_animation() in lib/porsche-animation.php, gestartet von
   assets/porsche.js (Klasse .pz-lauf, einmal bei 40 % Sichtbarkeit).

   Zeitplan (Sekunden, gesamt ca. 5,8):
     0,3 – 2,7   Wagen rollt ins Geschoss, Räder drehen sich
     0,5 – 2,7   Band „Lohnsteuer · Monat": pro Monat eine rote Doppelmarke, Zahl 1 bis 12
     3,1 – 3,6   Wagen blendet aus
     3,2 – 4,4   Fach im Fundament füllt sich von unten, Beschriftung „Altersvorsorge"
     4,4 – 5,0   Band wechselt auf „Lohnsteuer heute: keine", die Marken verblassen auf 25 %
     5,0 – 5,8   gestrichelte Linie zur Notiz „versteuert wird die Auszahlung"

   – Nur Linien, keine Kästen. Farben aus den Tokens; auf heller Fläche (.fl-blatt)
     wechseln sie auf Tinte und Zinnober.
   – Endzustand ist der Grundzustand: ohne JavaScript und bei reduzierter
     Bewegung steht das Haus mit gefülltem Fach, verblassten Marken,
     „Lohnsteuer heute: keine" und der Notiz da, ohne Wagen.
   – Die Schrift im SVG ist 21 Einheiten groß: bei 390 px Breite (Maßstab ca. 0,68)
     bleiben das etwa 14 px.
   ========================================================================== */
.porsche {
  --pz-linie: var(--kreide-matt);
  --pz-stark: var(--kreide);
  --pz-text: var(--kreide);
  --pz-rot: var(--zinnober-hell);
  width: min(100%, 36rem);
  margin: clamp(30px, 4vw, 52px) auto clamp(34px, 4vw, 52px);
}
.fl-blatt .porsche {
  --pz-linie: var(--tinte-matt);
  --pz-stark: var(--tinte);
  --pz-text: var(--tinte);
  --pz-rot: var(--zinnober);
}
.porsche svg { display: block; width: 100%; height: auto; }
.porsche line, .porsche rect, .porsche polygon, .porsche path, .porsche circle {
  fill: none;
  stroke: var(--pz-linie);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pz-boden, .pz-regel { stroke-width: 1 !important; opacity: .7; }
.pz-karosse, .pz-fenster, .pz-licht, .pz-rad circle, .pz-rad line { stroke: var(--pz-stark) !important; }
.pz-karosse { stroke-width: 1.8 !important; }
.pz-fenster, .pz-licht, .pz-rad line { stroke-width: 1.3 !important; }
.pz-fach-rahmen { stroke: var(--pz-rot) !important; stroke-width: 1.8 !important; }
.pz-reihe { stroke: var(--pz-rot) !important; stroke-width: 1.2 !important; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .8; }
.pz-marke line { stroke: var(--pz-rot) !important; stroke-width: 2.2 !important; }
.pz-strich { stroke: var(--pz-rot) !important; stroke-width: 2 !important; }

.porsche text {
  font-family: var(--sans);
  font-size: 21px;
  fill: var(--pz-text);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Beschriftungen im Versal-Stil der .pos-Zeilen */
.pz-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-variation-settings: 'wght' 500;
  font-weight: 500;
}
.pz-zahl { font-size: 28px; font-weight: 500; font-variation-settings: 'wght' 500; fill: var(--pz-rot); }
.pz-notiz { font-weight: 500; font-variation-settings: 'wght' 500; }

/* Endzustand = Grundzustand */
.pz-wagen { opacity: 0; }
.pz-monat { opacity: 0; }
.pz-marken { opacity: .25; }

/* Für Vorleseprogramme, nicht sichtbar */
.pz-nur-leser {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Überschrift mit zwei Satzpaaren: Frage leicht, Antwort kräftig und größer.
   titel_zweizeilig() färbt jede Zeile ab der zweiten in die Akzentfarbe: Zeile 2
   (Antwort auf die erste Frage) bleibt deshalb ausdrücklich in der Textfarbe. */
.pz-abschnitt h2 .zeilenmaske:nth-child(odd) .zeilenauf {
  font-size: .78em;
  font-variation-settings: 'opsz' 32, 'wght' 380;
  font-weight: 400;
}
.pz-abschnitt h2 .zeilenmaske:nth-child(even) .zeilenauf {
  font-size: 1.2em;
  font-variation-settings: 'opsz' 32, 'wght' 650;
  font-weight: 650;
}
.pz-abschnitt h2 .zeilenmaske:nth-child(2) .ton { color: inherit; }
.pz-abschnitt h2 .zeilenmaske:nth-child(3) { margin-top: .9em; }
.pz-abschnitt h2 .zeilenmaske:nth-child(odd) .zeilenauf:not(.ton) { color: var(--kreide-matt); }
.fl-blatt.pz-abschnitt h2 .zeilenmaske:nth-child(odd) .zeilenauf:not(.ton) { color: var(--tinte-matt); }
.pz-abschnitt h2 .zeilenmaske:nth-child(3) .ton { color: var(--zinnober-hell); }
.fl-blatt.pz-abschnitt h2 .zeilenmaske:nth-child(3) .ton,
.fl-blatt.pz-abschnitt h2 .zeilenmaske:nth-child(4) .ton { color: var(--zinnober); }

/* Teaser im Seitenkopf von /inhaber/ (heller Knopf, damit er nicht mit dem roten konkurriert) */
.abschnitt-kopf .pz-teaser {
  margin-inline: auto; margin-top: 26px;
  max-width: 40rem;
  hyphens: manual; -webkit-hyphens: manual;
}
.fl-tanne .abschnitt-kopf .pz-teaser { color: var(--kreide); }
.abschnitt-kopf .pz-teaser-knopf { margin-inline: auto; margin-top: 18px; margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Ausgangszustand, solange die Animation noch nicht gelaufen ist */
  .has-js .pz-wagen { opacity: 1; transform: translateX(-158px); }
  .has-js .pz-monat { opacity: 0; }
  .has-js .pz-marken { opacity: 1; }
  .has-js .pz-marke, .has-js .pz-zahl { opacity: 0; }
  .has-js .pz-marke { transform-box: fill-box; transform-origin: 50% 100%; }
  .has-js .pz-fach-rahmen, .has-js .pz-vorsorge, .has-js .pz-keine,
  .has-js .pz-strich, .has-js .pz-notiz { opacity: 0; }
  .has-js .pz-reihe { stroke-dashoffset: 1; }
  .pz-rad { transform-box: fill-box; transform-origin: 50% 50%; }

  .pz-lauf .pz-wagen {
    animation: pz-rollen 2.4s cubic-bezier(.45, .05, .25, 1) .3s forwards,
               pz-aus .5s ease 3.1s forwards;
  }
  .pz-lauf .pz-rad { animation: pz-drehen 2.4s cubic-bezier(.45, .05, .25, 1) .3s forwards; }
  .pz-lauf .pz-monat { animation: pz-ein .3s ease .2s forwards, pz-aus .3s ease 4.4s forwards; }
  .pz-lauf .pz-marke { animation: pz-marke .25s ease calc(.5s + var(--i) * .2s) forwards; }
  .pz-lauf .pz-zahl { animation: pz-tick .2s linear calc(.5s + var(--i) * .2s) forwards; }
  .pz-lauf .pz-zahl-letzte { animation: pz-ein .01s linear calc(.5s + var(--i) * .2s) forwards; }
  .pz-lauf .pz-marken { animation: pz-verblassen .6s ease 4.4s forwards; }
  .pz-lauf .pz-fach-rahmen { animation: pz-ein .4s ease 3.2s forwards; }
  .pz-lauf .pz-reihe { animation: pz-zeichnen .35s ease calc(3.3s + var(--j) * .14s) forwards; }
  .pz-lauf .pz-vorsorge { animation: pz-ein .5s ease 3.5s forwards; }
  .pz-lauf .pz-keine { animation: pz-ein .4s ease 4.75s forwards; }
  .pz-lauf .pz-strich { animation: pz-ein .15s ease calc(5s + var(--k) * .12s) forwards; }
  .pz-lauf .pz-notiz { animation: pz-ein .5s ease 5.3s forwards; }
}
@keyframes pz-rollen { from { transform: translateX(-158px); } to { transform: translateX(0); } }
@keyframes pz-drehen { from { transform: rotate(0deg); } to { transform: rotate(860deg); } }
@keyframes pz-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pz-aus { from { opacity: 1; } to { opacity: 0; } }
/* Jede Zahl steht nur bis zum nächsten Monat; die zwölfte bleibt. */
@keyframes pz-tick { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pz-marke { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } }
@keyframes pz-verblassen { from { opacity: 1; } to { opacity: .25; } }
@keyframes pz-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* =============================================================================
   EINSTIEGSZITAT (01.10.2026, Raoul)
   Das Zitat einer bekannten Person steht als erstes im Kopf jeder Unterseite,
   über der Kapitelzeile. Gleiche Bildsprache wie .ueberleitung / .zwischenruf:
   Serif, kursiv, roter Strich links. Zentriert in der 40rem-Spalte wie der
   übrige Kopf. Die Angabe darunter im Versal-Stil der .pos-Zeilen. Auf Tanne.
   Keine Kästchen, kein Rahmen. Quellen stehen nur in lib/zitate.php.
   ========================================================================== */
.einstieg-zitat {
  width: min(100%, 40rem);
  margin: 0 auto clamp(26px, 3.2vw, 40px);
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 3px solid var(--zinnober-hell);
}
.einstieg-zitat blockquote { margin: 0 0 12px; padding: 0; }
.einstieg-zitat blockquote p {
  max-width: none;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 0.95rem + 1.1vw, 1.75rem);
  line-height: 1.3;
  font-style: italic;
  font-variation-settings: 'opsz' 32, 'wght' 400;
  color: var(--kreide);
  overflow-wrap: break-word;
}
.einstieg-zitat figcaption {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  hyphens: none;
  -webkit-hyphens: none;
  font-variation-settings: 'wght' 500;
  color: var(--kreide-matt);
}

/* Komplettprüfung 01.10.2026 (K16): Die globale Bremse in marke.css
   („* {animation-duration…}") greift nicht auf Pseudo-Elemente — der
   Scroll-Pfeil der Startseite lief bei reduzierter Bewegung endlos weiter. */
@media (prefers-reduced-motion: reduce) {
  .has-js .abwaerts i::after { animation: none; transform: none; }
}

/* =============================================================================
   KOMPLETTPRÜFUNG 01.10.2026 — K25 Gestaltung
   ============================================================================= */
/* Trefferfläche der Haus-Steine: unsichtbar, aber klickbar. */
.stein-treffer { fill: transparent; stroke: none; }

/* Das Formular „Erstgespräch vereinbaren" gehört zu den Abschnittsköpfen,
   die laut „Texte in der Seitenmitte" zentriert stehen. */
.erstgespraech { width: min(100%, 40rem); margin-inline: auto; }
.erstgespraech > h2 { text-align: center; }
.erstgespraech > p:first-of-type { margin-inline: auto; text-align: center; }

/* Linienhaus auf dem Handy: Dort liegt die Zeichnung zwangsläufig hinter dem
   Fließtext und wirkte wie eine Durchstreichung. Unter 760 px deutlich leiser,
   auch die betonte Etage. */
@media (max-width: 759px) {
  .kopf-haus, .kopf-haus-mitte { --kh-deckung: 7%; }
  .kh-teil.kh-betont { stroke: color-mix(in srgb, var(--zinnober-hell) 22%, transparent); stroke-width: 1.4; }
}

/* Steinleiste auf dem Handy: bricht um statt den letzten Chip abzuschneiden
   (/mitarbeiter/ hat sieben Steine). */
.etage-plaetze { flex-wrap: wrap; overflow-x: visible; }

/* Fußzeilen-Knopf „Cookie-Einstellungen" hatte keinen Stil (Browser-Standard). */
.fuss__consent {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.fuss__consent:focus-visible { outline: 2px solid var(--zinnober-hell); outline-offset: 3px; }

/* Erstgespräch-Formular mittig unter dem zentrierten Kopf; das Einwilligungs-
   Häkchen (K7) links neben dem Satz, in normaler Schrift — nicht in der
   Versal-Optik der Feldbeschriftungen. */
.erstgespraech .formular { width: min(100%, 28rem); margin-inline: auto; }
.erstgespraech .formular p { max-width: none; }
.formular .einwilligung { display: flex; gap: 12px; align-items: flex-start; }
.formular .einwilligung input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; padding: 0; }
.formular .einwilligung label {
  margin: 0; text-transform: none; letter-spacing: normal;
  font-size: 15px; line-height: 1.5; font-weight: 400;
}