/* ══════════════════════════════════════════════════════════════════════════
   HBC Design System — Theme-Fassung
   Übernommen aus dem freigegebenen Prototyp V5.18
   (03_Marke_Design/mockups/homepage-v5-18-final-polish/styles.css).

   Unterschied zur Prototypfassung: Die Design-Tokens stehen NICHT mehr hier,
   sondern in theme.json. WordPress erzeugt daraus --wp--preset--*-Variablen.
   Der :root-Block unten bildet die HBC-Kurznamen darauf ab, damit die
   Regeln aus dem Prototyp unverändert weiterlaufen — eine Übersetzungs-
   schicht statt einer zweiten Wahrheit.

   Änderungen an Farben, Schriftgrößen und Abständen gehören in theme.json.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Farben — Quelle: theme.json settings.color.palette */
  --dunkelblau:var(--wp--preset--color--dunkelblau);
  --tief:var(--wp--preset--color--tief);
  --sand:var(--wp--preset--color--sand);
  --clay:var(--wp--preset--color--clay);
  --rost:var(--wp--preset--color--rost);
  --rost-text:var(--wp--preset--color--rost-text);
  --gold:var(--wp--preset--color--gold);
  --weiss:var(--wp--preset--color--weiss);
  --text-dunkel:var(--wp--preset--color--text-dunkel);
  --text-hell:var(--wp--preset--color--text-hell);
  --linie-hell:var(--wp--preset--color--linie-hell);

  /* Schrift — Quelle: theme.json settings.typography.fontFamilies */
  --font-display:var(--wp--preset--font-family--display);
  --font-text:var(--wp--preset--font-family--text);

  /* Layout — im Theme bleiben diese Werte hier, weil theme.json dafür
     keine Entsprechung hat. */
  --bahn:1180px;
  --rand:clamp(1.1rem,4vw,4rem);
  --tap:44px;
  --kopf-h:clamp(76px,8.4vh,94px);
  --e:cubic-bezier(.22,.61,.36,1);
}

/* ══════════════════════════════════════════════════════════════════════════
   HBC Digital — V5.12 · Orientierungsnetz und Seitensystem
   Neu geschriebenes Stylesheet. Die Token stammen unverändert aus der HBC
   Visual Identity 2026; neu ist, dass es nur noch EIN Baukastensatz ist
   statt der über viele Versionen gewachsenen Schichten.

   Der ganze Baukasten in zehn Bausteinen:
     .kopf .krume .phero .anav .karte .trio .kern .teaser .ctaband .fuss
   Dazu genau zwei Sonderbausteine: .netz (nur Start) und .check (Assessment).
   Mehr gibt es nicht. Jede Seite entsteht aus diesen Teilen.

   Flächenrhythmus: --tief (dunkel) · --sand · --weiss, im Wechsel.
   Gold = Orientierung und Struktur. Rost = ausschliesslich Handlung.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Token ─────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 16px)}
body{margin:0;background:var(--sand);color:var(--dunkelblau);font-family:var(--font-text);
  /* V5.16: Grundschrift 17–18 px. Die Seite soll allein ueber die
     Ueberschriften scanbar sein, deshalb wachsen H2 und H3 staerker mit. */
  line-height:1.66;font-size:clamp(17px,.36vw + 15.4px,18px);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bahn{width:min(var(--bahn),calc(100% - 2*var(--rand)));margin-inline:auto}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--dunkelblau);
  color:var(--sand);padding:12px 20px}
.skiplink:focus{left:0}

/* ── 2 · Typografie ────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;
  letter-spacing:-.015em;margin:0}
em{font-style:normal;color:var(--gold)}
h1{font-size:clamp(34px,4.4vw,64px);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(27px,3.1vw,44px)}
h3{font-size:clamp(20px,2vw,29px)}
/* Sicherheitsnetz: ein einzelnes langes Wort mit Sperrung darf die Spalte
   nicht sprengen. Greift im Normalfall nie. */
.augen{margin:0 0 15px;max-width:46ch;overflow-wrap:anywhere;font-family:var(--font-display);
  font-size:clamp(13px,.18vw + 11.9px,14px);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--rost-text);
  display:inline-flex;align-items:center;gap:11px}
.augen::before{content:"";width:24px;height:2px;background:currentColor;flex:none}
.augen--gold{color:var(--gold)}
/* Auf dunklen Flaechen ist Rost-Text zu schwach (2,66:1); dort gilt Gold wie bei .augen--gold. */
.flaeche--tief .augen{color:var(--gold)}
.lead{margin:22px 0 0;font-size:clamp(17.5px,.85vw + 10.5px,21px);line-height:1.55;max-width:54ch}
.fliess{margin:15px 0 0;font-size:clamp(16px,.42vw + 14.1px,17.5px);line-height:1.7;
  color:var(--text-dunkel);max-width:64ch}
.flaeche--tief .fliess,.flaeche--tief .lead{color:var(--text-hell)}
.flaeche--tief h2,.flaeche--tief h3{color:var(--sand)}

/* ── 3 · Flächen: der Rhythmus der ganzen Website ──────────────────────── */
.flaeche{padding:clamp(56px,7vw,104px) 0}
.flaeche--tief{background:var(--tief);color:var(--sand)}
.flaeche--sand{background:var(--sand)}
.flaeche--weiss{background:var(--weiss)}
.fkopf{max-width:660px;margin-bottom:clamp(28px,3.4vw,46px)}
.fkopf .fliess{margin-top:16px}

/* ── 4 · Kopf: grosses Logo, sechs Punkte, ein CTA ─────────────────────── */
.kopf{position:fixed;inset:0 0 auto;z-index:100;height:var(--kopf-h);
  background:rgba(27,31,38,.92);backdrop-filter:blur(12px);color:var(--sand);
  border-bottom:1px solid var(--linie-hell);
  transition:background .3s var(--e),border-color .3s var(--e)}
.kopf--hell{background:rgba(235,231,217,.94);color:var(--dunkelblau);border-bottom-color:var(--clay)}
.kopf__inner{height:100%;width:min(1320px,calc(100% - 2*var(--rand)));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(18px,3vw,44px)}
.logo{display:flex;align-items:center;flex:none;min-height:var(--tap);text-decoration:none}
/* Deutlich groesser als bisher (war 20 px): die Wortmarke ist das erste
   Erkennungsmerkmal und war zu zurueckhaltend gesetzt. */
.logo svg{height:clamp(28px,2.9vw,40px);width:auto;color:currentColor;display:block}
.nav{margin-left:auto}
/* Zwei Klassen, damit die Regel .cta{display:inline-flex} aus Abschnitt 5
   nicht gewinnt — gleiche Spezifität hätte die spätere Regel siegen lassen. */
.nav .nav__cta{display:none}
.nav ul{display:flex;gap:clamp(14px,1.9vw,30px);list-style:none;margin:0;padding:0}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:40px;
  font-family:var(--font-display);font-size:clamp(15px,.3vw + 12.9px,16px);font-weight:500;
  text-decoration:none;opacity:.82;transition:opacity .2s}
.nav a:hover{opacity:1}
.nav a[aria-current]{opacity:1;font-weight:600}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--gold)}
.navschalter{display:none;align-items:center;gap:10px;margin-left:auto;min-height:var(--tap);
  padding:0 4px;background:none;border:0;cursor:pointer;color:inherit;
  font-family:var(--font-display);font-size:.88rem;font-weight:500}
.navschalter__striche{position:relative;display:block;width:20px;height:2px;background:currentColor}
.navschalter__striche::before,.navschalter__striche::after{content:"";position:absolute;left:0;
  width:20px;height:2px;background:currentColor;transition:transform .25s var(--e)}
.navschalter__striche::before{top:-6px} .navschalter__striche::after{top:6px}
.navschalter[aria-expanded="true"] .navschalter__striche{background:transparent}
.navschalter[aria-expanded="true"] .navschalter__striche::before{transform:translateY(6px) rotate(45deg)}
.navschalter[aria-expanded="true"] .navschalter__striche::after{transform:translateY(-6px) rotate(-45deg)}

/* ── 4a · Untermenü Leistungen ─────────────────────────────────────────

   V5.18 kennt kein Untermenue. Dieses hier ist eine bewusste Ergaenzung
   fuer WordPress: Die fuenf Leistungsfelder sind sonst nur ueber die
   Uebersichtsseite erreichbar.

   Gestaltet wird es wie eine HBC-Flaeche, nicht wie ein Menue: dunkle
   Grundflaeche, Sand darauf, Gold als Marke der aktiven Zeile, feine
   Linien statt Kaesten. Ein weisser Standardkasten waere ein Fremdkoerper.

   Der Punkt „Leistungen" bleibt ein echter Link auf die Uebersicht. Nur
   der Pfeil daneben oeffnet — sonst waere die Uebersichtsseite auf
   Touchgeraeten nicht mehr erreichbar. */

/* Alle Regeln der Klappe stehen als „.nav .nav__unter". Ohne den
   zusaetzlichen .nav davor gewinnt die allgemeine Regel .nav ul aus
   Abschnitt 4 — sie ist spezifischer und setzt gap auf bis zu 30 px.
   Die Klappe stand daraufhin mit fingerbreiten Luecken da. */

.nurlesbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.nav__hat{position:relative;display:flex;align-items:center;gap:2px}

.nav__auf{display:inline-flex;align-items:center;justify-content:center;
  width:26px;min-height:40px;padding:0;background:none;border:0;cursor:pointer;
  color:inherit;opacity:.82;transition:opacity .2s}
.nav__auf:hover{opacity:1}
.nav__pfeil{display:block;width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .25s var(--e)}
.nav__auf[aria-expanded="true"] .nav__pfeil{transform:translateY(1px) rotate(-135deg)}

@media (min-width:1151px){
  .nav .nav__unter{position:absolute;top:calc(100% + 14px);left:-14px;z-index:10;
    display:flex;flex-direction:column;gap:0;
    min-width:268px;margin:0;padding:6px 0;list-style:none;
    background:var(--tief);border:1px solid var(--linie-hell);border-radius:4px;
    box-shadow:0 12px 28px rgba(27,31,38,.28);
    opacity:0;visibility:hidden;transform:translateY(-5px);
    transition:opacity .18s var(--e),transform .18s var(--e),visibility .18s}
  /* Unsichtbare Bruecke: Zwischen Menuepunkt und Klappe liegen 14 px. Ohne
     sie faellt der Zeiger auf dem Weg nach unten aus dem Hover heraus und
     die Klappe schliesst sich unter der Hand weg. */
  .nav .nav__unter::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
  .nav .nav__hat:hover .nav__unter,
  .nav .nav__hat:focus-within .nav__unter,
  .nav .nav__auf[aria-expanded="true"] + .nav__unter{opacity:1;visibility:visible;transform:none}

  .nav .nav__unter li + li{border-top:1px solid rgba(235,231,217,.09)}
  .nav .nav__unter a{display:block;width:100%;min-height:0;padding:11px 18px 11px 20px;
    color:var(--sand);opacity:.9;font-size:15px;font-weight:500;line-height:1.35;
    border-left:2px solid transparent;transition:opacity .18s,border-color .18s,background .18s}
  .nav .nav__unter a:hover,.nav .nav__unter a:focus-visible{opacity:1;border-left-color:var(--gold);
    background:rgba(235,231,217,.05)}
  .nav .nav__unter a[aria-current]{opacity:1;font-weight:600;border-left-color:var(--gold)}
  /* Der Goldstrich unter dem aktiven Hauptpunkt gehoert nicht in die Klappe. */
  .nav .nav__unter a[aria-current]::after{display:none}

  /* Auf hellem Kopf bleibt die Klappe dunkel — sie ist eine eigene Flaeche,
     kein Teil der Kopfleiste. */
  .kopf--hell .nav .nav__unter{background:var(--tief);border-color:var(--linie-hell)}
  .kopf--hell .nav .nav__unter a{color:var(--sand)}
}

@media (max-width:1150px){
  /* Mobil eine Ziehharmonika: kein schwebender Kasten, sondern eine
     eingerueckte Fortsetzung der Liste.

     Der Pfeil liegt als absolut positionierter Knopf ueber dem rechten Rand
     der ERSTEN Zeile. Ein erster Versuch hat ihn stattdessen mit einem
     negativen margin-top nach oben gezogen — er landete dadurch eine Zeile
     hoeher, neben „Ansatz" statt neben „Leistungen". */
  .nav__hat{display:block;position:relative}
  .nav__hat > a{padding-right:52px}
  .nav__auf{position:absolute;top:0;right:0;margin:0;
    width:var(--tap);height:var(--tap);min-height:var(--tap)}
  .nav .nav__unter{display:none;margin:0;padding:0 0 6px;list-style:none;
    border-top:1px solid var(--linie-hell)}
  .nav .nav__auf[aria-expanded="true"] + .nav__unter{display:block}
  .kopf--hell .nav .nav__unter{border-top-color:var(--clay)}
  .nav .nav__unter li + li{border-top:1px solid rgba(235,231,217,.09)}
  .kopf--hell .nav .nav__unter li + li{border-top-color:rgba(40,45,55,.09)}
  .nav .nav__unter a{padding-left:18px;font-size:.96rem;opacity:.9;
    border-left:2px solid transparent}
  .nav .nav__unter a[aria-current]{opacity:1;font-weight:600;border-left-color:var(--gold)}
}

/* ── 4b · Werte aus dem Prototyp ───────────────────────────────────────

   V5.18 traegt einige Gestaltungswerte als inline-style im Markup. Ein
   Gutenberg-Block kann das nicht: Der Editor vergleicht das gespeicherte
   Markup mit dem, was der Block selbst erzeugen wuerde, und meldet jede
   Abweichung als ungueltigen Inhalt.

   Die Werte stehen deshalb hier — dort, wo Gestaltung ohnehin hingehoert.
   Uebersetzt wird beim Uebertragen (uebertragen.py, Tabelle STILE). */

/* Orientierungsnetz auf der Startseite.

   .np liest left:var(--x) und top:var(--y). Im Prototyp stehen diese
   beiden Werte je Knoten im style-Attribut. Ohne sie greift left ins Leere
   und faellt auf auto zurueck — alle fuenf Knoten lagen daraufhin
   uebereinander auf einem Haufen, waehrend im DOM jeder einzelne vorhanden
   war. Genau das war der sichtbare Startseitenfehler.

   Die Reihenfolge der Knoten ist Teil der Gestaltung und in der gesperrten
   Gruppe festgenagelt; :nth-child ist deshalb tragfaehig. */
.netz__punkte .np:nth-child(1){--x:12%;--y:20%}
.netz__punkte .np:nth-child(2){--x:46%;--y:7%}
.netz__punkte .np:nth-child(3){--x:80%;--y:30%}
.netz__punkte .np:nth-child(4){--x:52%;--y:58%}
.netz__punkte .np:nth-child(5){--x:16%;--y:80%}

/* Der weiterfuehrende Link unter einem Abschnitt. Zwei Abstaende, weil der
   Prototyp zwei benutzt — der engere steht dort, wo der Abschnitt selbst
   schon Luft nach unten hat.

   Der Abstand nach UNTEN steht hier ausdruecklich, obwohl er im Prototyp
   nur die Browservorgabe ist. Grund: Diese Absaetze sind das letzte Kind
   ihres Abschnitts, und WordPress nullt dort den unteren Abstand
   (:where(.is-layout-flow) > :last-child). Vier Abschnitte der Startseite
   waren dadurch je 18 px zu flach. Was gewollt ist, gehoert aufgeschrieben
   — auf eine Browservorgabe sollte sich eine Gestaltung ohnehin nicht
   verlassen. */
.mehr{margin-top:clamp(24px,3vw,34px)}
.mehr--eng{margin-top:clamp(22px,2.6vw,30px)}
/* Zwei Klassen, weil die Gegenregel von WordPress
     :root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }
   auf (0,2,0) kommt: :root zaehlt als Pseudoklasse UND :last-child auch.
   :where() selbst zaehlt null, das taeuscht. Ein einfaches p.mehr (0,1,1)
   verliert deshalb, obwohl es spezifischer aussieht. */
.bahn p.mehr,.bahn p.mehr--eng,.bahn p.zurueck{margin-bottom:1em}

/* Hinweis im Fliesstext, mit ruhiger Linie statt Kasten. */
.fliess--hinweis{margin-top:clamp(26px,3.2vw,38px);padding-left:16px;
  border-left:2px solid var(--clay)}

/* ── 5 · Handlung: Rost ist ausschliesslich CTA ────────────────────────── */
.cta{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);
  padding:14px 28px;background:var(--rost);color:var(--weiss);border:0;border-radius:3px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(15.5px,.4vw + 14px,16.5px);
  text-decoration:none;
  cursor:pointer;transition:background .25s var(--e),transform .25s var(--e)}
.cta::after{content:"→";transition:transform .25s var(--e)}
.cta:hover{background:var(--rost-text);transform:translateY(-2px)}
.cta:hover::after{transform:translateX(4px)}
.cta--klein{min-height:38px;padding:9px 17px;font-size:.86rem;flex:none}
.cta--gross{padding:16px 32px;font-size:1.02rem}
/* WordPress-Button-Block mit .cta (CTA-Band-Pattern, 404-Seite): Die Optik gehoert auf den
   Link, der Wrapper bleibt unsichtbar. Sonst liegt das Rost-Feld doppelt (Wrapper und Link),
   und der Pfeil des Wrappers bricht in eine zweite Zeile um. */
.wp-block-button.cta{display:inline-flex;padding:0;min-height:0;background:none;border-radius:0}
.wp-block-button.cta::after{content:none}
.wp-block-button.cta:hover{background:none;transform:none}
.wp-block-button.cta>.wp-block-button__link{display:inline-flex;align-items:center;gap:10px;
  min-height:var(--tap);padding:14px 28px;background:var(--rost);color:var(--weiss);border:0;
  border-radius:3px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(15.5px,.4vw + 14px,16.5px);text-decoration:none;cursor:pointer;
  transition:background .25s var(--e),transform .25s var(--e)}
.wp-block-button.cta>.wp-block-button__link::after{content:"→";transition:transform .25s var(--e)}
.wp-block-button.cta>.wp-block-button__link:hover{background:var(--rost-text);transform:translateY(-2px)}
.wp-block-button.cta>.wp-block-button__link:hover::after{transform:translateX(4px)}
.wp-block-button.cta--gross>.wp-block-button__link{padding:16px 32px;font-size:1.02rem}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(15.5px,.4vw + 14px,16.5px);
  color:var(--rost-text);text-decoration:none;border-bottom:1px solid rgba(158,71,40,.32);
  padding-bottom:2px;
  transition:border-color .25s var(--e)}
.tlink::after{content:"→";font-size:.85em;transition:transform .25s var(--e)}
.tlink:hover{border-bottom-color:var(--rost)}
.tlink:hover::after{transform:translateX(4px)}
.flaeche--tief .tlink{color:var(--gold);border-bottom-color:rgba(217,164,65,.34)}
.flaeche--tief .tlink:hover{border-bottom-color:var(--gold)}
/* Das CTA-Band ist eine dunkle Flaeche ohne .flaeche--tief: derselbe Textlink wie dort (Rost waere 2,66:1). */
.ctaband .tlink{color:var(--gold);border-bottom-color:rgba(217,164,65,.34)}
.ctaband .tlink:hover{border-bottom-color:var(--gold)}
.tlink--zurueck::after{content:none}
.tlink--zurueck::before{content:"←";font-size:.85em}
/* .tlink war fuer <a> gedacht. Seit V5.13 oeffnen auch <button> den
   Lead-Dialog — ohne diesen Reset zeichnet der Browser sie als Kasten. */
button.tlink{background:none;padding:0 0 2px;border-width:0 0 1px;
  cursor:pointer;text-align:left}

/* ── 6 · Brotkrume: „wo bin ich“ auf jeder Unterseite ──────────────────── */
.krume{margin:0 0 clamp(18px,2.2vw,26px);font-size:clamp(14px,.25vw + 12.5px,15px);
  color:var(--text-hell)}
.krume ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:3px 9px}
.krume li{display:flex;align-items:center;gap:9px}
.krume li+li::before{content:"›";color:var(--gold)}
.krume a{text-decoration:none;border-bottom:1px solid rgba(154,163,172,.4);padding-bottom:1px}
.krume a:hover{border-bottom-color:var(--gold)}
.krume [aria-current]{color:var(--sand)}

/* ── 7 · Seitenkopf der Unterseiten ────────────────────────────────────── */
.phero{position:relative;background:var(--tief);color:var(--sand);
  padding:calc(var(--kopf-h) + clamp(34px,4.4vw,60px)) 0 clamp(34px,4.4vw,58px)}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold) 0,var(--gold) 128px,var(--linie-hell) 128px)}
/* Unterseiten etwas ruhiger als die Startseite: 48–56 statt 52–64 px. */
.phero h1{color:var(--sand);max-width:19ch;font-size:clamp(32px,3.9vw,56px)}
.phero .lead{color:var(--text-hell);max-width:62ch}
/* Themenzeile im Seitenkopf der Praxis-Cases: dunkles Grau auf Dunkelblau war 1,66:1. */
.phero .fliess{color:var(--text-hell)}

/* ── 7a · Schlichte Seiten ohne eigenen Seitenkopf ─────────────────────────
   .kopf ist position:fixed (Abschnitt 3) und nimmt dadurch keinen Platz im
   Fluss ein. Seiten, deren erster Inhaltsblock .phero oder .hero ist,
   gleichen das selbst aus (siehe oben bzw. der Hero der Startseite). Jede
   andere Seite hat keinen Ausgleich; ihr Inhalt begann sonst unter der
   Kopfzeile.

   Bewusst NICHT an Template oder Body-Klasse festgemacht: seite-schmal wird
   sowohl MIT eigenem Seitenkopf verwendet (z. B. Über HBC, .phero im Inhalt)
   als auch OHNE (Kontakt, Karriere) -- eine Regel je Template/Body-Klasse
   traefe innerhalb derselben Vorlage mal zu viel, mal zu wenig. Die Pruefung
   auf :has(.phero, .hero) fragt stattdessen direkt das ab, worauf es
   ankommt: hat DIESE Seite bereits ihren eigenen Ausgleich oder nicht --
   unabhaengig von Vorlage oder Slug. Trifft aktuell auf Impressum,
   Datenschutzerklaerung, Kontakt und Karriere zu; jede kuenftige Seite ohne
   .phero/.hero profitiert automatisch mit, jede mit eigenem Seitenkopf
   bleibt automatisch unangetastet -- auch die Startseite, die mit .hero
   bereits ihren eigenen Ausgleich mitbringt. */
#inhalt:not(:has(.phero,.hero)){padding-top:calc(var(--kopf-h) + clamp(28px,3.6vw,48px));
  padding-bottom:clamp(48px,6vw,88px)}
/* 404-Seite: Suche unter dem Seitenkopf, mit Luft zum Fuss. */
.suche404{padding-block:clamp(36px,5vw,64px)}
.phero .wp-block-buttons{margin-top:clamp(20px,2.4vw,28px)}

/* ── 8 · Abschnittsnavigation: Orientierung innerhalb einer Seite ──────── */
.anav{position:sticky;top:var(--kopf-h);z-index:20;background:var(--clay);
  border-bottom:1px solid rgba(40,45,55,.12)}
.anav__inner{display:flex;align-items:center;gap:8px clamp(14px,2vw,26px);
  padding:11px 0;overflow-x:auto;scrollbar-width:none}
.anav__inner::-webkit-scrollbar{display:none}
.anav__l{flex:none;font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rost-text)}
/* 40 px unbedingt, nicht nur unter (hover:none): diese Medienabfrage laesst
   sich im Test nicht zuverlaessig emulieren, und ein Mindestziel gehoert
   nicht an eine Bedingung, die man nicht pruefen kann. */
.anav a{flex:none;display:inline-flex;align-items:center;min-height:40px;
  font-family:var(--font-display);font-size:clamp(14.5px,.25vw + 13px,15.5px);font-weight:500;
  color:var(--text-dunkel);text-decoration:none;white-space:nowrap;transition:color .2s}
.anav a:hover,.anav a.ist-aktiv{color:var(--dunkelblau)}
.anav a.ist-aktiv{font-weight:600}

/* ── 9 · DIE Kartengrammatik — es gibt nur diese eine ──────────────────── */
.karten{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,282px),1fr))}
.karten--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.karten--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.karte{position:relative;display:flex;flex-direction:column;
  padding:clamp(20px,2.3vw,28px);border-radius:4px;
  border:1px solid var(--clay);border-left:3px solid var(--gold);background:var(--weiss);
  transition:border-color .25s var(--e),transform .25s var(--e)}
.flaeche--weiss .karte{background:rgba(235,231,217,.42)}
.flaeche--tief .karte{background:rgba(235,231,217,.035);border-color:var(--linie-hell);
  border-left-color:var(--gold)}
.karte--klick:hover{transform:translateY(-3px);border-color:#C4BAA7}
.flaeche--tief .karte--klick:hover{border-color:#454C58}
.karte__nr{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.12em;
  color:var(--rost-text)}
.flaeche--tief .karte__nr{color:var(--gold)}
.karte__t{margin:9px 0 0;font-size:clamp(20px,1.5vw,23px);line-height:1.24}
.karte__t a{text-decoration:none}
.karte__t a::after{content:"";position:absolute;inset:0}
.karte__x{margin:11px 0 0;font-size:clamp(16.5px,.35vw + 15px,17.5px);line-height:1.62;
  color:var(--text-dunkel)}
.flaeche--tief .karte__x{color:var(--text-hell)}
.karte__liste{list-style:none;margin:13px 0 0;padding:13px 0 0;display:grid;gap:7px;
  border-top:1px solid var(--clay);font-size:clamp(15px,.45vw + 13px,16px);color:var(--text-dunkel)}
.flaeche--tief .karte__liste{border-top-color:var(--linie-hell);color:var(--text-hell)}
.karte__liste li{position:relative;padding-left:16px}
.karte__liste li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;
  background:var(--gold);opacity:.8;transform:rotate(45deg)}
.karte__fuss{margin-top:auto;padding-top:15px}

/* ── 10 · Trio: Problem · Ansatz · Nächster Schritt ────────────────────── */
.trio{display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr))}
.trio__teil{position:relative;padding-top:17px;border-top:2px solid var(--clay)}
.trio__teil:first-child{border-top-color:var(--gold)}
.trio__l{margin:0;font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rost-text)}
.flaeche--tief .trio__l{color:var(--gold)}
.trio__x{margin:10px 0 0;font-size:clamp(15.5px,.5vw + 13.5px,17px);line-height:1.64;
  color:var(--text-dunkel)}
.flaeche--tief .trio__x{color:var(--text-hell)}
.flaeche--tief .trio__teil{border-top-color:var(--linie-hell)}
.flaeche--tief .trio__teil:first-child{border-top-color:var(--gold)}

/* ── 11 · Kernaussage: hervorgehoben, sparsam eingesetzt ───────────────── */
.kern{margin:clamp(26px,3vw,40px) 0 0;padding:clamp(22px,2.6vw,32px);border-radius:4px;
  background:var(--clay);font-family:var(--font-display);font-weight:600;
  font-size:clamp(18px,1.5vw,24px);line-height:1.42;color:var(--dunkelblau);max-width:56ch}
.flaeche--tief .kern{background:rgba(217,164,65,.09);color:var(--sand)}
.flaeche--weiss .kern{background:var(--sand)}

/* ── 12 · Teaser: „weiter im Thema“ und Rücksprung ─────────────────────── */
.weiter{margin-top:clamp(34px,4vw,56px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--clay)}
.flaeche--tief .weiter{border-top-color:var(--linie-hell)}
.weiter__l{margin:0 0 15px;font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rost-text)}
.flaeche--tief .weiter__l{color:var(--gold)}
.weiter__liste{list-style:none;margin:0;padding:0;display:grid;gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr))}
.weiter__liste li{position:relative;padding-left:18px}
.weiter__liste li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg)}
.weiter__liste a{display:inline-flex;align-items:center;min-height:40px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(15.5px,.4vw + 14px,16.5px);
  line-height:1.4;color:var(--dunkelblau);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid rgba(40,45,55,.18)}
.flaeche--tief .weiter__liste a{color:var(--sand);border-bottom-color:rgba(235,231,217,.24)}
.weiter__liste a:hover{border-bottom-color:var(--rost)}
.weiter__liste span{display:block;margin-top:3px;font-size:clamp(14px,.3vw + 12.5px,15px);
  color:var(--text-dunkel)}
.flaeche--tief .weiter__liste span{color:var(--text-hell)}
.zurueck{margin-top:clamp(26px,3vw,38px)}

/* ── 13 · Abschlussband ────────────────────────────────────────────────── */
.ctaband{background:var(--tief);color:var(--sand);padding:clamp(48px,6vw,84px) 0;
  border-top:1px solid var(--linie-hell)}
.ctaband h2{color:var(--sand);max-width:22ch}
.ctaband .fliess{color:var(--text-hell);max-width:50ch}
.ctaband .cta{margin-top:clamp(20px,2.4vw,28px)}
.ctaband__hinweis{margin:9px 0 0;font-size:.84rem;line-height:1.55;color:var(--text-hell);max-width:56ch}

/* ── 14 · Fuss ─────────────────────────────────────────────────────────── */
.fuss{background:var(--dunkelblau);color:var(--text-hell);padding:clamp(30px,3.6vw,46px) 0;
  font-size:clamp(14.5px,.3vw + 13px,15.5px)}
.fuss__inner{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:baseline}
.fuss nav ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0}
.fuss a{text-decoration:none;border-bottom:1px solid rgba(154,163,172,.32);padding-bottom:1px}
.fuss a:hover{border-bottom-color:var(--gold)}
/* Kontakt- und Rechtszeile (Release 3, Block 3): ruhig, kein zweiter CTA.
   address ist semantisch die Kontaktangabe des Anbieters — ohne Kursivschrift. */
.fuss__recht{gap:8px 28px}
.fuss__kontakt,.fuss__rechts,.fuss__sitemap{margin:0}
.fuss__kontakt{font-style:normal}
.fuss__kontakt:target{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}

/* ══════════════════════════════════════════════════════════════════════════
   15 · START — Hero mit Orientierungsnetz
   Das Angebot muss in zwei Sekunden lesbar sein. Deshalb links die Aussage
   im Klartext, rechts dasselbe Angebot als begehbares Netz aus fünf Feldern.
   Text und Netz sagen dasselbe — einmal zum Lesen, einmal zum Einsteigen.
   ══════════════════════════════════════════════════════════════════════════ */
/* Der Hero füllt den ersten Bildschirm vollständig: beim Öffnen ist nur er
   zu sehen, der nächste Abschnitt beginnt erst danach. Die Inhalte stehen
   mittig in der Fläche — oben und unten gleich viel Luft.
   100svh statt 100vh, damit die einfahrende Browserleiste auf Mobilgeräten
   den Bereich nicht zu hoch macht. Ist der Inhalt höher als der Schirm,
   wächst der Hero mit; abgeschnitten wird nichts. */
.hero{position:relative;background:var(--tief);color:var(--sand);overflow:hidden;
  min-height:100vh;min-height:100svh;display:grid;align-items:center;
  padding-block:calc(var(--kopf-h) + clamp(22px,3.4vh,46px)) clamp(22px,3.4vh,46px)}
.hero__bild{position:absolute;inset:0;z-index:0}
.hero__bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) brightness(.72)}
.hero__schleier{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(27,31,38,.95) 0%,rgba(27,31,38,.88) 34%,
    rgba(27,31,38,.55) 62%,rgba(27,31,38,.72) 100%)}
.hero__inner{position:relative;z-index:1;display:grid;gap:clamp(30px,4vw,58px);
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center}
.hero h1{color:var(--sand)}
.hero__lead{margin:22px 0 0;font-size:clamp(17.5px,.85vw + 10.5px,21px);line-height:1.55;
  color:var(--text-hell);max-width:52ch}
.hero__aktion{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:clamp(24px,3vw,34px);
  align-items:center}
.hero__aktion .tlink{color:var(--sand);border-bottom-color:rgba(235,231,217,.34)}
.hero__aktion .tlink:hover{border-bottom-color:var(--gold)}

/* Das Netz: fünf Felder, verbunden. Ruhig, nicht verspielt. */
.netz{position:relative;aspect-ratio:1/.86;min-height:300px}
.netz__linien{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.netz__linien path{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.34;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.netz__punkte{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.np{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.np a{display:flex;align-items:center;gap:11px;min-height:var(--tap);padding:4px 10px 4px 4px;
  border-radius:99px;text-decoration:none;color:var(--sand);
  background:rgba(27,31,38,.42);backdrop-filter:blur(3px);
  border:1px solid rgba(235,231,217,.10);
  transition:background .3s var(--e),border-color .3s var(--e),transform .3s var(--e)}
.np__dot{position:relative;flex:none;width:13px;height:13px;background:var(--gold);
  transform:rotate(45deg);transition:box-shadow .3s var(--e)}
.np__t{font-family:var(--font-display);font-size:clamp(15px,.4vw + 13.4px,16.5px);
  font-weight:600;line-height:1.25;
  white-space:nowrap}
.np a:hover,.np a:focus-visible{background:rgba(27,31,38,.72);
  border-color:rgba(217,164,65,.55);transform:translateY(-2px)}
.np a:hover .np__dot,.np a:focus-visible .np__dot{box-shadow:0 0 0 5px rgba(217,164,65,.22),
  0 0 22px 6px rgba(217,164,65,.30)}
.netz__bu{position:absolute;left:0;right:0;bottom:-6px;margin:0;
  font-size:clamp(14px,.3vw + 12.5px,15px);
  color:var(--text-hell);text-align:center}

/* ══ 16 · ASSESSMENT — mehr Luft, dieselbe Kartengrammatik ══════════════ */
.check__stand{position:relative;margin:0 0 clamp(22px,2.6vw,32px);border-radius:4px;
  overflow:hidden;background:var(--dunkelblau);aspect-ratio:3.2/1;max-height:min(30vh,260px)}
/* Nur DIREKTE Bildkinder. Im Prototyp liegen die fuenf Buehnenbilder als
   <img> unmittelbar in .check__stand; im Theme sind es <picture class="stufe">
   mit einem <img> darin. Ohne das > traf diese Regel auch dieses innere Bild
   und setzte es auf opacity:0 — und die Gegenregel .check__stand img.ist-aktiv
   griff nicht, weil das JavaScript die Klasse am <picture> umschaltet, nicht
   am Bild. Ergebnis: eine dauerhaft leere Buehne, obwohl jedes Bild geladen,
   jede Klasse gesetzt und jeder Zustand richtig war. */
.check__stand > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .8s var(--e)}
.check__stand > img.ist-aktiv{opacity:1}
.check__schleier{position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(27,31,38,.10) 0%,rgba(27,31,38,.10) calc(var(--mf,0)*100%),
    rgba(27,31,38,.66) calc(var(--mf,0)*100% + 10%),rgba(27,31,38,.78) 100%)}
.check__bu{position:relative;margin:0 0 clamp(24px,3vw,34px);padding-left:19px;
  font-size:clamp(15px,.45vw + 13px,16.5px);line-height:1.5;color:var(--text-hell);
  min-height:2.8em;max-width:70ch}
.check__bu::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
  background:var(--gold);transform:rotate(45deg)}
.spur{list-style:none;margin:0 0 clamp(30px,3.8vw,48px);padding:15px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(5,1fr);border-top:1px solid var(--linie-hell);position:relative}
.spur::after{content:"";position:absolute;left:0;top:-1px;height:2px;background:var(--gold);
  width:calc(var(--mf,0)*100%);transition:width .6s var(--e)}
.spur a{position:relative;display:block;padding-top:12px;text-align:center;text-decoration:none;
  font-family:var(--font-display);font-size:clamp(14px,.3vw + 12.5px,15px);font-weight:600;
  color:var(--text-hell);
  min-height:var(--tap);transition:color .25s}
.spur a::before{content:"";position:absolute;left:50%;top:-16px;width:11px;height:11px;
  margin-left:-5.5px;background:var(--linie-hell);transform:rotate(45deg);transition:background .3s}
.spur li.ist-voll a{color:var(--sand)}
.spur li.ist-voll a::before,.spur li.ist-teil a::before{background:var(--gold)}
.spur li.ist-teil a::before{opacity:.55}
.spur small{display:block;margin-top:3px;font-weight:500;font-size:.76rem;opacity:.72}

.kblock{margin-top:clamp(30px,3.6vw,46px)}
.kblock__t{display:flex;align-items:center;gap:12px;margin:0 0 clamp(14px,1.8vw,20px);
  font-size:clamp(18px,1.5vw,22px);color:var(--sand)}
.kblock__t::before{content:"";width:10px;height:10px;flex:none;background:var(--linie-hell);
  transform:rotate(45deg);transition:background .3s}
.kblock.ist-voll .kblock__t::before{background:var(--gold)}
.kk{position:relative;display:flex;flex-direction:column;padding:clamp(18px,2.1vw,26px);
  border-radius:4px;border:1px solid var(--linie-hell);background:rgba(235,231,217,.03);
  transition:border-color .3s var(--e),background .3s var(--e)}
.kk.ist-markiert{border-color:rgba(217,164,65,.5);background:rgba(217,164,65,.055)}
.kk__t{margin:0;font-size:clamp(17px,1.1vw,19.5px);line-height:1.28;color:var(--sand)}
.kk__x{margin:10px 0 0;font-size:clamp(15.5px,.5vw + 13.5px,17px);line-height:1.6;
  color:var(--text-hell)}
.kk__bsp{margin:9px 0 0;font-size:clamp(14.5px,.35vw + 13px,15.5px);line-height:1.5;
  color:var(--text-hell);opacity:.74}
.kk__fuss{margin-top:auto;padding-top:15px;display:flex;flex-wrap:wrap;gap:8px 18px;
  align-items:center}
.kennen,.angehen{display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  padding:5px 0;background:none;border:0;cursor:pointer;font-family:var(--font-display);
  font-weight:500;font-size:clamp(15px,.4vw + 13.4px,16px);color:var(--text-hell);
  transition:color .25s}
.kennen:hover,.angehen:hover{color:var(--sand)}
.kennen::before,.angehen::before{content:"";width:12px;height:12px;flex:none;border-radius:50%;
  border:1.5px solid currentColor;transition:all .25s var(--e)}
.kennen[aria-pressed="true"],.angehen[aria-pressed="true"]{color:var(--gold);font-weight:600}
.kennen[aria-pressed="true"]::before,.angehen[aria-pressed="true"]::before{border-radius:0;
  transform:rotate(45deg);background:var(--gold);border-color:var(--gold)}
.angehen{font-size:.86rem;opacity:.9}

/* Weiterführung: erscheint nach der ersten Auswahl, holt nach unten. */
.weiterfuehrung{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  margin-top:clamp(28px,3.4vw,42px);padding:clamp(16px,2vw,22px);border-radius:4px;
  background:rgba(217,164,65,.10);border:1px solid rgba(217,164,65,.34)}
.weiterfuehrung p{margin:0;font-family:var(--font-display);font-weight:600;font-size:.98rem;
  color:var(--sand)}

/* ══ 17 · AUSWERTUNG ═══════════════════════════════════════════════════ */
.erg__leer{margin:0;font-size:1rem;color:var(--text-dunkel);max-width:56ch}
.hfelder{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hfeld{display:grid;gap:4px 16px;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--clay)}
.hfeld__n{font-family:var(--font-display);font-weight:600;font-size:1rem}
.hfeld__s{font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.05em;
  padding:3px 10px;border-radius:99px;background:var(--clay);color:var(--text-dunkel)}
.hfeld__s.ist-startpunkt{background:var(--gold);color:var(--dunkelblau)}
.hfeld__s.ist-grundlage{background:rgba(217,164,65,.3);color:var(--dunkelblau)}
.hfeld__h{grid-column:1/-1;font-size:.9rem;line-height:1.55;color:var(--text-dunkel)}
.eschritte{list-style:none;margin:0;padding:0;counter-reset:es;display:grid;gap:12px}
.eschritte li{position:relative;padding-left:34px;counter-increment:es}
.eschritte li::before{content:counter(es,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--font-display);font-size:.76rem;font-weight:600;color:var(--rost-text)}
.eschritte b{display:block;font-family:var(--font-display);font-size:.99rem}
.eschritte span{display:block;margin-top:4px;font-size:.92rem;line-height:1.55;color:var(--text-dunkel)}

/* ══════════════════════════════════════════════════════════════════════════
   18 · RESPONSIVE
   Grundsatz: fluid vor Breakpoint. Harte Umbrüche nur, wo sich die
   Komposition wirklich ändert — Navigation, Hero-Netz, Abschnittsnavigation.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1150px){
  .navschalter{display:inline-flex}
  .kopf__cta{display:none}
  .nav{position:fixed;left:0;right:0;top:var(--kopf-h);margin:0;display:none;
    background:rgba(27,31,38,.985);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--linie-hell);
    padding:clamp(12px,3vw,22px) var(--rand) clamp(18px,4vw,28px);max-height:calc(100vh - var(--kopf-h));
    overflow-y:auto}
  .kopf--hell .nav{background:rgba(235,231,217,.985);border-bottom-color:var(--clay)}
  .nav.ist-offen{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav li+li{border-top:1px solid var(--linie-hell)}
  .kopf--hell .nav li+li{border-top-color:var(--clay)}
  .nav a{min-height:var(--tap);font-size:1.02rem;opacity:1}
  .nav a[aria-current]::after{bottom:8px;right:auto;width:22px}
  .nav .nav__cta{display:inline-flex;width:100%;justify-content:center;margin-top:16px}
}
@media (min-width:1151px){ .kopf__cta{display:inline-flex} }

/* Unter 980 px wird aus dem räumlichen Netz eine gelesene Liste — gleiche
   Inhalte, gleiche Marken, nur ohne Verbindungslinien. */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr}
  .netz{aspect-ratio:auto;min-height:0;margin-top:clamp(26px,3.4vw,38px)}
  .netz__linien{display:none}
  .netz__punkte{position:static;display:grid;gap:9px;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,236px),1fr))}
  .np{position:static;transform:none}
  .np a{background:rgba(235,231,217,.055);border-color:rgba(235,231,217,.16);border-radius:4px;
    padding:11px 14px}
  .np__t{white-space:normal}
  .netz__bu{position:static;margin-top:14px;text-align:left}
}
@media (max-width:820px){
  /* Fünf Namen nebeneinander tragen unter 820 px nicht mehr; unter 400 px
     sprengten sie die Bahn. auto-fit laesst die Leiste stattdessen auf zwei
     Reihen umbrechen — alle fuenf Bereiche bleiben lesbar und erreichbar. */
  .spur{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:6px 5px}
  .spur a{font-size:.72rem;padding-top:10px}
  .spur small{display:none}
  .anav__l{display:none}
}
/* Flache Fenster: lieber etwas weniger Luft als ein gequetschter Hero. */
@media (max-height:680px) and (min-width:981px){
  .hero{padding-block:calc(var(--kopf-h) + 18px) 18px}
  .hero__lead{margin-top:14px}
  .hero__aktion{margin-top:20px}
}
@media (max-width:620px){
  .hero__aktion .cta{width:100%;justify-content:center}
  .ctaband .cta{width:100%;justify-content:center}
  .ctaband .wp-block-button.cta>.wp-block-button__link{width:100%;justify-content:center}
  .check__stand{aspect-ratio:16/9;max-height:min(26vh,200px)}
  .hfeld{grid-template-columns:1fr}
  .hfeld__s{justify-self:start}
  .fuss__inner{flex-direction:column;gap:16px}
}
@media (hover:none){
  .nav a,.tlink,.karte__t a,.weiter__liste a,.spur a,.anav a,.np a,.krume a{min-height:var(--tap)}
}

/* ══ 19 · Reduzierte Bewegung ══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .np a:hover,.np a:focus-visible{transform:none}
  .karte--klick:hover{transform:none}
  .cta:hover{transform:none}
}

/* ══ 20 · Mockup-Steuerung — kein Websiteelement ═══════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   21 · V5.13 — Qualität, Conversion, Hierarchie
   Keine neue Stilfamilie: dieselben Token, dieselben Rauten, dieselbe
   Goldlinie. Neu sind nur Anordnungen und zwei Bausteine (Empfehlung,
   Lead-Dialog), die es vorher nicht gab.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 21.1 · Assessment: klebende Bühne neben den Fragen ────────────────── */
.checkraster{display:grid;gap:clamp(26px,3.2vw,54px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
/* position:sticky — kein Scroll-Jacking, kein Eingriff ins Scrollen. Der
   Offset kommt aus der bestehenden Kopfhöhen-Variable, nicht aus einer
   festen Zahl. Das Kleben endet automatisch mit dem Rasterende. */
.checkbuehne{position:sticky;top:calc(var(--kopf-h) + clamp(20px,2.6vh,34px))}
.checkbuehne .check__stand{aspect-ratio:16/10;max-height:none;margin-bottom:clamp(16px,2vw,22px)}
.checkbuehne .check__bu{margin-bottom:clamp(20px,2.4vw,28px)}
.checkbuehne .spur{margin-bottom:0;
  grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:10px 6px}
.checkfragen > .kblock:first-child{margin-top:0}

@media (max-width:899px){
  /* Unterhalb von 900px: kein grosses klebendes Panel mehr. Das Bild laeuft
     im Dokumentfluss, nur die Fortschrittszeile bleibt oben stehen.
     899 statt 900, damit die Vorgabe „unter 900" woertlich gilt. */
  .checkraster{grid-template-columns:1fr;gap:clamp(22px,3vw,30px)}
  .checkbuehne{position:static}
  .checkbuehne .check__stand{aspect-ratio:16/9}
  .checkbuehne .spur{position:sticky;top:var(--kopf-h);z-index:16;
    background:var(--tief);padding-block:12px 10px;
    box-shadow:0 12px 18px -14px rgba(0,0,0,.9)}
}
@media (max-width:620px){
  /* Kein komplexes Sticky mehr — Bedienbarkeit vor Effekt. */
  .checkbuehne .spur{position:static;box-shadow:none;padding-block:15px 0}
  .checkbuehne .check__stand{aspect-ratio:16/9;max-height:min(26vh,200px)}
}
@media (max-width:820px){ .spur a{font-size:13px} }

/* ── 21.2 · Auswertung: eine Empfehlung ────────────────────────────────── */
.empf{max-width:760px}
.empf__h{margin:0;font-size:clamp(20px,1.8vw,26px);color:var(--text-dunkel);font-weight:600}
.empf__gross{margin:10px 0 0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,4vw,54px);line-height:1.08;letter-spacing:-.025em;color:var(--dunkelblau)}
.empf__satz{margin:16px 0 0;font-size:clamp(17px,.8vw + 11.5px,20px);line-height:1.55;
  color:var(--text-dunkel);max-width:52ch}
.empf__paar{display:grid;gap:clamp(18px,2.4vw,40px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  margin:clamp(24px,3vw,34px) 0 0;padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--clay)}
.empf__l{margin:0;font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rost-text)}
.empf__w{margin:6px 0 0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,.5vw + 14px,18px);color:var(--dunkelblau)}
.empf__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.4vw,28px);
  margin-top:clamp(24px,3vw,34px)}

.begr{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--clay);padding-top:8px}
.begr__summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;
  min-height:var(--tap);font-family:var(--font-display);font-weight:600;
  font-size:clamp(15.5px,.4vw + 14px,16.5px);color:var(--rost-text)}
.begr__summary::-webkit-details-marker{display:none}
.begr__summary::before{content:"";width:9px;height:9px;flex:none;background:var(--gold);
  transform:rotate(45deg);transition:transform .25s var(--e)}
.begr[open] .begr__summary::before{transform:rotate(135deg)}
.begr__inner{padding-top:clamp(12px,1.6vw,18px);max-width:840px}

/* ── 21.3 · Conversion nach der Auswertung ─────────────────────────────── */
.konv{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(20px,2.6vw,30px);
  margin-top:clamp(6px,1vw,12px)}
.konv__hinweis{margin:clamp(16px,2vw,22px) 0 0;font-size:clamp(14px,.3vw + 12.5px,15px);
  color:var(--text-dunkel)}

/* ── 21.4 · Lead-Dialog — Prototyp ─────────────────────────────────────
   ACHTUNG: .lead gibt es im Fliesstext bereits als Vorspann-Absatz.
   Die Dialogregeln sind deshalb auf dialog.lead eingeschraenkt; nur die
   BEM-Kinder .lead__* stehen unbenannt, weil sie nirgends sonst vorkommen. */
dialog.lead{width:min(620px,calc(100vw - 2*var(--rand)));max-height:min(88vh,860px);padding:0;
  /* Der globale Reset setzt margin:0 auf alle Elemente und hebelt damit das
     margin:auto aus, mit dem der Browser einen Dialog sonst zentriert.
     overflow:auto, damit lange Formulare scrollen statt abzuschneiden. */
  margin:auto;overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--clay);border-radius:5px;background:var(--sand);color:var(--dunkelblau);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
dialog.lead::backdrop{background:rgba(27,31,38,.72);backdrop-filter:blur(3px)}
.lead__form{--lp:clamp(22px,3vw,36px);padding:var(--lp);display:block}
.lead__h{margin:0;font-size:clamp(22px,2.1vw,30px)}
.lead__x{margin:12px 0 0;font-size:clamp(15.5px,.5vw + 13.5px,17px);line-height:1.6;
  color:var(--text-dunkel);max-width:52ch}
.lead__kontext{margin:16px 0 0;padding:12px 15px;border-left:3px solid var(--gold);
  border-radius:0 3px 3px 0;background:var(--clay);
  font-size:clamp(14px,.3vw + 12.5px,15px);line-height:1.55;color:var(--text-dunkel)}
.lead__felder{display:grid;gap:14px clamp(14px,1.8vw,20px);margin:clamp(20px,2.4vw,28px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.lead__feld{margin:0}
.lead__feld--voll{grid-column:1/-1}
.lead__feld label{display:block;margin-bottom:6px;font-family:var(--font-display);
  font-size:clamp(14px,.3vw + 12.5px,15px);font-weight:600}
.lead__opt{font-weight:500;color:var(--text-dunkel);opacity:.8}
dialog.lead input,dialog.lead select,dialog.lead textarea{width:100%;min-height:var(--tap);padding:10px 13px;
  border:1px solid var(--clay);border-radius:3px;background:var(--weiss);
  font-family:var(--font-text);font-size:16px;color:var(--dunkelblau)}
dialog.lead textarea{min-height:82px;resize:vertical;line-height:1.55}
dialog.lead input:focus-visible,dialog.lead select:focus-visible,dialog.lead textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.lead__hinweis{margin:clamp(18px,2.2vw,24px) 0 0;padding:12px 15px;border-radius:3px;
  background:rgba(184,86,51,.07);border-left:3px solid var(--rost);
  font-size:clamp(14px,.3vw + 12.5px,15px);line-height:1.55;color:var(--text-dunkel)}
/* Klebender Fuss: die Hauptaktion bleibt sichtbar, auch wenn im Dialog
   gescrollt wird. Die negativen Raender heben die Formularpolsterung auf,
   damit die Trennlinie ueber die volle Breite laeuft. */
.lead__fuss{position:sticky;bottom:0;z-index:2;
  margin:clamp(18px,2.2vw,24px) calc(-1 * var(--lp)) calc(-1 * var(--lp));
  padding:14px var(--lp) var(--lp);background:var(--sand);
  border-top:1px solid var(--clay)}
.lead__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(18px,2.4vw,26px)}
.lead__status{margin:0 0 12px;font-size:clamp(14.5px,.35vw + 13px,15.5px);
  line-height:1.55;color:var(--rost-text)}
.lead__status:empty{display:none}
/* Release 3, Block 2: Zustände des angebundenen Formulars. */
.lead__status[data-art="neutral"]{color:var(--text-dunkel)}
.lead__ausweich{margin:0 0 12px;font-size:clamp(14px,.3vw + 12.5px,15px);line-height:1.55;color:var(--text-dunkel)}
.lead__ausweich:empty{display:none}
.lead__form[aria-busy="true"] .cta{opacity:.65;cursor:progress}
dialog.lead [aria-invalid="true"]{border-color:var(--rost);box-shadow:0 0 0 1px var(--rost)}
/* Honeypot: aus dem Fluss, nicht display:none (einfache Bots füllen es dann noch). */
.lead__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Datenschutzhinweis: neutral (Gold), anders als der rostfarbene Prototyp-Hinweis. */
.lead__datenschutz{margin:clamp(18px,2.2vw,24px) 0 0;padding:12px 15px;border-radius:0 3px 3px 0;
  background:var(--clay);border-left:3px solid var(--gold);
  font-size:clamp(14px,.3vw + 12.5px,15px);line-height:1.55;color:var(--text-dunkel)}
.lead__datenschutz b{color:var(--rost-text)}
.lead__erfolg{margin:clamp(20px,2.4vw,28px) 0 0;padding:16px 18px;border-radius:0 3px 3px 0;
  background:var(--clay);border-left:3px solid var(--gold);line-height:1.6;color:var(--text-dunkel)}
.lead__erfolg:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lead__erfolg p{margin:0}
.lead__erfolg p + p{margin-top:8px}
.lead__erfolg-h{font-family:var(--font-display);font-weight:600;color:var(--dunkelblau)}
.lead__ref{font-size:clamp(13px,.3vw + 11.5px,14px)}
.lead__ref code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em}
@media (max-width:620px){
  dialog.lead{width:calc(100vw - 24px);max-height:92svh}
  dialog.lead .lead__aktion .cta{width:100%;justify-content:center}
}

/* ── 21.5 · Seitenkopf mit Markenmoment ────────────────────────────────── */
.phero--visual .phero__inner{display:grid;gap:clamp(26px,3.4vw,56px);align-items:center;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.phero__bild{position:relative}
.hvis{display:block;width:100%;height:auto;overflow:visible}
.hvis__l{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.62;stroke-linejoin:round}
.hvis__d{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.34;stroke-dasharray:4 5}
.hvis__r{fill:var(--gold)}
.hvis__r--klein{opacity:.55}
.hvis__p{fill:rgba(235,231,217,.045);stroke:rgba(235,231,217,.26);stroke-width:1.2}
.hvis__p--nach{fill:rgba(217,164,65,.06);stroke:rgba(217,164,65,.4)}
.hvis__f{fill:none;stroke:rgba(235,231,217,.42);stroke-width:1.3}
.hvis__ring{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.5}
.hvis__ring--weit{opacity:.22}
@media (max-width:899px){
  .phero--visual .phero__inner{grid-template-columns:1fr}
  /* Auf schmalen Schirmen traegt die Aussage der Text; das Visual wird
     kleiner gesetzt statt gestrichen, damit der Markenmoment bleibt. */
  .phero__bild{max-width:420px}
}
/* Unter 620 px verschwand die Kopfgrafik — das war richtig, solange sie
   dekoratives SVG war. Seit Abschnitt 26 ist sie das Hauptmotiv der Seite
   und bleibt deshalb sichtbar. Nur die reinen Deko-SVGs entfallen weiter. */
@media (max-width:620px){
  .phero__bild{display:none}
  .phero--held .phero__bild{display:block}
}

/* ── 21.6 · Orientierungsnetz: Fokus etwas deutlicher ──────────────────── */
.np a:hover,.np a:focus-visible{border-color:rgba(217,164,65,.7)}
.netz:hover .netz__linien path,.netz:focus-within .netz__linien path{opacity:.5}
.netz__linien path{transition:opacity .3s var(--e)}

@media (prefers-reduced-motion:reduce){
  .netz__linien path,.begr__summary::before{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   22 · V5.15 — HBC-Begleiter und NEXO
   Dritte Bildebene neben Metaphermotiv und SVG-System, bewusst als
   RUHIGE MARKE gesetzt: gerahmt, klein, nie freigestellt im Raum.
   Das hält die Figuren im Bereich Themenmarke und außerhalb der
   Maskottchenwelt. Keine neuen Farben, keine neue Stilfamilie.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 22.1 · Themenbegleiter als Bildmarke ──────────────────────────────── */
.bmarke{margin:0;display:flex;flex-direction:column;gap:12px}
.bmarke__b{display:block;overflow:hidden;border-radius:4px;
  border:1px solid var(--linie-hell);background:var(--tief);
  aspect-ratio:4/5;line-height:0}
.bmarke__b img{width:100%;height:100%;object-fit:cover;display:block}
.flaeche--sand .bmarke__b,.flaeche--weiss .bmarke__b{border-color:var(--clay)}
.bmarke__c{margin:0}
.bmarke__l{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,.5vw + 14px,18px);color:var(--dunkelblau)}
.flaeche--tief .bmarke__l{color:var(--sand)}
.bmarke__t{margin:3px 0 0;font-size:clamp(14px,.3vw + 12.5px,15px);
  line-height:1.5;color:var(--text-dunkel)}
/* Zwei Zeilen reserviert, damit die Saetze im Sechser-Raster auf einer
   Linie beginnen — sonst franst die Reihe aus, sobald ein Thema umbricht. */
.bgitter .bmarke__t{min-height:3em}
.flaeche--tief .bmarke__t{color:var(--text-hell)}
/* Fehlendes Motiv wird als fehlend gezeigt, nicht ersetzt. Die Raute ist
   die vorhandene HBC-Grundform — kein erfundenes Ersatzmotiv. */
.bmarke__leer{aspect-ratio:4/5;border-radius:4px;border:1px dashed var(--linie-hell);
  background:rgba(217,164,65,.04);display:grid;place-items:center}
.flaeche--sand .bmarke__leer,.flaeche--weiss .bmarke__leer{border-color:var(--clay)}
.bmarke__leer span{width:26px;height:26px;transform:rotate(45deg);
  border:1px solid var(--gold);opacity:.5}
.bmarke__f{margin:5px 0 0;font-size:clamp(13px,.25vw + 12px,14px);line-height:1.5;
  color:var(--text-hell);font-style:italic}
.flaeche--sand .bmarke__f,.flaeche--weiss .bmarke__f{color:var(--text-dunkel);opacity:.8}

/* ── 22.2 · Themenbegleiter im Seitenfluss ─────────────────────────────── */
.bthema{display:grid;gap:clamp(16px,2.2vw,28px);align-items:center;
  grid-template-columns:minmax(0,152px) minmax(0,1fr);
  margin-top:clamp(26px,3.2vw,38px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--clay)}
.flaeche--tief .bthema{border-top-color:var(--linie-hell)}
.bthema__x .fliess{margin:6px 0 0;max-width:56ch}
@media (max-width:620px){
  /* Auf schmalen Schirmen trägt der Text; die Marke wird kleiner, nicht größer. */
  .bthema{grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:16px}
  .bthema .bmarke{gap:8px}
  .bthema .bmarke__c{display:none}
}
@media (max-width:420px){
  /* Unter 420 px bleibt neben der Marke zu wenig Platz: „Themenbegleiter"
     ist ein Wort und laesst sich nicht umbrechen. Also gestapelt. */
  .bthema{grid-template-columns:1fr}
  .bthema .bmarke__b{max-width:132px}
}

/* ── 22.3 · Die sechs Begleiter, einmal gemeinsam ──────────────────────── */
.bgitter{display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,146px),1fr));
  margin-top:clamp(26px,3.2vw,38px)}
.bmarke__k{margin:8px 0 0;font-size:clamp(14px,.3vw + 12.5px,15px);line-height:1.55;
  color:var(--text-hell);padding-left:12px;border-left:2px solid var(--gold)}
.flaeche--sand .bmarke__k,.flaeche--weiss .bmarke__k{color:var(--text-dunkel)}

/* ── 22.4 · NEXO als Guide ─────────────────────────────────────────────── */
/* NEXO steht IMMER neben echtem Text und nie allein. Die Bildmarke ist
   aria-hidden — die Aussage steht vollständig im Satz daneben. */
.nexo{display:flex;align-items:center;gap:clamp(12px,1.5vw,18px);
  margin:clamp(18px,2.2vw,26px) 0 0;max-width:60ch}
.nexo__b{flex:none;width:64px;line-height:0;display:block}
.nexo__b img{width:100%;height:auto;display:block}
.nexo__t{font-size:clamp(15.5px,.45vw + 13.8px,17px);line-height:1.58;
  color:var(--text-dunkel)}
.flaeche--tief .nexo__t,.ctaband .nexo__t{color:var(--text-hell)}
.nexo--gross .nexo__b{width:96px}

/* ── 22.5 · Auswertung mit Kompass ─────────────────────────────────────── */
.empfraster{display:grid;gap:clamp(22px,3vw,44px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,168px)}
@media (max-width:820px){
  .empfraster{grid-template-columns:1fr;gap:clamp(20px,2.6vw,28px)}
  .empfraster .bmarke{flex-direction:row;align-items:center;gap:14px;max-width:420px}
  .empfraster .bmarke__b{width:88px;flex:none}
}

/* ── 22.6 · CTA-Band mit zweitem Weg ───────────────────────────────────── */
.ctaband__aktion{display:flex;flex-wrap:wrap;align-items:center;
  gap:14px clamp(20px,2.6vw,30px);margin-top:clamp(20px,2.4vw,28px)}
.ctaband__aktion .cta{margin-top:0}
.ctaband .nexo{margin-top:clamp(20px,2.4vw,28px)}

/* ── 22.7 · Überleitung zur Auswertung ─────────────────────────────────── */
.weiterfuehrung__h{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,.6vw + 14.5px,19px);color:var(--sand)}
.weiterfuehrung .nexo{margin-top:12px}
.weiterfuehrung .cta{margin-top:clamp(16px,2vw,20px)}

/* ── 22.8 · Bewegung: sehr dezent, sonst gar nicht ─────────────────────── */
/* Erlaubt ist eine einmalige Einblendung und eine minimale Lichtreaktion
   beim Überfahren des zugehörigen CTA-Blocks. Kein Winken, kein Hüpfen,
   kein Pulsieren, keine Dauerschleife. */
.nexo__b img{transition:transform .4s var(--e),filter .4s var(--e)}
.ctaband:hover .nexo__b img,.weiterfuehrung:hover .nexo__b img{
  transform:translateY(-2px);filter:drop-shadow(0 6px 14px rgba(217,164,65,.22))}
@media (prefers-reduced-motion:reduce){
  .nexo__b img{transition:none}
  .ctaband:hover .nexo__b img,.weiterfuehrung:hover .nexo__b img{
    transform:none;filter:none}
}
@media (hover:none){
  .ctaband:hover .nexo__b img,.weiterfuehrung:hover .nexo__b img{
    transform:none;filter:none}
}

@media (max-width:620px){
  /* Mobil: NEXO kleiner, nie über dem CTA, immer davor im Lesefluss. */
  .nexo{gap:12px}
  .nexo__b,.nexo--gross .nexo__b{width:52px}
}

/* ══════════════════════════════════════════════════════════════════════════
   23 · V5.16 — Visuelles Erzählen
   Dieselbe Stilfamilie wie seit V5.12: Goldlinie, Raute, Platte, Fragment.
   Neu sind nur Anordnungen. Der Rhythmus wechselt bewusst zwischen
   Strecke, Kette, Split-Feld, Story-Block, Netz und Systembild — statt
   überall dasselbe Kartenraster.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 23.1 · Ruhiges Einblenden beim Scrollen ───────────────────────────── */
/* Kein Parallax, kein Scroll-Jacking: ein einmaliger Zustandswechsel,
   ausgelöst per IntersectionObserver. Ohne JS bleibt alles sichtbar. */
/* Die Liste entspricht dem Selektor in hbc-basis.js. data-reveal bleibt
   zusaetzlich gueltig, damit aelteres Markup weiterlaeuft. */
.fach,.feld,.sblock,.kstufe,.sysbild,.archbild,.slinie,.aufl,.gross,.werk,.jens,
[data-reveal]{opacity:1}
.js .fach,.js .feld,.js .sblock,.js .kstufe,.js .sysbild,.js .archbild,
.js .slinie,.js .aufl,.js .gross,.js .werk,.js .jens,
.js [data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--e),transform .55s var(--e);
  transition-delay:calc(var(--i,0) * 70ms)}
.js .ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .fach,.js .feld,.js .sblock,.js .kstufe,.js .sysbild,.js .archbild,
  .js .slinie,.js .aufl,.js .gross,.js .werk,.js .jens,
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ── 23.2 · Die Strecke: der HBC-Weg ───────────────────────────────────── */
.strecke{position:relative;margin-top:clamp(30px,3.6vw,48px);
  padding-left:clamp(34px,4vw,58px)}
.strecke__linie{position:absolute;left:clamp(10px,1.2vw,18px);top:8px;bottom:8px;width:2px;
  background:var(--linie-hell);border-radius:2px;overflow:hidden}
.flaeche--sand .strecke__linie,.flaeche--weiss .strecke__linie{background:var(--clay)}
.strecke__fuell{position:absolute;inset:0 0 auto 0;height:var(--fuell,0%);
  background:linear-gradient(180deg,var(--gold),rgba(217,164,65,.55));
  transition:height .35s linear}
.strecke__liste{list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(26px,3.4vw,46px)}
.stat{position:relative}
.stat__m{position:absolute;left:calc(-1 * clamp(34px,4vw,58px) + clamp(3px,.5vw,10px));
  top:6px;width:15px;height:15px;transform:rotate(45deg);
  background:var(--sand);border:2px solid var(--clay);
  transition:background .3s var(--e),border-color .3s var(--e),transform .3s var(--e)}
.flaeche--weiss .stat__m{background:var(--weiss)}
.flaeche--tief .stat__m{background:var(--tief);border-color:var(--linie-hell)}
.stat.ist-aktiv .stat__m{background:var(--gold);border-color:var(--gold);
  transform:rotate(45deg) scale(1.18)}
.stat__n{margin:0;font-family:var(--font-display);font-size:clamp(14px,.3vw + 12.5px,15px);
  font-weight:600;letter-spacing:.12em;color:var(--rost-text);opacity:.75}
.flaeche--tief .stat__n{color:var(--gold)}
.stat__t{margin:5px 0 0;font-size:clamp(20px,1.9vw,27px);
  transition:color .3s var(--e)}
.stat__x{margin:9px 0 0;font-size:clamp(16.5px,.4vw + 15px,18px);line-height:1.62;
  color:var(--text-dunkel);max-width:56ch}
.flaeche--tief .stat__x{color:var(--text-hell)}
.stat__aus{margin:11px 0 0;padding:9px 14px;border-left:2px solid var(--gold);
  border-radius:0 3px 3px 0;background:rgba(217,164,65,.07);max-width:52ch;
  font-size:clamp(15px,.3vw + 13.5px,16px);line-height:1.55;color:var(--text-dunkel)}
/* Die aktive Station tritt hervor — aber die uebrigen bleiben voll lesbar.
   Eine Station auf 55 % Deckkraft war zwar effektvoll, hat den Text aber
   unter jede brauchbare Kontrastschwelle gedrueckt. Der Unterschied kommt
   jetzt aus dem Marker und einer leichten Verschiebung, nicht aus Blenden. */
.stat{transition:transform .35s var(--e)}
.stat__t,.stat__x{transition:color .3s var(--e)}
.stat.ist-aktiv{transform:translateX(3px)}
.stat.ist-aktiv .stat__t{color:var(--rost-text)}
.flaeche--tief .stat.ist-aktiv .stat__t{color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .stat{transform:none}
  .stat,.stat__m,.stat__t,.stat__x,.strecke__fuell{transition:none}
}

/* ── 23.3 · Die Kette: das Leitmodell als Signaturelement ──────────────── */
.kette{position:relative;margin-top:clamp(32px,4vw,52px)}
/* Die Linie endet in der Mitte der aeusseren Kacheln (88 px breit),
   statt ins Leere weiterzulaufen. */
.kette__linie{position:absolute;left:44px;right:44px;top:44px;height:2px;
  background:linear-gradient(90deg,rgba(217,164,65,.14),var(--gold) 55%,rgba(217,164,65,.35));
  border-radius:2px}
.kette__liste{list-style:none;margin:0;padding:0;position:relative;
  display:grid;gap:clamp(20px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr))}
.kstufe__b{display:block;width:88px;height:88px;margin-bottom:14px;
  display:grid;place-items:center;border-radius:4px;
  background:var(--tief);border:1px solid var(--linie-hell)}
.flaeche--sand .kstufe__b,.flaeche--weiss .kstufe__b{background:var(--clay);border-color:var(--clay)}
.kstufe__b .hvis{width:64px;height:auto}
.kstufe__n{margin:0;font-family:var(--font-display);font-size:clamp(14px,.3vw + 12.5px,15px);
  font-weight:600;letter-spacing:.12em;color:var(--gold)}
.kstufe__t{margin:5px 0 0;font-size:clamp(19px,1.5vw,24px)}
.kstufe__x{margin:8px 0 0;font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.58;
  color:var(--text-hell)}
.flaeche--sand .kstufe__x,.flaeche--weiss .kstufe__x{color:var(--text-dunkel)}
@media (max-width:880px){
  /* Mobil wird aus der Reihe eine Linie von oben nach unten. */
  .kette__linie{left:43px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(217,164,65,.14),var(--gold) 55%,rgba(217,164,65,.35))}
  .kette__liste{grid-template-columns:1fr;gap:clamp(22px,3vw,28px)}
  .kstufe{display:grid;grid-template-columns:88px minmax(0,1fr);
    column-gap:clamp(16px,2.4vw,22px);align-items:start}
  .kstufe__b{grid-row:1/span 3;margin-bottom:0}
}

/* ── 23.4 · Leistungsfeld: Split-Layout mit eigenem Motiv ──────────────── */
.feld{display:grid;gap:clamp(24px,3.4vw,52px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  padding:clamp(30px,3.6vw,48px) 0;border-top:1px solid var(--clay)}
.flaeche--tief .feld{border-top-color:var(--linie-hell)}
.feld:first-of-type{border-top:0;padding-top:clamp(18px,2.2vw,26px)}
.feld--gespiegelt .feld__t{order:2}
.feld__f{margin:6px 0 0;font-size:clamp(21px,2.1vw,30px);line-height:1.24;max-width:26ch}
.feld__t .fliess{margin:14px 0 0;max-width:52ch}
.feld__l{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.feld__l li{padding:5px 12px;border:1px solid var(--clay);border-radius:99px;
  font-size:clamp(14px,.3vw + 12.5px,15px);color:var(--text-dunkel)}
.flaeche--tief .feld__l li{border-color:var(--linie-hell);color:var(--text-hell)}
.feld__t p:last-child{margin-top:clamp(16px,2vw,22px)}
.feld__b{border:1px solid var(--clay);border-radius:5px;background:var(--tief);
  padding:clamp(14px,1.8vw,22px);line-height:0}
.flaeche--tief .feld__b{border-color:var(--linie-hell);background:rgba(0,0,0,.22)}
.feld__b .hvis{width:100%;height:auto}
/* Hover hebt genau ein Feld hervor: die Goldlinien treten hervor, sonst nichts. */
.feld .hvis__l,.feld .hvis__r{transition:opacity .3s var(--e)}
.feld:hover .hvis__l,.feld:focus-within .hvis__l{opacity:.95}
.feld:hover .hvis__r,.feld:focus-within .hvis__r{opacity:1}
@media (max-width:880px){
  .feld{grid-template-columns:1fr;gap:clamp(20px,2.6vw,26px)}
  .feld--gespiegelt .feld__t{order:0}
  .feld__b{max-width:440px}
}
@media (prefers-reduced-motion:reduce){ .feld .hvis__l,.feld .hvis__r{transition:none} }

/* ── 23.5 · Story-Block: Situation → Lesart → Schritt ──────────────────── */
.sblock{display:grid;gap:clamp(18px,2.4vw,34px);align-items:start;
  grid-template-columns:minmax(0,152px) minmax(0,1fr);
  padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--clay);
  transition:border-color .3s var(--e)}
.sblock:first-of-type{border-top:0}
.sblock:hover,.sblock:focus-visible{border-top-color:var(--gold);outline:none}
.sblock:focus-visible .sblock__t{color:var(--rost-text)}
.sblock__k{border:1px solid var(--clay);border-radius:4px;background:var(--tief);
  padding:12px;line-height:0}
.sblock__k .hvis{width:100%;height:auto}
.sblock__t{margin:0;font-size:clamp(21px,1.9vw,27px);transition:color .3s var(--e)}
.sblock__kette{display:grid;gap:14px clamp(18px,2.4vw,26px);margin-top:clamp(14px,1.8vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr))}
.sblock__s{position:relative;padding-left:15px;border-left:2px solid var(--clay);
  transition:border-color .3s var(--e)}
.sblock:hover .sblock__s,.sblock:focus-visible .sblock__s{border-left-color:var(--gold)}
.sblock__l{margin:0;font-family:var(--font-display);font-size:13.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rost-text)}
.sblock__x{margin:6px 0 0;font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.58;
  color:var(--text-dunkel)}
.sblock__i > p:last-child{margin-top:clamp(14px,1.8vw,18px)}
@media (max-width:700px){
  .sblock{grid-template-columns:1fr}
  .sblock__k{max-width:220px}
}
@media (prefers-reduced-motion:reduce){
  .sblock,.sblock__s,.sblock__t{transition:none}
}

/* ── 23.6 · Wissensnetz ────────────────────────────────────────────────── */
/* Ein Netz braucht sichtbare Verbindungen, sonst ist es eine Kartenwand.
   Vom Impuls in der Mitte laeuft eine Goldlinie in einen senkrechten Strang,
   von dort ein kurzer Ast zu jedem Format. */
.wnetz{--luecke:clamp(24px,3vw,44px);--ast:34px;
  display:grid;gap:var(--luecke);align-items:center;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  margin-top:clamp(28px,3.4vw,44px)}
.wnetz__mitte{position:relative;padding:clamp(24px,3vw,34px);border-radius:5px;
  border:1px solid var(--gold);background:rgba(217,164,65,.06);text-align:center}
.wnetz__puls{display:block;width:44px;height:44px;margin:0 auto 16px;
  transform:rotate(45deg);border:2px solid var(--gold);
  background:rgba(217,164,65,.14)}
.wnetz__mt{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,1.7vw,25px);color:var(--sand)}
.wnetz__mx{margin:10px 0 0;font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.6;
  color:var(--text-hell)}
.wnetz__liste{list-style:none;margin:0;padding:0 0 0 var(--ast);position:relative;
  display:grid;gap:clamp(12px,1.6vw,16px);grid-template-columns:1fr}
.wnetz__liste::before{content:"";position:absolute;left:0;top:44px;bottom:44px;width:2px;
  background:linear-gradient(180deg,rgba(217,164,65,.35),var(--gold),rgba(217,164,65,.35))}
.wnode{position:relative}
.wnode::before{content:"";position:absolute;left:calc(-1 * var(--ast));top:50%;
  width:var(--ast);height:2px;background:var(--gold);opacity:.42;
  transition:opacity .3s var(--e)}
.wnode:hover::before,.wnode:focus-within::before{opacity:1}
.wnetz__mitte::after{content:"";position:absolute;left:100%;top:50%;
  width:calc(var(--luecke) + 2px);height:2px;background:var(--gold);opacity:.5}
.wnode a{display:block;height:100%;padding:clamp(16px,2vw,22px);border-radius:4px;
  border:1px solid var(--linie-hell);text-decoration:none;
  transition:border-color .3s var(--e),background .3s var(--e),transform .3s var(--e)}
.wnode a:hover,.wnode a:focus-visible{border-color:var(--gold);
  background:rgba(217,164,65,.06);transform:translateY(-2px)}
.wnode__p{display:block;width:13px;height:13px;transform:rotate(45deg);
  background:var(--gold);opacity:.7;margin-bottom:13px;
  transition:opacity .3s var(--e)}
.wnode a:hover .wnode__p,.wnode a:focus-visible .wnode__p{opacity:1}
.wnode__t{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(18px,1.3vw,21px);color:var(--sand)}
.wnode__x{display:block;margin-top:8px;font-size:clamp(15px,.3vw + 13.5px,16px);
  line-height:1.55;color:var(--text-hell)}
.wnode__l{display:block;margin-top:12px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(14.5px,.3vw + 13px,15.5px);color:var(--gold)}
@media (max-width:880px){
  /* Mobil wird aus dem Netz eine Linie: Impuls oben, Formate darunter. */
  .wnetz{grid-template-columns:1fr}
  .wnetz__mitte::after{left:50%;top:100%;width:2px;height:var(--luecke)}
  .wnetz__liste::before{top:0;bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .wnode a,.wnode__p{transition:none}
  .wnode a:hover,.wnode a:focus-visible{transform:none}
}

/* ── 23.7 · Systembild ─────────────────────────────────────────────────── */
.sysbild{display:grid;gap:clamp(24px,3.2vw,48px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin-top:clamp(28px,3.4vw,42px)}
.sysbild__b{border:1px solid var(--clay);border-radius:5px;background:var(--tief);
  padding:clamp(16px,2vw,26px);line-height:0}
.sysbild__b .hvis{width:100%;height:auto}
.sysbild__liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.8vw,20px)}
.sysbild__liste li{padding-left:16px;border-left:2px solid var(--gold)}
.sysbild__liste b{display:block;font-family:var(--font-display);
  font-size:clamp(18px,1.3vw,21px);color:var(--dunkelblau)}
.flaeche--tief .sysbild__liste b{color:var(--sand)}
.sysbild__liste span{display:block;margin-top:4px;
  font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.58;color:var(--text-dunkel)}
.flaeche--tief .sysbild__liste span{color:var(--text-hell)}
@media (max-width:820px){ .sysbild{grid-template-columns:1fr} }

/* ── 23.8 · Verbindungswege, Systeme & Daten ───────────────────────────── */
.wege{display:grid;gap:clamp(24px,3vw,44px);align-items:center;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  margin-top:clamp(28px,3.4vw,42px)}
.wege__b{border:1px solid var(--linie-hell);border-radius:5px;
  background:rgba(0,0,0,.22);padding:clamp(14px,2vw,24px);line-height:0}
.wege__b .hvis{width:100%;height:auto}
/* Beschriftung im Motiv — dieselbe Displayschrift wie im Text. */
.hvis__b{fill:var(--text-hell);font-family:var(--font-display);font-size:15px;
  font-weight:600;letter-spacing:.04em}
.flaeche--sand .hvis__b,.flaeche--weiss .hvis__b{fill:var(--text-dunkel)}
/* Das Systembild liegt immer auf dunklem Grund (.sysbild__b), auch auf heller Flaeche: helle Beschriftung
   (dunkel auf dunkel war 1,2:1, „Digitale Souveraenitaet" auf /ansatz/). */
.flaeche--sand .sysbild__b .hvis__b,.flaeche--weiss .sysbild__b .hvis__b{fill:var(--text-hell)}
/* Raute und Verbindungslinien laufen durch die Feldmitte, genau dort stand die Beschriftung. Sie rueckt an den
   Feldrand (Wissen, Daten nach oben; Prozesse, Werkzeuge nach unten); Text und Aufbau des Bildes bleiben. */
.sysbild__b .hvis__b:nth-of-type(-n+2){transform:translateY(-22px)}
.sysbild__b .hvis__b:nth-of-type(n+3){transform:translateY(20px)}
.hvis__b--klein{font-size:12.5px;font-weight:500;fill:var(--gold);opacity:.85}
.wgang{fill:none;stroke:var(--gold);stroke-width:1.8;opacity:.36;
  transition:opacity .3s var(--e),stroke-width .3s var(--e)}
.wege.hat-weg .wgang{opacity:.1}
.wgang.ist-an{opacity:1;stroke-width:2.6}
.wege__l{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.4vw,14px)}
.wege__l li{display:grid;gap:4px}
.wege__l button{display:block;width:100%;text-align:left;min-height:var(--tap);
  padding:10px 14px;border:1px solid var(--linie-hell);border-radius:4px;
  background:none;cursor:pointer;font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,.4vw + 14.4px,17px);color:var(--sand);
  transition:border-color .3s var(--e),background .3s var(--e)}
.wege__l button:hover,.wege__l button:focus-visible,.wege__l button[aria-pressed="true"]{
  border-color:var(--gold);background:rgba(217,164,65,.08)}
.wege__l span{padding-left:14px;font-size:clamp(15px,.3vw + 13.5px,16px);line-height:1.55;
  color:var(--text-hell)}
@media (max-width:880px){ .wege{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .wgang,.wege__l button{transition:none}
}

/* ── 23.9 · Architektenbild, Software Factory ──────────────────────────── */
.archbild{display:grid;gap:clamp(24px,3vw,44px);align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  margin-top:clamp(28px,3.4vw,42px)}
.archbild__b{border:1px solid var(--linie-hell);border-radius:5px;
  background:rgba(0,0,0,.22);padding:clamp(14px,2vw,24px);line-height:0}
.archbild__b .hvis{width:100%;height:auto}
.archbild__l{list-style:none;margin:0;padding:0;counter-reset:ab;
  display:grid;gap:clamp(14px,1.8vw,20px)}
.archbild__l li{counter-increment:ab;padding-left:44px;position:relative}
.archbild__l li::before{content:counter(ab,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.1em;
  color:var(--gold)}
.archbild__l b{display:block;font-family:var(--font-display);
  font-size:clamp(18px,1.3vw,21px);color:var(--sand)}
.archbild__l span{display:block;margin-top:4px;
  font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.58;color:var(--text-hell)}
@media (max-width:880px){ .archbild{grid-template-columns:1fr} }

/* ── 23.10 · Große Aussage — Rhythmus zwischen den Blöcken ─────────────── */
.gross{margin:clamp(32px,4vw,54px) 0 0;max-width:26ch;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(24px,2.6vw,38px);color:var(--dunkelblau)}
.flaeche--tief .gross{color:var(--sand)}
.gross__q{margin:16px 0 0;max-width:54ch;padding-left:16px;border-left:2px solid var(--gold);
  font-size:clamp(16px,.4vw + 14.4px,17.5px);line-height:1.6;color:var(--text-dunkel)}
.flaeche--tief .gross__q{color:var(--text-hell)}

/* ── 23.11 · Schrittlinie — eine Folge ist keine Auswahl ───────────────── */
/* Die Verbindung wird je Schritt gezogen, nicht als eine Linie ueber das
   ganze Raster. Sonst laeuft sie hinter dem letzten Marker ins Leere und
   bricht, sobald ein Schritt in die naechste Zeile rutscht. */
.slinie{--luecke:clamp(18px,2.2vw,26px);
  list-style:none;margin:clamp(28px,3.4vw,42px) 0 0;padding:0;position:relative;
  display:grid;gap:var(--luecke);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr))}
.slinie__s{position:relative;padding-top:30px}
.slinie__s::after{content:"";position:absolute;left:17px;
  right:calc(-1 * var(--luecke));top:6px;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(217,164,65,.45))}
.slinie__s:last-child::after{display:none}
.slinie__m{position:absolute;left:0;top:0;width:15px;height:15px;transform:rotate(45deg);
  background:var(--gold)}
.slinie__n{margin:0;font-family:var(--font-display);font-size:clamp(14px,.3vw + 12.5px,15px);
  font-weight:600;letter-spacing:.12em;color:var(--rost-text)}
.flaeche--tief .slinie__n{color:var(--gold)}
.slinie__t{margin:5px 0 0;font-size:clamp(19px,1.4vw,22px)}
.slinie__x{margin:8px 0 0;font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.58;
  color:var(--text-dunkel)}
.flaeche--tief .slinie__x{color:var(--text-hell)}
@media (max-width:760px){
  .slinie{grid-template-columns:1fr}
  .slinie__s{padding:0 0 0 30px}
  .slinie__s::after{left:6px;right:auto;top:17px;bottom:calc(-1 * var(--luecke));
    width:2px;height:auto;
    background:linear-gradient(180deg,var(--gold),rgba(217,164,65,.45))}
}

/* ── 23.12 · Aufnahmeliste — Aufzählung statt Kachelwand ───────────────── */
.aufl{margin:clamp(26px,3.2vw,38px) 0 0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.aufl__p{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px);align-items:baseline;
  padding:clamp(13px,1.6vw,17px) 0;border-top:1px solid var(--clay)}
.flaeche--tief .aufl__p{border-top-color:var(--linie-hell)}
.aufl dt{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,1.1vw,19px);color:var(--dunkelblau)}
.flaeche--tief .aufl dt{color:var(--sand)}
.aufl dd{margin:0;font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.58;
  color:var(--text-dunkel)}
.flaeche--tief .aufl dd{color:var(--text-hell)}
@media (max-width:520px){
  .aufl__p{grid-template-columns:1fr;gap:4px}
}

/* ══════════════════════════════════════════════════════════════════════════
   24 · V5.17 — Qualitätsfinalisierung
   Keine neue Stilwelt: dieselben Token, dieselbe Schrift, dieselben vier
   Grundformen. Neu sind vier Bausteine — Hero-Signatur, reichere
   Auswertung, Jens-Bildfläche und der NEXO-Guide unten rechts.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 24.1 · (entfallen) ────────────────────────────────────────────────
   Die kleine Kopfsignatur ist in Abschnitt 26 durch das grosse
   Begleiter-Hauptmotiv ersetzt worden. Regeln dort. */

/* ── 24.2 · Auswertung mit Begründung ──────────────────────────────────── */
.empf__warum{margin-top:16px}
.empf__warum .empf__satz{margin:0 0 10px}
.empf__warum .empf__satz:last-child{margin-bottom:0}
/* Der Pruefblock steht NEBEN dem Paar, nicht darin — ohne eigenen Abstand
   klebte er direkt unter der letzten Zeile von „Mitpruefen". */
.empf__teil--voll{margin-top:clamp(22px,2.6vw,30px);padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--clay)}
.empf__liste,.empf__pruef{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.empf__liste b,.empf__pruef b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,.5vw + 14px,18px);color:var(--dunkelblau)}
.empf__liste span{display:block;margin-top:2px;
  font-size:clamp(15px,.3vw + 13.5px,16px);line-height:1.55;color:var(--text-dunkel)}
.empf__pruef li{position:relative;padding-left:20px;
  font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.58;color:var(--text-dunkel)}
.empf__pruef li::before{content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;transform:rotate(45deg);background:var(--gold)}
.empf__nicht{margin:clamp(22px,2.6vw,30px) 0 0;padding:13px 16px;border-radius:3px;
  background:rgba(184,86,51,.07);border-left:3px solid var(--rost);max-width:60ch;
  font-size:clamp(15.5px,.35vw + 14px,16.5px);line-height:1.58;color:var(--text-dunkel)}
.empf__nicht b{font-family:var(--font-display);color:var(--rost-text);display:block;
  margin-bottom:3px}

.begr__h{margin:clamp(22px,2.6vw,30px) 0 8px;font-size:clamp(19px,1.4vw,23px)}
.begr__inner > .begr__h:first-of-type{margin-top:clamp(16px,2vw,22px)}
.muster{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.muster li{padding-left:14px;border-left:2px solid var(--clay)}
.muster b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(15.5px,.35vw + 14px,16.5px);color:var(--dunkelblau)}
.muster span{display:block;font-size:clamp(14.5px,.3vw + 13px,15.5px);line-height:1.5;
  color:var(--text-dunkel)}
.begr__fuss{margin:clamp(24px,3vw,32px) 0 0;padding-top:clamp(16px,2vw,20px);
  border-top:1px solid var(--clay);max-width:64ch;
  font-size:clamp(15px,.3vw + 13.5px,16px);line-height:1.6;color:var(--text-dunkel)}

/* ── 24.3 · Jens-Bildfläche ────────────────────────────────────────────── */
.jens{margin:clamp(32px,4vw,52px) 0 0;display:grid;gap:clamp(20px,2.6vw,34px);
  align-items:center;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.jens__b{display:block;line-height:0;border-radius:5px;overflow:hidden;
  border:1px solid var(--clay)}
.jens__b img{width:100%;height:auto;display:block}
.jens__c{margin:0}
.jens__t{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(19px,1.5vw,24px);color:var(--dunkelblau)}
.jens__x{margin:10px 0 0;font-size:clamp(16px,.4vw + 14.4px,17.5px);line-height:1.6;
  color:var(--text-dunkel);max-width:44ch}
.jens__h{margin:14px 0 0;padding-left:14px;border-left:2px solid var(--gold);max-width:42ch;
  font-size:clamp(14px,.3vw + 12.5px,15px);line-height:1.55;color:var(--text-dunkel);
  font-style:italic}
@media (max-width:820px){ .jens{grid-template-columns:1fr} }

/* ── 24.4 · NEXO-Guide unten rechts ────────────────────────────────────── */
/* Geführte Navigation, kein Chat. Fixiert, aber klein und wegklickbar;
   der Knopf ist ein echter Button und per Tastatur erreichbar. */
.guide{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:140;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.guide__knopf{display:flex;align-items:center;gap:10px;min-height:var(--tap);
  padding:8px 16px 8px 8px;border-radius:99px;cursor:pointer;
  border:1px solid var(--linie-hell);background:var(--tief);color:var(--sand);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(14.5px,.3vw + 13px,15.5px);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.6);
  transition:border-color .25s var(--e),transform .25s var(--e)}
.guide__knopf:hover,.guide__knopf:focus-visible{border-color:var(--gold);transform:translateY(-1px)}
.guide__b{flex:none;width:34px;line-height:0;display:block}
.guide__b img{width:100%;height:auto;display:block}
/* Das Panel waechst nach oben. Ohne Deckel wurde es hoeher als der
   Bildschirm, hat die Navigation verdeckt und den eigenen Knopf
   hinausgeschoben. Deshalb: Hoehe begrenzt, Inhalt scrollt darin. */
.guide__panel{width:min(348px,calc(100vw - 2*clamp(12px,2vw,24px)));
  max-height:min(66vh,540px);overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(16px,2vw,22px);border-radius:6px;
  border:1px solid var(--linie-hell);background:var(--tief);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.7)}
.guide__kopf{position:relative;padding-right:34px}
.guide__h{margin:4px 0 0;font-size:clamp(19px,1.4vw,22px);color:var(--sand)}
.guide__zu{position:absolute;right:-6px;top:-8px;width:var(--tap);height:var(--tap);
  border:0;background:none;color:var(--text-hell);cursor:pointer;font-size:24px;line-height:1;
  border-radius:4px}
.guide__zu:hover,.guide__zu:focus-visible{color:var(--sand)}
.guide__liste{list-style:none;margin:clamp(12px,1.6vw,16px) 0 0;padding:0;display:grid;gap:5px}
.guide__liste a{display:block;padding:9px 12px;border-radius:4px;text-decoration:none;
  border:1px solid transparent;
  transition:border-color .2s var(--e),background .2s var(--e)}
.guide__liste a:hover,.guide__liste a:focus-visible{border-color:var(--gold);
  background:rgba(217,164,65,.07)}
.guide__f{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,.3vw + 13.5px,16px);color:var(--sand);line-height:1.4}
.guide__z{display:block;margin-top:3px;font-size:clamp(13.5px,.25vw + 12.5px,14.5px);
  line-height:1.45;color:var(--text-hell)}
.guide__fuss{margin:clamp(14px,1.8vw,18px) 0 0;padding-top:12px;
  border-top:1px solid var(--linie-hell);
  font-size:clamp(13px,.25vw + 12px,14px);line-height:1.5;color:var(--text-hell)}
@media (max-width:620px){
  /* Mobil nur das Zeichen, damit der Guide keinen Inhalt verdeckt. */
  .guide__knopf{padding:8px;gap:0}
  .guide__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
  .guide__b{width:30px}
}
@media print{ .guide{display:none} }
@media (prefers-reduced-motion:reduce){
  .guide__knopf,.guide__liste a{transition:none}
  .guide__knopf:hover,.guide__knopf:focus-visible{transform:none}
}

/* ── 24.5 · Die sechs Begleiter als System statt als Galerie ───────────── */
/* Eine feine Goldschiene verbindet die sechs Motive; jedes hängt mit einer
   Raute daran. Aus sechs nebeneinandergestellten Kacheln wird ein
   Zusammenhang — dieselbe Logik wie Kette und Wissensnetz. */
.bgitter{position:relative;padding-top:38px}
.bgitter::before{content:"";position:absolute;left:6%;right:6%;top:7px;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(217,164,65,.2),var(--gold) 50%,rgba(217,164,65,.2))}
.bgitter .bmarke{position:relative}
.bgitter .bmarke::before{content:"";position:absolute;left:50%;top:-38px;
  width:13px;height:13px;margin-left:-6.5px;transform:rotate(45deg);
  background:var(--gold);transition:transform .3s var(--e)}
.bgitter .bmarke::after{content:"";position:absolute;left:50%;top:-24px;width:1px;height:24px;
  background:linear-gradient(180deg,rgba(217,164,65,.55),rgba(217,164,65,.12))}
.bgitter .bmarke:hover::before{transform:rotate(45deg) scale(1.25)}
/* Weniger Kartenoptik: der Rahmen tritt zurück, das Motiv trägt. */
.bgitter .bmarke__b{border-color:rgba(255,255,255,.07)}
.bgitter .bmarke:hover .bmarke__b{border-color:rgba(217,164,65,.42)}
.bgitter .bmarke__b,.bgitter .bmarke__leer{transition:border-color .3s var(--e)}
.bgitter .bmarke__t{min-height:0;margin-top:2px}
.bgitter .bmarke__k{margin-top:10px;border-left-color:rgba(217,164,65,.45)}
@media (max-width:620px){
  /* Auf zwei Spalten trägt die Schiene nicht mehr — dann ohne. */
  .bgitter{padding-top:0}
  .bgitter::before,.bgitter .bmarke::before,.bgitter .bmarke::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bgitter .bmarke::before,.bgitter .bmarke__b,.bgitter .bmarke__leer{transition:none}
  .bgitter .bmarke:hover::before{transform:rotate(45deg)}
}

/* ══════════════════════════════════════════════════════════════════════════
   25 · V5.18 — Letzter Feinschliff
   Kein Redesign: dieselben Token, dieselbe Schrift, dieselben Formen.
   Drei Dinge werden geschlossen — der Begleiter im Kopf bekommt Gewicht,
   der HBC-Weg zeigt seine erfolgreichen Abzweigungen, und der Guide wird
   sichtbar genug, um gefunden zu werden.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 25.1 · Begleiter als vollwertige Kopfsignatur ─────────────────────── */
/* 140 px statt 64 px, mit Rolle und Kurzsatz. Der Begleiter steht damit im
   Kopflayout und nicht mehr darunter angehängt — die Metaphergrafik rechts
   bleibt trotzdem der größere, systemische Hauptdarsteller. */
.hsig{display:flex;align-items:center;gap:clamp(16px,2vw,24px);
  margin:clamp(26px,3vw,36px) 0 0;padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--linie-hell);max-width:52ch}
/* height:auto muss explizit stehen — die 64-px-Hoehe aus Abschnitt 24.1
   schlaegt sonst das aspect-ratio und staucht das Motiv. */
.hsig__b{flex:none;width:clamp(104px,11vw,140px);height:auto;aspect-ratio:1/1;
  overflow:hidden;border-radius:5px;border:1px solid var(--linie-hell);
  line-height:0;display:block}
.hsig__b img{width:100%;height:100%;object-fit:cover;display:block}
.hsig__t{display:block}
.hsig__t b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(17px,.6vw + 14.5px,19px);color:var(--sand);letter-spacing:-.01em}
.hsig__r{display:block;margin-top:2px;font-family:var(--font-display);
  font-size:clamp(13.5px,.25vw + 12.5px,14.5px);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}
.hsig__k{display:block;margin-top:9px;padding-left:13px;border-left:2px solid var(--gold);
  font-size:clamp(15px,.3vw + 13.5px,16px);line-height:1.55;color:var(--text-hell)}
@media (max-width:620px){
  .hsig{gap:14px;max-width:none}
  .hsig__b{width:88px;height:auto}
  .hsig__k{display:none}
}

/* ── 25.2 · HBC-Weg: die Abzweigung zum Ziel ──────────────────────────── */
/* Der Weg muss nicht bis zur Individualsoftware laufen. Wo er früher
   ankommt, zweigt eine dünne Goldlinie zu einem Zielrahmen ab. Kein
   Flowchart — dieselbe Linie, dieselbe Raute wie überall. */
.stat__ziel{position:relative;display:block;margin:14px 0 0 0;
  padding:12px 16px 12px 18px;max-width:54ch;
  border:1px solid rgba(217,164,65,.42);border-radius:0 4px 4px 0;
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(217,164,65,.10),rgba(217,164,65,.02))}
.stat__ziel b{display:block;font-family:var(--font-display);font-size:12.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rost-text)}
.flaeche--tief .stat__ziel b{color:var(--gold)}
.stat__ziel span:not(.stat__zweig){display:block;margin-top:4px;
  font-size:clamp(15px,.3vw + 13.5px,16px);line-height:1.55;color:var(--text-dunkel)}
.flaeche--tief .stat__ziel span:not(.stat__zweig){color:var(--text-hell)}
/* Der Zweig: waagerechte Linie von der Hauptstrecke zum Zielrahmen, mit
   Raute am Abgang. Auf schmalen Schirmen entfällt er ersatzlos. */
.stat__zweig{position:absolute;left:calc(-1 * clamp(34px,4vw,58px) + 8px);top:22px;
  width:calc(clamp(34px,4vw,58px) - 8px);height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(217,164,65,.55))}
.stat__zweig::before{content:"";position:absolute;left:-6px;top:-5px;
  width:11px;height:11px;transform:rotate(45deg);background:var(--gold)}
.stat__zweig::after{content:"";position:absolute;right:-1px;top:-4px;
  width:9px;height:9px;border:1px solid var(--gold);border-left:0;border-bottom:0;
  transform:rotate(45deg)}
@media (max-width:620px){
  .stat__zweig{display:none}
  .stat__ziel{padding-left:14px}
}

/* ── 25.3 · Guide mit etwas mehr Präsenz ──────────────────────────────── */
.guide__knopf{background:linear-gradient(180deg,#232833,var(--tief));
  border-color:rgba(217,164,65,.34)}
.guide__b{width:40px}
.guide.ist-offen .guide__knopf{border-color:var(--gold)}
/* Einmalige Ansprache beim ersten Besuch. Erscheint verzögert, verschwindet
   nach dem ersten Klick und kommt in dieser Sitzung nicht wieder.
   Kein Bounce, kein Dauerpuls, kein Popup über dem Inhalt. */
.guide__blase{position:relative;max-width:250px;padding:12px 34px 12px 15px;
  border-radius:6px;border:1px solid rgba(217,164,65,.42);background:var(--tief);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.7);
  font-size:clamp(14.5px,.3vw + 13px,15.5px);line-height:1.5;color:var(--sand);
  opacity:0;transform:translateY(6px);transition:opacity .5s var(--e),transform .5s var(--e)}
.guide__blase.ist-da{opacity:1;transform:none}
.guide__blase::after{content:"";position:absolute;right:26px;bottom:-7px;
  width:11px;height:11px;transform:rotate(45deg);background:var(--tief);
  border-right:1px solid rgba(217,164,65,.42);border-bottom:1px solid rgba(217,164,65,.42)}
.guide__blasezu{position:absolute;right:2px;top:2px;width:30px;height:30px;
  border:0;background:none;color:var(--text-hell);cursor:pointer;font-size:17px;line-height:1}
.guide__blasezu:hover,.guide__blasezu:focus-visible{color:var(--sand)}
@media (max-width:620px){ .guide__blase{display:none} }
@media (prefers-reduced-motion:reduce){
  .guide__blase{transition:none;opacity:1;transform:none}
}

/* ── 25.4 · Workshop-Bildfläche ───────────────────────────────────────── */
.werk{margin:clamp(34px,4vw,54px) 0 0}
.werk__b{display:block;line-height:0;border-radius:5px;overflow:hidden;
  border:1px solid var(--clay)}
.flaeche--tief .werk__b{border-color:var(--linie-hell)}
.werk__b img{width:100%;height:auto;display:block}
.werk__c{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px clamp(16px,2vw,26px);
  align-items:baseline}
.werk__t{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,.5vw + 14px,18px);color:var(--dunkelblau)}
.flaeche--tief .werk__t{color:var(--sand)}
.werk__x{margin:0;font-size:clamp(15px,.3vw + 13.5px,16px);line-height:1.55;
  color:var(--text-dunkel);max-width:56ch}
.flaeche--tief .werk__x{color:var(--text-hell)}
.werk__h{margin:8px 0 0;flex-basis:100%;font-size:clamp(13.5px,.25vw + 12.5px,14.5px);
  line-height:1.5;color:var(--text-dunkel);font-style:italic;opacity:.85}
.flaeche--tief .werk__h{color:var(--text-hell)}

/* ── 25.5 · Abschluss der vertieften Auswertung ────────────────────────── */
/* Der Erkenntnisteil endet mit einem klaren Schritt — abgesetzt, nicht neben
   dem CTA weiter oben, sondern als Schluss der Herleitung. */
.abschluss{margin:clamp(28px,3.4vw,40px) 0 0;padding:clamp(22px,2.6vw,32px);
  border-radius:5px;border:1px solid var(--clay);
  background:linear-gradient(135deg,rgba(217,164,65,.07),rgba(217,164,65,.02))}
.abschluss__h{margin:0;font-size:clamp(20px,1.7vw,26px);max-width:26ch;line-height:1.24}
.abschluss__x{margin:12px 0 0;max-width:54ch;
  font-size:clamp(16px,.4vw + 14.4px,17.5px);line-height:1.6;color:var(--text-dunkel)}
.abschluss .nexo{margin-top:clamp(18px,2.2vw,24px)}
.abschluss .cta{margin-top:clamp(18px,2.2vw,24px)}

/* ══════════════════════════════════════════════════════════════════════════
   26 · Rollentausch — Begleiter führt, Metapher erklärt
   Der Begleiter ist ab hier das Hauptmotiv im Seitenkopf: emotionale,
   markenhafte Leitfigur. Die abstrakte Grafik wandert in den ersten
   Inhaltsabschnitt und arbeitet dort als Erklärmotiv mit eigener
   Überschrift. Zwei getrennte Rollen, keine Konkurrenz um Aufmerksamkeit.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 26.1 · Begleiter als Hauptmotiv im Kopf ───────────────────────────── */
.phero--held .phero__inner{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center}
.pheld{margin:0;display:block}
/* Quadratisch statt 5:4: die Quellmotive sind 4:5 bzw. 1:1. Ein
   Querformat schnitt so stark hinein, dass die Figur formatfuellend wurde
   und ins Comichafte kippte. Im Quadrat bleibt die Szene um sie herum. */
.pheld__b{display:block;line-height:0;overflow:hidden;border-radius:6px;
  border:1px solid var(--linie-hell);
  aspect-ratio:1/1;box-shadow:0 30px 70px -34px rgba(0,0,0,.75)}
.pheld__b img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;display:block}
.pheld__c{margin:clamp(16px,2vw,22px) 0 0;display:block;
  padding-left:16px;border-left:2px solid var(--gold)}
.pheld__c b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(19px,1.5vw,24px);color:var(--sand);letter-spacing:-.015em}
.pheld__r{display:block;margin-top:3px;font-family:var(--font-display);
  font-size:clamp(13.5px,.25vw + 12.5px,14.5px);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold)}
.pheld__k{display:block;margin-top:9px;max-width:38ch;
  font-size:clamp(15px,.3vw + 13.5px,16.5px);line-height:1.55;color:var(--text-hell)}
@media (max-width:899px){
  /* Mobil zuerst der Text, dann das Motiv — die Aussage führt. */
  .phero--held .phero__inner{grid-template-columns:1fr;gap:clamp(22px,3vw,30px)}
  .phero--held .phero__bild{max-width:none;display:block}
  .pheld__b{aspect-ratio:3/2}
  .pheld__k{max-width:none}
}
@media (max-width:620px){
  .pheld__b{aspect-ratio:4/3}
  .pheld__k{display:none}
}

/* ── 26.2 · Metaphergrafik als Erklärmotiv im Inhalt ───────────────────── */
/* Mit eigener Überschrift und eigenem Text — bewusst gesetzt, nicht als
   übrig gebliebene Dekoration aus dem Kopfbereich. */
.fach{display:grid;gap:clamp(24px,3.2vw,52px);align-items:center;
  margin:clamp(28px,3.4vw,44px) 0 clamp(30px,3.6vw,48px);
  padding-bottom:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--clay);
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.flaeche--tief .fach{border-bottom-color:var(--linie-hell)}
.fach--links .fach__t{order:2}
.fach__h{margin:6px 0 0;font-size:clamp(20px,1.8vw,27px);line-height:1.24;max-width:22ch}
.fach__t .fliess{margin:13px 0 0;max-width:50ch}
.fach__b{border:1px solid var(--clay);border-radius:5px;background:var(--tief);
  padding:clamp(16px,2.2vw,28px);line-height:0}
.flaeche--tief .fach__b{border-color:var(--linie-hell);background:rgba(0,0,0,.24)}
.fach__b .hvis{width:100%;height:auto}
@media (max-width:880px){
  .fach{grid-template-columns:1fr;gap:clamp(20px,2.6vw,26px)}
  .fach--links .fach__t{order:0}
}

/* ── 26.3 · Position mit Jens-Bild ────────────────────────────────────── */
.pos{display:grid;gap:clamp(24px,3.2vw,48px);align-items:start;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.pos__t .fliess:first-child{margin-top:0}
/* Im Positionsblock steht das Bild als ruhige Spalte, nicht als Bühne. */
.pos .jens{margin:0;display:block}
.pos .jens__b{aspect-ratio:4/3}
.pos .jens__b img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.pos .jens__c{margin-top:14px}
.pos .jens__t{font-size:clamp(17px,.6vw + 14.5px,19px)}
.pos .jens__x{margin-top:7px;font-size:clamp(15px,.3vw + 13.5px,16px);max-width:none}
.pos .jens__h{margin-top:11px}
@media (max-width:880px){
  .pos{grid-template-columns:1fr}
  .pos .jens{max-width:520px}
}
.pos__prinzip{margin-top:clamp(22px,2.6vw,30px);padding-left:16px;
  border-left:2px solid var(--clay)}

/* ── Assessment-Bühne: <picture> statt <img> ──────────────────────────────
   Im Theme liefern die Bühnenbilder AVIF mit JPEG-Rückfall und srcset.
   Das <picture> übernimmt dafür die Rolle, die im Prototyp das <img> hatte —
   dieselbe Positionierung, dieselbe Ein-/Ausblendung. */
.check__stand .stufe{position:absolute;inset:0;opacity:0;
  transition:opacity .6s var(--e);pointer-events:none}
.check__stand .stufe.ist-aktiv{opacity:1}
.check__stand .stufe img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){ .check__stand .stufe{transition:none} }

/* Ueber HBC: Zwischenueberschrift des Ansprechpartner-Blocks (Phase 2C) */
.pos__h{margin:clamp(24px,3vw,36px) 0 0;font-size:clamp(22px,1.7vw,27px);line-height:1.25}

/* ── 27 · Vertrauensbaustein: Netzwerke & Engagement, Kundenstimmen ─────
   Bewusst kein Kartenraster und keine Logowand: Text trägt den Inhalt
   (SEO/GEO-Vorgabe), das Logo ist ein sparsamer, sekundärer Beleg darunter.
   Deshalb kein Rahmen, kein Schatten, keine Hover-Vergrösserung — nur
   grosszuegiger Abstand. Fehlt ein Logo (Asset noch nicht vorhanden), lässt
   .verbund__marke einfach weg; kein Platzhalterrahmen, kein Symbolbild. */
.verbund{display:grid;gap:clamp(28px,3.4vw,44px);margin-top:clamp(26px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.verbund__marke{display:flex;align-items:flex-start;height:40px;margin-bottom:14px}
.verbund__marke img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
.verbund__name{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,.35vw + 14.5px,17.5px);color:var(--dunkelblau)}
.verbund__text{margin:6px 0 0;font-size:clamp(15px,.3vw + 13.5px,16px);
  line-height:1.6;color:var(--text-dunkel);max-width:34ch}
.flaeche--sand .verbund__name,.flaeche--tief .verbund__name{color:inherit}
.flaeche--tief .verbund__text{color:var(--text-hell)}

/* Trennung der beiden Teile innerhalb eines Vertrauensbausteins — dieselbe
   ruhige Regel wie .weiter, keine eigene Kartenoptik. */
.vertrauen__teil + .vertrauen__teil{margin-top:clamp(40px,4.6vw,64px);
  padding-top:clamp(34px,4vw,50px);border-top:1px solid var(--clay)}
.flaeche--tief .vertrauen__teil + .vertrauen__teil{border-top-color:var(--linie-hell)}

/* Kundenstimmen: Kennzahl als Fliesstext, keine Sterngrafik. */
.stimmen__kennzahl{margin-top:10px}

/* WordPress-Admin-Leiste (nur eingeloggt, Body-Klasse .admin-bar): sie sitzt fest oben (32px, bis 782px 46px) und deckte den
   fixierten Kopf ab — Logo, Navigation und CTA waren oben angeschnitten. Fixierte Elemente rutschen darunter. Unter 601px
   scrollt die Leiste mit der Seite weg, dort ist kein Versatz noetig. Besucher haben die Klasse nie; fuer sie aendert sich nichts. */
@media (min-width:601px){
  .admin-bar .kopf{top:32px}
  .admin-bar .anav{top:calc(var(--kopf-h) + 32px)}
  html:has(.admin-bar){scroll-padding-top:calc(var(--kopf-h) + 48px)}
}
@media (min-width:601px) and (max-width:1150px){
  /* .nav sitzt im Kopf (backdrop-filter = Bezugsrahmen fuer fixed): sein top folgt dem Kopf, nur die Hoehe muss die Leiste abziehen. */
  .admin-bar .nav{max-height:calc(100vh - var(--kopf-h) - 32px)}
}
@media (min-width:601px) and (max-width:782px){
  .admin-bar .kopf{top:46px}
  .admin-bar .anav{top:calc(var(--kopf-h) + 46px)}
  html:has(.admin-bar){scroll-padding-top:calc(var(--kopf-h) + 62px)}
  .admin-bar .nav{max-height:calc(100vh - var(--kopf-h) - 46px)}
}

/* Freiraum unter dem Fuss fuer den kompakten Guide-Knopf (fest unten rechts, 68px hoch): am Seitenende lag er sonst ueber der
   Fussnavigation bzw. der Rechtszeile und verdeckte Links (gemessen von 324 bis 1770px, bis 61px). Gestuft nach dem Breitenscan
   statt pauschal: bis 895px (Rechtszeile laeuft unter den Knopf) +64px, 896–1771px (Fussnavigation) +40px, ab 1772px endet der
   Fuss links vom Knopf. Aendert sich der Fussinhalt, den Scan wiederholen. */
.fuss{padding-bottom:calc(clamp(30px,3.6vw,46px) + 64px)}
@media (min-width:896px){ .fuss{padding-bottom:calc(clamp(30px,3.6vw,46px) + 40px)} }
@media (min-width:1772px){ .fuss{padding-bottom:clamp(30px,3.6vw,46px)} }