/* Whiteboard – Gestaltung wie die Audit-App, übernommen aus der Dokumentenverarbeitung (DOK-20, WHT-7).
 *
 * Quelle der Farben, Maße und Bausteine: Audit/app/static/css/app.css (Entwurf aus Claude Design).
 * Übernommen ist, was diese Anwendung braucht; Namen wie dort, damit beide Apps gleich lesen.
 *
 *   +--------------------------------------------------+
 *   | Kopfzeile 52 px                                  |
 *   +--------------------------------------------------+
 *   | Meldungsleiste (nur bei Bedarf)                  |
 *   +-------------+------------------------------------+
 *   | Seitenmenü  | Werkzeugleiste (steht)             |
 *   | 212 / 56 px | Inhalt (scrollt)                   |
 *   +-------------+------------------------------------+
 *
 * Wie die Audit-App bewusst hell, ohne Dunkelmodus.
 */
:root {
  --grund:            oklch(97.5% 0.002 250);
  --flaeche:          #ffffff;
  --flaeche-leise:    oklch(98% 0.002 250);
  --seitenmenue:      oklch(96% 0.003 250);
  --rand:             oklch(90% 0.004 250);
  --rand-leise:       oklch(93% 0.004 250);
  --rand-zart:        oklch(95% 0.004 250);
  --text:             oklch(22% 0.005 250);
  --text-gedaempft:   oklch(48% 0.006 250);
  --text-leise:       oklch(55% 0.006 250);
  --akzent:           oklch(52% 0.13 250);
  --akzent-flaeche:   oklch(96% 0.025 250);
  --akzent-text:      oklch(42% 0.11 250);
  --meldung-grund:    oklch(96% 0.025 250);
  --meldung-rand:     oklch(89% 0.045 250);
  --meldung-text:     oklch(42% 0.11 250);
  --knopf-rand:         oklch(87% 0.005 250);
  --knopf-text:         oklch(30% 0.006 250);
  --knopf-primaer:      oklch(50% 0.115 150);
  --knopf-primaer-rand: oklch(45% 0.115 150);
  --knopf-gefahr:       oklch(98.5% 0.012 25);
  --knopf-gefahr-rand:  oklch(87% 0.055 25);
  --knopf-gefahr-text:  oklch(47% 0.17 25);
  --kennzeichen-neutral:      oklch(96.5% 0.003 250);
  --kennzeichen-neutral-rand: oklch(90% 0.004 250);
  --kennzeichen-neutral-text: oklch(40% 0.006 250);
  --kennzeichen-blau:      oklch(96% 0.025 250);
  --kennzeichen-blau-rand: oklch(89% 0.045 250);
  --kennzeichen-blau-text: oklch(42% 0.11 250);
  --kennzeichen-gruen:      oklch(96% 0.025 150);
  --kennzeichen-gruen-rand: oklch(88% 0.05 150);
  --kennzeichen-gruen-text: oklch(41% 0.10 150);
  --kennzeichen-rot:      oklch(96% 0.025 25);
  --kennzeichen-rot-rand: oklch(88% 0.05 25);
  --kennzeichen-rot-text: oklch(47% 0.16 25);
  --fehler:           oklch(58% 0.17 25);
  --fehler-grund:     oklch(93% 0.05 25);
  --fehler-text:      oklch(47% 0.16 25);
  --kopfhoehe:        52px;
  --menuebreite:      212px;
  --menuebreite-schmal: 56px;
  --feld-hoehe:         34px;
  --feld-hoehe-kompakt: 30px;
  --feld-rand:          oklch(88% 0.004 250);
  --feld-grund-aus:     oklch(97% 0.002 250);
  --feld-text-aus:      oklch(45% 0.006 250);
  --feld-schrift:       12.5px;
  --feld-ring:          0 0 0 3px oklch(from var(--akzent) l c h / 28%);
  --karte-rand:       oklch(92.5% 0.004 250);
  --karte-schatten:   0 1px 2px rgba(16, 24, 40, .04);
  --winkel-farbe:     oklch(58% 0.006 250);
  --winkel-staerke:   2.2px;
  --radius-klein:     6px;
  --radius:           7px;
  --radius-gross:     9px;
  --radius-karte:     10px;
  --schatten-flyout:  0 10px 28px oklch(20% 0.01 250 / .16);
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--grund); color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: oklch(89% 0.045 250); }
input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; }
a { color: oklch(48% 0.12 250); text-decoration: none; }
a:hover { color: oklch(38% 0.14 250); text-decoration: underline; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: oklch(85% 0.004 250); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 13px; }
code { font-size: 11.5px; }

/* ================================================================= Rahmen */

.seite { width: 100%; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.kopf {
  flex: none; height: var(--kopfhoehe);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 16px; background: var(--flaeche); border-bottom: 1px solid var(--rand); z-index: 20;
}
.kopf .links { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kopf .rechts { display: flex; align-items: center; gap: 9px; flex: none; }
.kopf .titel { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kopf .titel .text { font-size: 14px; font-weight: 600; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf .titel .anzahl { font-size: 12px; color: var(--text-leise); font-variant-numeric: tabular-nums; }

/* Hamburger – Maße wie in der Audit-App (30×30, Striche 16×2, Abstand 3). */
.menue-schalter {
  width: 30px; height: 30px; border: none; background: none; padding: 0;
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; flex: none;
}
.menue-schalter:hover { background: var(--rand-zart); }
.menue-schalter span { display: block; width: 16px; height: 2px; background: #4a4f57; border-radius: 2px; }

.anwendungsicon { display: flex; flex: none; line-height: 0; }
.anwendungsicon img { width: 26px; height: 26px; display: block; }

/* -------------------------------------------------------- Meldungsleiste */

.meldungen { flex: none; }
.meldung {
  display: flex; align-items: center; gap: 10px; padding: 8px 20px;
  font-size: 12.5px; font-weight: 500;
  background: var(--meldung-grund); border-bottom: 1px solid var(--meldung-rand); color: var(--meldung-text);
  transition: max-height .3s ease, opacity .25s ease, padding .3s ease;
  max-height: 60px; overflow: hidden;
}
.meldung.ok { background: var(--kennzeichen-gruen); border-bottom-color: var(--kennzeichen-gruen-rand); color: var(--kennzeichen-gruen-text); }
.meldung.fehler { background: var(--fehler-grund); border-bottom-color: var(--fehler); color: var(--fehler-text); }
.meldung.verblasst { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

/* Hinweis im Inhalt (mehrzeilig) – nicht die Meldungsleiste. */
.hinweiskasten {
  padding: 10px 14px; border: 1px solid var(--meldung-rand); border-radius: var(--radius);
  background: var(--meldung-grund); color: var(--meldung-text); font-size: 12.5px; line-height: 1.55;
}
.hinweiskasten.fehler { border-color: var(--kennzeichen-rot-rand); background: var(--kennzeichen-rot); color: var(--kennzeichen-rot-text); }

/* ----------------------------------------------------------------- Körper */

.koerper { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* ------------------------------------------------------------ Seitenmenü */

.seitenmenue {
  flex: none; width: var(--menuebreite);
  display: flex; flex-direction: column;
  background: var(--seitenmenue); border-right: 1px solid var(--rand);
  transition: width .18s ease; min-height: 0;
}
.seite.menue-schmal .seitenmenue { width: var(--menuebreite-schmal); }
.seitenmenue .eintraege {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.menuepunkt {
  display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px;
  border-radius: 8px; color: oklch(32% 0.006 250); font-size: 13px; font-weight: 500;
  text-decoration: none; border: none; background: none; width: 100%; cursor: pointer; text-align: left;
}
.menuepunkt:hover { background: oklch(93% 0.004 250); text-decoration: none; color: oklch(32% 0.006 250); }
.menuepunkt.aktiv { background: var(--akzent-flaeche); color: var(--akzent-text); font-weight: 600; }
.menuepunkt .sinnbild { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; }
.menuepunkt .beschriftung { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menuepunkt .winkel { transform: rotate(-90deg); }
.menuepunkt[aria-expanded="true"] .winkel { transform: rotate(0deg); }

.unterpunkte { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px; }
.unterpunkt {
  font-size: 12.5px; color: oklch(46% 0.006 250);
  padding: 7px 10px 7px 41px; border-radius: var(--radius); text-decoration: none; display: block;
}
.unterpunkt:hover { background: oklch(93% 0.004 250); text-decoration: none; }
.unterpunkt.aktiv { color: var(--akzent-text); font-weight: 600; background: var(--akzent-flaeche); }

/* Schmal: nur die Sinnbilder. */
.seite.menue-schmal .menuepunkt { padding: 0; justify-content: center; }
.seite.menue-schmal .menuepunkt .beschriftung,
.seite.menue-schmal .menuepunkt .winkel,
.seite.menue-schmal .unterpunkte,
.seite.menue-schmal .menue-version { display: none; }

.menue-version {
  flex: none; padding: 10px 14px; font-size: 10.5px; color: oklch(60% 0.006 250);
  border-top: 1px solid var(--rand); white-space: nowrap; overflow: hidden;
}

/* Gezeichneter Winkel (kein Schriftzeichen). */
.winkel { position: relative; display: inline-block; width: 14px; height: 14px; flex: none; transition: transform .15s ease; }
.winkel::before {
  content: ""; position: absolute; left: 3px; top: 2px; width: 7px; height: 7px;
  border-right: var(--winkel-staerke) solid var(--winkel-farbe);
  border-bottom: var(--winkel-staerke) solid var(--winkel-farbe);
  transform: rotate(45deg);
}

/* ------------------------------------------------- Inhaltsspalte, Leiste */

.inhaltsspalte { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.werkzeugleiste {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 16px;
  background: var(--flaeche); border-bottom: 1px solid var(--rand); overflow-x: auto;
}
.werkzeugleiste .leistentitel {
  flex: none; margin-right: 4px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-gedaempft);
}
.werkzeugleiste button, .werkzeugleiste .schaltflaeche { flex: none; }
.leistentrenner { flex: none; width: 1px; height: 22px; margin: 0 2px; background: var(--rand); }
/* ------------------------------------------------------------ Ribbon (Board-Seite, wie Word) */

.ribbon { position: relative; z-index: 5; flex: none; background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.ribbon a.ribbon-gross { text-decoration: none; }

/* Anheften/Einklappen: Pfeil nach oben = angeheftet (einklappen), nach unten = eingeklappt (anheften) */
.ribbon-anheften {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0;
  border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--text-gedaempft);
}
.ribbon-anheften:hover { background: var(--rand-zart); color: var(--text); }
.ribbon-pfeil {
  width: 8px; height: 8px; border-left: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: translateY(2px) rotate(45deg);
}
.ribbon-anheften[aria-pressed="false"] .ribbon-pfeil { transform: translateY(-2px) rotate(225deg); }

/* Eingeklappt: nur die Registerkarten; ein Klick öffnet das Band als Klappmenü **über** der Zeichenfläche –
   die Zeichenfläche ändert dabei ihre Größe nicht (kein Neuvermessen, kein Flackern). */
.ribbon.eingeklappt .ribbon-band { display: none; }
.ribbon.eingeklappt [role="tab"][aria-selected="true"] { border-bottom-color: transparent; font-weight: 400; color: var(--text-gedaempft); }
.ribbon.eingeklappt.offen .ribbon-band:not([hidden]) {
  display: flex; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--flaeche); border-bottom: 1px solid var(--rand); box-shadow: 0 6px 16px rgb(0 0 0 / .12);
}
.ribbon.eingeklappt.offen [role="tab"][aria-selected="true"] { border-bottom-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.ribbon-kopf {
  display: flex; align-items: flex-end; gap: 12px; padding: 6px 16px 0;
  background: var(--flaeche-leise); border-bottom: 1px solid var(--rand-leise);
}
.ribbon-datei {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: 4px;
  font-size: 13px; color: var(--text); text-decoration: none; border-radius: 6px;
}
.ribbon-datei:hover { background: var(--rand-zart); }
.ribbon-reiter { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.ribbon-reiter [role="tab"] {
  flex: none; padding: 7px 14px 8px; border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--text-gedaempft); cursor: pointer; border-bottom: 3px solid transparent; border-radius: 0;
}
.ribbon-reiter [role="tab"]:hover { color: var(--text); }
.ribbon-reiter [role="tab"][aria-selected="true"] { color: var(--akzent-text); font-weight: 600; border-bottom-color: var(--akzent); }
.ribbon-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-bottom: 5px; }

.ribbon-band { display: flex; align-items: stretch; padding: 6px 10px 2px; overflow-x: auto; min-height: 92px; }
.ribbon-band[hidden] { display: none; }
.ribbon-gruppe {
  flex: none; display: flex; flex-direction: column; padding: 0 10px; border-right: 1px solid var(--rand-leise);
}
.ribbon-gruppe:last-child { border-right: 0; }
.ribbon-inhalt { flex: 1; display: flex; align-items: flex-start; gap: 4px; }
.ribbon-gruppenname { padding: 4px 0 3px; font-size: 11px; color: var(--text-leise); text-align: center; white-space: nowrap; }
.ribbon-spalte { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }

/* Großer Knopf: Sinnbild über dem Wort; kleiner Knopf: eine Zeile */
.ribbon .ribbon-gross {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  min-width: 58px; height: auto; padding: 6px 6px 4px; border: 1px solid transparent; background: none;
  font-size: 12px; line-height: 1.2; color: var(--text); border-radius: 6px; cursor: pointer;
}
.ribbon .ribbon-gross:hover:not(:disabled) { background: var(--akzent-flaeche); border-color: var(--meldung-rand); }
.ribbon .ribbon-gross:disabled { color: var(--text-leise); cursor: default; opacity: .55; }
.ribbon .ribbon-gross[aria-pressed="true"] { background: var(--akzent-flaeche); border-color: var(--meldung-rand); }
.ribbon-sinnbild { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; transform: scale(1.5); }
.ribbon .ribbon-klein { justify-content: flex-start; font-size: 12px; }
.ribbon .leistenwahl { height: 28px; font-size: 12px; }

/* Schalter „Auto-Speichern“ (wie in Word): Bahn mit Knopf, rechts = an */
.auto-schalter {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; background: none;
  font: inherit; font-size: 12px; color: var(--text-gedaempft); cursor: pointer; border-radius: 6px;
}
.auto-schalter:hover { background: var(--rand-zart); }
.auto-schalter-bahn {
  position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--rand); transition: background .15s;
}
.auto-schalter-knopf {
  position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 999px; background: var(--flaeche);
  box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: left .15s;
}
.auto-schalter[aria-pressed="true"] { color: var(--text); }
.auto-schalter[aria-pressed="true"] .auto-schalter-bahn { background: var(--knopf-primaer); }
.auto-schalter[aria-pressed="true"] .auto-schalter-knopf { left: 14px; }

@media (max-width: 767px) {
  .ribbon-kopf { padding: 4px 8px 0; gap: 6px; }
  .auto-schalter { font-size: 0; gap: 0; }            /* auf dem Handy nur der Schalter */
  .ribbon-band { min-height: 0; padding: 4px 4px 2px; }
  .ribbon-gruppenname { display: none; }
}

/* Dialogfenster (Verlassen mit Ungespeichertem) */
dialog.dialog {
  max-width: min(460px, calc(100vw - 32px)); padding: 20px 22px 16px; border: 1px solid var(--rand);
  border-radius: 10px; background: var(--flaeche); color: var(--text); box-shadow: 0 12px 40px rgb(0 0 0 / .18);
}
dialog.dialog::backdrop { background: rgb(0 0 0 / .28); }
dialog.dialog h2 { margin: 0 0 8px; font-size: 17px; }
dialog.dialog p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.dialog-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Umschalter in der Leiste (WHT-30: Teilprozess) – gedrückt sichtbar */
.werkzeugleiste button[aria-pressed="true"] { background: var(--text-gedaempft); color: var(--flaeche); }
/* Gruppe zusammengehöriger Werkzeuge mit Namen davor (WHT-26: Use-Case) */
.leistengruppe { flex: none; display: flex; align-items: center; gap: 8px; }
.leistengruppe-name {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-gedaempft);
}

.inhalt {
  flex: 1; overflow-y: auto; padding: 12px 16px 20px;
  display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0;
}
.inhalt > * { flex: none; }

/* Zeichenfläche (WHT-8): füllt die ganze Inhaltsfläche, Excalidraw bringt eigene Bedienleisten mit. */
.inhalt:has(> .zeichenflaeche) { padding: 0; overflow: hidden; }
.inhalt > .zeichenflaeche { flex: 1; min-height: 0; position: relative; }
/* Bibliothek: „Bibliotheken durchsuchen“ führt zu libraries.excalidraw.com – Kataloge kommen nur von der App. */
.zeichenflaeche .excalidraw .library-menu-browse-button { display: none; }   /* stärker als Excalidraws eigene Regel */
.konflikthinweis:not([hidden]) { display: flex; align-items: center; gap: 12px; margin: 8px; flex: none; }
.werkzeugleiste select.leistenwahl { width: auto; flex: none; height: var(--feld-hoehe); padding: 0 8px; }
.speicherstand { font-size: 12px; color: var(--text-gedaempft); white-space: nowrap; }
.speicherstand.fehler { color: var(--kennzeichen-rot-text); font-weight: 600; white-space: normal; }

/* ------------------------------------------------------------ Abschnitte */

.abschnitt {
  background: var(--flaeche); border: 1px solid var(--karte-rand);
  border-radius: var(--radius-karte); box-shadow: var(--karte-schatten); overflow: hidden;
}
.abschnitt > .kopfleiste {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; height: auto;
  background: var(--flaeche-leise); border: none; border-bottom: 1px solid var(--rand-leise);
  border-radius: 0; width: 100%; cursor: pointer; text-align: left; color: var(--text); font-weight: normal;
}
.abschnitt > .kopfleiste:hover { background: var(--flaeche-leise); }
.abschnitt > .kopfleiste .name { font-size: 13px; font-weight: 600; }
.abschnitt > .kopfleiste .neben { font-size: 11.5px; color: oklch(50% 0.006 250); flex: 1; white-space: normal; }
.abschnitt > .kopfleiste[aria-expanded="false"] .winkel { transform: rotate(-90deg); }
.abschnitt > .kopfleiste[aria-expanded="false"] + .abschnitt-inhalt { display: none; }
.abschnitt-inhalt { padding: 16px; }
.abschnitt-inhalt.ohne-rand { padding: 0; }

/* --------------------------------------------------------------- Kacheln */

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kachel { background: var(--flaeche); border: 1px solid oklch(91% 0.004 250); border-radius: var(--radius-karte); padding: 14px; }
.kachel h2 { font-size: 11.5px; font-weight: 600; color: var(--text-gedaempft); margin: 0; }
.kachel .wert { font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--akzent); font-variant-numeric: tabular-nums; }
.kachel.gruen .wert { color: var(--kennzeichen-gruen-text); }
.kachel.rot .wert { color: var(--kennzeichen-rot-text); }
.kachel.grau .wert { color: var(--text-gedaempft); }
a.kachel { display: block; color: inherit; text-decoration: none; }
a.kachel:hover { border-color: var(--text-gedaempft); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); text-decoration: none; }
a.kachel:focus-visible { outline: none; border-color: var(--akzent); box-shadow: var(--feld-ring); }
.fussnote { font-size: 11.5px; color: var(--text-leise); margin: 0; }
.kachel .fussnote { margin: .35rem 0 0; }
.leer { font-size: 12.5px; color: var(--text-gedaempft); margin: 0; }

/* --------------------------------------------------- Themen und Boards (WHT-11) */

.thema { --themafarbe: oklch(55% 0.13 250); border-left: 4px solid var(--themafarbe); }
.thema.farbe-blau { --themafarbe: oklch(55% 0.13 250); }
.thema.farbe-gruen { --themafarbe: oklch(58% 0.13 150); }
.thema.farbe-gelb { --themafarbe: oklch(80% 0.14 90); }
.thema.farbe-orange { --themafarbe: oklch(68% 0.16 55); }
.thema.farbe-rot { --themafarbe: oklch(56% 0.18 25); }
.thema.farbe-lila { --themafarbe: oklch(52% 0.16 300); }
.thema.farbe-grau { --themafarbe: oklch(60% 0.01 250); }
.thema .farbpunkt { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--themafarbe); }
.thema-aktionen { margin: 0 0 12px; }
.kacheln.boards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kachel.board h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.board-beschreibung { margin: .35rem 0 0; font-size: 12.5px; color: var(--text-gedaempft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.suche { display: flex; gap: 6px; align-items: center; margin: 0; flex: 1 1 220px; max-width: 360px; min-width: 160px; }
textarea { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; font-family: inherit; line-height: 1.45; }
fieldset.ohne-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; }
@media (max-width: 767px) { .kacheln.boards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Formulare */

.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 20px; }
.felder .breit { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
label > span:first-child, .feldname { font-size: 11.5px; font-weight: 600; color: oklch(45% 0.006 250); letter-spacing: .01em; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
select, textarea {
  height: var(--feld-hoehe); padding: 0 10px; border-radius: var(--radius);
  border: 1px solid var(--feld-rand); font-size: var(--feld-schrift);
  background: var(--flaeche); color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: var(--feld-ring); }
input[readonly], input:disabled, select:disabled { background: var(--feld-grund-aus); color: var(--feld-text-aus); }
input[type=file] {
  height: var(--feld-hoehe); width: 100%; padding: 5px 8px;
  border: 1px solid var(--feld-rand); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text); font-size: 12px;
}
input[type=file]::file-selector-button {
  height: 22px; margin-right: 10px; padding: 0 9px;
  border: 1px solid var(--feld-rand); border-radius: var(--radius-klein);
  background: var(--flaeche-leise); color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer;
}
.feldhilfe { font-size: 11.5px; color: var(--text-leise); font-weight: normal; }

/* ------------------------------------------------------- Schaltflächen */

button, .schaltflaeche {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--feld-hoehe); padding: 0 12px; border-radius: var(--radius);
  font-family: inherit; font-size: var(--feld-schrift); font-weight: 500;
  border: 1px solid var(--knopf-rand); color: var(--knopf-text); background: var(--flaeche);
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
button:hover, .schaltflaeche:hover { background: var(--feld-grund-aus); text-decoration: none; color: var(--knopf-text); }
button:focus-visible, .schaltflaeche:focus-visible { outline: none; border-color: var(--akzent); box-shadow: var(--feld-ring); }
button.betont, .schaltflaeche.betont { background: var(--knopf-primaer); border-color: var(--knopf-primaer-rand); color: #fff; font-weight: 600; }
button.betont:hover, .schaltflaeche.betont:hover { filter: brightness(.94); color: #fff; }
button.gefahr, .schaltflaeche.gefahr { background: var(--knopf-gefahr); border-color: var(--knopf-gefahr-rand); color: var(--knopf-gefahr-text); }
button.klein, .schaltflaeche.klein { height: var(--feld-hoehe-kompakt); padding: 0 10px; font-size: 12px; }
.schaltersymbol { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; }
.aktionen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aktionen form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.aktionen select { width: auto; max-width: 100%; height: var(--feld-hoehe-kompakt); }

/* ---------------------------------------------------------- Kennzeichen */

.kennzeichen {
  display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 18px;
  border: 1px solid var(--kennzeichen-neutral-rand); background: var(--kennzeichen-neutral);
  color: var(--kennzeichen-neutral-text); border-radius: 999px; padding: 0 8px; white-space: nowrap;
}
.kennzeichen.blau { border-color: var(--kennzeichen-blau-rand); background: var(--kennzeichen-blau); color: var(--kennzeichen-blau-text); }
.kennzeichen.gruen { border-color: var(--kennzeichen-gruen-rand); background: var(--kennzeichen-gruen); color: var(--kennzeichen-gruen-text); }
.kennzeichen.rot { border-color: var(--kennzeichen-rot-rand); background: var(--kennzeichen-rot); color: var(--kennzeichen-rot-text); }

/* --------------------------------------------------------------- Listen */

.tabelle-umbruch { overflow-x: auto; }
table.liste { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.liste th, table.liste td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rand-zart); }
table.liste thead th {
  font-size: 11px; font-weight: 600; color: var(--text-gedaempft); text-transform: uppercase; letter-spacing: .04em;
  background: var(--flaeche-leise); border-bottom: 1px solid var(--rand-leise); white-space: nowrap;
}
table.liste tbody tr:hover { background: var(--flaeche-leise); }
table.liste tr:last-child td { border-bottom: none; }
table.liste tr.inaktiv td { color: var(--text-leise); }
table.liste .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste .nebenzeile { display: block; font-size: 11.5px; color: var(--text-leise); margin-top: 2px; }
table.liste .dateiname, table.liste code { overflow-wrap: anywhere; }

/* ----------------------------------------------------------------- Handy */

/* Unter 768 px liegt das Menü über dem Inhalt und kommt über den Hamburger herein. */
@media (max-width: 767px) {
  .seitenmenue {
    position: fixed; top: var(--kopfhoehe); bottom: 0; left: 0; z-index: 30;
    box-shadow: var(--schatten-flyout); transform: translateX(-100%); transition: transform .18s ease;
  }
  .seite:not(.menue-schmal) .seitenmenue { transform: translateX(0); }
  .seite.menue-schmal .seitenmenue { width: var(--menuebreite); }
  .seite.menue-schmal .menuepunkt { padding: 0 10px; justify-content: flex-start; }
  .seite.menue-schmal .menuepunkt .beschriftung, .seite.menue-schmal .menuepunkt .winkel { display: block; }
  .felder { grid-template-columns: 1fr; }
  .inhalt { padding: 10px 10px 16px; }
  /* Spalten mit Nebeninfos auf dem Handy ausblenden – die Hauptspalte trägt sie als Nebenzeile. */
  table.liste .nur-breit { display: none; }
}

/* Nur für Screenreader sichtbar (Beschriftung eines Feldes ohne sichtbares Label). */
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopfzeile: angemeldeter Benutzer (WHT-10, wie DOK-52) */
.kopf-benutzer { color: inherit; text-decoration: none; font-size: 12.5px; margin-right: 8px; white-space: nowrap; }
.kopf-benutzer:hover { text-decoration: underline; }
.kopf-abmelden { font: inherit; font-size: 12.5px; background: none; border: 1px solid var(--rand); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; color: inherit; }
.kopf-abmelden:hover { background: var(--flaeche-leise); }
@media (max-width: 560px) { .kopf-benutzer .kennzeichen { display: none; } }

/* --- Anmeldung (WHT-10, wie DOK-137): schlichte Karte ------------------------------------------------------------ */
body.anmelde-seite { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px; background: var(--grund); overflow: auto; }
.anmelde-karte { width: 100%; max-width: 470px; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 16px; padding: 40px 40px 32px; box-shadow: 0 8px 28px oklch(30% 0.01 250 / 0.07); }
.anmelde-karte h1 { margin: 0; font-size: 24px; font-weight: 700; color: var(--text); }
.anmelde-untertitel { margin: 6px 0 24px; color: var(--text-gedaempft); font-size: 15px; }
.anmelde-meldung { border: 1px solid var(--meldung-rand); background: var(--meldung-grund); color: var(--text);
  border-radius: 10px; padding: 13px 16px; margin: 0 0 22px; font-weight: 600; font-size: 14.5px; }
.anmelde-meldung.fehler { border-color: var(--kennzeichen-rot-rand); background: var(--kennzeichen-rot);
  color: var(--kennzeichen-rot-text); }
.anmelde-meldung code { font-weight: 400; word-break: break-all; }
.anmelde-formular { display: flex; flex-direction: column; }
.anmelde-formular > label:not(.anmelde-bleiben) { font-size: 17px; color: var(--text); margin: 0 0 9px; }
.anmelde-formular input:not([type="checkbox"]) { height: 50px; border: 1px solid var(--rand); border-radius: 10px;
  padding: 0 14px; font-size: 16px; margin: 0 0 22px; background: var(--flaeche); color: var(--text); }
.anmelde-formular input:not([type="checkbox"]):focus { outline: 2px solid var(--akzent); outline-offset: 1px;
  border-color: var(--akzent); }
.anmelde-formular .anmelde-bleiben { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--text-gedaempft); font-size: 15px;
  margin: -6px 0 22px; cursor: pointer; }
.anmelde-bleiben input { width: 18px; height: 18px; margin: 0; accent-color: var(--akzent); }
.anmelde-knopf { height: 50px; border: 0; border-radius: 10px; background: var(--akzent); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; }
.anmelde-knopf:hover { filter: brightness(1.08); }
/* Anmeldung mit Microsoft 365 (WHT-37, wie DOK-53) */
.anmelde-oder { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--text-gedaempft);
  font-size: 14.5px; }
.anmelde-oder::before, .anmelde-oder::after { content: ""; flex: 1; border-top: 1px solid var(--rand); }
.anmelde-microsoft { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px;
  border: 1px solid var(--rand); border-radius: 10px; color: var(--text); font-size: 16px; font-weight: 600;
  text-decoration: none; background: var(--flaeche); }
.anmelde-microsoft:hover { background: var(--flaeche-leise); border-color: var(--knopf-rand); }
.anmelde-vergessen { margin-top: 24px; font-size: 14.5px; color: var(--text-gedaempft); }
.anmelde-vergessen summary { cursor: pointer; text-decoration: underline; list-style: none; width: fit-content; }
.anmelde-vergessen summary::-webkit-details-marker { display: none; }
.anmelde-vergessen p { margin: 10px 0 0; line-height: 1.5; }
@media (max-width: 520px) {
  body.anmelde-seite { padding: 20px 12px; }
  .anmelde-karte { padding: 28px 22px 24px; border-radius: 14px; }
}