/* LaternaVersio Online-Dienste – Gestaltung von /konto/ und /admin/ wie die Werbe-Site (homepage.css, Zweig web):
   dunkel, Gold für Handlungen, Grün im Schriftzug, Outfit für Überschriften, Atkinson Hyperlegible für Text.
   Schriften aus /schriften/ der Website (OFL). Keine Inline-Stile (CSP style-src 'self'). Ziel WCAG 2.1 AA (Plan 4.14). */

@font-face { font-family: 'LV Outfit'; font-weight: 700; font-style: normal; font-display: swap; src: url('../schriften/outfit-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'LV Atkinson'; font-weight: 400; font-style: normal; font-display: swap; src: url('../schriften/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'LV Atkinson'; font-weight: 700; font-style: normal; font-display: swap; src: url('../schriften/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }

:root {
  --bg: #15171c; --bg2: #1c1f26; --bg3: #252932; --bg4: #2f3440; --line: #333845;
  --text: #d9dce3; --muted: #9aa0ae; --hell: #f3f4f7;
  --accent: #d6a441; --gruen: #5aad92; --kachel: #367E6B; --danger: #ff8a80; --ok: #6fd39a;
  --warn-bg: #4a2a12; --warn-rand: #e0884a;
  /* W1: bisher fest im Code stehende Farben als Tokens (Plan 7) */
  --auf-gold: #15171c; --gold-hover: #e2b453; --gold-hell: #f2c46b; --eingabe-rand: #737b8e;
  --gefahr-rand: #8b3a35; --gefahr-text: #ffd3cf; --gefahr-blass: #ffc4be; --gefahr-grund: rgba(255, 138, 128, 0.12);
  --ok-grund: rgba(111, 211, 154, 0.14); --gruen-hell: #c9f0e2; --warn-text: #fff3e6;
  --info: #9cc0ff; --info-rand: #6aa0ff; --weiss: #fff; --papier: #f3f4f7; --tinte: #14161b;
  --schatten: rgba(0, 0, 0, .45); --abdunkeln: rgba(0, 0, 0, .65); --leiste-bg: #17191f; --kachel-warn-rand: #6a4a1c;
  --druck-grund: #fff; --druck-text: #000; --leiste-b: 232px; --leiste-schmal: 64px; --unten-h: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 'LV Atkinson', 'Segoe UI', system-ui, sans-serif; overflow-wrap: break-word; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
h1, h2, h3 { font-family: 'LV Outfit', 'Segoe UI', system-ui, sans-serif; font-weight: 700; color: var(--hell); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(26px, 4vw, 34px); margin-top: 28px; }
h2 { font-size: 22px; margin-top: 28px; }
h3 { font-size: 18px; }
p { margin: 0 0 .8em; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.huelle { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.huelle.schmal { max-width: 640px; }
.versteckt { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 8px 14px; background: var(--accent); color: var(--auf-gold); border-radius: 5px; font-weight: 700; text-decoration: none; }
.sprung:focus { top: 12px; }

/* Testbetrieb ohne SSL – deutlich, oben auf jeder Seite (Entscheidung des Nutzers 15.10.2026) */
.testbetrieb { background: var(--warn-bg); border-bottom: 3px solid var(--warn-rand); color: var(--warn-text); padding: 10px 24px; text-align: center; font-size: 16px; }
.testbetrieb p { margin: 0; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--line); background: var(--bg); }
.kopf .huelle { display: flex; align-items: center; gap: 20px; min-height: 60px; flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.marke svg { width: 30px; height: 30px; }
.schriftzug { font-family: 'LV Outfit', 'Segoe UI', system-ui, sans-serif; font-size: 21px; color: var(--hell); white-space: nowrap; }
.schriftzug b { color: var(--gruen); }
.bereich { color: var(--muted); font-size: 15px; border-left: 1px solid var(--line); padding-left: 14px; }
.navi { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.navi a, .navi button { color: var(--text); text-decoration: none; font-size: 15px; padding: 6px 10px; border-radius: 5px; background: none; border: 1px solid transparent; font-family: inherit; cursor: pointer; }
.navi a:hover, .navi button:hover { background: var(--bg3); }
.navi [aria-current="page"] { border-color: var(--line); background: var(--bg3); color: var(--hell); }
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Formulare */
form, .karte { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 22px 22px 18px; margin: 0 0 22px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 16px; padding: 12px 16px; }
legend { color: var(--muted); padding: 0 6px; }
label { display: block; font-weight: 700; color: var(--hell); margin-bottom: 4px; }
.feld { margin-bottom: 16px; }
.hilfe { color: var(--muted); font-size: 15px; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], input[type=tel], input[type=url], select, textarea {
  width: 100%; font: inherit; color: var(--hell); background: var(--bg); border: 1px solid var(--eingabe-rand); border-radius: 6px; padding: 9px 11px; min-height: 44px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
.haken { display: flex; gap: 10px; align-items: flex-start; }
.haken input { width: 22px; height: 22px; margin-top: 3px; flex: none; }
.haken label { font-weight: 400; color: var(--text); }
.pwzeile { display: flex; gap: 8px; }
.pwzeile input { flex: 1; }
button, .knopf { font: inherit; font-weight: 700; padding: 10px 18px; min-height: 44px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg3); color: var(--hell); cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .knopf:hover { background: var(--bg4); }
button.haupt, .knopf.haupt { background: var(--accent); border-color: var(--accent); color: var(--auf-gold); }
button.haupt:hover { background: var(--gold-hover); }
button.gefahr { border-color: var(--gefahr-rand); color: var(--gefahr-text); }
button[disabled] { opacity: .55; cursor: not-allowed; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.klein { padding: 5px 12px; min-height: 44px; font-size: 15px; }   /* W1: Knöpfe mindestens 44 px (Plan 7) */

/* Meldungen (nie nur über Farbe – immer mit Text) */
.meldung { border-radius: 8px; padding: 12px 16px; margin: 0 0 18px; border: 1px solid var(--line); background: var(--bg2); }
.meldung.fehler { border-color: var(--danger); }
.meldung.fehler::before { content: 'Fehler: '; font-weight: 700; color: var(--danger); }
.meldung.ok { border-color: var(--ok); }
.meldung.ok::before { content: 'Erledigt: '; font-weight: 700; color: var(--ok); }
.feldfehler { color: var(--danger); font-size: 15px; margin-top: 4px; }
.codes { font-family: Consolas, 'Courier New', monospace; font-size: 18px; columns: 2; background: var(--bg); padding: 12px 16px; border-radius: 6px; }
.geheimnis { font-family: Consolas, 'Courier New', monospace; font-size: 19px; letter-spacing: .05em; color: var(--hell); background: var(--bg); padding: 8px 12px; border-radius: 6px; display: inline-block; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; margin-bottom: 22px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 700; }
.etikett { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--hell); }
.etikett.gruen { border-color: var(--kachel); }
.etikett.rot { border-color: var(--gefahr-rand); }

/* Fuß (Impressum und Datenschutz Pflicht, F-WI-11) */
.fuss { border-top: 1px solid var(--line); margin-top: 40px; padding: 22px 0 30px; font-size: 15px; color: var(--muted); }
.fuss ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.fuss p { margin: 4px 0; }

@media (max-width: 600px) {
  .huelle { padding: 0 16px; }
  .bereich { display: none; }
  form, .karte { padding: 16px; }
  .codes { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Bestätigungsdialog und Reiter */
dialog { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 0; width: calc(100% - 32px); max-width: 520px; }
dialog form { margin: 0; border: 0; }
dialog::backdrop { background: var(--abdunkeln); }
.reiter { margin: 20px 0 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
@media print { .kopf, .fuss, .testbetrieb, .knoepfe button:not(.haupt) { display: none; } body { background: var(--druck-grund); color: var(--druck-text); } .codes { background: var(--druck-grund); color: var(--druck-text); } }

/* O1: Lizenzart-Etiketten (Text + Rahmen), Filterzeile, Prüf-Listen, Dateiwahl, Unterreiter */
.etikett.art-edu { border-color: var(--gruen); color: var(--gruen-hell); }
.etikett.art-test { border-color: var(--warn-rand); }
.etikett.gelb { border-color: var(--accent); }
.filter { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin: 0 0 16px; }
.filter .feld { margin: 0; min-width: 180px; }
.pruefliste { list-style: none; margin: 0 0 12px; padding: 0; }
.pruefliste li { padding: 6px 0; border-bottom: 1px solid var(--line); }
input[type=file] { font: inherit; color: var(--text); max-width: 100%; }
.reiter.unter { margin-top: 8px; }
.hinweis { border-left: 3px solid var(--accent); padding: 8px 12px; background: var(--bg3); border-radius: 0 6px 6px 0; margin: 0 0 16px; }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kennung { font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: nowrap; }
dl.daten { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 16px; margin: 0; }
dl.daten dt { color: var(--muted); }
dl.daten dd { margin: 0; }
@media (max-width: 600px) { dl.daten { grid-template-columns: 1fr; } dl.daten dd { margin-bottom: 8px; } }

/* O1b: Rechtstexte, Unterschriftsfeld, Nachweise */
.rechtstext { white-space: pre-wrap; max-height: 360px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.rechtstext-huelle { margin: 0 0 16px; }
.aenderungen { margin: 0 0 16px; }
.diff-abschnitt { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.diff-zeile { display: block; white-space: pre-wrap; padding: 1px 4px; text-decoration: none; }
.diff-gleich { color: var(--muted); }
del.diff-zeile { background: var(--gefahr-grund); color: var(--gefahr-blass); text-decoration: line-through; }
ins.diff-zeile { background: var(--ok-grund); color: var(--gruen-hell); }
.diff-marke { display: inline-block; width: 1.4em; font-weight: 700; text-decoration: none; }
.unterschrift-flaeche { display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; height: auto; background: var(--papier); border: 2px solid var(--eingabe-rand); border-radius: 6px; touch-action: none; cursor: crosshair; }
.unterschrift-flaeche[aria-invalid="true"] { border-color: var(--danger); }
.unterschrift-getippt { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 26px; color: var(--hell); border-bottom: 1px solid var(--line); padding: 4px 0; }
svg.unterschrift-bild { width: 180px; height: 60px; background: var(--papier); border-radius: 4px; }
svg.unterschrift-bild path { fill: none; stroke: var(--tinte); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hinweis-unterlagen { margin-top: 18px; border-color: var(--accent); }
.hinweis-unterlagen .knopf { margin-top: 6px; }

/* O4 Online-Editor (/konto/editor/): breite Tabelle, Zellen zum Schreiben, Anwesenheit, Konflikte – ohne Inline-Stile */
.huelle.breit { max-width: 1600px; }
.ed-kopf { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 6px 0; border-bottom: 1px solid var(--line); }
.ed-stand { margin: 0; font-weight: 700; color: var(--hell); }
.ed-anwesend { margin: 4px 0 0; }
.ed-chip { display: inline-block; min-width: 30px; padding: 2px 6px; margin-right: 4px; border-radius: 12px; background: var(--kachel); color: var(--weiss); font-size: 13px; text-align: center; }
.ed-werkzeuge { margin: 10px 0; }
.ed-tabelle table { min-width: 100%; }
.ed-tabelle td { vertical-align: top; }
.ed-text { min-width: 220px; min-height: 2.6em; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg2); white-space: pre-wrap; }
.ed-text:focus { outline: 2px solid var(--accent); }
.ed-text.nur-lesen { background: transparent; border-style: dashed; color: var(--muted); }
.ed-feld { width: 100%; min-width: 120px; }
.ed-feld.ed-nr { width: 70px; min-width: 70px; }
.ed-feld.ed-tc { width: 120px; min-width: 120px; }
.ed-szene { width: 100%; font-weight: 700; font-family: 'LV Outfit', 'Segoe UI', system-ui, sans-serif; }
.ed-szene-zeile td { background: var(--bg3); }
.ed-frei { margin-top: 4px; font-size: 14px; }
.ed-notizen { min-width: 160px; }
.ed-aktionen .klein { padding: 3px 7px; min-height: 30px; }
.in-bearbeitung td { box-shadow: inset 3px 0 0 var(--info-rand); }
.ed-bearbeitet { color: var(--info); font-size: 14px; margin-top: 4px; }
.cs-spk { color: var(--gold-hell); }
.cs-snd { font-style: italic; color: var(--muted); }
.cs-regie { font-style: italic; color: var(--info); }
.ed-konflikte { border-color: var(--accent); }
.ed-fassungen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-fassung { white-space: pre-wrap; background: var(--bg2); padding: 6px 8px; border-radius: 4px; }
.ed-rechte select { min-width: 160px; }

/* O6: Assistent „Neues Projekt …“ (geführter Dialog) */
dialog.assistent { max-width: 760px; max-height: calc(100vh - 32px); overflow: auto; }
dialog.assistent .karte { margin: 0; border: 0; }
dialog.assistent table select { max-width: 100%; }

/* O14 „Projekte wie ein Datei-Browser“: Baum links, Liste rechts, Pfadleiste, Suche, Werkzeugleiste, Rechtsklick-Menü (ruhig, dunkel wie die App) */
#app:has(.explorer) { max-width: none; }
.explorer { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); min-height: 420px; margin: 0 0 22px; overflow: hidden; }
.ex-baum { border-right: 1px solid var(--line); padding: 10px 6px; background: var(--bg); overflow: auto; }
.ex-gruppe { margin-bottom: 10px; }
.ex-knoten { display: block; width: 100%; text-align: left; min-height: 32px; padding: 4px 10px; font-weight: 400; font-size: 15px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-knoten:hover { background: var(--bg3); }
.ex-knoten.aktiv { background: var(--bg3); border-color: var(--line); color: var(--hell); font-weight: 700; }
.ex-knoten.ex-haus, .ex-knoten.ex-demo, .ex-knoten.ex-alle { font-weight: 700; color: var(--hell); }
.ex-knoten[data-tiefe="1"] { padding-left: 24px; } .ex-knoten[data-tiefe="2"] { padding-left: 38px; } .ex-knoten[data-tiefe="3"] { padding-left: 52px; } .ex-knoten[data-tiefe="4"] { padding-left: 66px; } .ex-knoten[data-tiefe="5"] { padding-left: 80px; }
.ex-knoten.ex-ordner::before, .ex-ikon.ordner::before { content: ''; display: inline-block; width: 14px; height: 10px; margin-right: 8px; border: 2px solid var(--accent); border-radius: 2px 2px 3px 3px; vertical-align: -1px; }
.ex-knoten.ablegen, .ex-zeile.ablegen { outline: 2px dashed var(--accent); outline-offset: -2px; }
.ex-rechts { display: flex; flex-direction: column; min-width: 0; }
.ex-kopf { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ex-pfad { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ex-pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; font-size: 15px; }
.ex-pfad li + li::before { content: '›'; color: var(--muted); margin: 0 6px; }
.ex-pfad a { color: var(--text); text-decoration: none; } .ex-pfad a[aria-current="page"] { color: var(--hell); font-weight: 700; } .ex-pfad a:hover { text-decoration: underline; }
.ex-baum-schalter { display: none; }
.ex-suche { max-width: 260px; }
.ex-leiste { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ex-status .meldung { margin: 8px 12px; }
.ex-scroll { overflow: auto; flex: 1; }
.ex-liste { width: 100%; border-collapse: collapse; font-size: 15px; }
.ex-liste th { text-align: left; font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--line); padding: 0; position: sticky; top: 0; background: var(--bg2); }
.ex-sort { background: none; border: 0; min-height: 34px; padding: 6px 12px; font-weight: 700; font-size: 14px; color: var(--muted); width: 100%; text-align: left; }
.ex-sort:hover { background: var(--bg3); color: var(--hell); }
.ex-liste td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ex-liste td.ex-hinweis { white-space: normal; color: var(--muted); }
.ex-zeile { cursor: default; } .ex-zeile:hover { background: var(--bg3); }
.ex-zeile.gewaehlt { background: var(--bg4); } .ex-zeile:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.ex-zeile.ordner .ex-name { color: var(--hell); font-weight: 700; }
.ex-ikon { display: inline-block; width: 22px; }
.ex-ikon.produktion::before { content: ''; display: inline-block; width: 11px; height: 14px; margin-right: 8px; border: 2px solid var(--gruen); border-radius: 2px; vertical-align: -2px; }
.ex-ikon.demo::before { content: ''; display: inline-block; width: 11px; height: 14px; margin-right: 8px; border: 2px dashed var(--accent); border-radius: 2px; vertical-align: -2px; }
.ex-leer { color: var(--muted); padding: 24px 12px !important; }
.ex-menue { position: fixed; z-index: 50; min-width: 220px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px var(--schatten); }
.ex-menue button { display: block; width: 100%; text-align: left; border: 0; background: none; min-height: 34px; padding: 6px 12px; font-weight: 400; font-size: 15px; }
.ex-menue button:hover:not([disabled]), .ex-menue button:focus { background: var(--bg3); }
.ex-ziele .haken[data-tiefe="1"] { margin-left: 22px; } .ex-ziele .haken[data-tiefe="2"] { margin-left: 44px; } .ex-ziele .haken[data-tiefe="3"] { margin-left: 66px; } .ex-ziele .haken[data-tiefe="4"] { margin-left: 88px; }
@media (max-width: 760px) {
  .explorer { grid-template-columns: 1fr; }
  .ex-baum { display: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .explorer.baum-offen .ex-baum { display: block; }
  .ex-baum-schalter { display: inline-block; }
  .ex-liste td:nth-child(4), .ex-liste th:nth-child(4) { display: none; }
}

.ex-leiste button[hidden], .ex-menue button[hidden] { display: none; }

/* ==================================================================== W1 „Rahmen“ (Plan docs/planung/web-redesign.md 3, 7; F-WR-1, F-WR-11) */

.navi a, .navi button { min-height: 44px; display: inline-flex; align-items: center; }
button.link { background: none; border: 0; color: var(--accent); padding: 0 2px; min-height: 44px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { background: none; color: var(--gold-hover); }
.haupt.gefahr-haupt { background: var(--gefahr-rand); border-color: var(--danger); color: var(--weiss); }
.haupt.gefahr-haupt:hover { background: var(--gefahr-rand); filter: brightness(1.15); }
dialog.gefahr { border-color: var(--danger); }

/* Rahmen: Leiste links, Kopf mit Haus und Personenmenü, Inhalt, Fuß */
body.mit-rahmen { display: grid; grid-template-columns: var(--leiste-b) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "band band" "kopf kopf" "leiste haupt" "leiste fuss"; }
body.mit-rahmen.leiste-schmal { grid-template-columns: var(--leiste-schmal) minmax(0, 1fr); }
body.mit-rahmen > .testbetrieb { grid-area: band; }
body.mit-rahmen > .kopf { grid-area: kopf; position: sticky; top: 0; z-index: 30; }
body.mit-rahmen > .leiste { grid-area: leiste; }
body.mit-rahmen > main { grid-area: haupt; width: 100%; min-width: 0; padding-bottom: 24px; }
body.mit-rahmen > .fuss { grid-area: fuss; margin-top: 16px; }
body.mit-rahmen .kopf .huelle { max-width: none; flex-wrap: nowrap; gap: 16px; }
body.mit-rahmen .kopf .navi { flex-wrap: nowrap; }

.leiste { background: var(--leiste-bg); border-right: 1px solid var(--line); padding: 14px 10px 24px; min-width: 0; }
.rahmen-admin .leiste { box-shadow: inset -3px 0 0 var(--accent); }
.leiste-navi { position: sticky; top: 76px; }
.leiste ul { list-style: none; margin: 0; padding: 0; }
.leiste-eintrag { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; margin-bottom: 2px; }
.leiste-eintrag:hover { background: var(--bg3); }
.leiste-eintrag.aktiv { background: var(--bg3); color: var(--hell); }
.leiste-eintrag[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); font-weight: 700; }
.leiste-eintrag.unter { padding-left: 40px; font-size: 15px; }
.leiste-eintrag.admin-link { color: var(--accent); }
.leiste .zeichen { width: 20px; flex: none; text-align: center; color: var(--muted); }
.leiste-eintrag.aktiv .zeichen { color: var(--accent); }
.zaehler { margin-left: auto; background: var(--accent); color: var(--auf-gold); font-weight: 700; font-size: 13px; border-radius: 10px; padding: 0 8px; line-height: 20px; }
.leiste-gruppe summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-top: 12px; }
.leiste-gruppe summary::-webkit-details-marker { display: none; }
.leiste-gruppe summary::after { content: '▸'; margin-left: auto; }
.leiste-gruppe[open] summary::after { content: '▾'; }
.leiste-gruppe summary:hover { background: var(--bg3); }
.admin-marke { display: inline-block; margin: 0 0 10px 12px; color: var(--auf-gold); background: var(--accent); font-weight: 700; font-size: 13px; padding: 1px 8px; border-radius: 4px; letter-spacing: .06em; }
.leiste-fuss { display: flex; flex-direction: column; align-items: flex-start; margin-top: 20px; padding: 12px 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.leiste-fuss a, .leiste-fuss button.link { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-size: 15px; }
.leiste-fuss a:hover, .leiste-fuss button.link:hover { color: var(--hell); }
.leiste-schalter { margin-top: 8px; width: 44px; padding: 0; background: none; color: var(--muted); }
.leiste-schmal .leiste .text, .leiste-schmal .leiste-unter, .leiste-schmal .leiste-fuss a, .leiste-schmal .leiste-fuss button.link, .leiste-schmal .admin-marke,
.leiste-schmal .leiste-gruppe summary::after { display: none; }
.leiste-schmal .leiste-eintrag, .leiste-schmal .leiste-gruppe summary { justify-content: center; padding: 8px; position: relative; }
.leiste-schmal .leiste-eintrag.unter { padding-left: 8px; }
.leiste-schmal .zaehler { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 11px; padding: 0 5px; line-height: 16px; }
.leiste-schmal .leiste-fuss { padding: 12px 0 0; align-items: center; }

/* Kopf: Haus-Umschalter, ADMIN, Personenmenü */
.haus-wahl { position: relative; min-width: 0; }
.haus-knopf { display: inline-flex; align-items: baseline; gap: 8px; max-width: min(46vw, 420px); background: var(--bg2); font-weight: 700; padding: 9px 14px; }
.haus-knopf.fest { cursor: default; }
.haus-knopf.fest:hover { background: var(--bg2); }
.haus-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.haus-rolle { color: var(--muted); font-size: 13px; font-weight: 400; white-space: nowrap; }
.pfeil { color: var(--muted); font-size: 12px; }
.admin-etikett { color: var(--auf-gold); background: var(--accent); font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 4px; letter-spacing: .06em; }
.person-wahl { position: relative; }
.navi .person-knopf { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; font-weight: 700; font-size: 15px; background: var(--bg3); border: 1px solid var(--line); color: var(--hell); }
.menue { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 250px; max-width: calc(100vw - 24px); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px var(--schatten); }
.haus-wahl .menue { left: 0; right: auto; }
.menue-kopf { display: flex; flex-direction: column; margin: 0; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.menue-kopf b { color: var(--hell); font-size: 16px; }
.menue a, .menue button, .navi .menue a, .navi .menue button { display: flex; justify-content: space-between; gap: 12px; align-items: center; width: 100%; text-align: left; min-height: 44px;
  padding: 8px 12px; font-weight: 400; font-size: 15px; border: 0; border-radius: 5px; background: none; color: var(--text); text-decoration: none; }
.menue a:hover, .menue button:hover, .menue a:focus, .menue button:focus { background: var(--bg3); }
.menue [aria-checked="true"] { color: var(--hell); font-weight: 700; }
.menue [aria-checked="true"]::before { content: '✓'; color: var(--accent); }

/* Handy: untere Leiste mit vier Bereichen und „Mehr“ (nur unter 760 px sichtbar) */
.untere-leiste { display: none; }
.mehr-liste { list-style: none; margin: 0; padding: 0; }

/* Meldungen unten (aria-live) */
.meldungen { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(560px, calc(100% - 32px)); pointer-events: none; }
.kurzmeldung { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 8px; background: var(--bg2);
  border: 1px solid var(--ok); box-shadow: 0 8px 24px var(--schatten); color: var(--hell); }
.kurzmeldung.fehler { border-color: var(--danger); }
.kurzmeldung.fehler::before { content: 'Fehler:'; font-weight: 700; color: var(--danger); }
.kurzmeldung.hinweis { border-color: var(--accent); }
.kurzmeldung > span { flex: 1; }
.kurzmeldung-zu { width: 44px; padding: 0; background: none; border: 0; font-size: 22px; color: var(--muted); }

/* Listen: Suche, Filter-Chips, Sortierung, „mehr laden“ */
.liste { margin: 0 0 22px; }
.liste-kopf { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 10px; }
.liste-sucher { flex: 1 1 220px; max-width: 360px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; border-radius: 22px; padding: 6px 16px; font-weight: 400; font-size: 15px; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--auf-gold); font-weight: 700; }
.liste-zahl { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.liste-zahl:empty { display: none; }
th[aria-sort] { padding: 0 6px; }
.sortier { background: none; border: 0; min-height: 44px; padding: 6px 4px; font-weight: 700; font-size: 15px; color: var(--muted); width: 100%; text-align: left; }
.sortier:hover { background: var(--bg3); color: var(--hell); }
th[aria-sort="ascending"] .sortier, th[aria-sort="descending"] .sortier { color: var(--hell); }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover { background: var(--bg3); }
tr.klickbar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.liste-mehr { margin-top: 4px; }

/* Panel rechts, Dialoge, Assistent */
dialog.lv-panel { margin: 0 0 0 auto; padding: 0; width: min(520px, 100%); max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; border-width: 0 0 0 1px; }
dialog.lv-panel[open] { display: flex; flex-direction: column; }
.panel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.panel-kopf h2 { margin: 0; font-size: 21px; }
.panel-zu { width: 44px; padding: 0; font-size: 24px; background: none; border: 0; color: var(--muted); }
.panel-inhalt { padding: 16px 20px; overflow: auto; flex: 1; }
.panel-fuss { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); }
dialog.lv-dialog { max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; }
dialog.lv-dialog form textarea { min-height: 88px; }
dialog.lv-assistent { max-width: 760px; padding: 0; }
dialog.lv-assistent[open] { display: flex; flex-direction: column; }
.assistent-kopf { padding: 18px 22px 8px; }
.assistent-kopf h2 { margin: 0 0 8px; }
.assistent-inhalt { padding: 8px 22px 16px; overflow: auto; flex: 1; }
.assistent-schritt { margin-top: 8px; }
.lv-assistent > .meldung { margin: 8px 22px 0; }
.assistent-leiste { position: sticky; bottom: 0; margin: 0; padding: 12px 22px; background: var(--bg2); border-top: 1px solid var(--line); }
.schrittleiste { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.schrittleiste li { flex: 1; border-top: 3px solid var(--line); padding-top: 6px; font-size: 14px; color: var(--muted); min-width: 0; }
.schrittleiste li::before { content: attr(data-nr) '. '; }
.schrittleiste li.erledigt { border-color: var(--kachel); }
.schrittleiste li[aria-current="step"] { border-color: var(--accent); color: var(--hell); font-weight: 700; }

/* Leere Zustände, Gefahrenzone, Kacheln „Was steht an?“ */
.leer { border: 1px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; color: var(--muted); margin: 0 0 16px; }
.leer p { margin: 0 0 10px; }
.leer p:last-child { margin: 0; }
.gefahrenzone { border: 1px solid var(--gefahr-rand); border-radius: 10px; padding: 14px 18px 6px; margin: 24px 0; }
.gefahrenzone h3 { color: var(--danger); }
.gefahr-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.gefahr-zeile p { margin: 2px 0 0; }
.kacheln { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kachel { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; }
.kachel.warn { border-color: var(--kachel-warn-rand); box-shadow: inset 3px 0 0 var(--accent); }
.kachel.rot { box-shadow: inset 3px 0 0 var(--danger); }
.kachel-zahl { font-family: 'LV Outfit', 'Segoe UI', system-ui, sans-serif; font-size: 30px; color: var(--hell); line-height: 1; }
.kachel.info .kachel-zahl { color: var(--muted); }
.kachel-text { margin: 6px 0 8px; flex: 1; }
.kachel-link { color: var(--accent); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.kachel-link:hover { text-decoration: underline; }
.uebersicht-kopf { color: var(--muted); margin-top: -6px; }
.etikett.warn { border-color: var(--danger); color: var(--gefahr-text); }

/* Handy ab 390 px ohne seitliches Scrollen (F-WR-11): untere Leiste, Karten statt Tabellen, Dialoge und Panel als Vollbild, Formulare einspaltig */
/* Tabellen als Karten bis 1024 px (Tablet mit Leiste und Handy, F-WR-11) – jede Zelle mit ihrer Überschrift, kein seitliches Scrollen */
@media (max-width: 1024px) {
  .tabelle-huelle { overflow-x: visible; }
  table.karten, table.karten tbody, table.karten tr, table.karten td { display: block; width: 100%; }
  table.karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.karten tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); padding: 10px 12px; margin: 0 0 10px; }
  table.karten td { border: 0; padding: 2px 0; min-width: 0; overflow-wrap: anywhere; }
  table.karten td:first-child { grid-column: 1 / -1; font-weight: 700; color: var(--hell); }
  table.karten td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
  table.karten td[data-label=""] { grid-column: 1 / -1; }
  table.karten td[data-label=""]::before { display: none; }
  .kennung, .zahl { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  body.mit-rahmen, body.mit-rahmen.leiste-schmal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "band" "kopf" "haupt" "fuss";
    padding-bottom: calc(var(--unten-h) + env(safe-area-inset-bottom, 0px)); }
  body.mit-rahmen > .leiste { display: none; }
  body.mit-rahmen .kopf .huelle { gap: 8px; padding: 0 12px; min-height: 56px; }
  body.mit-rahmen .schriftzug { display: none; }
  .haus-knopf { max-width: calc(100vw - 132px); padding: 8px 10px; }
  .untere-leiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--unten-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--leiste-bg); border-top: 1px solid var(--line); }
  .unten-eintrag { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 4px 2px;
    font-size: 12px; font-weight: 400; color: var(--muted); text-decoration: none; background: none; border: 0; border-radius: 0; position: relative; }
  .unten-eintrag:hover { background: none; color: var(--hell); }
  .unten-eintrag .zeichen { font-size: 19px; line-height: 1; }
  .unten-eintrag .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .unten-eintrag.aktiv { color: var(--accent); }
  .unten-eintrag .zaehler { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; font-size: 11px; padding: 0 5px; line-height: 16px; }
  .meldungen { bottom: calc(var(--unten-h) + 12px); }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .filter { flex-direction: column; align-items: stretch; }
  .filter .feld { min-width: 0; }
  .ed-fassungen { grid-template-columns: minmax(0, 1fr); }
  .gefahr-zeile button { width: 100%; }
}
@media (max-width: 600px) {
  dialog, dialog.lv-dialog, dialog.assistent, dialog.lv-assistent, dialog.lv-panel { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; border: 0; }
  dialog form { padding: 16px; }
  .assistent-leiste { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .assistent-inhalt { padding-bottom: 96px; }
  .schrittleiste li:not([aria-current="step"]) span { display: none; }
  .knoepfe > button, .knoepfe > .knopf { flex: 1 1 auto; }
}
@media print { .leiste, .untere-leiste, .meldungen, .haus-wahl, .navi { display: none !important; } body.mit-rahmen { display: block; } }

/* ==================================================================== W2 „Kundenbereich“ (Plan docs/planung/web-redesign.md 5; F-WR-11) */

/* Seitenkopf mit Hauptknöpfen, zwei Spalten (Inhalt + Seitenkarte), Reiter */
.seiten-kopf { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; justify-content: space-between; margin: 0 0 14px; }
.seiten-titel { min-width: 0; flex: 1 1 320px; }
.seiten-titel h1 { margin-bottom: 4px; }
.unterzeile { color: var(--muted); margin: 0; }
.seiten-knoepfe { margin: 0; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 24px; align-items: start; }
.spalte-haupt { min-width: 0; }
.spalte-seite { min-width: 0; position: sticky; top: 84px; }
.spalte-seite .karte { margin-bottom: 16px; }
.spalte-seite h2 { margin-top: 0; }
.lv-reiter { margin: 0 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.lv-reiter ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.lv-reiter a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.lv-reiter a:hover { color: var(--hell); background: var(--bg3); }
.lv-reiter a[aria-current="page"] { color: var(--hell); font-weight: 700; border-bottom-color: var(--accent); }
.reiter-zahl { background: var(--bg4); color: var(--hell); font-size: 13px; border-radius: 10px; padding: 0 7px; line-height: 20px; }
.kopfzeile { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 14px; }
.kopfzeile .knoepfe { margin: 0 0 0 auto; }
.trenner { color: var(--muted); }

/* Balken (Belegung), Zeitleiste, Knopf-Menü */
.balken { margin: 0 0 12px; }
.balken-titel { color: var(--muted); font-size: 14px; }
.balken meter { display: block; width: 100%; height: 8px; margin: 4px 0 2px; }
.balken meter::-webkit-meter-bar { background: var(--bg4); border: 0; border-radius: 4px; height: 8px; }
.balken meter::-webkit-meter-optimum-value { background: var(--gruen); border-radius: 4px; }
.balken meter::-webkit-meter-suboptimum-value { background: var(--accent); border-radius: 4px; }
.balken meter::-webkit-meter-even-less-good-value { background: var(--danger); border-radius: 4px; }
.balken-text { color: var(--hell); }
.balken-text.zu-viel { color: var(--danger); font-weight: 700; }
.zeitleiste { list-style: none; margin: 0 0 16px; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.zeitleiste li { position: relative; padding: 0 0 12px 8px; }
.zeitleiste li::before { content: ''; position: absolute; left: -25px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.zeitleiste li:last-child::before { background: var(--gruen); }
.zl-text { margin: 4px 0 0; white-space: pre-wrap; }
.menue-anker { position: relative; display: inline-block; }
.menue-anker .menue { right: auto; left: 0; }
.menue-anker.rechts .menue { left: auto; right: 0; }
.menue button.gefahr { color: var(--gefahr-text); }
.menue button[disabled] { opacity: .5; }
.panel-abschnitt { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.panel-abschnitt h3 { margin: 0 0 8px; }
.panel-inhalt .gefahrenzone { margin: 18px 0 8px; }
.knopf-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 10px; }
.knopf-zeile select { width: auto; min-width: 180px; flex: 1 1 180px; }
.person-name small, .zelle-unter { display: block; color: var(--muted); font-size: 14px; }

/* Start: Begrüßung, „Ihr Haus“ */
.haus-karte .balken:last-of-type { margin-bottom: 16px; }
.haus-karte .knoepfe { margin-top: 12px; }
.leistungen-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.leistungen-liste li { padding: 2px 0; }
.leistungen-liste li.aus { color: var(--muted); }
.leistungen-liste li::before { content: '✓ '; color: var(--ok); font-weight: 700; }
.leistungen-liste li.aus::before { content: '– '; color: var(--muted); }

/* Wahlkarten im Assistenten („Was möchten Sie?“) */
.wahlkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 12px; border: 0; padding: 0; }
.wahlkarte { position: relative; display: block; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 12px 44px; background: var(--bg); cursor: pointer; font-weight: 400; color: var(--text); margin: 0; min-height: 44px; }
.wahlkarte input { position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; margin: 0; }
.wahlkarte b { display: block; color: var(--hell); }
.wahlkarte:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.zusammenfassung { margin: 0 0 12px; }

/* Datei-Browser (W2): Detail-Panel rechts, „⋯“ je Zeile, Papierkorb im Baum */
.explorer.mit-detail { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(280px, 340px); }
.ex-detail { border-left: 1px solid var(--line); padding: 14px 16px; background: var(--bg2); min-width: 0; overflow: auto; }
.ex-detail h2 { margin: 0 0 8px; font-size: 20px; overflow-wrap: anywhere; }
.ex-detail .daten { grid-template-columns: minmax(90px, 120px) 1fr; font-size: 15px; }
.ex-detail .knoepfe { margin-top: 12px; }
.ex-detail-leer { color: var(--muted); }
.ex-mehr { min-height: 32px; min-width: 40px; padding: 0 8px; margin-left: 8px; font-weight: 700; letter-spacing: .1em; background: var(--bg3); }
.ex-knoten.ex-papierkorb, .ex-knoten.ex-demo { font-weight: 700; color: var(--hell); }
.ex-knoten.ex-papierkorb::before { content: '⌫ '; color: var(--muted); }
.ex-knoten.ex-demo::before { content: '◆ '; color: var(--accent); }
.ex-name-zelle { display: flex; align-items: center; }
.ex-name-zelle .ex-name { flex: 1; min-width: 0; white-space: normal; }
.ex-hinweis-fuss { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
@media (max-width: 1279px) {
  .explorer.mit-detail { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); }
  .ex-detail { display: none; }
}
@media (max-width: 760px) {
  .explorer.mit-detail { grid-template-columns: minmax(0, 1fr); }
  .ex-liste td:nth-child(3), .ex-liste th:nth-child(3), .ex-liste td:nth-child(5), .ex-liste th:nth-child(5) { display: none; }
  .ex-liste td { white-space: normal; }
  .ex-mehr { min-height: 44px; min-width: 44px; }
  .ex-leiste button:not(.haupt):not([data-id="neu"]) { display: none; }
}

/* Projektseite */
.projekt-kopf .unterzeile .etikett { margin-left: 6px; }
.sperre-hinweis { margin: 0 0 14px; }

/* Handy und Tablet */
@media (max-width: 1024px) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .spalte-seite { position: static; }
}
@media (max-width: 760px) {
  .seiten-knoepfe { width: 100%; }
  .seiten-knoepfe > button, .seiten-knoepfe > .knopf, .seiten-knoepfe > .menue-anker { flex: 1 1 auto; }
  .kopfzeile .knoepfe { margin: 0; width: 100%; }
  .wahlkarten { grid-template-columns: minmax(0, 1fr); }
  .knopf-zeile select { min-width: 0; }
}
body.mit-rahmen main.huelle:has(.explorer.mit-detail) { max-width: 1680px; }
@media (min-width: 1280px) {
  .explorer.mit-detail .ex-liste td:nth-child(4), .explorer.mit-detail .ex-liste th:nth-child(4),
  .explorer.mit-detail .ex-liste td:nth-child(5), .explorer.mit-detail .ex-liste th:nth-child(5) { display: none; }
}
.explorer.mit-detail .ex-leiste:not(:has(button:not([hidden]))) { display: none; }
@media (max-width: 760px) {
  .ex-kopf { flex-direction: column; align-items: stretch; }
  .ex-pfad { flex-wrap: wrap; }
  .ex-baum-schalter { flex: none; }
  .ex-suche { max-width: none; width: 100%; }
}
@media (max-width: 760px) {
  .lv-reiter { overflow: visible; }
  .lv-reiter ul { flex-wrap: wrap; gap: 0 2px; }
  .lv-reiter a { padding: 8px 10px; }
}
.karte .daten + h3, .karte .daten + .knoepfe { margin-top: 18px; }
details.technik summary { cursor: pointer; color: var(--muted); font-size: 14px; min-height: 32px; }
details.technik[open] .kennung { display: block; white-space: normal; overflow-wrap: anywhere; margin-top: 4px; }
.wahlkarte:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.person-name small, .zelle-unter { font-weight: 400; }

/* ---------------------------------------------------------------- W3 „Admin“ (Plan web-redesign.md 6; F-WR-11) */
dialog.lv-dialog.breit { max-width: 760px; }
dialog.lv-panel.pe-panel { width: min(600px, 100%); }
.pe-kopf { color: var(--muted); }
.pe-schritte { margin: 4px 0 16px; }
.pe-schritte li.ende { border-color: var(--danger); color: var(--danger); }
.pe-knoepfe { margin: 0 0 16px; }
.pe-rechner, .pe-lizenzen, .pe-notizen, .wartung-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.pe-rechner li, .pe-lizenzen li, .pe-notizen li, .wartung-liste li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.pe-rechner li:last-child, .pe-lizenzen li:last-child, .pe-notizen li:last-child, .wartung-liste li:last-child { border-bottom: 0; }
.pe-rechner .klein, .pe-lizenzen .knoepfe { margin-top: 6px; }
.ra fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.ra legend { padding: 0 6px; color: var(--hell); font-weight: 700; }
.brotkrumen { color: var(--muted); margin: 20px 0 0; font-size: 15px; }
.brotkrumen + .seiten-kopf h1 { margin-top: 6px; }
.hinweis-liste { list-style: none; margin: 0 0 16px; padding: 0; }
.vier-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
.leistung-zeile { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: flex-end; border-bottom: 1px solid var(--line); padding: 6px 0; }
.leistung-zeile .feld { margin: 0; }
.leistung-zeile .haken { flex: 1 1 220px; margin: 0; }
.speichern-leiste { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: flex-end; margin: 0 0 22px; }
.speichern-leiste .haken { margin: 0; }
details.mehr-felder, details.technik { margin: 12px 0 0; }
details.mehr-felder summary, details.technik summary { cursor: pointer; color: var(--accent); min-height: 44px; display: flex; align-items: center; }
details.technik { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 22px 14px; margin: 0 0 22px; }
details.technik-klein summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.filter-chip { margin: 0; align-self: center; }
.personen-suche { padding: 16px 22px; }
.personen-suche .knopf-zeile { display: flex; gap: 10px; flex-wrap: wrap; }
.personen-suche input[type=search] { flex: 1 1 260px; }
@media (max-width: 1024px) {
  .vier-karten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .speichern-leiste { justify-content: stretch; }
  .speichern-leiste button { width: 100%; }
  .leistung-zeile .feld { width: 100%; }
}
@media (min-width: 601px) { .spalte-seite dl.daten { grid-template-columns: minmax(100px, 130px) minmax(0, 1fr); } }

/* W4 „Feinschliff“: globale Suche im Kopf, ja/nein ohne nur Farbe, Handy (360 px, Querformat), Touch-Ziele ≥ 44 px */
.navi .suche-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg2); color: var(--text); font-weight: 400; }
.navi .suche-knopf .zeichen { font-size: 19px; line-height: 1; }
.navi .suche-knopf:hover { background: var(--bg3); color: var(--hell); }
dialog.lv-suche { width: min(640px, calc(100% - 32px)); max-width: 640px; padding: 0; margin-top: 8vh; }
dialog.lv-suche[open] { display: flex; flex-direction: column; }
.suche-form { padding: 14px 20px 0; }
.lv-suche > .hilfe { padding: 4px 20px 0; margin: 0; }
.suche-ergebnis { padding: 4px 20px 8px; overflow: auto; }
.suche-gruppe h3 { margin: 14px 0 4px; font-size: 15px; color: var(--muted); }
.suche-gruppe ul { list-style: none; margin: 0; padding: 0; }
.suche-treffer { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--hell); }
.suche-treffer:hover, .suche-treffer:focus { background: var(--bg3); }
.suche-text { font-weight: 700; }
.suche-fuss { padding: 8px 20px 16px !important; font-size: 14px; }
.ja-nein { white-space: nowrap; }
@media (max-width: 760px) {
  .navi .suche-knopf { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .haus-knopf { max-width: calc(100vw - 186px); }   /* Platz für Suche und Personenmenü (360 px) */
  .navi .suche-knopf .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .testbetrieb { padding: 6px 12px; font-size: 14px; line-height: 1.4; }
  .ex-knoten, .ex-sort, .ex-menue button { min-height: 44px; }
  .ed-aktionen .klein { min-height: 44px; padding: 6px 12px; }
}
@media (max-width: 600px) {
  dialog.lv-suche { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; border: 0; }
}
/* Querformat am Handy (z. B. 844 × 390): wenig Höhe – Kopf und untere Leiste schlanker, Panel scrollt */
@media (max-height: 480px) and (max-width: 1024px) {
  .testbetrieb { padding: 4px 12px; font-size: 13px; }
  .kopf .huelle { min-height: 52px; }
}
/* Tablet (bis 1024 px, Finger statt Maus): auch der Datei-Browser mit Touch-Zielen ≥ 44 px – am Laptop bleibt er dicht (F-W1-12) */
@media (max-width: 1024px) {
  .ex-knoten, .ex-sort, .ex-menue button { min-height: 44px; }
  .ex-mehr { min-height: 44px; min-width: 44px; }
}
details.technik-klein summary { min-height: 44px; display: inline-flex; align-items: center; }
/* W4: Schnellansicht – Status klebt (D-9), Hinweis fürs Pult lesend (D-10), am Handy Karte je Titel ohne seitliches Scrollen (D-6) */
#ed-kopf { position: sticky; top: 61px; z-index: 2; background: var(--bg); }
#ed-kopf .ed-kopf { position: static; }
.ed-hinweis { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--hell); min-width: 160px; }
.ed-rollen-hinweis a { white-space: nowrap; }
.ed-aktionen .klein, .ed-tabelle summary, .ed-kopf summary { min-height: 44px; }
.ed-kopf summary, .ed-tabelle summary { display: inline-flex; align-items: center; }
@media (max-width: 1024px) {
  .ed-tabelle { overflow-x: visible; }
  table.ed-karten, table.ed-karten tbody, table.ed-karten tr, table.ed-karten td { display: block; width: 100%; }
  table.ed-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.ed-karten tr { border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); padding: 10px 12px; margin: 0 0 10px; }
  table.ed-karten td { border: 0; padding: 3px 0; min-width: 0; overflow-wrap: anywhere; }
  table.ed-karten td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 13px; }
  table.ed-karten td[data-label=""]::before { display: none; }
  table.ed-karten td.ed-z-nr { display: flex; align-items: baseline; gap: 8px; font-weight: 700; color: var(--hell); }
  table.ed-karten td.ed-z-nr::before { display: inline; }
  table.ed-karten td.ed-z-hinweis.ed-leer { display: none; }
  table.ed-karten tr.ed-szene-zeile { background: var(--bg3); }
  .ed-text, .ed-feld, .ed-notizen, .ed-hinweis { min-width: 0; }
  .ed-feld.ed-nr { width: auto; min-width: 0; border: 0; background: transparent; padding: 0; font-weight: 700; }
  .ed-aktionen { flex-wrap: wrap; }
}
/* W4 Admin: Hinweis „E-Mails hängen“, Grund bei gesperrtem „Teilen …“, Haus-Auswahl im Protokoll */
.pe-mailstau { margin: 0 0 .75rem; }
.pe-mailstau a { font-weight: 700; }
.demo-grund { margin: .25rem 0 0; font-size: .85em; }
#pr-haus { min-width: 12rem; max-width: 100%; }
@media (max-width: 760px) { #ed-kopf { top: 57px; } }
details.karte > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
input[type=color] { min-height: 44px; min-width: 44px; }
/* sehr schmale Handys: die Rolle im Haus-Knopf weglassen, damit der Name des Hauses lesbar bleibt (sie steht im Namen des Knopfs und im Menü) */
@media (max-width: 400px) { .haus-knopf .haus-rolle { display: none; } }
/* 6a: Schnellansicht – ◀ ▶ blättern durch die Titel (nur Anzeige), im klebenden Kopf; Touch-Ziele ≥ 44 px, am Handy ohne seitliches Scrollen */
.ed-blaettern { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; min-width: 0; }
.ed-blatt-knopf { min-height: 44px; min-width: 56px; font-size: 18px; }
.ed-blatt { flex: 1; min-width: 0; text-align: center; overflow-wrap: anywhere; color: var(--hell); }
tr.ed-blatt-aktuell > td { box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 1024px) { table.ed-karten tr.ed-blatt-aktuell { outline: 3px solid var(--accent); outline-offset: 1px; } table.ed-karten tr.ed-blatt-aktuell > td { box-shadow: none; } }