/*
Theme Name: Zumsande Expertin
Description: Sabine Zumsande, Expertin fuer Betriebspruefungen. Custom-Theme, portiert aus dem statischen Design (seite-a-expertin/index.html). Betreut von LuarMedia.
Author: LuarMedia
Version: 1.2.10
Text Domain: zumsande-expertin
*/

  :root{
    --bg: #0a0f0c;
    --bg-raised: #101613;
    --bg-band: #0e1a14;
    --paper: #171d19;
    --line: rgba(240,245,242,0.12);
    --line-strong: rgba(240,245,242,0.22);
    --text: #f2f5f3;
    --text-dim: rgba(242,245,243,0.68);
    --text-faint: rgba(242,245,243,0.44);
    --accent: #34e0a1;
    --accent-dim: #1f8f66;
    --accent-ink: #062017;
    --nav-bg: rgba(10,15,12,0.86);
    --card-grad-a: #141b17;
    --card-grad-b: #0c110f;
    --btn-primary-hover: #4beeb4;
    --hairline: rgba(255,255,255,0.06);
    --detail-line: rgba(240,245,242,0.05);
    --radius: 4px;
    --radius-sm: 3px;
    --maxw: 1200px;
    --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    /* Eigene, spuerbar "physische" Kurve statt Standard-ease, fuer alle
       Bewegung/Transform-Uebergaenge (Note: Radius bleibt bewusst scharf/klein,
       Seite A soll "hart" bleiben, keine Squircle-Weichheit wie bei Seite B). */
    --ease: cubic-bezier(0.19, 1, 0.22, 1);

    /* Motion-Tokens: benannte Skala statt frei gewaehlter Werte pro Regel.
       --ease bleibt die etablierte Standardkurve fuer Hover/Transform
       (s.o., an vielen Stellen bereits im Einsatz, bewusst nicht
       umbenannt/ersetzt). Die Tokens hier gelten fuer neue und ueberarbeitete
       Regeln; ein Komplett-Refactor aller bestehenden Animationswerte ist
       kein Ziel fuer sich, nur wo es echten Mehrwert bringt. */
    --motion-fast: 180ms;
    --motion-normal: 380ms;
    --motion-slow: 800ms;
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Spacing/Container-Tokens (Phase 3, Batch 3A): bewusst nur die drei
       Werte, die tatsaechlich gebraucht werden - Section-Abstand (jetzt
       einzige Quelle fuer die generische section{}-Regel UND .letter,
       vorher an beiden Stellen als Literal dupliziert), der Spaltenabstand
       im "Der Brief"-Raster und die Textspalten-Breite dort. Kein
       abstraktes Vollsystem ohne Verbraucher (--space-xs/s/m/xl,
       --maxw-wide/content/narrow waren nach dem Bau ungenutzt und sind
       deshalb wieder entfernt). --maxw bleibt unten beim bestehenden Wert. */
    --space-section: clamp(96px, 11vw, 168px);
    --space-l: 56px;
    --maxw-text: 680px;

    /* Phase 4A, Editorial Knowledge System: nur echte Luecken ergaenzt,
       siehe EDITORIAL_PAGE_SYSTEM.md Abschnitt 13. --maxw-text (oben)
       bleibt die Reading-Column, kein zweiter redundanter Wert dafuer. */
    --maxw-wide: 860px;
    --breadcrumb-size: 12px;
    /* --text-faint (0.44-0.48 Alpha) unterschreitet WCAG-AA (4.5:1) fuer
       Fliesstext auf hellem Grund bei dieser Groesse (gemessen 3.33:1) -
       eigener, staerkerer Wert nur fuer Breadcrumb/Source-Notes. Dies ist
       der dunkle Default-Wert (siehe :root[data-theme="light"] fuer die
       helle Entsprechung). */
    --text-quiet: rgba(242,245,243,0.65);
  }

  /* Helles Farbschema: Seite A bleibt vom Konzept her "dunkel", aber auf
     Wunsch soll die Seite auch hell nutzbar sein. Die kinematografische
     Nachtszene im Hero (.hero-video, Bat-Signal) bleibt bewusst immer
     dunkel, das ist eine Filmszene und keine Seitenhintergrundfarbe, genau
     wie ein dunkles Video auf einer sonst hellen Seite auch dunkel bliebe. */
  :root[data-theme="light"]{
    --bg: #f4f7f5;
    --bg-raised: #ffffff;
    --bg-band: #eaf1ec;
    --paper: #faf8f2;
    --line: rgba(10,15,12,0.10);
    --line-strong: rgba(10,15,12,0.22);
    --text: #0a100c;
    --text-dim: rgba(10,16,12,0.68);
    --text-faint: rgba(10,16,12,0.48);
    --text-quiet: rgba(10,16,12,0.65);
    --accent: #0c8f5c;
    --accent-dim: #0a6f48;
    --accent-ink: #f4fff9;
    --nav-bg: rgba(244,247,245,0.86);
    --card-grad-a: #ffffff;
    --card-grad-b: #eef4f0;
    --btn-primary-hover: #0aa86c;
    --hairline: rgba(10,15,12,0.06);
    --detail-line: rgba(10,15,12,0.07);
  }

  *{ box-sizing: border-box; }
  /* Eigener Fokusring statt Browser-Standardblau: gleiche Akzentfarbe wie
     der Rest der Seite, damit Tastaturnutzung sich nicht wie ein
     Fremdkoerper anfuehlt. Keine Unterdrueckung des Default-Outlines
     irgendwo sonst im Theme, das hier ist die einzige Fokus-Regel, die
     global greift. */
  :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  body{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* Feiner Filmkorn-Overlay ueber der ganzen Seite, fixiert, nicht interaktiv,
     deshalb kein Repaint-Kostenrisiko beim Scrollen (siehe DOM Cost Regeln). */
  body::after{
    content: "";
    position: fixed; inset: 0; z-index: 999; pointer-events: none;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  img, svg{ display:block; max-width: 100%; }

  .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

  a{ color: inherit; }

  h1, h2, h3{ margin: 0; font-weight: 800; letter-spacing: -0.01em; }

  p{ margin: 0; }

  .word{ display: inline-block; }

  /* Reine CSS-Zeitanimation fuer den Hero-Einstand: keine Abhaengigkeit von
     einem laufenden JS-Ticker, laeuft komplett unabhaengig vom Rendering-
     Zustand des Tabs und kann daher nicht dauerhaft bei opacity:0 haengen
     bleiben (siehe Kommentar im Skript weiter unten). */
  @media (prefers-reduced-motion: no-preference){
    .hero h1 .word{
      animation: word-in 0.8s var(--ease) both;
      animation-delay: calc(var(--word-i, 0) * 60ms + 200ms);
    }
    .hero-sub, .hero-cta{
      opacity: 0;
      animation: fade-up 0.7s var(--ease) both;
    }
    .hero-sub{ animation-delay: 0.75s; }
    .hero-cta{ animation-delay: 0.9s; }
  }
  @keyframes word-in{
    from{ opacity: 0; transform: translateY(28px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-up{
    from{ opacity: 0; transform: translateY(14px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  /* Scroll-Einblenden fuer Section-Inhalte: native CSS-Scroll-Timeline statt
     JS-ScrollTrigger. Läuft komplett im Browser-Compositor, ist von keinem
     JS-Tick abhängig und kann nicht haengenbleiben. @supports sorgt dafuer,
     dass Browser ohne diese noch junge Funktion (z.B. aeltere Safari-
     Versionen) die Elemente einfach normal/sofort sichtbar zeigen. */
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      h2[data-split-words],
      .opening-quote, .letter-mark,
      .letter .lede, .letter .signature-line,
      .argument-myth, .argument-reply,
      .faq-item, .contact-grid > *, .footer-cross,
      .turn-lede, .authority-portrait, .authority-quote,
      .sb-headline-calm, .sb-headline-tension, .footer-nav-group,
      .knowledge-hero, .answer-block, .decision-path, .sabine-aside, .entity-portrait{
        animation: scroll-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
      }
      /* Der erste Satz der Fallakte ("Sechshunderttausend Euro...") ist der
         gewuenschte Hoehepunkt der Section - er bekommt eine eigene,
         gewichtigere Ankunft statt der generischen Fade-up-Bewegung: loest
         sich sichtbar aus der Unschaerfe (wie ein Fakt, der in den Fokus
         rueckt), dieselbe Sprache wie der Finanzamt-Satz und "Das sage ich
         dir nicht." - ein durchgehendes "das hier ist der Kern"-Signal.
         Die "Aufgeben"-Zeile bekam urspruenglich dieselbe Behandlung, wurde
         aber wieder entfernt: im WP-Customizer-Vorschau-Iframe blieb sie
         sichtbar in einem halbtransparenten Zwischenzustand haengen (genau
         das Einfrier-Risiko, das diese ganze Datei bei GSAP vermeidet - hier
         traf es die native Scroll-Timeline in einem ungewoehnlichen
         Embedding-Kontext). Die wichtigste Zeile der Seite darf davon nicht
         abhaengen: sie ist jetzt immer sofort und voll sichtbar, siehe
         .statement-band .signature-line. Aus genau diesem Grund bekommt
         .case-file-open keine opacity/blur-basierte Einstands-Animation
         mehr - auch nicht das generische .scroll-fade-up (das animiert
         ebenfalls opacity ueber animation-timeline:view(), also dasselbe
         Grundrisiko, nur ohne Blur). .statement-band h2 bekommt bei der
         finalen Haltung-Ueberarbeitung weiter unten eine EIGENE, bewusst
         nur transform-basierte Bewegung (.haltung-settle) - sicher, weil
         nie opacity aendert, siehe dortiger Kommentar. .case-file-open steht
         immer sofort und vollstaendig da, ohne jede Einstands-Animation. */
    }
  }
  /* Kein opacity mehr in dieser Keyframe (Performance-Fix): Lighthouse/axe
     hat via color-contrast-Check aufgedeckt, dass Text, der beim initialen
     Seitenaufruf schon (teilweise) im Viewport sitzt, mitten in der
     opacity-Ueberblendung gemessen wird und dadurch als zu kontrastarm
     durchfaellt - selbe Fehlerklasse wie der fruehere Signature-Line-Freeze
     in der WP-Customizer-Vorschau. Nur noch transform, nie opacity/filter
     bei diesen scroll-getriebenen Reveals. */
  @keyframes scroll-fade-up{
    from{ transform: translateY(26px); }
    to{ transform: translateY(0); }
  }
  /* Harter Einschlag statt sanftem Einblenden: leichtes Ueberschwingen am
     Ende (79% -> 100%), passend zur Stamp-Slam-Bewegung der Ankuendigung
     kurz davor, statt einer rein gleitenden Fade-up-Bewegung. */
  /* Bewusst ohne Ueberschwing-Bounce: mit animation-timeline:view() haengt
     jeder Zwischenzustand direkt an der Scrollposition, nicht nur am
     Zeitverlauf. Ein Nutzer, der genau in der Bounce-Phase mit Scrollen
     aufhoert (sehr wahrscheinlich, Leute pausieren zum Lesen), sieht dann
     dauerhaft die haessliche Zwischenpose eingefroren statt der fertigen
     Form. Rein monotone Bewegung ist deshalb bei allen scroll-gekoppelten
     Animationen Pflicht, nicht nur hier. */

  /* ---------- Video-Intro: echtes Bat-Signal-Video vor der eigentlichen
     Seite, bleibt immer dunkel (Filmszene, keine Themefarbe). Kein Scroll-
     Hijack: die Seite steht ganz normal direkt darunter, scrollen reicht
     bereits als "Weiter"; der Button und das Video-Ende beschleunigen das
     nur zusaetzlich. ---------- */
  .hero-video{
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  /* Verlauf mittig auf dem Video: dunkelt Zentrum und unteren Rand leicht ab,
     damit die Headline auf jeder Videoszene lesbar bleibt. */
  .hero-video-overlay{
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 42%, rgba(5,8,7,0.35) 0%, rgba(5,8,7,0.05) 45%, transparent 70%),
      linear-gradient(0deg, rgba(5,8,7,0.85) 0%, rgba(5,8,7,0.25) 40%, rgba(5,8,7,0.12) 100%);
  }

  /* ---------- Nav ---------- */
  header.site-nav{
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    transition: background 160ms ease;
  }
  /* Volles Schwarz bei offenem Menue, damit der helle Bat-Signal-Hintergrund
     nicht durchscheint und Logo/Text besser lesbar bleiben. */
  body.menu-open header.site-nav{
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-inner{
    max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
    height: 68px; display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
  }
  .brand{
    display: flex; align-items: center;
    text-decoration: none;
    min-width: 0;
  }
  /* Bild-Zweig (siehe header.php Dateipruefung). Werte unveraendert aus der
     Markenintegration vom 30.08.2026 uebernommen: 34 px Hoehe = 134 px
     Breite bei einer Originaldatei von 571x145 px, bei 2x Pixeldichte noch
     scharf (268 px). Ungenutzt, solange keine korrekt geschriebene Datei
     im Theme liegt - dann greift stattdessen .brand-lockup darunter. */
  .brand-logo{
    height: 34px; width: auto; max-width: 100%;
    transition: opacity 180ms ease;
  }
  .brand:hover .brand-logo, .brand:focus-visible .brand-logo{ opacity: 0.8; }
  @media (max-width: 360px){
    .brand-logo{ height: 26px; }
  }
  /* Markenarchitektur 31.08.2026: Dachmarke ("zumsande.") + Bereichszeile
     ("betriebspruefungen") als gesetzter Lockup, aktiv bis eine korrekte
     Bilddatei vorliegt - Begruendung in header.php. Gestapelt statt
     nebeneinander: haelt die Kopfzeile auf 390 px schmal und bildet die
     geforderte Hierarchie Dachmarke ueber Bereich auch optisch ab
     (groesser/dunkler oben, kleiner/leiser darunter), statt sie nur durch
     Reihenfolge anzudeuten. */
  .brand-lockup{
    display: flex; flex-direction: column; gap: 1px;
    line-height: 1.05;
    transition: opacity 180ms ease;
  }
  .brand:hover .brand-lockup, .brand:focus-visible .brand-lockup{ opacity: 0.72; }
  .brand-dachmarke{
    font-weight: 800; letter-spacing: -0.01em; font-size: 17px; color: var(--text);
  }
  .brand-bereich{
    font-weight: 600; font-size: 10.5px; letter-spacing: 0.05em; color: var(--accent-dim);
  }
  /* 200 %-Zoom auf einem 390-px-Geraet entspricht 195 px - der zweizeilige
     Lockup bleibt dort ohne weitere Anpassung lesbar (kein fester
     Bildmasse, der zuerst gegen den Menueschalter laeuft). */
  @media (max-width: 360px){
    .brand-dachmarke{ font-size: 15px; }
    .brand-bereich{ font-size: 9.5px; }
  }

  nav.primary-links{ display: flex; align-items: center; gap: 28px; }
  /* wp_nav_menu umschliesst jeden Eintrag mit <li>, auch ohne <ul>-Wrapper
     (items_wrap ueberspringt nur den Container, nicht die Items); ohne
     Reset zeigen manche Browser dafuer trotzdem einen Listenpunkt an. */
  /* Phase 5A: wp_nav_menu() gab die <li>-Items bisher ohne <ul>/<ol>-Wrapper
     aus (items_wrap war reines "%3$s") - ungueltiges HTML (axe-core:
     "listitem"-Verstoss). Jetzt gibt es wieder ein echtes <ul>, aber mit
     display:contents macht es sich selbst layouttechnisch unsichtbar -
     exakt dasselbe Prinzip, das die <li>-Regel direkt darunter fuer die
     einzelnen Items schon nutzt. Keine visuelle Aenderung. */
  nav.primary-links > ul.nav-menu-list, .mobile-panel > ul.nav-menu-list{ display: contents; }
  nav.primary-links li, .mobile-panel li{ list-style: none; display: contents; }
  nav.primary-links a{
    position: relative;
    font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text-dim);
    transition: color 160ms ease;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  nav.primary-links a::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform 260ms var(--ease);
  }
  nav.primary-links a:hover{ color: var(--text); }
  nav.primary-links a:hover::after{ transform: scaleX(1); }

  .nav-right{ display: flex; align-items: center; gap: 18px; }

  /* Schwebender CTA-Button: begleitet ueber die ganze Seite, taucht erst
     nach dem Hero auf und verschwindet wieder im Kontakt-Abschnitt, damit
     er sich dort nicht mit dem echten Formular-CTA ueberlagert. */
  .floating-cta{
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    opacity: 0; transform: translateY(18px) scale(0.94);
    pointer-events: none;
    box-shadow: 0 16px 36px rgba(0,0,0,0.32);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  }
  .floating-cta.is-visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  @media (max-width: 640px){
    .floating-cta{ right: 14px; bottom: 14px; left: 14px; }
    .floating-cta{ padding: 13px 18px; font-size: 14px; justify-content: center; }
  }

  /* Cookie-Consent-Banner fuer Google Analytics 4: erscheint unten, blockiert
     nichts von der Seite, verschwindet dauerhaft nach einer Entscheidung
     (siehe consentBannerInit weiter unten). */
  .consent-banner{
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
    max-width: 640px; margin: 0 auto;
    background: var(--bg-raised); border: 1px solid var(--line-strong);
    border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,0.28);
    padding: 22px 24px;
    display: flex; flex-direction: column; gap: 16px;
    opacity: 0; transform: translateY(16px);
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms var(--ease);
  }
  .consent-banner.is-visible{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .consent-banner p{ font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }
  .consent-banner a{ color: var(--accent); }
  .consent-banner-actions{ display: flex; gap: 12px; flex-wrap: wrap; }

  .btn{
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font);
    font-weight: 700; font-size: 14.5px;
    padding: 12px 22px;
    border-radius: var(--radius);
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 220ms var(--ease), background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 220ms ease;
  }
  .btn:active{ transform: scale(0.97); }
  .btn-primary{ background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover{ background: var(--btn-primary-hover); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(10,15,12,0.20); }
  /* Interaktiver Glanzstreifen: laeuft beim Hover einmal quer durch. */
  .btn-primary::before{
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 35%, rgba(6,32,23,0.28) 50%, transparent 65%);
    transform: translateX(-130%);
  }
  @media (hover: hover){
    .btn-primary:hover::before{ transition: transform 600ms ease; transform: translateX(130%); }
  }
  .btn-ghost{ background: transparent; color: var(--text); border-color: var(--line-strong); }
  /* Interaktive Fuell-Animation: ein Punkt waechst beim Hover zur vollen
     Flaeche, wie ein Licht, das den Button uebernimmt. */
  .btn-ghost::before{
    content: ""; position: absolute; left: 18px; top: 50%; z-index: -1;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%) scale(0);
  }
  @media (hover: hover){
    .btn-ghost::before{ transition: transform 480ms var(--ease); }
    .btn-ghost:not([aria-disabled]):hover::before{ transform: translateY(-50%) scale(60); }
    .btn-ghost:not([aria-disabled]):hover{ color: var(--accent-ink); border-color: var(--accent); }
  }
  .btn-ghost:hover{ transform: translateY(-2px); }
  .btn-sm{ padding: 9px 16px; font-size: 13.5px; }

  /* Button-in-Button: eigener Kreis-Chip fuer den Pfeil statt eines nackten
     Icons neben dem Text, scharfkantiger Button bleibt aber "hart". */
  .btn-icon-chip{
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(6,32,23,0.16);
    transition: transform 260ms var(--ease);
    flex-shrink: 0;
  }
  .btn-primary:hover .btn-icon-chip{ transform: translate(2px,-1px); }

  .nav-toggle{
    display: none;
    position: relative;
    background: none; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
    width: 40px; height: 40px; align-items: center; justify-content: center;
    color: var(--text); cursor: pointer;
    transition: border-color 200ms ease;
  }
  .nav-toggle:hover{ border-color: var(--accent); }
  .nav-toggle .bar{
    position: absolute; left: 10px; width: 20px; height: 2px; background: currentColor;
    transition: transform 320ms var(--ease), opacity 200ms ease, top 320ms var(--ease);
  }
  .nav-toggle .bar:nth-child(1){ top: 14px; }
  .nav-toggle .bar:nth-child(2){ top: 19px; }
  .nav-toggle .bar:nth-child(3){ top: 24px; }
  body.menu-open .nav-toggle .bar:nth-child(1){ top: 19px; transform: rotate(45deg); }
  body.menu-open .nav-toggle .bar:nth-child(2){ opacity: 0; }
  body.menu-open .nav-toggle .bar:nth-child(3){ top: 19px; transform: rotate(-45deg); }

  .mobile-panel{
    display: none;
    position: fixed; inset: 68px 0 0 0; z-index: 49;
    background: var(--bg);
    padding: 28px 24px;
    flex-direction: column; gap: 4px;
  }
  .mobile-panel a{
    font-size: 20px; font-weight: 700; text-decoration: none; color: var(--text);
    padding: 14px 4px; border-bottom: 1px solid var(--line);
  }
  .mobile-panel .btn{ margin-top: 20px; }
  body.menu-open .mobile-panel{ display: flex; }
  body.menu-open{ overflow: hidden; }

  @media (max-width: 860px){
    nav.primary-links{ display: none; }
    .nav-right .btn-ghost{ display: none; }
    .nav-toggle{ display: flex; }
  }

  /* ---------- Sections generic ---------- */
  section{ padding: var(--space-section) 0; border-bottom: 1px solid var(--line); position: relative; }
  section:last-of-type{ border-bottom: none; }
  @media (max-width: 720px){ section{ padding: 72px 0; } }

  .section-head{ max-width: 640px; margin-bottom: 44px; }
  .section-head h2{ font-size: clamp(28px, 4vw, 40px); line-height: 1.15; }
  .section-head p{ margin-top: 14px; color: var(--text-dim); font-size: 17px; line-height: 1.6; }

  /* ---------- Akte: durchgehendes Leitsystem ----------
     Kreativ-Reset: das eigentliche Problem war nicht eine einzelne
     schwache Section, sondern dass jede Section ihre eigene, isolierte
     Bildidee hatte - kein gemeinsamer Faden, deshalb "Checkliste einzelner
     guter Ideen" statt "eine Handschrift". Sabines eigentliche Arbeit ist
     Aktenordnung: aus Chaos eine Reihenfolge machen. Genau das wird jetzt
     das durchgehende Bild der ganzen Seite, nicht nur der Ankuendigung:
     eine fortlaufende Akten-Registratur (01 - DER MOMENT, 02 - DAS
     SCHREIBEN, ...) am Kopf jeder Section, wie Reiter in einer echten
     Akte. Die Seite selbst verhaelt sich wie das Versprechen, das sie
     macht - sie ordnet sich vor deinen Augen. Bewusst zurueckhaltend
     (Monospace, klein, ein Registrierungs-Ton, keine Deko): das Leitsystem
     soll gelesen werden koennen, nicht auffallen. */
  .case-index{
    display: flex; align-items: baseline; gap: 14px;
    grid-column: 1 / -1;
    margin-bottom: 28px;
    font-family: "Courier New", ui-monospace, monospace;
  }
  .case-index-num{ font-size: 13px; font-weight: 800; color: var(--accent-dim); letter-spacing: 0.02em; }
  .case-index-label{
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-quiet);
  }
  .case-index::after{ content: ""; flex: 1 1 auto; height: 1px; background: var(--line); min-width: 24px; }
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .case-index{
        animation: case-index-stamp 420ms var(--ease-enter) both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
      }
    }
  }
  @keyframes case-index-stamp{
    from{ transform: translateX(-8px); }
    to{ transform: translateX(0); }
  }

  /* ---------- Photo placeholders ---------- */
  /* Die diagonale Karo-Textur (repeating-linear-gradient) bleibt - reines,
     ungefaerbtes Streifenmuster, kein Farbverlauf im eigentlichen Sinn. Die
     zweifarbige Flaechenfuellung dahinter war fast unsichtbar dezent, wird
     trotzdem durch eine einzelne Flaeche ersetzt: eine Sache weniger, die
     wie ein Verlauf aussieht. */
  .photo-placeholder{
    position: relative;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background:
      repeating-linear-gradient(135deg, var(--detail-line) 0 2px, transparent 2px 14px),
      var(--card-grad-b);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  /* Der Schimmer-Streifen war gruen eingefaerbt (Akzentfarbe als Glanz) -
     jetzt neutral (bestehender Text-Ton, keine neue Farbe): zeigt weiterhin
     "das ist ein Platzhalter", ohne Farb-Haze. */
  .photo-placeholder::before{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(10,15,12,0.06) 48%, transparent 66%);
    transform: translateX(-120%);
  }
  @media (prefers-reduced-motion: no-preference){
    .photo-placeholder::before{ animation: shimmer 5s ease-in-out infinite; }
  }
  @keyframes shimmer{
    0%, 40% { transform: translateX(-120%); }
    70%, 100% { transform: translateX(120%); }
  }
  .photo-placeholder .ph-label{
    position: relative; z-index: 1;
    text-align: center; font-size: 12.5px; font-weight: 600;
    color: var(--text-faint); letter-spacing: 0.02em;
    padding: 18px; line-height: 1.5;
    max-width: 220px;
  }


  /* ---------- Hero: volle Buehne statt Kartenlayout ---------- */
  .hero{
    position: relative;
    min-height: 100dvh;
    display: flex; align-items: flex-end;
    padding: 140px 0 100px;
    overflow: hidden;
    background: #050807;
    border-bottom: none;
  }
  /* Uebergang Hero -> Hell (Batch 3A, korrigiert): bewusst KEIN langer,
     inszenierter Verlauf. Der Hero ist Sabines konzentrierter Auftritt;
     danach folgt die reale Situation des Unternehmers (der Brief liegt
     da) - der Schnitt darf ruhig und selbstverstaendlich wirken, nicht
     wie ein gebauter Web-Effekt. Deshalb nur ein minimaler
     Anti-Seam-Rand (5%, kaum mehr als der urspruengliche Wert), keine
     eigene "Dawn"-Flaeche, kein zusaetzliches Element. Bleibt innerhalb
     des unteren Hero-Innenabstands (padding-bottom 100px). */
  .hero-scrim{
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, var(--bg) 5%, rgba(10,15,12,0.72) 34%, rgba(10,15,12,0.28) 62%, rgba(10,15,12,0.15) 100%);
  }
  /* Treibende Lichtpartikel, wie Funken/Signalreste in der Nachtluft.
     Rein dekorativ, aria-hidden, keine Interaktion. */
  .hero-particles{ position: absolute; inset: 0; z-index: 1; overflow: hidden; }
  /* War ein gruener Glow-Farbverlauf (Akzentfarbe als Leuchtpunkt) - genau
     die dekorative Farb-Haze, die sitesweit entfernt wurde. Jetzt schlichte,
     ungefaerbte Punkte (bestehender Text-Ton, keine neue Farbe): die
     treibende Bewegung bleibt (siehe Kommentar oben), der Leucht-Effekt
     nicht. */
  .hero-particles .particle{
    position: absolute; border-radius: 50%;
    background: rgba(242,245,243,0.55);
  }
  .hero-particles .p1{ width: 6px; height: 6px; left: 18%; top: 30%; animation: drift 9s ease-in-out infinite; }
  .hero-particles .p2{ width: 4px; height: 4px; left: 72%; top: 55%; animation: drift 12s ease-in-out infinite 1.5s; }
  .hero-particles .p3{ width: 5px; height: 5px; left: 42%; top: 68%; animation: drift 10s ease-in-out infinite 3s; }
  .hero-particles .p4{ width: 3px; height: 3px; left: 85%; top: 22%; animation: drift 8s ease-in-out infinite 0.8s; }
  @media (prefers-reduced-motion: reduce){ .hero-particles .particle{ animation: none; } }
  @keyframes drift{
    0%, 100% { transform: translate(0,0); opacity: 0.5; }
    50% { transform: translate(14px,-26px); opacity: 1; }
  }
  /* Hero-Text bleibt immer hell: der Hero-Hintergrund ist eine fixe dunkle
     Filmszene (siehe .hero-video), unabhaengig vom Hell/Dunkel-Umschalter
     der restlichen Seite. Waere die Schrift theme-abhaengig, wuerde sie im
     hellen Modus dunkel auf dunklem Hintergrund verschwinden. */
  .hero-content{ position: relative; z-index: 2; max-width: 780px; color: #f2f5f3; }
  .hero h1{
    font-size: clamp(36px, 6.6vw, 76px);
    line-height: 1.08;
  }
  /* Der Satz selbst steht fest ("Wenn ... , gehe ich vor."), nur die
     Woertergruppe in der Luecke wechselt, vertikal reingeschoben, wie ein
     Wortwechsel und nicht wie ein kompletter Satzaustausch. Alle Varianten
     teilen sich dieselbe Grid-Zelle, damit die Zeile nicht in der Breite
     springt. Reine Zeitanimation, kein Scroll-/JS-Trigger noetig. */
  /* Breite passt sich per JS an die jeweils sichtbare Wortgruppe an (siehe
     Skript), damit hinter kuerzeren Woertern keine Luecke klafft. Ohne JS
     bleibt die Standardbreite (an das laengste Wort angepasst) als sicherer
     Fallback, sieht dann nur etwas grosszuegiger aus, nichts bricht. */
  .word-swap{ display: inline-grid; vertical-align: bottom; transition: width 420ms var(--ease); }
  .word-swap-item{ grid-area: 1 / 1; opacity: 0; transform: translateY(20px); white-space: nowrap; }
  /* Der Name ist Altlast - der Doppel-Glow (text-shadow) ist entfernt,
     dekorative Farb-Haze, sitesweit entfernt. Die Akzentfarbe traegt die
     Betonung jetzt allein. */
  .glow-word{
    color: var(--accent);
  }
  @media (prefers-reduced-motion: no-preference){
    .word-swap-item{ animation: word-swap-in 10s var(--ease) infinite; }
    .word-swap-item:nth-child(1){ animation-delay: 0s; }
    .word-swap-item:nth-child(2){ animation-delay: 2.5s; }
    .word-swap-item:nth-child(3){ animation-delay: 5s; }
    .word-swap-item:nth-child(4){ animation-delay: 7.5s; }
  }
  @media (prefers-reduced-motion: reduce){
    .word-swap-item:first-child{ opacity: 1; transform: none; }
  }
  @keyframes word-swap-in{
    0%{ opacity: 0; transform: translateY(22px); }
    6%{ opacity: 1; transform: translateY(0); }
    23%{ opacity: 1; transform: translateY(0); }
    29%{ opacity: 0; transform: translateY(-22px); }
    100%{ opacity: 0; }
  }
  /* =================================================================
     REFLOW-KORREKTUR (WCAG 1.4.10), 30.08.2026.

     Befund: bei effektiv 195 px Breite - in der Praxis ausschliesslich
     starker Browserzoom, 200 % auf einem 390-px-Geraet - schob die Seite
     103 px nach rechts.

     Ursache, gemessen: die Hero-Ueberschrift kann nicht schrumpfen. Ihre
     Groesse ist clamp(36px, 6.6vw, 76px); bei 195 px betraegt 6.6vw nur
     12,9 px, die Untergrenze haelt also bei 36 px. Gleichzeitig stehen die
     vier Wechselwoerter auf white-space: nowrap und teilen sich eine
     Grid-Zelle, deren Breite das breiteste Wort bestimmt ("der Bescheid",
     dort 232 px). Zusammen mit 2x24 px Innenabstand ergab das 303 px
     Inhaltsbreite in einem 195-px-Viewport.

     Korrektur ausschliesslich unterhalb von 320 px, also unterhalb jeder
     realen Geraetebreite: kleinere Untergrenze fuer die Ueberschrift,
     Umbruch fuer die Wechselwoerter, schmalerer Innenabstand.

     Die Wortrotation bleibt unveraendert: .word-swap bleibt inline-grid,
     alle vier Varianten behalten grid-area 1/1 und stapeln sich weiterhin
     uebereinander. Geaendert wird nur, ob ein einzelnes Wort umbrechen
     darf. Keine Aenderung an Animation, Videoschicht, Copy oder an
     irgendeiner Darstellung ab 320 px.
     ================================================================= */
  @media (max-width: 319px){
    .wrap{ padding: 0 16px; }
    .hero h1{ font-size: 28px; }
    .word-swap-item{ white-space: normal; }
    /* Zweite Ursache, nach der Ueberschrift gemessen: die Schaltflaechen
       stehen auf nowrap. "Erstgespraech vereinbaren" mass dort mit
       Innenabstand und Symbolplaettchen 255 px. Auch hier nur unterhalb
       von 320 px: umbrechen erlaubt, Innenabstand schmaler. Form, Farbe
       und Beschriftung bleiben unveraendert. */
    .btn{ white-space: normal; padding-left: 14px; padding-right: 14px; }

    /* Dritte Ursache, in der Breite gemessen: sieben Bausteine weiter unten
       auf der Seite sind Grid- oder Flex-Kinder und stehen damit auf dem
       Standardwert min-width: auto - sie koennen nicht unter ihre
       Inhaltsbreite schrumpfen. Genau dieselbe Ursache hatte die
       Schwesterseite bei ihrer 200-%-Pruefung.

       Die Bausteine sind einzeln benannt statt pauschal ueber einen
       Universalselektor: so ist nachvollziehbar, was betroffen ist, und es
       aendert sich nichts an Bausteinen, die hier gar kein Problem haben. */
    .doc-head-right, .doc-head > *,
    .turn-frame-item, .turn-frame-item > *,
    .case-index,
    .authority-portrait, .authority-content,
    .trust-strip, .trust-chip,
    .faq-item, .faq-item > *,
    .trust-chip-label{ min-width: 0; }

    /* Vierte Ursache: lange deutsche Komposita und Aktenzeichen, die als ein
       einziges Wort nicht umbrechen koennen - "Betriebspruefungsbegleitung"
       misst hier 197 px, das geschwaerzte Aktenzeichen 105 px. Umbruch
       erlauben statt hinterher mit overflow: hidden zu kaschieren; die
       Schwesterseite macht das seitenweit genauso. */
    body{ overflow-wrap: break-word; hyphens: auto; }
    /* Das geschwaerzte Aktenzeichen ist ein einziges Token ohne
       Trennmoeglichkeit ("xxx/xxxx/xxxxx"); break-word greift dort nicht,
       weil es keine Wortgrenze gibt. anywhere erlaubt den Umbruch auch
       innerhalb des Tokens. Nur hier, nicht seitenweit. */
    .doc-redact{ overflow-wrap: anywhere; }

    /* Der schwebende CTA ist auf dieser Seite tatsaechlich nicht schwebend:
       .btn setzt position: relative und steht in der Datei nach
       .floating-cta, bei gleicher Spezifitaet gewinnt es. Der Knopf sitzt
       dadurch am Dokumentende statt am Bildschirmrand - ein bestehender
       Fehler, der hier bewusst NICHT behoben wird, weil das die
       Desktopwirkung veraendern wuerde (siehe
       ZUMSANDE_FINAL_BRAND_CLOSEOUT.md, offene Punkte).
       Was hier behoben wird, ist nur die Folge fuer den Ueberlauf: left und
       right verschieben das relativ positionierte Element um 14 px nach
       rechts, und genau diese 14 px ragten ueber den Rand hinaus. */
    .floating-cta{ left: 0; right: 0; }

    /* Fuenfte Ursache, im Kopfbereich: der Lockup stand auf nowrap und
       konnte nicht schrumpfen, dadurch ueberlappte er den Menueschalter -
       der Container meldete keinen Ueberlauf, weil der Text still ueber
       seine eigene Box hinauslief. Der gesetzte Lockup (.brand-lockup,
       siehe oben) ist von sich aus zweizeilig und schmal genug, dass das
       nicht mehr auftritt; der schmalere Innenabstand bleibt trotzdem, er
       schafft zusaetzlich Platz fuer Menueschalter und CTA. */
    .nav-inner{ padding: 0 16px; gap: 12px; }
  }

  .hero-sub{
    margin-top: 22px; font-size: 18px; color: rgba(242,245,243,0.72); max-width: 46ch; line-height: 1.55;
  }
  .hero-cta{ margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-cta .btn-ghost{ color: #f2f5f3; border-color: rgba(242,245,243,0.35); }
  @media (hover: hover){ .hero-cta .btn-ghost:hover{ color: var(--accent-ink); border-color: var(--accent); } }

  /* ---------- Der Brief (Batch 3A, komplett neu) ----------
     Editorial, asymmetrisch, kein Objekt/Icon. Ein ueberdimensioniertes
     typografisches Anfuehrungszeichen ist das einzige grafische Element -
     eine schmale "Rand"-Spalte links, der eigentliche Inhalt rechts,
     bewusst nicht mittig/symmetrisch. Traegt die Emotion rein ueber
     Groessenkontrast und Raum, kein Papier-/Umschlag-Objekt mehr (die
     vorherigen Versuche dazu wirkten trotz mehrfacher Korrektur immer wie
     ein Rendering-Fehler, nie wie Design).
     Vertikaler Rhythmus (Kundenauftrag): der generische Section-Abstand
     (--space-section, bis zu 168px) plus derselbe Abstand oben bei
     #ankuendigung ergaben bis zu ~336px toten Raum zwischen "Aufgeben ist
     keine Option." und dem Beginn des Schreibens - zwei kurze Zeilen mit
     sehr viel Nichts dazwischen, keine bewusste Pause. Gezielt nur an
     dieser einen Naht reduziert. */
  .letter{ padding-bottom: clamp(48px, 6vw, 88px); }
  .letter-grid{
    display: grid; grid-template-columns: minmax(80px, 0.22fr) minmax(0, 1fr);
    column-gap: var(--space-l);
    align-items: start;
  }
  .letter-mark{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(120px, 16vw, 220px); line-height: 0.7;
    color: var(--line-strong);
    user-select: none; pointer-events: none;
    transform: translateY(0.14em);
  }
  .letter-content{ max-width: var(--maxw-text); }
  .opening-quote{
    font-size: 20px; font-weight: 600; color: var(--text-dim); margin: 0 0 14px;
    font-style: italic;
  }
  .letter h2{ font-size: clamp(28px, 4.4vw, 44px); line-height: 1.2; }
  .letter p.lede{
    margin-top: 20px; font-size: 19px; color: var(--text-dim); max-width: 60ch; line-height: 1.65;
  }
  .letter .signature-line{
    margin-top: 28px; font-size: 20px; font-weight: 700; color: var(--accent);
  }
  /* Echter Fund (Kundenhinweis): der negative margin-bottom auf
     .letter-mark war fuer das zweispaltige Desktop-Layout gedacht (Mark
     und Inhalt stehen dort nebeneinander, die Ueberlappung passierte nie).
     Sobald das Grid unten auf eine Spalte kollabiert, stehen Mark und
     Inhalt UNTEREINANDER - derselbe negative Abstand zog dann "Können Sie
     mich retten?" sichtbar in die Kontur-Ziffer hinein (per Puppeteer an
     echten Rects verifiziert: Ueberlappung bei 320/360/390/768px). Fuer
     die gestapelte Ansicht ein positiver Abstand statt eines negativen. */
  @media (max-width: 780px){
    .letter-grid{ grid-template-columns: 1fr; }
    .letter-mark{ font-size: 90px; margin-bottom: 8px; }
  }

  /* HARD RESET: reine Farb-Deckung (dim vs. voll) war zu schwach - "der
     Kontrast zwischen beiden Gedanken muss viel staerker werden". Jetzt
     Farbe + Gewicht + Stil zusammen: der erste Teil klein, leicht, kursiv
     (liest sich wie eine beilaeufige, bereits bekannte Aussage), der
     zweite Teil gross, extra-fett, aufrecht (liest sich wie die eigentliche
     Tatsache, die gerade erst ankommt) - ein echter Registerwechsel
     innerhalb eines Satzes, keine Nuance. Bewusst KEINE Warnfarbe (kein
     Rot), keine "gegen den Steuerberater"-Anmutung - der Steuerberater
     bleibt "gut", nur eben nicht ausreichend. */
  .sb-headline-calm{
    display: block; color: var(--text-dim); font-weight: 500; font-style: italic;
    font-size: 0.62em; letter-spacing: normal; margin-bottom: 6px;
  }
  .sb-headline-tension{ display: block; color: var(--text); font-weight: 900; }

  /* ---------- Argument contrast: HARD RESET ----------
     Kundenkritik: die zwei gleich grossen, umrandeten Karten lasen sich
     wie ein Standard-Vergleichs-Baustein (links/rechts, Pro/Contra) -
     genau das "SaaS/Consulting-Template"-Muster, das vermieden werden
     soll, und implizierte nebenbei einen Gegensatz ("zwei Seiten"), wo
     keiner sein soll (Sabine ergaenzt den Steuerberater, greift ihn nicht
     an). Neu: asymmetrisch statt symmetrisch. Die verbreitete Annahme
     steht klein, kursiv, mit einer duennen Randlinie wie ein echtes
     redaktionelles Pull-Quote - eine beilaeufige, fremde Stimme am Rand.
     Die eigentliche Antwort ist Sabines eigene Stimme und braucht (wie an
     jeder anderen Stelle der Seite, an der sie selbst spricht) keinen
     Rahmen - sie steht einfach da, voll und unverstellt. Keine zwei
     Seiten mehr, ein Gedanke mit einer kurzen Unterbrechung davor. */
  .kicker{ font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .argument-block{ max-width: 620px; }
  .argument-myth{
    margin: 0 0 36px; padding-left: 22px;
    border-left: 2px solid var(--line-strong);
    font-size: 19px; font-weight: 600; font-style: italic; line-height: 1.5;
    color: var(--text-dim);
  }
  .argument-myth .kicker{
    display: block; margin-bottom: 8px; font-style: normal; color: var(--text-quiet);
  }
  .argument-reply .kicker{ display: block; margin-bottom: 10px; color: var(--accent-dim); }
  .argument-reply p{ font-size: 18px; line-height: 1.7; color: var(--text); }
  .argument-reply-close{ margin-top: 16px; font-weight: 700; }

  /* ---------- Der Fall: HARD RESET, keine dunkle Section mehr ----------
     Der Fall bleibt trotzdem eine eigene "Szene": ein duenner Rahmen oben
     und unten (dieselbe Schwellen-Sprache wie Struktur/Fuehrung und die
     Haltung-Section) grenzt ihn bewusst vom umgebenden Fliesstext ab, wie
     eine Aktenseite, die aufgeschlagen wird - Isolation durch Rahmen statt
     durch Dunkelheit. Grosszuegiger vertikaler Abstand, damit der Fall
     wirklich wie ein eigener Moment wirkt, nicht wie ein Absatz zwischen
     Absaetzen. */
  #der-fall{
    position: relative; overflow: hidden;
    background: var(--bg-band);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-top: clamp(72px, 9vw, 128px);
    padding-bottom: clamp(72px, 9vw, 128px);
  }
  #der-fall .wrap{ position: relative; z-index: 1; }
  /* Dritter Durchgang (Kundenauftrag: "wurde zu zurueckhaltend - die
     vorherigen Versuche waren overdesigned, dieser ist under-directed").
     Weiterhin: keine Karte, kein Rahmen, kein Aktenkopf, kein Stempel,
     kein Wasserzeichen, kein Count-up. Gewicht entsteht stattdessen durch
     echten Groessen-/Breiten-/Abstandskontrast: der Eroeffnungssatz nutzt
     die Breite grosszuegiger (bis 860px statt 640px) und steht in
     derselben Groessenordnung wie die anderen grossen Momente der Seite
     (Struktur 58px, Finanzamt 52px) - kein zurueckhaltender Fliesstext-
     Absatz mehr, sondern der eigentliche Aufschlag des Abschnitts. Die
     Erzaehlung darunter bleibt bewusst SCHMALER (46ch statt der vollen
     Breite) und bekommt einen spuerbaren eigenen Abstand (44px statt
     22px) - ein echter Atemzug, kein Sprung: die Tatsache ist breit und
     unuebersehbar, die Erklaerung ist schmal und persoenlich. Beide
     bleiben an derselben linken Kante verbunden, keine zusaetzliche Linie
     noetig. */
  .case-file{ max-width: 860px; }
  .case-file-open{
    font-size: clamp(30px, 5vw, 52px); font-weight: 800; line-height: 1.22;
    color: var(--text); letter-spacing: -0.015em;
  }
  .case-file-body{ margin-top: 44px; max-width: 46ch; }
  .case-file-body p{
    font-size: 18px; font-weight: 500; line-height: 1.7; color: var(--text-dim);
  }
  .case-file-body p + p{ margin-top: 14px; }
  /* Echter Fund (Lighthouse mobile, axe): --text-dim (0.68 Alpha) fiel bei
     14px auf dem gruenlich getoenten Section-Hintergrund (--bg-band) unter
     WCAG-AA (gemessen 2.88:1, noetig 4.5:1 bei dieser Schriftgroesse -
     .case-file-body p daneben ist mit 18px bereits "grosser Text" und
     braucht nur 3:1, faellt deshalb nicht auf). --text-quiet ist der
     bereits etablierte, staerkere Ton fuer genau diesen Fall (Kleingedrucktes
     auf hellem Grund). */
  .case-note{
    position: relative; z-index: 1;
    margin-top: 28px; font-size: 14px; color: var(--text-quiet); max-width: 44ch;
  }

  /* ---------- Case-Proof (Client-Fakt-Update 2026-08-30) ----------
     Stuetzbeweis unterhalb des 600k-Flaggschiffs. Bewusst kein Card-Grid -
     dieselbe "reine Typografie" Entscheidung wie beim 600k-Fall selbst
     (drei fruehere Kartenversuche dieser Section wurden bereits verworfen,
     siehe aeltere Kommentare in dieser Datei). Drei Spalten mit duenner
     Trennlinie statt Boxen/Schatten/Radius. */
  .case-proof{
    margin-top: 56px; padding-top: 40px; max-width: 860px;
    border-top: 1px solid var(--line);
  }
  .case-proof-eyebrow{
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-quiet); margin: 0 0 28px;
  }
  .case-proof-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .case-proof-item{ padding: 0 28px; }
  .case-proof-item:first-child{ padding-left: 0; }
  .case-proof-item:last-child{ padding-right: 0; }
  .case-proof-item + .case-proof-item{ border-left: 1px solid var(--line); }
  .case-proof-kicker{
    font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--text);
    margin: 0 0 10px;
  }
  .case-proof-text{ font-size: 15px; line-height: 1.6; color: var(--text-dim); }
  .case-proof-result{ margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--accent-dim); }
  @media (max-width: 820px){
    .case-proof-grid{ grid-template-columns: 1fr; gap: 28px; }
    .case-proof-item{ padding: 0; }
    .case-proof-item + .case-proof-item{ border-left: none; border-top: 1px solid var(--line); padding-top: 28px; }
  }
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      /* Sicheres Bewegungsprinzip wie bei der Haltung-Section: nur
         transform, nie opacity - der Satz "landet" spuerbar, kann aber
         nie unsichtbar haengen bleiben. */
      .case-file-open{
        animation: haltung-settle linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
      }
    }
  }

  /* Phase 5D: die Section-Ueberschrift/Intro nutzte bisher nur die generische
     .section-head-Regel (max-width 640px, linksbuendig wie der Rest der
     Seite) und die Wizard-Karte (max-width 720px) sass ohne eigenes
     margin:auto ebenfalls linksbuendig in einem breiteren .wrap - die
     Komposition wirkte dadurch zufaellig statt bewusst. Der Selbstcheck ist
     als eigenstaendiges "Geraet"/bewusste Pause nach dem 600k-Fall gedacht,
     nicht als Fliesstext-Abschnitt - deshalb hier (und nur hier) zentriert:
     Kopfzeile und Wizard-Karte mittig, die Fragen/Antworten INNERHALB der
     Karte bleiben linksbuendig (reiner Fliesstext zentriert liest sich
     schlechter, siehe Auftrag: "nicht blind jeden Absatz zentrieren"). */
  /* Vertikaler Rhythmus: zusammen mit .statement-band{padding-top} weiter
     unten reduziert das die tote Flaeche zwischen ".risk-close" und dem
     Beginn von "Meine Haltung" - dieselbe Naht-Logik wie bei .letter/
     #ankuendigung oben. */
  #selbstcheck{ padding-bottom: clamp(48px, 6vw, 88px); }
  #selbstcheck .section-head{ margin-left: auto; margin-right: auto; text-align: center; }
  /* Selbstcheck ist die einzige zentrierte Section (bewusste Pause, siehe
     unten) - das Akten-Leitsystem folgt hier der Zentrierung statt seiner
     sonst linksbuendigen Reiter-Optik, sonst wirkt es wie ein
     Bedienungsfehler statt Absicht. Keine auslaufende Trennlinie hier -
     die haette bei zentrierter Ausrichtung kein sinnvolles Ende. */
  #selbstcheck .case-index{ justify-content: center; }
  #selbstcheck .case-index::after{ display: none; }
  #selbstcheck .check-wizard{ margin-left: auto; margin-right: auto; }

  /* ---------- Selbstcheck: Ja/Nein-Assistent ----------
     Ohne JS zeigt .check-wizard einfach alle acht Fragen als lesbare,
     gestapelte Liste (die Klasse .js-ready, die das Schritt-fuer-Schritt-
     Verhalten aktiviert, wird ausschliesslich per JS gesetzt). Bewusst wie
     ein eigenstaendiges dunkles Diagnose-Geraet gebaut, immer dunkel,
     unabhaengig vom Hell/Dunkel-Umschalter der restlichen Seite (wie ein
     Messgeraet mit eigenem Display statt eingefaerbtem Seiteninhalt). */
  /* Grosser gruener Ambient-Glow-Fleck in der Ecke entfernt (dekorative
     Farb-Haze). Die neutrale, fast monochrome Diagonalflaeche (#101f18 zu
     #0a0f0c, kaum Farbunterschied, reine Tiefenwirkung) bleibt - liest sich
     als solide Geraete-Oberflaeche, nicht als Farbverlauf. */
  /* HARD RESET: kein dunkles "Geraet" mehr auf hellem Grund - las sich als
     eigener, unverbundener Fremdkoerper. Neu: ein klar umrandetes weisses
     Instrument mit vier Ecken-Winkeln (dieselbe "Messgeraet/Kamerabild"-
     Idee wie zuvor, jetzt ohne Dunkelheit transportiert) - ein sichtbarer,
     aber leichter Rahmen statt Schatten-Schwere. */
  .check-wizard{
    position: relative; max-width: 720px;
    background: var(--bg-raised);
    border: 1.5px solid var(--line-strong);
    border-radius: calc(var(--radius) + 6px);
    padding: 44px 40px;
    overflow: hidden;
  }
  .check-wizard::before, .check-wizard::after,
  .check-wizard i::before, .check-wizard i::after{
    content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  }
  .check-wizard::before{ top: 10px; left: 10px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
  .check-wizard::after{ top: 10px; right: 10px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
  .check-wizard i::before{ bottom: 10px; left: 10px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
  .check-wizard i::after{ bottom: 10px; right: 10px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
  @media (max-width: 640px){ .check-wizard{ padding: 32px 24px; } }
  .check-progress{
    height: 5px; background: var(--line); border-radius: 3px; margin-bottom: 40px;
    display: none;
  }
  .check-wizard.js-ready .check-progress{ display: block; }
  .check-progress-bar{
    height: 100%; width: 0%; background: var(--accent); border-radius: 3px;
    transition: width 320ms var(--ease);
  }
  .check-q{ padding: 22px 0; border-top: 1px solid var(--line); }
  .check-q:last-of-type{ border-bottom: 1px solid var(--line); }
  .check-wizard.js-ready .check-q{ display: none; border: none; padding: 0; }
  .check-wizard.js-ready .check-q.is-active{ display: block; }
  /* Fragenwechsel sprang bisher hart um (display:none/block ohne
     Uebergang). Jede Frage rutscht jetzt einmal sanft ein, wenn sie
     aktiv wird - kein Scroll-Timeline noetig, reiner Klassenwechsel. */
  @media (prefers-reduced-motion: no-preference){
    .check-wizard.js-ready .check-q.is-active{
      animation: check-q-in 380ms var(--ease-enter) both;
    }
  }
  @keyframes check-q-in{
    from{ opacity: 0; transform: translateX(18px); }
    to{ opacity: 1; transform: translateX(0); }
  }
  .check-q-num{
    font-size: 13px; font-weight: 800; color: var(--accent-dim);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px;
  }
  .check-q-text{
    font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--text);
    line-height: 1.3; max-width: 56ch; letter-spacing: -0.01em;
  }
  .check-q-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
  .check-answer{
    position: relative; overflow: hidden; isolation: isolate;
    font-family: var(--font); font-weight: 800; font-size: 16px;
    padding: 17px 26px; border-radius: var(--radius);
    border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--text);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 140ms var(--ease);
  }
  .check-answer:hover{ border-color: var(--accent); background: rgba(12,143,92,0.06); transform: translateY(-2px); }
  .check-answer:active{ transform: scale(0.96); }
  .check-answer.is-picked{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

  .check-result{ position: relative; padding-top: 8px; text-align: center; }
  .check-percent{
    position: relative; z-index: 1;
    font-size: clamp(64px, 11vw, 128px); font-weight: 800; line-height: 1;
    color: var(--check-color, var(--accent));
    transition: color 400ms ease;
  }
  .check-percent-label{ position: relative; z-index: 1; margin-top: 10px; font-size: 18px; font-weight: 600; color: var(--text-dim); }
  .check-disclaimer{
    position: relative; z-index: 1;
    margin-top: 28px; padding: 18px 20px; border-radius: var(--radius);
    border: 1px solid var(--line-strong); background: var(--bg);
    font-size: 14px; color: var(--text-dim); line-height: 1.65; max-width: 60ch;
    margin-left: auto; margin-right: auto; text-align: left;
  }
  .check-result .btn{ position: relative; z-index: 1; }

  /* ---------- Wow-Satz Taktpause: bewusst zentriert, als einziger
     Manifest-Moment auf der Seite, sonst nirgends dieses Layout. ---------- */
  /* Der Ambient-Glow-Fleck dahinter (radial-gradient) ist entfernt -
     dekorative Farb-Haze, sitesweit entfernt. */
  .wow-break{ text-align: center; overflow: hidden; }
  /* ---------- Ankuendigung: "Aktenzeichen". Kein Grafik-Stempel mehr
     (wirkte wie ein Kinderbuch-Umschlag). Stattdessen ein echt aussehender
     Auszug aus dem gefuerchteten Schreiben selbst: Aktenzeichen, Paragraf,
     geschwaerzte Stellen. Die Angst liegt im Amtsdeutschen, nicht im Icon.
     Rein illustrativ/generisch (Platzhalter-Werte), keine echten Falldaten.
     Bruecke zwischen dem stillen "Brief liegt ungeoeffnet"-Moment und dem
     lauten "Fuehrung uebernehmen" direkt danach. ---------- */
  /* Vertikaler Rhythmus: Gegenstueck zu .letter{padding-bottom} oben -
     beide zusammen reduzieren die tote Flaeche an dieser einen Naht,
     ohne die generische Section-Auffuellung anderswo anzufassen. */
  #ankuendigung{ padding-top: clamp(48px, 6vw, 88px); }
  .doc-scene{
    position: relative; z-index: 1;
    max-width: 620px; margin: 0 auto 40px; text-align: left;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 3px; padding: 40px 44px 36px;
    box-shadow: 0 34px 70px -30px rgba(10,15,12,0.30), 0 3px 10px rgba(10,15,12,0.06);
  }
  /* War var(--text-faint) - der bereits an anderer Stelle dokumentierte
     WCAG-AA-zu-schwache Ton (siehe Kontrast-Kommentar bei --text-quiet).
     Beim Gradient-Audit als echter, bisher unentdeckter a11y-Fehler
     aufgefallen (axe: color-contrast FAIL) - mit derselben, bereits
     etablierten Loesung wie an den anderen Stellen behoben. */
  .doc-head{
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    font-family: "Courier New", ui-monospace, monospace; font-size: 12.5px;
    color: var(--text-quiet);
    border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 24px;
  }
  .doc-head p{ margin: 0 0 3px; }
  .doc-head-right{ text-align: right; }
  .doc-redact{
    display: inline-block; background: var(--text-faint); color: transparent;
    border-radius: 2px; user-select: none;
  }
  .doc-subject{
    font-family: "Courier New", ui-monospace, monospace; font-size: 12.5px;
    color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 14px;
  }
  .doc-title{
    font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; line-height: 1.3;
    margin: 0 0 20px; max-width: 22ch; color: var(--text);
  }
  /* Echter (generischer) Fliesstext statt abstrakter Balken - die vorherige
     Balkenreihe (100% / 100% / 55%) sah wie ein Ladeskelett aus, nicht wie
     ein Dokument. Unten per Fade maskiert, als ginge der Brief ausserhalb
     der Karte weiter. Rein generischer AO-Amtsdeutsch-Text, keine Falldaten. */
  .doc-body{
    position: relative; max-height: 78px; overflow: hidden;
    font-family: "Courier New", ui-monospace, monospace; font-size: 12.5px;
    line-height: 1.85; color: var(--text-faint); letter-spacing: 0.01em;
  }
  .doc-body::after{
    content: ""; position: absolute; inset: auto 0 0 0; height: 36px;
    background: linear-gradient(180deg, transparent, var(--paper));
  }
  .ankuendigung-lead{
    position: relative; z-index: 1;
    font-size: clamp(17px, 2vw, 20px); color: var(--text-dim);
  }
  /* Nur die Karte selbst animiert (einmal, beim Reinscrollen). Die
     Redaktions-Balken NICHT mehr einzeln per eigener view()-Timeline
     animiert: verschachtelte Scroll-Animationen (Kind animiert waehrend
     Elternelement sich noch bewegt) fuehrten dazu, dass die Balken bei
     manchen Scroll-Geschwindigkeiten sichtbar mitten in der Animation
     haengen blieben (scaleX < 1 statt fertig), sahen kaputt aus statt
     fertig gedruckt. Passt auch besser zur Authentizitaets-Idee: ein
     Dokument liegt einfach da, es "tippt sich" nicht selbst. */
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .doc-scene{
        animation: doc-materialize var(--motion-slow) var(--ease-enter) both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
      }
    }
  }
  /* Kein Warnrahmen mehr: die Karte kommt ruhig an und legt sich als
     Beweisstueck ab, statt Alarm zu geben - die Angst liegt im Text
     (Amtsdeutsch), nicht in einem rot aufleuchtenden Rahmen. Der Schatten
     vertieft sich beim Ankommen leicht, wie ein Blatt, das sich setzt.
     Monoton, kein Bounce (siehe Kommentar oben zum haengenden
     Redaktionsbalken-Bug). */
  @keyframes doc-materialize{
    from{ transform: translateY(22px); box-shadow: 0 8px 18px -10px rgba(10,15,12,0.14); }
    to{ transform: translateY(0); box-shadow: 0 34px 70px -30px rgba(10,15,12,0.30), 0 3px 10px rgba(10,15,12,0.06); }
  }
  /* Kundenauftrag (finale Haltung-Ueberarbeitung): der Satz ist keine
     eigene "Wow"-Zaesur mehr, sondern der ruhige Schlusston von Kapitel
     07 (Dein Risiko) - deutlich zurueckgenommen (vorher bis 54px/eigene
     Section/eigener Kapitel-Index), jetzt Fliesstext-nah, mit einem
     dezenten Farbakzent nur auf der eigentlichen These. Keine Animation:
     ein leiser Abschluss braucht keinen Auftritt. */
  .risk-close{
    margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
    font-size: clamp(18px, 1.9vw, 21px); font-weight: 600; line-height: 1.5;
    color: var(--text-dim); max-width: 52ch;
  }
  .risk-close-accent{ color: var(--accent-dim); }


  /* ---------- Fuehrung uebernehmen: bewusst der lauteste Textabschnitt der
     Seite ausserhalb von Hero und Wow-Break, deshalb eigener dunkler Glow-
     Hintergrund unabhaengig vom Hell/Dunkel-Umschalter, wie ein Scheinwerfer
     der auf diesen einen Absatz faellt. ---------- */
  /* HARD RESET (Kundenauftrag): keine dunkle "Spotlight"-Section mehr -
     weisse Basis durchgehend. Struktur/Fuehrung braucht trotzdem eine
     eigene Identitaet in der sonst freien Seite: ein klar umrandeter
     Rahmen (siehe .turn-frame unten), der die drei Prozesspunkte
     buchstaeblich "enthaelt" - Containment als Bildidee fuer ein Versprechen
     ueber Struktur, keine Tabelle, kein Kartenraster, kein Farbverlauf. */
  #fuehrung{
    position: relative;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  #fuehrung .wrap{ position: relative; z-index: 1; }

  /* ---------- Die Wende (Batch 3A.1, komplett neu) ----------
     Vorher: 4 dunkle Cards mit gruenen Haekchen - bestand den Anti-AI-Test
     nicht (Sabine raus, Blau statt Gruen: bliebe eine beliebige Consulting-
     Section). Jetzt: EIN ruhiger Fokus-Moment statt vier Feature-Kacheln.
     Kein Glow-Blob, kein Wasserzeichen-"S" mehr in dieser Section (beides
     bereits im Hero bzw. bei der Fallstudie verwendet - hier bewusst
     weggelassen, "der Hintergrund darf ruhiger sein als die Sections
     davor"). Die drei Punkte liefen zunaechst als echte Definitionsliste im
     Amtssprache-Duktus (Monospace-Label), dann als Spine-Liste - beide
     inzwischen ersetzt durch .turn-rail-list, siehe deren eigener
     Kommentar weiter unten. */
  .turn{ max-width: 860px; }
  /* HARD RESET: bevorzugter Zeilenumbruch der Kundin uebernommen -
     "Struktur. Fuehrung." / "Du musst nicht mehr" / "allein entscheiden."
     Drei Zeilen statt zwei, damit "allein" (das eigentliche Angst-Wort)
     als eigene Zeile isoliert steht, bevor sie durch "entscheiden" (mit
     dir, nicht ohne dich) sofort wieder aufgeloest wird. */
  .turn-lede{ margin-bottom: 32px; }
  .turn-lede-principle{
    display: block;
    font-size: clamp(34px, 5vw, 58px); font-weight: 900; letter-spacing: -0.025em;
    line-height: 1.12; color: var(--text);
  }
  .turn-lede-consequence{
    display: block;
    margin-top: 10px;
    font-size: clamp(28px, 4.2vw, 46px); font-weight: 600; letter-spacing: -0.015em;
    line-height: 1.2; color: var(--text-dim);
  }
  .turn-role{
    font-size: clamp(17px, 2vw, 19px); line-height: 1.6; color: var(--text-dim);
    max-width: 52ch; margin-bottom: 48px;
  }
  /* HARD RESET: die schraege Schiene (Konzept C) war ein Fortschritt
     gegenueber der Tabelle, blieb aber im selben "Liste mit Stil" Schema
     und wirkte auf Weiss weniger begruendet als auf Dunkel. Neue Idee, die
     die Kundin explizit als Bild vorgegeben hat: CONTAINMENT - ein klar
     umrandeter Rahmen haelt die drei Punkte buchstaeblich zusammen, wie
     ein Dokumentenordner, der Ordnung herstellt. Grosse Kontur-Ziffern
     (dieselbe Stempel-Sprache wie die 600k-Zahl weiter unten - eine
     durchgehende Bildidee statt drei Einzeleffekten), echte Trennlinien
     zwischen den Punkten statt Versatz/Rotation - das ist die "Ordnung"
     selbst, nicht nur ihre Behauptung. */
  .turn-frame{
    margin: 8px 0 56px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-raised);
    padding: 0 28px;
  }
  @media (max-width: 560px){ .turn-frame{ padding: 0 20px; } }
  .turn-frame-item{
    display: flex; align-items: flex-start; gap: 22px;
    padding: 30px 0;
  }
  .turn-frame-item + .turn-frame-item{ border-top: 1px solid var(--line); }
  @media (max-width: 560px){ .turn-frame-item{ gap: 16px; } }
  .turn-frame-num{
    flex: 0 0 auto; padding-top: 2px;
    font-family: "Courier New", ui-monospace, monospace; font-size: 22px; font-weight: 800;
    color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  }
  .turn-frame-word{
    font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; letter-spacing: -0.01em; color: var(--text);
  }
  .turn-frame-text{
    margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-dim); max-width: 42ch;
  }
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .turn-frame-item{
        animation: scroll-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
      }
    }
  }
  /* HARD RESET: der Finanzamt-Satz muss "ein echter Moment werden, keine
     weitere Ueberschrift" - staerkere Ankunft durch: (1) mehr isolierender
     Abstand davor/danach als jeder andere Absatz der Section, (2) die
     Schwellen-Linie als zeitlicher Auftakt (keine eigene Einstands-
     Animation mehr auf dem Satz selbst - siehe Kommentar bei
     .case-file-open weiter oben, derselbe Freeze-Risiko-Fund). Farblich
     bleibt die Zweiton-Logik (gedeckt -> Akzent) erhalten, jetzt auf Weiss:
     var(--accent) ist auf hellem Grund WCAG-AA-konform (var(--accent) ist
     im erzwungenen Hellmodus bereits die dunkle #0c8f5c-Variante). */
  .turn-close-threshold{
    width: 40px; height: 1px; margin-bottom: 32px;
    background: var(--line-strong);
  }
  .turn-close{
    margin-top: 88px;
    font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.015em;
    line-height: 1.26;
  }
  .turn-close span{ display: block; color: var(--text-dim); }
  .turn-close .turn-close-accent{ color: var(--accent); }
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .turn-close-threshold{
        transform-origin: left center;
        animation: conviction-line-in 480ms var(--ease-enter) both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
      }
      /* KEIN animation-timeline hier, absichtlich: siehe identischer
         Kommentar bei .statement-band .signature-line - derselbe
         opacity/filter-an-animation-timeline:view()-Mechanismus ist im
         WP-Customizer-Vorschau-Iframe nachweislich schon einmal in einem
         halbtransparenten Zwischenzustand haengen geblieben. Der
         Finanzamt-Satz ist genauso kritisch wie die Haltung-Schlusszeile -
         dasselbe Risiko wird hier nicht mehr eingegangen. */
    }
  }

  /* ---------- Warum Sabine? (Batch 3B, komplett neu) ----------
     Editoriale Chronik statt CV: kein 50/50-Portrait-Bio-Split, kein
     Credential-Haken-Karussell. Portrait sitzt gross, angeschnitten, in
     einem eigenen dunklen Panel (der Freisteller braucht einen definierten
     Rand, sonst verschwimmt die weisse Bildkante im hellen Seitenhintergrund
     - selbe technische Notwendigkeit wie zuvor, jetzt aber grosszuegiger/
     editorialer statt als kleine gerundete Karte). Text-Spalte traegt die
     eigentliche Chronik als Fliesstext, kein Bulletpoint. */
  .authority{
    display: grid; grid-template-columns: 0.68fr 1fr; gap: 0 64px; align-items: stretch;
  }
  @media (max-width: 900px){
    .authority{ grid-template-columns: 1fr; gap: 28px; }
  }
  .authority-portrait{
    position: relative; overflow: hidden;
    background: var(--paper);
    box-shadow: 0 34px 70px -30px rgba(10,15,12,0.24), 0 3px 10px rgba(10,15,12,0.05);
    min-height: 420px;
  }
  @media (max-width: 900px){ .authority-portrait{ min-height: 320px; max-height: 60vh; } }
  .authority-portrait img{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 12%;
  }
  .authority-content{ display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
  .authority-quote{
    font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; line-height: 1.35;
    letter-spacing: -0.01em; color: var(--text); margin-bottom: 28px; max-width: 22ch;
  }
  .authority-text{
    font-size: 17px; line-height: 1.7; color: var(--text-dim); max-width: 54ch;
  }
  .authority-text + .authority-text{ margin-top: 18px; }
  .authority-anecdote{ color: var(--text); }

  /* ---------- Trust-Strip (Client-Fakt-Update 2026-08-30) ----------
     Vier bestaetigte Organisationsbeziehungen, editorial statt Logo-Wall:
     kein Karussell, kein Marquee, kein Glow. Wiederverwendet exakt die
     Rahmensprache von .turn-frame (border/radius/bg-raised) statt eine neue
     Karten-Optik zu erfinden. Spannt beide Grid-Spalten von .authority. */
  .trust-strip{ grid-column: 1 / -1; margin-top: 48px; }
  .trust-strip-label{
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-quiet); margin: 0 0 16px;
  }
  .trust-strip-row{ display: flex; flex-wrap: wrap; gap: 14px; }
  .trust-chip{
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-raised);
    flex: 1 1 200px;
  }
  @media (max-width: 480px){
    .trust-chip{ flex: 1 1 100%; }
  }
  .trust-chip img{ display: block; height: 28px; width: auto; flex: 0 0 auto; }
  .trust-chip-label{
    font-size: 13px; font-weight: 600; color: var(--text-quiet); line-height: 1.3;
  }

  /* ---------- Haltung (was ich nicht verspreche) ---------- */
  /* FINALE FASSUNG (Kundenauftrag: "keine vier konkurrierenden Hero-
     Momente, EIN gerichteter Gedanke"). Vorherige Versuche (Randnotiz,
     Zerlegung, Rahmenbruch-Karte) waren jede fuer sich eine eigene
     Design-Idee fuer denselben einen Satz - das war selbst schon das
     Problem: zu viele Ideen, nicht zu wenig Groesse. Jetzt EIN einziger
     Fliesstext-Block, EIN Bewegungsprinzip, kein Kaesten, kein Stempel,
     keine 108px. Die Sequenz bleibt eine leicht abgesetzte "Arena"
     (dieselbe Schwellen-Sprache wie Struktur/Fuehrung, 600k) durch einen
     dezenten Farbunterschied + duenne Randlinien - nicht durch Dunkelheit,
     nicht durch einen Kasten um den Inhalt.
     SICHERHEIT: jede Animation hier aendert ausschliesslich transform
     und/oder Farbe, niemals opacity/blur - Text bleibt so unter jeder
     Scroll-Position immer vollstaendig lesbar (siehe front-page.php,
     Kommentar ueber dieser Section fuer den Hintergrund). */
  .statement-band{
    position: relative;
    background: var(--bg-band);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-top: clamp(48px, 6vw, 88px);
    padding-bottom: clamp(64px, 8vw, 112px);
  }
  .statement-band .inner{ max-width: 600px; }

  /* 1. Falsche Beruhigung: liest sich zunaechst wie ein ganz normaler,
     plausibler Satz - gleiche Statur wie die Zusage weiter unten, NICHT
     schon vorab klein/grau/eingesperrt. Erst die Bewegung entzieht ihm
     das Vertrauen.
     Kundenkritik: Rot ist nicht Teil der Bildsprache dieser Seite und las
     sich wie eine PowerPoint-Korrektur. Entfernt - die Zeile durchgestrichen
     jetzt mit derselben neutralen Linienfarbe, die die Seite ueberall sonst
     fuer duenne Trennlinien nutzt (--line-strong, dieselbe wie bei den
     Schwellen-Linien in Struktur/Fuehrung und hier bei der Signatur weiter
     unten) - liest sich als "durchgestrichen", nicht als "korrigiert". */
  .statement-band .not-promise{
    display: inline-block; margin-bottom: 4px;
    font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; line-height: 1.4;
    color: var(--text-quiet);
    text-decoration-line: line-through;
    text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px;
  }
  /* 2. Ablehnung + Ehrlichkeit: stark, aber in derselben Groessenordnung
     wie die anderen grossen Saetze der Seite (Struktur 58px, Finanzamt
     48px) - kein isolierter Ausreisser. Zentrale Aussage der Section,
     kein Spektakel. */
  .statement-band h2{
    margin-top: 14px;
    font-size: clamp(30px, 5.6vw, 52px); font-weight: 800; line-height: 1.15;
    letter-spacing: -0.015em; color: var(--text);
  }
  /* 3. Zusage: ruhig, gesprochen, viel Platz zum Lesen. */
  .statement-band p.lede{
    margin-top: 26px; font-size: 18px; color: var(--text-dim);
    line-height: 1.7; max-width: 52ch;
  }
  /* 4. Ueberzeugung: liest sich als Signatur/Schlusszeile eines Briefs
     (kursiv, massvolle Groesse - kleiner als die zentrale Aussage
     darueber), nicht als weiterer Werbeslogan. Eine kurze Linie davor wie
     vor einer echten Unterschrift, kein Rufzeichen. */
  .haltung-threshold{
    width: 28px; height: 1px; margin: 44px 0 18px; background: var(--line-strong);
  }
  .statement-band .signature-line{
    display: block;
    font-size: clamp(20px, 2.3vw, 25px); font-weight: 700; font-style: italic;
    letter-spacing: -0.005em; color: var(--accent);
  }
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      /* EIN Bewegungsprinzip fuer die ganze Section: Zeilen setzen sich
         leicht aus einem Versatz (nur transform, nie opacity), waehrend
         "Alles wird gut." zusaetzlich sichtbar seine Farbe verliert und
         durchgestrichen wird (nur Farbe/text-decoration-color, nie
         opacity) - beides zusammen ergibt die geforderte "false
         reassurance -> rejection"-Bewegung, ohne dass Text jemals
         unsichtbar werden kann, selbst wenn eine Animation mitten in der
         Bewegung haengen bleiben sollte. */
      .statement-band .not-promise{
        color: var(--text);
        text-decoration-color: transparent;
        animation: not-promise-withdraw linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 45%;
      }
      .statement-band h2,
      .statement-band p.lede,
      .haltung-threshold,
      .statement-band .signature-line{
        animation: haltung-settle linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
      }
    }
  }
  @keyframes not-promise-withdraw{
    from{ color: var(--text); text-decoration-color: transparent; }
    to{ color: var(--text-quiet); text-decoration-color: var(--line-strong); }
  }
  @keyframes haltung-settle{
    from{ transform: translateY(14px); }
    to{ transform: translateY(0); }
  }

  /* ---------- FAQ (reine CSS-Akkordeon-Animation, kein JS noetig) ----------
     Zweispaltig statt der ueblichen einspaltigen Akkordeon-Liste (das
     generischste FAQ-Muster ueberhaupt). Geht von genau 6 Fragen aus (drei
     Zeilen zu zwei Spalten) - bei einer anderen Anzahl muesste die
     nth-child-Randlogik unten angepasst werden. */
  .faq-list{ max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .faq-item{ border-top: 1px solid var(--line); }
  .faq-item:nth-child(5), .faq-item:nth-child(6){ border-bottom: 1px solid var(--line); }
  @media (max-width: 780px){
    .faq-list{ grid-template-columns: 1fr; max-width: 620px; }
    .faq-item:nth-child(5){ border-bottom: none; }
    .faq-item:last-child{ border-bottom: 1px solid var(--line); }
  }
  .faq-list{ counter-reset: faq-index; }
  .faq-item summary{
    list-style: none;
    cursor: pointer;
    padding: 22px 34px 22px 40px;
    font-size: 17px; font-weight: 700; color: var(--text);
    position: relative;
  }
  /* Nummerierung statt reinem "+": editorialer, weniger generisches
     Akkordeon-Standardmuster. */
  .faq-item summary::before{
    counter-increment: faq-index;
    content: counter(faq-index, decimal-leading-zero);
    position: absolute; left: 0; top: 22px;
    font-family: Georgia, serif; font-size: 13px; font-weight: 700;
    color: var(--accent);
  }
  .faq-item summary::-webkit-details-marker{ display: none; }
  .faq-item summary::after{
    content: "+";
    position: absolute; right: 4px; top: 18px;
    font-size: 24px; font-weight: 400; color: var(--accent);
    transition: transform 260ms var(--ease);
    display: inline-block;
  }
  .faq-item[open] summary::after{ transform: rotate(135deg); }
  .faq-answer{
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 320ms var(--ease), opacity 260ms ease;
  }
  .faq-item[open] .faq-answer{ grid-template-rows: 1fr; opacity: 1; }
  .faq-answer > div{ overflow: hidden; }
  .faq-answer p{ padding: 0 34px 24px 0; color: var(--text-dim); font-size: 16px; line-height: 1.65; max-width: 62ch; }

  /* ---------- Contact ---------- */
  .contact-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
  @media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; gap: 32px; } }
  /* Echter Fund bei 320px (bisher nicht in der automatisierten Overflow-
     Pruefung, die nur 1440/1280/390/360 abdeckt): Grid-Items haben per
     Default min-width:auto, wodurch ein Kind mit nicht umbrechbarem Inhalt
     die gesamte Spur breiter zieht als der Grid-Container selbst - hier
     genau 313,5px Spurbreite bei nur 272px verfuegbarem Platz. min-width:0
     erlaubt der Spur, tatsaechlich zu schrumpfen und den Inhalt (z.B.
     "Termin direkt online buchen") umbrechen zu lassen statt die Seite zu
     verbreitern. */
  .contact-reassure{ display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  /* Phase 5A: --accent (opaque) unterschreitet bei dieser Groesse WCAG-AA
     auf hellem Grund (gemessen 3.82:1) - dieselbe Bugklasse wie der in
     Phase 4A gefixte .knowledge-kicker. --accent-dim ist der bereits
     vorhandene, dunklere Token dafuer (gemessen 5.76:1). */
  .contact-reassure .badge{
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-size: 13.5px; font-weight: 700; color: var(--accent-dim);
    border: 1px solid rgba(52,224,161,0.4); border-radius: var(--radius); padding: 8px 14px;
  }
  .contact-reassure p{ color: var(--text-dim); font-size: 16px; line-height: 1.65; }
  .contact-direct{ margin-top: 8px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .contact-direct a{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; color: var(--text); transition: color 160ms ease, transform 160ms ease; min-width: 0; }
  .contact-direct a:hover{ color: var(--accent); transform: translateX(3px); }

  /* Doppelrand: aeussere Schale + innerer Kern, wirkt "verbaut" statt flach
     auf den Hintergrund gelegt. Radius bleibt klein/scharf (Markenregel). */
  /* Echter Fund bei 320px (bisher nicht in der automatisierten Pruefung,
     die nur 1440/1280/390/360 abdeckt, siehe .contact-reassure-Kommentar
     weiter oben): min-width:auto propagiert bei verschachtelten Flex-
     Containern (form -> field-row -> field) durch jede Ebene einzeln -
     ein min-width:0 an nur einer Stelle reicht nicht. Hier an jeder Ebene
     der Kette gesetzt, damit keine Ebene eine Content-basierte
     Mindestbreite nach oben durchreicht und am Ende die Grid-Spur
     (.contact-grid) ueber ihren eigenen Container hinaus zieht. */
  .form-shell{
    background: var(--hairline);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 10px);
    padding: 10px;
    min-width: 0;
  }
  form.contact-form{
    display: flex; flex-direction: column; gap: 18px;
    background: var(--bg-raised);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: inset 0 1px 0 var(--hairline);
    min-width: 0;
  }
  .field{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .field label{ font-size: 14px; font-weight: 700; color: var(--text); }
  /* Phase 5A: --text-faint auf hellem Grund unter WCAG-AA (gemessen 3.33:1),
     siehe Footer-Kommentar oben - dieselbe Bugklasse. */
  .field .hint{ font-size: 13px; color: var(--text-quiet); }
  /* Der eigentliche Root Cause des 320px-Funds (siehe Kommentar bei
     .form-shell oben): ohne width:100%/min-width:0 sizen sich <select>
     (nach laengster <option>, hier z.B. "Pfaendung angekuendigt") und
     <input> nach ihrer eigenen, vom Container unabhaengigen Vorgabe -
     dieser Wert wandert dann als Content-basierte Mindestbreite die ganze
     verschachtelte Flex-/Grid-Kette hoch bis zur Grid-Spur von
     .contact-grid. Alle min-width:0-Ergaenzungen an den umgebenden
     Containern wirken erst zuverlaessig, wenn die Formularfelder selbst
     nicht mehr breiter sein wollen als ihr Feld. */
  .field input, .field select, .field textarea{
    font-family: var(--font); font-size: 16px; color: var(--text);
    background: var(--bg-raised); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
    padding: 13px 14px; outline: none;
    width: 100%; min-width: 0; box-sizing: border-box;
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  .field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,224,161,0.14); }
  .field textarea{ resize: vertical; min-height: 110px; }
  .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0; }
  @media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }
  .field .error{ font-size: 13px; color: #ff9a8a; display: none; }
  .field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: #ff9a8a; }
  .field.invalid .error{ display: block; }

  .form-note{ font-size: 13px; color: var(--text-quiet); }
  .form-success{
    display: none;
    border: 1px solid rgba(52,224,161,0.4); border-radius: var(--radius); padding: 18px;
    color: var(--accent); font-weight: 600; font-size: 15px;
  }
  .form-success.is-visible{ display: block; }

  /* ---------- Footer ---------- */
  footer{ padding: 64px 0 40px; }
  /* Bewusst lauter als der Rest des Footers: eigenwerbung fuer Seite B soll
     nicht wie eine Randnotiz wirken, sondern wie ein zweites Angebot, das
     man ernsthaft prueft. Grosser Farbwash statt duenner Karte. */
  /* War ein "grosser Farbwash" (linear-gradient, gruen zu Kartenfarbe) -
     dekorative Farb-Haze, sitesweit entfernt. Der Akzent-Rahmen traegt die
     Betonung jetzt allein, auf solider Kartenflaeche. */
  .footer-cross{
    position: relative; overflow: hidden;
    border: 1px solid rgba(52,224,161,0.3); border-radius: calc(var(--radius) + 6px);
    background: var(--bg-raised);
    padding: 40px 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    margin-bottom: 48px;
    transition: border-color 260ms ease, transform 260ms var(--ease);
  }
  @media (hover: hover){ .footer-cross:hover{ border-color: var(--accent); transform: translateY(-2px); } }
  /* War auf var(--bg-raised) (jetzt reines Weiss statt des alten gruen
     angehauchten Verlaufs) knapp unter dem noetigen 4.5:1-Kontrast fuer
     kleinen Text - var(--accent-dim) ist die bereits etablierte, dunklere
     WCAG-AA-sichere Variante (siehe --accent-dim in den Farbtokens). */
  .footer-cross-kicker{
    font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--accent-dim); margin-bottom: 10px;
  }
  .footer-cross-line{
    font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; line-height: 1.3;
    color: var(--text); max-width: 34ch;
  }
  .footer-cross-line .glow-word{ display: inline-block; }
  .footer-cross-sub{ margin-top: 10px; font-size: 15.5px; color: var(--text-dim); max-width: 48ch; }
  .footer-cross .btn{ white-space: nowrap; }
  /* Phase 5D: die vier Wissens-/Authority-Seiten waren bisher nur ueber
     Homepage-Deep-Links erreichbar. Drei kleine, benannte Gruppen statt
     einer langen Linkliste - editoriale IA, keine Sitemap. Gleiche
     Fliesstext-Optik/-Groesse wie zuvor (14px, --text-quiet), nur als
     Spalten statt einer einzelnen Zeile. */
  .footer-nav{
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px;
    border-top: 1px solid var(--line); padding-top: 28px; margin-bottom: 24px;
  }
  @media (max-width: 680px){ .footer-nav{ grid-template-columns: 1fr; gap: 24px; } }
  .footer-nav-group{ display: flex; flex-direction: column; gap: 10px; }
  /* --text-faint faellt bei dieser Groesse unter WCAG-AA (siehe Phase-5A-
     Kommentar unten) - deshalb hier direkt der bereits AA-sichere
     --text-quiet-Token, nicht erst spaeter nachgebessert. */
  .footer-nav-label{
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-quiet); margin-bottom: 2px;
  }
  /* Phase 5A: --text-faint (0.44-0.48 Alpha) unterschreitet WCAG-AA auf
     hellem Grund bei dieser Groesse (gemessen 3.33:1) - dieselbe Bugklasse,
     die in Phase 4A fuer neue Komponenten bereits mit --text-quiet
     behoben wurde, hier auf den vorbestehenden, gemeinsamen Footer
     zurueckuebertragen. */
  .footer-nav-group a{ font-size: 14px; color: var(--text-quiet); text-decoration: none; line-height: 1.4; }
  .footer-nav-group a:hover{ color: var(--text-dim); }
  /* Dachmarken-Claim (Brand-Integration 30.08.2026). Groesser als die
     Fusszeilen darunter, kleiner als jede Ueberschrift im Inhalt - eine
     Unterschrift, kein Argument. Kleinschreibung und Schlusspunkt sind
     Bestandteil der Wortmarke und werden nicht "korrigiert". */
  /* Dachmarke + Bereichsliste, Markenpass 31.08.2026 (siehe footer.php fuer
     die inhaltliche Begruendung). Der 40px-Abstand nach oben, den die
     Behauptung frueher selbst trug, sitzt jetzt auf dem Wrapper - fachlich
     derselbe Abstand zum footer-nav-Block darueber, nur eine Ebene hoeher,
     weil der Wortmarken-Kopf jetzt davor steht. */
  .footer-dachmarke{ margin-top: 40px; }
  .footer-dachmarke-word{
    display: inline-block;
    font-weight: 800; font-size: clamp(22px, 3vw, 27px); letter-spacing: -0.01em;
    color: var(--text); text-decoration: none;
  }
  a.footer-dachmarke-word:hover, a.footer-dachmarke-word:focus-visible{ color: var(--accent-dim); }
  /* Bild-Zweig: die echte Wortmarke (570x84, siehe footer.php Dateipruefung).
     Hoehe an der zuvor gesetzten Textzeile ausgerichtet (deren clamp lag bei
     22-27px Schriftgroesse, hier etwas grosszuegiger, weil das Asset seinen
     eigenen Freiraum/die Grundlinie des Punkts mitbringt), damit die
     Wortmarke im Fussbereich weder winzig noch ueberdimensioniert wirkt. */
  .footer-dachmarke-logo{ height: clamp(28px, 3.6vw, 36px); width: auto; display: block; }
  .footer-dachmarke-link{ display: inline-block; line-height: 0; transition: opacity 180ms ease; }
  .footer-dachmarke-link:hover, .footer-dachmarke-link:focus-visible{ opacity: 0.8; }
  .footer-claim{
    margin: 6px 0 0;
    font-size: clamp(19px, 2.6vw, 23px);
    font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
    color: var(--text);
  }
  .footer-bereiche{ margin-top: 24px; }
  .footer-bereiche-label{
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-quiet); margin: 0 0 10px;
  }
  .footer-bereiche-list{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 28px; }
  /* Absichtlich Typografie + feine Linie statt Tab/Pill (Auftragsvorgabe
     Abschnitt 7): der aktuelle Bereich traegt die Akzentfarbe als
     Unterstrich, der wartende Bereich bleibt gedaempft wie der bestehende
     "startet in Kuerze"-Zustand der Cross-Link-Karte oben - keine zweite,
     abweichende Formsprache fuer denselben Zustand. */
  .footer-bereich{
    display: inline-flex; align-items: baseline; gap: 8px;
    font-size: 14.5px; font-weight: 700; color: var(--text-dim);
    text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
  }
  a.footer-bereich:hover, a.footer-bereich:focus-visible{ color: var(--text); border-color: var(--line-strong); }
  .footer-bereich.is-current{ color: var(--text); border-color: var(--accent); }
  .footer-bereich.is-pending{ color: var(--text-quiet); }
  .footer-bereich-tag{
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-quiet);
  }
  .footer-bereich.is-current .footer-bereich-tag{ color: var(--accent-dim); }
  .footer-bereich-arrow{ font-size: 13px; }

  .footer-bottom{
    display: flex; justify-content: flex-end;
  }
  .footer-meta-group{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .footer-meta{ font-size: 13px; color: var(--text-quiet); }
  .footer-credit{ font-size: 13px; color: var(--text-quiet); }
  .footer-credit span{ color: var(--accent); }
  .footer-credit a{ color: var(--text-quiet); text-decoration: none; font-weight: 700; }
  .footer-credit a:hover{ color: var(--accent); }
  @media (max-width: 520px){ .footer-bottom{ justify-content: flex-start; } .footer-meta-group{ align-items: flex-start; } }

  /* ---------- Legal-Page (Impressum/Datenschutz): schlichtes Prosa-Layout,
     nutzt dieselben Design-Tokens wie der Rest der Seite (hell/dunkel-fähig
     ueber [data-theme]), statt eines eigenen dunklen Mini-Stylesheets. ---------- */
  .legal-page{ padding: 64px 0 96px; max-width: 760px; }
  .legal-page h1{ font-size: clamp(28px, 4vw, 38px); margin-bottom: 8px; }
  .legal-page .lead{ color: var(--text-dim); margin-bottom: 40px; }
  .legal-page h2{ font-size: 19px; margin: 40px 0 12px; }
  .legal-page p{ color: var(--text-dim); margin: 0 0 10px; line-height: 1.65; }
  .legal-page ul{ color: var(--text-dim); margin: 0 0 10px; padding-left: 20px; line-height: 1.65; }
  /* Phase 5A: Basis-Linkfarbe war var(--accent) (#0c8f5c), gemessen ~4.12:1
     auf hellem Grund - unter WCAG-AA fuer Fliesstext (4.5:1). Trat im
     initialen SEO-3-Fund nur gebuendelt mit den anderen Legal-Page-Contrast-
     Funden auf (axe fasst mehrere Ziel-Elemente zu einer color-contrast-
     Verletzung zusammen); erst nach Fixen von .legal-page-back/.draft-banner/
     .placeholder trat dieser Link (z.B. der EU-Streitschlichtung-Link im
     Impressum) im Full-Audit-Rerun einzeln zutage. Gleiches Fix-Muster wie
     .contact-reassure .badge: bestehenden AA-sicheren Token verwenden statt
     neue Farbe erfinden. */
  .legal-page a{ color: var(--accent-dim); }
  /* Phase 5A: #a86a00 auf dem getoenten Warn-Hintergrund gemessen 3.88-3.96:1,
     unter WCAG-AA. #8c5800 (gleiche Amber-Familie, nur dunkler) gemessen
     5.22-5.33:1 gegen die tatsaechliche, alpha-kombinierte Hintergrundfarbe.
     Dark-Theme-Variante nicht angefasst: aktuell technisch nicht erreichbar
     (Theme ist per Inline-Script fest auf "light" gestellt) und war nicht
     Teil des SEO-3-Funds - kein unbelegter Fix. */
  .legal-page .draft-banner{
    border: 1px solid rgba(255,180,80,0.4); background: rgba(255,180,80,0.08);
    border-radius: var(--radius); padding: 18px 20px; margin-bottom: 40px;
    color: #8c5800; font-size: 14.5px; line-height: 1.6;
  }
  :root[data-theme="dark"] .legal-page .draft-banner{ color: #ffd9a0; }
  .legal-page .placeholder{
    color: #8c5800; background: rgba(255,180,80,0.12);
    border: 1px dashed rgba(255,180,80,0.5); border-radius: 3px;
    padding: 1px 6px; font-style: normal; font-size: 0.95em;
  }
  :root[data-theme="dark"] .legal-page .placeholder{ color: #ffd9a0; }
  /* .legal-page a{ color: var(--accent); } (oben) hat hoehere Spezifitaet
     (0,1,1) als eine einfache Klassenregel .legal-page-back (0,1,0) und
     ueberstimmt sie sonst - dieselbe Spezifitaetsfalle wie bei .source-note
     in Phase 4A. ".legal-page .legal-page-back" gewinnt eindeutig (0,2,0). */
  .legal-page .legal-page-back{ display: inline-block; margin-bottom: 32px; color: var(--text-quiet); text-decoration: none; font-size: 14px; }
  .legal-page-back:hover{ color: var(--accent); }

  /* ==========================================================================
     EDITORIAL KNOWLEDGE SYSTEM (Phase 4A) - siehe EDITORIAL_PAGE_SYSTEM.md.
     Fuer Wissensseiten (aktuell: /betriebspruefung-angekuendigt/). Bewusst
     eigenstaendige, engere Section-Rhythmik statt der grossen Homepage-
     Akt-Abstaende (--space-section): eine Wissensseite ist ein Dokument,
     keine Dramaturgie mit 11 Akten - "schneller zur Antwort" (Auftrag
     Punkt 14), keine 150px Leerraum zwischen jedem Absatzblock.
     ========================================================================== */
  .knowledge-article{ padding: 56px 0 var(--space-section); }
  .knowledge-article .wrap{ max-width: var(--maxw-wide); }

  .breadcrumb{ margin-bottom: 40px; }
  .breadcrumb ol{
    list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px;
    font-family: "Courier New", ui-monospace, monospace; font-size: var(--breadcrumb-size);
    text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-quiet);
  }
  .breadcrumb li:not(:last-child)::after{ content: "/"; margin-left: 8px; color: var(--text-quiet); }
  .breadcrumb a{ color: var(--text-quiet); text-decoration: none; }
  .breadcrumb a:hover{ color: var(--accent); }
  /* --accent (opaque) unterschreitet bei dieser Groesse WCAG-AA auf hellem
     Grund (gemessen 3.82:1) - --accent-dim ist der bereits vorhandene,
     dunklere Token dafuer (gemessen 5.76:1). */
  .breadcrumb li[aria-current="page"]{ color: var(--accent-dim); }

  .knowledge-hero{ max-width: var(--maxw-text); margin-bottom: 64px; }
  .knowledge-kicker{
    font-family: "Courier New", ui-monospace, monospace; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-dim);
    margin-bottom: 16px;
  }
  .knowledge-hero h1{
    font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.15; margin-bottom: 20px; text-wrap: balance;
  }
  .knowledge-lede{ font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--text-dim); margin-bottom: 28px; }

  .answer-block{ max-width: var(--maxw-text); padding: 32px 0; border-top: 1px solid var(--line); }
  .answer-block:first-of-type{ border-top: none; padding-top: 0; }
  .answer-block h2{ font-size: clamp(22px, 2.8vw, 28px); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; }
  .answer-block p{ font-size: 17px; line-height: 1.65; color: var(--text-dim); }
  .answer-block p + p{ margin-top: 14px; }

  /* Direkt unter dem Absatz, kein Fussnotenwald - siehe EDITORIAL_PAGE_SYSTEM.md 3.6.
     --text-quiet statt --text-faint: siehe Kontrast-Kommentar bei --text-quiet
     oben. Selector ".answer-block .source-note" statt nur ".source-note":
     die generische ".answer-block p"-Regel (Spezifitaet 0,1,1) wuerde eine
     einfache Klassenregel ".source-note" (0,1,0) sonst ueberstimmen. */
  .answer-block .source-note{ font-size: 13.5px; color: var(--text-quiet); margin-top: 8px; }
  .answer-block .source-note a{ color: var(--text-quiet); text-decoration: underline; text-underline-offset: 2px; }
  .answer-block .source-note a:hover{ color: var(--accent); }

  .decision-path{ max-width: var(--maxw-wide); padding: 32px 0; border-top: 1px solid var(--line); }
  .decision-path h2{ font-size: clamp(22px, 2.8vw, 28px); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 24px; max-width: var(--maxw-text); }
  .decision-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .decision-col{ padding: 0 28px; }
  .decision-col:first-child{ padding-left: 0; border-right: 1px solid var(--line); }
  .decision-col:last-child{ padding-right: 0; }
  .decision-label{
    font-family: "Courier New", ui-monospace, monospace; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px;
  }
  .decision-do .decision-label{ color: var(--accent-dim); }
  .decision-dont .decision-label{ color: var(--text-quiet); }
  .decision-col ul{ margin: 0; padding: 0; list-style: none; }
  .decision-col li{ font-size: 16px; line-height: 1.55; color: var(--text-dim); }
  .decision-col li + li{ margin-top: 16px; }
  @media (max-width: 700px){
    .decision-grid{ grid-template-columns: 1fr; gap: 32px; }
    .decision-col{ padding: 0 !important; border-right: none !important; }
  }

  .sabine-aside{
    margin: 20px 0 0; padding-left: 20px; border-left: 2px solid var(--accent);
    font-size: clamp(19px, 2.2vw, 22px); font-weight: 500; line-height: 1.5;
    color: var(--text); font-style: normal;
  }

  .knowledge-end{ max-width: var(--maxw-text); padding-top: 40px; border-top: 1px solid var(--line); }
  /* Phase 4C: optionale erklaerende Zeile vor dem CTA, wenn die Seite eine
     nicht-konfliktaere CTA-Einordnung braucht (siehe STEUERBERATER_SOURCE_MATRIX.md) -
     wiederverwendet .knowledge-lede-Typografie statt einer neuen Groesse. */
  .knowledge-end-note{ font-size: 17px; line-height: 1.6; color: var(--text-dim); margin-bottom: 20px; }

  /* Phase 4D (/sabine-zumsande/): Portrait als ruhiger visueller Anker im
     Lesefluss, bewusst NICHT das grosse 2-Spalten-Panel der Homepage
     (.authority-portrait) - kleiner, im Textfluss, mit echter Aussage direkt
     darunter statt eines Lebenslaufs daneben. Kein Card-Rahmen, kein
     Credential-Badge, keine Sterne. */
  .entity-portrait{ max-width: 280px; margin: 0 0 64px; }
  .entity-portrait img{
    display: block; width: 100%; height: auto;
    border-radius: var(--radius);
  }
  .entity-portrait .sabine-aside{
    margin-top: 20px; font-size: 17px;
  }

/* ---------- Phase 5B: Homepage-Deep-Links zu den vier Wissens-/Authority-
   Seiten (front-page.php, #ankuendigung/#fuehrung/#steuerberater/#warum-ich).
   Homepage hatte bisher keine Inline-Links im Fliesstext, also auch keinen
   generischen "a"-Stil - ohne diese Klasse wuerden die neuen Links im
   Browser-Standard (blau/unterstrichen) erscheinen. Gleicher Farb-Token wie
   ueberall sonst im Projekt fuer Fliesstext-Links (--accent-dim, AA-sicher),
   keine neue Farbe erfunden. */
.deep-link{ color: var(--accent-dim); }
.deep-link:hover{ color: var(--accent); }
.authority-portrait a{ display: block; width: 100%; height: 100%; }
/* HARD RESET: #fuehrung ist keine dunkle Section mehr (siehe Kommentar
   oben bei #fuehrung) - die frueher noetige Sonderfarbe fuer .deep-link
   (Hellmodus-Kontrast auf Dunkel unter WCAG-AA) entfaellt, der normale
   .deep-link-Stil oben greift jetzt auch hier. */

/* ---------- Bookly-Terminbuchung: Marken-Gruen statt Standard-Orange ----------
   Bookly liest seine Akzentfarbe aus eigenen CSS-Variablen auf :root
   (--bookly-ui-primary...). Statt das Plugin-CSS zu duplizieren, wird hier
   nur die Farbe ueberschrieben, damit die Buchungsseite nicht wie ein
   Fremdkoerper wirkt. */
:root{
  --bookly-ui-primary: #0c8f5c;
  --bookly-ui-primary-hover: #0a6f48;
}
:root[data-theme="dark"]{
  --bookly-ui-primary: #34e0a1;
  --bookly-ui-primary-hover: #1f8f66;
  --bookly-ui-primary-text: #062017;
}
/* Phase 5B: Weisser Button-Text (--accent-ink) auf --accent (#0c8f5c) misst
   axe-seriously 4.12:1, unter WCAG-AA. --accent-dim (dunklerer Gruenton,
   bereits ueberall sonst im Projekt als AA-sicherer Ersatz etabliert) gegen
   denselben weissen Text gemessen 6.21:1. Die urspruengliche einfache
   .bookly-btn-Regel (0,1,0) hatte NIE tatsaechlich gewonnen - Bookly's
   eigene, spezifischere Regel ".bookly-form .bookly-btn, ..." (0,2,0) mit
   var(--bookly-main-color) !important zieht immer; nur weil beide Werte
   zufaellig #0c8f5c waren, sah es visuell "richtig" aus. Jetzt mit
   gleicher Spezifitaet wie Bookly's eigener Selektor korrigiert. */
.bookly-form .bookly-btn,
.bookly-form .bookly-btn:active,
.bookly-form .bookly-btn:focus,
.bookly-form .bookly-btn:hover,
.bookly-form .bookly-btn-submit{
  background-color: var(--accent-dim) !important;
  border-color: var(--accent-dim) !important;
  color: var(--accent-ink) !important;
}
.bookly-step-active, .bookly-step .bookly-label-active{ color: var(--accent) !important; }
.bookly-progress-bar, .bookly-frontend .bookly-progress-bar-inner{ background-color: var(--accent) !important; }

/* Phase 5B: Bookly setzt --bookly-main-color selbst per Inline-Style im
   Shortcode-Output auf denselben Wert wie --accent (#0c8f5c) und nutzt ihn
   fuer Formular-Labels und den aktiven Fortschrittsschritt (".active") -
   axe misst dort seriously 4.12:1, unter WCAG-AA fuer Fliesstext. Keine
   Plugin-Datei geaendert: die exakt gleichen Selektoren wie in Bookly's
   eigenem bookly-main.css (frontend/resources/css/bookly-main.css, Farb-
   Regelblock dort) werden hier mit dem bereits etablierten AA-sicheren
   Token --accent-dim erneut deklariert. Gleiches Muster wie .bookly-btn
   oben (funktioniert nachweislich, siehe dortiger Kommentar) - keine
   Bookly-Funktionalitaet veraendert, nur die Textfarbe. */
.bookly-form .bookly-form-group > label,
.bookly-form .bookly-label-error,
.bookly-form .bookly-progress-tracker > .active,
.bookly-form .bookly-columnizer .bookly-hour span.bookly-waiting-list,
.bookly-form .hover\:text-bookly:hover,
.bookly-form .text-bookly:not(:hover){
  color: var(--accent-dim) !important;
}

/* Bookly's eigenes .bookly-nav-steps.bookly-box nutzt margin: 0 -5px 10px als
   internen Bleed (die Kind-Boxen sollen buendig an seinen eigenen Raendern
   sitzen). Bei schmalen Viewports (<=400px) reisst dieser Bleed die Seite
   ueber die Fensterbreite hinaus (horizontal overflow bei 390/360px). Da es
   Plugin-eigenes Markup ist, wird keine Bookly-Datei angefasst, sondern nur
   der Root-Container der Buchungsstrecke auf overflow-x: hidden gesetzt -
   Bookly's interne Ausrichtung/Abstaende bleiben unveraendert, nur der
   5px-Bleed wird an der Containerkante gekappt statt die Seite zu verbreitern. */
.bookly-form{ overflow-x: hidden; }

/* ---------- Print ----------
   Gefunden per echtem "Drucken/Als PDF speichern" der Seite (vom Nutzer
   als Referenz-PDF geschickt): sticky/fixed Elemente (Nav, Floating-CTA,
   Consent-Banner, Filmkorn-Overlay) werden von Chromes Druck-Engine an der
   Stelle "eingefroren", an der sie beim Rendern gerade "kleben" - bei der
   Haltung-Section kollidierte die Nav dadurch sichtbar mit "Das sage ich
   dir nicht.". Print ist kein Scroll-Kontext, sticky/fixed ergibt dort
   keinen Sinn - alles zurueck in den normalen Fluss oder ausgeblendet. */
@media print{
  header.site-nav{ position: static; }
  .floating-cta, .consent-banner, .nav-toggle, .mobile-panel, body::after{ display: none; }
  .hero-video, .hero-video-overlay, .hero-scrim, .hero-particles{ display: none; }
  .hero{ min-height: 0; background: var(--bg); padding: 48px 0; }
  .hero-content{ color: var(--text); }
  .hero h1{ color: var(--text); }
}