/* DerUno Landingpage, Seite „Demo" · Stand 05.10.2026 · Fassung 2
   Änderung 05.10.2026: Die bis dahin gewachsenen Schichten (Seitenleiste, Dreispalter, Reiter,
   Band, Raster) sind zu einem Stand zusammengeführt; Regeln für nicht mehr erzeugtes Markup
   (Navigationsspalten, Reiter, Blättern, Felder, Cockpit-Kopf) sind entfallen.
   Ursprung: agentcrm-plattform/oeffentlichedemo/stil.css. Die Tokens der Demo zeigen auf die
   Tokens der Landingpage (styles.css). Alles gilt nur innerhalb von .demo-seite. */

.demo-seite {
  --grund: var(--basalt);
  --flaeche: var(--stahl);
  --flaeche-2: var(--stahl-2);
  --rand: var(--kante);
  --rand-hell: var(--kante-hell);
  --text: var(--ink);
  --text-matt: var(--nebel);
  --text-leise: var(--dunst);
  --wald-schein: rgba(122, 184, 144, 0.1);
  --wald-rand: rgba(122, 184, 144, 0.28);
  --warn: #d6a55c;
  --warn-schein: rgba(214, 165, 92, 0.1);
  --warn-rand: rgba(214, 165, 92, 0.26);
  --sperre: #d4897a; /* aufgehellt fuer Kontrast >= 4,5:1 (WCAG 1.4.3) */
  --sperre-schein: rgba(200, 123, 106, 0.1);
  --sperre-rand: rgba(200, 123, 106, 0.26);
  --radius: 6px;
  --radius-klein: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

/* ── Einbettung in die Landingpage ─────────────────────────────────────── */

/* Die Landingpage setzt p auf 68ch und Überschriften auf Plakatgröße. In der Demo nicht. */
:where(.demo-seite) p { max-width: none; }
:where(.demo-seite) :is(h2, h3, h4) { line-height: 1.25; }
/* Die Landingpage polstert jede section und rendert sie verzögert. Die Demo nutzt section
   als Baustein innerhalb der Bühne; dort weder Polster noch Verzögerung. */
.demo-seite .buehne section { padding-block: 0; content-visibility: visible; contain-intrinsic-size: none; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blatt); color: var(--blatt-ink); padding: 10px 16px; border-radius: 4px; font-weight: 650; }
.skip-link:focus { top: 12px; }
/* Nur auf der Demo: Unter der halbdurchsichtigen Kopfzeile laufen helle Papierseiten durch;
   bei 82 % Deckung fiel die Navigation dort unter 4,5:1. */
.site-header { background: rgba(var(--basalt-rgb), .97); }
.nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--wald-hell); text-underline-offset: 6px; }
.demo-seite :where(button, a):focus-visible { outline: 2px solid var(--wald-hell); outline-offset: 2px; }

.demo-erklaerung { border-top: 1px solid var(--kante); padding-block: 32px 48px; font-size: .95rem; color: var(--dunst); }
.demo-erklaerung h2 { font-size: 1.25rem; margin-bottom: .6em; }

/* ── Gerüst und Bühne ──────────────────────────────────────────────────── */

.demo-seite .geruest { max-width: 1440px; margin-inline: auto; padding-inline: 16px; }
.demo-seite .buehne { min-width: 0; max-width: none; padding: 28px 0 60px; }
@media (max-width: 860px) { .demo-seite .buehne { padding-bottom: 40px; } }

/* ── Kopf: Fall als Überschrift, Demo-Hinweis in der Unterzeile ─────────── */

.demo-seite .demo-kopf { margin: 0 0 28px; }
/* Hierarchie: Fall (28) > Schritt (21, mit großer Nummer) > Karte (15,5) > Fließtext (15). */
.demo-seite .demo-kopf h1 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -0.025em; }
.demo-seite .demo-kopf p { margin: 4px 0 0; color: var(--text-leise); font-size: 14.5px; }
.demo-seite .demo-kennung {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--rand);
  border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-leise); vertical-align: 1px; white-space: nowrap;
}
@media (max-width: 620px) { .demo-seite .demo-kennung { display: table; margin: 6px 0 0; } }

/* Fazit: Fließtext unter der Unterzeile, kein Kasten (Vorgabe 05.10.2026). Die Zahlen stehen
   im Satz und sind nur durch Gewicht und Textfarbe leicht hervorgehoben. */
.demo-seite .demo-kopf .fazit { margin: 10px 0 0; max-width: 110ch; font-size: 14px; line-height: 1.6; color: var(--text-leise); }
.demo-seite .fazit-zahlen { display: block; }
.demo-seite .fazit b { color: var(--text-matt); font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-seite .fazit-titel { color: var(--text-matt); font-weight: 600; }

/* ── Schritte als Raster: so viele Spalten, wie passen (meist drei) ─────── */

.demo-seite .ablauf-band {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  align-items: stretch; gap: 16px; padding: 4px 0 18px;
}
.demo-seite .ablauf-band:focus-visible { outline: 2px solid var(--wald-hell); outline-offset: 4px; }

.demo-seite .abschnitt {
  min-width: 0; margin: 0; padding: 20px 20px 24px;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche);
  /* Nummer und Titel stehen in einer Zeile, alles andere läuft über die volle Breite. */
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: start;
  /* Sprungziele nicht unter der Kopfzeile verstecken. */
  scroll-margin-top: 150px;
}
.demo-seite .abschnitt > * { grid-column: 1 / -1; min-width: 0; }
/* Die Nummer trägt die Reihenfolge: groß, in der Leitfarbe, gleich breite Ziffern. */
.demo-seite .abschnitt > .abschnitt-nr {
  grid-column: 1; align-self: baseline; margin: 0;
  font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--wald-hell);
}
.demo-seite .abschnitt > .abschnitt-titel {
  grid-column: 2; align-self: baseline; margin: 0;
  font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--text);
}
.demo-seite .abschnitt-text { color: var(--text-leise); margin: 12px 0 0; max-width: 72ch; }
.demo-seite .abschnitt-text + :not(.abschnitt-text) { margin-top: 18px; }
.demo-seite .abschnitt-titel + :not(.abschnitt-text) { margin-top: 18px; }
@media (max-width: 620px) {
  .demo-seite .abschnitt { padding: 16px 14px 20px; column-gap: 12px; }
  .demo-seite .abschnitt > .abschnitt-nr { font-size: 26px; }
  .demo-seite .abschnitt > .abschnitt-titel { font-size: 19px; }
}

/* Ein aufgeklapptes Dokument nimmt die ganze Zeile ein, wie beim Betreuungsgericht (05.10.2026):
   Tabellen mit sechs bis acht Spalten passen nicht in eine Rasterspalte und dürfen nie über die
   Karte ragen. Sind zwei offen, stehen sie nebeneinander. */
.demo-seite .abschnitt:has(.dok-stapel, .eingang) { grid-column: 1 / -1; }
.demo-seite .dok-stapel > *, .demo-seite .eingang > * { min-width: 0; }
.demo-seite .eingang { max-width: 1180px; }

/* ── Tafeln ────────────────────────────────────────────────────────────── */

.demo-seite .tafel {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.demo-seite .tafel-titel {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-leise);
  margin: 0 0 12px;
}
.demo-seite .tafel.datei { border-color: var(--wald-rand); }
.demo-seite .datei-name { font-weight: 650; margin: 0 0 2px; font-size: 15px; }
.demo-seite .datei-unter { color: var(--text-leise); font-size: 13px; margin: 0 0 14px; }

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

.demo-seite .knopf {
  font: inherit;
  border-radius: var(--radius-klein);
  padding: 8px 15px;
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
  color: var(--text);
  cursor: pointer;
}
.demo-seite .knopf:hover:not(:disabled) { border-color: var(--rand-hell); }
.demo-seite .knopf:disabled { opacity: 0.4; cursor: not-allowed; }
.demo-seite .knopf.haupt { background: var(--wald); border-color: var(--wald-hoch); color: var(--wald-ink); font-weight: 600; }
.demo-seite .knopf.haupt:hover:not(:disabled) { background: var(--wald-hoch); }
.demo-seite .knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Freigabe-Karten: ein Hauptknopf, die beiden anderen als leise Textknöpfe daneben. */
.demo-seite .karte .knopf-reihe { gap: 4px 6px; }
.demo-seite .karte .knopf:not(.haupt) {
  background: transparent; border-color: transparent; color: var(--text-matt);
  padding: 8px 10px; font-size: 14px;
}
.demo-seite .karte .knopf:not(.haupt):hover:not(:disabled) { color: var(--text); border-color: var(--rand-hell); }
/* Hauptknopf in eigener Zeile, die beiden leisen Knöpfe gemeinsam darunter: In einer
   Rasterspalte passen nicht alle drei nebeneinander, und ein allein umbrechendes
   „Selbst erledigt“ wirkte verloren. */
.demo-seite .karte .knopf-reihe::before { content: ""; flex-basis: 100%; order: 1; }
.demo-seite .karte .knopf-reihe > .knopf:not(.haupt) { order: 2; }
.demo-seite .karte .knopf-reihe > .knopf.haupt + .knopf { margin-left: -10px; }

/* ── Vorschläge (wie das Aktions-Cockpit im Portal) ────────────────────── */

.demo-seite .cockpit {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  margin-bottom: 16px;
}
/* In der Schrittkarte kein weiterer Rahmen: Karte in Rahmen in Karte war eine Ebene zu viel. */
.demo-seite .abschnitt .cockpit { border: 0; background: none; border-radius: 0; margin-bottom: 0; }
.demo-seite .cockpit-schalter { padding: 0 0 12px; }
.demo-seite .cockpit-koerper { padding: 0; }
/* Die „vorbereitet"-Zeile ist im Portal ein Schalter und sieht hier genauso aus. */
.demo-seite .vorbereitet {
  font-size: 12px;
  font-weight: 400;
  color: var(--freigabe);
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.demo-seite .vorbereitet:hover { text-decoration: underline; }
.demo-seite .vorbereitet strong { font-weight: 650; }

.demo-seite .fallgruppe { margin-bottom: 16px; }
.demo-seite .fallgruppe-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 11px;
}
.demo-seite .fallgruppe-name { font-weight: 600; font-size: 14px; }
.demo-seite .fallgruppe-zahl { font-size: 12.5px; color: var(--text-leise); }
.demo-seite .fallgruppe:last-child { margin-bottom: 0; }

.demo-seite .karte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  padding: 16px;
  margin-bottom: 12px;
}
.demo-seite .karte:last-child { margin-bottom: 0; }
.demo-seite .karte.gesperrt { border-style: dashed; } /* gesperrt über Umrandung, nicht über Transparenz: Kontrast WCAG 1.4.3 */
.demo-seite .karte.erledigt { border-color: var(--wald-rand); background: var(--wald-schein); }
.demo-seite .karte.abgelehnt { opacity: 0.5; }
/* Eine erzeugte Datei als Karte in der Kaskade */
.demo-seite .karte.datei-karte { border-color: var(--wald-rand); background: var(--flaeche); }

.demo-seite .karte-kopf { display: flex; gap: 10px; align-items: flex-start; }
.demo-seite .karte-symbol { font-size: 18px; line-height: 1.3; }
.demo-seite .karte-titel { font-size: 15.5px; font-weight: 650; line-height: 1.35; margin: 0 0 3px; color: var(--text); }
.demo-seite .karte-typ { font-family: var(--mono); font-size: 10.5px; color: var(--text-leise); letter-spacing: 0.03em; }
.demo-seite .karte-grund { color: var(--text-leise); font-size: 14px; margin: 10px 0 0; }

/* Lange Wirkungstexte: Etikett als eigene kleine Zeile, Text mit mehr Zeilenabstand und etwas
   leiser, damit der Block nicht als Wand vor den Knöpfen steht. */
.demo-seite .wirkung {
  margin: 12px 0 0;
  padding: 10px 12px 11px;
  border-left: 2px solid var(--wald-hell);
  background: var(--flaeche);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-matt);
}
.demo-seite .wirkung b {
  display: block; margin-bottom: 3px; color: var(--wald-hell); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
}

.demo-seite .marker {
  display: inline-block;
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 9px;
  border: 1px solid var(--rand);
  color: var(--text-leise);
  white-space: nowrap;
}
.demo-seite .marker.frist { color: var(--warn); border-color: var(--warn-rand); background: var(--warn-schein); }
.demo-seite .marker.sperre { color: var(--sperre); border-color: var(--sperre-rand); background: var(--sperre-schein); }
.demo-seite .marker.norm { color: var(--wald-hell); border-color: var(--wald-rand); background: var(--wald-schein); }
.demo-seite .marker-reihe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

.demo-seite .ergebnis {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-klein);
  background: var(--wald-schein);
  border: 1px solid var(--wald-rand);
  font-size: 13px;
}
.demo-seite .ergebnis-titel { font-weight: 650; color: var(--freigabe); }
.demo-seite .ergebnis ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-matt); }

/* ── Dokumente, Bogen, Belege ──────────────────────────────────────────── */

.demo-seite .blatt {
  background: #f2f0eb;
  color: #14181d;
  border-radius: var(--radius-klein);
  padding: 20px 24px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.demo-seite .blatt-kopf { font-weight: 700; margin-bottom: 8px; }

/* Der Vordruck des Instituts: Etikett links, Angabe rechts, dünne Trennlinien. */
.demo-seite .bogen { width: 100%; border-collapse: collapse; margin-top: 14px; }
.demo-seite .bogen th {
  text-align: left;
  font-weight: 400;
  color: #5b6168;
  width: 42%;
  padding: 5px 14px 5px 0;
  border-bottom: 1px solid #dcd9d2;
  vertical-align: top;
}
.demo-seite .bogen td {
  padding: 5px 0;
  border-bottom: 1px solid #dcd9d2;
  font-weight: 600;
  vertical-align: top;
}
.demo-seite .bogen tr:last-child th, .demo-seite .bogen tr:last-child td { border-bottom: 0; }
.demo-seite .bogen-fuss { margin: 14px 0 0; font-style: italic; color: #5b6168; font-size: 12px; }

/* Klappe (der hochgeladene Bogen) */
.demo-seite .klappe {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.demo-seite .klappe-pfeil { color: var(--wald-hell); font-size: 12px; }
.demo-seite .klappe-hinweis { margin-left: auto; font-size: 11px; color: var(--text-leise); }
.demo-seite .klappe:hover .klappe-hinweis { color: var(--text-matt); }

.demo-seite .belegliste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-matt);
}
.demo-seite .belegliste li {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid #1c1c1c;
}
.demo-seite .belegliste li:last-child { border-bottom: 0; }
.demo-seite .beleg-nr { color: var(--text-leise); }
/* Zwanzig Zeilen untereinander sind eine Wand — zweispaltig bleibt es eine Liste. */
.demo-seite .belegliste.zweispaltig { columns: 2; column-gap: 28px; }
.demo-seite .belegliste.zweispaltig li { break-inside: avoid; border-bottom: 0; padding: 3px 0; }
@media (max-width: 640px) { .demo-seite .belegliste.zweispaltig { columns: 1; } }

/* Aufklappbare Dokumente */
.demo-seite .dok-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.demo-seite .dok-knopf {
  font: inherit; font-size: 13.5px; cursor: pointer; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--wald-rand); border-radius: 6px; padding: 8px 12px;
  text-align: left; line-height: 1.4;
}
.demo-seite .dok-knopf:hover { border-color: var(--wald-hell); }
.demo-seite .dok-knopf[aria-expanded="true"] { background: var(--wald-schein); border-color: var(--wald-hell); }
.demo-seite .dok-hinweis { font-size: 11.5px; color: var(--sperre); margin-left: 4px; }
.demo-seite .dok-stapel { display: grid; gap: 12px; }
.demo-seite .dok-anmerkung { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--sperre); background: var(--sperre-schein); color: var(--text); font-size: 13px; border-radius: var(--radius-klein); }

/* Gerichtseingang: zwei PDFs als Papierseiten nebeneinander. */
.demo-seite .eingang { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .demo-seite .eingang { grid-template-columns: 1fr; } }
.demo-seite .pdf { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.demo-seite .pdf-name { font-family: var(--mono); font-size: 11px; color: var(--text-leise); }
.demo-seite .pdf-blatt {
  position: relative; background: #f4f2ed; color: #1d1f22; border-radius: 3px;
  padding: 12px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); font-size: 11px; line-height: 1.35;
}
.demo-seite .pdf-titel { margin: 0 0 2px; font-weight: 700; font-size: 12px; color: #1d1f22; }
.demo-seite .pdf-unter { margin: 0 0 6px; color: #4a4f55; font-size: 10.5px; }
/* Schmal: Text in den Zellen bricht um, statt das Blatt über die Karte zu schieben. */
.demo-seite .pdf-tabelle td:not(.zahl) { overflow-wrap: anywhere; }
.demo-seite .pdf-tabelle { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.demo-seite .pdf-tabelle th { text-align: left; font-weight: 700; color: #4a4f55; border-bottom: 1px solid #c9c5bc; padding: 3px 4px; }
.demo-seite .pdf-tabelle td { padding: 2px 4px; border-bottom: 1px solid #e3dfd6; color: #1d1f22; }
.demo-seite .pdf-tabelle .zahl { text-align: right; white-space: nowrap; }
.demo-seite .pdf-tabelle tr.luecke td { text-align: center; color: #5a5f66; font-style: italic; }
.demo-seite .pdf-tabelle tr.bestand td { font-weight: 700; border-top: 1px solid #c9c5bc; }
.demo-seite .pdf-stempel {
  position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: #7a1f14; border: 1.5px solid #7a1f14; padding: 1px 6px; border-radius: 2px; transform: rotate(-3deg);
}

/* Markierungen in den Dokumenten und kurze Legende. */
.demo-seite .pdf-tabelle tr.mark-rot td { background: #f6d6d0; }
.demo-seite .pdf-tabelle tr.mark-gelb td { background: #f5e6c3; }
.demo-seite .pdf-tabelle tr.mark-blau td { background: #d8e4f3; }
.demo-seite .pdf-tabelle tr.mark-gruen td { background: #d7ecdd; }
.demo-seite .pdf-tabelle tr.mark-rot td:first-child { box-shadow: inset 3px 0 #a3261b; }
.demo-seite .pdf-tabelle tr.mark-gelb td:first-child { box-shadow: inset 3px 0 #8a5d08; }
.demo-seite .pdf-tabelle tr.mark-blau td:first-child { box-shadow: inset 3px 0 #2f5496; }
.demo-seite .pdf-tabelle tr.mark-gruen td:first-child { box-shadow: inset 3px 0 #2e6b3a; }
.demo-seite .mark-note { font-weight: 700; margin-left: 3px; color: #1d1f22; }
.demo-seite .legende { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.demo-seite .legende li { padding: 6px 10px; border-radius: var(--radius-klein); border-left: 3px solid; color: var(--text); }
.demo-seite .legende .mark-note { color: inherit; margin: 0 6px 0 0; }
.demo-seite .legende-rot { border-color: var(--sperre); background: var(--sperre-schein); }
.demo-seite .legende-gelb { border-color: var(--warn); background: var(--warn-schein); }
.demo-seite .legende-blau { border-color: #7fa3d9; background: rgba(127, 163, 217, .1); }
.demo-seite .legende-gruen { border-color: var(--wald-hell); background: var(--wald-schein); }

/* ── Tabellen ──────────────────────────────────────────────────────────── */

.demo-seite .tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.demo-seite .tabelle th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-leise);
  font-weight: 500;
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--rand);
}
.demo-seite .tabelle td { padding: 8px 10px 8px 0; border-bottom: 1px solid #1c1c1c; vertical-align: top; }
.demo-seite .tabelle tr:last-child td { border-bottom: 0; }
.demo-seite .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-seite .tabelle tr.mark-rot td { background: var(--sperre-schein); }
.demo-seite .tabelle tr.mark-rot td:first-child { box-shadow: inset 3px 0 var(--sperre); }
.demo-seite .tabelle tr.anmerkung td {
  background: var(--sperre-schein); color: var(--sperre); font-size: 12px; white-space: normal !important;
  border-bottom: 1px solid var(--sperre-rand);
}

/* Lange Tabellen rollen in sich, der Kopf bleibt stehen. Text bricht um, Zahlen und Datum
   nicht: So bleiben Betrag, Saldo und Beleg im Blick. */
.demo-seite .tabelle-rolle { max-height: 420px; overflow: auto; border: 1px solid var(--wald-rand); border-radius: var(--radius-klein); }
.demo-seite .tabelle-rolle .tabelle { font-size: 11.5px; min-width: 600px; }
.demo-seite .tabelle-rolle thead th { position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.demo-seite .tabelle-rolle td, .demo-seite .tabelle-rolle th { padding: 7px 6px; }
.demo-seite .tabelle-rolle td.zahl, .demo-seite .tabelle-rolle th.zahl,
.demo-seite .tabelle-rolle td:nth-child(2) { white-space: nowrap; }
.demo-seite .tabelle-rolle td:last-child { overflow-wrap: anywhere; }
.demo-seite .tabelle.summen { margin-top: 10px; max-width: 460px; margin-left: auto; }
.demo-seite .tabelle.summen tr:last-child td { font-weight: 700; border-top: 1px solid var(--wald-rand); }

/* ── Prüfbefunde (BAFA und Gericht rechnen im Browser) ─────────────────── */

.demo-seite .befunde { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.demo-seite .befund { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-klein);
  border: 1px solid var(--rand); background: var(--flaeche-2); }
.demo-seite .befund.verstoss { border-color: var(--sperre-rand); background: var(--sperre-schein); }
.demo-seite .befund.offen { border-color: var(--warn-rand); background: var(--warn-schein); }
.demo-seite .befund.hinweis { border-color: var(--warn-rand); }
.demo-seite .befund.erfuellt { border-color: var(--wald-rand); background: var(--wald-schein); }
.demo-seite .befund .marker { justify-self: start; }
.demo-seite .befund-titel { font-weight: 650; color: var(--text); }
.demo-seite .befund-wert { font-family: var(--mono); font-size: .8rem; color: var(--text-leise); overflow-wrap: anywhere; }

/* ── Sonstiges ─────────────────────────────────────────────────────────── */

.demo-seite .fussnote { color: var(--text-leise); font-size: 13px; margin-top: 10px; }

.demo-seite .abschluss {
  border: 1px solid var(--wald-rand);
  background: var(--wald-schein);
  border-radius: var(--radius);
  padding: 20px;
}
.demo-seite .zaehler { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 14px; padding: 0; list-style: none; }
.demo-seite .zaehler .wert { font-size: 25px; font-weight: 650; display: block; line-height: 1.1; letter-spacing: -0.02em; }
.demo-seite .zaehler .was { font-size: 12px; color: var(--text-leise); }

/* ── Erzeugte Dokumente als Papier (Vorgabe 05.10.2026) ─────────────────
   Wie die PDFs beim Gericht: dunkle Schrift auf hellem Blatt, damit sich jedes aufgeklappte
   Dokument klar vom dunklen Grund abhebt. Gilt für alle Dokumentkarten (Betreuer, Beratung,
   „Daraus entstanden“). Markierungsfarben wie in .pdf-tabelle; Schrift darauf dunkel (AA). */
.demo-seite .karte.datei-karte {
  max-width: 1000px; background: #f4f2ed; color: #1d1f22; border: 0; border-radius: 3px;
  padding: 16px 18px 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.demo-seite .datei-karte .datei-name { color: #1d1f22; }
.demo-seite .datei-karte .datei-unter,
.demo-seite .datei-karte .fussnote { color: #4a4f55; }
.demo-seite .datei-karte .tabelle th { color: #4a4f55; font-weight: 700; border-bottom-color: #c9c5bc; }
.demo-seite .datei-karte .tabelle td { color: #1d1f22; border-bottom-color: #e3dfd6; }
.demo-seite .datei-karte .tabelle-rolle { border-color: #c9c5bc; background: #f4f2ed; }
.demo-seite .datei-karte .tabelle-rolle thead th { background: #ebe8e1; }
.demo-seite .datei-karte .tabelle.summen tr:last-child td { border-top-color: #c9c5bc; }
.demo-seite .datei-karte .belegliste { color: #1d1f22; }
.demo-seite .datei-karte .tabelle tr.mark-rot td { background: #f6d6d0; }
.demo-seite .datei-karte .tabelle tr.mark-gelb td { background: #f5e6c3; }
.demo-seite .datei-karte .tabelle tr.mark-gruen td { background: #d7ecdd; }
.demo-seite .datei-karte .tabelle tr.mark-rot td:first-child { box-shadow: inset 3px 0 #a3261b; }
.demo-seite .datei-karte .tabelle tr.mark-gelb td:first-child { box-shadow: inset 3px 0 #8a5d08; }
.demo-seite .datei-karte .tabelle tr.mark-gruen td:first-child { box-shadow: inset 3px 0 #2e6b3a; }
.demo-seite .datei-karte .tabelle tr.anmerkung td { background: #f6d6d0; color: #7a1f14; border-bottom-color: #e0b4aa; }
.demo-seite .datei-karte .tabelle tr.mark-gelb + tr.anmerkung td { background: #f5e6c3; color: #5c3d05; border-bottom-color: #dcc58f; }
.demo-seite .datei-karte .dok-anmerkung { background: #f6d6d0; color: #1d1f22; border-left-color: #a3261b; }
.demo-seite .datei-karte .dok-anmerkung.mark-gelb { background: #f5e6c3; border-left-color: #8a5d08; }
.demo-seite .datei-karte > .tabelle td { overflow-wrap: anywhere; }
/* Schmal: Die lange Tabelle rollt seitlich in ihrem Rahmen, jede Buchung bleibt eine Zeile.
   Bei 600 px Mindestbreite brach die Belegspalte so eng um, dass Zeilen fünffach hoch waren. */
@media (max-width: 620px) {
  .demo-seite .tabelle-rolle .tabelle { min-width: 0; width: max-content; }
  .demo-seite .tabelle-rolle td:last-child { overflow-wrap: normal; }
}

/* Sprungleiste (05.10.2026): Links zu den Schritten, klebt unter der Kopfzeile. Ist ein Dokument
   aufgeklappt und schiebt die folgenden Schritte nach unten, springt ein Klick direkt dorthin. */
.demo-seite .sprungleiste {
  position: sticky; top: 88px; z-index: 30; margin: 0 0 14px; padding: 6px 0;
  background: rgba(var(--basalt-rgb, 13, 15, 17), .97); border-bottom: 1px solid var(--rand);
}
.demo-seite .sprungleiste ul { display: flex; flex-wrap: nowrap; gap: 4px 18px; overflow-x: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; }
.demo-seite .sprungleiste a { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 4px; white-space: nowrap; font-size: 14px; color: var(--text-matt); text-decoration: none; }
.demo-seite .sprungleiste a:hover { color: var(--text); }
.demo-seite .sprungleiste a:focus-visible { outline: 2px solid var(--wald-hell); outline-offset: 2px; }
.demo-seite .sprungleiste .nr { font-weight: 700; color: var(--wald-hell); font-size: 15px; }
.demo-seite .abschnitt { scroll-margin-top: 150px; }
@media (max-width: 620px) { .demo-seite .sprungleiste { top: 72px; } .demo-seite .sprungleiste a { font-size: 13px; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Nur ein Dokument offen: volle Breite statt halber Spalte (05.10.2026). */
.demo-seite .eingang > :only-child { grid-column: 1 / -1; }
.demo-seite .eingang { max-width: none; }
/* Schritte untereinander (05.10.2026): eine Spalte statt Raster. */
.demo-seite .ablauf-band { grid-template-columns: minmax(0, 1fr); }
.demo-seite .ablauf-band > .abschnitt { grid-column: 1 / -1; }
/* Umschalter „Mit Fehler · Vollständig“ (07.10.2026) */
.demo-seite .umschalter { display: inline-flex; margin-top: 12px; border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; }
.demo-seite .umschalter a { padding: 6px 16px; font-size: 13.5px; color: var(--text-matt); text-decoration: none; }
.demo-seite .umschalter a + a { border-left: 1px solid var(--rand); }
.demo-seite .umschalter a:hover { color: var(--text); background: var(--flaeche-2); }
.demo-seite .umschalter a[aria-current="true"] { color: var(--wald-ink); background: var(--wald); font-weight: 650; }
.demo-seite .umschalter a:focus-visible { outline: 2px solid var(--wald-hell); outline-offset: -2px; }
/* Echter Vordruck als Bild (07.10.2026) */
.demo-seite .vordruck-bild { margin: 0; }
.demo-seite .vordruck-bild img { display: block; width: 100%; max-width: 760px; height: auto; border: 1px solid #c9c5bc; border-radius: 4px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.demo-seite .vordruck-bild figcaption { margin-top: 8px; font-size: 13.5px; }
.demo-seite .vordruck-bild figcaption a { color: #1d5e36; font-weight: 600; }