/* ==========================================================================
   remoser.ch — Stil (Rot / Weiss / Schwarz). Kein Tailwind, keine Fremdschrift.
   Aussehen steckt vollständig hier, nicht im JavaScript (Handbuch 6.3).
   Stellschrauben stehen oben in :root und sind einzeln kommentiert.
   Version 002: fettere Titel, mehr Rot, scharf abgegrenzte Hintergrundflächen.
   Version 003: Porträt im Hero, Sektion «Ziele» mit scroll-gesteuertem Film.
   ========================================================================== */

:root{
  --weiss:   #ffffff;   /* Seitengrund */
  --schwarz: #111111;   /* Text */
  --grau:    #4a4a4a;   /* Zweittext, Kontrast auf Weiss >= 8:1 */
  --linie:   #d9d9d9;   /* feine Linien */
  --sand:    #ecd7bb;   /* Fläche hinter den Einträgen (Ruhezustand) */
  --sand-hell:#f4e4d0;  /* heller bei Maus-Berührung und wenn der Eintrag auf Augenhöhe steht */
  --rot:     #b3121c;   /* Akzent; Kontrast auf Weiss 6.95:1, weisse Schrift auf Rot ebenso */
  --breite:  68rem;     /* maximale Inhaltsbreite */
  --lese:    38rem;     /* maximale Zeilenlänge im Fliesstext */
  --kopf:    4.5rem;    /* Höhe der Kopfzeile (für scroll-margin) */
  --einblenden: .9s;    /* Dauer der sanften Reaktion (Stimme, Hintergrundfläche) */
  --bild-deckkraft: .2; /* Stärke des unscharfen Hintergrundbilds, 0 = aus */
  --bild-unschaerfe: 22px; /* Unschärfe INNERHALB der Fläche; der Rand bleibt scharf */
  --schub: 14px;        /* Versatz des roten Blocks hinter dem Hero-Foto, 0 = aus */
  --titel: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* Titelschrift: kräftiger Grotesk, 800/900 */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--weiss)}
body{margin:0;background:var(--weiss);color:var(--schwarz);
  font:400 1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
::selection{background:var(--rot);color:#fff}

/* ---------- Grundlage: Fokus, Sprunglink, Überlauf-Wächter ---------- */
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.sprunglink{position:absolute;left:-999px;top:0;background:var(--weiss);color:var(--schwarz);padding:.6rem 1rem;z-index:100}
.sprunglink:focus{left:.5rem;top:.5rem}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 1.25rem}

/* ---------- Kopfzeile: roter Streifen oben, Name mit rotem Block ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-top:6px solid var(--rot);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;min-height:var(--kopf);padding-top:.35rem;padding-bottom:.35rem}
.marke{display:inline-flex;align-items:center;gap:.6rem;font:900 1.25rem/1.2 var(--titel);letter-spacing:-.02em;text-decoration:none}
.marke::before{content:"";width:.8rem;height:.8rem;background:var(--rot)}
.marke:hover{color:var(--rot)}
.nav{display:flex;flex-wrap:wrap;gap:.25rem .35rem;font-size:.9375rem;font-weight:600}
.nav a{text-decoration:none;padding:.35rem .7rem}
.nav a:hover,.nav a[aria-current="true"]{background:var(--rot);color:#fff}

/* ---------- Hero ---------- */
.hero{padding:3.5rem 0 4rem;border-bottom:6px solid var(--rot);overflow-x:clip}
.hero .wrap{display:grid;gap:2.5rem;grid-template-columns:1fr}
.hero-balken{display:block;width:5rem;height:8px;background:var(--rot);margin:0 0 1.5rem}
.hero h1{font:900 clamp(3.2rem,12vw,6.5rem)/.92 var(--titel);letter-spacing:-.045em;margin:0 0 1.5rem}
.hero .claim{font:900 clamp(1.45rem,3.6vw,2rem)/1.15 var(--titel);letter-spacing:-.025em;margin:0 0 1.5rem;max-width:34rem}
.hero .lead{font:600 clamp(1.2rem,3vw,1.5rem)/1.35 var(--titel);letter-spacing:-.01em;max-width:30rem;margin:0}
.hero .lead strong{display:block;margin-top:.5rem;color:var(--rot);font-weight:800}
.hero-bild{margin:0 var(--schub) var(--schub) 0;background:#f1f1f1;box-shadow:var(--schub) var(--schub) 0 var(--rot)}
.hero-bild img{display:block;width:100%;height:auto}
@media (min-width:56rem){
  .hero{padding:5.5rem 0 6rem}
  .hero .wrap{grid-template-columns:1.3fr .7fr;align-items:center;gap:4rem}
}

/* ---------- Abschnitte: grosse rote Nummer, fette Versalien-Titel ---------- */
.abschnitt{padding:4rem 0;border-top:1px solid var(--linie);scroll-margin-top:var(--kopf);overflow-x:clip} /* schneidet die überstehende Hintergrundfläche ab, sonst weitet sich das Handy-Fenster */
.abschnitt > .wrap > .nr{display:block;font:900 clamp(3rem,9vw,5rem)/1 var(--titel);letter-spacing:-.05em;color:var(--rot);margin:0 0 .25rem}
.abschnitt > .wrap > h2{font:900 clamp(1.9rem,5.5vw,3rem)/1.05 var(--titel);letter-spacing:-.02em;text-transform:uppercase;margin:0 0 .75rem;text-wrap:balance}
.abschnitt > .wrap > h2::after{content:"";display:block;width:4rem;height:6px;background:var(--rot);margin-top:1rem}

/* ---- Ziele: Film läuft mit dem Scrollen (Version 003). Die Bühne bleibt stehen, solange der Film läuft. ---- */
.ziele{border-top:1px solid var(--linie);scroll-margin-top:var(--kopf)}
.ziele[hidden]{display:none}
.ziele-lauf{position:relative}
.js .ziele-lauf{height:var(--ziele-weg,260vh)} /* STELLSCHRAUBE: Scrollweg, der den Film von Anfang bis Ende abspielt */
.ziele-buehne{position:sticky;top:var(--kopf);min-height:calc(100vh - var(--kopf));min-height:calc(100svh - var(--kopf));display:flex;align-items:center;padding:2rem 0}
.ziele-buehne .wrap{width:100%}
.ziele h2{font:900 clamp(1.9rem,5.5vw,3rem)/1.05 var(--titel);letter-spacing:-.02em;text-transform:uppercase;margin:0 0 .75rem}
.ziele h2::after{content:"";display:block;width:4rem;height:6px;background:var(--rot);margin-top:1rem}
.ziele-film{margin:1.25rem 0 0;width:min(100%,calc((100vh - var(--kopf) - 20rem) * 16 / 9));width:min(100%,calc((100svh - var(--kopf) - 20rem) * 16 / 9));min-width:min(100%,18rem)}
.ziele-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#fff}
.ziele-strich{display:block;height:6px;background:var(--linie);margin-top:.75rem}
.ziele-strich i{display:block;height:100%;background:var(--rot);transform-origin:0 50%;transform:scaleX(var(--fortschritt,1))}
.ziele-text{margin:.75rem 0 0;color:var(--grau);font-size:.95rem;max-width:var(--lese)}
@media (max-width:55.99rem){ .js .ziele-lauf{height:var(--ziele-weg,220vh)} }
@media (prefers-reduced-motion:reduce){ .js .ziele-lauf{height:auto} .ziele-buehne{position:static;min-height:0} }
@media print{ .js .ziele-lauf{height:auto} .ziele-buehne{position:static;min-height:0} }
.einleitung{max-width:var(--lese);color:var(--grau);margin:1.25rem 0 3rem}
#start,#kontakt{scroll-margin-top:var(--kopf)}
.kurz{max-width:var(--lese)}

/* ---------- Fakt und Stimme ---------- */
.liste{position:relative;margin:0;padding:0 0 0 1.75rem;list-style:none;border-left:3px solid var(--rot)}
.eintrag{position:relative;isolation:isolate;--flaeche:var(--sand);padding:0 0 1.75rem}
.eintrag:last-child{padding-bottom:0}
/* Sandfarbene Fläche mit scharfem Rand. Wird die Fläche eingeklappt, zeigt sie nur die obere Hälfte (siehe site.js). */
.eintrag-inhalt{position:relative;box-sizing:border-box;display:grid;gap:1.25rem;padding:1.5rem 1.25rem;background:var(--flaeche);transition:background var(--einblenden) ease}
/* Punkt auf der Linie: rot umrandet, wird beim Aktivwerden voll rot und grösser */
.eintrag::after{content:"";position:absolute;left:calc(-1.75rem - 9px);top:2rem;width:15px;height:15px;
  background:var(--weiss);border:3px solid var(--rot);transition:background var(--einblenden) ease,transform var(--einblenden) ease}
/* Hintergrundfläche mit SCHARFEM Rand: Das Element ist 60px grösser als sichtbar, wird unscharf gerechnet
   und dann mit clip-path auf die echte Fläche zugeschnitten. So verläuft nur das Bild weich, die Kante nicht.
   Bild kommt per --bild (siehe HTML); ohne Bild bleibt die Fläche leer. */
.eintrag::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:calc(-1.25rem - 60px) calc(-1rem - 60px) calc(2.25rem - 60px) calc(-1rem - 60px);
  clip-path:inset(60px);background:var(--bild,none) center/cover no-repeat;
  filter:blur(var(--bild-unschaerfe));opacity:0;transition:opacity var(--einblenden) ease}

.jahr{margin:0 0 .35rem;font:900 1.75rem/1 var(--titel);letter-spacing:-.03em;color:var(--rot);font-variant-numeric:tabular-nums}
.fakt h3{font:800 1.5rem/1.2 var(--titel);letter-spacing:-.02em;margin:0 0 1rem}
.fakt dl{margin:0;max-width:var(--lese)}
.fakt dt{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rot);font-weight:800;margin-top:.9rem}
.fakt dd{margin:.1rem 0 0}
.fakt .beleg{font-size:.9375rem;color:var(--grau);margin:1rem 0 0}

.stimme{position:relative;margin:0;padding:.25rem 0 .25rem 1.25rem;border-left:6px solid var(--rot);max-width:var(--lese);
  transition:opacity var(--einblenden) ease,transform var(--einblenden) ease}
.stimme p{font:italic 400 1.1875rem/1.55 Georgia,"Times New Roman",serif;margin:0 0 .6rem}
.stimme p::before{content:"\00ab";display:block;font:900 3rem/.8 var(--titel);font-style:normal;color:var(--rot);margin-bottom:.35rem}
.stimme p::after{content:"\00bb";font:900 1.6rem/1 var(--titel);font-style:normal;color:var(--rot);margin-left:.3rem;vertical-align:-.12em}
.stimme footer{font-size:.875rem;font-weight:600;color:var(--grau)}

/* Grundzustand ohne JavaScript: alles voll sichtbar.
   Mit JavaScript (Klasse .js) ruht die Stimme leicht zurückgenommen und tritt auf, wenn sie auf Augenhöhe steht. */
.js .stimme{opacity:.62;transform:translateY(6px)}
.js .eintrag.ist-aktiv .stimme{opacity:1;transform:none}
.eintrag.ist-aktiv::after{background:var(--rot);transform:scale(1.2)}
.eintrag.ist-aktiv{--flaeche:var(--sand-hell)}
.eintrag.ist-aktiv::before{opacity:var(--bild-deckkraft)}

/* Maus: dieselbe Reaktion beim Darüberfahren. Gleiche Technik wie am Handy, kein zweiter Weg. */
@media (hover:hover) and (pointer:fine){
  .js .eintrag:hover .stimme{opacity:1;transform:none}
  .eintrag:hover::after{background:var(--rot);transform:scale(1.2)}
  .eintrag:hover{--flaeche:var(--sand-hell)}
  .eintrag:hover::before{opacity:var(--bild-deckkraft)}
}

/* Handy: Menü in einer Zeile, Hintergrundfläche etwas schmaler */
@media (max-width:55.99rem){
  :root{--kopf:7.25rem}
  .nav{font-size:.8125rem;gap:0}
  .nav a{padding:.35rem .5rem}
}

@media (min-width:56rem){
  .liste{padding-left:2.5rem}
  .eintrag::after{left:calc(-2.5rem - 9px)}
  .eintrag-inhalt{grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start;padding:1.75rem 2rem}
}

/* ---------- Mehr lesen (natives details, ohne JS) ---------- */
.mehr{max-width:var(--lese);margin-top:1rem}
.mehr summary{cursor:pointer;color:var(--rot);font-weight:800;list-style:none;padding:.35rem 0}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::after{content:" \2192"}
.mehr[open] summary::after{content:" \2193"}
.mehr > div{margin-top:.5rem}

/* ---------- Reserviert: Interview ---------- */
.reserviert{border:3px dashed var(--rot);padding:1.25rem 1.5rem;max-width:var(--lese);color:var(--grau);margin:0}

/* ---------- Kontakt, Fuss ---------- */
.kontakt-liste{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem;max-width:var(--lese);font-weight:600}
.kontakt-liste a{color:var(--rot);font-weight:800}
.fuss{border-top:6px solid var(--rot);padding:2rem 0 3rem;font-size:.9375rem;color:var(--grau)}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
.fuss a{text-decoration:none;border-bottom:2px solid var(--rot)}
.fuss a:hover{background:var(--rot);color:#fff}

/* ---------- Platzhalter-Markierung (im Team entfernen, sobald der echte Text steht) ---------- */
.platzhalter{display:inline-block;margin-left:.5rem;padding:0 .4rem;font:700 .6875rem/1.6 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--schwarz);background:#ffe9e9;border:1px solid var(--rot);vertical-align:middle}

/* ---------- Unterseiten (Impressum, Datenschutz, 404) ---------- */
.seite{padding:3.5rem 0 4rem}
.seite h1{font:900 clamp(2.2rem,7vw,3.6rem)/1 var(--titel);letter-spacing:-.04em;margin:0 0 1.75rem}
.seite h1::after{content:"";display:block;width:4rem;height:6px;background:var(--rot);margin-top:1rem}
.seite h2{font:800 1.25rem/1.3 var(--titel);letter-spacing:-.01em;margin:2rem 0 .5rem}
.seite .text{max-width:var(--lese)}
.knopf{display:inline-block;margin-top:1rem;padding:.8rem 1.6rem;background:var(--rot);color:#fff;text-decoration:none;font-weight:800}
.knopf:hover{background:var(--schwarz)}

/* ---------- Ruhe bei reduzierter Bewegung: Zustände wechseln sofort, nichts gleitet ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stimme,.eintrag::before,.eintrag::after{transition:none}
  .js .stimme{transform:none}
}

/* ---------- Druck ---------- */
@media print{
  .kopf,.sprunglink{display:none}
  .js .stimme{opacity:1;transform:none}
  .eintrag::before{display:none}
  .hero-bild{box-shadow:none}
}

/* ---- Karriere: alle weiteren Stationen als ruhige Liste, Ausbildung und Funktionen als Fussnote ---- */
.weitere{--flaeche:#fff;margin-top:3rem;border-top:3px solid var(--rot);padding-top:1rem}
.weitere-titel{font:800 1.125rem/1.3 var(--titel);letter-spacing:-.01em;margin:0 0 .5rem}
.weitere-liste{list-style:none;margin:0;padding:0}
.weitere-liste li{display:grid;gap:.15rem 2rem;padding:.9rem 0;border-top:1px solid var(--linie)}
.w-jahr{font:900 1.125rem/1.2 var(--titel);color:var(--rot);font-variant-numeric:tabular-nums}
.w-wer strong{display:block;font-weight:800}
.w-wer em{display:block;font-style:normal;color:var(--grau);font-size:.9375rem}
.w-was{max-width:var(--lese)}
@media (min-width:56rem){
  .weitere-liste li{grid-template-columns:7.5rem 16rem 1fr;align-items:baseline}
}
.rand{margin-top:2.5rem;max-width:var(--lese);color:var(--grau);font-size:.9375rem}
.rand p{margin:.4rem 0}
.rand strong{color:var(--schwarz)}

/* ---- Einklappen (Version 005): Der Knopf entsteht erst in site.js. Ohne JavaScript steht alles offen. ---- */
.weitere-inhalt{position:relative;box-sizing:border-box}
.js .eintrag-inhalt,.js .weitere-inhalt{transition:max-height .55s ease,background var(--einblenden) ease}
.klapp-zu > .eintrag-inhalt,.klapp-zu > .weitere-inhalt{overflow:hidden}
.klapp-zu > .eintrag-inhalt::after,.klapp-zu > .weitere-inhalt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5.5rem;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),var(--flaeche) 85%)}
.klapp-zu > .eintrag-inhalt::after{background:linear-gradient(rgba(236,215,187,0),var(--flaeche) 85%)}
.klapp-knopf{display:block;width:100%;margin:0;padding:.35rem 1.25rem 1.1rem;border:0;background:var(--flaeche);color:var(--rot);
  font:800 1rem/1.4 var(--titel);text-align:left;cursor:pointer;transition:background var(--einblenden) ease}
.weitere .klapp-knopf{padding-left:0}
.klapp-knopf::after{content:" \2193"}
.klapp-knopf[aria-expanded="true"]::after{content:" \2191"}
.klapp-knopf:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:3px}
.klapp-knopf:focus-visible{outline:3px solid var(--schwarz);outline-offset:-3px}
@media (min-width:56rem){ .klapp-knopf:not(.weitere .klapp-knopf){padding-left:2rem} }
@media (prefers-reduced-motion:reduce){ .js .eintrag-inhalt,.js .weitere-inhalt{transition:none} }

/* ---- Kontaktformular mit Honigtöpfen ---- */
.formular{max-width:var(--lese);margin-top:1.5rem}
.feld{margin:0 0 1.1rem}
.feld label{display:block;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--rot);margin-bottom:.3rem}
.feld input,.feld textarea{width:100%;box-sizing:border-box;padding:.7rem .8rem;border:2px solid var(--schwarz);border-radius:0;background:#fff;font:inherit;color:var(--schwarz)}
.feld input:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
.feld-klein{font-size:.875rem;color:var(--grau);margin:0 0 .5rem}
.feld-klein a{color:var(--schwarz)}
.formular .knopf{border:0;cursor:pointer;font:800 1rem/1.4 var(--titel);margin-top:0}
.falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.status{margin:1rem 0 0;font-weight:700}
.status.ok{color:#14532d}
.status.fehler{color:var(--rot)}
.hinweis{background:var(--sand);padding:.8rem 1rem;margin:0 0 1rem}

/* ---- Ziele: vier Anliegen unter dem Film ---- */
.ziele-ziele{padding-top:3rem;padding-bottom:4.5rem}
.ziele-liste{list-style:none;margin:0;padding:0;display:grid;gap:2.25rem 3rem}
.ziele-liste li{border-top:6px solid var(--rot);padding-top:1rem;max-width:34rem}
.z-nr{display:block;font:900 clamp(2.4rem,7vw,3.4rem)/1 var(--titel);letter-spacing:-.05em;color:var(--rot);margin-bottom:.4rem}
.ziele-liste h3{font:800 1.4rem/1.2 var(--titel);letter-spacing:-.02em;margin:0 0 .6rem}
.ziele-liste p{margin:0}
@media (min-width:56rem){ .ziele-liste{grid-template-columns:1fr 1fr} }

/* ---- Handy: Hero kompakter, damit Name, Sätze und Porträt gleich beim Öffnen zusammen im Bild stehen (Version 007) ---- */
@media (max-width:55.99rem){
  .hero{padding:1.25rem 0 2.5rem}
  .hero .wrap{gap:1.5rem}
  .hero-balken{margin-bottom:.9rem}
  .hero h1{margin-bottom:.9rem}
  .hero .claim{margin-bottom:.9rem}
  .hero-bild{width:min(100%,15.5rem)}
}

@media (min-width:56rem){ .ziele-liste li:last-child:nth-child(odd){grid-column:1/-1;max-width:48rem} }

/* Zahlen, Belege aus der Praxis, Motivation */
.zahlen{list-style:none;margin:0 0 3rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.75rem 2rem}
.zahlen li{border-top:6px solid var(--rot);padding-top:.7rem}
.zahlen strong{display:block;font:900 clamp(1.6rem,4vw,2.2rem)/1 var(--titel);letter-spacing:-.04em;color:var(--rot)}
.zahlen span{display:block;margin-top:.45rem;font-size:.9375rem;color:var(--grau)}
.z-beleg{margin:.8rem 0 0;font-size:.875rem;color:var(--grau)}
.z-beleg strong{color:var(--schwarz)}
.motiv{margin-top:1.75rem}
.motiv p{max-width:var(--lese);margin:0 0 1rem;font-size:1.125rem}

.js .motiv-zitat.stimme{opacity:1;transform:none}

.eintrag-inhalt.ohne-stimme{grid-template-columns:1fr}

/* ---- Presse-Variante: Dokumente 1:1 ---- */
.presse-hinweis{background:var(--sand);border-bottom:2px solid var(--schwarz)}
.presse-hinweis p{margin:0;padding:1rem 0;max-width:46rem}
.dok-block{padding:3.5rem 0 1rem;scroll-margin-top:4.5rem}
.dok-block h2{font:900 clamp(2rem,6vw,3rem)/1 var(--titel);letter-spacing:-.04em;margin:0 0 1.5rem}
.dok-block h2::after{content:"";display:block;width:4rem;height:6px;background:var(--rot);margin-top:.9rem}
.dok{background:#fff;border:2px solid var(--schwarz);padding:clamp(1.25rem,4vw,3rem);max-width:50rem;line-height:1.55}
.dok-kopf{margin:0 0 1.5rem;font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rot)}
.dok p{margin:0 0 .9rem}
.dok h3.dok-titel{font:900 clamp(1.4rem,4vw,1.9rem)/1.1 var(--titel);letter-spacing:-.02em;margin:0 0 1.25rem}
.dok h4{font:800 1.05rem/1.3 var(--titel);margin:1.6rem 0 .5rem}
.dok h4.betreff{font-size:1.15rem;margin:1.5rem 0 1rem}
.dok address{font-style:normal;margin:0 0 1.25rem}
.dok .ort{margin-bottom:1.25rem}
.dok ul{margin:0 0 1rem;padding-left:1.3rem}
.dok li{margin:0 0 .6rem}
.dok .gruss{margin:0 0 .2rem}
.dok .beilagen{margin-top:1.5rem;font-size:.92rem;color:var(--grau)}
.dok-tab{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.97rem}
.dok-tab th,.dok-tab td{border:1px solid var(--schwarz);padding:.45rem .65rem;vertical-align:top;text-align:left}
.dok-tab thead th{background:var(--sand);font-weight:800}
.dok-tab tbody th{font-weight:700;width:30%;background:#faf6f0}
.dok-tab td p{margin:0 0 .5rem}.dok-tab td p:last-child{margin:0}
.dok-tab tbody th{white-space:normal}
.stat{margin:0 0 1.1rem}
.stat p{margin:0 0 .25rem}
.stat-t{color:var(--rot)}.stat-t strong{color:var(--schwarz)}
.dok-dl{margin:1.25rem 0 0;display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.dok-dl .knopf{margin-top:0}
.dok-meta{font-size:.9rem;color:var(--grau)}
.foto{margin:0;max-width:22rem}
.foto img{display:block;width:100%;height:auto;border:2px solid var(--schwarz)}
.foto figcaption{margin-top:.6rem;font-size:.95rem;line-height:1.45}
.kontakt-block{padding-bottom:4rem}
@media (max-width:40rem){
  .dok-tab thead{display:none}
  .dok-tab,.dok-tab tbody,.dok-tab tr,.dok-tab th,.dok-tab td{display:block;width:100%}
  .dok-tab tr{border:1px solid var(--schwarz);margin:0 0 .6rem}
  .dok-tab th,.dok-tab td{border:0}
  .dok-tab tbody th{width:100%;padding-bottom:0;background:#faf6f0}
  .dok-tab td{padding-top:.2rem}
  .nav a{font-size:.9rem}
}
@media print{.kopf,.fuss,.dok-dl,.hero{display:none}}
.text-block{padding:3.5rem 0 1rem}
.text-block .text{max-width:46rem;font-size:1.1rem;line-height:1.6}
.text-block p{margin:0 0 1.1rem}
.text-block p:first-child{font-weight:600;font-size:1.25rem;line-height:1.5}
.kontakt-adr{font-style:normal;line-height:1.7;font-size:1.05rem}

/* Kopfzeile: Titelzusatz mit dünner oranger Linie (Orange #ff9b00 aus der Vorlage der Partei-Grafik) */
:root{--orange:#ff9b00}
.marke-text{display:inline-block;padding-bottom:.18rem;border-bottom:2px solid var(--orange)}
.marke-zusatz{font-weight:700}
@media (max-width:40rem){.marke{font-size:1rem;align-items:flex-start}.marke::before{margin-top:.3rem;flex:none}.marke-zusatz{display:block;font-size:.85rem}}