/*
  LMW · stil.css — Version 2026-08-26a (Version 1 zum Go-Live)
  Gemeinsames Stylesheet aller vier Seiten (Landingpage, Impressum,
  Datenschutz, 404). Basis: design/DESIGN-SYSTEM.md.

  Abweichung, die hier aufgehoben wird: In der Design-Referenz
  (design/landingpage-bericht-assistent-v2.html) liegt dasselbe CSS
  eingebettet im <style>-Element, weil sie als Einzeldatei gedacht war.
  Für vier Seiten wandert es unverändert hierher, sonst entstehen vier
  Kopien derselben Regeln.

  Bei jeder Änderung den Versionsstempel in der Einbindung
  (stil.css?v=…) hochzählen — sonst liefert der Browser die alte
  Fassung aus dem Cache.
*/

:root{
  --papier:#FFFFFF;
  --tinte:#111111;
  --leise:#6B6660;
  --haar:#E4E0DA;
  --haar-stark:#CFC9C0;
  --akzent:#A8442A;
  --akzent-tief:#8A3520;
  --akzent-ton:#FAF0EC;
  --rechtstext:#8B857D;

  --sans:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
         Roboto, Arial, sans-serif;

  --label:.7rem;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;font-weight:600;line-height:1.06;letter-spacing:-.035em}
p{margin:0 0 1rem}
a{color:var(--akzent);text-underline-offset:3px}
a:hover{color:var(--akzent-tief)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
[hidden]{display:none !important}

/* ── Hülle und Abschnittsraster ───────────────────────────────── */

.huelle{
  max-width:1140px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,56px);
}

.zeile{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:0 clamp(24px,4vw,56px);
  border-top:1px solid var(--haar);
  padding:clamp(30px,4.5vw,52px) 0;
}

.zeile:first-of-type{border-top:0}

.marginal{
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--leise);
  padding-top:.45em;
}

.marginal .zahl{
  display:block;
  color:var(--akzent);
  font-size:1.6rem;
  font-weight:600;
  letter-spacing:-.02em;
  text-transform:none;
  line-height:1;
  margin-bottom:6px;
}

/* ── Kopfzeile ────────────────────────────────────────────────── */

.kopfzeile{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:22px 0;
  border-bottom:1px solid var(--tinte);
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.kopfzeile .marke{color:var(--tinte)}
.kopfzeile .rolle{color:var(--leise)}

/* ── Hero ─────────────────────────────────────────────────────── */

.hero{padding:clamp(56px,10vw,120px) 0 clamp(44px,7vw,80px)}

.hero .augenbraue{
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--leise);
  margin:0 0 22px;
}

/*
  Genehmigte Abweichung 1 (DESIGN-SYSTEM.md, Abschnitt „Genehmigte
  Abweichungen"): clamp(2.2rem, 6vw, 4rem)/20ch statt clamp(2.6rem,
  8.4vw, 5.6rem)/14ch — die Headline ist 57 Zeichen lang und würde im
  Grundmaß den Bildschirm füllen.
*/
.hero h1{
  font-size:clamp(2.2rem,6vw,4rem);
  max-width:20ch;
}

.hero .sub{
  font-size:clamp(1.06rem,2.1vw,1.24rem);
  line-height:1.55;
  color:var(--leise);
  max-width:52ch;
  margin:clamp(26px,4vw,40px) 0 0;
}

/* ── Abschnittstypografie ─────────────────────────────────────── */

.h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}

.lede{
  font-size:1.05rem;
  color:var(--leise);
  max-width:56ch;
  margin:18px 0 0;
}

.fliess{max-width:62ch}
.fliess p{margin:22px 0 0}
.fliess p:last-child{margin-bottom:0}
.fliess strong{font-weight:600}

/* ── Video (projektspezifischer Baustein, folgt den Tokens) ─────── */

.film{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--haar-stark);
  background:var(--papier);
}

.film-rahmen{
  position:relative;
}

/*
  Unsichtbare Fläche zum Umschalten zwischen Abspielen und Pause. Wird erst
  von sprung.js angelegt — ohne JavaScript existiert sie nicht, dann bleibt
  es beim nativen Verhalten des Browsers.

  Die 56px unten sparen die native Steuerleiste aus, damit Abspielbalken,
  Lautstärke und Vollbild dort unverändert erreichbar bleiben. Der Wert ist
  bewusst großzügig: Zu viel ausgespart heißt nur, dass ein schmaler Streifen
  nicht umschaltet; zu wenig hieße, dass ein Klick auf „Pause" beides
  auslöst.
*/
.film-klickflaeche{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:56px;
  z-index:1;
  cursor:pointer;
}

/* z-index über .film-klickflaeche, sonst läge der Knopf darunter und wäre
   nicht mehr anklickbar. */
.film-start{
  position:absolute;
  z-index:2;
  left:16px;
  top:16px;
  width:clamp(40px,8vw,56px);
  height:clamp(40px,8vw,56px);
  font-size:clamp(11px,2.2vw,15px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--papier);
  border-radius:0;
  background:transparent;
  cursor:pointer;
  transition:opacity .15s;
}

.film-start:hover{opacity:.7}

.film-start-dreieck{
  width:0;
  height:0;
  margin-left:.2em;
  border-style:solid;
  border-width:.5em 0 .5em .8em;
  border-color:transparent transparent transparent var(--papier);
}

.filmzeile{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 22px;
  margin:14px 0 0;
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--leise);
}

.marke-sprung{
  font:inherit;
  border:0;
  padding:0;
  background:none;
  color:var(--leise);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  position:relative;
  transition:color .15s;
}

.marke-sprung::after{content:"";position:absolute;inset:-9px -6px}
.marke-sprung:hover{color:var(--akzent)}

.kapitel{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  border-top:1px solid var(--haar);
  max-width:62ch;
}

.kapitel li{
  display:flex;
  align-items:baseline;
  gap:16px;
  border-bottom:1px solid var(--haar);
  padding:11px 0;
  font-size:.93rem;
}

.kapitel .zeit{
  flex:none;
  min-width:4.5em;
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--akzent);
  font-variant-numeric:tabular-nums;
}

/*
  Kapitelzeilen werden per JavaScript von <span> zu <button> aufgewertet
  (siehe sprung.js) — ohne JavaScript bleiben es reine Textspannen, mit
  JavaScript springen sie wie „Direkt zum Ergebnis" auf ihre Sekunde.
  Seit 25.08.2026 umschließt ein Knopf Zeit UND Titel, damit auch der Text
  neben der Marke springt; der Knopf übernimmt deshalb das Flex-Layout und
  den Spaltenabstand, die vorher am <li> saßen. Er bleibt so breit wie sein
  Inhalt — die leere Fläche rechts daneben ist bewusst nicht klickbar.
  Trefferfläche vergrößert wie bei den übrigen Textknöpfen im
  Etikettengrad (DESIGN-SYSTEM.md, Abschnitt 9).
*/
button.kapitel-sprung{
  display:flex;
  align-items:baseline;
  gap:16px;
  text-align:left;
  font:inherit;
  color:inherit;
  border:0;
  padding:0;
  background:none;
  cursor:pointer;
  position:relative;
  transition:color .15s;
}

/* .kapitel .zeit setzt eine eigene Farbe und erbt den Hover-Wert deshalb
   nicht — ohne diese Zeile würde beim Überfahren nur der Titel umschlagen. */
button.kapitel-sprung:hover,
button.kapitel-sprung:hover .zeit{color:var(--akzent-tief)}

button.kapitel-sprung::after{content:"";position:absolute;inset:-8px -6px}

/* ── Ablauf (projektspezifischer Baustein, folgt den Tokens) ────── */

.ablauf{
  list-style:none;
  margin:30px 0 0;
  padding:0;
  max-width:62ch;
  border-top:1px solid var(--haar);
}

.ablauf li{
  border-bottom:1px solid var(--haar);
  padding:26px 0;
  font-size:.95rem;
  line-height:1.6;
  color:var(--leise);
}

.ablauf .schritt-kopf{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}

.ablauf .schritt-label{
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--akzent);
}

.ablauf .dauer{
  flex:none;
  font-size:var(--label);
  color:var(--leise);
}

.ablauf strong{
  display:block;
  margin-bottom:8px;
  font-size:1.1rem;
  font-weight:600;
  color:var(--tinte);
}

.ablauf li>p{margin:14px 0 0}

.ergebnis{
  margin:14px 0 0;
  font-size:.88rem;
  line-height:1.5;
  color:var(--leise);
}

.ergebnis .etikett{
  font-weight:600;
  color:var(--tinte);
  margin-right:6px;
}

/*
  ── Person: Bildumfluss (genehmigte Abweichung 3, siehe README
  „Entscheidungen") ─────────────────────────────────────────────────
  Bild rechts oben, randlos zum rechten Seitenrand; der Fließtext umfließt
  es und läuft darunter über die volle Spaltenbreite weiter. Die Sektion
  benutzt unverändert das seitenweite 150px-Marginalraster von .zeile —
  keine eigene Rasterspalte mehr, der Umfluss passiert innerhalb der
  Textspalte. Auch Schriftschnitte und -grade sind die der übrigen
  Abschnitte (Werte je Regel vermerkt); einzige gestalterische Eigenheit
  bleibt die Zitat-Box, deren Ton eine color-mix()-Abstufung von
  --akzent-ton ist, keine neue Farbe.
*/

/* Sichtbar ist der Ausschnitt der Vorlage profile.png (1271×1660): in der
   2000×3000 großen Portraitfoto.jpg das Fenster x 435…1665, y 387…1994,
   also 1230×1607 px. Daher das Seitenverhältnis 1271/1660 für den Kasten.
   Das Bild behält sein eigenes Seitenverhältnis (height:auto, kein
   object-fit) und wird allein vom Kasten beschnitten — es ist nur so weit
   vergrößert und verschoben, dass das Fenster über dem gewünschten Bereich
   liegt:
     Breite   2000/1230       = 162,5 % der Kastenbreite
     links     435/1230        =  35,4 %
     oben      387/1230        =  31,5 %
   Prozentuale margins beziehen sich immer auf die BREITE des umgebenden
   Blocks — deshalb ist auch der obere Versatz auf 1230 bezogen, nicht auf
   die Bildhöhe. object-fit:cover wäre hier falsch: Es würde die volle
   Bildbreite zeigen, die Vorlage ist aber auch seitlich beschnitten. */
.person-bild{
  float:right;
  width:42%;
  aspect-ratio:1271/1660;
  overflow:hidden;
  margin:0 0 clamp(24px,3vw,34px) clamp(28px,4vw,52px);
}

.person-bild img{
  display:block;
  width:162.5%;
  height:auto;
  margin:-31.5% 0 0 -35.4%;
}

/* Werte wie .ablauf strong (Sektion 02). */
.person-name{
  font-size:1.1rem;
  font-weight:600;
  color:var(--tinte);
  margin:18px 0 0;
}

/* Etikettengrad wie .schritt-label / .filmzeile. */
.person-grad{
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--leise);
  margin:8px 0 0;
}

/* Trennlinie als ::after — spart ein leeres Element im Markup. */
.person-grad::after{
  content:"";
  display:block;
  width:80px;
  height:2px;
  background:var(--akzent);
  margin-top:26px;
}

/* Fließtext wie .ablauf li (Sektion 02). */
.person-text > p:not(.person-name):not(.person-grad){
  font-size:.95rem;
  line-height:1.6;
  color:var(--leise);
  margin:16px 0 0;
}

.person-grad + p{margin-top:26px}

/* position:relative trägt das Anführungszeichen in ::before.
   clear:right hält den Kasten immer unter dem Bild — neben dem Foto
   würde die getönte Fläche gestaucht und angeschnitten wirken. */
.person-zitat{
  position:relative;
  clear:right;
  margin:28px 0 0;
  padding:clamp(32px,3vw,44px) clamp(32px,3vw,44px)
          clamp(32px,3vw,44px) clamp(56px,5vw,76px);
  background:color-mix(in srgb, var(--akzent-ton) 86%, var(--akzent));
}

/* Schriftwerte des früheren Bausteins .zitat, der am 26.08.2026 mit den
   übrigen ungenutzten Regeln entfallen ist (siehe README Punkt 27). */
.person-zitat p{
  margin:0;
  font-size:1.18rem;
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.4;
  color:var(--tinte);
}

.person-zitat::before{
  content:"\201C";
  position:absolute;
  top:.25em;
  left:clamp(18px,2vw,28px);
  font-size:3.4rem;
  font-weight:600;
  line-height:1;
  color:var(--akzent);
}

/* ── Transkript-Klappbox (Baustein .klappe, unverändert übernommen) ── */

.klappe{
  margin:26px 0 0;
  padding-top:22px;
  border-top:1px solid var(--haar);
  max-width:62ch;
}

.klappe summary{
  cursor:pointer;
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--leise);
}

.klappe summary:hover{color:var(--tinte)}
.klappe[open] summary{color:var(--tinte)}

/* Den Abstand zur Beschriftung trägt hier der obere Rand des ersten
   Kindes aus .fliess — sonst addieren sich beide Werte. */
.klappe .fliess{margin-top:0}

/*
  Kapitelmarke im Transkript. Werte bis auf den Abstand identisch zu
  `.textblock h2` (Impressum, Datenschutz) — derselbe Zweck, nämlich einen
  langen Fließtext in benannte Abschnitte teilen. Die Trennlinie darüber
  macht die Gliederung auf einen Blick sichtbar; bei 21 Absätzen reicht ein
  fetter Vorspann im ersten Absatz dafür nicht mehr.

  Semantisch ein <h3>: Die Sektion trägt keine H2 (so entworfen), und der
  CTA-Kasten darunter benutzt bereits dieselbe Ebene.
*/
.transkript-marke{
  margin:34px 0 0;
  padding-top:18px;
  border-top:1px solid var(--haar);
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--leise);
}

/* Die erste Marke braucht weder Linie noch Vorabstand — sie steht direkt
   unter „Transkript lesen“ und übernimmt dessen Abstand aus .fliess p. */
.transkript-marke:first-child{
  margin-top:22px;
  padding-top:0;
  border-top:0;
}

/* Zeitangabe in der Akzentfarbe wie in der Kapitelliste darüber. */
.transkript-zeit{color:var(--akzent);margin-right:.7em}


/* ── Demo-CTA (Baustein zu Sektion 01) ───────────────────────────── */

.demo-cta{
  margin:28px 0 0;
  padding:24px 28px;
  background:#FAF8F4;
  border-radius:0;
}

.demo-cta-titel{
  margin:0 0 8px;
  font-size:.95rem;
  font-weight:600;
  color:var(--tinte);
}

.demo-cta-text{
  margin:0;
  max-width:52ch;
  font-size:.95rem;
  line-height:1.6;
  color:var(--leise);
}

.demo-cta-knopf{
  display:inline-block;
  margin-top:14px;
  padding:13px 24px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--papier);
  background:var(--tinte);
  border-radius:0;
  text-decoration:none;
  transition:background-color .12s;
}

.demo-cta-knopf:hover,
.demo-cta-knopf:focus{background:var(--akzent)}

.demo-cta-knopf:focus-visible{
  outline:2px solid var(--tinte);
  outline-offset:2px;
}

@media (max-width:640px){
  .demo-cta{padding:20px}
}

/* ── Knöpfe ───────────────────────────────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.2;
  padding:16px 30px;
  border:1px solid var(--tinte);
  border-radius:0;
  background:var(--tinte);
  color:var(--papier);
  transition:background-color .15s,border-color .15s,color .15s;
}

.btn:hover{background:var(--akzent);border-color:var(--akzent);color:var(--papier)}

.btn:disabled{opacity:.28;cursor:not-allowed}
.btn:disabled:hover{background:var(--tinte);border-color:var(--tinte)}

.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.direkt{margin:18px 0 0;font-size:.95rem;color:var(--leise)}

/*
  ── Terminauswahl (Abschnitt 05, siehe README „Entscheidungen" Punkt 24) ──
  Natives <dialog>, von termine.js mit showModal() geöffnet. Escape,
  Fokusfalle und Hintergrund kommen damit vom Browser statt aus eigenem
  Code. Keine neuen Farben, Grade oder Radien: Der Kasten benutzt dieselben
  Tokens wie die Abschnitte, die Termine denselben Etikettengrad wie die
  Kapitelzeiten, und die Knöpfe sind der vorhandene Baustein .btn.
*/

.terminwahl{
  width:min(460px,100%);
  max-height:min(560px,90vh);
  padding:clamp(24px,4vw,34px);
  border:1px solid var(--tinte);
  border-radius:0;
  background:var(--papier);
  color:var(--tinte);
}

/*
  display NUR am geöffneten Dialog setzen. Ein geschlossenes <dialog> ist
  über das Browser-Stylesheet display:none; eine Klassenregel ohne [open]
  hätte mehr Gewicht und der Kasten stünde dauerhaft in der Seite.

  Raster, damit allein die Terminliste scrollt und Titel wie Knopfreihe
  stehen bleiben.
*/
.terminwahl[open]{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
}

/* Abstufung eines vorhandenen Tokens, kein neuer Farbwert — dasselbe
   Vorgehen wie bei der Zitat-Box in Abschnitt 03. Der Rückfallwert ist
   derselbe Ton: ::backdrop erbt erst seit 2023 vom zugehörigen Element,
   ohne ihn bliebe die Fläche in älteren Browsern durchsichtig. */
.terminwahl::backdrop{
  background:color-mix(in srgb, var(--tinte, #111111) 55%, transparent);
}

.terminwahl-titel{
  margin:0;
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:-.015em;
}

.terminwahl-hinweis{
  margin:10px 0 0;
  font-size:.88rem;
  line-height:1.5;
  color:var(--leise);
}

.terminwahl-liste{
  margin:22px 0 0;
  padding-top:4px;
  overflow-y:auto;
  border-top:1px solid var(--haar);
}

/*
  Nach Tagen gruppiert (25.08.2026, auf Wunsch): Datum als Überschrift,
  Uhrzeiten als Reihe darunter. Untereinander stand das Datum viermal je
  Tag und die Liste war viermal so hoch.
*/
.terminwahl-tag{
  margin:20px 0 0;
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--leise);
}

.terminwahl-tag:first-child{margin-top:14px}

.terminwahl-zeiten{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 0;
}

/* Umrissener Knopf im Fließtextgrad; Ziffern in Tabellenbreite, damit die
   Reihe trotz unterschiedlicher Zahlen ein ruhiges Raster bildet. */
.terminwahl-slot{
  font:inherit;
  font-size:.93rem;
  font-variant-numeric:tabular-nums;
  color:inherit;
  padding:10px 15px;
  border:1px solid var(--haar-stark);
  border-radius:0;
  background:none;
  cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}

.terminwahl-slot:hover{border-color:var(--tinte)}

/* Der gewählte Termin ist die einzige gefüllte Fläche in der Liste —
   dieselbe Sprache wie .btn, wo die Hauptaktion dunkel steht. */
.terminwahl-slot[aria-checked="true"]{
  background:var(--tinte);
  border-color:var(--tinte);
  color:var(--papier);
}

.terminwahl-leer{
  margin:16px 0 0;
  font-size:.93rem;
  line-height:1.6;
  color:var(--leise);
}

.terminwahl-fuss{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:22px 0 0;
}

/* Zweitrangiger Knopf: gleiche Maße wie .btn, nur ohne Füllung, damit die
   Hauptaktion die einzige dunkle Fläche im Kasten bleibt. */
.btn-still{
  background:none;
  color:var(--tinte);
  border-color:var(--haar-stark);
}

.btn-still:hover{background:none;border-color:var(--tinte);color:var(--tinte)}

/* ── Reine Textseiten (Impressum, Datenschutz, 404) ──────────────── */

/* Textseiten verlassen bewusst das Marginalraster (Design-System,
   „Reine Textseiten") — sie tragen deshalb NICHT die Klasse .zeile.
   Das obere Polster kommt aus demselben Token wie das Abschnittspolster
   in .zeile, damit der Abstand unter der Kopfzeile überall gleich ist. */
.textseite{
  max-width:680px;
  padding:clamp(30px,4.5vw,52px) 0 0;
}

.textseite h1{
  font-size:clamp(1.7rem,4.2vw,1.95rem);
  letter-spacing:-.025em;
  line-height:1.2;
}

.textseite .sub{
  font-size:1rem;
  color:var(--leise);
  margin:10px 0 0;
}

.textblock{padding:40px 0 0}

.textblock h2{
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--leise);
  border-top:1px solid var(--haar);
  padding-top:18px;
  margin:34px 0 12px;
}

.textblock h2:first-child{margin-top:0}

.textblock h3{font-size:1rem;margin:22px 0 6px}

.textblock p{margin:0 0 12px}

.textblock ul,
.textblock ol{margin:0 0 12px;padding-left:20px}

.textblock li{margin-bottom:6px}

.anschrift{line-height:1.5}

/* ── Zahlentabellen (Verwaltung, admin.php) ──────────────────────── */

.zahlen{
  width:100%;
  border-collapse:collapse;
  margin:0 0 12px;
  font-variant-numeric:tabular-nums;
}

.zahlen td{
  padding:6px 0;
  border-bottom:1px solid var(--haar);
}

.zahlen td:last-child{
  text-align:right;
  color:var(--leise);
}

.textstand{
  display:block;
  margin:48px 0 0;
  padding-top:14px;
  border-top:1px solid var(--haar);
  font-size:.82rem;
  color:var(--rechtstext);
}

/* ── Hervorgehobener Rechtshinweis (Art. 21 DSGVO) ───────────────── */

.widerspruch{
  border:1px solid var(--haar-stark);
  padding:18px 20px;
  margin:14px 0 0;
}

.widerspruch p{
  font-size:.88rem;
  line-height:1.6;
  letter-spacing:.015em;
  text-transform:uppercase;
}

.widerspruch p:last-child{margin-bottom:0}


/* ── Fuß ──────────────────────────────────────────────────────── */

footer{border-top:1px solid var(--tinte);margin-top:40px}

footer .huelle{
  padding:30px clamp(20px,5vw,56px) 56px;
  font-size:var(--label);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--leise);
}

.fussreihe{
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  align-items:baseline;
  justify-content:space-between;
}

footer .marke{color:var(--tinte)}
footer nav{display:flex;flex-wrap:wrap;gap:10px 22px}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--akzent)}

.rechtszeile{
  max-width:none;
  margin:26px 0 0;
  font-size:.78rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  line-height:1.6;
  color:var(--rechtstext);
}

.rechtszeile + .rechtszeile{margin-top:8px}

/* ── Umbruchpunkte ────────────────────────────────────────────── */

/*
  900px ist eine vierte Stufe außerhalb der im Design-System genannten drei
  (760/520/400) — nötig, weil das umflossene Bild in Sektion 03 schon deutlich
  früher kippt als das übrige Marginalraster: Neben einem 42-%-Bild wird die
  Restzeile sonst unlesbar schmal. Darunter steht das Bild als volle Bahn über
  dem Text; der Ausschnitt bleibt dabei erhalten, deshalb begrenzt max-width
  die Bahn — über die volle Handybreite würde das Hochformat sonst mehr als
  eine Bildschirmhöhe einnehmen.
*/
@media (max-width:900px){
  .person-bild{float:none;width:100%;max-width:360px;margin:0 0 28px}
}

@media (max-width:760px){
  .zeile{grid-template-columns:1fr;gap:14px}
  .marginal{padding-top:0}
}

@media (max-width:520px){
  .knopfreihe .btn{width:100%}
  /* Im Dialog ebenfalls volle Breite, sonst stehen zwei schmale Knöpfe
     nebeneinander und die Hauptaktion verliert ihr Gewicht. */
  .terminwahl-fuss .btn{width:100%}
}

@media (max-width:400px){
  .hero h1{font-size:30px}
  .marginal{display:flex;align-items:baseline;gap:10px}
  .marginal .zahl{margin-bottom:0}
  /* Beide: ohne JavaScript umbricht das <li>, mit JavaScript der Knopf,
     der die Spans dann umschließt. */
  .kapitel li,
  button.kapitel-sprung{flex-wrap:wrap;gap:4px 16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}