/* Barrierefreie Gesetze. Schrift lokal (Atkinson Hyperlegible, OFL), keine Fremdserver.
   Farben nur über Token; alle Paare mindestens 7:1 (Prüfung: test_kontrast.py). */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/atkinson-400.d64ba838ef.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/atkinson-700.140e2bd25a.woff2") format("woff2"); }

:root {
  --grund: #ffffff;
  --flaeche: #f1f3f6;
  --text: #111111;
  --text-leise: #3a3f47;
  --link: #0a3a8c;
  --besucht: #4b1d7a;
  --rand: #4d535c;
  --fokus: #0a3a8c;
  --knopf: #0a3a8c;
  --knopf-text: #ffffff;
  --groesse: 1.125rem;
  --zeile: 1.65;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-kontrast]) {
    --grund: #14161a; --flaeche: #1f2329; --text: #f3f4f6; --text-leise: #c9ced6;
    --link: #a9c8ff; --besucht: #d8bdff; --rand: #a7adb7; --fokus: #a9c8ff;
    --knopf: #a9c8ff; --knopf-text: #0b1220; color-scheme: dark;
  }
}
:root[data-kontrast="hell"] { color-scheme: light; }
:root[data-kontrast="dunkel"] {
  --grund: #14161a; --flaeche: #1f2329; --text: #f3f4f6; --text-leise: #c9ced6;
  --link: #a9c8ff; --besucht: #d8bdff; --rand: #a7adb7; --fokus: #a9c8ff;
  --knopf: #a9c8ff; --knopf-text: #0b1220; color-scheme: dark;
}
:root[data-kontrast="hoch"] {
  --grund: #000000; --flaeche: #000000; --text: #ffffff; --text-leise: #ffffff;
  --link: #ffff33; --besucht: #ff9cff; --rand: #ffffff; --fokus: #ffff33;
  --knopf: #ffff33; --knopf-text: #000000; color-scheme: dark;
}
:root[data-groesse="2"] { --groesse: 1.375rem; }
:root[data-groesse="3"] { --groesse: 1.75rem; }
:root[data-satz="aus"] sup.satz { display: none; }

*, *::before, *::after { box-sizing: border-box; }
/* Fläche hinter dem Seitenende in Fußfarbe: auch beim Nachfedern endet die Seite sichtbar mit dem Fuß */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--flaeche); overscroll-behavior-y: none; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: var(--groesse)/var(--zeile) "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
  overflow-wrap: break-word;
}
main, .kopf-innen, .fuss-innen { max-width: 60rem; margin-inline: auto; padding-inline: 1rem; }
main { padding-block: 1.5rem 3rem; }
main:focus { outline: none; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.09em; }
a:visited { color: var(--besucht); }
a:hover { text-decoration-thickness: 0.18em; }
:focus-visible { outline: 0.2em solid var(--fokus); outline-offset: 0.18em; box-shadow: 0 0 0 0.38em var(--grund); }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 1.6em 0 0.6em; font-weight: 700; }
h1 { font-size: 1.7em; margin-top: 0.4em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4, h5, h6 { font-size: 1.05em; }
p { margin: 0 0 0.9em; }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: 0.5rem; top: -4rem; z-index: 10; background: var(--grund); color: var(--link);
  padding: 0.7rem 1rem; border: 0.15em solid var(--rand); }
.sprung:focus { top: 0.5rem; }

/* Ohne JavaScript bleiben die Bedienelemente, die JavaScript brauchen, ausgeblendet. */
.nur-js { display: none; }
.js .nur-js { display: revert; }

/* Kopf */
.kopf { border-bottom: 0.1em solid var(--rand); background: var(--flaeche); }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; padding-block: 0.5rem; }
.aufbau { max-width: 60rem; margin: 0 auto; padding: 0 1rem 0.5rem; color: var(--text); font-weight: 700; }
.seitenname { font-weight: 700; font-size: 1.15em; color: var(--text); text-decoration: none; min-height: 2.75rem;
  display: inline-flex; align-items: center; gap: 0.45em; }
.seitenname:visited { color: var(--text); }
.seitenname .logo { width: 1.7em; height: 1.7em; flex: 0 0 auto; }
.haupt ul { display: flex; flex-wrap: wrap; gap: 0 0.5rem; list-style: none; margin: 0; padding: 0; }
.haupt a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.5rem; }
.haupt a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 0.2em; }

/* Anzeige anpassen: schwebender Knopf unten rechts, Feld darüber. Ohne JavaScript ausgeblendet (.nur-js). */
.a11y-knopf { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 30; width: 58px; height: 58px; min-height: 0;
  padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--knopf); color: var(--knopf-text); border: 3px solid var(--grund);
  box-shadow: 0 0 0 2px var(--knopf), 0 3px 10px rgba(0, 0, 0, 0.35); }
.a11y-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; }
.anzeige { position: fixed; right: 18px; bottom: 88px; z-index: 30; width: min(20rem, calc(100vw - 36px));
  max-height: calc(100vh - 106px); max-height: calc(100dvh - 106px); overflow: auto; box-sizing: border-box;
  padding: 0.75rem 1rem; display: grid; gap: 0.75rem; background: var(--grund); color: var(--text);
  border: 2px solid var(--rand); border-radius: 10px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35); }
.anzeige[hidden] { display: none; }
.anzeige-titel { font-weight: 700; font-size: 1.2em; margin: 0; }
.anzeige fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.anzeige legend { font-weight: 700; padding: 0; margin-bottom: 0.25rem; }
.anzeige .gruppe { display: grid; gap: 0.5rem; }
.anzeige .gruppe > legend { font-size: 1.15em; }
.anzeige label { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; cursor: pointer; }
.anzeige input[type="radio"] { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--knopf); }
button, .knopf { font: inherit; min-height: 2.75rem; padding: 0.4rem 1rem; border: 0.1em solid var(--rand);
  border-radius: 0.3em; background: var(--knopf); color: var(--knopf-text); cursor: pointer; }
.anzeige button { background: var(--grund); color: var(--text); }
/* Aufklappbare Rechtsgebiete (Startseite): Schaltfläche über die ganze Breite in der Überschrift */
.klapp { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; font-weight: inherit;
  padding: 0.4rem 0.6rem; background: var(--grund); color: var(--text); }
.klapp-zeichen { flex: none; width: 1em; text-align: center; }
.klapp-zeichen::before { content: "+"; }
.klapp[aria-expanded="true"] .klapp-zeichen::before { content: "\2212"; }

/* Listen, Pfad, Navigation */
.liste { padding-left: 1.2rem; }
.liste li { margin: 0.2em 0; }
.liste .info-satz { margin: 0 0 0.8em; }
.liste a, .uebersicht a { min-height: 2.75rem; min-width: 2.75rem; padding-block: 0.55rem; }
.uebersicht a { display: inline-block; }
/* als Block, damit der Listenpunkt bei umbrochenem Link neben der ersten Zeile steht (inline-block: letzte) */
.liste a { display: block; width: fit-content; max-width: 100%; }
.uebersicht { list-style: none; padding-left: 1rem; margin: 0; }
.uebersicht .uebersicht { border-left: 0.1em solid var(--rand); margin-left: 0.3rem; padding-left: 0.6rem; }
.klapp, .uebersicht, .uebersicht a, .gliederung, .liste a { overflow-wrap: anywhere; }
.gliederung { display: block; font-weight: 700; padding-block: 0.5rem; }
.pfad ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1rem; gap: 0 0.4rem; }
.pfad li { display: flex; align-items: center; min-height: 2.75rem; }
/* Trennzeichen nur fürs Auge, Screenreader lesen es nicht vor (Alternativtext leer); erste Angabe für ältere Browser */
.pfad li + li::before { content: "›"; content: "›" / ""; margin-right: 0.4rem; }
.pfad a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; }
.einordnung { color: var(--text-leise); margin-bottom: 0.2em; }
.einleitung { font-size: 1.1em; }
/* Links im Fließtext: Trefferfläche mindestens 24 px hoch (WCAG 2.5.8), ohne die Zeilen zu verschieben */
main :is(p, li, dd) > a { padding-block: 0.15em; }

/* Titelbild: helle und dunkle Fassung, sichtbar ist nur die zum Farbschema passende */
.titelbild { margin: 1rem 0 1.5rem; }
.titelbild img { display: block; width: 100%; height: auto; }
.titelbild .bild-dunkel { display: none; }
:root[data-kontrast="dunkel"] .titelbild .bild-hell, :root[data-kontrast="hoch"] .titelbild .bild-hell { display: none; }
:root[data-kontrast="dunkel"] .titelbild .bild-dunkel, :root[data-kontrast="hoch"] .titelbild .bild-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-kontrast]) .titelbild .bild-hell { display: none; }
  :root:not([data-kontrast]) .titelbild .bild-dunkel { display: block; }
}

/* Norm */
.enbez { white-space: nowrap; }
.normtext { max-width: 42rem; }
.normtext p, .normtext .absatz { margin: 0 0 0.9em; }
.normtext .zwischentitel { font-weight: 700; margin-top: 1.2em; }
.normtext ol.gl { list-style: none; padding: 0; margin: 0.3em 0 0.9em; }
.normtext ol.gl > li { display: flex; gap: 0.6em; margin: 0.25em 0; }
.normtext ol.gl .nr { flex: 0 0 auto; min-width: 2.2em; }
.normtext ol.gl .inh { flex: 1 1 auto; min-width: 0; }
.normtext ol.gl ol.gl { margin-left: 0; }
sup.satz { font-size: 0.65em; font-weight: 700; color: var(--text-leise); margin-right: 0.15em; }
sup.fnr { font-size: 0.7em; }
sup.fnr a { display: inline-block; min-width: 1.4em; text-align: center; padding-inline: 0.15em; }
.fundstelle { color: var(--text-leise); font-size: 0.9em; }
.normtext .la { margin: 0 0 0.6em; }
.normtext pre { overflow-x: auto; max-width: 100%; }
.tabellenrahmen { overflow-x: auto; max-width: 100%; margin: 0.8em 0; border: 0.1em solid var(--rand); }
.tabellenrahmen table { border-collapse: collapse; min-width: 100%; font-size: 0.95em; }
.tabellenrahmen th, .tabellenrahmen td { border: 0.1em solid var(--rand); padding: 0.4em 0.6em; text-align: left; vertical-align: top; }
.tabellenrahmen caption { text-align: left; font-weight: 700; padding: 0.4em 0.6em; }
.fussnotenblock { max-width: 42rem; border-top: 0.1em solid var(--rand); margin-top: 1.5rem; }
.fussnoten { padding-left: 1.6rem; }
.fussnoten li { margin: 0.4em 0; }
.fussnoten .zurueck { display: inline-block; min-height: 2.75rem; padding-block: 0.55rem; }
.folge ul { list-style: none; display: grid; gap: 0.5rem; padding: 0; margin: 2rem 0; }
.folge a { display: block; padding: 0.7rem 1rem; border: 0.1em solid var(--rand); border-radius: 0.3em; min-height: 2.75rem; }
.folge .richtung { display: block; font-size: 0.85em; color: var(--text-leise); text-decoration: none; }
.folge .ziel { font-weight: 700; }
.standblock { margin-top: 2.5rem; padding: 0.2rem 1rem 0.6rem; background: var(--flaeche); border: 0.1em solid var(--rand); }
.standblock dt { font-weight: 700; margin-top: 0.5em; }
.standblock dd { margin: 0; }
/* Hinweis bei ausgebliebener Wochenprüfung (site.js, /geprueft.json älter als 8 Tage) */
.hinweis-alt { max-width: 42rem; padding: 0.6rem 1rem; background: var(--flaeche); border: 0.1em solid var(--rand);
  border-left-width: 0.4em; }
.hinweis-alt:empty { display: none; }
.protokoll { list-style: none; padding: 0; }

/* Norm aufrufen */
#normsprung label { display: block; margin-bottom: 0.4rem; }
#normsprung .zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#normsprung input[type="text"] { flex: 1 1 12rem; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 2.75rem; font: inherit; padding: 0.4rem 0.7rem;
  border: 0.1em solid var(--rand); background: var(--grund); color: var(--text); border-radius: 0.3em; }
.status { min-height: 1.5em; margin-top: 0.5rem; }
/* im Kopf jeder Seite (außer Startseite) eine eigene Zeile unter Seitenname und Menü; die leere Statuszeile
   bleibt im Baum (Live-Region), nimmt aber keinen Platz */
.kopf-sprung { flex: 1 1 100%; min-width: 0; margin: 0; padding-bottom: 0.25rem; }
#normsprung.kopf-sprung label { margin-bottom: 0.25rem; }
.kopf-sprung .status { margin: 0.25rem 0 0; }
.kopf-sprung .status:empty { min-height: 0; margin: 0; }

/* Fuß */
/* Eigener Block über die volle Breite, alles zentriert: Marke, Rahmenlinks nebeneinander, Copyright */
.fuss { border-top: 0.1em solid var(--rand); margin-top: 2rem; background: var(--flaeche); text-align: center; }
.fuss-innen { padding-block: 1.5rem max(1.5rem, env(safe-area-inset-bottom)); }
/* einzige Reserve für den festen Anzeige-Knopf (58 px, unten 18 px): er liegt am Seitenende unter dem Copyright */
.js .fuss-innen { padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 58px + 0.75rem); }
.fuss-marke { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem;
  font-weight: 700; font-size: 1.15em; color: var(--text); }
.fuss-marke .logo { width: 3rem; height: 3rem; }
.fuss ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; list-style: none;
  padding: 0; margin: 0; }
.fuss a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss-hinweis { color: var(--text-leise); font-size: 0.9em; margin: 0.75rem 0 0; }
/* Klickfläche 44 px über Innenabstand, ohne die Zeilenhöhe der Textzeile zu strecken */
a.flaeche44 { display: inline-block; min-height: 0; padding-block: 0.6rem; margin-block: -0.6rem; }

@media (max-width: 36rem) {
  .uebersicht { padding-left: 0.3rem; }
  .uebersicht .uebersicht { margin-left: 0.1rem; padding-left: 0.35rem; }
  .kopf-innen { padding-block: 0.25rem; }
  /* Menü bei 375 px in einer Zeile, auch mit fettem aktuellem Punkt; Text bleibt bündig, Tippziele bleiben 44 px;
     sonst Umbruch nach ganzen Punkten */
  .haupt ul { gap: 0; margin-inline: -0.25rem; }
  .haupt a { padding-inline: 0.25rem; }
  main { padding-bottom: 1.5rem; }
  .fuss { margin-top: 1rem; }
}
@media print {
  .kopf, .fuss nav, .fuss-marke, .folge, .a11y, .anzeige, .sprung, .nur-js { display: none !important; }
  .liste[hidden] { display: block !important; }
  html { background: #fff; }
  body { padding-bottom: 0 !important; font-size: 12pt; color: #000; background: #fff; }
  .fuss { background: none; text-align: left; }
  .fuss-innen { padding: 1rem 1rem 0 !important; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }