/* Glaserei ERP/CRM – Stylesheet (v3 „Seriös & Corporate", Inter + Dark-Mode)
   ------------------------------------------------------------------------
   Ruhige, gedämpfte Firmen-Optik: dunkle Navy-Kopfleiste, klare Kanten,
   dichte Tabellen, hochwertige Typografie (Inter), Akzentfarben nur mit
   Bedeutung. Farben/Abstände laufen über Design-Tokens; die alten
   Variablennamen (--blau, --grau-3 …) bleiben als Aliase erhalten und
   bekommen im Dark-Mode passende Werte – so adaptiert sich auch jeder
   Inline-Stil in den Vorlagen. Umschaltung: <html data-theme="light|dark">.
   ------------------------------------------------------------------------ */
:root {
  /* Marken-/Akzent-Palette (Glaserei ERP) – Slate + Blau */
  --brand: #1b6fb8; --brand-strong: #155a97; --brand-tint: #e9f1fa; --brand-ink: #155a97;
  --navy: #0f172a;
  /* Neutrale (kühles Slate) */
  --bg: #eef2f6; --surface: #ffffff; --surface-2: #f5f8fa;
  --border: #e2e8f0; --border-soft: #eef2f6;
  --ink: #1e293b; --muted: #64748b; --faint: #94a3b8;
  /* Status – ruhige Töne (Grün nur für echte Erfolge) */
  --gruen: #2f7d55; --gruen-bg: #eaf3ee;
  --rot: #d0374e;   --rot-bg: #fbe7ea;
  --orange: #b45309;--orange-bg: #fef3c7;
  --lila: #5b4bbf;  --lila-bg: #ecebf8;
  --info: #1b6fb8;  --info-bg: #e9f1fa;
  /* Kopfleiste – dunkles Slate (themenunabhängig) */
  --hdr-bg: #0f172a; --hdr-ink: #e2e8f0; --hdr-muted: #8595ab;
  --hdr-line: #243043; --hdr-field: #1e293b; --hdr-accent: #6fb0dd;
  /* Tiefe – dezent, Kanten statt Schatten */
  --shadow-sm: 0 1px 1px rgba(15,23,42,.04);
  --shadow: 0 1px 2px rgba(15,23,42,.05);
  --shadow-lg: 0 14px 34px rgba(15,23,42,.15);
  --radius: 6px;
  --topbar-bg: #0f172a;

  /* Legacy-Aliase – NICHT entfernen (von Templates/Inline-Styles genutzt) */
  --blau: var(--brand);
  --blau-dunkel: var(--ink);
  --blau-hell: var(--brand-tint);
  --grau-1: var(--surface-2);
  --grau-2: var(--border);
  --grau-3: var(--muted);
  --text: var(--ink);
  /* 4.67: `--karte` und `--rahmen` wurden in Vorlagen benutzt, aber nirgends
     festgelegt - jedes `var(--karte, #fff)` fiel deshalb auf das feste Weiss
     zurueck. In Dunkel standen die Einstellungsseite, die Dateiablage und die
     Klappmenues am Angebot als weisse Kaesten mit fast weisser Schrift da
     (gemessen 1,1 : 1 - unlesbar). Gefunden im Browser-Test zu 4.66. */
  --karte: var(--surface);
  --rahmen: var(--border);
}
html[data-theme="dark"] {
  --brand: #4d9bf0; --brand-strong: #8fc2f0; --brand-tint: #12233b; --brand-ink: #8fc2f0;
  --navy: #0b1220;
  --bg: #0b1220; --surface: #111c30; --surface-2: #0e1626;
  --border: #22304a; --border-soft: #1a2740;
  --ink: #e5edf7; --muted: #8aa0bd; --faint: #63758f;
  --gruen: #34d399; --gruen-bg: #0f2a22;
  --rot: #f27488;   --rot-bg: #3a1a22;
  --orange: #e0b13a;--orange-bg: #3a2f14;
  --lila: #b3a7f0;  --lila-bg: #241a3d;
  --info: #4d9bf0;  --info-bg: #12233b;
  --shadow-sm: 0 1px 1px rgba(0,0,0,.3);
  --shadow: 0 1px 2px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.5);
  --hdr-bg: #0e1626; --hdr-ink: #e5edf7; --hdr-muted: #8aa0bd;
  --hdr-line: #1e2b42; --hdr-field: #0b1524; --hdr-accent: #4d9bf0;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg); font-size: 14px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .25s ease, color .25s ease;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Zahlen in Mono für saubere, ausgerichtete Beträge */
.kpi-karte .kpi-wert, .kennzahl .wert, .tz-rechts, .num {
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;
  font-variant-numeric: tabular-nums;
}

/* --- Topbar (dunkel, corporate) ---------------------------------------- */
.topbar {
  background: var(--hdr-bg); color: var(--hdr-ink);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 16px; padding: 0 20px; min-height: 56px;
  border-bottom: 1px solid #0a1a28;
}
.topbar .logo { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: .4px; }
.topbar nav { display: flex; gap: 2px; flex: 1; }
.topbar nav a { color: var(--hdr-muted); padding: 7px 11px; border-radius: 4px; font-weight: 500; font-size: 13px; white-space: nowrap; }
.topbar nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.topbar nav a.aktiv { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 0 -2px 0 var(--hdr-accent); }
.topbar .benutzer { color: var(--hdr-muted); font-size: 13px; display: flex; align-items: center; gap: 12px; white-space: nowrap; margin-left: auto; }
.topbar .benutzer a { color: var(--hdr-ink); }
.topbar .benutzer form { display: inline; }
.topbar .benutzer button {
  background: transparent; border: 1px solid var(--hdr-line); color: var(--hdr-ink);
  padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 13px;
}
.topbar .benutzer button:hover { border-color: var(--hdr-accent); color: #fff; }

/* Dark-Mode-Umschalter (in der dunklen Kopfleiste) */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 5px; border: 1px solid var(--hdr-line);
  background: transparent; color: var(--hdr-muted); cursor: pointer; font-size: 15px;
  display: inline-grid; place-items: center; line-height: 1; padding: 0;
}
.theme-toggle:hover { border-color: var(--hdr-accent); color: #fff; }

main { max-width: 1220px; margin: 0 auto; padding: 22px; }

.seitenkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.seitenkopf h1 { font-size: 21px; margin: 0; font-weight: 700; letter-spacing: -.2px; }

/* --- Karten ------------------------------------------------------------ */
.karte {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.karte h2 { font-size: 11.5px; margin: 0 0 12px; color: #455363; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
html[data-theme="dark"] .karte h2 { color: var(--muted); }

/* --- Kennzahlen (KPI) --------------------------------------------------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kennzahl {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 14px; box-shadow: var(--shadow); position: relative;
}
.kennzahl .wert { font-size: 23px; font-weight: 700; color: var(--brand-strong); letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .kennzahl .wert { color: var(--ink); }
.kennzahl .label { color: var(--muted); font-size: 10.5px; margin-top: 3px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600; }

/* --- Tabellen ---------------------------------------------------------- */
table.liste { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
table.liste:has(details[open]) { overflow: visible; }
.karte:has(details[open]), .detail-raster > div:has(details[open]) { overflow: visible; }
.plan-scroll { overflow-x: auto; }
.plan-scroll:has(details[open]) { overflow: visible; }
table.liste th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); padding: 8px 13px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); font-weight: 600;
}
/* --- Durchsuchbare Auswahl (Combobox) ---------------------------------- */
.suchauswahl { position: relative; }
.suchauswahl-liste {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin-top: 2px; max-height: 260px; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.suchauswahl-eintrag { padding: 7px 11px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.suchauswahl-eintrag:hover, .suchauswahl-eintrag.aktiv { background: var(--brand, #1b5e93); color: #fff; }
.suchauswahl-eintrag.gewaehlt { font-weight: 700; }
.suchauswahl-eintrag.leer { color: var(--muted, #94a3b8); cursor: default; }
.suchauswahl-eintrag.leer:hover { background: transparent; color: var(--muted, #94a3b8); }

table.liste th.sortkopf { padding: 0; }
table.liste th.sortkopf > a {
  display: block; padding: 8px 13px; color: inherit; text-decoration: none;
  cursor: pointer; white-space: nowrap; user-select: none;
}
table.liste th.sortkopf > a:hover { background: var(--border-soft); color: var(--text); }
table.liste th.sortkopf.aktiv > a { color: var(--brand); }
table.liste th.sortkopf .sort-pfeil { display: inline-block; width: 1em; font-size: 10px; }
table.liste td { padding: 8px 13px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 13px; }
table.liste tr:last-child td { border-bottom: none; }
table.liste tbody tr { transition: background .1s; }
table.liste tbody tr:hover { background: var(--surface-2); }
.tz-rechts { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Badges (gedämpft, eckig) ------------------------------------------ */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); letter-spacing: .1px; }
.kuerzel-badge { display: inline-block; min-width: 24px; text-align: center; padding: 1px 6px; border-radius: 4px; background: #25547e; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .3px; }

/* Prozess-Übersicht */
.prozess-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.prozess-stufe-kopf { display: flex; flex-direction: column; align-items: center; min-width: 80px; padding: 6px 4px; }
.prozess-nr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 12px; }
.prozess-name { font-size: 12.5px; font-weight: 600; margin-top: 3px; text-align: center; }
.prozess-anzahl { font-size: 12px; color: var(--faint); }
.prozess-pfeil { color: var(--faint); font-size: 16px; }
.prozess-stepper { display: inline-flex; gap: 5px; align-items: center; }
.prozess-punkt { width: 13px; height: 13px; border-radius: 50%; background: var(--surface-2); display: inline-block; border: 1px solid var(--border); }
.prozess-punkt.erledigt { background: var(--gruen); border-color: var(--gruen); }
.prozess-punkt.aktiv { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* 4.73: Stufenkästchen sind jetzt Links, und über der Leiste stehen zwei
   Kachelreihen - „Liegt bei uns" und „Warten auf andere". */
a.prozess-stufe-kopf { color: inherit; text-decoration: none; border-radius: 8px; }
a.prozess-stufe-kopf:hover { background: var(--surface-2); }
.prozess-stufe-aktiv { background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.prozess-kachel { display: flex; flex-direction: column; gap: 2px; min-width: 168px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; }
.prozess-kachel:hover { background: var(--surface-2); }
.prozess-kachel-zahl { font-size: 26px; font-weight: 700; line-height: 1.1; }
.prozess-kachel-text { font-size: 13px; font-weight: 600; }
.prozess-kachel-zusatz { font-size: 11.5px; color: var(--faint); }
.prozess-kachel-warnung { border-color: var(--rot); }
.prozess-kachel-warnung .prozess-kachel-zahl { color: var(--rot); }

.badge.neu { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe0ee; }
.badge.kontaktiert { background: var(--lila-bg); color: var(--lila); border-color: #d8d3f2; }
.badge.besichtigung { background: var(--orange-bg); color: var(--orange); border-color: #ecdcba; }
.badge.kalkulation { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe0ee; }
.badge.angebot { background: var(--info-bg); color: var(--info); border-color: #cfe0ee; }
.badge.gewonnen { background: var(--gruen-bg); color: var(--gruen); border-color: #cbe4d5; }
.badge.verloren { background: var(--rot-bg); color: var(--rot); border-color: #f0cfcf; }
.badge.privat { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.badge.firma { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe0ee; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--brand); color: #fff; border: 1px solid var(--brand);
  padding: 8px 14px; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: none; transition: filter .12s, transform .05s;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.sekundaer { background: var(--surface); color: var(--brand); border: 1px solid var(--border); box-shadow: none; }
.btn.sekundaer:hover { border-color: var(--brand); background: var(--brand-tint); filter: none; }
.btn.klein { padding: 5px 10px; font-size: 12.5px; box-shadow: none; }


}

/* --- Formulare --------------------------------------------------------- */
.form-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px 18px; }
.feld { display: flex; flex-direction: column; gap: 5px; }
.feld.breit { grid-column: 1 / -1; }
.feld label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.form-input, .form-select, .form-textarea {
  border: 1px solid var(--border); border-radius: 5px; padding: 8px 11px;
  font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
.feld .fehler { color: var(--rot); font-size: 12.5px; }
.feld .hilfe { color: var(--faint); font-size: 12.5px; }

.suchleiste { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.suchleiste input[type="search"] {
  flex: 1; min-width: 240px; border: 1px solid var(--border); border-radius: 5px;
  padding: 9px 14px; font-size: 14px; background: var(--surface); color: var(--ink);
}
.suchleiste input[type="search"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.suchleiste select { border: 1px solid var(--border); border-radius: 5px; padding: 8px 11px; font-size: 14px; background: var(--surface); color: var(--ink); }

/* --- Meldungen --------------------------------------------------------- */
.meldungen { margin-bottom: 16px; }
/* 4.66: Der Meldungskasten steht immer im HTML, damit htmx ihn austauschen
   kann. Leer darf er keinen Platz brauchen. */
.meldungen:empty { margin-bottom: 0; }
.meldung { padding: 10px 14px; border-radius: 5px; margin-bottom: 8px; font-weight: 500; border: 1px solid transparent; }
.meldung.success { background: var(--gruen-bg); color: var(--gruen); border-color: #cbe4d5; }
.meldung.error { background: var(--rot-bg); color: var(--rot); border-color: #f0cfcf; }
.meldung.warning { background: var(--orange-bg); color: var(--orange); border-color: #ecdcba; }
.meldung.info { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe0ee; }

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.verlauf li:last-child { border-bottom: none; }
.verlauf .meta { color: var(--faint); font-size: 12.5px; margin-top: 2px; }

.detail-raster { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
/* Ein Grid-Kind hat `min-width: auto` und kann deshalb NICHT unter die Breite
   seines Inhalts schrumpfen: steht eine breite Tabelle darin, sprengt sie die
   Spalte und schiebt die ganze Seite zur Seite. Gemessen am Surface
   (1368 px): Angebot-Detail 620 px quer, Rechnung-Detail 420 px - die rechte
   Spalte 733 px breit, davon 113 px sichtbar.

   Die Regel gab es schon zweimal, beide Male zu eng gefasst: `> .karte`
   trifft nur die Karte als direktes Kind, nicht die Karte in einem blanken
   `<div>` (so steht sie auf Angebot und Rechnung), und sie lag in einer
   Medienabfrage, die bei 1368 px gar nicht greift. Deshalb jetzt: jedes
   Kind, ohne Medienabfrage. (4.50) */
.detail-raster > * { min-width: 0; }

/* Blasse Beschriftungen. Gemessen: `.kpi-label` auf der Uebersicht 2,56 : 1
   (21 Stellen), das „+" im Terminplan 2,25 : 1. Auf der Baustelle bei Sonne
   nicht zu erkennen; noetig sind 4,5 : 1. (4.52) */
.kpi-label { color: var(--grau-3); }
:root { --grau-3: #5b6b7c; }
[data-theme="dark"] { --grau-3: #a7b6c4; }
/* 1024 statt 900: Ein Surface Pro ist im Hochformat 912 px breit und blieb
   damit zweispaltig - die rechte Karte lag 262 px AUSSERHALB des Fensters,
   samt Wareneinsatz und Rohertrag. Gemessen am 30.08.2026. */
@media (max-width: 1024px) { .detail-raster { grid-template-columns: 1fr; } }
.eigenschaften { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14px; }
.eigenschaften dt { color: var(--muted); }
.eigenschaften dd { margin: 0; font-weight: 600; }

.seiten { display: flex; gap: 6px; margin-top: 16px; }
.seiten a, .seiten span { padding: 6px 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.seiten .aktuell { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- Login ------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--navy) 0%, #16466e 100%); }
.login-box { background: var(--surface); padding: 34px; border-radius: 8px; width: 360px; box-shadow: var(--shadow-lg); }
.login-box h1 { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.login-box p.unter { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.login-box .feld { margin-bottom: 14px; }
.login-box .btn { width: 100%; justify-content: center; }

.leer { color: var(--faint); padding: 22px; text-align: center; }

/* --- Mobile Monteur-Ansicht -------------------------------------------- */
.einsatz-liste { display: grid; gap: 12px; }
.einsatz-karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow); }
.einsatz-karte h3 { margin: 8px 0 6px; font-size: 16px; }
.einsatz-kopf { display: flex; justify-content: space-between; align-items: center; }
.einsatz-info { margin: 0 0 12px; line-height: 1.7; color: var(--ink); }
.einsatz-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.einsatz-aktionen .btn { min-height: 44px; display: inline-flex; align-items: center; }
.einsatz-aktionen form { display: inline; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 760px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 14px; gap: 8px; }
  .topbar nav { flex-wrap: wrap; width: 100%; order: 3; gap: 2px; }
  .topbar nav a { padding: 8px 10px; font-size: 14px; }
  .topbar .benutzer { margin-left: auto; }
  main { padding: 14px; }
  .seitenkopf h1 { font-size: 18px; }
  table.liste { display: block; overflow-x: auto; white-space: nowrap; }
  .form-raster { grid-template-columns: 1fr; }
  .btn { min-height: 42px; display: inline-flex; align-items: center; }
  .kennzahlen { grid-template-columns: 1fr 1fr; }
}

/* --- Terminplan -------------------------------------------------------- */
table.plan { border-collapse: collapse; width: 100%; }
table.plan td, table.plan th { vertical-align: top; }
table.plan td, table.plan th { border-left: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
table.plan td:first-child, table.plan th:first-child { border-left: 2px solid var(--border); }
table.plan td:last-child, table.plan th:last-child { border-right: 1px solid var(--border-soft); }
table.plan tbody tr { border-bottom: 1px solid var(--border); }
table.plan td:first-child { background: var(--surface-2); font-size: 13px; }
.heute-spalte { background: var(--brand-tint) !important; }
.frei-spalte { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--rot-bg) 6px, var(--rot-bg) 12px); }
.plan-eintrag {
  display: block; background: var(--brand-tint); border-left: 3px solid var(--brand);
  border-radius: 4px; padding: 6px 8px; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--brand-ink);
}
.plan-eintrag span { font-weight: 400; color: var(--ink); }
.plan-eintrag:hover { text-decoration: none; filter: brightness(0.97); }
.plan-eintrag.in_arbeit { background: var(--orange-bg); border-left-color: var(--orange); color: var(--orange); }
.plan-eintrag.erledigt { background: var(--gruen-bg); border-left-color: var(--gruen); color: var(--gruen); }
.plan-eintrag.offen { background: var(--rot-bg); border-left-color: var(--rot); color: var(--rot); }
.plan-eintrag.urlaub { background: var(--lila-bg); border-left-color: var(--lila); color: var(--lila); }

/* Aufklapp-Kästen (Gutschrift, Position bearbeiten, Monteur-Popover).
   4.69 (Prüfagent nach 4.68): Sie hatten `background:#fff` fest im
   Vorlagentext und **kein** `color` - im dunklen Modus erbte die Schrift
   `--ink` (#e5edf7): Kontrast 1,18:1, also unlesbar. Gemessen an Rechnung
   (Gutschrift-Aufklapper, Position bearbeiten) und Terminplan (Monteur
   zuweisen). */
.aufklapp-kasten {
  background: var(--surface, #fff); color: var(--ink, #1e293b);
  border: 1px solid var(--border, #e2e8f0);
}
/* Zeile „Preis fehlt noch" - der Warnton kam aus einem festen Hellgelb und
   verschwand im dunklen Modus ganz. */
/* 4.70: `table.liste tbody tr:hover` ist spezifischer als eine einfache
   Klasse - die Warnfarbe verschwand, sobald die Maus darüberfuhr. Mit dem
   Tabellenkontext davor gewinnt die Zeile wieder. */
.zeile-warnung,
table.liste tbody tr.zeile-warnung:hover { background: var(--orange-bg, #fdf0d7); }
.zeile-guenstig,
table.liste tbody tr.zeile-guenstig:hover { background: var(--gruen-bg, #dcf1e4); }
.hinweis-warn { color: var(--orange, #8a5a00); }

/* Interne Kalkulation an der Angebotsposition. 4.68 (Prüfagent, dritte
   Runde): Der Kasten hatte feste helle Farben im Vorlagentext - im dunklen
   Modus stand hellgraue Schrift auf hellblauem Grund, die Zahlen waren nicht
   zu lesen. Jetzt über die Farbwerte, also in beiden Modi lesbar. */
.kalk-kasten {
  background: var(--brand-tint); border: 1px dashed var(--border);
  color: var(--ink);
}
.kalk-kasten strong { color: var(--brand-ink); }

/* --- Layout-Konfigurator (4.71) ---------------------------------------- */
.konfigurator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: 16px; align-items: start; }
.konfig-form { max-width: none; }
.konfig-block { border-top: 1px solid var(--border); padding-top: 12px; }
.konfig-block:first-of-type { border-top: 0; padding-top: 0; }
.konfig-block h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
                   color: var(--muted); margin: 0 0 10px; }
.konfig-block .feld { margin-bottom: 12px; }
.konfig-reihe { display: flex; gap: 14px; flex-wrap: wrap; }
.konfig-haken { display: flex; gap: 8px; align-items: flex-start;
                font-size: 13px; margin-bottom: 8px; line-height: 1.35; }
.konfig-mehr { cursor: pointer; font-size: 12.5px; color: var(--brand); }
.konfig-fuss { display: flex; gap: 10px; flex-wrap: wrap;
               border-top: 1px solid var(--border); padding-top: 14px; }
.farbfeld { width: 70px; height: 38px; border: 1px solid var(--border);
            border-radius: 8px; background: var(--surface); padding: 2px; }
.logo-vorschau { background: var(--surface-2); border: 1px solid var(--border);
                 border-radius: 8px; padding: 8px; margin-bottom: 6px;
                 display: inline-block; }
.logo-vorschau img { max-height: 54px; max-width: 100%; display: block; }
.konfig-vorschau { position: sticky; top: 12px; }
.konfig-vorschau iframe { width: 100%; height: 78vh; min-height: 420px;
                          border: 1px solid var(--border); border-radius: 8px;
                          background: #fff; }
.hilfe { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
@media (max-width: 1100px) {
  .konfigurator { grid-template-columns: 1fr; }
  .konfig-vorschau { position: static; }
  .konfig-vorschau iframe { height: 60vh; }
}

/* --- Balkendiagramm (Auswertungen) ------------------------------------- */
.balken-diagramm { display: flex; align-items: flex-end; gap: 8px; height: 220px; padding-top: 20px; }
.balken-spalte { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.balken { width: 100%; max-width: 56px; background: linear-gradient(180deg, var(--brand), var(--brand-strong)); border-radius: 4px 4px 0 0; min-height: 2px; }
.balken-wert { font-size: 11px; color: var(--faint); margin-bottom: 3px; }
.balken-label { font-size: 11px; color: var(--faint); margin-top: 6px; white-space: nowrap; }

/* --- Nav-Dropdowns ----------------------------------------------------- */
.nav-gruppe { position: relative; }
.nav-menue { display: none; position: absolute; top: 100%; left: 0; z-index: 50; background: var(--navy); border-radius: 0 0 6px 6px; min-width: 200px; padding: 6px; box-shadow: var(--shadow-lg); }
.nav-gruppe:hover .nav-menue, .nav-gruppe:focus-within .nav-menue { display: block; }
.nav-menue a { display: block; padding: 9px 12px !important; color: #cfe0ee; }
@media (max-width: 760px) { .nav-menue { position: static; display: block; background: transparent; box-shadow: none; padding: 0 0 0 14px; min-width: 0; } }

.nav-suche input {
  background: var(--hdr-field); border: 1px solid var(--hdr-line); border-radius: 5px;
  color: var(--hdr-ink); padding: 7px 12px; font-size: 13px; width: 200px;
}
.nav-suche input::placeholder { color: var(--hdr-muted); }
.nav-suche input:focus { background: var(--hdr-field); color: #fff; outline: none; width: 250px; border-color: var(--hdr-accent); box-shadow: 0 0 0 3px rgba(111,176,221,.18); }

@media (max-width: 760px) {
  .detail-raster > div, .detail-raster > .karte, .kennzahlen > .kennzahl { min-width: 0; }
  .karte { overflow-x: auto; }
  .balken-diagramm { overflow-x: auto; }
  .balken-label { font-size: 9px; }
  .seitenkopf > div { display: flex; flex-wrap: wrap; gap: 6px; }
  .einsatz-karte { min-width: 0; }
  body { overflow-x: hidden; }
}

/* --- Checkliste, Wartung, Objekte -------------------------------------- */
.badge-gruen { background: var(--gruen-bg); color: var(--gruen); }
.badge-rot { background: var(--rot-bg); color: var(--rot); }
.btn-klein { padding: 5px 10px; font-size: 12.5px; }
.btn-hell { background: var(--surface); color: var(--brand); border: 1px solid var(--border); }
.btn-hell:hover { background: var(--brand-tint); }

/* --- Sidebar-Layout (klassisches ERP-Menü) ----------------------------- */
body.mit-sidebar { display: block; }
body.mit-sidebar .topbar { position: sticky; top: 0; z-index: 60; }
.logo-zusatz { font-weight: 500; font-size: 11px; letter-spacing: 2px; color: var(--hdr-muted); }
.menue-knopf { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 4px 10px; }
.sidebar { position: fixed; left: 0; top: 56px; bottom: 0; width: 232px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); padding: 12px 10px 30px; z-index: 50; }
.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.sb-titel { margin: 15px 8px 5px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.sb-link { display: block; padding: 7px 10px; border-radius: 5px; color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.4; font-weight: 500; transition: background .12s, color .12s; border-left: 2px solid transparent; }
.sb-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.sb-link.aktiv { background: var(--brand-tint); color: var(--brand-ink); font-weight: 650; border-left-color: var(--brand); }
body.mit-sidebar main { margin-left: 232px; padding: 20px 24px; max-width: none; }
body.mit-sidebar .topbar nav, body.mit-sidebar .nav-gruppe { display: none; }

@media (max-width: 980px) {
  .menue-knopf { display: block; }
  .sidebar { transform: translateX(-105%); transition: transform .2s ease; width: 262px; box-shadow: var(--shadow-lg); }
  body.sidebar-offen .sidebar { transform: translateX(0); }
  body.mit-sidebar main { margin-left: 0; padding: 14px; }
}

/* Formen-Galerie (Sonderform-Auswahl per Bild) */
.formen-galerie { display: flex; gap: 8px; flex-wrap: wrap; }
.form-kachel { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface); border: 2px solid var(--border); border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 11.5px; color: var(--ink); }
.form-kachel svg { width: 56px; height: 40px; }
.form-kachel:hover { border-color: var(--brand); }
.form-kachel.aktiv { border-color: var(--brand); background: var(--brand-tint); font-weight: 600; }

@media (max-width: 980px) { .sidebar { top: 0; padding-top: 60px; z-index: 70; } }

/* Terminplan-Board */
.plan-zelle { vertical-align: top; min-height: 60px; position: relative; }
.plan-zelle.drop-ziel { outline: 2px dashed var(--brand); outline-offset: -3px; background: var(--brand-tint); }
.plan-eintrag[draggable="true"] { cursor: grab; }
.zelle-plus { display: block; width: 100%; margin-top: 4px; border: 1px dashed var(--border); background: none; color: var(--faint); border-radius: 5px; cursor: pointer; font-size: 14px; line-height: 20px; opacity: 0; transition: opacity .12s; }
.plan-zelle:hover .zelle-plus { opacity: 1; }
.zelle-plus:hover { color: var(--brand); border-color: var(--brand); }
.unverplant-zeile { cursor: grab; }
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(15,34,51,.45); }

/* Zeit-Stift im Terminplan */
.zeit-stift { border: none; background: none; cursor: pointer; font-size: 11px; color: inherit; opacity: .55; padding: 0 2px; }
.zeit-stift:hover { opacity: 1; }

/* Abwesenheitskalender */
.kalender { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kalender th { background: var(--navy); color: #fff; padding: 6px; font-size: 12.5px; }
.kalender td { border: 1px solid var(--border-soft); vertical-align: top; height: 78px; padding: 3px; }
.kalender td.kal-leer { background: var(--surface-2); }
.kal-tag { font-size: 12px; color: var(--faint); text-align: right; }
.kal-eintrag { font-size: 11px; border-radius: 4px; padding: 1px 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-eintrag.urlaub { background: var(--gruen-bg); color: var(--gruen); }
.kal-eintrag.krank { background: var(--rot-bg); color: var(--rot); }
.kal-eintrag.za { background: var(--orange-bg); color: var(--orange); }
.kal-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.kal-punkt.urlaub { background: var(--gruen); } .kal-punkt.krank { background: var(--rot); } .kal-punkt.za { background: var(--orange); }

/* Terminplan-Ansichten */
.ansicht-schalter { display: inline-flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.ansicht-schalter a { padding: 6px 13px; color: var(--muted); text-decoration: none; font-size: 14px; border-right: 1px solid var(--border-soft); }
.ansicht-schalter a:last-child { border-right: none; }
.ansicht-schalter a.aktiv { background: var(--brand); color: #fff; font-weight: 600; }
.ansicht-schalter a:hover:not(.aktiv) { background: var(--brand-tint); }
.feiertag-name { font-size: 10px; color: var(--rot); font-weight: 400; }
.plan-eintrag.termin { background: var(--lila-bg); border-left: 3px solid var(--lila); color: var(--lila); }
.mini-x { border: none; background: none; cursor: pointer; color: var(--lila); font-size: 11px; padding: 0 2px; }
.termin-menu { position: relative; }
.termin-menu > summary.mini-menu { list-style: none; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; padding: 0 3px; display: inline-block; }
.termin-menu > summary.mini-menu::-webkit-details-marker { display: none; }
.termin-menu[open] > summary.mini-menu { color: var(--brand); }

/* Angebots-Editor */
.pos-zeile .drag-griff { cursor: grab; color: var(--border); user-select: none; }
.pos-zeile:hover .drag-griff { color: var(--brand); }
.pos-alternativ td { background: var(--surface-2); }
.pos-alternativ strong { font-weight: 600; }

/* Roter Verbergen-Button */
.btn-rot { background: var(--rot-bg); color: var(--rot); border: 1px solid var(--rot-bg); }
.btn-rot:hover { filter: brightness(.97); }

/* --- KPI-Leiste Dashboard (kompakt, viel Info auf einen Blick) --------- */
.kpi-leiste { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.kpi-karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px; position: relative; overflow: hidden; }
.kpi-karte .kpi-tick { position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #25547e; }
.kpi-karte.rot .kpi-tick { background: var(--rot); }
.kpi-karte.gruen .kpi-tick { background: var(--gruen); }
.kpi-karte.orange .kpi-tick { background: var(--orange); }
.kpi-karte .kpi-label { font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); padding-left: 8px; }
.kpi-karte .kpi-wert { font-size: 21px; font-weight: 700; letter-spacing: -.4px; margin-top: 4px; color: var(--brand-strong); font-variant-numeric: tabular-nums; padding-left: 8px; }
html[data-theme="dark"] .kpi-karte .kpi-wert { color: var(--ink); }
.kpi-karte.rot .kpi-wert { color: var(--rot); }
.kpi-karte.gruen .kpi-wert { color: var(--gruen); }
.kpi-karte a.kpi-stretch { position: absolute; inset: 0; }
.kpi-karte .kpi-meta { font-size: 11px; color: var(--muted); margin-top: 2px; padding-left: 8px; }
@media (max-width: 980px) { .kpi-leiste { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .kpi-leiste { grid-template-columns: repeat(2, 1fr); } }

/* --- Einklappbare Menuegruppen ------------------------------------------ */
.sb-gruppe > summary.sb-titel {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 5px;
  /* Fingerfreundlich am Tablet - die Ueberschrift ist der Schalter. */
  padding: 7px 8px; margin: 9px 0 2px; border-radius: 5px;
}
.sb-gruppe > summary.sb-titel::-webkit-details-marker { display: none; }
.sb-gruppe > summary.sb-titel::before {
  content: "▸"; font-size: 9px; transition: transform .15s; display: inline-block;
}
.sb-gruppe[open] > summary.sb-titel::before { transform: rotate(90deg); }
.sb-gruppe > summary.sb-titel:hover { background: var(--surface-2); color: var(--muted); }
/* Gruppe der gerade geoeffneten Seite hervorheben */
.sb-gruppe.hat-aktiv > summary.sb-titel { color: var(--brand); }


/* --- Bedienung mit dem Finger ------------------------------------------- */
/*
   Nelson arbeitet seit August 2026 auch auf einem Microsoft Surface Pro. Das
   ist 912 px (hoch) bzw. 1368 px (quer) breit - alle bisherigen
   Touch-Regeln hingen an `max-width: 760px` und griffen dort NIE. Das Gerät
   galt dem Stylesheet als Schreibtisch-PC mit Maus.

   `pointer: coarse` fragt nicht die Breite ab, sondern das Zeigegerät. Am
   Büro-PC ändert dieser Block deshalb gar nichts.

   Richtwert für Fingerflächen: 44 px (Apple), 40 px (Microsoft).
   Gemessen vorher: Knöpfe 33 px hoch, kleine Knöpfe 27 px, Ankreuzfelder
   13 px, das ⋯-Menü im Terminplan 19 × 15 px.
*/
@media (pointer: coarse) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .btn.klein { min-height: 44px; min-width: 44px; padding: 8px 12px; }

  /* **Eingabefelder waren nie dabei.** Der Block regelte Knoepfe,
     Ankreuzfelder, den Datei-Knopf, das Menue und die Menuelinks - aber kein
     `input`, `select` oder `textarea`. Gemessen am Surface: Anmeldemaske
     292x34, `.form-input` 34 hoch, `select.form-select` 141x36; auf
     „Angebot bearbeiten" lagen 28 von 118 Bedienelementen unter 40 px.
     Jedes Formular im ERP war damit eine Zieluebung. (4.52) */
  .form-input, .form-select, .form-textarea,
  input[type="text"], input[type="number"], input[type="email"],
  input[type="tel"], input[type="date"], input[type="time"],
  input[type="search"], input[type="password"], select {
    min-height: 44px;
  }
  .form-textarea, textarea { min-height: 88px; }

  /* Die Filterzeile im Posteingang war 15 px hoch, mit 12 px Abstand
     zwischen den Zielen - der Wechsel zwischen offen/uebernommen/verworfen
     ist die Hauptbedienung dieser Seite und traf regelmaessig daneben. */
  .filterzeile a, .filter-links a, .unterfilter a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 10px;
  }

  /* Ankreuzfelder liegen bei 22 px und haben kein umschliessendes Label:
     die Trefferflaeche ist wirklich 22 px. Ein durchsichtiger Rand macht
     sie fingertauglich, ohne das Aussehen zu aendern. */
  input[type="checkbox"].auswahl-box, input[type="checkbox"].wahl {
    outline-offset: -11px; padding: 11px; margin: -11px;
  }

  /* Zwei feste Knoepfe auf jeder Seite. */
  .theme-toggle { min-width: 44px; min-height: 44px; }
  #bug-knopf { width: 44px !important; height: 44px !important; }

  /* Ankreuzfelder: Browservorgabe sind 13 px. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }

  /* Der „+" in der Terminplan-Zelle war nur bei Maushover sichtbar - ohne
     Mauszeiger also nie. */
  .zelle-plus { opacity: .5; min-height: 44px; }

  /* Die Tür zum Terminmenü war 19 × 15 px - und ist zugleich der einzige
     Zugang zu allen Terminaktionen. */
  .termin-menu > summary.mini-menu { padding: 10px 14px; min-height: 44px;
                                     min-width: 44px; }

  /* Der Ziehgriff täuscht am Finger einen Bedienweg vor, den es nicht gibt:
     HTML5-Drag-and-Drop kennt keine Fingerereignisse. Im Angebot gibt es die
     Pfeile ▲▼, also weg damit. */
  .pos-zeile .drag-griff { display: none; }

  /* Dasselbe beim Menü anpassen: seit 4.43 stehen dort ↑↓-Knöpfe, mit denen
     die Reihenfolge auch am Tablet zu ändern ist. Der Griff daneben wäre
     wieder nur ein Versprechen, das der Finger nicht einlösen kann. */
  .menue-zeile .drag-griff { display: none; }
  .sortier-knoepfe .btn { min-height: 40px; min-width: 40px; }

  /* Der ☰-Knopf ist im Hochformat der einzige Weg ins Menü - und war mit
     30 px kleiner als jedes andere Bedienelement. (4.43) */
  .menue-knopf { min-height: 44px; min-width: 44px; }

  /* Und die Hauptnavigation selbst: 33 px je Zeile, 27 px je Überschrift,
     trotz des Kommentars „Fingerfreundlich am Tablet". (4.43) */
  .sb-link,
  .sb-gruppe > summary.sb-titel { min-height: 44px; display: flex;
                                  align-items: center; }

  /* Die native Schaltfläche „Datei auswählen" bleibt sonst bei 26 px - und
     ein Aufmaßfoto lädt man am Tablet hoch, nicht am Bürorechner. (4.43) */
  input[type="file"] { min-height: 44px; }

  /* Standardsorten: 67 Auswahlfelder à 22 px auf einer Seite, auf der nichts
     anderes zu tun ist als zu wählen. Statt den Punkt weiter zu vergrößern,
     wird die ganze Zeile zur Fläche - jede Zelle ist ein <label>. (4.44) */
  tr.sortenwahl label { display: block; min-height: 44px; line-height: 44px;
                        cursor: pointer; }
  tr.sortenwahl input[type="radio"] { width: 26px; height: 26px; }

  /* Der Abmelden-Knopf im Seitenkopf blieb bei 29 px. Die Regel aus 4.44
     zeigte auf `.kopf` - eine Klasse, die es in keiner Vorlage gibt. Der
     Seitenkopf heisst `.topbar`. (4.46) */
  .topbar button[type="submit"] { min-height: 44px; }
  .topbar .btn, .topbar a.btn { min-height: 44px; }

  /* Die Kundenseite schob sich am Surface 68 px nach rechts: „Deaktivieren"
     war abgeschnitten, der Fehlermelde-Knopf lag ausserhalb des Fensters.
     `.detail-raster > .karte { min-width: 0 }` stand in
     `@media (max-width: 760px)` und griff bei 912 px nie - dieselbe
     Fehlbemessung wie schon zweimal zuvor. (4.46) */
  .detail-raster > .karte { min-width: 0; }
  input[type="file"]::file-selector-button { min-height: 40px; padding: 0 12px; }

}

/* Die zwei Sortierknöpfe stehen nebeneinander und brauchen etwas Platz.
   Am Bürorechner bleibt zusätzlich der Ziehgriff - wer gewohnt ist zu
   ziehen, soll weiter ziehen dürfen. */
.sortier-zelle { width: 96px; white-space: nowrap; }
.sortier-knoepfe { display: inline-flex; gap: 2px; margin-left: 4px;
                   vertical-align: middle; }
.sortier-knoepfe .btn { padding: 2px 6px; line-height: 1.2; }

/* Breite Tabellen sollen in sich scrollen statt die ganze Seite seitlich zu
   verschieben. Bis 30.08.2026 galt das erst ab 760 px - auf dem Surface im
   Hochformat (912 px) gab es deshalb gar keinen Scrollbehälter, und die
   Positionstabelle schob die ganze Seite nach rechts. */
/* 1400 statt 1024: die Regel fragt das **Fenster**, gebraucht wird aber der
   **Platz**. Im Querformat (1368 px) nimmt die feste Seitenleiste 232 px plus
   48 px Innenabstand weg - es bleiben 1088 px, und die Regel griff trotzdem
   nicht. Genau dort konnte der Fehler von Ende August wiederkommen. (4.43) */
@media (max-width: 1400px) {
  table.liste { display: block; overflow-x: auto; }
}

/* 4.67: Und derselbe Fehler eine Stufe weiter draussen. Auf einer Detailseite
   steht die Tabelle in der linken Spalte des Rasters, nicht auf der ganzen
   Seite - bei 1440 px Fensterbreite ist die Spalte 762 px breit, die
   Positionstabelle 898 px. Sie ragte 136 px darüber hinaus und legte sich
   über die rechte Spalte: die Knöpfe ▼, € und ✕ am Zeilenende waren verdeckt
   und liessen sich nicht anklicken - Verschieben und Löschen gingen bei
   üblicher Laptopbreite gar nicht.

   Die Fensterbreite ist dafür das falsche Mass. Auf einer Detailseite gilt
   die Regel deshalb IMMER, egal wie breit das Fenster ist. (Browser-Test zu
   4.66) */
.detail-raster table.liste { display: block; overflow-x: auto; }

/* Die Knopfspalte bleibt beim Querscrollen stehen. Ohne das muesste man erst
   nach rechts schieben, um eine Position zu loeschen. */
.detail-raster table.liste th.pos-aktionen,
.detail-raster table.liste td.pos-aktionen {
  position: sticky; right: 0; z-index: 2;
  background: var(--surface); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .18);
}
.detail-raster table.liste th.pos-aktionen { background: var(--surface-2); }

/* Djangos eigene Fehlerliste sah aus wie normaler Text: schwarze Punkte unter
   dem Feld. Die Hausregel ist `.feld .fehler` - beides bekommt jetzt
   dieselbe Farbe. (4.43) */
/* Nur für Vorleseprogramme sichtbar - gibt einem nackten Ankreuzfeld einen
   Namen, ohne die Tabelle zu verbreitern. */
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden;
          clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

ul.errorlist { list-style: none; margin: 4px 0 0; padding: 0; }
ul.errorlist li { color: var(--rot); font-size: 12.5px; }


/* Der Schliessen-Knopf und die Flaeche daneben - nur solange die Leiste
   ueber dem Inhalt liegt (bis 980 px). Am Buero-PC steht sie fest und
   braucht beides nicht. (4.52) */
.sidebar-zu { display: none; }
.sidebar-schatten { display: none; }
@media (max-width: 980px) {
  .sidebar-zu {
    display: block; width: calc(100% - 24px); margin: 12px;
    min-height: 44px; border: 1px solid var(--grau-2);
    border-radius: 8px; background: transparent; color: inherit;
    font-size: 14px; cursor: pointer;
  }
  body.sidebar-offen .sidebar-schatten {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(0, 0, 0, .35);
  }
}

/* Die Gruppenueberschriften der Positionstabelle („Glas", „Material",
   „Montage") standen mit `background:#eef4fa` fest im Template - der
   Dunkelmodus dreht das nicht um. Gemessen: Kontrast **1,07 : 1**, heller
   Text auf hellem Grund, die Gliederung des Angebots war unsichtbar.
   Noetig sind 4,5 : 1. (4.52) */
.pos-gruppe-zelle {
  background: var(--blau-hell, #eef4fa);
  color: var(--blau-dunkel);
  font-weight: 700; font-size: 12.5px; padding: 5px 8px; letter-spacing: .3px;
}
[data-theme="dark"] .pos-gruppe-zelle {
  background: #1e2c3a;
  color: #cfe2f5;
}

/* --- Glas-Formular im Angebot (4.76) -----------------------------------
   Vorher standen 16 gleich aussehende Felder untereinander, und der Preis
   war erst zu sehen, wenn die Position schon im Angebot stand. Jetzt:
   Glas und Mass offen, alles andere hinter zwei Klappen, Summe dazwischen.
   Eigenes Raster statt `auto-fit` - das kippte unter 760 px auf eine Spalte
   und machte aus drei Massfeldern drei Zeilen.                          */
.glasmaske { display: grid; grid-template-columns: 1fr; gap: 12px; }
.glasmaske .gm-voll { grid-column: 1 / -1; }
.gm-masse { display: grid; grid-template-columns: 1fr 1fr 90px; gap: 10px; }
.gm-paar { display: grid; grid-template-columns: 1fr 100px; gap: 10px; }
.gm-schmal { max-width: 160px; }
@media (max-width: 420px) {
  .gm-masse { grid-template-columns: 1fr 1fr; }
  .gm-masse > :last-child { grid-column: 1 / -1; }
  .gm-paar { grid-template-columns: 1fr; }
  .gm-schmal { max-width: none; }
}

.gm-block { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.gm-block > summary {
  cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 13.5px;
  color: var(--ink); list-style: none; display: flex; gap: 8px; align-items: baseline;
}
.gm-block > summary::-webkit-details-marker { display: none; }
.gm-block > summary::before { content: "▸"; color: var(--faint); font-size: 11px; }
.gm-block[open] > summary::before { content: "▾"; }
.gm-block-hinweis { color: var(--faint); font-weight: 400; font-size: 12px; }
.gm-block-inhalt {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  padding: 0 12px 12px; border-top: 1px solid var(--border-soft);
}
.gm-block-inhalt > .gm-voll { grid-column: 1 / -1; }

/* Kantenseiten als Schalter statt als Haekchenliste. Im Screenshot vom
   14.09. standen die Haekchen rechts und die Woerter links - eine Spalte
   Luft dazwischen, nicht zuzuordnen. */
.gm-kanten { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-kante {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px; font-size: 13px; background: var(--surface);
  user-select: none;
}
.gm-kante:hover { border-color: var(--brand); }
.gm-kante input { accent-color: var(--brand); margin: 0; }
.gm-kante:has(input:checked) {
  border-color: var(--brand); background: var(--brand-tint); font-weight: 600;
}
.gm-kante-aus:has(input:checked) { border-color: var(--faint); background: var(--surface-2); }
.gm-breit-check { align-self: start; }

/* Die Summe. Sie soll im Augenwinkel mitlaufen, nicht ablenken. */
#gm-summe { min-height: 54px; }
.gm-summe-inhalt {
  border: 1px solid var(--brand); border-radius: 10px;
  background: var(--brand-tint); padding: 10px 13px;
}
.gm-summe-leer { border-style: dashed; border-color: var(--border);
  background: var(--surface-2); color: var(--faint); font-size: 13px; }
.gm-summe-zahl { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.gm-summe-wert { font-size: 22px; font-weight: 700; color: var(--brand); }
.gm-summe-hinweis { font-size: 12.5px; color: var(--muted); }
.gm-summe-teile { list-style: none; margin: 8px 0 0; padding: 0;
  font-size: 12.5px; color: var(--muted); }
.gm-summe-teile li { display: flex; justify-content: space-between; gap: 12px;
  padding: 2px 0; }
.gm-summe-warnung { margin: 8px 0 0; font-size: 12.5px; color: var(--rot); }

/* Vermerk im Menü-Editor: wo ein Punkt heute liegt. (4.76) */
.menue-wo { font-size: 11.5px; color: var(--faint); }

/* Löschleiste über der Glasartenliste (4.76) */
.loesch-leiste {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--rot); background: var(--rot-bg);
  border-radius: 10px; padding: 9px 13px; margin: 0 0 12px;
  font-size: 13px;
}