/* ============================================================================
   CORE. FAMILY.LAW. — Designsystem und Startseite
   Entwurf Phase 6–8. Farben aus CFL_Logo_final_2026.svg.

   Grundgedanke: corelaw arbeitet kühl, dunkel und rasterhart. CFL erbt das
   Raster, den Satzbau und die Kicker-Systematik — kehrt aber die Helligkeit um.
   Papier statt Anthrazit, eine Serif für die Überschriften, Gold nur als Linie.
   Die Verwandtschaft entsteht über die Struktur, nicht über die Farbe.
   ========================================================================= */

:root{
  /* --- Marke ------------------------------------------------------------- */
  /* Navy aus CFL_Logo_V10_2026.pdf gemessen (#1C272F) — nicht der frühere Wert
     #162028 aus dem Favicon-SVG. V10 ist die Fassung, die der Kunde als
     verbindlich benannt hat: etwas heller, minimal blauer, weniger schwarz. */
  --navy:        #1c272f;
  --navy-tief:   #141d24;   /* Fußzeile, Überlagerungen */
  --navy-weich:  #2e3b45;   /* Linien auf Navy */
  --gold:        #c79a2b;   /* aus dem Logo — Flächen, Linien, Icons */
  --gold-hell:   #ddb254;   /* Gold als Text auf dunklem Grund: 7,7:1 auf Navy */
  --grau:        #848484;   /* aus dem Logo — nur für Linien und Icons, nie für Text */

  /* --- Textfarben, die vom Untergrund abhängen ----------------------------
     Zwei Farben der Marke sind als Text auf hellem Grund nicht lesbar:
     Gold #c79a2b erreicht auf Papier nur 2,5:1, Grau #848484 nur 3,6:1 —
     beides unter den 4,5:1, die WCAG AA für Fließtext verlangt.

     Statt an vierzig Einzelstellen zu korrigieren, hängen die Textfarben an
     zwei Variablen, die weiter unten für jede dunkle Fläche einmal umdefiniert
     werden. Eine Regel wie `color:var(--gold-text)` liefert dadurch auf hellem
     Grund das dunkle Textgold und auf Navy das helle — ohne zweite Regel.

     Gemessen (Prüfskript siehe HANDOVER):
       --gold-text hell  #86681d  → 5,02:1 auf Papier, 4,56:1 auf Sand
       --leise     hell  #5b6a75  → 5,35:1 auf Papier
       --gold-text dunkel        → 7,66:1 auf Navy
       --leise     dunkel #89969f → 5,02:1 auf Navy */
  --gold-text:   #86681d;   /* Gold als Text auf hellem Grund */
  --leise:       #5b6a75;   /* Sekundärtext auf hellem Grund */
  --linie-kontext: var(--linie);   /* Trennlinien innerhalb von Bauteilen */

  /* --- Flächen ----------------------------------------------------------- */
  --papier:      #fbfaf8;   /* warmes Off-White, nicht Reinweiß */
  --papier-2:    #f2efe9;   /* zweite Ebene, sandig */
  --weiss:       #ffffff;
  --linie:       #e3ded5;
  --linie-leise: #efebe4;

  /* --- Schrift ----------------------------------------------------------- */
  --tinte:       #1b2630;   /* Fließtext, minimal weicher als Navy */
  --tinte-leise: #5b6a75;
  --tinte-hell:  #cfd6db;   /* auf Navy */

  --f-display: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --f-text:    "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Raster ------------------------------------------------------------ */
  --kopf-h:  clamp(78px,8.2vw,108px);
  /* Kantenlänge der beiden schwebenden Knöpfe unten rechts. Sie teilen sich das
     Maß, damit sie als Paar lesbar bleiben; die Zeichen darin sind davon
     abgeleitet (64 % der Kantenlänge).

     Am 26.08.2026 auf Ansage um 35 % verkleinert: von 44–52 px auf 29–34 px.
     **Damit liegt die Zielgröße unter den 44 px, die WCAG 2.5.8 für die
     Bedienung mit dem Finger empfiehlt.** Bewusste Entscheidung des Kunden,
     hier festgehalten, damit sie nicht als Versehen zurückgedreht wird. */
  --knopf-mass: clamp(29px,2.9vw,34px);
  --maxw:    1280px;
  --schmal:  760px;
  --pad:     clamp(1.25rem, 5vw, 5.5rem);
  --abstand: clamp(4.5rem, 8.5vw, 9rem);
  --radius:  2px;           /* fast eckig — Kanzlei, nicht App */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Dunkle Flächen schalten beide Textfarben um. Jede Fläche, die Navy trägt
   oder ein abgedunkeltes Bild, gehört in diese Liste — sonst steht dort Text in
   der hellen Variante und fällt durch. */
.kopf,
.menue,
.seitenkopf,
.hero,
.abschnitt--navy,
.aufruf,
.fuss,
.nachoben,
.chinweis,
.hilfen,
.situation--letzte{
  --gold-text: var(--gold-hell);
  --leise:     #89969f;
  --linie-kontext: rgba(255,255,255,.20);
}

/* ---------------------------------------------------------------- Grundlagen */
*,*::before,*::after{ box-sizing:border-box }
button{
  -webkit-appearance:none; appearance:none;
  background:none; border:0; border-radius:0; font:inherit; color:inherit;
}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--f-text);
  font-size:clamp(1rem,.97rem + .16vw,1.0625rem);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block }

/* --------------------------------------------------------------- hidden ---
   `hidden` bedeutet: Dieses Element ist nicht da. Der Browser setzt dafür
   `display:none` — allerdings in seinem eigenen Stylesheet, und das ist
   schwächer als jede Regel hier. Sobald ein Element mit `hidden` irgendwo ein
   eigenes `display` bekommt (`flex`, `grid`, `block`), gewinnt dieses, und das
   Element bleibt sichtbar, obwohl das Attribut gesetzt ist.

   Am 05.09.2026 hat das eine Stunde gekostet: Der Hinweis über der Karte trug
   `display:flex`; nach dem Klick wurde `hidden` gesetzt, die Karte lud
   ordentlich — und der Hinweis blieb trotzdem darüber stehen. Von außen sah
   es aus, als lade die Karte endlos.

   Das Projekt hatte diesen Fehler schon zweimal einzeln repariert
   (`.regal__leiste[hidden]`, `.archiv [hidden]`). Diese Regel erledigt ihn
   ein für alle Mal. `!important` ist hier richtig: `hidden` ist eine Aussage
   über die Existenz eines Elements, kein Gestaltungswunsch, über den sich
   streiten ließe. */
[hidden]{ display:none !important }

a{ color:inherit }

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:400;
  color:var(--navy);
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem,1.35rem + 4.3vw,4.6rem); line-height:1.05 }
h2{ font-size:clamp(1.85rem,1.25rem + 2.5vw,3rem);   line-height:1.12 }
h3{ font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem); line-height:1.3; letter-spacing:-.006em }
/* Links tragen grundsätzlich keine Unterstreichung (Wunsch 25.08.2026).
   Wo ein Verweis mitten im Fließtext steht, braucht er dann ein zweites
   Merkmal neben der Farbe — sonst ist er für Menschen mit Farbsehschwäche
   nicht als Verweis erkennbar (WCAG 1.4.1). Dort übernimmt das die Fettung;
   die Linie erscheint erst beim Überfahren. */
a{ text-decoration:none }

p{ margin:0 0 1.1em }
p:last-child{ margin-bottom:0 }

.hoch{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.schmal{ max-width:var(--schmal) }
.abschnitt{ padding-block:var(--abstand) }
.abschnitt--sand{ background:var(--papier-2) }
.abschnitt--navy{ background:var(--navy); color:var(--tinte-hell) }
.abschnitt--navy h2,.abschnitt--navy h3{ color:var(--weiss) }

/* Kicker — die Systematik von corelaw, in Gold statt Blau. */
.kicker{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--f-text); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-text); margin:0 0 clamp(1rem,2vw,1.6rem);
}
.kicker::before{ content:""; width:1.75rem; height:1px; background:currentColor; flex:none }
.abschnitt--navy .kicker{ color:var(--gold-hell) }

.lead{
  font-size:clamp(.98rem,.94rem + .28vw,1.14rem);
  line-height:1.7; color:var(--tinte-leise); max-width:46ch;
}
.abschnitt--navy .lead{ color:var(--tinte-hell) }
/* Mehrabsätziger Beitext (siehe `lead_kasten()`): Der Kasten erbt die Maße, die
   Absätze darin tragen den Rhythmus. */
.lead p{ margin:0 0 .9em }
.lead p:last-child{ margin-bottom:0 }

/* Zwei-Spalten-Kopf: Überschrift links, Beitext rechts (corelaw-Prinzip). */
.abschnitt-kopf{
  display:grid; gap:clamp(1.25rem,3vw,3.5rem);
  grid-template-columns:1fr; align-items:end;
  margin-bottom:clamp(2.25rem,4.5vw,4rem);
}
@media (min-width:900px){
  .abschnitt-kopf{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) }
  .abschnitt-kopf .lead{ padding-bottom:.4rem }
  /* Mehrabsätziger Beitext: oben ausrichten statt auf gemeinsamer Grundlinie,
     sonst rutscht die Überschrift an den unteren Rand. Siehe `abschnitt_kopf()`. */
  .abschnitt-kopf--hoch{ align-items:start }
  .abschnitt-kopf--hoch .lead{ padding-bottom:0 }
}

/* ----------------------------------------------------------------- Buttons */
.knopf{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--f-text); font-size:.83rem; font-weight:600;
  letter-spacing:.05em; text-decoration:none;
  padding:.82rem 1.35rem; border:1px solid transparent; border-radius:var(--radius);
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.knopf--voll{ background:var(--navy); color:var(--weiss); border-color:var(--navy) }
.knopf--voll:hover{ background:var(--gold); border-color:var(--gold-text); color:var(--navy) }
.knopf--linie{ border-color:var(--navy); color:var(--navy) }
.knopf--linie:hover{ background:var(--navy); color:var(--weiss) }
.knopf--hell{ border-color:rgba(255,255,255,.35); color:var(--weiss) }
.knopf--hell:hover{ background:var(--weiss); color:var(--navy); border-color:var(--weiss) }
.knopf--gold{ background:var(--gold); color:var(--navy); border-color:var(--gold-text) }
.knopf--gold:hover{ background:var(--gold-hell); border-color:var(--gold-hell) }
.knopf .pfeil{ transition:transform .25s var(--ease) }
.knopf:hover .pfeil{ transform:translateX(4px) }

/* Textlink mit wachsender Goldlinie.
   Die Linie ist ein eigenes Element mit `transform:scaleX()`. Der frühere Weg
   über einen einfarbigen `linear-gradient` und `background-size` erzeugte
   dasselbe Bild, war aber ein Verlauf von Gold nach Gold — im Code eine
   Krücke, und `transform` animiert der Browser ohnehin billiger als
   `background-size`. */
.textlink{
  position:relative;
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.9rem; letter-spacing:.03em;
  text-decoration:none; color:var(--navy); padding-bottom:2px;
}
.textlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.textlink:hover::after{ transform:scaleX(1) }
.abschnitt--navy .textlink{ color:var(--weiss) }

/* Sprungmarke für Tastatur und Screenreader */
.sprung{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--navy); padding:.9rem 1.4rem; font-weight:600;
}
.sprung:focus{ left:0 }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* ---------------------------------------------------------- Zurück nach oben
   Fachseiten und Ratgeberbeiträge sind lang; unten angekommen ist der Weg zum
   Menü weit. Der Knopf erscheint deshalb erst nach etwa anderthalb
   Bildschirmhöhen — davor wäre er nur im Weg.

   Er liegt auf z-index 30 und damit unter der Menüebene (40) und unter der
   Kopfleiste (60): Im geöffneten Vollbildmenü hat er nichts zu suchen, dort
   führt ohnehin jeder Weg nach oben.

   Ohne JavaScript bleibt er unsichtbar — er hat dann auch keine Funktion.
   Sichtbar setzt ihn allein das Skript über `data-sichtbar`. */
.nachoben{
  position:fixed; z-index:30;
  right:clamp(1rem,3vw,2.25rem); bottom:clamp(1rem,3vw,2.25rem);
  width:var(--knopf-mass); aspect-ratio:1;
  display:grid; place-items:center; cursor:pointer;
  background:var(--navy); color:var(--gold-hell);
  border:1px solid rgba(199,154,43,.45); border-radius:var(--radius);
  font-size:calc(var(--knopf-mass) * .6); line-height:1;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s,
             background .25s var(--ease), border-color .25s var(--ease);
}
.nachoben[data-sichtbar]{ opacity:1; visibility:visible; transform:none }
.nachoben:hover{ background:var(--navy-tief); border-color:var(--gold-text); color:var(--gold-text) }
.nachoben__pfeil{ transition:transform .25s var(--ease) }
.nachoben:hover .nachoben__pfeil{ transform:translateY(-3px) }
/* Im geöffneten Menü ausblenden, aber erst nach dem Ausblenden unklickbar
   machen — sonst springt er im Übergang. */
body.menue-offen .nachoben{ opacity:0; visibility:hidden; pointer-events:none }
@media (prefers-reduced-motion:reduce){
  .nachoben{ transition:opacity .01s linear, visibility .01s linear; transform:none }
  .nachoben:hover .nachoben__pfeil{ transform:none }
}

/* ------------------------------------------------------------ Bedienhilfen
   Der Knopf sitzt in derselben Ecke wie „Zurück nach oben", genau darüber, mit
   denselben Maßen: gleiche Kantenlänge, gleicher Rahmen, gleicher Abstand zum
   Rand. Der Abstand zwischen beiden ist die halbe Fuge, damit sie als Paar
   lesbar sind und nicht als zwei zufällige Knöpfe.

   Anders als „Zurück nach oben" ist er von Anfang an da: Wer ihn braucht,
   braucht ihn auf der ersten Bildschirmhöhe, nicht erst nach dem Scrollen. */
.hilfen__knopf{
  position:fixed; z-index:31;
  right:clamp(1rem,3vw,2.25rem);
  /* Unten in der Ecke, solange „Zurück nach oben" nicht da ist. Sonst stünde
     der Knopf in der Luft und darunter klaffte eine leere Fläche.

     Das Hochrücken läuft über `transform`, nicht über `bottom`: Am `bottom`
     dieses Knopfes blieb der Versatz wirkungslos, obwohl die Variable an ihm
     gemessen korrekt gesetzt war und dieselbe Rechnung am Fenster daneben
     aufging. Statt der Ursache weiter nachzugehen, verschiebt ihn jetzt eine
     Eigenschaft, die ohnehin flüssiger animiert. */
  bottom:clamp(1rem,3vw,2.25rem);
  width:var(--knopf-mass); aspect-ratio:1;
  display:grid; place-items:center; cursor:pointer;
  background:var(--navy); color:var(--gold-hell);
  border:1px solid rgba(199,154,43,.45); border-radius:var(--radius);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
/* Das Zeichen füllt den Rahmen deutlicher (26.08.2026: „Icon größer"). Der
   Rahmen selbst bleibt bei mindestens 44 px: die kleinste Zielgröße, die
   WCAG 2.5.8 für Finger empfiehlt, und die wollen wir nicht unterschreiten,
   nur damit das Zeichen größer wirkt.

   Gerechnet, nicht in Prozent: Ein SVG ohne eigene Maße legt `width:72%` nicht
   auf die Rahmenbreite aus, sondern auf seine eigene Fläche im Raster — gemessen
   kamen dabei 49 % heraus statt der gesetzten 72 %. Über `--knopf-mass` steht
   das Verhältnis fest, und beide Knöpfe teilen sich dieselbe Quelle. */
.hilfen__knopf svg{
  width:calc(var(--knopf-mass) * .64); height:calc(var(--knopf-mass) * .64);
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.hilfen__knopf:hover,
.hilfen__knopf[aria-expanded="true"]{
  background:var(--navy-tief); border-color:var(--gold-text); color:var(--gold-text);
}
body.menue-offen .hilfen__knopf{ opacity:0; visibility:hidden; pointer-events:none }

/* Sobald „Zurück nach oben" erscheint, rücken Knopf und Fenster eine
   Knopfhöhe samt Fuge nach oben. Den Schalter `data-zurueck` setzt `cfl.js` an
   <html>, sobald der andere Knopf eingeblendet wird.

   Feste Länge statt Rechnung: `translateY(-2.7rem)` entspricht der größten
   Knopfhöhe samt Fuge. Auf schmalen Fenstern, wo der Knopf kleiner wird,
   bleiben bis zu fünf Pixel mehr Luft zwischen beiden — das fällt nicht auf.
   Verschoben wird über `transform` und nicht über `bottom`, weil sich das
   flüssiger bewegt und die Grundposition unangetastet lässt. */
.hilfen__knopf{ transition:transform .35s var(--ease), background .25s var(--ease),
                        border-color .25s var(--ease), color .25s var(--ease) }
.hilfen{ transition:transform .35s var(--ease) }
html[data-zurueck] .hilfen__knopf,
html[data-zurueck] .hilfen{ transform:translateY(-2.7rem) }

@media (prefers-reduced-motion:reduce){
  .hilfen__knopf,
  .hilfen{ transition:none }
}

/* Das Fenster hängt an derselben Ecke und öffnet nach links oben. */
.hilfen{
  position:fixed; z-index:32;
  right:clamp(1rem,3vw,2.25rem);
  bottom:calc(clamp(1rem,3vw,2.25rem) + var(--knopf-mass) + .55rem);
  width:min(20rem, calc(100vw - 2rem));
  background:var(--navy); color:var(--tinte-hell);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  padding:clamp(1rem,2vw,1.25rem);
}
.hilfen__kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.hilfen__kopf h2{
  margin:0; font-family:var(--f-text); font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-hell);
}
.hilfen__zu{
  cursor:pointer; color:var(--leise); font-size:1.2rem; line-height:1; padding:.1rem .3rem;
  transition:color .2s var(--ease);
}
.hilfen__zu:hover{ color:var(--weiss) }

.hilfen__gruppe{ margin-top:1.1rem }
.hilfen__name{ margin:0 0 .5rem; font-size:.82rem; color:var(--tinte-hell) }
.hilfen__reihe{ display:flex; gap:.4rem }
.hilfen__wahl{
  flex:1; cursor:pointer; padding:.45rem .3rem;
  font-size:.76rem; font-weight:600; color:var(--tinte-hell);
  border:1px solid rgba(255,255,255,.28); border-radius:var(--radius);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.hilfen__wahl:hover{ border-color:var(--gold-hell); color:var(--gold-hell) }
.hilfen__wahl[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--navy) }

.hilfen__schalter{
  width:100%; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem 0; font-size:.84rem; color:var(--tinte-hell);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.hilfen__gruppe .hilfen__schalter:last-child{ border-bottom:0 }
/* Der Zustand ist ein Schieber, kein Häkchen: Er zeigt „an oder aus", nicht
   „erledigt". */
.hilfen__zustand{
  flex:none; width:2.1rem; height:1.1rem; border-radius:1rem;
  border:1px solid rgba(255,255,255,.35); position:relative;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.hilfen__zustand::after{
  content:""; position:absolute; top:50%; left:.16rem; transform:translateY(-50%);
  width:.72rem; height:.72rem; border-radius:50%; background:var(--tinte-hell);
  transition:left .2s var(--ease), background .2s var(--ease);
}
.hilfen__schalter[aria-pressed="true"] .hilfen__zustand{ background:var(--gold); border-color:var(--gold) }
.hilfen__schalter[aria-pressed="true"] .hilfen__zustand::after{ left:1.06rem; background:var(--navy) }

.hilfen__fuss{ margin:1.1rem 0 0; font-size:.72rem; line-height:1.55; color:var(--leise) }
.hilfen__fuss a{ color:var(--gold-hell); font-weight:600 }

/* Die Einstellungen selbst. Sie hängen am <html>, damit sie alles erfassen:
   Die ganze Seite rechnet in rem, deshalb wächst mit der Wurzelgröße auch
   jeder Abstand mit, nicht nur der Fließtext. */
html[data-schrift]{ font-size:calc(100% * var(--schrift, 1)) }
html[data-ruhe] *,
html[data-ruhe] *::before,
html[data-ruhe] *::after{
  animation-duration:.001s !important; animation-iteration-count:1 !important;
  transition-duration:.001s !important; scroll-behavior:auto !important;
}
html[data-luft] body{ line-height:2.05 }
html[data-luft] p{ line-height:2.05 }

/* ================================================================ Seitenkopf */
.kopf{
  position:fixed; top:0; left:0; right:0; z-index:60;
  color:var(--weiss);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
/* Über dem Bild transparent, ab dem ersten Scrollen als Leiste. Den Zustand
   setzt das Skript (data-fest), nicht CSS — scroll-driven animations sind
   noch nicht überall verfügbar. */
/* Beim Herunterscrollen weicht die Leiste nach oben, beim Hochscrollen kommt
   sie zurück (26.08.2026). Die Bewegung steht im CSS, die Entscheidung im
   Skript. Wer weniger Bewegung eingestellt hat, sieht sie hart wechseln statt
   gleiten — verstecken darf sie sich trotzdem, das ist keine Zierde, sondern
   Platz. */
.kopf{ transition:background .4s var(--ease), border-color .4s var(--ease), transform .35s var(--ease) }
.kopf[data-weg]{ transform:translateY(-100%) }
@media (prefers-reduced-motion:reduce){ .kopf{ transition:none } }

.kopf[data-fest]{
  background:var(--navy);
  border-bottom-color:rgba(255,255,255,.08);
  backdrop-filter:saturate(140%) blur(6px);
}
/* Solange der Kopf über dem Bild liegt, braucht er einen weichen Schleier,
   sonst konkurriert das Logo mit hellen Bildstellen. */
.kopf::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(20,29,36,.55);
  opacity:1; transition:opacity .4s var(--ease);
}
.kopf[data-fest]::before{ opacity:0 }
.kopf__innen{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:var(--kopf-h);
}
.kopf__logo{ display:flex; align-items:center; flex:none }
/* 05.09.2026 auf Wunsch um 20 % vergrößert — alle drei Werte im gleichen
   Verhältnis, damit das Mitwachsen zwischen schmalem und breitem Fenster
   erhalten bleibt (188→226, 19→22.8vw, 268→322).

   `--logo-skala` kommt aus den Einstellungen und ist normalerweise 1. Sie
   ist nötig, weil ein ausgetauschtes Logo seine eigene Randbreite mitbringt:
   Zwei Dateien mit derselben Pixelbreite können sehr verschieden groß
   aussehen, je nachdem wie viel Luft um das Motiv steht. Das lässt sich von
   außen nicht ausrechnen — also gehört der Regler in die Hand dessen, der das
   Ergebnis sieht. */
.kopf__logo img{ width:calc(clamp(226px,22.8vw,322px) * var(--logo-skala,1)); height:auto;
  /* Das Bild wird zum Ausgleich des Randes in der Datei senkrecht verschoben
     (siehe logo_abweichung() in _bausteine.php). `transform` verschiebt die
     Darstellung, nicht die Klickfläche — der durchsichtige Teil käme dadurch
     unter der Leiste zu liegen und finge dort Klicks ab, die dem Inhalt
     darunter gelten. Der Link selbst bleibt klickbar, er liegt in der
     Leiste. */
  pointer-events:none }
.kopf__rechts{ display:flex; align-items:center; gap:clamp(.6rem,1.4vw,1.2rem) }
.kopf .knopf{ padding:.8rem 1.25rem; font-size:.82rem; white-space:nowrap }

/* Menüknopf — vier verschlungene Rauten statt der üblichen drei Striche.
   corelaw benutzt an dieser Stelle ein Raster aus neun Quadraten; CFL nimmt
   dieselbe Idee (Raster statt Striche), aber in der Geometrie des eigenen
   Logos: der Knoten besteht aus feinen, ineinandergelegten Rauten.
   Beim Öffnen dreht sich das Zeichen um 45°. */
.burger{
  display:inline-flex; align-items:center; gap:.55rem;
  height:44px; padding:0 .2rem; background:none; border:0; cursor:pointer;
  color:var(--weiss); transition:color .25s var(--ease);
  font-family:var(--f-text); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
}
.burger__wort{ display:none }
@media (min-width:420px){ .burger__wort{ display:inline } }
.burger:hover{ color:var(--gold-text) }

.burger svg{
  width:23px; height:23px; overflow:visible;
  transition:transform .45s var(--ease);
}
.burger path{
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  transition:opacity .3s var(--ease);
}
.burger[aria-expanded="true"] svg{ transform:rotate(45deg) }

/* ---------------------------------------------------------- Vollbild-Menü
   Muss auf jeder Fensterhöhe vollständig sichtbar sein — auch auf einem
   flachen Notebook-Fenster. Deshalb: kein zentriertes Flex-Kind (das schneidet
   oben ab, sobald der Inhalt höher ist als der Bildschirm), sondern
   `margin-block:auto` in einem scrollbaren Kasten. Und eine Schriftgröße, die
   sich an der Fensterhöhe orientiert, nicht nur an der Breite. */
.menue{
  position:fixed; inset:0; z-index:40;
  background:var(--navy); color:var(--weiss);
  display:block; overflow-y:auto; overscroll-behavior:contain;
  padding:calc(var(--kopf-h) + clamp(1.5rem,4vh,3rem)) 0 clamp(2rem,5vh,3.5rem);
  opacity:0; visibility:hidden;
  transform:scale(1.03); filter:blur(8px);
  transition:opacity .45s var(--ease), transform .55s var(--ease),
             filter .45s var(--ease), visibility 0s linear .5s;
}
.menue[data-offen]{
  opacity:1; visibility:visible; transform:none; filter:none;
  transition:opacity .5s var(--ease), transform .6s var(--ease),
             filter .5s var(--ease), visibility 0s;
}
.menue__innen{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; margin-block:auto;
  padding-inline:var(--pad);   /* wie .kopf__innen — dadurch fluchten Menü und Logo */
  min-height:100%;
  display:grid; gap:clamp(1.75rem,4vw,4rem); grid-template-columns:1fr;
  align-content:center;
}
@media (min-width:860px){ .menue__innen{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) } }

.menue__haupt{ display:flex; flex-direction:column }
.menue__haupt a{
  font-family:var(--f-display);
  /* an Breite UND Höhe gekoppelt, damit nichts aus dem Fenster wächst */
  font-size:clamp(1.25rem,.85rem + 1vw + .5vh,2.05rem);
  line-height:1.14; letter-spacing:-.015em; text-decoration:none; color:var(--weiss);
  padding:.22em 0; position:relative; width:max-content; max-width:100%;
}
.menue__haupt a::after{
  content:""; position:absolute; left:0; bottom:.18em; height:1px; width:0;
  background:var(--gold); transition:width .35s var(--ease);
}
.menue__haupt a:hover{ color:var(--gold-hell) }
.menue__haupt a:hover::after{ width:100% }

/* Wo man gerade ist: allein über die Farbe, ohne Linie. Für Screenreader trägt
   `aria-current="page"` die Information weiter; Gold und Weiß unterscheiden sich
   zudem deutlich in der Helligkeit, nicht nur im Farbton. */
.menue__haupt a[aria-current]{ color:var(--gold-text) }
.menue__haupt a[aria-current]::after{ content:none }

.menue__themen h3,.menue__kontakt h3{
  font-family:var(--f-text); font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-text); margin:0 0 .9rem;
}
.menue__themen{ margin-bottom:clamp(1.25rem,3vh,2.25rem) }
.menue__themen ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem 1.5rem;
}
/* Aufzählungspunkt wie im Themenregal der Startseite — er trennt die beiden
   Spalten optisch voneinander und macht die Liste als Liste lesbar. */
.menue__themen li{ position:relative; padding-left:1rem }
.menue__themen li::before{
  content:""; position:absolute; left:.05rem; top:.52em;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
  transition:transform .2s var(--ease);
}
.menue__themen li:hover::before{ transform:scale(1.4) }
.menue__themen a{ text-decoration:none; color:var(--tinte-hell); font-size:.92rem }
.menue__themen a:hover{ color:var(--weiss) }
.menue__kontakt{ font-size:.92rem; color:var(--tinte-hell); line-height:1.65 }
/* #89969f ist das „--leise" für dunklen Grund: 5,02:1 auf Navy. */
/* Der Gebäudename steht seit dem 26.08.2026 in derselben Farbe wie die Straße
   darunter: Abgesetzt wirkte er wie eine Fußnote, dabei ist er die Angabe, nach
   der Ortsfremde tatsächlich suchen. Die Regel bleibt stehen, weil sie den
   Namen weiterhin als eigene Zeile führt. */
.menue__marke{ color:inherit }
.menue__kontakt a{ color:var(--weiss); text-decoration:none }
.menue__kontakt a:hover{ color:var(--gold-hell) }

/* Flaches Fenster: die Themenliste ist Beiwerk und weicht als Erstes. */
@media (max-height:620px){
  .menue__themen{ display:none }
  .menue__haupt a{ font-size:clamp(1.1rem,.9rem + .8vw,1.5rem) }
}

@media (prefers-reduced-motion:no-preference){
  .menue__haupt a,.menue__themen,.menue__kontakt{
    opacity:0; transform:translateY(12px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .menue[data-offen] .menue__haupt a,
  .menue[data-offen] .menue__themen,
  .menue[data-offen] .menue__kontakt{
    opacity:1; transform:none;
    transition-delay:calc(.1s + var(--i,0) * .05s);
  }
}
body.menue-offen{ overflow:hidden }

/* ======================================================================= Hero
   Vollbild-Slider. Die Bilder lösen sich ineinander auf statt zu schieben —
   ein Schnitt wäre für dieses Thema zu hart, ein Schieber zu betriebsam.
   Dazu eine sehr langsame Vergrößerung, damit das Standbild lebt. */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--navy-tief); color:var(--weiss); overflow:hidden;
}
.hero__slider{ position:absolute; inset:0 }
/* Wischblende: das neue Bild wird von rechts über das stehende gezogen. Ein
   Auflösen war hier zu weich — man sah zwei Räume gleichzeitig. Die Kante
   dagegen liest sich wie ein Blättern und lässt jedes Bild ganz stehen.
   Das abgehende Bild bleibt darunter liegen (data-davor), sonst blitzt für
   einen Moment der Hintergrund durch. */
.hero__bild{
  position:absolute; inset:0; margin:0; z-index:0;
  clip-path:inset(0 0 0 100%);
  visibility:hidden;
}
.hero__bild[data-davor]{
  z-index:1; visibility:visible; clip-path:inset(0 0 0 0);
}
.hero__bild[data-aktiv]{
  z-index:2; visibility:visible; clip-path:inset(0 0 0 0);
}
/* Der Übergang wird erst freigeschaltet, wenn das Skript übernimmt — sonst
   wischt das erste Bild beim Seitenaufbau herein und verzögert den Eindruck,
   dass die Seite steht. */
.hero__slider[data-laeuft] .hero__bild[data-aktiv]{
  transition:clip-path 1.25s cubic-bezier(.62,.02,.2,1);
}
.hero__bild img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:none;
}
/* Die Bewegung liegt ausschließlich im Hereinziehen — als Animation, die mit
   ihrem Endzustand genau da landet, wo der Ruhezustand ohnehin ist (transform:
   none). Deshalb kann beim Wechsel nichts mehr springen.
   Vorher lief ein langsamer Dauerzoom über 8,5 s bei 7 s Standzeit: Das
   abgehende Bild war also immer mitten in der Bewegung und wurde hart auf
   seinen Endwert gesetzt — das war der Rücksetzer. */
@keyframes bild-hereinziehen{
  from{ transform:translateX(2.5%) scale(1.035) }
  to  { transform:none }
}
.hero__slider[data-laeuft] .hero__bild[data-aktiv] img{
  animation:bild-hereinziehen 1.5s var(--ease) both;
}

/* Verlauf für die Lesbarkeit — von unten links, wo der Text steht. */
.hero__slider::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* z-index ist hier nicht schmückend: Die Bilder darunter tragen z-index 1
     und 2 (Wischblende). Ohne eigenen Wert läge dieses ::after UNTER ihnen und
     hätte gar keine Wirkung — genau das war lange der Fall, weshalb der
     Hero-Text auf hellen Bildstellen kaum lesbar war. */
  z-index:3;
  /* Ein gleichmäßiges Overlay, kein Verlauf. Die Stärke ist nicht geschätzt:
     Bei 0,68 wird selbst eine reinweiße Bildstelle zu #62686d, weißer Text
     erreicht darauf 5,6:1 und liegt damit sicher über den 4,5:1 der Stufe AA.
     Ein Verlauf könnte das nicht garantieren — bei ihm hängt die Lesbarkeit
     davon ab, wo im Bild die helle Stelle sitzt. */
  background:rgba(16,23,29,.68);
}

/* Ebenen im Hero, von unten nach oben:
     1  abgehendes Bild (data-davor)
     2  aktives Bild (data-aktiv)
     3  Overlay (.hero__slider::after) — muss über die Bilder, sonst wirkungslos
     4  Text, Punkte, Ladebalken — müssen über das Overlay, sonst grau in grau
   Beides ist schon schiefgegangen: erst lag das Overlay unter den Bildern,
   danach über dem Text. */
.hero__inhalt{
  position:relative; z-index:4; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(7rem,16vh,10rem) var(--pad) clamp(4.5rem,11vh,7rem);
}
/* Die drei Textblöcke liegen im selben Rasterfeld übereinander: Die Höhe ist
   immer die des längsten, und der Wechsel verschiebt die Knöpfe darunter nicht.
   Verborgen wird über `visibility`, deshalb liest auch der Vorleser nur den
   gerade sichtbaren Block. */
/* Unten ausgerichtet: Der Vorspann steht damit auf jedem Bild direkt über
   den Knöpfen, und die unterschiedlich langen Überschriften wachsen nach
   oben statt eine Lücke aufzureißen. */
.hero__texte{ display:grid; align-items:end; margin-bottom:clamp(2.4rem,4.5vw,3.4rem) }
.hero__text{
  grid-area:1 / 1;
  opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease), visibility .6s;
}
.hero__text[data-aktiv]{ opacity:1; visibility:visible }
/* `.hero__titel` ist ein Absatz in H1-Optik — siehe die Begründung bei
   $slider in index.php. Etwas mehr Zeilenbreite als die H1, weil die beiden
   Zeilen länger sind und ohne feste Umbrüche auskommen. */
.hero h1,.hero__titel{
  color:var(--weiss); margin:0 0 clamp(1rem,2vw,1.4rem); max-width:15ch;
  font-size:clamp(1.95rem,1.2rem + 2.7vw,3.3rem); line-height:1.1;
  font-family:var(--f-display); font-weight:400; letter-spacing:-.012em;
}
.hero__titel{ max-width:19ch }
.hero h1 .gold,.hero__titel .gold{ color:var(--gold-text) }
/* Die Vorspänne liegen alle im selben Rasterfeld übereinander: Die Höhe ist
   damit immer die des längsten, und der Wechsel verschiebt die Knöpfe darunter
   nicht. Verborgen wird über `visibility`, deshalb liest auch der Vorleser nur
   den gerade sichtbaren. */
.hero__lead{
  color:rgba(255,255,255,.84); max-width:100%;
  font-size:clamp(.88rem,.84rem + .22vw,1rem); line-height:1.7;
  /* Der Abstand zu den Knöpfen sitzt an `.hero__texte`, damit er für alle drei
     Blöcke einmal gilt. */
  margin-bottom:0;
}
/* 52 % der Inhaltsbreite — derselbe Maßstab wie im Vorspann der Unterseiten.
   Muss NACH der Regel oben stehen: Sie setzt max-width:100%, und bei gleicher
   Spezifität gewinnt die spätere. */
@media (min-width:900px){ .hero__lead{ max-width:52% } }
.hero__knoepfe{ display:flex; flex-wrap:wrap; gap:.6rem }
.hero__knoepfe .knopf{ padding:.72rem 1.2rem; font-size:.8rem }

/* Punkte: klein, unten rechts, mit Fortschrittslinie im aktiven Punkt. */
.hero__punkte{
  position:absolute; z-index:4; right:var(--pad); bottom:clamp(1.5rem,4vh,2.5rem);
  display:flex; gap:.6rem;
}
.hero__punkt{
  width:34px; height:2px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.28); position:relative; overflow:hidden;
  transition:background .3s var(--ease);
}
.hero__punkt:hover{ background:rgba(255,255,255,.5) }
.hero__punkt[aria-current="true"]{ background:var(--gold) }

/* Dünner Ladebalken über die volle Breite, direkt an der Unterkante des Heros.
   Zwei Pixel, nur Gold auf einer kaum sichtbaren Grundlinie — er soll die Zeit
   bis zum nächsten Bild zeigen, nicht die Aufmerksamkeit binden. */
.hero__fortschritt{
  position:absolute; z-index:4; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.hero__fortschritt span{
  display:block; height:100%; background:var(--gold);
  transform-origin:left; transform:scaleX(0);
  animation:balkenlauf var(--dauer,7s) linear forwards;
}
@keyframes balkenlauf{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){
  .hero__fortschritt{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .hero__text{ transition:none }
  .hero__bild img{ transform:none; animation:none }
  .hero__bild[data-aktiv]{ transition:none }
}

/* Autoritätsband — die Belege in einer Zeile, direkt unter dem Hero. */
.band{ background:var(--navy); color:var(--tinte-hell) }
.band__innen{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(1.4rem,2.6vw,2rem) var(--pad);
  display:grid; gap:.9rem clamp(1.5rem,3vw,3rem); grid-template-columns:1fr;
  font-size:.86rem; letter-spacing:.02em;
}
@media (min-width:760px){ .band__innen{ grid-template-columns:repeat(3,1fr) } }
.band__punkt{ display:flex; align-items:baseline; gap:.7rem }
.band__punkt::before{ content:""; width:6px; height:6px; background:var(--gold); flex:none; transform:translateY(-2px) }
/* Die fette Zeile steht für sich, der leichte Nachsatz kommt darunter: In
   einer fortlaufenden Zeile verschwamm die Grenze zwischen Beleg und
   Erläuterung. */
.band strong{ display:block; margin-bottom:.2rem; color:var(--weiss); font-weight:600 }

/* ============================================================== Situationen */
.situationen{ display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie) }
@media (min-width:620px){ .situationen{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .situationen{ grid-template-columns:repeat(4,1fr) } }
.situation{
  position:relative; background:var(--papier); padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex; flex-direction:column; gap:.55rem; text-decoration:none; min-height:clamp(150px,15vw,190px);
  transition:background .3s var(--ease);
}
.situation::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--gold);
  transition:width .35s var(--ease);
}
.situation:hover{ background:var(--weiss) }
.situation:hover::after{ width:100% }
.situation__titel{
  font-family:var(--f-display); font-size:clamp(1.12rem,1rem + .5vw,1.4rem);
  line-height:1.25; color:var(--navy);
}
.situation__text{ font-size:.9rem; line-height:1.6; color:var(--tinte-leise); margin:0 }
.situation__ziel{
  margin-top:auto; padding-top:1rem; font-size:.76rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text);
  display:flex; align-items:center; gap:.45rem;
}
.situation--letzte{ background:var(--navy) }
.situation--letzte .situation__titel{ color:var(--weiss) }
.situation--letzte .situation__text{ color:var(--tinte-hell) }
.situation--letzte:hover{ background:var(--navy-tief) }

/* ============================================================== Themenregal
   Die fünf Felder des Familienrechts als Karten in einer horizontalen Spur.
   Papier auf Sand, Linien statt Flächen — das Gewicht trägt die große Ziffer,
   nicht der Farbblock. Die Spur läuft rechts (und beim Scrollen links) aus dem
   Satzspiegel bis an den Fensterrand; --buendig ist der Abstand vom
   Satzspiegel zum Fensterrand, damit die erste Karte trotzdem mit den
   Überschriften fluchtet. `overflow-x:clip` auf dem Rahmen fängt die paar
   Pixel ab, die 100vw auf Systemen mit fester Bildlaufleiste zu breit ist. */
.regal{
  --buendig: calc(max((100vw - var(--maxw)) / 2, 0px) + var(--pad));
  margin-inline:calc(-1 * var(--buendig));
  overflow-x:clip;
}
.regal__spur{
  /* Jede Karte endet mit ihrem Inhalt (flex-start) — gleichgestreckt hätte die
     Karte mit drei Themen unten dieselbe Leerfläche, für die die Reiterfassung
     verworfen wurde. Die Mindesthöhe setzt das Skript: sie hält den Platz für
     die eine Kurzbeschreibung frei, die aufklappen kann, damit die Seite beim
     Überfahren nicht springt. */
  display:flex; align-items:flex-start; gap:clamp(.8rem,1.4vw,1.1rem);
  padding-inline:var(--buendig);
  /* Ein Pixel Luft, sonst schneidet das Clip des Rahmens die Kartenränder. */
  padding-block:1px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--buendig);
  /* Die Leiste darunter zeigt die Position — die Systemleiste wäre doppelt. */
  scrollbar-width:none;
}
.regal__spur::-webkit-scrollbar{ display:none }
.regal__karte{
  flex:0 0 auto; width:clamp(280px,24vw,352px); scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--papier); border:1px solid var(--linie);
  transition:border-color .3s var(--ease);
}
.regal__karte:hover{ border-color:rgba(199,154,43,.55) }
.regal__kopf{
  background:var(--navy);
  padding:clamp(1.1rem,1.7vw,1.4rem) clamp(1.1rem,1.6vw,1.4rem) clamp(1.2rem,1.8vw,1.5rem);
}
/* Die Ziffer ist das Bildelement der Karte — sie darf groß sein, weil sonst
   nichts auf der Fläche laut ist. Auf der Grundlinie daneben die Gesamtzahl. */
/* Auf Navy trägt Gold als Text die helle Fassung (7,66:1), nicht --gold-text. */
.regal__nr{
  display:flex; align-items:baseline; gap:.4rem;
  font-family:var(--f-display); font-size:clamp(2.1rem,1.6rem + 1.4vw,2.9rem);
  line-height:1; letter-spacing:-.01em; color:var(--gold-hell);
}
.regal__von{ font-size:.8rem; letter-spacing:.04em; color:#89969f }
.regal__titel{
  margin:.55rem 0 0; font-family:var(--f-display);
  font-size:clamp(1.2rem,1.1rem + .45vw,1.45rem); line-height:1.2;
  letter-spacing:-.006em; color:var(--weiss);
}
.regal__themen{ padding:.3rem clamp(1.1rem,1.6vw,1.4rem) clamp(1rem,1.6vw,1.3rem) }
.regal__thema{
  position:relative; display:block;
  padding:.55rem 1.5rem .55rem 1rem; text-decoration:none;
  border-bottom:1px solid var(--linie-leise);
}
.regal__thema:last-child{ border-bottom:0 }
/* Aufzählungspunkt auf der Mittellinie der ersten Zeile des Themennamens. */
.regal__thema::before{
  content:""; position:absolute; left:.1rem; top:calc(.55rem + .66em);
  width:5px; height:5px; border-radius:50%; background:var(--gold);
  transition:transform .2s var(--ease);
}
.regal__thema:hover::before,.regal__thema:focus-visible::before{ transform:scale(1.4) }
.regal__name{
  display:block; font-weight:600; font-size:.95rem; color:var(--navy);
  transition:color .2s var(--ease);
}
/* Eingeklappt: das Gitter hat null Zeilenhöhe, die innere Hülle kappt den
   Text. Beim Überfahren fährt die Zeile auf 1fr — ein Wert, den der Browser
   weich bewegen kann, anders als `height:auto`. */
.regal__teaser{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .3s var(--ease), opacity .25s var(--ease);
}
.regal__teaser > span{
  display:block; overflow:hidden; min-height:0; padding-top:.18rem;
  font-size:.85rem; line-height:1.45; color:var(--leise);
}
.regal__thema:hover .regal__teaser,
.regal__thema:focus-visible .regal__teaser{ grid-template-rows:1fr; opacity:1 }
/* Ohne Zeigegerät gibt es kein Überfahren — dort stehen die Zeilen offen. */
@media (hover:none){
  .regal__teaser{ grid-template-rows:1fr; opacity:1 }
}
@media (prefers-reduced-motion:reduce){
  .regal__teaser{ transition:none }
}
/* Nur für den Moment der Messung im Skript. Zwei getrennte Zustände, weil
   sonst die auslaufende Bewegung mitgemessen wird: „still" friert sie ein,
   „offen" klappt auf. */
.regal__spur--still .regal__teaser{ transition:none }
.regal__spur--offen .regal__teaser{ grid-template-rows:1fr; opacity:1 }
/* Der Pfeil erscheint erst beim Überfahren — im Ruhezustand wäre er
   einundzwanzigmal dasselbe Zeichen. */
.regal__thema::after{
  content:"→"; position:absolute; right:0; top:.5rem; color:var(--gold-text);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.regal__thema:hover::after,.regal__thema:focus-visible::after{ opacity:1; transform:none }
.regal__thema:hover .regal__name,.regal__thema:focus-visible .regal__name{ color:var(--gold-text) }

/* Bedienleiste: Fortschrittsbalken links (dieselbe Zwei-Pixel-Sprache wie am
   Hero), die beiden Pfeile rechts. Sie liegt wieder im Satzspiegel. */
.regal__leiste{
  display:flex; align-items:center; gap:1rem;
  margin:1.4rem var(--buendig) 0;
}
.regal__leiste[hidden]{ display:none }
.regal__balken{ flex:1; height:2px; background:var(--linie); overflow:hidden }
.regal__balken span{
  display:block; height:100%; background:var(--gold);
  transform-origin:left; transform:scaleX(0);
}
.regal__pfeil{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  background:none; border:1px solid var(--linie); color:var(--navy);
  font-size:1.05rem; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.regal__pfeil:hover{ border-color:var(--gold); color:var(--gold-text) }
.regal__pfeil[disabled]{ opacity:.35; cursor:default }
.regal__pfeil[disabled]:hover{ border-color:var(--linie); color:var(--navy) }

/* ==================================================================== Team */
.team{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); grid-template-columns:repeat(2,1fr) }
@media (min-width:820px){ .team{ grid-template-columns:repeat(4,1fr) } }
/* Kommt A. Taylan dazu (offener Punkt O-4), hier auf repeat(5,1fr) stellen. */
.person{ text-decoration:none; display:block }
.person__bild{
  aspect-ratio:1/1; background:var(--papier-2) center/cover no-repeat;
  border:1px solid var(--linie); margin-bottom:.9rem; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* Beim Überfahren fährt das Bild langsam heran — lange Dauer und weiche Kurve,
   damit es ruhig bleibt und nicht wie ein Werbebanner zuckt. */
.person__bild img{
  /* Quadratisch zuschneiden statt einpassen: Ein Querformat (Aynur, 18.09.2026)
     stand sonst kleiner mit Rand in der Reihe. */
  width:100%; height:100%; object-fit:cover; object-position:50% 25%;
  transition:transform 1.1s var(--ease), filter 1.1s var(--ease);
  transform-origin:center 35%;
}
.person:hover .person__bild img,
.person:focus-visible .person__bild img{ transform:scale(1.055) }
.person__bild span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--leise) }
.person__bild::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.person:hover .person__bild::after{ transform:scaleX(1) }
.person__name{ display:block; font-family:var(--f-display); font-size:1.1rem; line-height:1.25; color:var(--navy) }
.person__rolle{ display:block; font-size:.82rem; color:var(--tinte-leise); margin-top:.2rem }

/* ================================================================== Ablauf */
/* Die Spaltenzahl kommt aus der Anzahl der Schritte, nicht aus einer festen
   Zahl: Bei vier Schritten in einem Dreierraster stand der vierte allein in
   einer zweiten Reihe und riss ein Loch in die Fläche. `--spalten` setzt die
   aufrufende Seite, gedeckelt auf vier. */
.ablauf{
  display:grid; gap:clamp(1.75rem,3.5vw,3rem);
  grid-template-columns:1fr; counter-reset:schritt;
}
@media (min-width:700px) and (max-width:1019px){
  .ablauf{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:1020px){
  .ablauf{ grid-template-columns:repeat(var(--spalten,3),1fr) }
}
.schritt{
  position:relative; counter-increment:schritt; padding-top:1.4rem; border-top:0;
}
/* Die Trennlinie ist ein eigenes Element, damit sie sich beim Erscheinen von
   links aufziehen kann. Das ::before ist schon von der Nummer belegt. */
/* Das Ablauf-Bauteil steht auf der Startseite auf Navy und auf /kanzlei/ auf
   hellem Grund. Seine Farben waren fest für Navy gesetzt — auf hell ergab das
   #cfd6db auf #fbfaf8, also 1,4:1 und praktisch unlesbar. Alle drei Farben
   hängen jetzt am Kontext. */
.schritt::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--linie-kontext);
  transform:scaleX(0); transform-origin:left;
}
.schritt::before{
  content:counter(schritt, decimal-leading-zero); display:block; font-family:var(--f-display);
  font-size:1.5rem; color:var(--gold-text); margin-bottom:.7rem;
}
.schritt h3{ margin-bottom:.5rem }
.schritt p{ font-size:.95rem; color:var(--leise) }

/* ===================================================================== FAQ */
.faq{ border-top:1px solid var(--linie) }
.faq details{ border-bottom:1px solid var(--linie) }
.faq summary{
  list-style:none; cursor:pointer; padding:1.3rem 2.5rem 1.3rem 0; position:relative;
  font-family:var(--f-display); font-size:clamp(1.05rem,1rem + .4vw,1.28rem);
  line-height:1.35; color:var(--navy);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg) }
.faq__antwort{ padding:0 clamp(1rem,6vw,4rem) 1.5rem 0; color:var(--tinte-leise); max-width:68ch }
.faq__antwort p{ margin-bottom:.8em }

/* ================================================================ Ratgeber */
.beitraege{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr }

/* ------------------------------------------------------- Speicher-Hinweis
   Ein schwebendes Rechteck unten links (26.08.2026, zweite Fassung: vorher ein
   Balken über die volle Breite). Kein Einwilligungsbanner, sondern ein Hinweis
   — die Begründung steht bei `speicher_hinweis()` in `_teile.php`.

   Unten LINKS, weil unten rechts der Knopf „Zurück nach oben" sitzt. Zwei
   schwebende Elemente in derselben Ecke wären eine Doppelbelegung; so hat jede
   Ecke ihre Aufgabe.

   Er sperrt nichts: ein Kasten von rund 24 rem Breite, der Inhalt daneben
   bleibt lesbar und bedienbar. Über dem Inhalt, aber unter dem Menü
   (z-index 50 gegen 60). */
.chinweis{
  position:fixed; z-index:50;
  left:clamp(.75rem,2vw,1.75rem); bottom:clamp(.75rem,2vw,1.75rem);
  width:min(24rem, calc(100vw - 1.5rem));
  background:var(--navy); color:var(--tinte-hell);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
}
.chinweis__innen{
  padding:clamp(1.1rem,2vw,1.35rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
}
.chinweis__text{ margin:0; font-size:.84rem; line-height:1.6 }
.chinweis__text a{ color:var(--gold-hell); font-weight:600 }
/* Bewusst kein Goldknopf: Der Hinweis verlangt nichts, er informiert. Ein
   großer Handlungsknopf würde ihn wichtiger machen, als er ist, und mit dem
   Aufruf zum Erstgespräch konkurrieren. Deshalb klein, in Linienform. */
.chinweis__knopf{
  flex:0 0 auto; cursor:pointer;
  font-family:var(--f-text); font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:var(--tinte-hell); background:none;
  border:1px solid rgba(255,255,255,.35); border-radius:var(--radius);
  padding:.4rem .9rem;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.chinweis__knopf:hover{ border-color:var(--gold-hell); color:var(--gold-hell) }

/* Ein Knopf, der aussieht wie ein Verweis: für Aktionen im Fließtext, die
   nirgendwohin führen. Gold und halbfett wie jeder Link im Projekt. */
.textknopf{
  cursor:pointer; background:none; border:0; padding:0;
  font:inherit; font-size:.95rem; font-weight:600; color:var(--gold-text);
  text-decoration:none; transition:color .2s var(--ease);
}
.textknopf:hover{ text-decoration:underline }

/* ------------------------------------------------------ Briefing-Streifen
   Anmeldung zum Newsletter auf der Startseite (26.08.2026). Bewusst ruhig
   gehalten: Er steht direkt über dem Aufruf zum Erstgespräch, und zwei gleich
   laute Aufforderungen nebeneinander schwächen beide. Deshalb Sandfläche statt
   Navy und ein einzelnes Goldelement, der Knopf.

   Zwei Spalten ab 900 px, darunter untereinander. Feld und Knopf teilen sich
   eine Zeile, solange Platz ist; auf dem Telefon steht der Knopf darunter und
   über die volle Breite, weil ein Knopf neben einem Feld dort beides zu schmal
   macht. */
.nlstreifen__gitter{
  display:grid; gap:clamp(1.75rem,3.5vw,3.5rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){
  .nlstreifen__gitter{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
}
.nlstreifen__text h2{
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); line-height:1.15;
  margin:.4rem 0 .9rem; letter-spacing:-.015em;
}
.nlstreifen__text .lead{ max-width:44ch; margin:0 }

.nlstreifen__zeile{ display:flex; flex-wrap:wrap; gap:.75rem }
.nlstreifen__zeile input[type="email"]{
  flex:1 1 16rem; min-width:0;
  font:inherit; font-size:1rem; color:var(--tinte);
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:.8rem 1rem;
  transition:border-color .2s var(--ease);
}
.nlstreifen__zeile input[type="email"]::placeholder{ color:var(--leise) }
.nlstreifen__zeile input[type="email"]:focus{ border-color:var(--gold); outline:none }
.nlstreifen__zeile .knopf{ flex:0 0 auto }
@media (max-width:520px){ .nlstreifen__zeile .knopf{ flex:1 1 100%; justify-content:center } }

.nlstreifen__haken{ margin-top:1rem }
.nlstreifen__haken label{ font-size:.82rem; line-height:1.6; color:var(--tinte-leise) }

/* --------------------------------------------------- Beiträge als Schiene
   Drei nebeneinander, der Rest liegt daneben (26.08.2026). Dieselbe Mechanik
   wie das Themenregal der Startseite: Einrastpunkte über `scroll-snap`, ein
   Schritt ist genau eine Kartenbreite samt Fuge.

   Die Breite der Karte ist gerechnet, nicht geraten: `(100% - 2 Fugen) / 3`
   ergibt genau drei sichtbare Karten. Darunter zwei, auf dem Telefon eine —
   drei Spalten auf 375 px wären drei Streifen. */
.beitraege--schiene{ position:relative; display:block }
.beitraege__spur{
  display:flex; gap:var(--fuge,clamp(1.5rem,3vw,2.5rem));
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-block:1px;
}
.beitraege__spur::-webkit-scrollbar{ display:none }
.beitraege--schiene .beitrag{
  flex:0 0 calc((100% - 2 * var(--fuge,clamp(1.5rem,3vw,2.5rem))) / 3);
  scroll-snap-align:start;
}
@media (max-width:1000px){
  .beitraege--schiene .beitrag{ flex-basis:calc((100% - var(--fuge,1.5rem)) / 2) }
}
@media (max-width:700px){
  .beitraege--schiene .beitrag{ flex-basis:88% }
}

/* Die Pfeile sitzen auf halber Höhe des Bildes, nicht der ganzen Karte: Bei
   unterschiedlich langen Titeln wandert die Kartenmitte, die Bildmitte nicht. */
.beitraege__pfeil{
  position:absolute; top:calc(clamp(150px,14vw,220px) / 2); transform:translateY(-50%);
  z-index:3; cursor:pointer;
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  background:var(--navy); color:var(--weiss); font-size:1.05rem; line-height:1;
  border:1px solid var(--navy);
  transition:background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.beitraege__pfeil:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy) }
.beitraege__pfeil[disabled]{ opacity:.28; cursor:default }
.beitraege__pfeil[disabled]:hover{ background:var(--navy); border-color:var(--navy); color:var(--weiss) }
.beitraege__pfeil--zurueck{ left:calc(-1 * clamp(.6rem,1.6vw,1.3rem)) }
.beitraege__pfeil--vor{ right:calc(-1 * clamp(.6rem,1.6vw,1.3rem)) }
/* Ohne Skript gibt es nichts zu bedienen: Die Spur lässt sich dann von Hand
   schieben, die Pfeile blieben wirkungslos. */
.beitraege__pfeil{ display:none }
.js-schiene .beitraege__pfeil{ display:grid }
/* Passen alle Karten nebeneinander, verschwinden die Pfeile wieder. */
.beitraege--voll .beitraege__pfeil{ display:none }

@media (min-width:760px){ .beitraege{ grid-template-columns:repeat(3,1fr) } }
.beitrag{ display:flex; flex-direction:column; gap:.7rem; padding-top:1.25rem; border-top:2px solid var(--navy) }
.beitrag__meta{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-text) }
.beitrag p{ font-size:.92rem; color:var(--tinte-leise); margin:0 }
.beitrag__autorin{ margin-top:auto; padding-top:.9rem; font-size:.8rem; color:var(--tinte-leise) }

/* ================================================================= CTA-Band */
.aufruf{ background:var(--navy); color:var(--weiss); position:relative; overflow:hidden }
.aufruf::before{
  content:""; position:absolute; left:var(--pad); top:0; width:clamp(60px,12vw,140px); height:2px; background:var(--gold);
}
.aufruf__innen{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(3.5rem,7vw,6rem) var(--pad);
  display:grid; gap:clamp(1.75rem,4vw,3.5rem); align-items:center;
}
@media (min-width:900px){ .aufruf__innen{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) } }
.aufruf h2{ color:var(--weiss); margin-bottom:.9rem }
.aufruf p{ color:var(--tinte-hell); max-width:46ch }
.aufruf__knoepfe{ display:flex; flex-wrap:wrap; gap:.8rem }

/* =================================================================== Fußzeile */
/* Oben viel Luft, unten wenig: `padding-block` mit einem Wert setzte beides
   gleich, und unter der Urheberzeile stand dadurch ein Streifen von bis zu
   72 px ohne Inhalt. Die Zeile ist der Schluss der Seite — sie braucht Abstand
   nach oben, nicht nach unten. */
.fuss{
  background:var(--navy-tief); color:var(--tinte-hell);
  padding-block:clamp(3rem,6vw,4.5rem) clamp(1.2rem,2vw,1.7rem);
}
.fuss__gitter{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:1fr;
}
@media (min-width:720px){ .fuss__gitter{ grid-template-columns:1.4fr 1fr 1fr } }
@media (min-width:1040px){ .fuss__gitter{ grid-template-columns:1.6fr 1fr 1fr 1.1fr } }
/* Greift seit dem 26.08.2026 nicht mehr: Das Logo liegt seither in einem
   <a class="fuss__marke">, ist also kein direktes Kind der Spalte. Die Regel
   bleibt für andere Bilder stehen, die Breite des Logos steht bei
   `.fuss__marke`. */
.fuss__gitter > div > img{ width:230px; margin-bottom:1.3rem }
.fuss h3{
  font-family:var(--f-text); font-size:.74rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--leise); margin-bottom:1rem;
}
.fuss ul{ list-style:none; margin:0; padding:0; font-size:.9rem }
/* Abstand zwischen Anschrift und Symbolreihe. Muss NACH `.fuss ul` stehen und
   zwei Klassen tragen: Die Regel darüber setzt `margin:0` für jede Liste in
   der Fußzeile und ist spezifischer als `.sozial--fuss` allein — ein
   margin-top dort blieb wirkungslos. */
.fuss .sozial--fuss{ margin-top:clamp(2.4rem,4.5vw,3.6rem) }
.fuss li + li{ margin-top:.5rem }
.fuss a{ text-decoration:none; transition:color .2s var(--ease) }
.fuss a:hover{ color:var(--gold-hell) }
/* Die Seite, auf der man gerade steht (26.08.2026). Gold plus Fettung, wie
   überall bei Links im Projekt: Farbe allein trüge die Information nicht für
   alle. Der Haken ist `aria-current="page"`, das dieselbe Aussage auch für
   Screenreader trifft. */
.fuss a[aria-current]{ color:var(--gold-hell); font-weight:600 }
.fuss__unten a[aria-current]{ color:var(--gold-hell) }
/* Das Logo ist ein Link: Der Block darf nicht die ganze Spaltenbreite greifen,
   sonst reicht die Klickfläche bis an den Text daneben.

   Die Breite ist seit dem 05.09.2026 an den Absatz darunter gebunden — Logo
   und Text bilden eine Kante, statt dass das Logo über den Text hinausragt.
   `34ch` ist derselbe Wert wie in `.fuss__text`, und die Schriftgröße steht
   hier ausdrücklich dabei: `ch` rechnet gegen die Schrift DIESES Elements, und
   ohne die Angabe wären die beiden Breiten trotz gleicher Zahl verschieden.
   Auf schmalen Fenstern, wo die Spalte enger als 34ch ist, greift statt dessen
   die volle Spaltenbreite. */
.fuss__marke{ display:block; font-size:.9rem; margin-bottom:.65rem;
              max-width:calc(34ch * var(--logo-skala,1)) }
.fuss__marke img{ width:100% }
/* Der Absatz braucht einen eigenen Abstand nach oben: Absätze tragen im
   Projekt nur unten einen (`p{margin:0 0 1.1em}`), und das Logo darüber ist ein
   Bild ohne Unterlänge — der Text klebte daran. */
/* 05.09.2026 halbiert (war clamp(1.4rem,2.6vw,2rem) plus 1,3rem am Logo
   darüber): Logo und Text gehören zusammen, der Abstand trennte sie wie zwei
   Abschnitte. */
.fuss__text{ margin-top:clamp(.7rem,1.3vw,1rem); font-size:.9rem; max-width:34ch }
.fuss__unten{
  max-width:var(--maxw); margin:clamp(2.5rem,5vw,3.5rem) auto 0; padding-inline:var(--pad);
  padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.82rem; color:var(--leise);
}
.fuss__unten a{ color:var(--leise) }

/* Die Rasterlinien entstehen dadurch, dass der Container in der Linienfarbe
   liegt und die Kacheln ihn mit 1px Fuge überdecken. Solange die Kacheln beim
   Hereinblenden noch unsichtbar sind, liegt diese Fläche jedoch frei — als
   farbiges Rechteck. Sie wird deshalb erst mit den Kacheln zusammen sichtbar. */
@media (prefers-reduced-motion:no-preference){
  .situationen:not(.sichtbar),
  .verwandt:not(.sichtbar),
  .leistungen:not(.sichtbar){ background:transparent; border-color:transparent }
  /* Die Fugenfarbe erscheint ZULETZT, nach der langsamsten Kachel. Ohne diese
     Verzögerung läge sie schon frei, während die hinteren Kacheln noch
     hereinblenden — dann wäre das Rechteck nur kürzer sichtbar, nicht weg.
     Die Kacheln brauchen `--i * --stufe` plus 0,7 s; bei vier Kacheln und
     0,35 s Takt sind das rund 1,75 s. */
  .situationen,.verwandt,.leistungen{
    transition:background-color .4s var(--ease) 1.5s,
               border-color     .4s var(--ease) 1.5s;
  }
}

/* ============================================================ Einblendungen */
/* --------------------------------------------------------- Sanftes Scrollen
   Jeder Sprung zu einem Anker gleitet, statt zu springen (26.08.2026, Ansage:
   „wenn ich Schnellzugriff wähle, möchte ich dorthin sliden" — und generell
   überall). Betroffen sind damit der Schnellzugriff der Meldungen, die
   Sprungleiste der Fragenseite, die Porträtanker, die Wege zu den Formularen
   und der Knopf „Zurück nach oben".

   In derselben Bedingung wie die Einblendungen: Wer im Betriebssystem weniger
   Bewegung eingestellt hat, springt weiterhin hart — für Menschen mit
   vestibulären Beschwerden ist ein gleitender Bildschirm keine Zierde, sondern
   ein Problem.

   Dass die Ziele nicht unter der Kopfleiste landen, regelt `scroll-margin-top`
   an den Überschriften; das stand schon vorher. */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth }
}

/* Jedes angesprungene Element hält Abstand zur festen Kopfleiste. Einzelne
   Überschriften trugen das schon (`.fliesstext h2`, `.fragenblock h2`), andere
   nicht: Der Block „Was das für Sie bedeutet" einer Meldung stand auf 0 und
   landete beim Sprung hinter der Leiste. `:target` greift genau dann, wenn ein
   Element über die Adresse angesteuert wird, und deckt damit auch jeden Anker
   ab, den es hier noch nicht gibt. */
:target{ scroll-margin-top:calc(var(--kopf-h) + 1.5rem) }

/* ------------------------------------------------- Einblenden beim Scrollen
   Zwei Stufen: ganze Blöcke fahren sanft herein, Raster lassen ihre Kacheln
   nacheinander folgen. Die Verzögerung ist gedeckelt, damit die letzte Kachel
   einer langen Reihe nicht spürbar hinterherhinkt.
   Wer im Betriebssystem weniger Bewegung eingestellt hat, sieht alles sofort. */
@media (prefers-reduced-motion:no-preference){
  [data-auf]{
    opacity:0; transform:translateY(22px);
    transition:opacity .75s var(--ease), transform .75s var(--ease);
  }
  [data-auf].sichtbar{ opacity:1; transform:none }

  /* Raster: die Kinder kommen gestaffelt nach. */
  [data-auf-kinder] > *{
    opacity:0; transform:translateY(18px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  [data-auf-kinder].sichtbar > *{
    opacity:1; transform:none;
    transition-delay:calc(var(--i,0) * .075s);
  }
  /* Die Situationskacheln liegen in einem Raster mit 1px-Fugen — dort würde ein
     Verschieben die Linien aufreißen. Deshalb nur ein-, nicht hereinblenden.

     Und weil der Versatz fehlt, war die Welle hier kaum zu erkennen: Bei 0,075 s
     Abstand und 0,6 s Blende überlappten alle acht Kacheln fast vollständig, die
     letzte startete 0,525 s nach der ersten und damit lange vor deren Ende.
     Michel am 26.08.2026: sie sollen nacheinander erscheinen. Deshalb hier ein
     größerer Schritt bei kürzerer Blende — 0,14 s Abstand auf 0,45 s Dauer, acht
     Kacheln in 1,43 s. Die übrigen Raster behalten ihre feine Staffelung, weil
     sie den Versatz mitbringen und dort schon sichtbar ist, was hier fehlte. */
  .situationen > *{ transform:none; transition-duration:.45s }
  .situationen.sichtbar > *{ transform:none; transition-delay:calc(var(--i,0) * .14s) }
}

/* Startdatum unter dem Porträt — Ehrlichkeitssignal, kein Kleingedrucktes.
   Die Anwältinnen wechseln zu unterschiedlichen Terminen in die Kanzlei; das
   steht sichtbar am Bild statt in einer Fußnote. */
.person__ab{
  display:inline-block; margin-top:.35rem;
  font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-text);
}

/* Netzwerke in der Fußzeile — Strichzeichnungen im selben Duktus wie der
   Logo-Knoten, nicht die bunten Markenkacheln. Solange ein Profil fehlt,
   steht der Verweis auf „#" und trägt ein title-Attribut. */
.sozial{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:flex; align-items:center; gap:.5rem;
}
/* Die Listenpunkte werden per `display:contents` ganz aus dem Layout genommen —
   die Verweise selbst sind dann die Flex-Kinder. Vorher lag das erste Feld
   acht Pixel höher als die übrigen: Der Browser richtete das erste <li> an der
   Schriftlinie aus, die folgenden dagegen aneinander. Als Liste bleibt die
   Auszeichnung für Screenreader erhalten. */
.sozial li{ display:contents }
.sozial a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; color:var(--leise);
  border:1px solid rgba(255,255,255,.14); border-radius:2px;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.sozial a:hover{ color:var(--navy); background:var(--gold); border-color:var(--gold-text) }
.sozial svg{
  width:19px; height:19px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Symbolreihe im Vollbild-Menü: gleiche Form wie in der Fußzeile, nur etwas
   luftiger und auf dem dunklen Grund heller angelegt. */
.sozial--menue{ margin-top:1.5rem }
.sozial--menue a{ border-color:rgba(255,255,255,.18); color:var(--tinte-hell) }
.sozial--menue a:hover{ color:var(--navy) }


/* -------------------------------------------------------------- Bildband
   Vollbreiter Bildstreifen zwischen zwei Abschnitten. Feste Höhe statt
   Seitenverhältnis, damit auf breiten Bildschirmen kein überhoher Block
   entsteht — und mit `width`/`height` am Bild, damit nichts springt. */
.bildband{
  position:relative; overflow:hidden;
  height:clamp(340px,66vh,760px);
  background:var(--navy-tief);
}
/* Bewusst ohne Bewegung: Das Band ist kein Verweis, es lässt sich nicht
   anklicken — eine Reaktion auf den Mauszeiger würde etwas versprechen,
   was dahinter nicht kommt. */
.bildband img{
  /* Der Ausschnitt sitzt tiefer im Bild, dadurch rücken die Personen im Rahmen
     nach oben und die Treppe füllt den unteren Teil. */
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
}


/* ------------------------------------------------- Reihen, Stück für Stück
   Ablaufschritte, Porträts und Ratgeberkacheln bauen sich nacheinander auf,
   sobald die Reihe im Blick steht. Die Schrittweite steht am Element selbst
   (--stufe): beim Ablauf lang, weil dort die Reihenfolge die Aussage ist,
   bei Porträts und Kacheln kurz, weil sie nur nachfließen sollen. */
@media (prefers-reduced-motion:no-preference){
  [data-auf-reihe] > *{
    opacity:0; transform:translateY(26px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  [data-auf-reihe].sichtbar > *{
    opacity:1; transform:none;
    transition-delay:calc(var(--i,0) * var(--stufe,.3s));
  }
  /* Die Trennlinie über jedem Ablaufschritt zieht im selben Takt auf. */
  .ablauf .schritt::after{ transition:transform .9s var(--ease) }

  /* Kein Übergang für das, was beim Aktualisieren schon im Blickfeld steht
     (Michel, 21.09.2026). Das Skript setzt `sofort` genau auf diese Elemente
     und nimmt die Klasse zwei Bilder später wieder weg — sie schaltet also nur
     den einen Zustandswechsel stumm, nicht das Verhalten der Seite. Muss NACH
     den Regeln oben stehen: gleiche Spezifität, es gewinnt die spätere. */
  [data-auf].sofort,
  [data-auf-kinder].sofort > *,
  [data-auf-reihe].sofort > *,
  .sofort .schritt::after{ transition:none }
  .ablauf.sichtbar .schritt::after{
    transform:scaleX(1);
    transition-delay:calc(var(--i,0) * var(--stufe,.85s));
  }
}
@media (prefers-reduced-motion:reduce){
  .schritt::after{ transform:scaleX(1) }
}


/* ---------------------------------------------------- Signatur in der Fußzeile */
/* Ein ganz normaler Textabsatz, kein Flex-Kasten. Als Flex-Container wurden
   „© 2026 …" und der ibx-Verweis zu getrennten Kästen mit eigenen Zeilenboxen —
   das Zeichen ließ sich dann nicht mehr auf die Schriftlinie des Textes bringen.
   Als Fließtext sitzt es dort zwangsläufig richtig. */
.fuss__urheber .ibx{ margin-left:.85rem }
.ibx{
  /* Kein Flex-Kasten, sondern eine ganz normale Textzeile: Das Zeichen wird wie
     ein Buchstabe gesetzt und sitzt damit zwangsläufig auf derselben Schriftlinie
     wie „Design by" davor. Mit Flexbox saß es hier hartnäckig zehn Pixel höher. */
  color:var(--leise); text-decoration:none; white-space:nowrap;
  transition:color .25s var(--ease);
}
/* Die width-Angabe muss mit, sonst greift die allgemeine Regel .fuss img
   (230 px) und das Zeichen wird so groß wie die halbe Fußzeile. */
.ibx img{
  /* Auf Versalhöhe (0,78 em), damit es genau so hoch steht wie der Text daneben,
     und mit `vertical-align` auf die Schriftlinie gesetzt.
     Der Abstand muss ausdrücklich auf null: Die Fußzeilen-Regel für das
     Kanzleilogo gab jedem Bild hier 1,3 rem Abstand nach unten — und genau um
     diese 21 px saß das Zeichen über der Zeile. */
  /* Größer als die Versalhöhe: Damit es dabei optisch in der Zeile bleibt und
     nicht nach oben ausbricht, sitzt es ein Stück unter der Schriftlinie. */
  width:auto; height:1.25em; margin:0 0 0 .45em; opacity:.55;
  display:inline-block; vertical-align:-.28em;
  transition:opacity .25s var(--ease);
}
.ibx:hover{ color:var(--tinte-hell) }
.ibx:hover img{ opacity:1 }

/* ------------------------------------------------------- Bild im Ratgeber */
.beitrag__bild{
  display:block; margin:0 0 1rem; overflow:hidden;
  aspect-ratio:16/10; background:var(--papier-2);
}
.beitrag__bild img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.beitrag__bild:hover img{ transform:scale(1.05) }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  UNTERSEITEN                                                             ║
   ║  Alles ab hier kam mit den Unterseiten dazu. Die Startseite benutzt      ║
   ║  davon nur das Themenregal (die frühere Wissenslandkarte).              ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ------------------------------------------------------------- Seitenkopf
   Auf Seiten ohne Vollbild-Hero liegt die feste Kopfleiste über dem Inhalt.
   Sie ist `position:fixed` und nimmt deshalb keinen Platz ein — der Abstand
   muss von Hand kommen, sonst verschwindet die erste Zeile darunter. */
body.ohne-hero{ padding-top:var(--kopf-h) }

/* Der Seitenkopf füllt den Bildschirm, wie der Hero der Startseite (Ansage vom
   26.08.2026: „die header alle bis zum unteren Bildschirmrand"). Vorher stand
   hier eine inhaltsgetriebene Höhe, bei Bildköpfen gedeckelt auf 52 vh — der
   Kopf endete also mitten im Bild und darunter begann sofort der Text.

   `svh` statt `vh`: Auf dem Telefon meint `vh` die Höhe OHNE eingeblendete
   Browserleisten, der Kopf ragt damit beim Laden unter den unteren Rand.
   `min-height` und nicht `height`: Ein langer Vorspann darf den Kopf wachsen
   lassen, statt abgeschnitten zu werden.

   Ausgenommen sind die schmalen Köpfe der Rechtstexte (siehe unten): Dort gibt
   es kein Bild, und eine bildschirmfüllende Navyfläche über drei Zeilen Text
   wäre eine Ansage ohne Inhalt. */
.seitenkopf{
  background:var(--navy); color:var(--tinte-hell);
  padding-block:clamp(2.5rem,5.5vw,5rem) clamp(2.75rem,6vw,5.5rem);
  position:relative; overflow:hidden;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
}
/* Ohne diese Zeile schneidet der Kopf auf flachen Fenstern seinen eigenen
   Inhalt ab (26.08.2026 auf /karriere/ gemeldet: „Schaltflächen sind nicht ganz
   sichtbar"). Grund: Der Inhalt ist ein Flex-Item und schrumpft von sich aus,
   sobald er höher wird als der Container; was übersteht, kappt das
   `overflow:hidden`, das die Bildköpfe brauchen. `flex:none` nimmt ihm das
   Schrumpfen, und der Kopf wächst stattdessen über die Fensterhöhe hinaus.
   Bei 1440 × 620 px gemessen: vorher 620 px Kopf mit abgeschnittenen Knöpfen,
   danach 754 px und alles sichtbar. */
/* `width:100%` seit dem 21.09.2026: `.hoch` trägt `margin-inline:auto`, und ein
   Flex-Item mit automatischen Rändern auf der Querachse streckt sich NICHT — es
   schrumpft auf seine Inhaltsbreite und wird zentriert. Solange in jedem Kopf
   Fließtext und Knöpfe standen, fiel das nicht auf: Der Inhalt füllte die Breite
   ohnehin aus. Auf /anwälte/, das seither nur noch Brotkrumen, Kicker und
   Überschrift trägt, rutschte der ganze Block in die Mitte und die H1 brach nach
   dem ersten Wort um. Die Breite darf nicht davon abhängen, wie viel im Kopf
   steht — deshalb 100 % plus `max-width`, nicht Inhaltsbreite. */
.seitenkopf > .hoch{ flex:none; width:100% }
/* Die Goldkante am oberen Rand des Seitenkopfs ist am 25.08.2026 entfallen.
   Sie war ursprünglich ein Verlauf von transparent nach Gold und fiel kaum
   auf; als einfarbige Linie — Folge der Regel „keine Farbverläufe" — wurde
   daraus ein deutlicher Strich quer über die rechte Seitenhälfte, der über
   den Bildköpfen wie ein Fehler wirkte. Dekoration ohne Funktion, also weg. */
.seitenkopf h1{
  color:var(--weiss); max-width:16ch;
  margin:0 0 clamp(1.1rem,2.4vw,1.8rem);
  /* Dieselbe Größe wie die Überschrift im Hero der Startseite. Vorher galt hier
     die allgemeine h1-Regel — 73,6 px gegenüber 52,8 px im Hero, also war
     ausgerechnet die Unterseite lauter als die Startseite. Beide Werte sind
     absichtlich identisch notiert; ändert sich einer, gehört der andere mit
     geändert. */
  font-size:clamp(1.95rem,1.2rem + 2.7vw,3.3rem); line-height:1.1;
}
.seitenkopf .kicker{ color:var(--gold-hell) }
/* Der Vorspann bleibt eine eigene Spalte, aber breit genug, dass der Kopf auf
   einem üblichen Laptop vollständig sichtbar bleibt: 52 % der Inhaltsbreite.

   Der Wert ist gemessen, nicht geschätzt (entwurf/_messung.html, alle Seiten
   mit den längsten Vorspanntexten bei 1850 × 790 px):

     Breite   schlimmster Fall   passt in 790 px?
       40 %        815 px             nein
       46 %        815 px             nein
       52 %        761 px             ja
       58 %        761 px             ja  — bringt nichts mehr

   Ab 52 % ist der Text so knapp gesetzt, dass weitere Breite keine Zeile mehr
   spart. Der schlimmste Fall ist /familienrecht/familienrecht-fuer-unternehmer/.

   Der Selektor ist absichtlich so lang: Er muss die Regel
   `.seitenkopf--bild > .hoch > *` überstimmen, die allen direkten Kindern des
   Rahmens 64 % zuweist. */
@media (min-width:900px){
  .seitenkopf .hoch > .seitenkopf__antwort{ max-width:52% }
}
.seitenkopf__antwort{
  /* Auf schmalen Fenstern volle Breite — ein Drittel davon wäre eine Spalte
     mit vier Wörtern je Zeile. Die Begrenzung greift erst ab 900 px, siehe
     unten. */
  max-width:100%;
  font-size:clamp(.88rem,.84rem + .22vw,1rem); line-height:1.7;
}
.seitenkopf__antwort a{ color:var(--gold-hell) }
.seitenkopf__antwort p + p{ margin-top:.9em }
.seitenkopf__knoepfe{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:clamp(1.6rem,3vw,2.4rem);
}

/* --------------------------------------------------- Seitenkopf mit Bild
   Das Kopfbild läuft über die volle Breite, der Text liegt darüber — dasselbe
   Muster wie der Hero der Startseite, damit Start- und Fachseiten zusammen
   gehören.

   Die Abdunkelung ist kräftiger als auf der Startseite: Dort steht ein Absatz
   über dem Bild, hier stehen zwei plus Brotkrumen, Kicker und zwei Knöpfe. Der
   Verlauf läuft von links, wo der Text steht, und lässt die rechte Bildhälfte
   frei — deshalb gehört das Motiv rechts ruhig und links dunkel.

   Das Bild liegt absolut und bestimmt die Kopfhöhe nicht: Der Kopf ist so hoch
   wie sein Text, mindestens aber `min-height`. Sonst gäbe das Seitenverhältnis
   des Fotos die Höhe vor und jede Fachseite sähe anders aus. */
.seitenkopf--bild{
  position:relative; overflow:hidden;
  /* Höhe und Ausrichtung kommen seit dem 26.08.2026 von `.seitenkopf` selbst. */
  display:flex; flex-direction:column; justify-content:center;
  /* Die Leiste liegt transparent darüber und nimmt keinen Platz mehr weg
     (`body.ohne-hero` entfällt hier). Ihre Höhe kommt deshalb ZUSÄTZLICH zum
     eigenen Innenabstand — mit `padding-top:var(--kopf-h)` allein wäre der
     obere Wert aus `padding-block` überschrieben worden und die Brotkrumen
     klebten unter dem Logo. Das Bild läuft darunter durch; genau das ist der
     gewünschte Effekt. */
  padding-top:calc(var(--kopf-h) + clamp(2.5rem,5.5vw,5rem));
}
.seitenkopf--bild > .hoch{ position:relative; z-index:2 }
.seitenkopf--bild > .hoch > *{ max-width:min(64%,760px) }

.seitenkopf__bild{ position:absolute; inset:0; margin:0; z-index:0 }
.seitenkopf__bild img{ width:100%; height:100%; object-fit:cover; object-position:center }
.seitenkopf__bild::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* Gleichmäßig, nicht verlaufend — siehe die Begründung beim Hero. Dasselbe
     Maß, damit Start- und Fachseiten gleich tief liegen. */
  background:rgba(20,29,36,.68);
}
/* Auf schmalen Fenstern steht der Text über der ganzen Bildbreite und deckt
   mehr Bildfläche ab — deshalb dort etwas tiefer. */
@media (max-width:899px){
  .seitenkopf--bild > .hoch > *{ max-width:none }
  .seitenkopf__bild::after{ background:rgba(20,29,36,.74) }
}

/* Rechtstexte brauchen keinen Vorspann und keine Knöpfe — nur eine Zeile Luft. */
/* Die schmalen Köpfe der Rechtstexte bleiben von der vollen Fensterhöhe
   ausgenommen (siehe `.seitenkopf`): kein Bild, drei Zeilen Text, und der
   Leser will dort zur Sache, nicht zu einer Bühne. */
.seitenkopf--schmal{
  padding-block:clamp(2rem,4vw,3.4rem) clamp(2.25rem,4.5vw,3.8rem);
  min-height:0;
}
.seitenkopf--schmal h1{ margin-bottom:0 }

/* ══════════════════════════════════════════════════════════════════════════
   BAUSTEINE FÜR DIE FACHTIEFE (25.08.2026)
   Situationen, Statement, Fehler, Checkliste, Bildstellen. Sie erzeugen den
   Rhythmus einer Fachseite: Nach jedem längeren Textblock kommt eine Fläche
   mit anderer Anmutung, damit das Scrollen nicht zur Textwüste wird.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------- Lagen
   Reale Frage links, Antwort rechts. Zweispaltig ab 860 px — die Frage bleibt
   dadurch als Anker stehen, während die Antwort den Platz bekommt, den sie
   braucht. Bewusst ohne Kasten: Die Linie oben genügt als Gliederung, ein
   Rahmen um jede Frage würde die Seite in Kacheln zerlegen. */
.lagen{ display:grid; gap:0 }
.lage{
  display:grid; gap:.5rem 3rem; grid-template-columns:1fr;
  padding:clamp(1.5rem,3vw,2.4rem) 0;
  border-top:1px solid var(--linie-kontext);
}
.lage:last-child{ border-bottom:1px solid var(--linie-kontext) }
@media (min-width:860px){
  .lage{ grid-template-columns:minmax(0,11fr) minmax(0,14fr) }
}
/* Die linke Spalte trägt Nummer und Frage. Ohne die Nummer stand dort bei
   langen Antworten eine leere Fläche ohne Funktion — mit ihr wird die Reihe
   zählbar und der Blick findet den Anfang jeder Lage. Sie klebt auf breiten
   Fenstern mit, solange die Antwort läuft. */
.lage__kopf{ align-self:start }
@media (min-width:860px){
  .lage__kopf{ position:sticky; top:calc(var(--kopf-h) + 1.5rem) }
}
.lage__nr{
  display:block; margin-bottom:.6rem;
  font-family:var(--f-display); font-size:.95rem; letter-spacing:.04em;
  color:var(--gold-text);
}
.lage__von{ color:var(--leise) }
.lage__frage{
  margin:0; font-family:var(--f-display);
  font-size:clamp(1.08rem,1rem + .45vw,1.35rem); line-height:1.3;
  letter-spacing:-.006em; color:var(--navy);
}
.lage__antwort{ font-size:clamp(.95rem,.92rem + .12vw,1.02rem); line-height:1.7 }
.lage__antwort p{ margin:0 0 .7em }
.lage__antwort p:last-child{ margin-bottom:0 }
/* Der erste Satz ist die Antwort und trägt allein — er wird hervorgehoben,
   damit das auch beim Überfliegen sichtbar ist. */
.lage__antwort > p:first-child{ color:var(--tinte); font-weight:500 }
.lage__antwort > p:first-child + p{ color:var(--leise) }
.lage__antwort > p ~ p{ color:var(--leise) }
.abschnitt--navy .lage__frage{ color:var(--weiss) }
.abschnitt--navy .lage__antwort > p:first-child{ color:var(--tinte-hell) }

/* ------------------------------------------------------------ Statement
   Eine Aussage über die volle Breite auf Navy. Kein Zitatzeichen, keine Box —
   die Größe ist die Betonung. */
.statement{
  background:var(--navy); color:var(--weiss);
  padding-block:clamp(3.5rem,8vw,7rem);
  --gold-text: var(--gold-hell);
  --leise: #89969f;
  --linie-kontext: rgba(255,255,255,.20);
}
.statement__text{
  margin:0; max-width:20ch;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.8rem,1.2rem + 3.4vw,3.6rem); line-height:1.14;
  letter-spacing:-.022em;
}
.statement__text em{ font-style:normal; color:var(--gold-hell) }
.statement__quelle{
  margin:clamp(1.4rem,3vw,2.2rem) 0 0; max-width:44ch;
  font-size:.92rem; line-height:1.7; color:var(--leise);
}

/* ---------------------------------------------------------------- Fehler
   Die Nummer trägt den Akzent, der Text bleibt schwarz auf Papier. */
.fehler{
  list-style:none; margin:0; padding:0; counter-reset:fehler;
  display:grid; gap:clamp(1.5rem,3vw,2.4rem); grid-template-columns:1fr;
}
@media (min-width:760px){ .fehler{ grid-template-columns:repeat(2,1fr) } }
.fehler__punkt{ counter-increment:fehler; position:relative; padding-top:1.1rem }
.fehler__punkt::before{
  content:counter(fehler, decimal-leading-zero);
  display:block; font-family:var(--f-display); font-size:1.35rem;
  color:var(--gold-text); margin-bottom:.5rem;
}
.fehler__punkt::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--linie-kontext);
}
.fehler__punkt h3{
  margin:0 0 .45rem; font-family:var(--f-display);
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem); line-height:1.3; color:var(--navy);
}
.fehler__punkt p{ margin:0; font-size:.94rem; line-height:1.65; color:var(--leise) }
.abschnitt--navy .fehler__punkt h3{ color:var(--weiss) }

/* ----------------------------------------------------------- Checkliste
   Der Haken ist eine Linie, kein Icon-Font und keine Grafik. */
.checkliste{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem; grid-template-columns:1fr;
  font-size:.96rem; line-height:1.6;
}
@media (min-width:760px){ .checkliste{ grid-template-columns:repeat(2,1fr); gap:.75rem 2.5rem } }
.checkliste li{ position:relative; padding-left:1.75rem }
.checkliste li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:.65rem; height:.35rem;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}

/* -------------------------------------------------------------- Bildstelle
   Ein Bild mitten im Layout. Die Fläche entsteht über aspect-ratio, damit sie
   den Raum schon vor dem Laden hält. Die Platzhalter-Fassung dieser Fläche ist
   am 25.08.2026 entfernt worden. */
.bildstelle{
  margin:0; overflow:hidden; background:var(--papier-2);
}
.bildstelle img{ width:100%; height:100%; object-fit:cover; display:block }
/* Volle Breite, aus dem Inhaltsraster ausbrechend. */
.bildstelle--breit{ width:100vw; margin-inline:calc(50% - 50vw) }
/* Ausschnitt am oberen Bildrand ausrichten statt mittig. Nötig, wenn oben im
   Motiv etwas Lesbares steht: Bei `gesetze` auf /kanzlei/ schnitt der mittige
   16/9-Ausschnitt das Wort „KLARHEIT." im gerahmten Druck in der Mitte durch. */
.bildstelle--oben img{ object-position:50% 0 }

/* ------------------------------------------------- Ausgeschriebenes Profil
   Ein Abschnitt je Anwältin auf /anwaelte/ (26.08.2026): großes Porträt auf
   der einen, Text auf der anderen Seite, im Wechsel. Vorher standen dort vier
   kleine Bilder nebeneinander und das Profil hinter einem Klick — die Seite
   war 3.159 px hoch und die Personen darauf das kleinste Element.

   Das Bild klebt auf breiten Fenstern mit, solange der Text daneben läuft.
   Ohne das steht neben einem langen Profiltext eine leere Fläche. */
.anwaeltin{
  display:grid; gap:clamp(1.75rem,3.5vw,3.25rem);
  grid-template-columns:minmax(0,1fr); align-items:start;
}
@media (min-width:880px){
  .anwaeltin{ grid-template-columns:minmax(0,5fr) minmax(0,6fr) }
  .anwaeltin--gedreht .anwaeltin__bild{ order:2 }
  /* Gedreht steht das Bild rechts. Die Spalten drehen mit, sonst läge es in der
     breiteren Spalte und wäre größer als die Bilder links (18.09.2026). */
  .anwaeltin--gedreht{ grid-template-columns:minmax(0,6fr) minmax(0,5fr) }
  .anwaeltin__bild{ position:sticky; top:calc(var(--kopf-h) + 2rem) }
}
/* Hochformat statt quadratisch: Die Textspalte ist regelmäßig länger als ein
   Quadrat, darunter stand sonst eine leere Fläche. Die Quellen sind quadratisch,
   4/5 beschneidet also links und rechts — nicht oben, ein Kopf wird nie
   angeschnitten. */
.anwaeltin__bild{
  margin:0; overflow:hidden; background:var(--papier-2); aspect-ratio:4/5;
}
.anwaeltin__bild img{ width:100%; height:100%; object-fit:cover; display:block }
/* Die Zeile am Bild („Bild folgt in Kürze“, „KI-generiertes Bild, Foto folgt“)
   liegt unten auf dem Bild, ohne eigene Fläche und klein (Michel, 18.09.2026:
   „ohne Hintergrund-Banner, dann fällt es nicht so auf“). Vorher stand sie
   unter dem Bild und wurde vom 4/5-Rahmen abgeschnitten. */
@media (max-width:879.98px){ .anwaeltin__bild{ position:relative } }
.anwaeltin__bild > figcaption,
/* `.person__bild .person__ki` statt nur `.person__ki`: Die ältere Regel
   `.person__bild span` (Platzhaltertext) ist stärker und färbte die Kennzeichnung
   grau. So stand sie seit dem 18.09. in der Porträtreihe grau auf dem Foto. */
.portraet__ki, .person__ki, .person__bild .person__ki{
  /* Seit 19.09.2026 lesbar (Audit, von Michel beauftragt): Art. 50 Abs. 4, 5 KI-VO
     verlangt die Offenlegung „in klarer und eindeutiger Weise“. Die Fassung vom
     18.09. (0,6 rem, 85 % Weiß, ohne Grund) war auf hellen Bildstellen nicht zu
     lesen. Jetzt volle Deckkraft auf dunklem Grund, Kontrast über 12:1. */
  position:absolute; left:.6rem; bottom:.6rem; margin:0; padding:.22rem .5rem;
  font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:rgba(22,30,40,.78); pointer-events:none;
}
/* Der Platzhalterhinweis steht ohne Kasten auf der Fläche (Michel, 21.09.2026:
   „den Hinweis Bilder folgen ohne Hintergrund"). Der dunkle Grund der Regel
   darüber bleibt der KI-Kennzeichnung vorbehalten — die verlangt Art. 50 Abs. 4
   KI-VO „klar und eindeutig", und sie liegt auf einem Foto, dessen Helligkeit
   niemand kennt. Der Platzhalter dagegen ist immer heller Sand: --tinte-leise
   darauf misst 4,86:1 gegen --papier-2 und 5,35:1 gegen --papier, beides über
   den 4,5:1 der WCAG-Stufe AA (gerechnet am 21.09.2026). */
.anwaeltin__bild > figcaption.anwaeltin__ab--platzhalter{
  color:var(--tinte-leise); background:none; padding:0;
}

/* Eine dünne Linie um jede Fläche, in der noch kein Foto steht (Michel,
   21.09.2026). Ohne sie ist der Platzhalter ein leerer Fleck; mit ihr ist er
   ein bewusst gelassener Rahmen. Dieselbe Linienfarbe wie überall sonst, und
   dieselbe, die `.person__bild` in der Porträtreihe ohnehin schon trägt.
   Eine gemeinsame Klasse statt dreier Varianten: Die drei Flächen heißen
   verschieden (`anwaeltin__bild`, `portraet__bild`, `person__bild`), die Regel
   für sie ist aber dieselbe und soll es bleiben. */
.ohne-foto{ border:1px solid var(--linie) }
.portraet__bild{ position:relative }
.anwaeltin__name{
  margin:.35rem 0 0;
  font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem); line-height:1.1;
  letter-spacing:-.02em;
}
.anwaeltin__ab{
  margin:.7rem 0 0;
  font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-text);
}
.anwaeltin .fliesstext{ margin-top:clamp(1.25rem,2.4vw,1.9rem); max-width:none }
.anwaeltin__ueber{
  margin:clamp(1.75rem,3vw,2.5rem) 0 1rem; padding-top:1.25rem;
  border-top:1px solid var(--linie);
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy);
}
/* Neben dem Text ist die Spalte zu schmal für das zweispaltige Grundmaß der
   Checkliste — hier bleibt sie einspaltig, bis wirklich Platz da ist. */
.checkliste--eng{ grid-template-columns:1fr }
@media (min-width:1180px){ .checkliste--eng{ grid-template-columns:repeat(2,1fr) } }
.anwaeltin__mail{ margin:clamp(1.25rem,2.4vw,1.75rem) 0 0; font-size:.95rem }
/* Werdegang: Zeitraum links, Station rechts; schmal untereinander. */
.werdegang{ margin:0; display:grid; gap:.7rem }
.werdegang > div{ display:grid; gap:.1rem .9rem; grid-template-columns:minmax(0,1fr) }
@media (min-width:560px){ .werdegang > div{ grid-template-columns:11.5rem minmax(0,1fr) } }
.werdegang dt{ font-size:.8rem; font-weight:600; color:var(--gold-text); font-variant-numeric:tabular-nums; padding-top:.15rem }
.werdegang dd{ margin:0; font-size:.95rem; line-height:1.5 }

/* ------------------------------------------------------------- Porträt
   Großansicht einer Anwältin über der Reihe: Bild links, Angaben rechts.

   Ohne JavaScript stehen alle vier Blätter untereinander — dann gibt es keine
   Auswahl, aber auch keine verlorenen Inhalte; Einzelseiten existieren seit dem
   25.08.2026 nicht mehr. Erst das Skript setzt `ist-waehlbar` an den Rahmen,
   verbirgt die Blätter und zeigt das angeklickte. */
.portraet__blatt{
  display:grid; gap:clamp(1.5rem,3vw,2.75rem); grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .portraet__blatt{ grid-template-columns:minmax(0,32fr) minmax(0,45fr); align-items:stretch }
}
.portraet__blatt + .portraet__blatt{ margin-top:clamp(2.5rem,5vw,4rem) }

/* Mit Skript: alle Blätter im selben Rasterfeld, sichtbar ist das gewählte. */
.portraet.ist-waehlbar{ display:grid }
.portraet.ist-waehlbar .portraet__blatt{
  grid-area:1 / 1; margin-top:0;
  opacity:0; visibility:hidden; pointer-events:none;
}
.portraet.ist-waehlbar .portraet__blatt[data-aktiv]{
  opacity:1; visibility:visible; pointer-events:auto;
}
/* Solange niemand gewählt ist, nimmt der Rahmen keinen Platz ein. */
.portraet.ist-waehlbar:not(.ist-offen){ display:none }
.portraet.ist-waehlbar.ist-offen{ margin-bottom:clamp(2.5rem,5vw,4rem) }

/* Beim Öffnen wandert der Fokus auf das Blatt, damit Tastatur und Vorleser
   dort weiterlesen. Ein Rahmen um den ganzen Block wäre dabei nur Optik ohne
   Nutzen — die Bewegung zeigt bereits, wohin es gegangen ist. */
.portraet__blatt:focus{ outline:none }

/* Der Auftritt: Der Bildrahmen fliegt von der Kachel heran (das rechnet das
   Skript), das Bild darin zieht dabei leicht auf, und die Zeilen rechts kommen
   nacheinander von unten nach. Zusammen ergibt das eine Bewegung, die man
   verfolgen kann, statt eines harten Umschaltens. */
@media (prefers-reduced-motion:no-preference){
  @keyframes portraet-heran{
    from{ opacity:0; transform:translateY(20px) }
    to{ opacity:1; transform:none }
  }
  @keyframes portraet-zug{
    from{ transform:scale(1.09) }
    to{ transform:none }
  }
  .portraet__blatt[data-aktiv] .portraet__bild img{
    animation:portraet-zug 1.5s cubic-bezier(.16,.84,.3,1) both;
  }
  .portraet__blatt[data-aktiv] .portraet__text > *{
    animation:portraet-heran .72s cubic-bezier(.16,.84,.3,1) both;
  }
  /* Namenszeile zuerst, dann Rolle, Text, Überschrift, Balken, Themen. */
  .portraet__blatt[data-aktiv] .portraet__text > *:nth-child(1){ animation-delay:.14s }
  .portraet__blatt[data-aktiv] .portraet__text > *:nth-child(2){ animation-delay:.20s }
  .portraet__blatt[data-aktiv] .portraet__text > *:nth-child(3){ animation-delay:.27s }
  .portraet__blatt[data-aktiv] .portraet__text > *:nth-child(4){ animation-delay:.34s }
  .portraet__blatt[data-aktiv] .portraet__text > *:nth-child(5){ animation-delay:.41s }
  .portraet__blatt[data-aktiv] .portraet__text > *:nth-child(6){ animation-delay:.48s }
  .portraet__blatt[data-aktiv] .portraet__text > *:nth-child(n+7){ animation-delay:.55s }
}
.portraet__bild{ margin:0; overflow:hidden; background:var(--papier-2) }
.portraet__bild img{ width:100%; height:auto; display:block; aspect-ratio:1; object-fit:cover; object-position:50% 25% }
/* Das Bild reicht bis zur Unterkante des Textes daneben. Beschnitten wird dabei
   unten, nicht am Kopf: `object-position` hält das Gesicht im oberen Drittel.
   Diese Regel MUSS nach der Zeile darüber stehen — sonst gewinnt `height:auto`
   bei gleicher Spezifität. */
@media (min-width:900px){
  .portraet__bild{ height:100% }
  .portraet__bild img{ height:100%; object-fit:cover; object-position:50% 18% }
}
.portraet__name{
  margin:0; font-family:var(--f-display);
  font-size:clamp(1.5rem,1.25rem + 1vw,2.1rem); line-height:1.15;
  letter-spacing:-.008em; color:var(--navy);
}
.portraet__rolle{ margin:.4rem 0 0; font-size:.92rem; color:var(--tinte-leise) }
.portraet__ab{ display:block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text) }
.portraet__profil{ margin:1.1rem 0 0; font-size:.95rem; line-height:1.7; color:var(--tinte) }
.portraet__mail{ margin:1rem 0 0; font-size:.92rem }
.portraet__mail a{
  color:var(--gold-text); font-weight:600; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease);
}
.portraet__mail a:hover{ border-bottom-color:var(--gold) }
.portraet__ueber{
  margin:clamp(1.3rem,2.4vw,1.8rem) 0 .7rem; font-family:var(--f-text);
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-text);
}
.portraet__schwer,.portraet__themen{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.45rem 1.5rem;
}
@media (min-width:620px){ .portraet__schwer,.portraet__themen{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
/* Derselbe Aufzählungspunkt wie im Themenregal und im Menü. */
.portraet__schwer li,.portraet__themen li{
  position:relative; padding-left:1rem; font-size:.95rem; color:var(--tinte);
}
.portraet__schwer li::before,.portraet__themen li::before{
  content:""; position:absolute; left:.05rem; top:.5em;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
}
.portraet__themen a{ color:var(--tinte); text-decoration:none; transition:color .2s var(--ease) }
.portraet__themen a:hover{ color:var(--gold-text) }

/* ------------------------------------------------------- Schwerpunkte
   Je Schwerpunkt eine Zeile: Name links, Wert rechts, darunter die Bahn. Die
   Balken laufen nacheinander auf, sobald das Blatt offen ist. Bewegt wird
   `transform`, nicht `width` — das kostet den Browser kein neues Layout.

   Senkrechte Säulen standen hier am 25.08.2026 kurz und sind wieder raus. */
.saeulen{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:1.05rem }
.saeule{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline;
  gap:.3rem .8rem;
}
.saeule__name{
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy);
}
.saeule__wert{ font-size:.72rem; letter-spacing:.06em; color:var(--gold-text) }
.saeule__bahn{
  grid-column:1 / -1; height:2px; background:var(--linie); overflow:hidden;
}
.saeule__koerper{
  display:block; width:100%; height:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
}
/* Aufbau als Animation, nicht als Übergang: Ein Element, das eben noch
   `visibility:hidden` war, überspringt jeden Übergang — der Browser übernimmt
   den Endwert sofort. Genau daran sind die Balken beim ersten Öffnen
   vorbeigelaufen. Eine Animation startet dagegen zuverlässig in dem Moment, in
   dem das Blatt sichtbar wird; `backwards` hält den Balken bis zu seinem
   Einsatz auf null, danach gilt wieder der Wert aus der Regel. */
@keyframes balken-auf{ from{ transform:scaleX(0) } }
.portraet__blatt[data-aktiv] .saeule__koerper{ transform:scaleX(var(--anteil,1)) }
.portraet:not(.ist-waehlbar) .saeule__koerper{ transform:scaleX(var(--anteil,1)) }
@media (prefers-reduced-motion:no-preference){
  .portraet.ist-waehlbar .portraet__blatt[data-aktiv] .saeule__koerper{
    animation:balken-auf .8s cubic-bezier(.16,.84,.3,1) calc(var(--i) * .13s + .25s) backwards;
  }
}

/* Die gewählte Karte verschwindet aus der Reihe — sie steht ja oben groß. Mit
   ihr fällt eine Spalte weg, damit keine Lücke bleibt. */
.person.ist-gewaehlt{ display:none }

/* Porträtreihe als Karussell (18.09.2026): drei nebeneinander, darunter zwei,
   auf dem Telefon eine mit angeschnittener nächster. Die Spur ist Flex statt
   Raster; die Rasterregeln für .team--gross greifen deshalb nicht mehr. */
.team-schiene{ --fuge:clamp(1.5rem,3vw,2.5rem); container-type:inline-size }
.team--schiene{
  display:flex; gap:var(--fuge); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-block:1px;
}
.team--schiene::-webkit-scrollbar{ display:none }
.team--schiene .person{ flex:0 0 calc((100% - 2 * var(--fuge)) / 3); scroll-snap-align:start }
.team--schiene .person__name{ font-size:clamp(1.15rem,.9rem + .9vw,1.5rem); margin-top:.2rem }
.team--schiene .person__rolle{ font-size:.9rem }
/* Pfeile auf halber Bildhöhe; das Bild ist quadratisch, also halbe Kartenbreite. */
.team-schiene .beitraege__pfeil{ top:calc((100cqw - 2 * var(--fuge)) / 6) }
@media (max-width:1000px){
  .team--schiene .person{ flex-basis:calc((100% - var(--fuge)) / 2) }
  .team-schiene .beitraege__pfeil{ top:calc((100cqw - var(--fuge)) / 4) }
}
@media (max-width:700px){
  .team--schiene .person{ flex-basis:80% }
  .team-schiene .beitraege__pfeil{ top:40cqw }
}
@media (min-width:820px){
  .team--gross.ist-verkuerzt{ grid-template-columns:repeat(4,1fr) }
}

/* ----------------------------------------------------------- Kurzmeldungen
   Selbst geschriebene Zusammenfassungen fremder Meldungen. Bewusst schlichter
   als die Ratgeberkacheln: Sie sind Hinweise, keine eigenen Beiträge. */
/* `auto-fit` statt fester Spaltenzahl: Steht nur eine Meldung da, füllt sie die
   Breite, statt neben einer leeren Zelle zu stehen. */
/* Die Trennlinien gehören den Kacheln, nicht dem Container (26.08.2026).
   Vorher lag eine Fläche in Linienfarbe unter dem Raster, und die 1px-Lücken
   ließen sie als Linien durchscheinen. Das ist ein verbreiteter Trick und hier
   ein Fehler gewesen: Sichtbar wurde die Fläche überall dort, wo gerade keine
   Kachel lag — während der Einblendung, in einer leeren Rasterzelle, unter
   einer kürzeren Kachel. Mit `outline` auf der Kachel selbst kann das nicht
   mehr passieren: Wo keine Kachel ist, ist auch keine Linie. */
.meldungen{
  display:grid; gap:1px; background:none; border:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
}
.meldung{
  background:var(--papier); padding:clamp(1.3rem,2.4vw,1.9rem);
  outline:1px solid var(--linie); outline-offset:0;
}
.meldung__kopf{
  display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.meldung__rubrik{ color:var(--gold-text); font-weight:700 }
.meldung__datum{ color:var(--leise) }
.meldung__titel{
  margin:.6rem 0 .5rem; font-family:var(--f-display);
  font-size:clamp(1.1rem,1rem + .4vw,1.3rem); line-height:1.25; color:var(--navy);
}
.meldung__text{ margin:0; font-size:.95rem; line-height:1.7; color:var(--tinte) }

/* ---------------------------------------------------- Aktuelles: Archiv
   Dritter Anlauf (26.08.2026). Kachelraster und flache Liste hat Michel beide
   verworfen: unübersichtlich, sobald wöchentlich ein Beitrag dazukommt, und
   optisch langweilig. Deshalb kein drittes Sortiermuster derselben Kacheln,
   sondern der Aufbau redaktioneller Archive: ein Aufmacher mit Gewicht, dann
   ein nach Monaten geordnetes Verzeichnis.

   Ohne Bildmaterial trägt die Gestaltung allein die Typografie. Das stärkste
   Element ist deshalb die Ausgabenmarke des Aufmachers: „KW 35" in großer
   Displayschrift, halb angeschnitten, in Gold. Sie ist Gestaltung und
   Information zugleich. */
.aufmacher{
  background:var(--papier); border-top:3px solid var(--gold);
  padding:clamp(2.4rem,5vw,4.5rem) 0 clamp(2.4rem,4.5vw,4rem);
}
/* Der Archivabschnitt schließt direkt an den Aufmacher an; ohne diese Kürzung
   summieren sich beide Innenabstände zu einem leeren Streifen.

   Die Haarlinie trennt die beiden Bereiche (Wunsch 26.08.2026) und läuft dabei
   nicht über die ganze Fensterbreite, sondern von Textkante zu Textkante. Sie
   sitzt deshalb auf einem eigenen Element innerhalb des Inhaltsrahmens: `.hoch`
   trägt seitlichen Innenabstand, ein border-top darauf wäre breiter als der
   Text. */
.abschnitt--archiv{ padding-top:0 }
.abschnitt--archiv > .hoch::before{
  content:""; display:block; height:1px; background:var(--linie);
  margin-bottom:clamp(2rem,4vw,3.4rem);
}
.aufmacher__gitter{ display:grid; gap:clamp(1.2rem,3vw,2.8rem) }
.aufmacher__marke{
  display:flex; flex-wrap:wrap; gap:.9rem; margin:0 0 .8rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.aufmacher__rubrik{ color:var(--gold-text); font-weight:700 }
.aufmacher__datum, .aufmacher__lesezeit{ color:var(--leise) }
.aufmacher__titel{
  margin:0 0 .9rem; font-family:var(--f-display); color:var(--navy);
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem); line-height:1.1; max-width:20ch;
}
.aufmacher__titel a{ color:inherit; text-decoration:none }
.aufmacher__titel a:hover{ color:var(--gold-text) }
.aufmacher__anriss{
  margin:0 0 1.6rem; max-width:58ch; color:var(--tinte);
  font-size:clamp(1rem,.97rem + .3vw,1.15rem); line-height:1.7;
}
.aufmacher__knopf{ margin:0 }
/* Der zweite aktuelle Beitrag als Seitenspalte (Wunsch vom 26.08.2026:
   „oben nur die beiden aktuellen"). */
.aufmacher__auch{
  margin:0 0 .8rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); font-weight:700;
}
.aufmacher__zweittitel{
  margin:0 0 .7rem; font-family:var(--f-display); color:var(--navy);
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem); line-height:1.25;
}
.aufmacher__zweittitel a{ color:inherit; text-decoration:none }
.aufmacher__zweittitel a:hover{ color:var(--gold-text) }
.aufmacher__zweit .aufmacher__anriss{ font-size:.92rem; margin-bottom:1rem }
.aufmacher__mehr{ margin:0 }
/* Die Redakteurin: kleines rundes Bild mit Namen (26.08.2026). Ein Baustein,
   zwei Größen — auf /aktuelles/ über der Seitenspalte mit Rolle und Aufgabe,
   auf der Startseite als schmale Zeile neben dem Verweis auf alle Meldungen. */
.redaktion{ display:flex; align-items:center; gap:.85rem }
.redaktion--block{
  padding-bottom:1.3rem; margin-bottom:1.4rem; border-bottom:1px solid var(--linie);
}
.redaktion__bild{ flex:0 0 auto; width:clamp(2.9rem,5vw,3.6rem) }
.redaktion--block .redaktion__bild{ width:clamp(3.4rem,6vw,4.4rem) }
.redaktion__bild img{
  display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; object-position:50% 22%; border-radius:50%;
}
.redaktion__text{ margin:0; display:grid; gap:.05rem; min-width:0 }
.redaktion__marke{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text);
  font-weight:700;
}
.redaktion__name{
  font-family:var(--f-display); color:var(--navy);
  font-size:clamp(.95rem,.92rem + .15vw,1.05rem); line-height:1.25;
}
.redaktion__rolle{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--leise);
  margin-top:.1rem;
}
.redaktion__satz{ font-size:.82rem; line-height:1.5; color:var(--leise); margin-top:.3rem }

/* Fußzeile des Meldungsblocks auf der Startseite: Redakteurin links, Verweis
   rechts, auf schmalen Schirmen untereinander. */
.meldungen__fuss{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem; margin-top:clamp(1.6rem,3vw,2.2rem);
}
.meldungen__fuss p{ margin:0 }
@media (min-width:1040px){
  .aufmacher__haupt{ position:relative }
  }
@media (min-width:900px){
  .aufmacher__gitter{
    grid-template-columns:1fr minmax(15rem,21rem);
    gap:clamp(2rem,4vw,4rem); align-items:start;
  }
  .aufmacher__zweit{
    border-left:1px solid var(--linie); padding-left:clamp(1.5rem,3vw,2.8rem);
    /* Die Spalte beginnt tiefer als der Hauptbeitrag (Wunsch 26.08.2026),
       damit sie nicht auf einer Höhe mit der Ausgabenmarke steht. */
    margin-top:clamp(1.5rem,3.5vw,3.4rem);
  }
}
@media (max-width:899px){
  .aufmacher__zweit{ border-top:1px solid var(--linie); padding-top:1.6rem }
}

/* Filterleiste: reine Adressen, kein Skript. */
.rubriken{ margin:-.6rem 0 clamp(1.8rem,3.2vw,2.6rem) }
.rubriken ul{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0 }
.rubriken a{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  padding:.42rem .85rem; border:1px solid var(--linie); background:var(--papier);
  color:var(--tinte); font-size:.82rem; line-height:1.2;
}
.rubriken a span{ color:var(--leise); font-size:.72rem }
.rubriken a:hover{ border-color:var(--gold); color:var(--navy) }
.rubriken a[aria-current]{ background:var(--navy); border-color:var(--navy); color:var(--weiss) }
.rubriken a[aria-current] span{ color:rgba(255,255,255,.6) }

/* Das Archiv: Monatsmarke links, Einträge rechts. */
.archiv__monat{ margin:0 0 clamp(2rem,4vw,3.2rem) }
/* Das Skript blendet beim Filtern mit dem `hidden`-Attribut aus. Ohne diese
   Regel verliert es gegen `display:grid` weiter unten, und leere Monatsblöcke
   blieben mit „0 Beiträge" stehen. */
.archiv [hidden]{ display:none }

.archiv__marke{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  margin:0 0 .4rem; padding-bottom:.6rem; border-bottom:1px solid var(--linie);
  font-family:var(--f-display); font-weight:400; color:var(--navy);
  font-size:clamp(1.1rem,1rem + .45vw,1.45rem);
}
.archiv__anzahl{
  font-family:var(--f-text); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leise);
}
.archiv__liste{ list-style:none; margin:0; padding:0 }
.archiv__ziel{
  display:grid; grid-template-columns:2.6rem 1fr 1.4rem; align-items:baseline;
  gap:.2rem 1rem; padding:1.05rem .8rem 1.05rem .6rem; margin:0 -.8rem 0 -.6rem;
  text-decoration:none; border-bottom:1px solid var(--linie);
  transition:background .25s var(--ease);
}
.archiv__ziel:hover{ background:var(--papier) }

.archiv__tag{
  font-family:var(--f-display); color:var(--leise);
  font-size:clamp(1rem,.95rem + .3vw,1.25rem); line-height:1.2;
}
.archiv__text{ display:block; min-width:0 }
.archiv__rubrik{
  display:block; margin-bottom:.2rem; color:var(--gold-text); font-weight:700;
  font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
}
.archiv__titel{
  display:block; font-family:var(--f-display); color:var(--navy);
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem); line-height:1.3;
}
.archiv__anriss{
  display:block; margin-top:.25rem; color:var(--leise);
  font-size:.86rem; line-height:1.55;
}
.archiv__pfeil{
  justify-self:end; color:var(--gold); opacity:0;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.archiv__ziel:hover .archiv__titel{ color:var(--gold-text) }
.archiv__ziel:hover .archiv__pfeil{ opacity:1; transform:translateX(3px) }
.archiv__ziel:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.archiv__hinweis{ margin:0 0 1.4rem; font-size:.9rem; color:var(--leise) }
@media (min-width:900px){
  /* Monatsmarke neben die Liste, sobald Platz da ist. */
  .archiv__monat{ display:grid; grid-template-columns:11rem 1fr; gap:0 clamp(1.5rem,3vw,3rem) }
  .archiv__marke{ display:block; border:0; padding:0; position:sticky; top:6.5rem }
  /* Die erste Beitragszeile soll auf Höhe von Monat und Jahr beginnen (Wunsch
     26.08.2026). Statt den Innenabstand am ersten Eintrag zu entfernen, wird
     die ganze Liste um denselben Betrag angehoben: Welcher Eintrag der erste
     sichtbare ist, hängt vom Filter ab und lässt sich in CSS nicht zuverlässig
     treffen. */
  .archiv__liste{ margin-top:-1.05rem }
  /* Der Hinweis unter dem Archiv beginnt an derselben Kante wie die Tageszahl,
     also in der zweiten Rasterspalte (Wunsch 26.08.2026). */
  .abschnitt--archiv .ratgeber__hinweis,
  .abschnitt--archiv .archiv__hinweis{ margin-left:calc(11rem + clamp(1.5rem,3vw,3rem)) }
  .archiv__anzahl{ display:block; margin-top:.3rem }
}

/* „Was das für Sie bedeutet" auf der Beitragsseite: der Teil, den kein
   Newsfeed liefert. Abgesetzt, damit er beim Überfliegen gefunden wird. */
.einordnung{
  border-left:3px solid var(--gold); padding:.2rem 0 .2rem clamp(1rem,2vw,1.6rem);
  background:var(--sand);
}
.einordnung > h2{ margin-top:0 }
.meldung__quelle{ margin:1rem 0 0; font-size:.82rem; color:var(--leise) }
.meldung__quelle-marke{ display:block; margin-bottom:.3rem }
.meldung__quelle ul{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem }
.meldung__quelle li{ position:relative; padding-left:.9rem; line-height:1.5 }
.meldung__quelle li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:4px; height:4px; border-radius:50%; background:var(--gold);
}
.meldung__quelle a{ color:var(--gold-text); font-weight:600; text-decoration:none }
.meldung__quelle a:hover{ text-decoration:underline }

/* Redaktionsformular: Feldhinweise und die Themenauswahl (26.08.2026). Die
   Ansicht liegt hinter dem Passwort und braucht keine Gestaltung, aber sie
   muss beim Schreiben helfen — deshalb die Hinweise direkt am Feld. */
.feld__hinweis{ font-weight:400; color:var(--leise); font-size:.8em }
.themenwahl{
  display:grid; gap:.35rem .9rem; margin-top:.4rem;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  max-height:14rem; overflow:auto; padding:.6rem .7rem;
  border:1px solid var(--linie); background:var(--papier);
}
.themenwahl__eintrag{
  display:flex; align-items:center; gap:.4rem; font-size:.85rem;
  font-weight:400; text-transform:none; letter-spacing:0; color:var(--tinte);
}

/* -------------------------------------------------------------- Redaktion
   Interne Ansicht, nicht Teil der Website-Gestaltung im engeren Sinn: Hier
   zählt Lesbarkeit beim Arbeiten, nicht Auftritt. */
.redaktion__kopf{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap; margin-bottom:1.5rem;
}
.redaktion__anmeldung{ max-width:22rem; margin-top:1.5rem }
.redaktion__regel{
  margin:0 0 2rem; padding:1rem 1.2rem; background:var(--papier-2);
  border-left:2px solid var(--gold); font-size:.9rem; line-height:1.65; color:var(--tinte);
}
/* Der Wochenrückblick steht über den Einzelmeldungen: Er ist der Regelfall,
   die Einzelfreigabe die Ausnahme. */
.woche{
  margin-bottom:2.5rem; padding:clamp(1.2rem,2.4vw,1.8rem);
  background:var(--papier-2); border-left:2px solid var(--gold);
}
.woche__titel{
  cursor:pointer; font-family:var(--f-display); font-size:1.15rem; color:var(--navy);
}
.woche__zahl{
  display:block; margin-top:.2rem; font-family:var(--f-text);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--leise);
}
.woche__hinweis{ margin:1.2rem 0 .8rem; font-size:.88rem; color:var(--tinte-leise) }
.woche__auswahl{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.5rem }
.woche__auswahl li{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start }
.woche__auswahl label{ font-size:.92rem; line-height:1.45; color:var(--tinte) }
.woche__rubrik{
  display:inline-block; margin-right:.4rem;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700;
}
.briefing__form{ margin:1.5rem 0 clamp(2.5rem,5vw,3.5rem) }
.briefing__form .feld--haken{ margin-bottom:1.4rem }
.redaktion__zwischen{
  margin:0 0 .5rem; font-family:var(--f-display); font-size:1.15rem; color:var(--navy);
}
.eingang{
  padding:clamp(1.2rem,2.4vw,1.8rem) 0; border-top:1px solid var(--linie);
}
.eingang--erledigt{ opacity:.62 }
.eingang__kopf{
  display:flex; gap:.9rem; align-items:baseline; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.eingang__rubrik{ color:var(--gold-text); font-weight:700 }
.eingang__datum{ color:var(--leise) }
.eingang__frei{ color:var(--navy); font-weight:700 }
.eingang__titel{
  margin:.5rem 0 .8rem; font-family:var(--f-display);
  font-size:1.2rem; line-height:1.3; color:var(--navy);
}
.eingang__vorlage{ margin-bottom:1.1rem; font-size:.9rem }
.eingang__vorlage summary{ cursor:pointer; color:var(--leise) }
.eingang__roh{
  margin:.8rem 0; padding:1rem 1.2rem; background:var(--papier-2);
  max-height:20rem; overflow:auto; font-size:.88rem; line-height:1.65; color:var(--tinte-leise);
}
.eingang__form .feld{ margin-bottom:.9rem }
.eingang__knoepfe{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap }
.eingang__zurueck{ margin-top:.7rem }
.eingang__zurueck button{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.85rem; color:var(--leise);
}
.eingang__zurueck button:hover{ color:var(--gold-text) }

/* ------------------------------------------------------------- Brotkrumen */
.krumen{ margin:0 0 clamp(1.4rem,3vw,2.2rem) }
.krumen ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.78rem; letter-spacing:.04em; color:var(--leise);
}
.krumen li + li::before{
  /* Stand auf --navy-weich (#2e3b45) und war damit auf der Navy-Fläche des
     Seitenkopfs praktisch unsichtbar — 1,3:1. Jetzt dieselbe helle Farbe wie
     die Verweise davor; die Brotkrumen stehen ausschließlich im Seitenkopf und
     damit immer auf dunklem Grund. */
  content:"›"; margin-right:.5rem; color:var(--tinte-hell);
}
.krumen a{ color:var(--tinte-hell); text-decoration:none }
.krumen a:hover{ color:var(--gold-hell) }
.krumen [aria-current]{ color:var(--leise) }

/* ----------------------------------------------------------- Fachtextseite
   Zweispaltig: links das mitlaufende Inhaltsverzeichnis, rechts der Text.
   Unter 1000 px fällt das Verzeichnis über den Text — dort ist es eine
   Sprungliste, kein Begleiter. */
.fachtext__gitter{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr }
@media (min-width:1000px){
  .fachtext__gitter{ grid-template-columns:minmax(0,15rem) minmax(0,1fr) }
}

.inhaltsverz{
  font-size:.88rem;
  border-top:2px solid var(--navy); padding-top:1.1rem;
}
@media (min-width:1000px){
  /* Der Abstand nach oben ist die Kopfhöhe plus etwas Luft, sonst klebt das
     Verzeichnis unter der Leiste fest. */
  .inhaltsverz{ position:sticky; top:calc(var(--kopf-h) + 1.5rem); align-self:start }
}
.inhaltsverz h2{
  font-family:var(--f-text); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text);
  margin:0 0 .9rem;
}
.inhaltsverz ol{ list-style:none; margin:0; padding:0; counter-reset:iv }
.inhaltsverz li{ counter-increment:iv; margin-bottom:.5rem; display:flex; gap:.6rem }
.inhaltsverz li::before{
  content:counter(iv,decimal-leading-zero);
  font-size:.7rem; color:var(--leise); flex:none; padding-top:.2em;
}
.inhaltsverz a{
  color:var(--tinte-leise); text-decoration:none; line-height:1.45;
  transition:color .2s var(--ease);
}
.inhaltsverz a:hover{ color:var(--navy) }

/* -------------------------------------------------------------- Fließtext
   Die Lesespalte. Maximal 68 Zeichen — darüber verliert das Auge beim
   Zeilenwechsel die Zeile. */
.fliesstext{ max-width:68ch }
/* Zweispaltiger Blocksatz (26.08.2026, auf /familienrecht/ im Abschnitt „Vor
   Ort"). Ein einspaltiger Fließtext ließ dort die halbe Zeile leer stehen.

   Blocksatz nur mit Silbentrennung: Ohne `hyphens` reißt der deutsche Satzbau
   im Blocksatz Löcher zwischen die Wörter, die schlimmer aussehen als der
   Flattersatz. `lang="de"` steht im <html>-Tag, sonst trennt der Browser nach
   englischen Regeln. `break-inside:avoid` hält jeden Absatz zusammen, damit
   die Spalten an Absatzgrenzen umbrechen und nicht mitten im Satz.

   Unter 820 px bleibt es einspaltig und im Flattersatz — zwei Spalten auf
   einem Telefon sind unlesbar, und Blocksatz auf 40 Zeichen Zeilenlänge
   erst recht. */
.fliesstext--zwei{ max-width:none }
.fliesstext--zwei p{ margin:0 0 1.15em }
.fliesstext--zwei p:last-child{ margin-bottom:0 }
@media (min-width:820px){
  .fliesstext--zwei{
    columns:2; column-gap:clamp(2rem,4vw,4.5rem);
    text-align:justify; hyphens:auto;
  }
  .fliesstext--zwei p{ break-inside:avoid }
}
.fliesstext > section + section{ margin-top:clamp(2.25rem,4vw,3.25rem) }
.fliesstext h2{
  font-size:clamp(1.4rem,1.2rem + .8vw,1.95rem);
  margin:0 0 .9rem; scroll-margin-top:calc(var(--kopf-h) + 1.5rem);
}
.fliesstext h3{ margin:1.75rem 0 .6rem }
.fliesstext p{ line-height:1.78; color:var(--tinte) }
.fliesstext strong{ color:var(--navy); font-weight:600 }
.fliesstext em{ color:var(--tinte-leise) }
.fliesstext a{ color:var(--gold-text); font-weight:600;
  transition:color .2s var(--ease) }
/* Beim Überfahren erscheint die Linie — im Ruhezustand bleibt sie weg. */
.fliesstext a:hover{
  color:var(--navy);
  text-decoration:underline; text-decoration-color:var(--gold);
  text-underline-offset:.2em; text-decoration-thickness:1px;
}
.fliesstext ul,.fliesstext ol{ margin:0 0 1.2em; padding-left:1.3em; line-height:1.75 }
.fliesstext li{ margin-bottom:.45em }
.fliesstext li::marker{ color:var(--gold-text) }

/* Autorenzeile: wer für den Text steht und wann er geprüft wurde. */
.autorzeile{
  margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:1.1rem;
  border-top:1px solid var(--linie);
  font-size:.86rem; line-height:1.65; color:var(--tinte-leise);
}
.autorzeile a{ color:var(--navy) }
.autorzeile__hinweis{ display:inline-block; margin-top:.35rem; font-size:.8rem; color:var(--leise) }

/* Quellenliste unter einem Ratgeberbeitrag */
.quellen{ list-style:none; margin:0; padding:0; font-size:.88rem; color:var(--tinte-leise) }
.quellen li{ padding-left:1.2em; position:relative; margin-bottom:.5em }
.quellen li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5em; height:1px; background:var(--gold);
}

/* ------------------------------------------------------------- Leistungen
   Nummerierte Liste im Duktus der Ablaufschritte, aber kompakter — sie steht
   auf Navy und trägt vier Punkte, keine drei Absätze. */
.leistungen{
  list-style:none; margin:0; padding:0; counter-reset:lst;
  display:grid; gap:1px; background:var(--navy-weich);
  border-top:1px solid var(--navy-weich); border-bottom:1px solid var(--navy-weich);
}
@media (min-width:820px){ .leistungen{ grid-template-columns:repeat(2,1fr) } }
/* Nummer links, darüber der fette Satz, darunter die Erläuterung.
   Erst war das ein Flex-Kasten, dann ein Raster mit zwei Spalten. Beides hat
   denselben Fehler: In Flex- und Rasterkästen wird jedes Element-Kind zu einem
   eigenen Item. Solange im Text nur der fette Satz stand, fiel das nicht auf.
   Sobald ein Verweis mitten im Satz steht (26.08.2026 auf /kanzlei/, „Was wir
   nicht machen"), riss er den Satz auseinander und stand als eigene Spalte
   neben der Nummer.

   Deshalb jetzt ein gewöhnlicher Textblock: Die Nummer sitzt absolut in der
   linken Einrückung, alles andere fließt normal. Damit trägt die Liste beliebig
   viele Verweise, auch die `punkte` der Fachseiten, die durch `verweise()`
   laufen. Die Maße sind dieselben wie vorher: 1,2rem Ziffernbreite plus 1rem
   Abstand. */
.leistungen li{
  counter-increment:lst; background:var(--navy);
  position:relative;
  padding:clamp(1.4rem,2.6vw,2rem) clamp(1.2rem,2.4vw,2rem);
  padding-left:calc(clamp(1.2rem,2.4vw,2rem) + 2.2rem);
  font-size:.95rem; line-height:1.65; color:var(--tinte-hell);
}
.leistungen li::before{
  content:counter(lst,decimal-leading-zero);
  position:absolute; left:clamp(1.2rem,2.4vw,2rem); top:clamp(1.4rem,2.6vw,2rem);
  font-family:var(--f-display); font-size:1.05rem; line-height:1.65;
  color:var(--gold-text); padding-top:.05em;
}
.leistungen li strong{ display:block; margin-bottom:.45rem }
/* Verweise: Gold und halbfett, nie unterstrichen — die Hausregel für Links.
   Auf hellem Grund trägt Gold-hell zu wenig Kontrast, dort das dunklere Gold. */
.leistungen a{ color:var(--gold-hell); font-weight:600 }
.leistungen--hell a{ color:var(--gold-text) }
/* Dieselbe Liste auf hellem Grund — auf /kanzlei/. */
.leistungen--hell{ background:var(--linie); border-color:var(--linie) }
.leistungen--hell li{ background:var(--papier); color:var(--tinte) }
.leistungen--hell strong{ color:var(--navy) }

/* -------------------------------------------------------- Verwandte Themen */
.verwandt{ display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie) }
@media (min-width:620px){ .verwandt{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .verwandt{ grid-template-columns:repeat(4,1fr) } }
.verwandt__kachel{
  background:var(--papier); text-decoration:none; position:relative;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  display:flex; flex-direction:column; gap:.55rem;
  transition:background .3s var(--ease);
}
.verwandt__kachel::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); transition:width .4s var(--ease);
}
.verwandt__kachel:hover{ background:var(--weiss) }
.verwandt__kachel:hover::after{ width:100% }
.verwandt__gruppe{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text);
}
.verwandt__titel{
  font-family:var(--f-display); font-size:1.12rem; line-height:1.25; color:var(--navy);
}
.verwandt__text{ font-size:.88rem; line-height:1.6; color:var(--tinte-leise) }
.verwandt__ziel{
  margin-top:auto; padding-top:.7rem;
  font-size:.78rem; font-weight:600; letter-spacing:.05em; color:var(--navy);
}

/* ------------------------------------------------------------------ Profil */
.profil{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr }
@media (min-width:900px){ .profil{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) } }
.profil__bild{ position:relative }
.profil__bild img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover }
.profil__bild::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gold);
}
.profil__schwer,.profil__themen{ list-style:none; margin:0 0 1.2em; padding:0 }
.profil__schwer li,.profil__themen li{
  padding:.55rem 0; border-bottom:1px solid var(--linie-leise); font-size:.95rem;
}
.profil__themen a{ text-decoration:none; color:var(--navy) }
.profil__themen a:hover{ color:var(--gold-text) }

/* Zuständigkeiten auf /anwaelte/ */
.zustaendig{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr }
@media (min-width:640px){ .zustaendig{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .zustaendig{ grid-template-columns:repeat(4,1fr) } }
.zustaendig__block h3{ padding-bottom:.6rem; border-bottom:2px solid var(--navy); margin-bottom:.8rem }
.zustaendig__block h3 a{ text-decoration:none }
.zustaendig__block h3 a:hover{ color:var(--gold-text) }
.zustaendig__block ul{ list-style:none; margin:0; padding:0; font-size:.9rem; color:var(--tinte-leise) }
.zustaendig__block li{ padding:.3rem 0; line-height:1.5 }

/* Porträtreihe auf /anwaelte/: etwas größer, mit Schwerpunktzeile darunter. */
/* Fünf seit 18.09.2026: vier Anwältinnen und die Kanzleimanagerin. */
@media (min-width:820px){ .team--gross{ grid-template-columns:repeat(5,1fr) } }
.person__schwer{
  display:block; margin-top:.5rem; font-size:.78rem; line-height:1.5; color:var(--leise);
}

/* ----------------------------------------------------------- Kontaktseite */
.kontakt{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr }
@media (min-width:960px){ .kontakt{ grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) } }
.kontakt__formular h2{ margin:0 0 1.5rem; scroll-margin-top:calc(var(--kopf-h) + 1.5rem) }
.kontakt__block + .kontakt__block{ margin-top:clamp(1.75rem,3vw,2.5rem) }
.kontakt__block h3{
  font-family:var(--f-text); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text);
  padding-bottom:.6rem; border-bottom:1px solid var(--linie); margin-bottom:.9rem;
}
.kontakt__block p{ font-size:.92rem; line-height:1.7; color:var(--tinte-leise) }
.kontakt__block strong{ color:var(--navy) }
/* Verweise in der Kontaktspalte. Nötig geworden, seit der Anfahrtstext in der
   Verwaltung gepflegt wird (05.09.2026): Der Editor setzt ein nacktes <a>, und
   auf dieser Website ist ein Link ohne Klasse dank `a{color:inherit}` und
   `a{text-decoration:none}` schlicht unsichtbar. Ein Verweis, den niemand als
   solchen erkennt, ist keiner — und nach WCAG 1.4.1 auch nicht zulässig.
   Derselbe Stil wie im Fließtext, damit es nicht nach einer Sonderlocke
   aussieht. `.textlink` bleibt davon unberührt: Der bringt sein eigenes
   Aussehen mit. */
.kontakt__block p a:not(.textlink){
  color:var(--gold-text); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--gold);
  text-underline-offset:.2em; text-decoration-thickness:1px;
  transition:color .2s var(--ease);
}
.kontakt__block p a:not(.textlink):hover{ color:var(--navy) }

.haken{ list-style:none; margin:0 0 1.1em; padding:0; font-size:.92rem; color:var(--tinte-leise) }
.haken li{ position:relative; padding-left:1.4em; margin-bottom:.45em; line-height:1.6 }
.haken li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.7em; height:1px; background:var(--gold);
}

/* -------------------------------------------------------------- Formular */
.feld{ margin-bottom:1.15rem }
.feld-paar{ display:grid; gap:1.15rem; grid-template-columns:1fr }
@media (min-width:560px){ .feld-paar{ grid-template-columns:1fr 1fr } }
/* Eine Postleitzahl braucht fünf Zeichen, ein Ortsname mehr. */
@media (min-width:560px){ .feld-paar--plz{ grid-template-columns:minmax(0,7rem) minmax(0,1fr) } }
.feld label{
  display:block; margin-bottom:.4rem;
  font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--navy);
}
.feld__opt{ font-weight:400; color:var(--leise) }
.feld input,.feld select,.feld textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--tinte);
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:.8rem .9rem;
  transition:border-color .2s var(--ease), outline-color .2s var(--ease);
}
.feld textarea{ resize:vertical; min-height:9rem; line-height:1.65 }

/* Auswahlfeld — das native Zeichen des Browsers passt zu keinem Entwurf und
   sieht auf jedem System anders aus. `appearance:none` schaltet es ab, den
   Pfeil zeichnet der Wrapper als zwei gedrehte Linien. Kein Icon-Font, keine
   Grafik, kein Verlauf.

   Die rechte Polsterung hält den Text vom Pfeil frei; `padding-block` gleicht
   die Höhe an die Textfelder an, die der Browser sonst niedriger setzt. */
.feld__wahl{ position:relative }
.feld__wahl select{
  appearance:none; -webkit-appearance:none;
  padding-right:2.6rem; padding-block:.8rem;
  cursor:pointer;
}
.feld__wahl::after{
  content:""; position:absolute; right:1.1rem; top:calc(50% - .18rem);
  width:.5rem; height:.5rem;
  border-right:1.5px solid var(--navy); border-bottom:1.5px solid var(--navy);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
  transition:border-color .2s var(--ease);
}
.feld__wahl:hover::after{ border-color:var(--gold-text) }
.feld__wahl:focus-within::after{ border-color:var(--gold-text) }
/* Kein Platzhalter-Grau für die erste Option: Das Feld ist freiwillig und
   trägt kein `required`, `:invalid` greift also nie. Eine Regel, die nichts
   tut, wäre nur Ballast. */
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--gold-text);
  outline:2px solid var(--gold); outline-offset:1px;
}
.feld--fehler input,.feld--fehler select,.feld--fehler textarea{ border-color:#a4302a }
/* Der Haken für die Einwilligung: Kästchen und Text nebeneinander, der Text
   umfließt das Kästchen nicht — sonst rutscht die zweite Zeile darunter. */
.feld--haken{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start }
.feld--haken input{ width:1.15rem; height:1.15rem; margin-top:.15rem; accent-color:var(--gold-text) }
.feld--haken label{
  margin:0; font-size:.85rem; font-weight:400; line-height:1.6; color:var(--tinte-leise);
}
.feld--haken a{ color:var(--navy) }
/* Hinweis an einem einzelnen Feld — kleiner und ruhiger als der Kasten über
   dem Formular. Ein vergessener Haken ist kein Fehler der Seite, sondern eine
   übersehene Zeile; er wird dort beantwortet, wo er steht. */
.feldhinweis{
  grid-column:2; margin:.45rem 0 0; font-size:.82rem; line-height:1.5; color:#a4302a;
}
/* Dieselbe Stelle, andere Nachricht: Die Bestätigung nach der Anmeldung steht
   dort, wo vorher der Hinweis zum Haken stand — in Gold statt in Rot. */
.feldhinweis--gut{ color:var(--gold-text) }

/* Die Seite nach dem Klick im Bestätigungslink: eine Aussage, groß, sonst
   nichts. Wer hier ankommt, hat sein Anliegen erledigt. */
.briefing__ergebnis{ padding-block:clamp(2rem,6vw,4.5rem) }
.briefing__ergebnis-titel{
  font-family:var(--f-display); font-weight:500; line-height:1.15; letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.4vw,3rem); margin:.2rem 0 1rem; max-width:20ch;
}
.briefing__ergebnis-text{ font-size:1.05rem; color:var(--tinte-leise); margin-bottom:2rem; max-width:44ch }
.briefing__ergebnis .knopf{ margin-right:.6rem; margin-bottom:.6rem }

/* Der Knopf, während die Anmeldung läuft: Text plus ein Kreisel. Beides
   zusammen, weil ein Kreisel allein nicht sagt, was passiert, und ein Text
   allein nicht zeigt, dass etwas passiert. Wer Bewegung abgeschaltet hat,
   bekommt den Punkt ohne Drehung. */
.knopf.laedt{ opacity:.9; cursor:progress }
.knopf.laedt::after{
  content:''; display:inline-block; width:.85em; height:.85em; margin-left:.6em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:kreisel .7s linear infinite; vertical-align:-.1em;
}
@keyframes kreisel{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
  .knopf.laedt::after{ animation:none; border-right-color:currentColor; opacity:.5 }
}
.formular__fuss{ margin-top:1.2rem; font-size:.8rem; line-height:1.6; color:var(--leise) }

/* Der Honigtopf muss für Menschen unsichtbar sein, für Robots aber wie ein
   normales Feld aussehen. display:none würde ihn auch für einfache Robots
   erkennbar machen — deshalb aus dem Bild geschoben statt versteckt. */
.honigtopf{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.hinweis{
  margin:0 0 1.4rem; padding:.85rem 1.05rem;
  background:var(--papier-2); border-left:3px solid var(--gold);
  font-size:.88rem; line-height:1.6; color:var(--tinte-leise);
}
.hinweis--fehler{ border-left-color:#a4302a; color:#7d2420 }

/* ------------------------------------------------------------ Rechtstexte */
.rechtstext{ font-size:.95rem; line-height:1.78; color:var(--tinte) }
.rechtstext__vorspann{
  padding:1.1rem 1.25rem; background:var(--papier-2);
  border-left:3px solid var(--gold); color:var(--tinte-leise); font-size:.92rem;
}
.rechtstext h2{
  font-size:clamp(1.15rem,1.05rem + .45vw,1.45rem);
  margin:2.25rem 0 .75rem; padding-top:1.5rem; border-top:1px solid var(--linie);
}
.rechtstext h2:first-of-type{ border-top:0; padding-top:0; margin-top:1.75rem }
.rechtstext ul{ margin:0 0 1.1em; padding-left:1.3em }
.rechtstext li{ margin-bottom:.4em }
.rechtstext li::marker{ color:var(--gold-text) }
.rechtstext a{ color:var(--gold-text); font-weight:600 }
.rechtstext a:hover{ color:var(--navy); text-decoration:underline;
  text-decoration-color:var(--gold); text-underline-offset:.2em }

/* ------------------------------------------------------- Fragenübersicht */
/* ------------------------------------------------------------------- Karte
   Der Standort auf /kontakt/ (26.08.2026), als eigenes Bild über die volle
   Breite. Kein eingebettetes Kartenwerk: Das wäre ein Drittanbieter und
   bräuchte eine Einwilligung, siehe Kommentar in `kontakt.php`.

   Das Bild ist 2,4:1 geschnitten. Auf schmalen Fenstern wird daraus ein zu
   flaches Band, deshalb dort ein steileres Verhältnis mit demselben Mittelpunkt
   — der Standortpunkt sitzt in der Bildmitte und bleibt dadurch immer sichtbar. */
.karte{ margin:0; width:100%; overflow:hidden; background:var(--papier-2); position:relative }

/* --------------------------------------------------- Karte: der erste Klick
   Der Hinweis liegt über dem Kartenbild, nicht daneben: Wer die Karte
   benutzen will, sucht sie dort, wo sie steht. Der dunkle Schleier darunter
   nimmt dem Bild die Schärfe, damit klar ist, dass das noch nicht die Karte
   ist, sondern ihr Platzhalter. */
.karte__hinweis{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:clamp(1.2rem,4vw,2rem); text-align:center;
  background:rgba(18,25,31,.62);
}
.karte__hinweis-text{
  margin:0; max-width:46ch; color:var(--papier);
  font-size:clamp(.85rem,.82rem + .2vw,.95rem); line-height:1.6;
}
.karte__hinweis-text strong{ color:var(--gold-hell) }
.karte__hinweis .knopf:disabled{ opacity:.7; cursor:progress }

/* Die geladene Karte füllt denselben Platz wie das Bild davor — sonst
   springt der Seitenfuß beim Laden nach oben. */
.karte__flaeche{ position:absolute; inset:0; z-index:1 }
.karte__flaeche .leaflet-container{ font:inherit }
/* Der eigene Standortpunkt bringt sein Aussehen im SVG mit; Leaflets
   Grundgerüst für Symbole würde ihm nur einen weißen Kasten unterlegen. */
.karte__marke{ background:none; border:0 }
.karte__marke svg{ display:block; filter:drop-shadow(0 2px 4px rgba(18,25,31,.35)) }
.karte__flaeche .leaflet-popup-content{ font-size:.9rem; line-height:1.5 }
.karte__flaeche .leaflet-control-attribution{ font-size:11px }
.karte img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center }
@media (max-width:700px){ .karte{ aspect-ratio:4/3 } }
@media (min-width:701px){ .karte{ aspect-ratio:2.4/1 } }

/* Der Abschnitt endet mit der Karte, ohne Fuß: So stößt sie ohne Zwischenraum
   an die Fußzeile (Ansage vom 26.08.2026). Der obere Abstand bleibt.

   Den Abstand zur Quellenzeile darüber trägt die Karte selbst und nicht der
   Absatz: Ein `margin-bottom` am letzten Kind des Inhaltsrahmens fällt mit
   dessen eigenem Rand zusammen und bleibt wirkungslos. Am Nachbarn gesetzt,
   ist er da. */
.abschnitt--karte{ padding-bottom:0 }
.abschnitt--karte .karte{ margin-top:clamp(2.25rem,4.5vw,3.5rem) }
/* Die Knöpfe stehen im Beitext der rechten Spalte, unter dem erklärenden Satz.
   Kein unterer Abstand mehr: Den Abstand zur Karte trägt der Abschnittskopf
   selbst (`.abschnitt-kopf` hat `margin-bottom`), und er ist für diesen
   Abschnitt eigens erhöht, damit die Karte nicht an den Knöpfen klebt. */
.karte__wege{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin:1.25rem 0 0;
}
/* Der Standortkopf trägt die Knöpfe im Beitext; darunter folgt nur noch die
   Quellenzeile, die ihren eigenen Abstand mitbringt. */
.abschnitt--karte .abschnitt-kopf{ margin-bottom:0 }
/* Steht jetzt über der Karte, nicht darunter. Der untere Abstand trennt sie
   von der Kartenkante. */
.karte__quelle{
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  font-size:.8rem; line-height:1.6; color:var(--leise); max-width:70ch;
}
.karte__quelle a{ color:var(--gold-text); font-weight:600 }

/* ------------------------------------------------- Bewerbung und Ablagefläche
   Das Formular auf /karriere/ (26.08.2026). Es steht ohne Seitenspalte im
   Inhaltsrahmen, deshalb eine eigene Breitenbegrenzung: Ein Textfeld über
   1300 px ist keine Eingabe mehr, sondern eine Fläche. */
.bewerbung{ max-width:52rem }

/* Die Ablagefläche liegt über der gewöhnlichen Dateiauswahl. Ohne Skript bleibt
   sie verborgen und der Browser zeigt sein eigenes Feld — ein Formular, das
   ohne JavaScript keine Unterlagen annimmt, wäre eine Falle.

   Gestrichelter Rahmen statt Schatten oder Verlauf: Er sagt „hier hinein" und
   hält sich zugleich an die Hausregeln. */
.ablage__flaeche{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:clamp(1.6rem,4vw,2.6rem) 1.25rem;
  border:1.5px dashed var(--linie-stark,var(--linie)); border-radius:var(--radius);
  background:var(--weiss); text-align:center; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.ablage--js .ablage__feld{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.ablage{ position:relative }
.ablage__flaeche:hover,
.ablage--bereit .ablage__flaeche{ border-color:var(--gold); background:var(--papier-2) }
.ablage__feld:focus-visible + .ablage__flaeche{ outline:2px solid var(--gold); outline-offset:3px }
.ablage__zeichen{
  width:26px; height:26px; fill:none; stroke:var(--gold); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.ablage__ruf{ margin:0; font-size:.95rem; color:var(--tinte) }
.ablage__ruf strong{ color:var(--navy); font-weight:600 }
.ablage__link{ color:var(--gold-text); font-weight:600 }
.ablage__regel{ margin:0; font-size:.82rem; color:var(--leise) }

/* Die angehängten Dateien. Jede Zeile trägt ihren Namen, ihre Größe und den
   Weg zurück — eine Liste ohne Entfernen zwingt zum Neuladen der Seite. */
.ablage__liste{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.ablage__liste:not(:empty){ margin-top:.9rem }
.ablage__datei{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .8rem; background:var(--weiss); border:1px solid var(--linie);
  border-radius:var(--radius); font-size:.9rem;
}
.ablage__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ablage__gross{ color:var(--leise); font-size:.82rem; flex:none }
.ablage__weg{
  flex:none; cursor:pointer; color:var(--leise); font-size:1.15rem; line-height:1;
  padding:.15rem .35rem; border-radius:var(--radius);
  transition:color .2s var(--ease);
}
.ablage__weg:hover{ color:var(--navy) }
.ablage__fehler{ margin:.7rem 0 0; font-size:.86rem; color:#a4302a }

/* ------------------------------------------------------------- Fragensuche
   Volltextsuche über /haeufige-fragen/ (26.08.2026). Das Feld steht über der
   Sprungleiste, weil es dieselbe Aufgabe hat wie sie, nur feiner: Wer weiß, was
   er sucht, tippt; wer stöbert, klickt eine Gruppe an.

   Mit Lupe: Ohne sie war die reine Linie nicht als Suchfeld zu erkennen — der
   Platzhaltertext allein liest sich wie ein Hinweis, nicht wie ein Feld. Das
   Löschkreuz rechts kommt weiterhin von `type="search"` selbst. */
.suche{ margin-bottom:clamp(1.25rem,2.5vw,1.75rem) }
/* Die Linie liegt jetzt am Label, nicht am Feld: Lupe und Eingabe stehen
   darüber nebeneinander und teilen sich denselben Strich. */
.suche__feld{
  display:flex; align-items:center; gap:.6rem;
  max-width:34rem;
  border-bottom:1px solid var(--linie);
  transition:border-color .2s var(--ease);
}
.suche__feld:focus-within{ border-bottom-color:var(--gold) }
.suche__lupe{
  width:17px; height:17px; flex:none;
  fill:none; stroke:var(--leise); stroke-width:1.5;
  stroke-linecap:round;
  transition:stroke .2s var(--ease);
}
.suche__feld:focus-within .suche__lupe{ stroke:var(--gold-text) }
/* Kein Kasten, nur eine Linie (Wunsch vom 26.08.2026). Ein umrandetes Feld
   sah auf dieser Seite nach Formular aus; die Seite ist aber keins.

   Weil damit der Rahmen als Fokusmerkmal wegfällt, trägt die Linie den
   Zustand: im Ruhezustand die übliche Haarlinie, bei Fokus zwei Pixel in Gold.
   Die globale `:focus-visible`-Kontur ist hier abgeschaltet, weil sie den
   Kasten wieder gezeichnet hätte, den wir gerade abgeschafft haben — der
   Fokus bleibt sichtbar, er sieht nur anders aus. */
.suche input[type="search"]{
  width:100%;
  font:inherit; font-size:1.02rem; color:var(--tinte);
  background:transparent; border:0; border-radius:0;
  padding:.55rem 0;
}
.suche input[type="search"]::placeholder{ color:var(--leise) }
/* Die globale Fokuskontur ist hier abgeschaltet, weil sie den Kasten wieder
   gezeichnet hätte, den die Linie gerade abgelöst hat. Den Zustand tragen
   stattdessen Linie und Lupe: beide wechseln auf Gold. */
.suche input[type="search"]:focus,
.suche input[type="search"]:focus-visible{ outline:none }
/* Die Zeile steht immer im Fluss, auch leer — sonst springt die Sprungleiste
   beim ersten Tastendruck nach unten. */
.suche__zahl{
  min-height:1.5em; margin:.6rem 0 0;
  font-size:.85rem; color:var(--leise);
}
/* Treffer im Fragetext. Der Browser-Standard ist ein kräftiges Gelb, das mit
   dem Gold der Seite kollidiert; hier nur eine leichte Unterlegung. */
.faq summary mark{
  background:rgba(199,154,43,.22); color:inherit;
  padding:.05em .12em; border-radius:2px;
}

.fragenindex{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.fragenindex a{
  font-size:.8rem; font-weight:600; letter-spacing:.03em; text-decoration:none;
  color:var(--navy); border:1px solid var(--linie); border-radius:var(--radius);
  padding:.5rem .9rem; background:var(--weiss);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.fragenindex a:hover{ background:var(--navy); border-color:var(--navy); color:var(--weiss) }
.fragenblock + .fragenblock{ margin-top:clamp(2.5rem,5vw,4rem) }
.fragenblock h2{
  font-size:clamp(1.3rem,1.15rem + .6vw,1.7rem);
  margin:0 0 1.2rem; scroll-margin-top:calc(var(--kopf-h) + 1.5rem);
}
.faq__quelle{ margin-top:.9em; font-size:.85rem; color:var(--leise) }
.faq__quelle a{ color:var(--navy) }

/* --------------------------------------------------------- Ratgeberseite
   Die Kachelüberschrift stand früher zweimal im CSS: einmal für die Startseite
   als nacktes `.beitrag h3`, einmal hier für die Ratgeberseite. Seit
   `beitragsreihe()` das Markup an allen drei Stellen erzeugt, genügt eine
   Regel. */
.beitrag__titel{
  font-family:var(--f-display); font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  line-height:1.3; letter-spacing:-.006em; margin:0;
}
.beitrag__titel a{
  position:relative; text-decoration:none; color:var(--navy);
  transition:color .25s var(--ease);
}
.beitrag__titel a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.beitrag__titel a:hover{ color:var(--gold-text) }
.beitrag__titel a:hover::after{ transform:scaleX(1) }
.ratgeber__hinweis{
  margin-top:clamp(2.5rem,5vw,3.5rem); font-size:.92rem; color:var(--tinte-leise);
}
.ratgeber__hinweis a{ color:var(--navy) }

/* Auf Unterseiten sitzt ein Abschnitt direkt unter dem dunklen Seitenkopf.
   Dort ist die volle Abschnittshöhe zu viel — sie reißt ein Loch auf. */
.seitenkopf + .abschnitt{ padding-top:clamp(3rem,6vw,5.5rem) }

/* Verweisreihe unter dem Standort-Abschnitt der Startseite (26.08.2026).
   Drei Textlinks nebeneinander, auf schmalen Fenstern untereinander. `gap`
   statt `margin`, damit beim Umbruch kein hängender Abstand entsteht. */
.standort__wege{
  display:flex; flex-wrap:wrap;
  gap:.9rem clamp(1.5rem,3vw,2.75rem);
}

/* ======================================= Bewertungsknopf in der Fußzeile
   Hier standen bis zum 27.08.2026 die Sterne (zwei Reihen übereinander, die
   goldene über `width` beschnitten). Geblieben ist die Schaltfläche; die
   Sternstile liegen bei _bewertung-alt.php mit dem übrigen stillgelegten
   Aufbau. */
.bewertung{ margin-top:1.5rem }

/* „Bei Google bewerten" in der Fußzeile. Umriss statt Goldfläche: Der goldene Knopf
   ist im ganzen Projekt dem Hauptaufruf vorbehalten („Fall schildern"), und ein
   zweiter davon in derselben Ansicht nähme dem ersten das Gewicht.
   Ohne `margin-top`: Das hing an den Sternen darüber. Ohne sie trüge der Knopf
   den Abstand doppelt — einmal von `.bewertung`, einmal von sich selbst. */
.bewertung__knopf{ font-size:.78rem; padding:.6rem 1.1rem }

/* Rubrikleiste im Ratgeber und am Fuß eines Rubrikarchivs. Dieselbe Reihe wie
   `.standort__wege` auf der Startseite: Textlinks nebeneinander, auf schmalen
   Fenstern untereinander, `gap` statt `margin` gegen hängende Abstände. */
.rubriken{
  display:flex; flex-wrap:wrap;
  gap:.9rem clamp(1.5rem,3vw,2.5rem);
  margin:0 0 clamp(2.5rem,5vw,3.5rem);
}
.abschnitt .rubriken:last-child{ margin-bottom:0 }
/* Das Rubrik-Etikett auf einer Beitragskachel ist jetzt oft ein Verweis. Es
   soll aussehen wie vorher, nur mit Goldwechsel beim Überfahren. */
a.beitrag__meta{ text-decoration:none; transition:color .2s var(--ease) }
a.beitrag__meta:hover{ color:var(--gold-hell) }

/* ===================================== Formularfehler (27.08.2026)
   Bis dahin trugen Fehler nur eine rote Umrandung. Eine Farbe allein trägt
   keine Information (WCAG 1.4.1), und die feldgenaue Meldung, die der Server
   längst erzeugte, stand nirgends. Beides ist behoben: Zeichen plus Text am
   Feld, dazu aria-invalid und aria-describedby im Markup. */
.feld__fehler{
  display:flex; align-items:baseline; gap:.45rem;
  margin:.45rem 0 0; font-size:.85rem; line-height:1.45;
  color:#8f2822;
}
.feld__fehler-zeichen{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05rem; height:1.05rem; border-radius:50%;
  background:#a4302a; color:#fff;
  font-size:.7rem; font-weight:700; line-height:1;
}

/* Die Übersicht über dem Formular. Sie ist fokussierbar (tabindex="-1"), damit
   cfl.js den Fokus nach dem Neuladen hierher setzen kann. */
/* Gegenstück zur Fehlermeldung: die Bestätigung nach dem Absenden (21.09.2026).
   Gleicher Aufbau, gleiche Maße — nur in Gold statt in Rot, weil Gold die
   Akzentfarbe des Hauses ist und die Seite keine Ampelfarben kennt. Sie steht
   an der Stelle des Formulars, nicht darüber. */
.formularerfolg{
  border:1px solid var(--gold); border-left-width:3px;
  background:#fbf6ea;
  padding:1rem 1.2rem; margin:0;
}
.formularerfolg:focus{ outline:2px solid var(--gold); outline-offset:2px }
.formularerfolg p{ margin:0; font-weight:600; color:var(--navy) }

.formularfehler{
  border:1px solid #a4302a; border-left-width:3px;
  background:#fdf6f5;
  padding:1rem 1.2rem; margin:0 0 1.8rem;
}
.formularfehler:focus{ outline:2px solid var(--gold); outline-offset:2px }
.formularfehler__kopf{
  margin:0; font-weight:700; font-size:.92rem; color:#7d2420;
}
.formularfehler ul{
  margin:.6rem 0 0; padding-left:1.1rem;
  font-size:.88rem; color:#7d2420;
}
.formularfehler li{ margin-bottom:.3rem }
.formularfehler li:last-child{ margin-bottom:0 }
/* Die Einträge sind Sprünge zum Feld. Weil Links im Projekt nie unterstrichen
   werden, brauchen sie ein zweites Merkmal — sonst sieht niemand, dass sie
   anklickbar sind. Sonst löst das Gold plus Fettung; auf roter Fläche wäre Gold
   falsch, also bleibt die Fettung, dazu eine Linie beim Überfahren. */
.formularfehler a{ color:#7d2420; font-weight:600; text-decoration:none }
.formularfehler a:hover,
.formularfehler a:focus-visible{ color:#a4302a; text-decoration:underline }

/* ============================================ Startseite, Ergänzungen 16.09.2026
 * Drei Bauteile aus den Korrekturen der Kanzlei. */

/* „Eigenständig. Gut vernetzt." steht im Abschnitt der Spezialkanzlei, durch
   eine Haarlinie abgesetzt, damit es als eigener Gedanke lesbar bleibt. */
.abschnitt-folge{
  margin-top:clamp(3rem,6vw,5rem); padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--linie);
}

/* Aufruf unter „Familienrecht für Unternehmer": Satz links, Knopf rechts,
   auf schmalen Bildschirmen untereinander. */
.unternehmer-aufruf{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding:clamp(1.5rem,3vw,2.25rem) 0 0;
  border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem 2.5rem;
}
.unternehmer-aufruf p{ margin:0; max-width:46rem; font-size:1.05rem }
.unternehmer-aufruf strong{ color:var(--navy) }

/* Fragen der Startseite, nach Themenfeld gruppiert. Die Nummer entspricht
   der Karte in der Themenübersicht. */
.faq-gruppe{
  margin:clamp(2rem,4vw,2.75rem) 0 .5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy);
}
.faq-gruppe:first-of-type{ margin-top:0 }
.faq-gruppe span{ color:var(--gold-text); margin-right:.35rem }

/* ======================================= Leitfäden auf Fachseiten (16.09.2026)
 * Schritte mit längeren Texten laufen zweispaltig; Listen darin wie im Fließtext.
 * Unter den Schritten können Abschnitte folgen (Dauer, Kosten …). */
.ablauf--breit .schritt p + p{ margin-top:.6rem }
.schritt ul{ margin:.6rem 0 0; padding-left:1.1rem; font-size:.95rem; color:var(--leise) }
.schritt li + li{ margin-top:.25rem }
.schritt ul + p{ margin-top:1.1em }
.schritt li::marker{ color:var(--gold-text) }
.ablauf-nach{ margin-top:clamp(3rem,6vw,4.5rem); max-width:46rem }
.ablauf-nach section + section{ margin-top:clamp(2rem,4vw,2.75rem) }
.ablauf-nach h3{ margin-bottom:.75rem }
.schritt h4{
  margin:1.1rem 0 .35rem; font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy);
}

/* ============================================ Layoutprüfung 16.09.2026
 * Lange Beitexte im Abschnittskopf (Einstieg, Unternehmer): Die Überschrift
 * bleibt beim Lesen links stehen, statt eine leere Spalte zu hinterlassen. */
@media (min-width:900px){
  .abschnitt-kopf--hoch > :first-child{ position:sticky; top:calc(var(--kopf-h) + 2rem) }
}
/* Mobil: feste Zeilenumbrüche in der Aufruf-Überschrift aufheben, damit
   text-wrap:balance greift und kein Einzelwort allein steht. */
@media (max-width:699px){ .aufruf h2 br{ display:none } }
/* Themenregal mobil: lange Komposita trennen statt über den Rand laufen. */
.regal__name{ hyphens:auto; overflow-wrap:break-word }