/* ============================================================
   app.css – das gesamte Design der Website.
   Ersetzt base.css, module.css und start.css.

   Warum eine Datei: Die drei alten Stylesheets enthielten
   dieselben Tokens und denselben Reset dreifach, und auf der
   Startseite wurden zwei davon gleichzeitig geladen. Eine Datei
   heisst ein Request, ein Zwischenspeicher-Eintrag und genau eine
   Stelle, an der eine Farbe steht.

   Aufbau:
     1  Tokens
     2  Grundlagen und Typografie
     3  Bausteine (Knopf, Link, Karte, Formularfeld)
     4  Kopf, Navigation, Statuszeile, Fuss
     5  Startseite
     6  Unterseiten
     7  Bewegung
     8  Druck
   ============================================================ */

/* ============================================================
   1  TOKENS
   ============================================================ */
:root{
  /* Marke – unveraendert aus dem Bestand uebernommen */
  --navy:#16324F;
  --blue:#2F6690;
  --sky:#6FA8C4;
  --sand:#C9A468;

  /*
   * Akzent fuer Bedienelemente – bewusst NICHT --blue.
   * --blue ist ein fester Markenton; als Symbol- oder Randfarbe
   * steht er im dunklen Thema fast auf dem Grund und verschwindet.
   * --akzent-ui folgt dem Thema, --akzent-marke traegt die Wortmarke.
   */
  --akzent-ui:#2F6690;
  --akzent-marke:#16324F;

  /* Flaechen – warm aufgehellt, damit Fotos nicht kalt wirken */
  --ground:#F7F5F1;
  --surface:#FFFFFF;
  --surface-warm:#FBF7F0;
  --surface-sunk:#EEF4F8;
  --deep:#12293F;
  --deep-2:#1B3C58;

  /* Schrift */
  --ink:#16324F;
  --body:#3A4854;
  --muted:#61707D;
  --on-deep:#EAF1F6;
  --on-deep-muted:#A7BDCD;

  /* Linien */
  --line:#E3E9EE;
  --line-strong:#CBD8E1;
  --line-warm:#EADFCC;
  --line-deep:rgba(234,241,246,.18);

  --accent:#C9A468;
  --accent-ink:#7E6029;
  --accent-bg:#F6EEDE;

  /* Signalfarben – getrennt vom Akzent gehalten */
  --ok:#2C6A48;
  --ok-bg:#E4EEE7;
  --warn:#8A6A2E;
  --warn-bg:#F6EEDE;
  --error:#8A3E2A;
  --error-bg:#F8E9E4;

  /* Interaktion */
  --btn-primary:#16324F;
  --btn-primary-fg:#FFFFFF;

  /* Raster: 8px */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem; --s6:4.5rem; --s7:6.5rem;

  --measure:66ch;
  --maxw:1240px;
  --gutter:clamp(1.15rem, 4vw, 3rem);

  /*
   * Radien. --radius ist der Standardwert, auf den nahezu jedes
   * Bauteil dieses Stylesheets zurueckgreift; er stand frueher auf
   * 2px und trug damit die ganze strenge Registeroptik. Der Wechsel
   * auf 14px ist der groesste einzelne Hebel des Redesigns.
   */
  --radius:14px;
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --r-xl:30px;
  --r-pille:999px;

  /* Schatten – weich und tief statt hart und nah */
  --schatten-s:0 1px 2px rgba(22,50,79,.06), 0 4px 12px -6px rgba(22,50,79,.14);
  --schatten-m:0 2px 6px rgba(22,50,79,.06), 0 18px 36px -20px rgba(22,50,79,.28);
  --schatten-l:0 4px 10px rgba(22,50,79,.07), 0 40px 70px -34px rgba(22,50,79,.4);

  /*
   * Typografische Skala. Die vorige Fassung war rund ein Achtel
   * zu gross gesetzt: Auf einem 1440er Bildschirm wirkte bereits
   * eine Abschnittsueberschrift wie eine Schlagzeile.
   */
  --t-mono:.68rem;
  --t-sm:.875rem;
  --t-base:1rem;
  --t-lede:clamp(1.05rem, 1rem + .3vw, 1.18rem);
  --t-h3:clamp(1.02rem, .98rem + .25vw, 1.15rem);
  --t-h2:clamp(1.35rem, 1.15rem + 1vw, 2rem);
  --t-h1:clamp(1.9rem, 1.4rem + 2.2vw, 3rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.24s;

  /* Fuer Bestandsmarkup, das diese Namen noch benutzt */
  --bg:var(--ground);
  --bg-alt:var(--surface-sunk);
  --text:var(--body);
  --text-muted:var(--muted);
  --shadow:var(--schatten-m);

  color-scheme:light;
}

/*
 * Dunkles Theme. Drei Zustaende, nicht zwei: Wer nichts einstellt,
 * bekommt das Systemthema ueber prefers-color-scheme; wer sich
 * ausdruecklich entscheidet, bekommt data-theme am <html>.
 * Es werden ausschliesslich Tokens neu gesetzt – nie Bausteine.
 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101A24;
    --surface:#182634;
    --surface-warm:#1C2733;
    --surface-sunk:#152230;
    --deep:#0B141D;
    --deep-2:#152F45;

    --ink:#EAF1F6;
    --body:#C6D3DD;
    --muted:#8494A2;

    --line:rgba(234,241,246,.13);
    --line-strong:rgba(234,241,246,.26);
    --line-warm:rgba(201,164,104,.24);
    --line-deep:rgba(234,241,246,.13);

    --accent:#D9B77F;
    --accent-ink:#D9B77F;
    --accent-bg:rgba(201,164,104,.14);

    --akzent-ui:#7FB4CE;
    --akzent-marke:#EAF1F6;
    --sky:#7FB4CE;
    --blue:#8FBBD6;

    /* Navy auf dunklem Grund verschwindet – der Hauptknopf geht
       eine Stufe heller, statt die Farbe zu wechseln. */
    --btn-primary:#2F6690;
    --btn-primary-fg:#FFFFFF;

    --ok:#79C79B;   --ok-bg:rgba(121,199,155,.13);
    --warn:#D9B77F; --warn-bg:rgba(201,164,104,.14);
    --error:#E39A85;--error-bg:rgba(227,154,133,.13);

    --schatten-s:0 1px 2px rgba(0,0,0,.4);
    --schatten-m:0 12px 30px -18px rgba(0,0,0,.8);
    --schatten-l:0 30px 60px -30px rgba(0,0,0,.9);

    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#101A24;
  --surface:#182634;
  --surface-warm:#1C2733;
  --surface-sunk:#152230;
  --deep:#0B141D;
  --deep-2:#152F45;

  --ink:#EAF1F6;
  --body:#C6D3DD;
  --muted:#8494A2;

  --line:rgba(234,241,246,.13);
  --line-strong:rgba(234,241,246,.26);
  --line-warm:rgba(201,164,104,.24);
  --line-deep:rgba(234,241,246,.13);

  --accent:#D9B77F;
  --accent-ink:#D9B77F;
  --accent-bg:rgba(201,164,104,.14);

  --akzent-ui:#7FB4CE;
  --akzent-marke:#EAF1F6;
  --sky:#7FB4CE;
  --blue:#8FBBD6;

  --btn-primary:#2F6690;
  --btn-primary-fg:#FFFFFF;

  --ok:#79C79B;   --ok-bg:rgba(121,199,155,.13);
  --warn:#D9B77F; --warn-bg:rgba(201,164,104,.14);
  --error:#E39A85;--error-bg:rgba(227,154,133,.13);

  --schatten-s:0 1px 2px rgba(0,0,0,.4);
  --schatten-m:0 12px 30px -18px rgba(0,0,0,.8);
  --schatten-l:0 30px 60px -30px rgba(0,0,0,.9);

  color-scheme:dark;
}

/* ============================================================
   2  GRUNDLAGEN UND TYPOGRAFIE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}

/* Das hidden-Attribut muss wirken.
 *
 * Browser bringen dafuer nur eine Regel in ihrem eigenen Stylesheet
 * mit, und die verliert gegen jede Autorenangabe von display. Genau
 * das ist passiert: .field-error setzt display:block, also blieben
 * saemtliche Fehlermeldungen des Kontaktformulars dauerhaft sichtbar,
 * obwohl im Markup hidden stand und das JavaScript es korrekt
 * umschaltete. Wer eine gueltige E-Mail eintippte, sah trotzdem
 * "Bitte geben Sie eine gueltige E-Mail-Adresse an" - das Formular
 * wirkte kaputt, obwohl es funktionierte.
 *
 * Das !important ist hier kein Notnagel, sondern die Aussage: Ein
 * Element mit hidden ist nicht sichtbar, egal was sonst noch gilt. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t-base);
  line-height:1.65;
  /*
   * Kein -webkit-font-smoothing:antialiased.
   *
   * Die Angabe schaltet die Subpixel-Darstellung ab und duennt die
   * Buchstaben aus. Auf hellem Grund faellt das kaum auf, auf
   * dunklem sehr: Helle Schrift auf dunkler Flaeche verliert dann
   * ihren Koerper und wirkt bei 14 Pixeln verschwommen. Die
   * Vorgabe des Browsers trifft es besser.
   */
  overflow-x:hidden;
}
img,svg,video{max-width:100%;}
img{display:block;height:auto;}
a{color:inherit;}
/* Lange Adressen, Aktenzeichen und zusammengesetzte Hauptwörter –
   das Betreuungsrecht ist voll davon – dürfen umbrechen, statt die
   Seite auf schmalen Geräten seitwärts zu schieben. */
p,li,dd,td,th,h1,h2,h3,h4,figcaption{overflow-wrap:break-word;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

h1,h2,h3,h4{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-variation-settings:'opsz' 96,'SOFT' 28,'WONK' 1;
  color:var(--ink);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0 0 .5em;
}
h1{font-size:var(--t-h1); font-weight:400; letter-spacing:-.028em;}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);}
h4{font-size:1.05rem;}

ul,ol{margin:0 0 1em; padding-left:1.25em;}
li{margin-bottom:.35em;}
strong,b{font-weight:600; color:var(--ink);}
small{font-size:var(--t-sm);}
hr{border:0; border-top:1px solid var(--line); margin:var(--s5) 0;}

table{border-collapse:collapse; width:100%; font-size:var(--t-sm);}
th,td{text-align:left; padding:.7em .8em; border-bottom:1px solid var(--line);}
th{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
td.zahl-zelle,th.zahl-zelle,.zahl-zelle{text-align:right; font-variant-numeric:tabular-nums;}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius);
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.measure{max-width:var(--measure);}
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.nowrap{white-space:nowrap;}
.klein{font-size:var(--t-sm);}

/* Sprungmarke fuer die Tastatur */
.skip-link{
  position:absolute; left:var(--s2); top:-4rem; z-index:100;
  background:var(--surface); color:var(--ink);
  padding:.7em 1.2em; border:1px solid var(--accent);
  border-radius:var(--radius); font-size:var(--t-sm); font-weight:600;
  text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--s2);}

section{scroll-margin-top:7rem;}
[id]{scroll-margin-top:7rem;}

/* Registerlabel – Mono, weil diese Welt aus Aktenzeichen besteht.
   Ersetzt das frueher rein dekorative .eyebrow. */
/* Registerlabel. Der vorangestellte Balken ist entfallen: Er war
   das Erkennungszeichen der strengen Registeroptik und stoerte in
   einem Layout, das seine Gliederung ueber Flaechen zeigt. */
.reg,.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t-mono);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:block;
  margin:0 0 .6rem;
}
.on-deep .reg,.on-deep .eyebrow,.hero .eyebrow{color:var(--accent);}

.lede{
  font-size:var(--t-lede);
  color:var(--muted);
  line-height:1.5;
  max-width:56ch;
}

/* ============================================================
   3  BAUSTEINE
   ============================================================ */

/* ---------- Knopf ---------- */
.btn{
  --btn-bg:var(--btn-primary);
  --btn-fg:var(--btn-primary-fg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:.8em 1.4em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:inherit;
  font-size:var(--t-sm);
  font-weight:700;
  letter-spacing:.005em;
  text-decoration:none;
  border:1.5px solid transparent;
  /* Pille statt Rechteck – das auffaelligste Merkmal des Redesigns
     und der Grund, warum die Seite nicht mehr nach Formular aussieht. */
  border-radius:var(--r-pille);
  box-shadow:var(--schatten-m);
  cursor:pointer;
  min-height:44px;
  white-space:nowrap;
  transition:transform var(--dur) var(--ease),
             background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             opacity var(--dur) var(--ease);
}
.btn:hover{background:var(--blue); box-shadow:var(--schatten-l);}
.btn:active{transform:translateY(1px);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none;}
.btn .arw{transition:transform var(--dur) var(--ease);}
.btn:hover .arw{transform:translateX(3px);}

.btn-primary{--btn-bg:var(--btn-primary); --btn-fg:var(--btn-primary-fg);}

/* Zweitrangig: heller Grund, feine Kontur, kein Farbversprechen. */
.btn-ghost{
  --btn-bg:var(--surface);
  --btn-fg:var(--ink);
  border-color:var(--line);
  box-shadow:var(--schatten-s);
}
.btn-ghost:hover{background:var(--surface); border-color:var(--ink); box-shadow:var(--schatten-m);}
.on-deep .btn-ghost,.hero .btn-ghost{
  --btn-bg:rgba(255,255,255,.12);
  --btn-fg:#fff;
  border-color:rgba(255,255,255,.32);
  box-shadow:none;
}
.on-deep .btn-ghost:hover,.hero .btn-ghost:hover{background:#fff; color:var(--navy); border-color:#fff;}

/* Der Sandknopf traegt die eine Handlung, die wirklich zaehlt. */
.btn-akzent{--btn-bg:var(--accent); --btn-fg:#3B2C0E; border-color:transparent;}
.btn-akzent:hover{background:#D9B77F; color:#3B2C0E;}

.btn-klein{padding:.55em 1.05em; min-height:38px; font-size:.82rem;}

.knopf-reihe,.knopf-leiste,.hero-ctas,.fragen-ctas,.contact-actions{
  display:flex; flex-wrap:wrap; gap:var(--s2);
}

/* ---------- Links ---------- */
.tlink,.more,.back-link,.zurueck{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:2px;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size var(--dur) var(--ease);
}
.tlink:hover,.more:hover,.back-link:hover,.zurueck:hover{background-size:100% 2px;}
.tlink .arw,.more .arw{transition:transform var(--dur) var(--ease);}
.tlink:hover .arw,.more:hover .arw{transform:translateX(3px);}

/*
 * Fliesstext-Links: sichtbar, ohne den Absatz zu zerhacken.
 *
 * Bewusst nur direkt in Absätzen, Listen und Tabellenzellen. Vorher
 * stand hier ".page-body a:not(...)", und das traf auch die Karten
 * der Infothek – die sind selbst ein <a>. Ergebnis war eine Seite,
 * auf der jede Überschrift und jeder Kartentext unterstrichen war.
 */
:where(.page-body,.legal,.article-body,.faq-answer) :is(p,li,dd,td) > a:not(.btn):not(.more):not(.tlink):not(.chip){
  color:var(--blue);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent);
  transition:text-decoration-color var(--dur) var(--ease);
}
:where(.page-body,.legal,.article-body,.faq-answer) :is(p,li,dd,td) > a:not(.btn):not(.more):not(.tlink):not(.chip):hover{
  text-decoration-color:var(--accent);
}

/* ---------- Karte ---------- */
.card,.karte{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:var(--s3);
  box-shadow:var(--schatten-s);
}
.card > :last-child,.karte > :last-child{margin-bottom:0;}

/* ---------- Erläuterung unter einem Feld ----------
   .hint ist an sechzehn Stellen ein kleiner Hilfssatz unter einer
   Beschriftung – meist ein <span>. Als Hinweiskasten mit Polsterung
   und Balken (so stand es hier zuerst) sprengte er auf schmalen
   Geräten das Formular nach rechts. */
.hint,.stand-hint{
  display:block;
  margin-top:.35em;
  font-size:var(--t-sm);
  line-height:1.5;
  color:var(--muted);
}

/* ---------- Hinweiskasten ---------- */
.note,.note-box,.form-note,.hinweis,.empty-hint,.leer{
  padding:var(--s3);
  background:var(--surface);
  border-left:3px solid var(--accent);
  border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-s);
  font-size:var(--t-sm);
  color:var(--muted);
}
.note strong,.note-box strong,.hinweis strong{
  display:inline;
  color:var(--ink);
  font-weight:700;
}
.note-warn,.dringend{
  border-left-color:var(--warn);
  background:var(--warn-bg);
  color:var(--warn);
}
.note-warn strong,.dringend strong{color:var(--warn);}

/* ---------- Chip ---------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono);
  letter-spacing:.06em;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pille);
  padding:.45em .75em;
  text-decoration:none;
  min-height:32px;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.chip:hover,.chip:hover{border-color:var(--accent); color:var(--ink);}
.chip.aktiv,.chip[aria-current]{
  border-color:var(--accent);
  color:var(--ink);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.chip-dringend{border-color:var(--warn); color:var(--warn);}
/* .schlagwort-filter stand hier nie drin und wurde als gepunktete
   Liste ausgegeben - ein Bestandsfehler, der jetzt mit auffiel. */
.chip-grid,.chip-grid-eng,.glossary-tags,.schlagwort-liste,.schlagwort-filter,.creds,.skills{
  display:flex; flex-wrap:wrap; gap:.5rem;
  list-style:none; padding:0; margin:0 0 var(--s3);
}
.chip-grid li,.glossary-tags li,.schlagwort-liste li,.schlagwort-filter li,.creds li,.skills li{margin:0;}

/* Auch die Schlagworte in den Karten sind Chips. Ohne eigene Regel
   erbten sie den Unterstrich der Fliesstext-Links. */
.schlagwort-liste a,.glossary-tags a{
  display:inline-flex; align-items:center;
  font-size:.75rem; font-weight:600; text-decoration:none;
  color:var(--muted); background:var(--surface-sunk);
  border:1px solid var(--line); border-radius:var(--r-pille);
  padding:.25em .7em;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.schlagwort-liste a:hover,.glossary-tags a:hover{border-color:var(--sky); color:var(--ink);}

/* Die Filterlinks sind Chips - dieselbe Pille wie ueberall. */
.schlagwort-filter a{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.82rem; font-weight:600; text-decoration:none;
  color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pille);
  padding:.4em .85em; box-shadow:var(--schatten-s);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.schlagwort-filter a:hover{border-color:var(--sky); color:var(--ink);}
.schlagwort-filter a.aktiv{
  background:var(--btn-primary); color:var(--btn-primary-fg); border-color:transparent;
}
.schlagwort-filter a span{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem; opacity:.7;
}
.skills li,.creds li{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t-mono);
  letter-spacing:.06em;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pille);
  box-shadow:var(--schatten-s);
  padding:.45em .8em;
}

/* ---------- Formularfelder ---------- */
/*
 * Ein <fieldset> bekommt vom Browser min-width:min-content mit auf
 * den Weg und lässt sich deshalb nicht unter die Breite seines
 * längsten Inhalts stauchen. Auf schmalen Geräten schob der
 * Vergütungsrechner dadurch die ganze Seite 64 Pixel nach rechts.
 * Diese eine Zeile ist der einzige Grund, warum die Seite dort nicht
 * mehr seitwärts scrollt.
 */
fieldset{min-width:0; border:0; margin:0 0 var(--s4); padding:0;}
legend{
  padding:0;
  font-size:var(--t-sm); font-weight:600; color:var(--ink);
  margin-bottom:var(--s2);
}

.field,.feld{margin-bottom:var(--s3);}
.field label,.feld label,.form-block label{
  display:block;
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--ink);
  margin-bottom:.4em;
}
.field .optional,.feld .optional,.optional{
  font-weight:400;
  color:var(--muted);
  font-size:.8rem;
  letter-spacing:.02em;
}
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],input[type=time],input[type=search],input[type=password],
select,textarea{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  color:var(--body);
  background:var(--ground);
  border:1.5px solid var(--line);
  border-radius:var(--r-m);
  padding:.7em .9em;
  min-height:46px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea{min-height:8em; resize:vertical; line-height:1.6;}
select{appearance:none; padding-right:2.2em;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.1em) 55%, calc(100% - .75em) 55%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
input:hover,select:hover,textarea:hover{border-color:var(--sky);}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--akzent-ui);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent-ui) 20%,transparent);
}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:.75;}

.field-error,.pruef-fehler{
  display:block;
  color:var(--error);
  font-size:var(--t-sm);
  font-weight:600;
  margin-top:.4em;
}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:var(--error);
}

.kontrollkaestchen,.einwilligung,.choice{
  display:flex;
  align-items:flex-start;
  /* Umbrechen erlaubt: Eine Auswahlzeile aus Kästchen, Bezeichnung
     und Erläuterung passt auf einem Handy nicht nebeneinander. Ohne
     flex-wrap schob sie die ganze Seite nach rechts. */
  flex-wrap:wrap;
  gap:.3em .7em;
  font-size:var(--t-sm);
  color:var(--muted);
  cursor:pointer;
}
.kontrollkaestchen input,.einwilligung input,.choice input{
  width:1.15em; height:1.15em; min-height:0;
  margin-top:.25em; flex:none; accent-color:var(--accent);
}
.kontrollkaestchen > *,.einwilligung > *,.choice > *{min-width:0;}
.choice strong{color:var(--ink);}
/* Die Erläuterung rutscht in eine eigene Zeile und richtet sich
   unter der Bezeichnung aus, nicht unter dem Kästchen. */
.choice > span{
  flex:1 1 100%;
  margin-left:1.85em;
  color:var(--muted);
  line-height:1.5;
}
.field-reihe,.feld-reihe,.form-zweispaltig,.zweispaltig{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);
}
.form-dreispaltig{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);}
.form-trenner{border-top:1px solid var(--line); margin:var(--s4) 0 var(--s3); padding-top:var(--s3);}
.honigtopf,.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- Meldungen ---------- */
.meldung,.brief-meldung{
  padding:.9em 1.1em;
  border-radius:var(--radius);
  border-left:3px solid var(--ok);
  background:var(--ok-bg);
  color:var(--ok);
  font-size:var(--t-sm);
  font-weight:600;
  margin-bottom:var(--s3);
}
.meldung.warnung{border-left-color:var(--warn); background:var(--warn-bg); color:var(--warn);}
.meldung.fehler{border-left-color:var(--error); background:var(--error-bg); color:var(--error);}

/* ---------- Statuspunkt ---------- */
.status-dot,.dot,.punkt{
  width:7px; height:7px; border-radius:50%;
  background:var(--ok); flex:none; display:inline-block;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);
}
.status-begrenzt .status-dot,.status-begrenzt .dot{
  background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent);
}
.status-voll .status-dot,.status-abwesend .status-dot,
.status-voll .dot,.status-abwesend .dot{
  background:var(--error); box-shadow:0 0 0 3px color-mix(in srgb,var(--error) 22%,transparent);
}

/* ============================================================
   4  KOPF, NAVIGATION, STATUSZEILE, FUSS
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.site-header{border-bottom-color:var(--line);}
.nav-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2);
  padding-block:.45rem;
}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none;}
.brand svg{width:38px; height:38px; flex:none;}
/* Die Wortmarke bricht nie um: Zwei Zeilen im Kopf machen die
   ganze Leiste zweizeilig. */
.brand-text,.brand-text span{white-space:nowrap;}
.brand-text{
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'opsz' 24,'SOFT' 20,'WONK' 0;
  font-size:1.02rem; font-weight:600; color:var(--ink);
  line-height:1.2; display:block;
}
.brand-text span{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.55rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:block;
}

.primary-nav ul{display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0;}
.primary-nav li{margin:0;}
.primary-nav a{
  display:block; white-space:nowrap;
  font-size:.86rem; font-weight:600; color:var(--body);
  text-decoration:none; padding:.4rem .7rem;
  border-radius:var(--r-pille);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.primary-nav a:hover{color:var(--ink); background:var(--surface-sunk);}
.primary-nav a[aria-current]{color:var(--ink); background:var(--surface-sunk);}

/* Der Kontaktknopf gehoert in die Kopfleiste – die Seite bietet
   ihre wichtigste Handlung auf jeder Hoehe an. */
.nav-cta{display:inline-flex; padding:.55em 1em; min-height:38px; font-size:.84rem;}

/* Mobilmenue: der Schalter ist ein echter <button>, kein Label,
   damit Screenreader den Aufklappzustand mitbekommen. */
.nav-toggle-label{
  display:none;
  background:none; border:1px solid var(--line-strong);
  border-radius:var(--radius);
  width:44px; height:44px; padding:0; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle-label span{
  display:block; width:18px; height:1.5px; background:var(--ink); position:relative;
}
.nav-toggle-label span::before,.nav-toggle-label span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink);
  transition:transform var(--dur) var(--ease);
}
.nav-toggle-label span::before{top:-6px;}
.nav-toggle-label span::after{top:6px;}
.nav-toggle-label[aria-expanded="true"] span{background:transparent;}
.nav-toggle-label[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle-label[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

/* Statuszeile – sitzt unter dem klebenden Kopf und scrollt mit weg.
 *
 * Eine Haarlinie statt eines getoenten Bandes: Die Signalfarbe
 * unterstreicht die Aussage, statt eine Flaeche einzufaerben. Sie
 * markiert damit genau das Wort, das sie meint, und die Zeile haelt
 * es aus, auf jeder Seite zu stehen, weil sie fast keine Tinte
 * verbraucht. Der Rest der Auskunft steht in der Karte im
 * Kontaktbereich – siehe status_band_html() in inc/site.php. */
.status-voll,.status-abwesend{--status-tint:var(--error);}
.status-begrenzt{--status-tint:var(--warn);}

.status-linie{
  display:block;
  border-bottom:1px solid var(--line);
  font-size:var(--t-sm);
  color:inherit; text-decoration:none;
  transition:background var(--dur) var(--ease);
}
/* "An der Navigation": buendig anschliessen, keine doppelte Linie. */
.status-linie.status-im-header{border-top:0;}
/* "Dezent": abgesetzt, damit der Hinweis als Ausnahme gelesen wird. */
.status-linie:not(.status-im-header){border-top:1px solid var(--line);}

.status-linie-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:baseline; gap:.3rem 1.5rem; flex-wrap:wrap;
  padding-block:.5rem;
}

.status-aussage{
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'opsz' 24,'SOFT' 20,'WONK' 0;
  font-size:.95rem; color:var(--ink);
  position:relative; padding-bottom:4px;
}
/* Der Unterstrich zieht sich auf – dasselbe Motiv wie .horizon. */
.status-aussage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--status-tint,var(--ok));
  transform-origin:left;
  animation:grow .8s var(--ease) .35s both;
  transition:height var(--dur) var(--ease);
}
/* Laeuft eine laengere Abwesenheit, wird der Strich zur Zeitachse:
   gesaettigt fuer die vergangene, blass fuer die verbleibende Zeit. */
.status-linie.status-achse .status-aussage::after{
  background:linear-gradient(to right,
    var(--status-tint,var(--ok)) 0 calc(var(--verlauf,0) * 100%),
    color-mix(in srgb,var(--status-tint,var(--ok)) 20%,transparent) calc(var(--verlauf,0) * 100%) 100%);
}

/* Die Frist stand in Mono-Versalien und las sich wie eine
   Systemmeldung. Sie ist ein normaler Satz und wird auch so
   gesetzt: Grundschrift, gemischt, ruhig. */
.status-frist{
  margin-left:auto;
  font-size:var(--t-sm);
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}

/* Die Zeile fuehrt in den Kontaktbereich – sichtbar erst, wenn
   jemand hinfasst oder mit der Tastatur ankommt. */
.status-pfeil{
  display:inline-block; margin-left:.55rem;
  opacity:0; transform:translateX(-4px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.status-linie:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);}
.status-linie:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.status-linie:hover .status-pfeil,
.status-linie:focus-visible .status-pfeil{opacity:1; transform:none;}
.status-linie:hover .status-aussage::after,
.status-linie:focus-visible .status-aussage::after{height:3px;}

/* Fuss */
.site-footer{
  background:var(--deep);
  color:var(--on-deep-muted);
  padding-block:var(--s6) var(--s4);
  font-size:var(--t-sm);
  margin-top:var(--s7);
}
.site-footer h2,.site-footer h3{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-deep-muted); font-weight:500; margin-bottom:var(--s2);
}
.site-footer a{color:var(--on-deep); text-decoration:none; transition:color var(--dur) var(--ease);}
.site-footer a:hover{color:var(--accent);}
.footer-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4);
  padding-bottom:var(--s5); border-bottom:1px solid var(--line-deep);
}
.footer-adresse p{color:var(--on-deep-muted);}
.footer-links{list-style:none; margin:0; padding:0;}
.footer-links li{margin-bottom:.45em;}
.footer-bottom{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-top:var(--s3);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.06em;
}
.footer-bottom nav ul{display:flex; flex-wrap:wrap; gap:.4em 1.1em; list-style:none; margin:0; padding:0;}
.footer-bottom li{margin:0;}
.official-links{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-top:var(--s4); margin-top:var(--s4);
  border-top:1px solid var(--line-deep);
}
.official-links-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);}
.official-links-group strong{
  display:block; color:var(--on-deep); font-weight:600; margin-bottom:.5em; font-size:var(--t-sm);
}
.official-links-group ul{list-style:none; margin:0; padding:0;}

/* ============================================================
   5  STARTSEITE
   ============================================================ */
/* Der Hero ist eine eigene Flaeche, keine Fortsetzung des Grundes:
   Verlauf in den Markentoenen, heller Text, weiche Ecken unten. */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#12293F 0%,#1B3C58 45%,#2F6690 100%);
  color:var(--on-deep);
  /* Unten knapper als oben - unter den beiden Kaesten folgt sofort
     der naechste Abschnitt. */
  padding-block:clamp(2.25rem,5vw,4rem) clamp(1.5rem,3vw,2.25rem);
}
.hero::after{
  content:""; position:absolute; left:-6%; top:-18%;
  width:34rem; height:34rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.14); pointer-events:none;
}
.hero .wrap{position:relative;}
.hero h1,.hero h2,.hero h3{color:#fff;}
.hero .lede{color:var(--on-deep); opacity:.92;}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr);
  column-gap:var(--s4); row-gap:var(--s3);
  align-items:center;
}

/* Portraet im Hero: gerahmt, weiche Ecke, tiefer Schatten. */
.hero-bild{position:relative;}
.hero-rahmen{
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:var(--schatten-l);
  aspect-ratio:4/5; background:var(--deep-2);
}
.hero-rahmen img{width:100%; height:100%; object-fit:cover; display:block;}

/* Zwei lange Kaesten unter Text UND Foto. In der schmalen Bildspalte
   brach hier vorher jede Zeile um. */
.hero-notizen{
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem;
}
.hero-notiz{
  display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-m); padding:.8rem 1rem;
}
.hero-notiz svg{width:1.4rem; height:1.4rem; flex:none; color:var(--accent);}
.hero-notiz b{
  display:block; font-family:"Fraunces",Georgia,serif;
  color:#fff; font-size:.95rem; font-weight:600; line-height:1.25;
}
.hero-notiz span{display:block; font-size:.8rem; color:var(--on-deep-muted); line-height:1.4;}
.hero h1{margin-bottom:var(--s3); max-width:16ch;}
.hero h1 .em{
  font-style:italic;
  font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 1;
}
.hero .lede{max-width:52ch;}
.hero-ctas{margin-top:var(--s4);}

.hero-status{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--t-sm); color:var(--on-deep); margin:var(--s3) 0 0;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pille); padding:.4rem .9rem;
}
.hero-status-zusatz{color:var(--on-deep-muted);}

/* Der Horizont – das strukturelle Motiv der Seite */
/* Der Horizont trug die alte Registeroptik und haette im Verlauf
   des Heros nur eine Kante erzeugt. */
.horizon,.horizon-mark{display:none;}

/* Die drei Einstiege */
.doors{padding-block:var(--s6);}
.door-list{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);}
/* Die Karte stapelt: Nummer, Ueberschrift, Text, Pfeil. Nebeneinander
   blieben dem Text in einer Drittelspalte nur rund 180 Pixel. */
.door{
  display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
  padding:var(--s3);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--schatten-s);
  text-decoration:none;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.door:hover{transform:translateY(-4px); box-shadow:var(--schatten-l); border-color:var(--sky);}
.door-no,.num{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t-mono); color:#fff;
  letter-spacing:.08em; font-weight:600;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  border-radius:var(--r-pille);
  padding:.35rem .7rem;
}
.door-body :is(h2,h3){font-size:var(--t-h3); margin-bottom:.35em; font-weight:600;}
.door-body p{color:var(--muted); font-size:var(--t-sm); max-width:56ch; margin:0;}
.door-body{flex:1;}
.door-go{color:var(--accent-ink); font-size:1.15rem; align-self:center;
  transition:transform var(--dur) var(--ease);}
.door:hover .door-go{transform:translateX(6px);}

/* Abschnitte */
.sec,.values,.services,.angehoerige,.faq,.aktuelles,.downloads,.about,.contact{
  padding-block:var(--s7);
}
.sec-sunk,.services,.aktuelles{background:var(--surface-sunk);}
.about{background:var(--surface-warm);}
.section-head,.sec-head{max-width:60ch; margin-bottom:var(--s5);}
.section-head h2,.sec-head h2{margin-bottom:var(--s2);}
.section-head p,.sec-head p{color:var(--muted); font-size:var(--t-lede); line-height:1.5;}
.on-deep{background:var(--deep); color:var(--on-deep-muted);}
.on-deep h1,.on-deep h2,.on-deep h3{color:var(--on-deep);}
.on-deep .section-head p,.on-deep .sec-head p{color:var(--on-deep-muted);}

/* Register statt Kachelparade */
/* Aus dem Register wird ein Kachelraster: eigene Flaeche je Karte,
   weiche Ecke, Schatten, beim Ueberfahren hebt sie sich an. */
.leist,.service-grid,.values-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);
}
.leist > *,.service-card,.value-card{
  padding:var(--s3);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--schatten-s);
  display:grid; gap:var(--s1); align-content:start;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.leist > *:hover,.service-card:hover,.value-card:hover{
  transform:translateY(-4px); box-shadow:var(--schatten-m); border-color:var(--sky);
}
/* Karten benutzen je nach Seite h2, h3 oder h4 – die Ebene richtet
   sich nach der Gliederung, die Groesse nach der Karte. */
.leist.leist :is(h2,h3,h4),
.service-card.service-card :is(h2,h3,h4),
.value-card.value-card :is(h2,h3,h4){
  font-size:var(--t-h3); font-weight:600; margin:0;
}
.leist p,.service-card p,.value-card p{color:var(--muted); max-width:60ch; font-size:var(--t-sm); margin:0;}
/* Die Symbole waren in der Registeroptik ausgeblendet. Hier tragen
   sie die Kachel und stehen im Kreis mit Markenverlauf. */
.leist > * svg,.service-card svg,.value-card svg{
  display:block; width:1.6rem; height:1.6rem;
  box-sizing:content-box; padding:.82rem;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff; border-radius:50%;
  box-shadow:var(--schatten-s);
  margin-bottom:.35rem;
}
.note-box{margin-top:var(--s5); max-width:70ch;}

/* Ablauf: gezeichnete Zeitachse */
/* Ablauf: vier Stationen nebeneinander, verbunden von einer Linie
   im Verlauf. Vorher eine senkrechte Zeitachse auf dunklem Grund -
   die passte zur Registeroptik, nicht zu diesem Layout. */
.steps{
  position:relative; display:grid; gap:var(--s4);
  grid-template-columns:minmax(0,1fr);
  padding:0; margin:0; list-style:none;
}
/* Die Kachel hat vier Kinder, eines davon nur fuer Screenreader und
   absolut positioniert. Ohne benannte Felder landete der Absatz auf
   Mobil in der schmalen Nummernspalte - Umbruch nach jedem Wort. */
.step{
  position:relative; margin:0;
  display:grid; grid-template-columns:3.8rem minmax(0,1fr); gap:var(--s2);
  grid-template-areas:"nr titel" "nr text";
  align-items:start;
}
.step-no{grid-area:nr;}
.step > h3{grid-area:titel;}
.step > p{grid-area:text;}
.step-no{
  width:3.8rem; height:3.8rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface); border:2px solid var(--sky); color:var(--ink);
  font-family:"Fraunces",Georgia,serif; font-size:1.2rem; font-weight:600;
  box-shadow:var(--schatten-s);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.step.lit .step-no{border-color:var(--accent);}
.step h3{font-size:var(--t-h3); margin-bottom:.35em; font-weight:600;}
.step p{max-width:56ch; font-size:var(--t-sm); margin:0; color:var(--muted);}

@media (min-width:901px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3);}
  /* Die Verbindungslinie liegt hinter den Kreisen und laeuft von
     der Mitte des ersten bis zur Mitte des letzten. */
  .steps::before{
    content:""; position:absolute; top:1.9rem; height:2px;
    left:calc(12.5% + 1.9rem); right:calc(12.5% + 1.9rem);
    background:linear-gradient(90deg,var(--sky),var(--accent)); opacity:.5;
  }
  .step{
    grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center;
    grid-template-areas:"nr" "titel" "text";
  }
  .step-no{position:relative; z-index:1;}
  .step p{text-align:center;}
}

/* Ueber mich */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5); align-items:start;}
.about-photo{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:var(--surface-sunk); box-shadow:var(--schatten-l);
}
.about-photo img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:saturate(.92);}
/* Der Akzentstrich war Teil der Registeroptik und schnitt hier
   nur die gerundete Ecke an. */
.about-photo::after{display:none;}
.about-text .lede{
  color:var(--ink);
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'opsz' 48,'SOFT' 40,'WONK' 0;
  font-weight:400; margin-bottom:var(--s3);
}
.about-text p{color:var(--muted); font-size:var(--t-sm); max-width:60ch;}
.skills{margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line);}
.todo{
  margin-top:var(--s3); font-size:var(--t-sm); color:var(--accent-ink);
  border:1px dashed var(--accent); padding:.7em .9em;
  border-radius:var(--radius); max-width:60ch;
}

/* Nachweis der Registrierung nach § 24 BtOG */
.registrierung{
  display:flex;
  align-items:flex-start;
  gap:.7em;
  margin-top:var(--s3);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--t-sm);
  color:var(--ink);
  max-width:62ch;
}
.registrierung svg{flex:none; color:var(--accent-ink); margin-top:.15em;}

/* Werkzeuge / Infothek */
/* Werkzeuge: eigenstaendige Kacheln. Vorher ein Gitternetz aus
   Haarlinien, dessen Zellen den Grund der Seite trugen. */
.tools,.hub-grid,.download-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);
  background:none; border:0;
}
.tool,.hub-card,.download-card{
  background:var(--surface); padding:var(--s3);
  border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--schatten-s);
  text-decoration:none;
  display:flex; flex-direction:column; gap:var(--s1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.tool:hover,.hub-card:hover,.download-card:hover{
  transform:translateY(-4px); box-shadow:var(--schatten-m); border-color:var(--sky);
}
.sec-sunk .tool,.sec-sunk .hub-card,.sec-sunk .download-card{background:var(--surface);}
.tool-no{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.14em; color:var(--accent-ink);
  position:absolute; opacity:0; pointer-events:none;
}
/* Der Klassenname steht doppelt, um .page-body h2 zu schlagen:
   Die Regel dort setzt 48 Pixel Abstand nach oben und riss in den
   Kacheln der Infothek eine Luecke zwischen Symbol und Titel.
   Gleiche Spezifitaet, spaeter im Stylesheet - also gewann sie. */
.tool.tool :is(h2,h3,h4),
.hub-card.hub-card :is(h2,h3,h4),
.download-card.download-card :is(h2,h3,h4){
  font-size:var(--t-h3); font-weight:600; margin:0;
}
.tool p,.hub-card p,.download-card p{color:var(--muted); font-size:var(--t-sm); flex:1; margin:0; max-width:44ch;}
.tool .tlink,.hub-card .more,.download-card a{margin-top:var(--s2); align-self:flex-start;}
/*
 * Ein Teil der Symbole steht handgeschrieben im Markup - ohne
 * fill="none" und ohne stroke. Solange das alte Design sie mit
 * display:none versteckte, fiel das nicht auf; sichtbar wurden
 * daraus schwarze Klumpen. Die Darstellung wird deshalb hier
 * festgelegt und nicht dem Markup ueberlassen.
 */
.leist > * svg,.service-card svg,.value-card svg,
.tool svg,.hub-card svg,.download-card svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tool svg,.hub-card svg,.download-card svg{
  display:block; width:1.5rem; height:1.5rem;
  box-sizing:content-box; padding:.75rem;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff; border-radius:50%; box-shadow:var(--schatten-s);
  margin-bottom:.25rem;
}

/* FAQ */
/* Jede Frage ist eine eigene Flaeche - in der Registeroptik waren
   es Zeilen zwischen Haarlinien. */
.faq-list{max-width:80ch; display:grid; gap:.75rem;}
.faq-item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--schatten-s);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.faq-item:has(.faq-question[aria-expanded="true"]){border-color:var(--sky);}
.faq-question{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:var(--s2) var(--s3);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'opsz' 36,'SOFT' 28,'WONK' 0;
  font-size:1rem; font-weight:600; color:var(--ink);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-question:hover{color:var(--ink); background:var(--surface-sunk);}
.faq-question::after{
  content:""; flex:none; width:14px; height:14px; position:relative;
  align-self:center;
  background:
    linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 100% no-repeat;
  transition:transform var(--dur) var(--ease);
}
.faq-question[aria-expanded="true"]::after{transform:rotate(90deg);
  background:linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat;}
/* Ohne JavaScript stehen alle Antworten offen. Erst wenn site.js
   die Aufklapplogik übernommen hat, setzt es .js-faq – vorher wäre
   eine zugeklappte Antwort für niemanden erreichbar. */
.faq-answer{overflow:hidden;}
.js-faq .faq-answer{height:0;}
.faq-answer p{
  color:var(--muted); font-size:var(--t-sm); max-width:64ch;
  padding:0 var(--s3) var(--s3); margin:0;
}

/* Kontakt */
.contact{background:var(--deep-2); color:var(--on-deep-muted);}
.contact h2,.contact h3{color:var(--on-deep);}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5);}
.contact .lede{color:var(--on-deep-muted); max-width:46ch;}
.contact .btn{--btn-bg:var(--accent); --btn-fg:#12293F; border-color:var(--accent);}
.contact .btn-ghost{--btn-bg:transparent; --btn-fg:var(--on-deep); border-color:var(--line-deep);}

.status-card,.telefon-hinweis,.office-hours,.epost-hinweis{
  padding:var(--s3);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-l);
  margin-bottom:var(--s2);
}
.status-card{display:flex; gap:.8em; align-items:center;}
.status-card h3,.telefon-hinweis h3,.office-hours h3,.epost-hinweis h3{
  font-size:var(--t-sm); font-family:'Public Sans',sans-serif;
  font-weight:700; color:var(--on-deep); margin:0 0 .3em;
  display:flex; align-items:center; gap:.5em;
}
.status-card p,.telefon-hinweis p,.office-hours p,.epost-hinweis p{
  font-size:var(--t-sm); color:var(--on-deep-muted); margin:0 0 .6em;
}
.status-card p:last-child{margin-bottom:0;}

/* Die Telefonnummer im Kontaktbereich. Sie ersetzt die frühere
   Rückrufvereinbarung und ist damit der direkteste Weg auf der
   Seite – entsprechend gross und ohne Umweg über einen Knopf. */
/* Die Anschrift sitzt jetzt in der Box mit den Bürozeiten, abgesetzt
   durch eine Haarlinie: Wer liest, wann geöffnet ist, will als
   Nächstes wissen, wo. Vorher stand sie als rahmenlose Zeile
   darunter und sah aus wie ein vergessener Rest. */
.buero-anschrift{
  padding-top:.7em; margin-top:.7em !important; margin-bottom:0 !important;
  border-top:1px solid var(--line-deep);
  color:var(--on-deep) !important;
}
.buero-marke{
  display:block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-deep-muted); margin-bottom:.25em;
}
/* Das Fax schliesst an die Anschrift an – gleiche Trennlinie,
   damit im Kasten nicht zwei verschiedene Abstaende entstehen. */
.buero-fax{
  padding-top:.7em; margin-top:.7em !important; margin-bottom:0 !important;
  border-top:1px solid var(--line-deep);
  color:var(--on-deep) !important;
}
.buero-anschrift a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line-deep);}
.buero-anschrift a:hover{border-bottom-color:var(--accent);}

.epost-adresse{margin:.2em 0 0 !important;}
.epost-adresse a{
  font-size:1.05rem; font-weight:600; color:var(--on-deep);
  text-decoration:none; word-break:break-word;
  border-bottom:2px solid var(--accent); padding-bottom:2px;
}
.epost-adresse a:hover{color:var(--accent);}

.telefon-nummer{margin:.2em 0 0 !important;}
.telefon-nummer a{
  font-size:1.35rem; font-weight:600; color:var(--on-deep);
  text-decoration:none; letter-spacing:.01em;
  border-bottom:2px solid var(--accent); padding-bottom:2px;
}
.telefon-nummer a:hover{color:var(--accent);}
/* Die Vertretung bei Abwesenheit – abgesetzt, weil sie ein anderer
   Gedanke ist als der Hinweis darueber. */
.status-vertretung{
  padding-top:.5em; margin-top:.5em;
  border-top:1px solid var(--line-deep);
}
.inline-icon{width:16px; height:16px; flex:none; color:var(--accent);}

.map-container{margin-top:var(--s4); border:1px solid var(--line-deep); border-radius:var(--radius); overflow:hidden;}
.map-container iframe{display:block; width:100%; height:320px; border:0;}

.contact-form,.form-block{
  background:var(--surface); color:var(--body);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4);
}
.contact-form h3,.form-kopf h3{color:var(--ink);}

/* ============================================================
   6  UNTERSEITEN
   ============================================================ */
.page-head{
  padding-block:var(--s6) var(--s4);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s5);
}
.page-head h1{max-width:20ch; margin-bottom:var(--s3);}
.page-head .lede{max-width:62ch;}
/*
 * .page-body ist immer das <section>, das ein .wrap enthält – nie
 * der Textblock selbst. Eine Breitenbegrenzung gehört deshalb NICHT
 * hierher: Sie würde den ganzen Abschnitt zusammenstauchen und
 * mangels margin:auto nach links kleben lassen. Die Lesebreite
 * setzen die Textbausteine weiter unten (.legal-block, .doc-section,
 * .article-body) oder die Seite selbst am .wrap.
 */
.page-body{padding-bottom:var(--s6);}
.page-body h2{margin-top:var(--s5);}
.page-body h3{margin-top:var(--s4);}
/* Fließtext direkt im Abschnitt bekommt Lesebreite, Raster nicht. */
.page-body > .wrap > :where(p,ul,ol,dl){max-width:var(--measure);}

.legal{padding-block:var(--s6) var(--s7);}
.block{margin-bottom:var(--s5);}
.back-link{margin-bottom:var(--s3);}

/* Beitraege */
.article-list{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);}
.article-card{
  padding:var(--s3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--schatten-s);
  display:grid; gap:.4rem; align-content:start;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.article-card:hover{transform:translateY(-4px); box-shadow:var(--schatten-m); border-color:var(--sky);}
.article-card time,.article-meta{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.1em; color:var(--muted);
}
.article-card :is(h2,h3){margin:0; font-size:var(--t-h3);}
.article-card :is(h2,h3) a{text-decoration:none; transition:color var(--dur) var(--ease);}
.article-card :is(h2,h3) a:hover{color:var(--accent-ink);}
.article-card p{color:var(--muted); font-size:var(--t-sm); margin:0;}
.article-body{max-width:68ch;}
.article-body h2{font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem); margin-top:var(--s5);}
.article-body ul{padding-left:1.1em;}
.article-body li{margin-bottom:.5em;}
.beitrag-mehr{margin-top:var(--s4);}

/* Blaettern */
.blaettern{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line);
}
.blaettern-seiten{display:flex; gap:.35rem; flex-wrap:wrap;}
.blaettern-zaehler{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); color:var(--muted); letter-spacing:.08em;
}

/* Glossar */
.alpha-index{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding-bottom:var(--s3); margin-bottom:var(--s4);
}
.glossary-group{margin-bottom:var(--s5);}
.glossary-group > h2{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.2em; color:var(--accent-ink);
  border-bottom:1px solid var(--line); padding-bottom:.5em; margin-bottom:var(--s3);
}
/* Ein Glossareintrag ist eine Karte, keine Zeile zwischen zwei
   Haarlinien - dieselbe Umstellung wie ueberall sonst. */
/* Die Eintraege stehen direkt in der Gruppe, es gibt keinen
   Listenbehaelter - der Abstand haengt deshalb am Eintrag. */
.glossary-entry{
  padding:var(--s3);
  margin-bottom:.75rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--schatten-s);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.glossary-entry:hover{transform:translateY(-2px); box-shadow:var(--schatten-m); border-color:var(--sky);}
.glossary-entry h3{margin-bottom:.3em;}
.glossary-entry p{color:var(--muted); font-size:var(--t-sm);}

/* Suche */
.such-einstiege,.such-liste{
  display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem;
  list-style:none; margin:0; padding:0;
}
.such-treffer{
  padding:var(--s3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--schatten-s);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.such-treffer:hover{transform:translateY(-2px); box-shadow:var(--schatten-m); border-color:var(--sky);}
.such-treffer h3{margin-bottom:.2em; font-size:1.15rem;}
.such-url{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); color:var(--muted); letter-spacing:.06em;
  /* Eine Adresse hat keine Trennstellen – ohne "anywhere" bliebe sie
     in einer Zeile stehen und würde die Trefferliste auseinanderziehen. */
  overflow-wrap:anywhere;
}
.such-ausschnitt{color:var(--muted); font-size:var(--t-sm); margin:.4em 0 0;}
.such-ausschnitt mark{
  background:color-mix(in srgb,var(--accent) 30%,transparent);
  color:var(--ink); padding:0 .15em; border-radius:2px;
}
.such-zaehler{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); color:var(--muted); letter-spacing:.08em; margin-bottom:var(--s3);
}
.such-gruppe{margin-bottom:var(--s5);}


/* Selbsttest / Quiz */
.choice-grid{display:grid; gap:.6rem;}
.choice{
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:.9em 1em; background:var(--surface);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover{border-color:var(--accent);}
.choice:has(input:checked){border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface));}
.quiz-bar{height:3px; background:var(--line); margin-bottom:var(--s4); overflow:hidden;}
.quiz-bar > *{display:block; height:100%; background:var(--accent); transition:width .4s var(--ease);}
.quiz-result,.result-panel{border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); background:var(--surface);}
.quiz-score,.result-main{
  font-family:'Fraunces',Georgia,serif; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.schritte-anzeige{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t-mono); letter-spacing:.14em; color:var(--muted); margin-bottom:var(--s2);
}

/* Rechner */
.calc-grid,.detail-raster,.raster-2{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4);}
.calc-step{margin-bottom:var(--s4);}
.result-rows{display:grid; gap:.5rem; margin-top:var(--s3);}
.result-rows > div{display:flex; justify-content:space-between; gap:var(--s2);
  padding-block:.5em; border-bottom:1px solid var(--line); font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;}
.result-payer{margin-top:var(--s3); font-size:var(--t-sm); color:var(--muted);}
.table-scroll,.tabelle-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* Rechtstexte */
.legal-block,.doc-section{margin-bottom:var(--s5); max-width:74ch;}
.legal-block h2,.doc-section h2{margin-bottom:var(--s2);}
.legal-block h3{margin-top:var(--s3);}
.doc-grid,.emergency-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3);}

/* Notfallmappe */
.med-row{display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem; margin-bottom:.5rem;}

/* Datenschutzhinweis */
.privacy-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 32px -20px rgba(22,50,79,.5);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
}
.privacy-banner.sichtbar{transform:none;}
.privacy-banner-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  justify-content:space-between; padding-block:var(--s3);
}
.privacy-banner p{margin:0; font-size:var(--t-sm); color:var(--muted); max-width:62ch;}

/* Rueckmeldefenster */
.modal-overlay{
  position:fixed; inset:0; z-index:80;
  background:color-mix(in srgb,var(--deep) 72%,transparent);
  display:flex; align-items:center; justify-content:center;
  padding:var(--s3);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.modal-overlay.sichtbar{opacity:1; pointer-events:auto;}
.modal-box{
  background:var(--surface); border-radius:var(--radius);
  padding:var(--s4); max-width:26rem; width:100%;
  position:relative; text-align:center;
  transform:translateY(12px);
  transition:transform var(--dur) var(--ease);
}
.modal-overlay.sichtbar .modal-box{transform:none;}
.modal-close{
  position:absolute; top:.5rem; right:.5rem;
  background:none; border:0; font-size:1.5rem; line-height:1;
  color:var(--muted); cursor:pointer; width:44px; height:44px;
}

/* Dateiauswahl */
.upload-zone{
  border:1px dashed var(--line-strong); border-radius:var(--radius);
  padding:var(--s3); text-align:center; cursor:pointer;
  color:var(--muted); font-size:var(--t-sm);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.upload-zone:hover,.upload-zone.aktiv{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent);}
/* Das Dateifeld bringt eine eigene Breite mit (Knopf plus Dateiname)
   und stand auf schmalen Bildschirmen ueber den gestrichelten Rand. */
.upload-zone input[type="file"]{max-width:100%;}
.upload-list,.datei-liste,.anhang-liste{list-style:none; margin:var(--s2) 0 0; padding:0; font-size:var(--t-sm);}
.upload-list li,.datei-liste li,.anhang-liste li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding-block:.5em; border-bottom:1px solid var(--line);
}

/* Assistentenfenster */
.fragen-seite .fragen-antwort,.fragen-antwort{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-s);
  box-shadow:var(--schatten-s);
  padding:var(--s3); margin-bottom:var(--s3);
}
.fragen-quelle,.fragen-hinweis{font-size:var(--t-sm); color:var(--muted);}
/* Der Behaelter enthaelt eine Ueberschrift UND eine Liste. Als
   flex-Reihe standen beide nebeneinander und die Liste behielt
   ihre Punkte - ein Bestandsfehler. */
.fragen-beispiele{margin-bottom:var(--s3);}
.fragen-beispiele h2{font-size:var(--t-h3); margin-bottom:var(--s2);}
.fragen-beispiele ul{
  display:flex; flex-wrap:wrap; gap:.5rem;
  list-style:none; margin:0; padding:0;
}
.fragen-beispiele li{margin:0;}
.fragen-beispiele a{
  display:inline-flex; align-items:center;
  font-size:.85rem; font-weight:600; text-decoration:none;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pille);
  padding:.45em .95em; box-shadow:var(--schatten-s);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fragen-beispiele a:hover{border-color:var(--sky); box-shadow:var(--schatten-m);}

/* Ablage */
.abholung-kopf{padding-block:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s4);}
.pin-feld{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:1.6rem; letter-spacing:.5em; text-align:center;
  max-width:10em;
}

/* Ausdruck-Hilfen */
.brief-blatt{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s5);
  max-width:70ch; line-height:1.7;
}

/* ============================================================
   7  BEWEGUNG
   ============================================================ */
@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes grow{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes draw{to{stroke-dashoffset:0;}}

.enter{opacity:0; animation:rise .8s var(--ease) forwards;}
.enter[data-d="1"]{animation-delay:.15s;}
.enter[data-d="2"]{animation-delay:.28s;}
.enter[data-d="3"]{animation-delay:.41s;}
.enter[data-d="4"]{animation-delay:.54s;}
.enter[data-d="5"]{animation-delay:.67s;}

.horizon{animation:grow 1.1s var(--ease) .7s both;}

/* Der Haken im Schild zeichnet sich – der eine orchestrierte Moment */
.brand .tick{stroke-dasharray:120; stroke-dashoffset:120; animation:draw .9s var(--ease) .45s forwards;}
.brand .seal{opacity:0; animation:rise .5s var(--ease) 1.25s forwards;}

/*
 * Einblendungen beim Scrollen.
 *
 * Versteckt wird ausschliesslich unter .js-reveal – die Klasse setzt
 * site.js selbst, unmittelbar bevor es den Beobachter einrichtet.
 * Ohne JavaScript, bei einem Ladefehler oder bei einem Skriptfehler
 * steht der Inhalt also einfach da. Andernfalls wäre eine einzige
 * fehlgeschlagene Datei genug, um die ganze Seite leer erscheinen
 * zu lassen – und ausgerechnet auf dieser Website sitzen davor
 * Menschen in einer angespannten Lage.
 */
.js-reveal .rv{opacity:0; transform:translateY(16px);}
.rv{transition:opacity .7s var(--ease), transform .7s var(--ease);}
.rv.in{opacity:1; transform:none;}
.js-reveal .rv-stagger > *{opacity:0; transform:translateY(16px);}
.rv-stagger > *{transition:opacity .6s var(--ease), transform .6s var(--ease);}
.rv-stagger.in > *{opacity:1; transform:none;}
.rv-stagger.in > *:nth-child(1){transition-delay:0s;}
.rv-stagger.in > *:nth-child(2){transition-delay:.07s;}
.rv-stagger.in > *:nth-child(3){transition-delay:.14s;}
.rv-stagger.in > *:nth-child(4){transition-delay:.21s;}
.rv-stagger.in > *:nth-child(5){transition-delay:.28s;}
.rv-stagger.in > *:nth-child(6){transition-delay:.35s;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .enter,.rv,.rv-stagger > *{opacity:1; transform:none;}
  .brand .tick{stroke-dashoffset:0;}
  .brand .seal{opacity:1;}
  html{scroll-behavior:auto;}
  .steps::after{height:100% !important;}
}

/* ============================================================
   8  BREAKPOINTS – mobile first
   ============================================================ */
@media (max-width: 900px){
  .primary-nav{
    position:fixed; inset:0 0 auto 0; top:var(--header-h,72px);
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:var(--s2) var(--gutter) var(--s4);
    transform:translateY(-8px); opacity:0;
    pointer-events:none; visibility:hidden;
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    max-height:calc(100dvh - var(--header-h,72px)); overflow-y:auto;
  }
  .primary-nav[data-open]{opacity:1; transform:none; pointer-events:auto; visibility:visible;}
  .primary-nav ul{flex-direction:column; align-items:stretch; gap:0;}
  .primary-nav a{
    display:block; padding:.7rem .85rem; border-radius:var(--r-s);
    border-bottom:1px solid var(--line); font-size:1rem;
  }
  .nav-toggle-label{display:flex;}

  /* Die Statuszeile darf auf kleinen Geraeten enger sitzen. Die
     Frist rechts bleibt aber stehen – sie ist das Nuetzlichste an
     der Zeile und rutscht hier einfach in die zweite Reihe. */
  .status-linie-inner{padding-block:.45rem; line-height:1.35;}
  /* Versalien und Sperrung sind fuer einen langen Satz zu breit und
     kosten hier eine ganze Zeile. Auf schmalen Geraeten deshalb
     gemischt gesetzt – die Angabe bleibt, der Platz nicht. */
  .status-frist{margin-left:0; font-size:.82rem;}
  .hero-status-zusatz{display:none;}

  /* Auf dem Telefon sind 72 Pixel ueber dem Zurueck-Link zu viel -
     dieselbe Straffung wie im Hero. */
  .page-head{padding-block:var(--s4) var(--s3); margin-bottom:var(--s4);}
}

/* Kopfleiste auf dem Telefon.
 *
 * Wortmarke, Kontaktknopf und Menueknopf brauchten zusammen mehr
 * Platz als vorhanden. Weil alle drei schrumpfen durften, ging es
 * beim Kleinsten aus: Der Menueknopf war auf 375 Pixeln nur noch
 * 24 statt 44 Pixel breit, auf 360 Pixeln 20 - und auf 320 Pixeln
 * lag er ganz ausserhalb des Bildes, die ganze Seite liess sich
 * seitlich schieben. Der Knopf ist die einzige Tuer zur Navigation
 * und behaelt seine Groesse deshalb unter allen Umstaenden. */
.nav-toggle-label{flex:none;}

@media (max-width: 520px){
  .nav-inner{gap:.55rem;}
  /* Der gesperrte Zusatz "Rechtliche Betreuung" ist breiter als der
     Name darueber und kostet genau den Platz, der den beiden
     Knoepfen fehlt. Auf dem Telefon steht deshalb nur der Name -
     die Taetigkeit sagt schon die Statuszeile eine Reihe tiefer. */
  .brand-text span{display:none;}
}

@media (max-width: 359px){
  /* Ganz schmale Geraete: hier weicht der Kontaktknopf. Kontakt
     steht im aufgeklappten Menue und gleich darunter im Hero. */
  .nav-cta{display:none;}
}

@media (min-width: 640px){
  .leist,.service-grid,.values-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .door-list{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tools,.hub-grid,.download-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .article-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .field-reihe,.feld-reihe,.form-zweispaltig,.zweispaltig{grid-template-columns:repeat(2,minmax(0,1fr));}
  .doc-grid,.emergency-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .med-row{grid-template-columns:1.4fr 1fr 1fr auto;}
}

@media (min-width: 901px){
  .nav-cta{display:inline-flex;}
  .hero-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(2rem,5vw,4rem); row-gap:var(--s3);
  }
  .hero-notizen{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s6);}
  /* .contact-grid bekommt hier bewusst KEINE zweite Spalte. Neben dem
     Text blieb dem Formular so wenig Breite, dass die Auswahlfelder
     einzeln untereinander standen – sechs Zeilen fuer sechs Woerter.
     Untereinander hat das Formular die volle Breite. */
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}
  .calc-grid,.detail-raster,.raster-2{grid-template-columns:1.15fr .85fr;}
  .official-links-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .form-dreispaltig{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (min-width: 1024px){
  .tools,.hub-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .article-list{grid-template-columns:repeat(3,minmax(0,1fr));}
  .download-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .leist,.service-grid,.values-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ============================================================
   9  DRUCK
   ============================================================ */
@media print{
  /* Schatten und weiche Ecken kosten auf Papier nur Toner und
     bringen nichts - im Druck bleibt die Flaeche flach. */
  :root{
    --ground:#fff; --surface:#fff; --ink:#000; --body:#111; --muted:#444; --line:#bbb;
    --schatten-s:none; --schatten-m:none; --schatten-l:none;
    --radius:4px; --r-s:4px; --r-m:4px; --r-l:4px; --r-xl:4px;
  }
  *{box-shadow:none !important;}
  .site-header,.site-footer,.privacy-banner,.no-print,.nav-toggle-label,
  .status-linie,.skip-link,.modal-overlay{display:none !important;}
  body{background:#fff; color:#000; font-size:11pt;}
  a{text-decoration:underline;}
  .page-body,.article-body,.brief-blatt{max-width:none;}
  .rv,.rv-stagger > *,.enter{opacity:1 !important; transform:none !important;}
  .brief-blatt{border:0; padding:0;}
}

/* ---------- Sicherheitsabfrage ----------
   Bis hierher war das Feld ueberhaupt nicht gestaltet - es gab keine
   einzige .captcha-Regel im oeffentlichen Stylesheet, der Knopf war
   ein grauer Browserknopf. Die Aufgabe selbst steht jetzt in der
   Beschriftung, damit Screenreader sie zusammen mit dem Feld
   vorlesen und nicht als losgeloesten Text davor. */
.captcha-aufgabe{
  display:block; margin-top:.25em;
  font-weight:400; color:var(--muted); font-size:.85rem;
}
.captcha-aufgabe::first-line{color:var(--muted);}
.captcha-field{display:flex; gap:.5rem; align-items:stretch;}
.captcha-field input{flex:1 1 auto; min-width:0;}
.captcha-refresh{
  flex:none; width:44px;
  background:transparent; color:var(--muted);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  font-size:1.05rem; line-height:1; cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.captcha-refresh:hover{border-color:var(--accent); color:var(--ink);}
.captcha-refresh:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}