/*
 * DomiCur.io — Design-System (Teil G).
 * G-7/G-8: ausschliesslich diese Variablen fuer Farbe, keine Hex-Werte anderswo im Code.
 * G-10/G-12: Typografie ueber lokale Schriften (assets/fonts), fuenf Groessenstufen.
 * G-14: Grundraster 8px. G-31: Fristenleiste als einziges wiedererkennbares Element.
 *
 * Nachtrag 14.8.2026 — G-10, Schriftdateien eingebunden. Der Auftraggeber hat auf Rückfrage
 * entschieden, dass die von G-10 verlangten "zwei Schriftfamilien" wie folgt zu verstehen sind:
 * eine humanistische serifenlose Schrift (Fließtext, Oberfläche, Zahlen — mit echten OpenType-
 * Kapitälchen `smcp`/`c2sc` und Tabellenziffern) sowie eine zweite Familie ausschließlich für die
 * nach G-12 kursiv gesetzten Gesetzeszitate. Ausgewählt: Source Sans 3 (Regular/Bold) und
 * Source Serif 4 Italic — beide unter der SIL Open Font License 1.1 (siehe
 * `assets/fonts/LICENSE-SourceSans.txt`/`LICENSE-SourceSerif.txt`), lokal in
 * `httpdocs/assets/fonts/` als WOFF2 ausgeliefert, keine Einbindung eines externen Schriftdiensts.
 * Source Sans 3 wurde gezielt gewählt, weil sie bereits vor diesem Nachtrag als erster
 * Fallback-Name in der `body`-Regel unten stand (offenbar bereits vorgesehen, nie ausgeliefert)
 * und weil ihre Standard-Ziffern bereits von Haus aus tabellarisch (gleiche Breite) sind —
 * `font-variant-numeric: tabular-nums` unten wirkt sich dadurch nicht auf die Breite, aber
 * korrekt auf das Ziffernbild aus. Kapitälchen (`smcp`) und die Zitat-Schrift sind hier bewusst
 * nur als Bausteine bereitgestellt (Schriftdatei + Klasse `.dc-gesetzeszitat`), NICHT rückwirkend
 * auf `.dc-hilfe-knopf` angewendet — siehe Fund zu G-12 in STATUS.md (14.8.2026): dessen
 * Kursivsatz ist keine Gesetzeszitat-Verwendung und wurde hier bewusst nicht angetastet, weil das
 * eine bestehende, funktionierende Gestaltungsentscheidung ohne Bezug zu dieser Aufgabe wäre.
 */

@font-face {
  font-family: 'DomiCur.io Sans';
  src: url('../fonts/SourceSans3-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DomiCur.io Sans';
  src: url('../fonts/SourceSans3-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DomiCur.io Zitat';
  src: url('../fonts/SourceSerif4-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* G-7 — sechswertige Grundpalette */
  --dc-paper: #FBFBF9;
  --dc-ink: #1C2024;
  --dc-muted: #6B7280;
  --dc-rule: #D7D9D5;
  --dc-accent: #1E4B6E;
  --dc-surface: #F2F2EE;

  /* G-8 — Statusfarben, nie allein zur Zustandsvermittlung (F-28) */
  --dc-ok: #2F6B4F;
  --dc-warn: #8A6218;
  --dc-alert: #8C2F2F;

  /* G-12 — Typenskala, genau fuenf Stufen */
  --dc-fs-1: 13px;
  --dc-fs-2: 15px;
  --dc-fs-3: 17px;
  --dc-fs-4: 22px;
  --dc-fs-5: 30px;

  /* G-14 — Basiseinheit 8px */
  --dc-space-1: 8px;
  --dc-space-2: 16px;
  --dc-space-3: 24px;
  --dc-space-4: 32px;
  --dc-space-5: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--dc-paper);
  color: var(--dc-ink);
}

body {
  font-family: 'DomiCur.io Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: var(--dc-fs-2);
  line-height: 1.6;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 var(--dc-space-2) 0; }
h1 { font-size: var(--dc-fs-5); }
/* Bugfix 12.8.2026: ohne eigenen margin-top klebte eine Ueberschrift direkt am Speichern-Button
   des vorangegangenen Abschnitts (z. B. Ersteinrichtung Schritt 9). Grenzt an Vorgaenger-Elemente
   mit eigenem margin-bottom per CSS-Margin-Collapsing ab (kein doppelter Abstand). */
h2 { font-size: var(--dc-fs-4); margin-top: var(--dc-space-4); }
h3 { font-size: var(--dc-fs-3); }

p { margin: 0 0 var(--dc-space-2) 0; }

/* G-12 — "Kursiv wird ausschliesslich fuer Gesetzeszitate verwendet." Eigene Klasse mit der
   dafuer vorgesehenen zweiten Schriftfamilie (Nachtrag 14.8.2026, siehe Kopf dieser Datei). Noch
   nirgends im HTML verwendet, weil es aktuell keine als solche ausgezeichnete
   Gesetzeszitat-Textstelle gibt (Fundstellenangaben der Textbausteine werden bisher nicht separat
   gerendert) — als fertiger Baustein bereitgestellt, sobald eine solche Stelle entsteht. */
.dc-gesetzeszitat {
  font-family: 'DomiCur.io Zitat', Georgia, 'Times New Roman', serif;
  font-style: italic;
}

/* Bugfix 12.8.2026: Formulare hatten keinen eigenen Abstand nach unten. */
form { margin-bottom: var(--dc-space-4); }

a { color: var(--dc-accent); }

/* Abmelden (F-Anforderung: CSRF-geschuetztes POST-Formular statt <a href>, optisch wie ein Link). */
.dc-link-schaltflaeche {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--dc-accent); text-decoration: underline; cursor: pointer;
  font: inherit;
}

/* G-11 — Zahlenspalten: Tabellenziffern, rechtsbuendig, zwei Nachkommastellen */
.dc-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  display: inline-block;
  min-width: 6ch;
}
.dc-bruch { min-width: 8ch; }

table.dc-tabelle { width: 100%; border-collapse: collapse; font-size: var(--dc-fs-1); line-height: 1.35; }
table.dc-tabelle th, table.dc-tabelle td {
  border-bottom: 1px solid var(--dc-rule);
  padding: var(--dc-space-1) var(--dc-space-2);
  text-align: left;
}
table.dc-tabelle th { background: var(--dc-surface); font-weight: 600; }
table.dc-tabelle td.dc-num, table.dc-tabelle th.dc-num { text-align: right; }

/* G-15 — Seitenaufbau: Kopf, Bereichsnavigation, Arbeitsflaeche, Fuss */
.dc-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dc-space-2) var(--dc-space-3);
  border-bottom: 1px solid var(--dc-rule);
  background: var(--dc-surface);
  font-size: var(--dc-fs-1);
  color: var(--dc-muted);
}
.dc-kopf strong { color: var(--dc-ink); }
.dc-kopf-links { display: flex; align-items: center; flex-wrap: wrap; }
.dc-wortmarke {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dc-ink);
  font-size: var(--dc-fs-3);
}

.dc-rahmen { display: flex; min-height: calc(100vh - 120px); }
.dc-nav {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--dc-rule);
  padding: var(--dc-space-2);
}
.dc-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--dc-space-1);
  color: var(--dc-ink);
  text-decoration: none;
  border-radius: 6px;
  font-size: var(--dc-fs-1);
}
.dc-nav a:hover, .dc-nav a.dc-aktiv { background: var(--dc-surface); color: var(--dc-accent); }
.dc-nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--dc-muted); }
.dc-nav a:hover .dc-nav-icon, .dc-nav a.dc-aktiv .dc-nav-icon { color: var(--dc-accent); }

/* Ä-29 (Änderungslastenheft 13, G-36 bis G-37) — Navigation in acht statt einer flachen
   Liste; jede Gruppe ein natives <details>/<summary> (kein Fremdpaket, F-2d). */
.dc-nav-gruppe { border: none; margin-bottom: 2px; }
.dc-nav-gruppe > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--dc-space-1);
  cursor: pointer;
  list-style: none;
  font-size: var(--dc-fs-1);
  font-weight: 600;
  color: var(--dc-muted);
  border-radius: 6px;
  user-select: none;
}
.dc-nav-gruppe > summary::-webkit-details-marker { display: none; }
.dc-nav-gruppe > summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.dc-nav-gruppe[open] > summary::before { transform: rotate(45deg); }
.dc-nav-gruppe > summary:hover { background: var(--dc-surface); color: var(--dc-accent); }
/* G-37: "Die Gruppe des aktuellen Bereichs ist stets geöffnet und hervorgehoben." */
.dc-nav-gruppe--aktiv > summary { color: var(--dc-accent); }
.dc-nav-eintraege { padding-left: 2px; }

.dc-arbeitsflaeche { flex: 1; padding: var(--dc-space-3); max-width: 980px; }

/* Sichtbar nur fuer Screenreader — hier fuer die Beschriftung der G-42-Navigationsschaltflaeche
   (deren Bedeutung sich sonst nur aus drei Strichen erschliesst). */
.dc-sr-nur {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* G-42 — Schaltflaeche fuer die Seitennavigation in der Kopfzeile; oberhalb 768px verborgen
   (dort bleibt die Seitenleiste, .dc-nav oben, dauerhaft sichtbar), siehe Media Query weiter
   unten fuer die Anzeige darunter. */
.dc-seitennav-schalter {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-right: var(--dc-space-2);
  background: none;
  border: 1px solid var(--dc-rule);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.dc-seitennav-schalter-strich {
  display: block;
  height: 1.5px;
  margin: 0 7px;
  background: var(--dc-ink);
}
.dc-seitennav-schalter:hover { border-color: var(--dc-accent); }
.dc-seitennav-schalter[aria-expanded="true"] .dc-seitennav-schalter-strich { background: var(--dc-accent); }

.dc-fuss {
  padding: var(--dc-space-2) var(--dc-space-3);
  border-top: 1px solid var(--dc-rule);
  color: var(--dc-muted);
  font-size: var(--dc-fs-1);
  display: flex;
  justify-content: space-between;
}

/* F-32 — Demobestand: deutlicher, seitenweiter Hinweis, solange config.app.demo_modus aktiv ist. */
.dc-demo-banner {
  background: var(--dc-warn);
  color: #fff;
  text-align: center;
  padding: 6px var(--dc-space-2);
  font-size: var(--dc-fs-1);
  font-weight: 600;
}

/* G-17 — Hinweisstreifen bei geoeffneter Vorperiode */
.dc-hinweisstreifen {
  background: var(--dc-surface);
  border-left: 4px solid var(--dc-warn);
  padding: var(--dc-space-1) var(--dc-space-2);
  margin-bottom: var(--dc-space-2);
  font-size: var(--dc-fs-1);
}

/* G-23 — Pflichttexte: linke Randlinie, Beschriftung, nicht editierbar */
.dc-pflichttext {
  border-left: 3px solid var(--dc-rule);
  padding: var(--dc-space-1) var(--dc-space-2);
  margin: var(--dc-space-2) 0;
  background: var(--dc-surface);
}
.dc-pflichttext-label {
  font-size: var(--dc-fs-1);
  color: var(--dc-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
}

/* Bedienelemente — G-19: Verbphrasen, keine generischen Labels */
.dc-btn {
  display: inline-block;
  font: inherit;
  font-size: var(--dc-fs-2);
  background: var(--dc-accent);
  color: var(--dc-paper);
  border: 1px solid var(--dc-accent);
  padding: var(--dc-space-1) var(--dc-space-2);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}
.dc-btn:hover { opacity: 0.92; }
.dc-btn.dc-btn-sekundaer { background: transparent; color: var(--dc-accent); }
.dc-btn.dc-btn-warnung { background: var(--dc-alert); border-color: var(--dc-alert); }

/* Einklappbare optionale Abschnitte (natives <details>, erstmals Ersteinrichtung Schritt 7
   "Weitere Angaben"; seit 12.8.2026 auch fuer ganze Seitenabschnitte wiederverwendet, z. B.
   Ersteinrichtung Schritt 9 "Freie Miteigentumsanteile"/"Fruchtgenussrechte" — bewusst dieselbe
   Klasse, damit das Muster systemweit als EIN wiedererkennbares Bauteil auftritt statt mehrerer
   aehnlicher Varianten). */
.dc-feld-weitere-angaben { margin: var(--dc-space-2) 0; }
.dc-feld-weitere-angaben > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--dc-fs-4);
  line-height: 1.25;
  padding: var(--dc-space-1) 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
/* display:flex unterdrueckt den nativen Aufklapp-Pfeil (list-item-Marker) — Ersatz per
   Pseudo-Element, damit die Auf-/Zuklappbarkeit weiterhin sichtbar ist. */
.dc-feld-weitere-angaben > summary::-webkit-details-marker { display: none; }
.dc-feld-weitere-angaben > summary::before {
  content: '▸';
  display: inline-block;
  color: var(--dc-muted);
  transition: transform 0.15s ease;
}
.dc-feld-weitere-angaben[open] > summary::before { transform: rotate(90deg); }
.dc-feld-weitere-angaben[open] > summary { margin-bottom: var(--dc-space-2); }

/* Abschnitts-Kopf mit (i)-Hilfeknopf (12.8.2026, analog .dc-feld-kopf, aber fuer
   Abschnittsueberschriften statt Feldbeschriftungen — z. B. Ersteinrichtung Schritt 9). */
.dc-abschnitt-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  margin: var(--dc-space-4) 0 var(--dc-space-2) 0;
}
.dc-abschnitt-kopf > h2, .dc-abschnitt-kopf > h3 { margin: 0; }
legend { position: relative; }

/* Formulare */
.dc-feld { margin-bottom: var(--dc-space-2); }
.dc-feld label { display: block; margin-bottom: 4px; font-size: var(--dc-fs-1); color: var(--dc-muted); }
.dc-feld input, .dc-feld select, .dc-feld textarea {
  font: inherit;
  font-size: var(--dc-fs-2);
  padding: 10px var(--dc-space-2);
  border: 1px solid var(--dc-rule);
  border-radius: 8px;
  width: 100%;
  background: var(--dc-paper);
  color: var(--dc-ink);
}
.dc-feld input:focus, .dc-feld select:focus, .dc-feld textarea:focus {
  outline: 2px solid var(--dc-accent);
  outline-offset: 1px;
  border-color: var(--dc-accent);
}
/* Korrektur: die obige Feld-Grundformatierung (volle Breite, Rahmen, Innenabstand) war fuer
   Text-/Auswahlfelder gedacht und traf mangels Ausschluss auch Radiobuttons/Checkboxen —
   dadurch wurden diese als breite Kaestchen statt als kleiner Kreis/Haken dargestellt, mit dem
   zugehoerigen Beschriftungstext in falscher Zeile. Auf eigenstaendige Groesse zurueckgesetzt. */
.dc-feld input[type="checkbox"], .dc-feld input[type="radio"] {
  width: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  flex-shrink: 0;
}
/* Zeile aus Radiobutton/Checkbox und Beschriftungstext: Eingabeelement immer VOR dem Text,
   in derselben Zeile, senkrecht mittig zur ersten Textzeile ausgerichtet.
   Nachtrag (zweiter Anlauf): als reine ".dc-checkbox-zeile"-Regel (Spezifitaet 0,1,0) verlor
   diese Regel gegen ".dc-feld label { display:block; ... }" (Spezifitaet 0,1,1) weiter oben,
   sobald das Label in einem .dc-feld steckt — display:flex griff dadurch nie, das Element
   blieb block, Eingabeelement und Text fielen auf getrennte Zeilen. Ein erster Fixversuch mit
   ".dc-feld .dc-checkbox-zeile" schlug fehl, weil nicht jede Verwendung dieser Klasse in
   dieser Codebasis in einem .dc-feld steckt (z. B. schritt12.php, schritt14.php stehen direkt
   im <form>). Deshalb jetzt kontextunabhaengig ueber die verdoppelte Klasse
   ".dc-checkbox-zeile.dc-checkbox-zeile" (Spezifitaet 0,2,0) erzwungen — schlaegt
   ".dc-feld label" unabhaengig davon, ob ein .dc-feld-Vorfahre existiert oder nicht. */
.dc-checkbox-zeile.dc-checkbox-zeile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
}
.dc-checkbox-zeile.dc-checkbox-zeile input[type="checkbox"], .dc-checkbox-zeile.dc-checkbox-zeile input[type="radio"] {
  margin: 0;
  position: relative;
  top: 2px;
}
.dc-hilfetext { color: var(--dc-muted); font-size: var(--dc-fs-1); }

/* G-13 — Textspalten max. 68 Zeichen. Gilt fuer laufenden Fliesstext (Absaetze, Hilfe- und
   Erlaeuterungstexte, Pflichttexte), NICHT fuer Tabellen, Formularraster oder die allgemeine
   Arbeitsflaechenbreite (.dc-arbeitsflaeche bleibt bei 980px als reiner Layout-Rahmen). */
p, .dc-hilfetext, .dc-erlaeuterung, .dc-pflichttext p, .dc-hilfe-bedeutung, .dc-hilfe-bezugsquelle {
  max-width: 68ch;
}

/* Schrittleiste (Ersteinrichtung) — runde Pills, erledigte Schritte mit Haken */
.dc-schrittleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--dc-space-3); }
.dc-schritt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--dc-rule);
  color: var(--dc-muted);
  font-size: var(--dc-fs-1);
  text-decoration: none;
  background: var(--dc-paper);
}
.dc-schritt-pill .dc-schritt-marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
  flex-shrink: 0;
}
.dc-schritt-pill.dc-schritt-erledigt { color: var(--dc-ok); border-color: var(--dc-ok); }
.dc-schritt-pill.dc-schritt-erledigt .dc-schritt-marke { background: var(--dc-ok); color: var(--dc-paper); border-color: var(--dc-ok); }
.dc-schritt-pill.dc-schritt-aktuell { background: var(--dc-accent); border-color: var(--dc-accent); color: var(--dc-paper); font-weight: 600; }
.dc-schritt-pill.dc-schritt-aktuell .dc-schritt-marke { border-color: var(--dc-paper); }
.dc-schritt-pill.dc-schritt-offen:hover { border-color: var(--dc-accent); color: var(--dc-accent); }

/* Sticky Aktionsleiste am Formularende (z.B. Ersteinrichtung: Weiter/Abbrechen) */
.dc-aktionsleiste {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--dc-space-2);
  padding: var(--dc-space-2) 0;
  margin-top: var(--dc-space-3);
  background: var(--dc-paper);
  border-top: 1px solid var(--dc-rule);
}

/* D1-12a — Pflichtfeld in Worten, kein alleinstehendes Sternchen */
.dc-pflicht-kennzeichen { color: var(--dc-muted); font-weight: 400; }
.dc-optional-hinweis { color: var(--dc-muted); font-size: var(--dc-fs-1); font-weight: 400; }

/* D1-9 — mehrere Felder einer strukturierten Angabe (z.B. Adresse) nebeneinander */
.dc-feldgruppe { display: flex; gap: var(--dc-space-2); flex-wrap: wrap; }
.dc-feldgruppe .dc-feld { flex: 1 1 160px; }

/* D1-8 — Feldhilfe: Fragezeichen-Knopf neben der Beschriftung, Hilfebereich als schwebendes
   Modul darunter. Auf ausdruecklichen Wunsch des Auftraggebers (5.8.2026) als echtes Overlay
   umgestellt — weicht damit von T-32d ("kein ueberlagerndes Fenster") ab; siehe IMPLEMENTIERUNG.md.
   .dc-feld-kopf ist der Ankerpunkt (position: relative), damit .dc-hilfe-bereich absolut dazu
   positioniert werden kann, ohne den nachfolgenden Zeilenfluss zu verschieben. */
.dc-feld-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; position: relative; }
.dc-feld-kopf label { margin-bottom: 0; }
.dc-hilfe-knopf {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  line-height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--dc-muted);
  background: var(--dc-paper);
  color: var(--dc-muted);
  font-size: var(--dc-fs-1);
  font-weight: 600;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  cursor: pointer;
  text-align: center;
}
.dc-hilfe-knopf:hover, .dc-hilfe-knopf[aria-expanded="true"] {
  border-color: var(--dc-accent);
  color: var(--dc-accent);
}
.dc-hilfe-bereich {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--dc-rule);
  border-left: 3px solid var(--dc-accent);
  border-radius: 8px;
  background: var(--dc-paper);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  padding: var(--dc-space-2);
  padding-right: 32px;
  font-size: var(--dc-fs-1);
}
/* D1-8c Nr. 6 — Viewport-Kollisionspruefung (domicurio.js: positioniere()) dreht das Fenster bei
   Bedarf nach oben bzw. rechtsbuendig, statt es am Rand abzuschneiden. */
.dc-hilfe-bereich.dc-hilfe-bereich--oben { top: auto; bottom: calc(100% + 8px); }
.dc-hilfe-bereich.dc-hilfe-bereich--links { left: auto; right: 0; }
.dc-hilfe-bereich:focus { outline: 2px solid var(--dc-accent); outline-offset: 2px; }
.dc-hilfe-bereich p:last-child { margin-bottom: 0; }
.dc-hilfe-bezugsquelle { margin-top: var(--dc-space-1); }
.dc-hilfe-rechtsgrundlage { margin-top: var(--dc-space-1); }
.dc-hilfe-rechtsgrundlage summary {
  cursor: pointer;
  color: var(--dc-muted);
  font-size: var(--dc-fs-1);
}
.dc-hilfe-rechtsgrundlage summary:hover { color: var(--dc-accent); }

/* Kein .dc-hilfe-schliessen mehr (9.8.2026, auf Wunsch des Auftraggebers entfernt) — siehe
   ABWEICHUNGEN.md, Abweichung von D1-8c Nr. 2. Schliessen bleibt ueber Escape und Klick
   ausserhalb moeglich (domicurio.js). */

/* D1-8c Nr. 5 — unter 480px Anzeigebreite bildschirmfuellend, nicht als schmaler Kasten. */
@media (max-width: 480px) {
  .dc-hilfe-bereich,
  .dc-hilfe-bereich.dc-hilfe-bereich--oben,
  .dc-hilfe-bereich.dc-hilfe-bereich--links {
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border-left: 1px solid var(--dc-rule);
    overflow-y: auto;
    padding: var(--dc-space-2);
    z-index: 100;
  }
}
.dc-hilfe-rechtsgrundlage p { margin-top: 4px; }

/* D1-11c — dauerhafter Hinweis unter einem Feld (nicht hinter dem Fragezeichen verborgen) */
.dc-feld-dauerhinweis { color: var(--dc-muted); font-size: var(--dc-fs-1); margin: -4px 0 var(--dc-space-2) 0; }

/* G-8 — Statuszustaende, immer mit Text/Symbol, nie allein Farbe */
.dc-status { font-size: var(--dc-fs-1); padding: 2px 8px; border-radius: 3px; border: 1px solid; }
.dc-status-ok { color: var(--dc-ok); border-color: var(--dc-ok); }
.dc-status-warn { color: var(--dc-warn); border-color: var(--dc-warn); }
.dc-status-alert { color: var(--dc-alert); border-color: var(--dc-alert); }

/* G-31 — Fristenleiste, das eine wiedererkennbare Element, rein darstellend */
.dc-fristenleiste {
  display: flex;
  gap: var(--dc-space-3);
  padding: var(--dc-space-2) 0;
  margin-bottom: var(--dc-space-3);
  border-bottom: 1px solid var(--dc-rule);
  font-size: var(--dc-fs-1);
}
.dc-fristenleiste .dc-frist-marke { flex: 1; border-top: 2px solid var(--dc-rule); padding-top: 6px; }
.dc-fristenleiste .dc-frist-marke.dc-status-ok { border-top-color: var(--dc-ok); }
.dc-fristenleiste .dc-frist-marke.dc-status-warn { border-top-color: var(--dc-warn); }
.dc-fristenleiste .dc-frist-marke.dc-status-alert { border-top-color: var(--dc-alert); }
@media (max-width: 480px) {
  .dc-fristenleiste { flex-direction: column; gap: var(--dc-space-1); }
}

/* G-42 (Änderungslastenheft 14) — "Unterhalb von 768 Pixeln Breite tritt an die Stelle der
   Seitenleiste eine Navigation, die über eine Schaltfläche in der Kopfzeile geöffnet wird."
   Ersetzt den vorherigen 640px-Entwurf, der die Navigation nur unter die Arbeitsflaeche
   gestapelt statt sie durch eine schaltflaechengesteuerte Navigation zu ERSETZEN hatte und mit
   640px ausserdem die falsche Schwelle verwendete. Die Gruppierung nach G-36 (.dc-nav-gruppe
   oben) bleibt unveraendert — hier aendert sich nur, wie/ob .dc-nav ueberhaupt sichtbar ist. */
@media (max-width: 768px) {
  .dc-seitennav-schalter { display: flex; }

  .dc-rahmen { position: relative; }
  .dc-nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: min(280px, 84vw);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    background: var(--dc-paper);
    border-right: 1px solid var(--dc-rule);
    border-bottom: 1px solid var(--dc-rule);
    box-shadow: 2px 2px 10px rgba(28, 32, 36, 0.15);
  }
  /* domicurio.js setzt/entfernt diese Klasse per Klick auf #dc-seitennav-schalter. */
  .dc-nav.dc-nav--offen { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}