/* jetzt IT: Erscheinungsbild nach Brand Manual 2025 und Präsentationsvorlage v1.2.
   Liegt über style.css. Orange #F79422 für Flächen, Linien und große Schrift; kleine orange Schrift
   ist dunkler (--orange-text), weil #F79422 auf Weiß zu schwach ist. Knöpfe: Orange mit dunkler Schrift. */

@font-face { font-family: 'Lato'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Lato-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/Lato-Bold.ttf') format('truetype'); }

:root {
  --text: #4d4d4d;
  --titel: #262626;
  --leise: #73777b;
  --grund: #ffffff;
  --flaeche: #f5f6f7;
  --akzent: #f79422;
  --akzent-dunkel: #e58224;
  --akzent-text: #262626;
  --orange-text: #c2410c;
  --orange-hauch: #fff6ec;
  --fehler: #c62828;
  --rand: #e6e7e9;
  --schatten: 0 2px 6px rgb(0 0 0 / 0.1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #d6d6d6;
    --titel: #ffffff;
    --leise: #9a9ea2;
    --grund: #262626;
    --flaeche: #303030;
    --orange-text: #f79422;
    --orange-hauch: #3a2d1f;
    --fehler: #ff8a80;
    --rand: #3a3a3a;
    --schatten: 0 2px 8px rgb(0 0 0 / 0.4);
  }
}

body { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.45; }
h1, h2, h3 { color: var(--titel); font-weight: 700; letter-spacing: 0; }
h1::after { content: none; }
a, .zahnrad.aktiv, .filter-name[aria-pressed='true'], .filter-privat .filter-name[aria-pressed='true'],
body.drin .filter-knoepfe button.zweit, .stift:hover, .stift:focus-visible, body.drin .d-knoepfe #d-timer { color: var(--orange-text); }

/* Knöpfe: Orange mit dunkler Schrift, Zweitknöpfe mit Rahmen in Orange Sekundär */
.knopf, button { border-radius: 4px; font-weight: 700; color: var(--akzent-text); }
@media (hover: hover) {
  button:not(:disabled):hover, .knopf:hover { filter: none; background-color: var(--akzent-dunkel); }
}
button.zweit { color: var(--orange-text); box-shadow: inset 0 0 0 1px var(--akzent-dunkel); }
@media (hover: hover) {
  button.zweit:not(:disabled):hover { background: var(--orange-hauch); }
}
button.zweit.gefahr, .aktionen .gefahr { color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
/* Auswahlfelder wie Eingabefelder: gleiche Schrift, Höhe, Rahmen, Pfeil rechts (sonst Systemschrift und kleiner) */
select { padding: 0.6rem 2.2rem 0.6rem 0.6rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--grund) var(--pfeil) no-repeat right 0.8rem center / 0.75rem; color: var(--text); font: inherit; appearance: none; -webkit-appearance: none; }
input, select, textarea { border-radius: 4px !important; border-color: var(--rand) !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent) !important; outline-offset: 0 !important; }

/* Kopfleiste: hellgrau, Icon links, Kontext rechts, orange Linie darunter */
.kopf { position: relative; gap: 0.6rem; margin: -2rem -16px 1.25rem; padding: 0.7rem 16px; background: var(--flaeche); border-bottom: 3px solid var(--akzent); }
/* iPhone: Die Seite reicht unter Statusleiste und Notch (viewport-fit=cover). Die Kopfleiste füllt den Bereich
   unter der Statusleiste mit ihrer Fläche, sonst zeichnet iOS dort den Inhalt weich und er wirkt unscharf. */
@supports (padding: env(safe-area-inset-top)) {
  main { padding-top: calc(2rem + env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .kopf {
    margin-top: calc(-2rem - env(safe-area-inset-top));
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
    padding: calc(0.7rem + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0.7rem max(16px, env(safe-area-inset-left));
  }
}
.kopf h1 { margin: 0; font-size: 1.15rem; }
.logo-icon { flex: none; width: 28px; height: 32px; }
.kopf-info { margin-left: auto; color: var(--leise); font-size: 0.85rem; }
/* Freier Timer im Kopf (odoo:834): leiser Knopf mit Uhr neben dem Erfassen-Feld, am Telefon nur die Uhr */
body.drin button.kopf-timer {
  display: inline-flex; align-items: center; gap: 0.35rem; width: auto; height: 2.25rem; margin: 0; padding: 0 0.6rem;
  border-radius: 4px; background: none; box-shadow: inset 0 0 0 1px var(--rand); color: var(--text); font-size: 0.85rem; font-weight: 400;
}
body.drin button.kopf-timer:not(:disabled):hover { background: none; box-shadow: inset 0 0 0 1px var(--akzent); color: var(--titel); }
body.drin button.kopf-timer[hidden], body:not(.drin) .kopf-timer { display: none; }
button.kopf-timer svg { width: 18px; height: 18px; fill: none; stroke: var(--akzent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) { body.drin button.kopf-timer { width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; } button.kopf-timer span { display: none; } }
.zahnrad, .plus { margin-bottom: 0; }
.zahnrad { color: var(--leise); }
body:not(.drin) .kopf { display: none; }

/* Seitenkopf wie ein Folientitel: Kennzeile in Orange, Titel fett, Balken links */
.seitenkopf { margin: 0 0 1rem; padding: 0.1rem 0 0.1rem 0.8rem; border-left: 4px solid var(--akzent); }
.kennzeile { margin: 0; color: var(--orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* Vorführung (odoo:850): schmaler Hinweis unter dem Kopf, damit niemand die Daten für echt hält */
.vorfuehrung-band { margin: 0 0 0.75rem; padding: 0.25rem 0.6rem; border-radius: 4px; background: var(--orange-hauch); color: var(--orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.seitentitel { margin: 0.1rem 0 0; font-size: 1.45rem; line-height: 1.2; }

/* Reiter: Text, aktiv orange unterstrichen */
.tabs { gap: 1.1rem; padding: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--rand); }
.tabs button { flex: 0 0 auto; padding: 0.45rem 0; border-radius: 0; background: none; color: var(--leise); font-weight: 400; box-shadow: none; }
.tabs button[aria-selected='true'] { background: none; color: var(--titel); font-weight: 700; box-shadow: inset 0 -3px 0 var(--akzent); }
@media (max-width: 999px) {
  body.drin .tabs button { flex: 0 0 auto; padding: 0.45rem 0; }
}

/* Suche und Filter */
.suche { border-radius: 4px; background: var(--flaeche); }
.filter { border-radius: 4px; }
.hinweis { border-radius: 4px; background: var(--orange-hauch); border-left: 4px solid var(--akzent); }

/* Aufgabenliste: Abschnitte als Kennzeile, Zeilen mit Haarlinie, Abhaken im orangen Quadrat */
.gruppe h2, body.drin .gruppe h2 { margin: 0 0 0.2rem; padding: 0 0.25rem; color: var(--orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.gruppe h2 span { color: var(--leise); }
/* Gruppenkopf: Name links, Zahl rechts, daneben das Plus zum schnellen Anlegen in dieser Gruppe */
.gruppe h2, body.drin .gruppe h2 { justify-content: flex-start; align-items: center; gap: 0.5rem; }
.gruppe h2 span { margin-left: auto; }
.schnell-zeile input { width: 100%; margin: 0; }
.aufgaben li.schnell-zeile, body.drin .aufgaben li.schnell-zeile { display: block; padding: 0.5rem 0.4rem; }

/* Symbole (Bearbeiten, Erledigt, Löschen, Plus): Strich-Icons ohne Fläche */
button.symbol, body.drin button.symbol { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0; padding: 0; border-radius: 4px; background: none; box-shadow: none; color: var(--leise); }
button.symbol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.drin button.symbol:not(:disabled):hover { background: var(--flaeche); color: var(--titel); }
body.drin button.symbol.gefahr:not(:disabled):hover { color: var(--fehler); }
.gruppe h2 button.symbol { width: 1.6rem; height: 1.6rem; margin: -0.3rem -0.3rem -0.3rem 0; color: var(--orange-text); }
.gruppe h2 button.symbol svg { width: 16px; height: 16px; stroke-width: 2.2; }
.symbole { display: none; }
@media (hover: hover) {
  .aufgaben li .mehr, body.drin .aufgaben li .mehr { display: none; }
  .aufgaben li .symbole { display: flex; gap: 0.1rem; align-self: center; opacity: 0; }
  .aufgaben li:hover .symbole, .aufgaben li:focus-within .symbole { opacity: 1; }
}
.gruppe.ueberfaellig h2 { color: var(--fehler); }
.aufgaben, body.drin .aufgaben { border-radius: 0; background: none; }
.aufgaben li, .aufgaben li:last-child, body.drin .aufgaben li, body.drin .aufgaben li:last-child { padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--rand); align-items: center; }
.aufgaben a { color: var(--titel); font-weight: 400; }
.meta { color: var(--leise); }
.meta .frist.spaet { color: var(--fehler); font-weight: 700; }
.chip, body.drin .chip { padding: 0 0.35rem; border-radius: 2px; background: var(--flaeche); color: var(--orange-text); font-weight: 700; }
.chip.pruefen-chip, body.drin .chip.pruefen-chip { background: var(--flaeche); color: var(--leise); font-weight: 400; }
.haken { width: 1.15rem; height: 1.15rem; margin-top: 0; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--akzent); }
.haken::after { width: 0.28rem; height: 0.55rem; border-color: var(--akzent-text); border-width: 0 2px 2px 0; }
@media (hover: hover) {
  .haken:hover { background: var(--orange-hauch); box-shadow: inset 0 0 0 2px var(--akzent); }
}
@media (hover: hover) {
  .aufgaben li.klickbar:hover, body.drin .aufgaben li.klickbar:hover { background: var(--flaeche); }
}
.aufgaben li.klickbar.aktiv, .aufgaben li.klickbar.aktiv:hover, body.drin .aufgaben li.klickbar.aktiv, body.drin .aufgaben li.klickbar.aktiv:hover { background: var(--orange-hauch); box-shadow: inset 3px 0 0 var(--akzent); }
.timer-leiste { border-radius: 4px; background: var(--orange-hauch); border-left: 4px solid var(--akzent); }
.timer-punkt { background: var(--akzent); }

/* Flächen: Karten in Hellgrau wie in der Vorlage, ohne große Rundungen */
.block { border-radius: 4px; background: var(--flaeche); }
.block h2 { font-size: 1.1rem; }
form { border-radius: 4px; }
.vorschau, .ergebnis, .treffer-box, .neues-token { border-radius: 4px; }

/* Ergebnisse (Entwurf angelegt): Hinweisfläche mit orangem Balken */
.tag-summe, body.drin .tag-summe { padding: 0.2rem 0.25rem; border-radius: 0; background: none; color: var(--orange-text); font-weight: 700; }
#abr-ergebnis, #ang-ergebnis { padding: 0.8rem 1rem; border-left: 4px solid var(--akzent); background: var(--orange-hauch); color: var(--text); font-weight: 400; }

/* Ein Muster für alle Listen (Aufgaben, Tickets, Kunden, Abschluss, Abrechnung):
   Summe im Seitenkopf, Gruppen als orange Kennzeile, Zeilen mit Haarlinie, Zahl rechts fett, Aktionen als orange Links */
.tag-fertig > summary, .abr-kopf h2, .abr-titel, .kunden-gruppe {
  margin: 0; padding: 0 0.25rem; color: var(--orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.tag-fertig { margin-top: 1.25rem; }
.aufgaben .zahl { flex: none; margin-left: auto; color: var(--titel); font-weight: 700; white-space: nowrap; }
.tag-fertig > summary { padding-top: 0.2rem; padding-bottom: 0.2rem; }

/* Zeilen mit Knöpfen (Abschluss): Links in Orange statt Rahmenknöpfe */
.tag-zeile .knoepfe { flex-direction: row; flex-wrap: wrap; gap: 0.2rem 1rem; }
.tag-zeile .knoepfe { flex-basis: 100%; }
.tag-zeile .knoepfe button.zweit { padding: 0.15rem 0; background: none; box-shadow: none; color: var(--orange-text); font-size: 0.85rem; }
/* Dasselbe für Aufträge und Geräte im Lager */
body.drin .auf-position .knoepfe button.zweit, body.drin .lager-geraet .lager-asset-feld button.zweit { padding: 0.15rem 0; background: none; box-shadow: none; color: var(--orange-text); font-size: 0.85rem; }
.auf-position .knoepfe button.zweit:disabled { color: var(--leise); }
.aufgaben li.tag-zeile { flex-wrap: wrap; }
.aufgaben li.tag-zeile { row-gap: 0.2rem; }
.tag-zeile > div:first-child { flex: 1 1 100%; min-width: 0; }
.tag-zeile.fertig a { color: var(--titel); }
/* Wartet auf dich, wigo (odoo:481): Titel öffnet die Aufgabe; Abnahmen eingerückt unter ihrer Sammelzeile */
.tag-zeile button.wartet-titel, body.drin .tag-zeile button.wartet-titel, body.drin .tag-zeile button.wartet-titel:not(:disabled):hover { display: block; min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--titel); font: inherit; font-weight: 400; text-align: left; cursor: pointer; }
.tag-zeile button.wartet-titel:hover { text-decoration: underline; }
.aufgaben li.abnahme-zeile, body.drin .aufgaben li.abnahme-zeile.abnahme-zeile { padding-left: 1.4rem; }
.tag-zeile .meta.ohne-zeit { color: var(--orange-text); }
.tag-zeile .meta.ohne-zeit.frei { color: var(--leise); }
.tag-zeile form { flex-basis: 100%; margin-top: 0.5rem; }

/* Unterreiter im Lager: wie die Reiter oben, nur kleiner */
body.drin .lager-leiste button.zweit, body.drin .lager-leiste button.zweit:not(:disabled):hover { padding: 0.35rem 0; border-radius: 0; background: none; box-shadow: none; color: var(--leise); font-weight: 400; }
body.drin .lager-leiste button.zweit[aria-pressed='true'], body.drin .lager-leiste button.zweit[aria-pressed='true']:hover { background: none; color: var(--titel); font-weight: 700; box-shadow: inset 0 -3px 0 var(--akzent); }
body.drin .lager-leiste button.zweit:not([aria-pressed='true']):hover { color: var(--titel); }

/* Unterreiter einer Seite (Buchhaltung, Nils am 2026-11-08): leise Textreiter wie oben, der aktive mit oranger Unterstreichung (docs/design.md 2) */
.unterreiter { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 0.75rem; border-bottom: 1px solid var(--rand); }
body.drin .unterreiter button, body.drin .unterreiter button:not(:disabled):hover { margin: 0; padding: 0.35rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--leise); font-weight: 400; }
body.drin .unterreiter button[aria-pressed='true'], body.drin .unterreiter button[aria-pressed='true']:hover { color: var(--titel); font-weight: 700; box-shadow: inset 0 -3px 0 var(--akzent); }
body.drin .unterreiter button:not([aria-pressed='true']):hover { color: var(--titel); }

/* Umschalter „Meine / Alle“ */
.umschalter button[aria-pressed='true'] { background: var(--akzent); color: var(--akzent-text); }

/* Kunden: Monatswahl als leise Leiste, Kunden wie Aufgabenzeilen */
.monat-wahl { justify-content: flex-start; gap: 0.5rem; margin: 0 0 0.75rem; }
body.drin .monat-wahl button.zweit, body.drin .monat-wahl button.zweit:not(:disabled):hover { min-width: 2rem; padding: 0.2rem 0.4rem; background: none; box-shadow: none; color: var(--orange-text); font-size: 1.1rem; }
.monat-wahl button.zweit:disabled { color: var(--leise); opacity: 0.4; cursor: default; }
.monat-wahl strong { color: var(--leise); font-size: 0.9rem; font-weight: 400; }
.kunde-stand { border-radius: 2px; background: var(--orange-hauch); }

/* Abrechnung: Kunde als Kennzeile mit Summe und Knopf, Zeiten als Zeilen */
.abr-kunde, body.drin .abr-kunde, body.drin .block.abr-kunde { margin: 0 0 1.5rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.abr-kopf { margin: 0 0 0.2rem; padding: 0; background: none; align-items: center; }
.abr-kundensumme { color: var(--titel); font-weight: 700; }
.abr-kopf .abr-knopf { padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.abr-kunde > a.meta { padding: 0 0.25rem 0.2rem; }
.abr-liste li, .abr-liste li:first-child { padding: 0.7rem 0.4rem; border-top: 0; border-bottom: 1px solid var(--rand); }
.abr-text strong, .abr-liste > li > strong { color: var(--titel); font-weight: 400; }
.abr-zahl { color: var(--titel); font-weight: 700; font-size: 0.9rem; }
.abr-waren { padding: 0; }
.abr-titel { margin-top: 2rem; }
.abr-dropdown { border-color: var(--rand); border-radius: 4px; }
/* Vorschlagslisten: beim Überfahren hell wie die Zeilen, nicht orange wie ein Knopf */
.abr-dropdown button:not(:disabled):hover { background-color: var(--flaeche); color: var(--text); }

/* Angebot: nummerierte Schritte wie „Kette in Schritten“ */
.schritt { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-right: 0.4rem; background: var(--akzent); color: var(--akzent-text); font-size: 0.95rem; box-shadow: var(--schatten); vertical-align: 0.05rem; }
#ang-start > h2 { display: flex; align-items: center; }
.ang-karte { border-radius: 4px; background: var(--grund); box-shadow: var(--schatten); }
.ang-pille { border-radius: 2px; }
.ang-pille.ki { color: var(--orange-text); box-shadow: inset 0 0 0 1px var(--akzent-dunkel); }
.ang-netto { color: var(--orange-text); font-weight: 700; }
.ang-abschnitt { color: var(--titel); font-weight: 700; }

/* Detail (Telefon als Fenster, Rechner rechts): Steckbrief-Karten */
.neu { border-radius: 6px; }
.d-block { border-radius: 4px; }
.d-block h3, body.drin .d-block h3 { color: var(--orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#d-titel { font-size: 1.3rem; }

/* Neue Aufgabe: oranges Quadrat unten rechts */
.fab { width: 3.4rem; height: 3.4rem; padding: 0; border-radius: 6px; background: var(--akzent); color: var(--akzent-text); font-size: 1.9rem; font-weight: 400; line-height: 1; box-shadow: var(--schatten); }
.plus { border-radius: 4px; background: var(--akzent); color: var(--akzent-text); }
.meldung { border-radius: 4px; background: #262626; color: #fff; border-left: 4px solid var(--akzent); }
.meldung .zweit { color: #fff; box-shadow: inset 0 0 0 1px #fff; }

/* Anmelden: wie die Titelfolie, mit Logo und orangen Dreiecken rechts unten */
body:not(.drin) {
  min-height: 100vh;
  background:
    linear-gradient(to top left, #e58224 0 22%, transparent 22.1%) no-repeat,
    linear-gradient(to top left, #f79422 0 30%, transparent 30.1%) no-repeat,
    linear-gradient(to top left, #f6ae55 0 38%, transparent 38.1%) no-repeat,
    var(--grund);
  background-position: right bottom;
  background-size: 100% 55vh;
}
#anmelden { padding-top: 2.5rem; }
.logo-voll { display: block; width: 240px; height: auto; margin: 0 0 2.5rem; }
#anmelden .kennzeile { margin-bottom: 0.2rem; }
.anmelden-titel { margin: 0; font-size: 2.6rem; line-height: 1.1; }
.anmelden-linie { width: 7rem; height: 3px; margin: 1rem 0 1.25rem; background: var(--akzent); }
#anmelden form { background: var(--flaeche); }
@media (prefers-color-scheme: dark) {
  /* Auf dunklem Grund nie das volle Logo (Brand Manual, Seite 3) */
  .logo-voll { content: url('/marke/logo-icon.png'); width: 64px; }
}

/* Am Rechner: Kopfleiste über die ganze Breite, darunter Navigation, Liste, Detail */
@media (min-width: 1000px) {
  body.drin main { display: flex; flex-direction: column; }
  body.drin .kopf { flex: none; margin: 0; padding: 0.6rem 1.25rem; }
  body.drin #drin { flex: 1; height: auto; min-height: 0; }
  body.drin .spalte-links { padding: 1rem 0; background: var(--grund); border-right: 1px solid var(--rand); }
  body.drin .spalte-links .tabs { gap: 0; border-bottom: 0; }
  body.drin .spalte-links .tabs button { padding: 0.5rem 1.1rem; border-left: 4px solid transparent; }
  /* Hover in der Navigation: hellgrau statt der orangen Knopffläche */
  body.drin .spalte-links .tabs button:not(:disabled):hover { background: var(--flaeche); color: var(--titel); }
  body.drin .spalte-links .tabs button[aria-selected='true'], body.drin .tabs button[aria-selected='true'] { border-left-color: var(--akzent); background: var(--flaeche); box-shadow: none; }
  body.drin .spalte-links .filter { padding: 0.4rem 1.1rem; }
  body.drin .filter > summary { color: var(--orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
  body.drin .spalte-links .timer-leiste { margin: auto 0.75rem 0; background: var(--orange-hauch); box-shadow: none; border-left: 4px solid var(--akzent); }
  body.drin .spalte-links .timer-leiste button.klein { background: var(--akzent); color: var(--akzent-text); }
  /* Gleicher Innenabstand auf allen Seiten, ob mit Detailspalte (Aufgaben, Abschluss) oder ohne */
  body.drin #drin .spalte-mitte { padding: 1.5rem 2rem 3rem; border-right: 1px solid var(--rand); }
  body.drin #drin:is([data-seite='uebersicht'], [data-seite='tickets'], [data-seite='kunden'], [data-seite='abrechnung'], [data-seite='buchhaltung'], [data-seite='angebot'], [data-seite='auftraege'], [data-seite='lager'], [data-seite='einstellungen']) .spalte-mitte { border-right: 0; }
  body.drin .spalte-rechts { background: var(--grund); }
  body.drin .suche { background: var(--flaeche); box-shadow: none; }
  body.drin .block { margin: 0 0 1rem; padding: 1.1rem 1.25rem; border-top: 0; border-radius: 4px; background: var(--flaeche); }
  body.drin .block:first-child { padding-top: 1.1rem; }
  body.drin .block.abr-kunde { padding: 0; background: none; border-radius: 0; }
  /* Detail als Steckbrief: graue Karten mit leichtem Schatten */
  body.drin .spalte-rechts .d-block { margin-top: 1rem; padding: 0.9rem 1rem; border-top: 0; background: var(--flaeche); box-shadow: var(--schatten); }
  body.drin .meldung { left: 16rem; }
}

/* Kunden (Stufe 8): Liste aller Kunden und Kundenseite; Aktionen als orange Textlinks */
button.textlink, a.textlink, body.drin button.textlink { min-width: 0; margin: 0; padding: 0.15rem 0; border: 0; background: none; box-shadow: none; color: var(--orange-text); font-size: 0.85rem; font-weight: 400; text-decoration: none; cursor: pointer; }
/* Beim Überfahren nur unterstreichen: Schrift, Größe und Farbe bleiben, nur der Hintergrund normaler Knöpfe wird abgestellt */
button.textlink:not(:disabled):hover, body.drin button.textlink:not(:disabled):hover { background: none; filter: none; text-decoration: underline; }
button.textlink:hover, a.textlink:hover { text-decoration: underline; }
button.textlink.gefahr, body.drin button.textlink.gefahr { color: var(--fehler); }
/* Kunden in Layout A (Nils am 2026-11-02): Filterleiste, Gruppen der Kundenseite aus gruppe() */
#kunden-wurzel .filterleiste .suche, body.drin #kunden-wurzel .filterleiste .suche { flex: 1 1 14rem; }
.kunden-leiste .umschalter { flex: none; margin: 0; }
.kunden-leiste > button.klein { flex: none; margin: 0 0 0 auto; }
.kunde-zeile .zeile-kopf { cursor: pointer; }
.kunden-zurueck { margin: 0 0 1.25rem; }
.kunden-seite > .gruppe { margin: 0 0 1.75rem; }
.kunden-seite .gruppe > .zeile-aktionen { margin: 0 0 0.4rem; padding: 0 0.25rem; }
.kunden-monat { margin: 0 0 0.4rem 0.25rem; }
.kunden-monat button.textlink, body.drin .kunden-monat button.textlink { padding: 0.1rem 0.5rem; font-size: 1.1rem; font-weight: 700; }
.stamm { margin: 0; padding: 0; list-style: none; }
.stamm-zeile { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 0.75rem; padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--rand); color: var(--titel); overflow-wrap: anywhere; }
.stamm-zeile .meta { margin: 0; }
.stamm-zeile a { color: var(--titel); }
.kunden-notiz { margin: 0.6rem 0.4rem 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--akzent); background: var(--orange-hauch); color: var(--text); white-space: pre-line; }

/* Tablet (odoo:747). Hochkant 768 bis 999: Reiter oben, darunter Liste und Detail nebeneinander.
   Quer 1000 bis 1279: schmale Seitenleiste zum Wegklappen, Liste und Detail teilen sich den Rest. */
#nav-knopf { display: none; }
@media (min-width: 768px) and (max-width: 999px) {
  body.drin { overflow: hidden; }
  body.drin main { display: flex; flex-direction: column; max-width: none; height: 100vh; height: 100dvh; margin: 0; padding: 0; }
  body.drin .kopf { flex: none; margin: 0; padding: calc(0.6rem + env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) 0.6rem max(1.25rem, env(safe-area-inset-left, 0px)); }
  body.drin #drin { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  body.drin #drin > .tabs { grid-column: 1 / -1; margin: 0; padding: 0 1.25rem; }
  body.drin .spalte-mitte, body.drin .spalte-rechts { min-width: 0; min-height: 0; overflow-y: auto; }
  body.drin #drin .spalte-mitte { padding: 1.25rem 1.25rem 3rem; border-right: 1px solid var(--rand); }
  body.drin .spalte-rechts { display: flex; flex-direction: column; padding: 1.25rem; background: var(--grund); }
  body.drin .plus { display: inline-block; }
  body.drin .fab { display: none; }
  body.drin .meldung { left: 1.25rem; right: auto; bottom: 1rem; width: 26rem; max-width: calc(100vw - 2.5rem); }
  .detail-leer { margin: 3rem 1rem; text-align: center; }
  .spalte-rechts .detail { position: static; width: auto; max-width: 46rem; max-height: none; margin: 0; padding: 0; overflow: visible; border-radius: 0; background: none; }
  .spalte-rechts .detail .neu-kopf { margin-bottom: 0.4rem; }
  .spalte-rechts .d-block { margin-top: 1rem; padding: 0.9rem 1rem; border-top: 0; background: var(--flaeche); box-shadow: var(--schatten); }
  /* Seiten ohne Detail: der Inhalt bekommt die ganze Breite */
  body.drin #drin:is([data-seite='uebersicht'], [data-seite='tickets'], [data-seite='kunden'], [data-seite='abrechnung'], [data-seite='buchhaltung'], [data-seite='angebot'], [data-seite='auftraege'], [data-seite='lager'], [data-seite='einstellungen']) { grid-template-columns: minmax(0, 1fr); }
  body.drin #drin:is([data-seite='uebersicht'], [data-seite='tickets'], [data-seite='kunden'], [data-seite='abrechnung'], [data-seite='buchhaltung'], [data-seite='angebot'], [data-seite='auftraege'], [data-seite='lager'], [data-seite='einstellungen']) .spalte-rechts { display: none; }
  body.drin #drin:is([data-seite='uebersicht'], [data-seite='tickets'], [data-seite='kunden'], [data-seite='abrechnung'], [data-seite='buchhaltung'], [data-seite='angebot'], [data-seite='auftraege'], [data-seite='lager'], [data-seite='einstellungen']) .spalte-mitte { padding: 1.5rem 2rem 3rem; border-right: 0; }
  body.drin #drin:is([data-seite='tickets'], [data-seite='kunden'], [data-seite='abrechnung'], [data-seite='buchhaltung'], [data-seite='angebot'], [data-seite='auftraege'], [data-seite='lager'], [data-seite='einstellungen']) .spalte-mitte > div { max-width: 46rem; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  body.drin #nav-knopf { display: inline-flex; margin-left: -0.4rem; }
  body.drin #drin { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr); }
  body.drin #drin:is([data-seite='uebersicht'], [data-seite='tickets'], [data-seite='kunden'], [data-seite='abrechnung'], [data-seite='buchhaltung'], [data-seite='angebot'], [data-seite='auftraege'], [data-seite='lager'], [data-seite='einstellungen']) { grid-template-columns: 11rem minmax(0, 1fr); }
  body.drin .spalte-links .tabs button { padding-right: 0.75rem; padding-left: 0.85rem; }
  body.drin #drin .spalte-mitte { padding: 1.25rem 1.25rem 3rem; }
  body.drin .meldung { left: 12rem; }
  /* Weggeklappt: nur Liste und Detail; der Knopf oben links holt die Seitenleiste zurück */
  body.drin.nav-zu .spalte-links { display: none; }
  body.drin.nav-zu #drin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.drin.nav-zu #drin:is([data-seite='uebersicht'], [data-seite='tickets'], [data-seite='kunden'], [data-seite='abrechnung'], [data-seite='buchhaltung'], [data-seite='angebot'], [data-seite='auftraege'], [data-seite='lager'], [data-seite='einstellungen']) { grid-template-columns: minmax(0, 1fr); }
  body.drin.nav-zu .meldung { left: 1.25rem; }
}
/* Am Tablet mit dem Finger: Tippflächen mindestens 44px. Das Sichtbare bleibt gleich, eine unsichtbare Fläche
   um Kästchen und Symbole fängt den Finger. */
@media (min-width: 768px) and (pointer: coarse) {
  body.drin .tabs button, body.drin .spalte-links .tabs button { min-height: 44px; }
  body.drin .aufgaben li { min-height: 44px; }
  body.drin button.symbol, body.drin .plus, body.drin .zahnrad { width: 2.75rem; height: 2.75rem; }
  body.drin .gruppe h2 button.symbol { position: relative; width: 1.6rem; height: 1.6rem; }
  body.drin .haken::before, body.drin .gruppe h2 button.symbol::before { content: ''; position: absolute; inset: -0.75rem; }
  body.drin .filter > summary { padding-top: 0.6rem; padding-bottom: 0.6rem; }
}
/* Anlegen und Bearbeiten (Nils am 2026-11-01, wigo odoo:757): ab 768px rechts in der Detailspalte, wie die Aufgaben-Details.
   Seiten ohne Detail (Tickets, Kunden …) bekommen die Spalte nur, solange ein Formular offen ist. */
@media (min-width: 768px) {
  body.drin #drin.formular-offen .spalte-rechts { display: flex; }
  body.drin #drin.formular-offen .spalte-mitte { border-right: 1px solid var(--rand); }
  body.drin #drin.formular-offen .detail-leer, body.drin #drin.formular-offen .spalte-rechts > .detail { display: none; }
  .spalte-rechts dialog.formular { position: static; width: auto; max-width: 46rem; max-height: none; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; color: var(--text); }
  .spalte-rechts dialog.formular .neu-kopf { margin-bottom: 0.8rem; }
}
@media (min-width: 768px) and (max-width: 999px) {
  body.drin #drin.formular-offen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  body.drin #drin.formular-offen { grid-template-columns: 15rem minmax(0, 1fr) minmax(22rem, 32rem); }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  body.drin #drin.formular-offen { grid-template-columns: 11rem minmax(0, 1fr) minmax(20rem, 26rem); }
  body.drin.nav-zu #drin.formular-offen { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
}
/* Vorschau neben den Belegen gibt es erst ab 1280px (unten) */
.belege-vorschau { display: none; }
/* Großer Bildschirm ab 1280px (Nils am 2026-11-01): Die Liste füllt den Platz zwischen Navigation und Detail,
   das Detail (auch Anlegen und Bearbeiten) hat eine feste Breite am rechten Rand. Listen ohne Detail werden breiter,
   aber höchstens 60rem (die ganze Breite war zu breit, Nils am 2026-11-01); Angebot, Bilanz und Einstellungen behalten ihre Lesebreite. */
@media (min-width: 1280px) {
  body.drin #drin, body.drin #drin.formular-offen { grid-template-columns: 15rem minmax(0, 1fr) clamp(28rem, 30vw, 38rem); }
  body.drin #drin:is([data-seite='tickets'], [data-seite='kunden'], [data-seite='abrechnung'], [data-seite='auftraege'], [data-seite='lager'], [data-seite='buchhaltung']:not([data-teil='bilanz'], [data-teil='belege'])) .spalte-mitte > div { max-width: 60rem; }
  /* Belege: Liste höchstens 52rem, rechts daneben füllt die Datei des gewählten Belegs den übrigen Platz, beim Blättern stehend */
  body.drin #drin[data-seite='buchhaltung'][data-teil='belege'] .spalte-mitte > div { max-width: none; }
  /* Unterreiter „Zu bearbeiten“ / „Alle Belege“ (odoo:844): je Teil dasselbe Raster */
  body.drin #drin[data-seite='buchhaltung'][data-teil='belege'] :is(#buch-belege, #belege-arbeit, #belege-alle) > :not(.belege-raster, #belege-arbeit, #belege-alle) { max-width: 60rem; }
  .belege-raster { display: grid; grid-template-columns: minmax(28rem, 52rem) minmax(26rem, 1fr); gap: 1.5rem; align-items: start; }
  .belege-vorschau { display: block; position: sticky; top: 0; }
  .belege-vorschau .ansicht-gross { height: calc(100dvh - 15rem); }
  .belege-vorschau .vorschau-kopf { margin: 0 0 0.5rem; }
  #abr-belege-liste li.beleg { cursor: pointer; }
}
#archiv-liste li.zeile { cursor: pointer; }
.archiv-ausschnitt { margin: 0.15rem 0 0; color: var(--leise); font-size: 0.85rem; font-style: italic; }

/* Bausteine (Nils am 2026-11-02, wigo odoo:778): Aussehen von gruppe(), zeile(), aktionen() und aufklappen() aus dom.js.
   Neue Listen nehmen nur diese Klassen; Mockup docs/design-vorschau.html. */
.gruppe h2.gruppe-kopf, body.drin .gruppe h2.gruppe-kopf { display: flex; align-items: baseline; gap: 0.5rem; text-transform: uppercase; }
.gruppe h2.gruppe-kopf span { margin-left: 0; font-weight: 700; }
.gruppe-kopf .summe { margin-left: auto; color: var(--titel); font-size: 0.9rem; letter-spacing: 0; text-transform: none; }
ul.liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rand); }
.ablage { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px dashed var(--rand); border-radius: 4px; }
.ablage p { margin: 0; }
.ablage p + p { margin-top: 0.25rem; }
.ablage.drueber { border-color: var(--akzent); background: var(--flaeche); }
.ablage.laeuft { border-style: solid; }
.ablage-status { color: var(--titel); font-size: 0.85rem; }
/* Zeile als Ablageziel (offene Abbuchung): beim Darüberziehen orange gestrichelt */
.ablage-ziel.drueber { outline: 2px dashed var(--akzent); outline-offset: -2px; background: var(--flaeche); }
/* Scannen am Telefon (wigo odoo:812): auf dem Telefon ganzer Bildschirm, sonst ein Fenster */
/* Das Formular selbst bekommt beim Öffnen per Tastatur den Fokus (dlg.show()); sein Rahmen lief durch die Schrift.
   Knöpfe und Felder darin behalten ihren eigenen Fokus-Rahmen (Nils am 2026-11-10) */
dialog.formular:focus, dialog.formular:focus-visible { outline: none; }
dialog.scan { width: min(40rem, 100vw); max-width: 100vw; max-height: 100dvh; padding: 0.75rem 1rem 1rem; border: 0; border-radius: 4px; background: var(--grund); color: var(--text); }
dialog.scan::backdrop { background: rgb(0 0 0 / 0.6); }
@media (max-width: 767px) { dialog.scan { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; } }
.scan .neu-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; }
.scan .neu-kopf h2 { margin: 0; font-size: 1.1rem; }
.scan-ecken { display: block; max-width: 100%; margin: 0.5rem auto; touch-action: none; border-radius: 4px; }
.scan-seiten { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0; }
.scan-seiten figure { margin: 0; width: 6.5rem; }
.scan-seiten img { display: block; width: 100%; border: 1px solid var(--rand); border-radius: 4px; background: var(--flaeche); }
.scan-seiten figcaption { font-size: 0.8rem; color: var(--titel); margin-top: 0.2rem; }
/* Leere Gruppe (gruppe(…, { leer })): ein leiser Satz linksbündig unter der Kennzeile, ohne Abstand einer leeren Seite */
.gruppe > p.leise.leer, body.drin .gruppe > p.leise.leer { margin: 0; padding: 0.55rem 0.4rem; border-top: 1px solid var(--rand); text-align: left; }
ul.liste > li.zeile { display: block; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--rand); }
@media (hover: hover) {
  ul.liste > li.zeile:hover { background: var(--flaeche); }
}
ul.liste > li.zeile.gewaehlt { background: var(--orange-hauch); box-shadow: inset 3px 0 0 var(--akzent); }
.zeile-kopf { display: flex; align-items: baseline; gap: 0.75rem; }
.zeile-text { flex: 1; min-width: 0; }
.zeile-titel, a.zeile-titel { color: var(--titel); font-weight: 400; overflow-wrap: anywhere; }
a.zeile-titel { text-decoration: none; }
a.zeile-titel:hover { text-decoration: underline; }
.zeile-text .meta { display: block; margin: 0.1rem 0 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.zeile-text .meta.warnung { color: var(--orange-text); font-weight: 700; }
.zeile-text .meta.fehlt { color: var(--fehler); font-weight: 700; }
/* Einzelne Teile der Meta-Zeile hervorheben (Tickets: Dringlichkeit, Alter) */
.zeile-text .meta .warnung { color: var(--orange-text); font-weight: 700; }
.zeile-text .meta .fehlt { color: var(--fehler); font-weight: 700; }
.zeile-kopf > .zahl { flex: none; color: var(--titel); font-weight: 700; white-space: nowrap; }
.zeile-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; margin-top: 0.35rem; }
.zeile-aktionen button.textlink, .zeile-aktionen a.textlink, body.drin .zeile-aktionen button.textlink { font-weight: 700; }
.zeile-aktionen button.textlink:disabled { color: var(--leise); cursor: default; }
/* Formular unter einer Zeile (Tickets: Zeit, Verlauf, Status, Kunde, Zuweisen) */
li.zeile > form { margin-top: 0.5rem; }
li.zeile > form button.textlink, body.drin li.zeile > form button.textlink { justify-self: start; padding: 0.15rem 0; box-shadow: none; color: var(--orange-text); font-weight: 700; }
/* Klappbare Gruppe (gruppe(…, { klappbar })): die Kennzeile ist der Schalter, Pfeil wie bei aufklappen() */
button.gruppe-schalter, body.drin button.gruppe-schalter, body.drin button.gruppe-schalter:not(:disabled):hover {
  display: inline-flex; align-items: center; gap: 0.45rem; width: auto; min-width: 0; margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
button.gruppe-schalter::before { content: ''; width: 0.4rem; height: 0.4rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; }
.gruppe.klappbar.offen button.gruppe-schalter::before { transform: rotate(45deg) translate(-0.1rem, -0.1rem); }
.gruppe.klappbar:not(.offen) h2.gruppe-kopf { margin-bottom: 0; border-bottom: 1px solid var(--rand); padding-bottom: 0.5rem; }
/* Titel als Schalter (Zeile klappt Einzelheiten auf oder nimmt sie in eine Liste, z. B. im Lager) */
button.zeile-titel, body.drin button.zeile-titel, body.drin button.zeile-titel:not(:disabled):hover {
  display: block; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--titel); font: inherit; font-weight: 400; text-align: left; cursor: pointer;
}
button.zeile-titel:hover { text-decoration: underline; }
.aufklappen { margin-top: 0.35rem; }
button.aufklapp-schalter, body.drin button.aufklapp-schalter, body.drin button.aufklapp-schalter:not(:disabled):hover {
  display: inline-flex; align-items: center; gap: 0.45rem; width: auto; min-width: 0; margin: 0; padding: 0.15rem 0;
  border: 0; background: none; box-shadow: none; color: var(--orange-text); font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
button.aufklapp-schalter::before { content: ''; width: 0.4rem; height: 0.4rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; }
.aufklappen.offen > button.aufklapp-schalter::before { transform: rotate(45deg) translate(-0.1rem, -0.1rem); }
.aufklapp-inhalt > ul { margin: 0.3rem 0 0; padding: 0; list-style: none; }
.aufklapp-inhalt > ul > li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0 0.5rem 1.6rem; border-top: 1px solid var(--rand); }
.aufklapp-inhalt > ul > li > div { flex: 1; min-width: 0; }
.aufklapp-inhalt p { margin: 0; overflow-wrap: anywhere; }
.aufklapp-inhalt .zahl { flex: none; color: var(--titel); font-weight: 700; white-space: nowrap; }
.aufklapp-inhalt select { display: block; width: 100%; margin: 0.35rem 0 0; }

/* Layout A (Nils am 2026-11-02, wigo Memory 594, Mockup docs/layout-varianten.html): dicht wie ein Issue-Tracker.
   Erfassen als offenes Feld im Kopf, Filter als Leiste über der Liste, Aufgaben am Rechner einzeilig mit Spalten,
   Detail als Datenblatt ohne Kartenstapel. */

/* Kopf: offenes Erfassen-Feld statt Plus */
@media (min-width: 768px) {
  body.drin button.plus.kopf-erfassen {
    display: inline-flex; align-items: center; gap: 0.6rem; width: min(24rem, 38vw); height: auto; margin: 0 0 0 1.25rem; padding: 0.4rem 0.7rem;
    border-radius: 4px; background: var(--grund); box-shadow: inset 0 0 0 1px var(--rand); color: var(--leise); font-size: 0.85rem; font-weight: 400; text-align: left; cursor: text;
  }
  body.drin button.plus.kopf-erfassen:not(:disabled):hover { background: var(--grund); box-shadow: inset 0 0 0 1px var(--akzent); }
  .plus.kopf-erfassen::before, .plus.kopf-erfassen::after { content: none; }
  .plus.kopf-erfassen span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .plus.kopf-erfassen kbd { flex: none; padding: 0 0.3rem; border: 1px solid var(--rand); border-radius: 3px; color: var(--leise); font: 0.75rem 'Lato', sans-serif; }
}

/* Filterleiste: Person, Suche, Projekte in einer Zeile; „Projekte“ ist ein Knopf, der die Liste aufklappt */
button.filter-knopf, body.drin button.filter-knopf {
  width: auto; margin: 0; padding: 0.55rem 0.8rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--grund); box-shadow: none;
  color: var(--text); font-size: 0.9rem; font-weight: 400; white-space: nowrap;
}
button.filter-knopf::after { content: ''; display: inline-block; width: 0.35rem; height: 0.35rem; margin: 0 0 0.2rem 0.5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
button.filter-knopf[aria-expanded='true'], body.drin button.filter-knopf:not(:disabled):hover { border-color: var(--akzent); background: var(--grund); color: var(--orange-text); }
.filter-feld { margin-top: 0.5rem; }
.filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin: 0 0 1rem; }
.filterleiste .suche, body.drin .filterleiste .suche { flex: 1 1 8rem; width: auto; min-width: 0; margin: 0; }
.filterleiste .person-wahl { margin: 0; }
.filterleiste .aufgaben-wahl { flex: 1 1 8rem; width: auto; min-width: 0; margin: 0; }
/* Telefon: Suche eine Zeile, darunter Priorität und Fällig nebeneinander */
@media (max-width: 767px) {
  #seite-aufgaben .filterleiste .suche, body.drin #seite-aufgaben .filterleiste .suche { flex-basis: 100%; }
}
@media (min-width: 768px) {
  .filterleiste .aufgaben-wahl { flex: 0 1 9rem; }
}
.filterleiste .filter, body.drin .filterleiste .filter { flex: 1 1 100%; margin: 0; padding: 0; border-radius: 0; background: none; }
@media (min-width: 768px) {
  .filterleiste .filter, body.drin .filterleiste .filter { position: relative; flex: none; padding: 0; background: none; }
  .filter-feld { position: absolute; top: calc(100% + 0.3rem); right: 0; z-index: 20; width: 22rem; max-height: 70vh; overflow-y: auto; padding: 0.4rem 1rem 0.8rem;
    border: 1px solid var(--rand); border-radius: 4px; background: var(--grund); box-shadow: var(--schatten); }
}

/* Aufgabenzeile: Titel vorn, dann Kunde, Frist, Priorität; ab 1400px als Spalten, darunter zweizeilig ohne leere Teile */
.zeile-titelzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; min-width: 0; }
.zeile-spalten .meta > :empty { display: none; }
@media (min-width: 1400px) {
  #aufgaben .aufgaben li, body.drin #aufgaben .aufgaben li { padding-top: 0.45rem; padding-bottom: 0.45rem; }
  #aufgaben .zeile-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 10rem) 6rem 2rem; column-gap: 0.9rem; align-items: center; }
  #aufgaben .zeile-titelzeile .leute { flex: none; flex-wrap: nowrap; }
  /* Die Symbole liegen beim Darüberfahren über dem rechten Rand der Zeile, statt der Titelspalte Platz zu nehmen */
  #aufgaben .aufgaben li { position: relative; }
  #aufgaben .zeile-spalten .meta { display: contents; }
  #aufgaben .zeile-spalten .meta > :empty { display: block; }
  #aufgaben .zeile-titelzeile { flex-wrap: nowrap; }
  #aufgaben .zeile-titelzeile a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #aufgaben .spalte-kunde, #aufgaben .spalte-frist { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
  #aufgaben .spalte-prio { justify-self: end; }
}
@media (min-width: 1400px) and (hover: hover) {
  #aufgaben .aufgaben li .symbole { position: absolute; top: 50%; right: 0.4rem; padding-left: 0.6rem; background: var(--flaeche); transform: translateY(-50%); }
}

/* Detail als Datenblatt: ein oranger Knopf, Eigenschaften als Liste, Abschnitte mit Haarlinie statt Karten */
.d-knoepfe, body.drin .d-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin: 0.6rem 0 1rem; }
.d-knoepfe #d-erledigt { width: auto; margin: 0; }
dl.eigenschaften { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.1rem 0.5rem; margin: 0; font-size: 0.9rem; }
dl.eigenschaften dt { padding: 0.35rem 0; color: var(--leise); }
dl.eigenschaften dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; min-width: 0; margin: 0; }
dl.eigenschaften button.feld, body.drin dl.eigenschaften button.feld { width: 100%; margin: 0; padding: 0.35rem 0.5rem; border-radius: 4px; background: none; box-shadow: none; color: var(--titel); font-size: 0.9rem; text-align: left; }
dl.eigenschaften button.feld.leer { color: var(--leise); }
dl.eigenschaften button.feld.spaet { color: var(--fehler); font-weight: 700; }
@media (hover: hover) {
  dl.eigenschaften button.feld:not(:disabled):hover, body.drin dl.eigenschaften button.feld:not(:disabled):hover { background: var(--flaeche); box-shadow: none; }
}
dl.eigenschaften .feld-eingabe { width: 100%; padding: 0.3rem 0.5rem; font-size: 0.9rem; }
#detail .d-form button.textlink, #detail #d-beschr-speichern { width: auto; margin: 0.4rem 1rem 0 0; font-weight: 700; }
#detail .d-block, body.drin .spalte-rechts #detail .d-block, .spalte-rechts #detail .d-block { margin-top: 1rem; padding: 0.9rem 0 0; border-top: 1px solid var(--rand); border-radius: 0; background: none; box-shadow: none; }
.zeit-knoepfe button.textlink, body.drin .zeit-knoepfe button.textlink { gap: 0; padding: 0.15rem 0; box-shadow: none; color: var(--orange-text); font-weight: 700; }
.zeit-knoepfe, body.drin .zeit-knoepfe { gap: 1rem; }
.zeit-knoepfe button.textlink.gefahr, body.drin .zeit-knoepfe button.textlink.gefahr { color: var(--fehler); }

/* Tickets in Layout A (Nils am 2026-11-02): eine Filterleiste, „Neues Ticket“ rechts als einziger oranger Knopf */
.tickets-leiste .umschalter { flex: none; }
.tickets-leiste .suche, body.drin .tickets-leiste .suche { flex: 1 1 9rem; }
.tickets-leiste select { flex: 1 1 8rem; width: auto; min-width: 0; margin: 0; }
.tickets-leiste #ticket-neu-knopf { flex: none; margin: 0 0 0 auto; }
@media (min-width: 768px) {
  .tickets-leiste select { flex: 0 1 8rem; }
}

/* Lager in Layout A (Nils am 2026-11-02): Listen aus den Bausteinen, Kategorien als klappbare Gruppen */
.lager-tippen .zeile-kopf { cursor: pointer; }
#lager-wurzel .filterleiste .suche, body.drin #lager-wurzel .filterleiste .suche { flex: 1 1 14rem; }
.lager-ohne .zeile-kopf > .zahl { color: var(--leise); }
.lager-gewaehlt { margin: 0.15rem 0 0; color: var(--orange-text); font-size: 0.85rem; font-weight: 700; }
.lager-senden { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.5rem 0 1rem; }
.lager-senden button { margin: 0; }
.lager-abschnitt { display: flex; align-items: baseline; gap: 0.5rem; margin: 1.75rem 0 0.6rem; color: var(--titel); font-size: 1rem; }
.lager-abschnitt span { color: var(--leise); font-weight: 400; }
.lager-formular { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.5rem; }
.lager-formular input, .lager-formular select { flex: 1 1 12rem; width: auto; min-width: 0; margin: 0; }
.lager-formular > p, .lager-formular .lager-buendel, .lager-formular .lager-treffer { flex-basis: 100%; margin: 0; }
.lager-formular button.textlink, body.drin .lager-formular button.textlink { padding: 0.15rem 0; box-shadow: none; color: var(--orange-text); font-weight: 700; }
.lager-formular button.textlink.gefahr, body.drin .lager-formular button.textlink.gefahr { color: var(--fehler); }
.lager-reservierungen { margin-top: 1.75rem; }
.lager-erfassen .lager-eingabe button.textlink { flex: none; }

/* Aufträge in Layout A (odoo:778): Auftrag = Gruppe, Position = Zeile, Formulare unter der Zeile wie bei den Tickets */
#auftraege-leiste .suche, body.drin #auftraege-leiste .suche { flex: 1 1 14rem; }
.gruppe.auftrag { margin: 0 0 1.75rem; }
.gruppe h2.gruppe-kopf span.auftrag-name, body.drin .gruppe h2.gruppe-kopf span.auftrag-name { min-width: 0; color: inherit; overflow-wrap: anywhere; }
.gruppe-kopf .auftrag-name a { color: inherit; text-decoration: none; }
.gruppe-kopf .auftrag-name a:hover { text-decoration: underline; }
.gruppe.auftrag .gruppe-kopf .summe { flex: none; white-space: nowrap; }
.gruppe.auftrag > form, li.auftrag-position > form { padding: 0; border: 0; background: none; box-shadow: none; }
.gruppe.auftrag > form { margin: 0 0 0.6rem; padding: 0 0.4rem; }
.gruppe.auftrag > .zeile-aktionen { margin: 0 0 0.4rem; padding: 0 0.4rem; }
li.auftrag-position.ueber .zeile-kopf > .zahl { color: var(--fehler); }
li.auftrag-position.knapp .zeile-kopf > .zahl { color: var(--orange-text); }
li.auftrag-position > form.auf-zuordnen { display: grid; gap: 0.4rem; }
li.auftrag-position > form.auf-zuordnen p { margin: 0; }

/* Rechnungsanschrift (wigo odoo:792): über den Zeilen der Abrechnung, im Storno-Dialog und im Hinweis danach; fehlt etwas, rot */
.abr-anschrift { margin: 0.2rem 0 0.4rem; overflow-wrap: anywhere; }
.abr-anschrift.fehlt, .bearbeiten .fehlt, .tag-summe .fehlt { color: var(--fehler); font-weight: 700; }
/* Positionen im Storno-Dialog (odoo:794): Text, darunter Menge, Preis und netto; weggelassene durchgestrichen */
.abr-positionen { margin: 0.3rem 0 0.6rem; padding: 0; list-style: none; }
.abr-positionen > li { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0; border-top: 1px solid var(--rand); }
.abr-positionen textarea.text, .abr-positionen input { margin: 0; }
.abr-pos-zahlen { display: grid; grid-template-columns: 6rem 8rem 1fr auto; gap: 0.5rem; align-items: end; }
.abr-pos-zahlen label { font-size: 0.8rem; color: var(--leise); }
.abr-pos-zahlen .zahl { padding-bottom: 0.6rem; font-weight: 700; text-align: right; white-space: nowrap; }
.abr-pos-produkt { color: var(--titel); overflow-wrap: anywhere; }
.abr-positionen + .zeile-aktionen { margin: 0 0 0.8rem; }
.abr-positionen li.weg textarea, .abr-positionen li.weg input, .abr-positionen li.weg .zahl, .abr-positionen li.weg .abr-pos-produkt { opacity: 0.5; text-decoration: line-through; }

/* Abrechnung in Layout A (odoo:778): Filterleisten, Jahreswahl und Formulare mit Textlinks, Nicht abrechenbar und Entwürfe als klappbare Gruppen */
#seite-abrechnung .filterleiste .suche, body.drin #seite-abrechnung .filterleiste .suche { flex: 1 1 14rem; }
#seite-abrechnung .filterleiste select, body.drin #seite-abrechnung .filterleiste select { flex: 0 1 12rem; width: auto; margin: 0; }
/* Bank-Detail: ein oranger Knopf, daneben Textlinks; Status farbig wie in der Zeile */
.bank-detail .d-knoepfe > button { width: auto; margin: 0; }
.bank-detail .d-knoepfe .zeile-aktionen { margin: 0; }
.bank-status.fehlt { color: var(--fehler); font-weight: 700; }
.bank-status.warnung { color: var(--orange-text); font-weight: 700; }
.bank-vorschau { margin-top: 0.4rem; }
/* Ohne Beleg (Stufe 7): Felder untereinander, Haken mit Text in einer Zeile */
.ohne-beleg { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.ohne-beleg label { display: grid; gap: 0.25rem; }
.ohne-beleg .ohne-beleg-haken { display: flex; align-items: center; gap: 0.5rem; }
.ohne-beleg .ohne-beleg-haken input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--akzent); }
.ohne-beleg > button { justify-self: start; }
/* Rest wählen (Umsatz höher als der Beleg, restWahl in belege.js): Konto oder Guthaben */
/* Aufteilen (Belegabgleich Stufe 9): Belege mit Haken vorn, Stand und Rest-Wahl darunter */
.aufteilen { display: grid; gap: 0.5rem; min-width: 0; }
.aufteilen-liste { max-height: 22rem; overflow-y: auto; }
.aufteilen-liste .zeile-kopf > input[type='checkbox'] { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.15rem 0.6rem 0 0; accent-color: var(--akzent); }
.aufteilen-stand { margin: 0; font-weight: 700; }
.rest-wahl { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: 1 / -1; gap: 0.4rem; margin-top: 0.4rem; min-width: 0; }
.rest-wahl select { width: 100%; min-width: 0; }
.rest-wahl p { margin: 0; }
.rest-wahl label { display: flex; align-items: center; gap: 0.5rem; }
.rest-wahl span { flex: 1; min-width: 0; white-space: normal; }
.rest-wahl input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--akzent); }
.bank-vorschau .ansicht-gross { max-height: min(70vh, 34rem); }
/* Beleg-Ansicht (beleg-ansicht.js, Nils am 2026-11-09): oben Seitenbilder und Knöpfe, darunter die Seite groß wie ein Blatt */
.beleg-ansicht { display: flex; flex-direction: column; gap: 0.5rem; }
.ansicht-leiste { display: flex; align-items: flex-end; gap: 0.75rem; }
.ansicht-seiten { display: flex; gap: 0.5rem; overflow-x: auto; flex: 1; min-width: 0; padding: 2px; }
.ansicht-knoepfe { display: flex; gap: 0.9rem; margin-left: auto; align-items: center; }
.ansicht-knoepfe .textlink { font-size: 1rem; }
.ansicht-bild { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; flex: none; margin: 0; padding: 3px; border: 1px solid var(--rand); border-radius: 4px; background: var(--flaeche); color: var(--leise); font-size: 0.75rem; cursor: pointer; }
.ansicht-bild canvas { display: block; width: 64px; box-shadow: var(--schatten); }
.ansicht-bild[aria-selected='true'] { border-color: var(--akzent); color: var(--text); box-shadow: 0 0 0 1px var(--akzent); }
.ansicht-gross { overflow: auto; padding: 0.75rem; border-radius: 4px; background: var(--flaeche); }
.ansicht-gross:not(.gezoomt) { display: flex; justify-content: center; align-items: flex-start; }
.ansicht-gross canvas, .ansicht-gross img { display: block; max-width: none; box-shadow: var(--schatten); }
.ansicht-gross:not(.gezoomt) canvas { max-width: 100%; height: auto; }
.ansicht-gross img { width: 100%; height: auto; }
.ansicht-gross iframe { display: block; width: 100%; height: 100%; min-height: 20rem; border: 0; }
/* Bank (Nils am 2026-11-08): Suche breit, Status, Richtung, Monat und Konto daneben, am Telefon zu zweit */
.bank-leiste .suche, body.drin .bank-leiste .suche { flex: 1 1 14rem; }
.bank-leiste select.bank-wahl, body.drin .bank-leiste select.bank-wahl { flex: 1 1 9rem; width: auto; min-width: 0; margin: 0; }
@media (min-width: 768px) {
  .bank-leiste select.bank-wahl, body.drin .bank-leiste select.bank-wahl { flex: 0 1 11rem; }
}
.monat-wahl button.textlink, body.drin .monat-wahl button.textlink { padding: 0.1rem 0.5rem; font-size: 1.1rem; font-weight: 700; }
.monat-wahl button.textlink:disabled { color: var(--leise); opacity: 0.4; cursor: default; }
#abr-probleme, #abr-entwuerfe { margin-top: 1.75rem; }
.abr-edit button.textlink, .abr-waren button.textlink, .abr-texte button.textlink, #abr-ergebnis button.textlink, body.drin .abr-edit button.textlink, body.drin .abr-waren button.textlink, body.drin .abr-texte button.textlink, body.drin #abr-ergebnis button.textlink { font-weight: 700; }

/* Abschluss in Layout A (odoo:778): Gruppen aus gruppe()/zeile(), Abgeschlossenes eingeklappt, Buchen-Formular unter der Zeile */
#tag-gruppen > .gruppe { margin: 0 0 1.75rem; }
li.termin-zeile > form.d-form { margin-top: 0.5rem; padding: 0; background: none; }
li.termin-zeile > form.d-form .zeile { display: grid; grid-template-columns: 1fr 6rem; gap: 0.6rem; }
@media (max-width: 520px) { li.termin-zeile > form.d-form .zeile { grid-template-columns: 1fr; } }

/* Suche im Kopf (odoo:852): Fenster wie das Erfassen, Trefferliste darunter scrollt; Nummern als Telefon-Link */
.suche-fenster .suche, body.drin .suche-fenster .suche { width: 100%; margin: 0 0 0.4rem; }
.suche-fenster #suche-treffer { max-height: min(60vh, 34rem); overflow-y: auto; }
@media (min-width: 768px) { .suche-fenster #suche-treffer { max-height: min(68vh, 46rem); } }
.suche-sprung { margin: 0 0 0.3rem; line-height: 1.6; }
.suche-fenster .gruppe { margin-top: 0.4rem; }
a.telefon { white-space: nowrap; }