/*
  Werkstatt-ERP – Gestaltung "Werkbank"
  Layout: feste Seitenleiste links, Suchleiste oben, Arbeitsfläche in ruhigen Flächen.
  Ein Akzent (Signalgelb) markiert nur Handlungen und den aktuellen Ort.
*/
:root {
  --grund: #eceeed;
  --flaeche: #ffffff;
  --flaeche-2: #f5f6f5;
  --flaeche-hover: #eef1f0;
  --tinte: #172120;
  --leise: #5a6663;
  --linie: #d7dcda;
  --linie-stark: #b9c1be;
  --signal: #f2b400;
  --signal-hover: #ffc824;
  --auf-signal: #1d1903;
  --akzent-text: #7a5800;
  --rot: #b8322a;
  --rot-flaeche: #fbe9e7;
  --gelb-text: #7a5200;
  --gelb-flaeche: #fff3cc;
  --gruen: #2a7448;
  --gruen-flaeche: #e3f2e8;
  --blau: #2457a6;
  --blau-flaeche: #e6eefa;
  --schatten: 0 1px 2px rgba(23, 33, 32, .06), 0 2px 8px rgba(23, 33, 32, .04);
  --schatten-hoch: 0 12px 40px rgba(23, 33, 32, .22);
  --schild-blau: #1f4fbf;

  --schrift: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --r-klein: 6px;
  --r: 10px;
  --r-gross: 14px;

  color-scheme: light;
  font-size: 15px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #111615;
    --flaeche: #19201f;
    --flaeche-2: #1f2726;
    --flaeche-hover: #243030;
    --tinte: #e4eae8;
    --leise: #96a39f;
    --linie: #2b3533;
    --linie-stark: #3d4a47;
    --signal: #f5be1a;
    --signal-hover: #ffd047;
    --auf-signal: #1d1903;
    --akzent-text: #f5be1a;
    --rot: #ff8a7e;
    --rot-flaeche: #3a1d1a;
    --gelb-text: #f5cf5c;
    --gelb-flaeche: #3a3014;
    --gruen: #7fd29c;
    --gruen-flaeche: #17342a;
    --blau: #8db4ff;
    --blau-flaeche: #1a2a45;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3);
    --schatten-hoch: 0 16px 48px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #111615;
  --flaeche: #19201f;
  --flaeche-2: #1f2726;
  --flaeche-hover: #243030;
  --tinte: #e4eae8;
  --leise: #96a39f;
  --linie: #2b3533;
  --linie-stark: #3d4a47;
  --signal: #f5be1a;
  --signal-hover: #ffd047;
  --auf-signal: #1d1903;
  --akzent-text: #f5be1a;
  --rot: #ff8a7e;
  --rot-flaeche: #3a1d1a;
  --gelb-text: #f5cf5c;
  --gelb-flaeche: #3a3014;
  --gruen: #7fd29c;
  --gruen-flaeche: #17342a;
  --blau: #8db4ff;
  --blau-flaeche: #1a2a45;
  --schatten: 0 1px 2px rgba(0, 0, 0, .3);
  --schatten-hoch: 0 16px 48px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
body {
  font-family: var(--schrift);
  font-variation-settings: "wdth" 100;
  background: var(--grund);
  color: var(--tinte);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
a.verweis { color: var(--tinte); font-weight: 600; text-decoration: none; }
a.verweis:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 4px; }

svg.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Grundgerüst ---------- */
.layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.seitenleiste { background: var(--flaeche); border-right: 1px solid var(--linie); }
.nav {
  padding: 20px 12px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh;
}
.marke { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; text-decoration: none; }
.marke-zeichen {
  width: 34px; height: 34px; border-radius: 9px; background: var(--tinte); color: var(--signal);
  display: grid; place-items: center; flex: none;
}
.marke-zeichen svg { width: 20px; height: 20px; stroke-width: 2; }
.marke-text { font-weight: 700; font-variation-settings: "wdth" 112; line-height: 1.15; font-size: .98rem; }
.marke-text small { display: block; font-weight: 400; color: var(--leise); font-size: .78rem; font-variation-settings: "wdth" 100; }

.nav a.punkt, .nav .bald {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-klein);
  text-decoration: none; color: var(--leise); font-weight: 500;
}
.nav a.punkt:hover { background: var(--flaeche-hover); color: var(--tinte); }
.nav a.punkt.aktiv { background: var(--flaeche-2); color: var(--tinte); font-weight: 650; box-shadow: inset 3px 0 0 var(--signal); }
.nav a.punkt.aktiv svg { color: var(--akzent-text); }
.nav .gruppe { padding: 20px 12px 6px; font-size: .78rem; color: var(--leise); font-weight: 600; }
.nav .bald { opacity: .6; cursor: default; justify-content: flex-start; }
.nav .bald em { margin-left: auto; font-style: normal; font-size: .72rem; border: 1px solid var(--linie-stark); border-radius: 99px; padding: 0 7px; }
.nav .unten { margin-top: auto; }

.haupt { display: flex; flex-direction: column; min-width: 0; }

.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(10px);
  padding: 12px 28px; border-bottom: 1px solid var(--linie);
}
.suche { flex: 1; max-width: 560px; position: relative; }
.suche svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--leise); }
.suche input {
  width: 100%; padding: 10px 44px 10px 40px; border-radius: 99px;
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.suche kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 600 .75rem var(--schrift); color: var(--leise); border: 1px solid var(--linie-stark);
  border-radius: 5px; padding: 1px 7px; background: var(--flaeche-2);
}
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--leise); }
.kopf-rechts form { margin: 0; }
.benutzername { font-weight: 500; margin-right: 6px; }

.themen-schalter { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 99px; }
.themen-schalter .mond { display: none; }
:root[data-theme="dark"] .themen-schalter .sonne { display: none; }
:root[data-theme="dark"] .themen-schalter .mond { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themen-schalter .sonne { display: none; }
  :root:not([data-theme="light"]) .themen-schalter .mond { display: block; }
}

.inhalt { padding: 28px; max-width: 1320px; width: 100%; }

/* ---------- Typografie ---------- */
h1 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.15; margin: 0;
  font-weight: 750; font-variation-settings: "wdth" 115; letter-spacing: -.01em; text-wrap: balance;
}
h2 { font-size: 1.05rem; margin: 0; font-weight: 700; font-variation-settings: "wdth" 108; }
.leise { color: var(--leise); }
.klein { font-size: .86rem; }
.zahl, .ziffern { font-variant-numeric: tabular-nums; }
.code { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 500; }

.seitenkopf { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.seitenkopf .titel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.unterzeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--leise); }

.zurueck {
  display: inline-flex; align-items: center; gap: 6px; color: var(--leise); text-decoration: none;
  font-weight: 600; font-size: .9rem; margin-bottom: 14px; padding: 4px 10px 4px 6px; margin-left: -6px; border-radius: 99px;
}
.zurueck:hover { color: var(--tinte); background: var(--flaeche-hover); }

/* ---------- Flächen ---------- */
.flaeche {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross);
  box-shadow: var(--schatten); padding: 20px 22px;
}
.flaeche + .flaeche, .spalte > .flaeche + .flaeche { margin-top: 18px; }
.flaeche-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.raster { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.raster-2-1 { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.spalte { min-width: 0; }

/* Kennzahlen als schlichte Zeile, nicht als Kachelwand */
.kennzahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten);
  margin-bottom: 18px; overflow: hidden;
}
.kennzahl { padding: 16px 20px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.kennzahl + .kennzahl { border-left: 1px solid var(--linie); }
.kennzahl:hover { background: var(--flaeche-hover); }
.kennzahl .wert { font-size: 2rem; font-weight: 750; font-variation-settings: "wdth" 115; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl .bez { color: var(--leise); font-size: .88rem; }
.kennzahl.hinweis .wert { color: var(--akzent-text); }

dl.daten { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 9px 14px; margin: 0; }
dl.daten dt { color: var(--leise); }
dl.daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Tabellen ---------- */
.tabelle-rahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); overflow-x: auto; box-shadow: var(--schatten); }
.flaeche .tabelle-rahmen { box-shadow: none; border-radius: var(--r); }
table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.liste th { font-size: .8rem; color: var(--leise); font-weight: 600; background: var(--flaeche-2); white-space: nowrap; }
table.liste th.sortierbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
table.liste th.sortierbar a:hover { color: var(--tinte); }
table.liste th.sortierbar.aktiv { color: var(--tinte); }
table.liste th.zahl.sortierbar a { justify-content: flex-end; }
.sortierpfeil { font-size: .7rem; color: var(--akzent-text); min-width: .8em; }
table.liste tbody tr { transition: background-color .12s; }
table.liste tbody tr:hover { background: var(--flaeche-hover); }
table.liste tr:last-child td { border-bottom: 0; }
table.liste td.zahl, table.liste th.zahl { text-align: right; }
table.liste .zweite-zeile { display: block; color: var(--leise); font-size: .84rem; }
.leer { padding: 32px 20px; text-align: center; color: var(--leise); }

/* ---------- Formulare ---------- */
input, select, textarea {
  font: inherit; color: inherit; background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r-klein); padding: 9px 11px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--leise); opacity: .75; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 35%, transparent); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0; accent-color: var(--signal); flex: none; }
textarea { resize: vertical; }

.formular fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.formular legend { font-weight: 700; font-variation-settings: "wdth" 108; font-size: 1.05rem; margin-bottom: 4px; padding: 0; }
.formular .erklaerung { color: var(--leise); margin: 0 0 14px; font-size: .9rem; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px 16px; }
.feld label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 5px; }
.feld .hilfe { font-size: .8rem; color: var(--leise); margin-top: 4px; }
.feld.breit { grid-column: 1 / -1; }
.feld.checkbox label { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: .95rem; margin: 0; cursor: pointer; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: var(--rot); }
.feldfehler { color: var(--rot); font-size: .84rem; margin-top: 4px; }
.feldfehler ul, ul.errorlist { margin: 0; padding: 0; list-style: none; }
.pflicht::after { content: " *"; color: var(--akzent-text); }
.formular-fuss { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.formular-fuss .rechts { margin-left: auto; }
.felder + .felder { margin-top: 14px; }

/* Kundenart als Umschalter */
.umschalter { display: inline-flex; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 99px; padding: 3px; gap: 2px; }
.umschalter label { display: block; margin: 0; cursor: pointer; }
.umschalter input { position: absolute; opacity: 0; pointer-events: none; }
.umschalter span { display: block; padding: 7px 16px; border-radius: 99px; font-weight: 600; color: var(--leise); }
.umschalter input:checked + span { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }
.umschalter input:focus-visible + span { outline: 3px solid var(--signal); }
[hidden] { display: none !important; }

.einwilligungen { display: grid; gap: 10px; }
.einwilligung {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linie);
  border-radius: var(--r); background: var(--flaeche-2); cursor: pointer;
}
.einwilligung:has(input:checked) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 9%, var(--flaeche)); }
.einwilligung strong { display: block; font-weight: 600; }
.einwilligung small { color: var(--leise); }

.filterleiste { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filterleiste input[type=search] { max-width: 380px; border-radius: 99px; padding-left: 16px; }
.filterleiste select { width: auto; border-radius: 99px; }
.filterleiste label { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--leise); cursor: pointer; }

/* ---------- Knöpfe ---------- */
.knopf, button {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte);
  padding: 8px 15px; border-radius: 99px; white-space: nowrap; text-decoration: none; line-height: 1.3;
  transition: background-color .12s, border-color .12s;
}
.knopf:hover, button:hover { background: var(--flaeche-hover); border-color: var(--leise); }
.knopf.primaer, button.primaer { background: var(--signal); border-color: var(--signal); color: var(--auf-signal); }
.knopf.primaer:hover, button.primaer:hover { background: var(--signal-hover); border-color: var(--signal-hover); }
.knopf.ruhig, button.ruhig { border-color: transparent; background: transparent; }
.knopf.ruhig:hover, button.ruhig:hover { background: var(--flaeche-hover); }
.knopf.klein, button.klein { padding: 4px 11px; font-size: .86rem; }
.knopf.warnung, button.warnung { background: var(--tinte); border-color: var(--tinte); color: var(--flaeche); }

/* ---------- Meldungen & Marken ---------- */
.meldungen { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.meldung { padding: 11px 16px; border-radius: var(--r); background: var(--blau-flaeche); color: var(--blau); font-weight: 500; }
.meldung.success { background: var(--gruen-flaeche); color: var(--gruen); }
.meldung.error { background: var(--rot-flaeche); color: var(--rot); }
.meldung.warning { background: var(--gelb-flaeche); color: var(--gelb-text); }

.marke-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 650; padding: 2px 9px; border-radius: 99px; background: var(--flaeche-2); color: var(--leise); border: 1px solid var(--linie); white-space: nowrap; }
.marke-pill.rot { background: var(--rot-flaeche); color: var(--rot); border-color: transparent; }
.marke-pill.gelb { background: var(--gelb-flaeche); color: var(--gelb-text); border-color: transparent; }
.marke-pill.gruen { background: var(--gruen-flaeche); color: var(--gruen); border-color: transparent; }
.marke-pill.blau { background: var(--blau-flaeche); color: var(--blau); border-color: transparent; }

/* Kennzeichen wie ein echtes EU-Schild */
.kennzeichen {
  display: inline-flex; align-items: stretch; white-space: nowrap; vertical-align: middle;
  border: 2px solid #1b1b1b; border-radius: 5px; background: #fff; color: #111; overflow: hidden;
  font-weight: 650; font-variation-settings: "wdth" 75; letter-spacing: .03em; font-size: .98rem; line-height: 1.5;
}
.kennzeichen::before {
  content: "D"; background: var(--schild-blau); color: #fff; font-size: .62rem; font-weight: 600;
  display: flex; align-items: flex-end; padding: 0 4px 1px; font-variation-settings: "wdth" 100;
}
.kennzeichen span { padding: 0 8px 0 7px; }
.kennzeichen.gross { font-size: 1.25rem; }
.ohne-kennzeichen { color: var(--leise); font-size: .86rem; }

/* HU-Prüfplakette in der Farbe ihres Jahres */
.hu { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.plakette {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: .68rem; font-weight: 750; font-variation-settings: "wdth" 80; color: #1a1a1a;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .14), 0 0 0 1px var(--linie);
  background: conic-gradient(rgba(0, 0, 0, .18) 0 var(--monat-winkel, 0deg), transparent 0) , var(--plakette, #ccc);
}
.plakette.jahr-0 { --plakette: #2f6fd0; color: #fff; }  /* blau  */
.plakette.jahr-1 { --plakette: #f2d21b; }               /* gelb  */
.plakette.jahr-2 { --plakette: #8b5a2b; color: #fff; }  /* braun */
.plakette.jahr-3 { --plakette: #ec9fbf; }               /* rosa  */
.plakette.jahr-4 { --plakette: #44a854; color: #fff; }  /* grün  */
.plakette.jahr-5 { --plakette: #f28c28; }               /* orange */

/* ---------- Dialog (km-Rückfrage) ---------- */
dialog.rueckfrage {
  border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 0; max-width: 460px; width: calc(100% - 32px);
  background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-hoch);
}
dialog.rueckfrage::backdrop { background: rgba(10, 14, 13, .55); }
dialog.rueckfrage[open] { animation: auftauchen .18s ease-out; }
.rueckfrage-inhalt { padding: 22px 24px 8px; display: flex; gap: 14px; }
.rueckfrage-zeichen { width: 40px; height: 40px; border-radius: 50%; background: var(--gelb-flaeche); color: var(--gelb-text); display: grid; place-items: center; flex: none; }
.rueckfrage h2 { margin-bottom: 6px; }
.rueckfrage p { margin: 0 0 6px; color: var(--leise); }
.rueckfrage-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 24px 20px; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Notizen ---------- */
.notizen textarea { background: var(--flaeche-2); min-height: 120px; }
.notizen .formular-fuss { margin-top: 10px; }

.paginierung { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 14px; color: var(--leise); }

.zeitlinie { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zeitlinie li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--linie); }
.zeitlinie li:first-child { border-left-color: var(--signal); }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.anmeldung .flaeche { width: 100%; max-width: 380px; padding: 30px; }
.anmeldung .marke { padding: 0 0 20px; }

/* ---------- Terminkalender ---------- */
.kal-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kal-navi { display: flex; align-items: center; gap: 6px; }
.kal-navi .knopf { padding: 7px 11px; }
.kal-titel { display: flex; flex-direction: column; min-width: 0; margin: 0 6px; }
.kal-titel h1 { font-size: 1.5rem; }
.kal-titel span { color: var(--leise); }
.kal-kopf .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.umschalter a { display: block; padding: 7px 16px; border-radius: 99px; font-weight: 600; color: var(--leise); text-decoration: none; }
.umschalter a.aktiv { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }

.kal-legende { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; color: var(--leise); font-size: .88rem; }
.kal-legende .person { display: inline-flex; align-items: center; gap: 7px; }
.kal-legende .punkt-farbe { width: 11px; height: 11px; border-radius: 3px; background: var(--m-farbe); }
.kal-legende .offen .punkt-farbe { background: transparent; border: 1.5px dashed var(--leise); }
.kal-legende .verwalten { margin-left: auto; }

.kal-rahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten); overflow: auto; max-height: calc(100vh - 230px); min-height: 420px; }
.kal-raster {
  --stunde: 60px;
  display: grid; grid-template-columns: 58px repeat(var(--spalten), minmax(var(--spalte-min, 130px), 1fr));
  min-width: min-content; position: relative;
}
.kal-kopfzelle {
  position: sticky; top: 0; z-index: 5; background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
  padding: 9px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.kal-kopfzelle + .kal-kopfzelle { border-left: 1px solid var(--linie); }
.kal-kopfzelle strong { font-weight: 700; font-variation-settings: "wdth" 108; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-kopfzelle span { color: var(--leise); font-size: .8rem; }
.kal-kopfzelle a { color: inherit; text-decoration: none; }
.kal-kopfzelle a:hover strong { text-decoration: underline; text-decoration-color: var(--signal); }
.kal-kopfzelle.heute strong { color: var(--akzent-text); }
.kal-kopfzelle.heute { box-shadow: inset 0 -3px 0 var(--signal); }
.kal-kopfzelle .m-zeichen { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--m-farbe); margin-right: 6px; }
.kal-ecke { position: sticky; left: 0; top: 0; z-index: 6; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); }

.kal-zeiten { position: sticky; left: 0; z-index: 4; background: var(--flaeche); border-right: 1px solid var(--linie); }
.kal-zeiten div { height: var(--stunde); font-size: .75rem; color: var(--leise); text-align: right; padding: 2px 8px 0 0; font-variant-numeric: tabular-nums; }
.kal-spalte {
  position: relative; height: calc(var(--stunden) * var(--stunde)); cursor: copy;
  background-image:
    linear-gradient(to bottom, var(--linie) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--linie) 45%, transparent) 1px, transparent 1px);
  background-size: 100% var(--stunde), 100% calc(var(--stunde) / 2);
}
.kal-spalte + .kal-spalte, .kal-zeiten + .kal-spalte { border-left: 1px solid var(--linie); }
.kal-spalte.heute { background-color: color-mix(in srgb, var(--signal) 5%, transparent); }
.kal-spalte.offen { background-color: color-mix(in srgb, var(--leise) 5%, transparent); }
.kal-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--rot); z-index: 3; pointer-events: none; }
.kal-jetzt::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); }

.kal-termin {
  --m-farbe: var(--leise);
  position: absolute; z-index: 2; box-sizing: border-box; margin: 1px 3px; overflow: hidden;
  border-radius: 7px; border: 1px solid color-mix(in srgb, var(--m-farbe) 45%, transparent);
  border-left: 4px solid var(--m-farbe);
  background: color-mix(in srgb, var(--m-farbe) 13%, var(--flaeche));
  color: var(--tinte); text-decoration: none; padding: 4px 7px; font-size: .8rem; line-height: 1.3;
  display: flex; flex-direction: column; gap: 1px; cursor: pointer; touch-action: none; user-select: none;
}
.kal-termin:hover { box-shadow: var(--schatten-hoch); z-index: 3; }
.kal-termin.offen { border-style: dashed; border-left-style: solid; background: var(--flaeche); }
.kal-termin .zeit { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--leise); font-size: .74rem; }
.kal-termin .kunde { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-termin .zeile { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-termin .zeile.leise { color: var(--leise); }
.kal-termin .unten { margin-top: auto; display: flex; gap: 4px; flex-wrap: wrap; padding-top: 2px; }
.kal-termin .marke-pill { font-size: .68rem; padding: 0 6px; }
.kal-termin.kurz { flex-direction: row; gap: 6px; align-items: center; padding-top: 1px; padding-bottom: 1px; }
.kal-termin.kurz .zeile, .kal-termin.kurz .unten { display: none; }
.kal-termin.schmal { padding: 3px 5px; }
.kal-termin.schmal .zeile, .kal-termin.schmal .unten { display: none; }
.kal-termin.schmal .kunde { white-space: normal; overflow-wrap: anywhere; font-size: .74rem; }
.kal-termin.status-abgesagt { opacity: .5; }
.kal-termin.status-abgesagt .kunde { text-decoration: line-through; }
.kal-termin.status-abgeholt, .kal-termin.status-fertig { opacity: .72; }
.kal-termin.status-angefragt { border-style: dashed; }
.kal-termin.fortsetzung { border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dotted; }
.kal-termin.geht-weiter { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dotted; }
.kal-termin.zieht { opacity: .35; }
.kal-geist { position: absolute; z-index: 10; pointer-events: none; box-shadow: var(--schatten-hoch); opacity: .95; outline: 2px solid var(--signal); }
.kal-geist .zeit { color: var(--tinte); }
.kal-hinweis { color: var(--leise); font-size: .84rem; margin-top: 10px; }

.status-leiste { display: flex; flex-wrap: wrap; gap: 6px; }
.status-leiste button { font-size: .86rem; padding: 6px 12px; }
.status-leiste button[aria-pressed="true"] { background: var(--tinte); color: var(--flaeche); border-color: var(--tinte); }

.termin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.termin-liste li a {
  display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 10px; border-radius: var(--r-klein); text-decoration: none; color: inherit;
}
.termin-liste li a:hover { background: var(--flaeche-hover); }
.termin-liste .wann { font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.25; }
.termin-liste .wann small { display: block; color: var(--leise); font-weight: 400; }
.termin-liste .was { min-width: 0; }
.termin-liste .was strong, .termin-liste .was span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termin-liste .was span { color: var(--leise); font-size: .86rem; }
.termin-liste .vergangen { opacity: .65; }
.m-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--leise); }
.m-chip::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--m-farbe, var(--leise)); }

/* Kundenauswahl mit Vorschlägen */
.auswahl { position: relative; }
.auswahl-liste {
  position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten-hoch);
  max-height: 320px; overflow: auto;
}
.auswahl-liste li { padding: 8px 10px; border-radius: var(--r-klein); cursor: pointer; display: grid; }
.auswahl-liste li small { color: var(--leise); }
.auswahl-liste li[aria-selected="true"], .auswahl-liste li:hover { background: var(--flaeche-hover); }
.gewaehlt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--signal); border-radius: var(--r-klein); background: color-mix(in srgb, var(--signal) 9%, var(--flaeche)); }
.gewaehlt strong { flex: 1; min-width: 0; }
.vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 6px; }
.vorlagen label { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--linie); border-radius: var(--r-klein); cursor: pointer; background: var(--flaeche-2); margin: 0; font-weight: 500; font-size: .92rem; }
.vorlagen label:has(input:checked) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, var(--flaeche)); }
.vorlagen label small { margin-left: auto; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dauer-anzeige { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Einstellungen ---------- */
.einstellungs-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.einstellungs-kacheln a { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--r); text-decoration: none; color: inherit; background: var(--flaeche-2); }
.einstellungs-kacheln a:hover { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--flaeche)); }
.einstellungs-kacheln span { color: var(--leise); font-size: .86rem; }

/* ---------- Fahrzeugdokumente ---------- */
.dokumente { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; margin-bottom: 16px; }
.dokument { margin: 0; display: grid; gap: 6px; min-width: 0; }
.dokument-vorschau {
  display: grid; place-items: center; aspect-ratio: 3 / 2; width: 100%; max-width: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche-2); cursor: zoom-in;
}
.dokument-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.dokument-vorschau.datei { font-weight: 750; font-size: 1.3rem; color: var(--leise); text-decoration: none; cursor: pointer; align-content: center; gap: 2px; }
.dokument-vorschau.datei small { font-size: .78rem; font-weight: 500; }
.dokument figcaption { display: grid; gap: 1px; font-size: .9rem; }
.dokument-aktionen { display: flex; gap: 12px; align-items: center; }
.dokument-aktionen form { margin: 0; }
.dokument-upload { border-top: 1px dashed var(--linie); padding-top: 14px; }
.bild-dialog { width: min(1100px, calc(100% - 32px)); }
.bild-dialog img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--r); background: var(--flaeche-2); }
.bild-dialog .kopf-zeile span { display: flex; gap: 6px; }

/* ---------- Werkstattauftrag ---------- */
.auftrag-kopf { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin-bottom: 18px; }
.auftrag-kopf .flaeche { margin: 0; }
.status-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 18px; }
.status-zeile button { font-size: .86rem; padding: 6px 12px; }
.status-zeile button[aria-pressed="true"] { background: var(--tinte); color: var(--flaeche); border-color: var(--tinte); }
.status-zeile .leise { margin-right: 4px; }

.pos-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 980px; }
.pos-tabelle th { font-size: .78rem; color: var(--leise); font-weight: 600; text-align: left; padding: 8px 6px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.pos-tabelle th.zahl, .pos-tabelle td.zahl { text-align: right; }
.pos-tabelle td { padding: 5px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.pos-tabelle input, .pos-tabelle select, .pos-tabelle textarea { padding: 6px 8px; font-size: .92rem; }
.pos-tabelle textarea { resize: vertical; min-height: 34px; field-sizing: content; }
.pos-tabelle input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
.pos-tabelle .sp-art { width: 92px; }
.pos-tabelle .sp-nr { width: 150px; }
.pos-tabelle .sp-menge { width: 82px; }
.pos-tabelle .sp-einheit { width: 84px; }
.pos-tabelle .sp-preis { width: 104px; }
.pos-tabelle .sp-rabatt { width: 82px; }
.pos-tabelle .sp-betrag { width: 104px; }
.pos-tabelle .sp-ok { width: 34px; text-align: center; }
.pos-tabelle .sp-aktion { width: 104px; white-space: nowrap; }
.pos-tabelle .betrag { font-weight: 650; font-variant-numeric: tabular-nums; padding-top: 12px; display: block; white-space: nowrap; }
.pos-tabelle .sp-ok input { margin-top: 9px; }
.pos .art-pill { display: inline-flex; margin-top: 7px; font-size: .74rem; font-weight: 650; padding: 1px 8px; border-radius: 99px; background: var(--flaeche-2); color: var(--leise); border: 1px solid var(--linie); white-space: nowrap; }
.pos[data-art="arbeit"] .art-pill { background: var(--blau-flaeche); color: var(--blau); border-color: transparent; }
.pos[data-art="teil"] .art-pill { background: var(--gruen-flaeche); color: var(--gruen); border-color: transparent; }
.pos[data-art="pauschale"] .art-pill { background: var(--gelb-flaeche); color: var(--gelb-text); border-color: transparent; }
.pos .quelle { display: block; font-size: .74rem; color: var(--leise); margin-top: 3px; min-height: 1em; }
.pos .quelle.fehler { color: var(--rot); }
.pos .aus-paket { display: block; font-size: .72rem; color: var(--leise); margin-top: 2px; }
.pos .ausblenden { visibility: hidden; }
.pos[data-art="text"] textarea { font-style: italic; background: var(--flaeche-2); }
.pos[data-art="leer"] td { padding-top: 9px; padding-bottom: 9px; }
.pos[data-art="leer"] .leer-markierung { display: block; border-top: 1px dashed var(--linie-stark); margin-top: 9px; }
.pos[data-art="zwischensumme"] td { background: var(--flaeche-2); }
.pos[data-art="zwischensumme"] .zs-text { display: block; font-weight: 700; padding-top: 9px; text-align: right; }
.pos.erledigt-zeile { background: color-mix(in srgb, var(--gruen-flaeche) 55%, transparent); }
.pos.geloescht { display: none; }
.pos .zeilenknopf { padding: 5px 8px; border-radius: 6px; }
.pos .zeilenknopf svg { width: 15px; height: 15px; }
.pos-tabelle tr.pos:hover td { background-color: color-mix(in srgb, var(--flaeche-hover) 60%, transparent); }

.pos-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 0 4px; }
.pos-leiste .trenner { width: 1px; height: 26px; background: var(--linie); margin: 0 4px; }
.pos-leiste select { width: auto; max-width: 300px; border-radius: 99px; }

.summen { margin-left: auto; width: min(380px, 100%); display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; padding-top: 16px; font-variant-numeric: tabular-nums; }
.summen dt { color: var(--leise); }
.summen dd { margin: 0; text-align: right; }
.summen .gesamt { font-size: 1.25rem; font-weight: 750; font-variation-settings: "wdth" 110; color: var(--tinte); border-top: 2px solid var(--tinte); padding-top: 8px; }
.summen .rabatt { color: var(--gruen); }
.summen-raster { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.summen-raster .hinweis { flex: 1; min-width: 220px; padding-top: 16px; color: var(--leise); font-size: .88rem; }

.speichern-leiste {
  position: sticky; bottom: 0; z-index: 15; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 18px -28px -28px; padding: 12px 28px calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--grund) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--linie);
}
.speichern-leiste .ungespeichert { color: var(--gelb-text); font-weight: 600; }
.speichern-leiste .rechts { margin-left: auto; font-variant-numeric: tabular-nums; }
.speichern-leiste .rechts strong { font-size: 1.1rem; }

.treffer-liste { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); box-shadow: var(--schatten-hoch); position: absolute; z-index: 20; min-width: 360px; }
.treffer-liste li { padding: 7px 9px; border-radius: 6px; cursor: pointer; display: grid; }
.treffer-liste li:hover { background: var(--flaeche-hover); }
.treffer-liste small { color: var(--leise); }
.zelle-rel { position: relative; }

dialog.auswahl-dialog { border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 0; width: min(640px, calc(100% - 32px)); background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-hoch); }
dialog.auswahl-dialog::backdrop { background: rgba(10, 14, 13, .5); }
.auswahl-dialog .kopf-zeile { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
.auswahl-dialog .inhalt-zeile { padding: 8px 20px 20px; display: grid; gap: 10px; }
.auswahl-dialog ul { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; display: grid; gap: 4px; }
.auswahl-dialog li button { width: 100%; justify-content: space-between; text-align: left; border-radius: var(--r-klein); font-weight: 500; white-space: normal; }
.auswahl-dialog li small { color: var(--leise); font-weight: 400; }

@media (max-width: 960px) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl:nth-child(3) { border-left: 0; }
  .kennzahl:nth-child(n+3) { border-top: 1px solid var(--linie); }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: sticky; top: 0; z-index: 30; border-right: 0; border-bottom: 1px solid var(--linie); min-width: 0; }
  .nav { position: static; height: auto; flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; }
  .marke, .nav .gruppe, .nav .bald { display: none; }
  .nav a.punkt { white-space: nowrap; padding: 8px 12px; }
  .nav a.punkt.aktiv { box-shadow: inset 0 -3px 0 var(--signal); }
  .nav .unten { margin-top: 0; }
  .kopf { position: static; padding: 10px 16px; }
  .kal-raster { --spalte-min: 150px; }
  .speichern-leiste { margin: 18px -16px -18px; padding-left: 16px; padding-right: 16px; }
  .kal-rahmen { max-height: none; }
  .termin-liste li a { grid-template-columns: 78px minmax(0, 1fr); }
  .termin-liste li a > :last-child { grid-column: 2; }
  .suche kbd, .benutzername { display: none; }
  .raster-2-1 { grid-template-columns: minmax(0, 1fr); }
  .inhalt { padding: 18px 16px; }
  .flaeche { padding: 16px; }
}

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

/* Abgerechneter Auftrag: Formular nur lesen */
fieldset.gesperrt-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.gesperrt-rahmen[disabled] .sp-aktion, fieldset.gesperrt-rahmen[disabled] [data-entfernen] { visibility: hidden; }
fieldset.gesperrt-rahmen[disabled] input, fieldset.gesperrt-rahmen[disabled] select, fieldset.gesperrt-rahmen[disabled] textarea { opacity: .85; cursor: default; }

/* Reiter (z. B. Teile | Pakete) */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin: -4px 0 18px; overflow-x: auto; }
.reiter a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-weight: 650; color: var(--leise); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter a:hover { color: var(--tinte); }
.reiter a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--signal); }
.reiter .anzahl { font-size: .75rem; font-weight: 650; padding: 1px 8px; border-radius: 99px; background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--leise); }

/* Lagerstatus je Teil im Werkstattauftrag */
.lagerinfo { display: block; margin-top: 3px; font-size: .72rem; font-weight: 650; width: fit-content; padding: 1px 7px; border-radius: 99px; background: var(--flaeche-2); color: var(--leise); }
.lagerinfo.verfuegbar { background: var(--gruen-flaeche); color: var(--gruen); }
.lagerinfo.fehlt { background: var(--rot-flaeche); color: var(--rot); }
.lagerinfo.bestellt, .lagerinfo.eingetroffen { background: var(--gelb-flaeche); color: var(--gelb-text); }

/* ---------- Fahrzeughandel ---------- */
.handel-foto { display: grid; place-items: center; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--flaeche-2, rgba(0,0,0,.05)); }
.handel-foto.leer svg { width: 22px; height: 22px; opacity: .35; }
.handel-kopf { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 18px; align-items: start; }
.handel-kopf:not(:has(.handel-bild)) { grid-template-columns: 1fr; }
.handel-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.kalkulation strong.rot { color: var(--rot); }
@media (max-width: 720px) { .handel-kopf { grid-template-columns: 1fr; } }
.probefahrt { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; }
.probefahrt-ende { display: flex; gap: 6px; }
.probefahrt-ende input { width: 90px; }
.verkauf-vorschau { position: sticky; top: 16px; }
.vorschau-fehler { margin: 10px 0 0; padding-left: 18px; color: var(--rot); }
.verkauf-positionen input { width: 100%; }

/* ---------- Benachrichtigungen ---------- */
.rueckfrage h2 { margin: 0 0 10px; }
.rueckfrage-kanaele { margin: 6px 0 12px; padding-left: 20px; }
.rueckfrage-dialog { max-width: 620px; }
.nachrichten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nachrichten-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--linie, rgba(0,0,0,.08)); }
.nachrichten-liste li.fehler .was strong { color: var(--rot); }
.nachrichten-liste li.eingehend { background: var(--blau-flaeche); border-radius: var(--r); padding: 8px 10px; }
.nachrichten-liste .was { display: grid; gap: 2px; }
.nachrichten-liste .was span { color: var(--leise); overflow-wrap: anywhere; }
.flaeche.hat-fehler { box-shadow: 0 0 0 2px var(--rot) inset; }
.kal-erinnerungen { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--r); background: var(--gelb-flaeche); }
.kal-erinnerungen-tag { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.erinnerung-chip { padding: 3px 10px; border-radius: 99px; background: var(--flaeche, #fff); text-decoration: none; font-size: .9em; }
.erinnerung-chip.faellig { font-weight: 700; }
.kva-eintragen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kva-eintragen input { min-width: 200px; }

/* Nachrichten */
.nav .zaehler { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--signal); color: #fff; font-size: .78rem; font-weight: 700; text-align: center; }
table.liste tr.ungelesen td { font-weight: 600; }
table.liste tr.fehler td:first-child { box-shadow: inset 3px 0 0 var(--rot); }
.nachricht-text { white-space: normal; }
.kva-kasten .flaeche-kopf, #nachrichten .flaeche-kopf { flex-wrap: wrap; gap: 6px 10px; }