:root {
  --text: #1d1d1f;
  --leise: #6e6e73;
  --grund: #ffffff;
  --flaeche: #f2f2f5;
  --akzent: #2f6f4f;
  --akzent-text: #ffffff;
  --fehler: #b3261e;
  --m-kunde: #d5efdf;
  --m-zeit: #d8e6fb;
  --m-frist: #fde3c8;
  --m-prio: #fbd5d5;
  --m-dauer: #e7dcf8;
  --m-ticket: #f8edb4;
  --m-wdh: #cdeeee;
  /* Dünner Pfeil für Auswahlfelder: als Datei, denn die Sicherheitsregeln erlauben keine eingebetteten Bilder */
  --pfeil: url('/pfeil.svg');
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f2f2f5;
    --leise: #a1a1a6;
    --grund: #161618;
    --flaeche: #232326;
    --akzent: #5fb98b;
    --akzent-text: #0d1f16;
    --fehler: #f2b8b5;
    --m-kunde: #1f4a33;
    --m-zeit: #1f3a5f;
    --m-frist: #5a3a17;
    --m-prio: #5f2424;
    --m-dauer: #3d2c5c;
    --m-ticket: #4f4514;
    --m-wdh: #1b4a4a;
    --pfeil: url('/pfeil-dunkel.svg');
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, sans-serif;
}

main {
  max-width: 32rem;
  margin: 0 auto;
  padding: 2rem 16px 4rem;
}

h1 { margin: 0 0 1.25rem; font-size: 1.9rem; font-weight: 750; letter-spacing: -0.03em; }
h1::after { content: '.'; color: var(--akzent); }

.leise { color: var(--leise); }

a { color: var(--akzent); }

.knopf, button {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 10px;
  background: var(--akzent);
  color: var(--akzent-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.12s, transform 0.06s;
}
@media (hover: hover) {
  button:not(:disabled):hover, .knopf:hover { filter: brightness(1.08); }
}
button:not(:disabled):active { transform: scale(0.98); }
button:focus-visible, .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

form { margin-top: 1rem; padding: 1rem; border-radius: 14px; background: var(--flaeche); }

label { display: block; margin-bottom: 0.75rem; }

input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.6rem;
  border: 1px solid var(--leise);
  border-radius: 8px;
  background: var(--grund);
  color: var(--text);
  font: inherit;
}

.klein { font-size: 0.875rem; }

/* Erfassungszeile: Textfeld mit durchsichtiger Schrift über der Hervorhebung */
.erfassen { margin: 0; padding: 0; background: none; }
.erfassen label { margin-bottom: 0.4rem; font-weight: 600; }
.feld { position: relative; }
.hervor, .feld textarea {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  line-height: 1.5;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hervor {
  position: absolute;
  inset: 0;
  color: var(--text);
  pointer-events: none;
}
.feld textarea {
  position: relative;
  display: block;
  width: 100%;
  min-height: 2.9rem;
  resize: none;
  overflow: hidden;
  border-color: var(--leise);
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--text);
}
.feld textarea::placeholder { color: var(--leise); -webkit-text-fill-color: var(--leise); }
.feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.feld { background: var(--grund); border-radius: 10px; }
.senden { display: block; width: 100%; margin-top: 0.6rem; padding: 0.8rem 1.1rem; }
@media (min-width: 600px) { .senden { width: auto; margin-left: auto; } }
.hervor mark { color: inherit; border-radius: 4px; box-shadow: 0 0 0 2px var(--m); background: var(--m); }
.hervor .customer, .hervor .person { --m: var(--m-kunde); }
.hervor .date, .hervor .time { --m: var(--m-zeit); }
.hervor .deadline { --m: var(--m-frist); }
.hervor .priority { --m: var(--m-prio); }
.hervor .duration { --m: var(--m-dauer); }
.hervor .ticket { --m: var(--m-ticket); }
.hervor .repeat { --m: var(--m-wdh); }

.vorschau {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--grund);
}
.vorschau dt { color: var(--leise); }
.vorschau dd { margin: 0; overflow-wrap: anywhere; }

h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }

.block { margin: 0 0 1rem; padding: 1.1rem; border-radius: 14px; background: var(--flaeche); }
.block form { margin-top: 0.75rem; padding: 0; background: none; }
.block p:first-of-type { margin-top: 0; }
.fehler { color: var(--fehler); }

button.zweit {
  background: transparent;
  color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}
button.klein, .knopf.klein { padding: 0.35rem 0.7rem; font-size: 0.875rem; }
button:disabled { opacity: 0.6; cursor: wait; }

.abrechnung { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.abrechnung li { display: grid; gap: 0.3rem; padding: 0.6rem 0; border-top: 1px solid var(--grund); }
.abrechnung li:first-child { border-top: 0; }
.abrechnung-name { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.abrechnung li select { margin: 0; }
.geraete { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.geraete li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--grund);
}
.neues-token { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: var(--grund); }
.neues-token p { margin-top: 0; }
.neues-token code { display: block; margin-bottom: 0.75rem; overflow-wrap: anywhere; font-size: 0.875rem; }

.ergebnis { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 12px; background: var(--grund); }
.ergebnis p { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.ergebnis .knoepfe-zeile { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pruefen { margin: 0 0 0.75rem; padding-left: 1.2rem; color: var(--fehler); }
.pruefen:empty { display: none; }
.vorschlag { margin: 0 0 0.75rem; padding: 0.8rem 0.9rem; border-radius: 10px; background: var(--m-frist); }
.vorschlag p { margin: 0 0 0.6rem; }
.vorschlag .knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vorschlag button { flex: 1 1 10rem; }

/* Bereiche: Aufgaben und Einstellungen */
.tabs { display: flex; gap: 0.25rem; margin: 0 0 1rem; padding: 0.25rem; border-radius: 12px; background: var(--flaeche); }
.tabs button { flex: 1; min-width: 0; padding: 0.55rem 0.4rem; background: transparent; color: var(--leise); box-shadow: none; }
.tabs button[aria-selected='true'] { background: var(--grund); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }

.hinweis { margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--m-frist); }
.hinweis button { margin-left: 0.4rem; }

/* Aufgabenliste */
.gruppe { margin: 0 0 1.25rem; }
.gruppe h2 { display: flex; justify-content: space-between; margin: 0 0 0.4rem; padding: 0 0.25rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--leise); }
.gruppe.ueberfaellig h2 { color: var(--fehler); }
.aufgaben { margin: 0; padding: 0; list-style: none; border-radius: 14px; background: var(--flaeche); overflow: hidden; }
.aufgaben li { padding: 0.75rem 1rem; border-bottom: 1px solid var(--grund); }
.aufgaben li:last-child { border-bottom: 0; }
.aufgaben a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.aufgaben a:hover { text-decoration: underline; }
.meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; margin-top: 0.15rem; color: var(--leise); font-size: 0.85rem; }
.meta .frist.spaet { color: var(--fehler); font-weight: 600; }
.chip { padding: 0 0.45rem; border-radius: 6px; background: var(--m-prio); color: var(--text); font-weight: 600; }
.chip.pruefen-chip { background: var(--m-frist); }
.leer { padding: 2rem 1rem; text-align: center; }

/* Zeile mit Haken und Menü */
.aufgaben li { display: grid; grid-template-columns: auto 1fr auto; gap: 0 0.75rem; align-items: start; }
.haken { position: relative; transition: background 0.2s, box-shadow 0.2s; }
.haken::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.4rem;
  height: 0.75rem;
  border: solid var(--akzent-text);
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.2s 0.08s cubic-bezier(0.3, 1.6, 0.5, 1);
}
li.fertig .haken { background: var(--akzent); box-shadow: inset 0 0 0 2px var(--akzent); animation: puls 0.45s ease-out; }
li.fertig .haken::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
li.fertig a { color: var(--leise); text-decoration: line-through; transition: color 0.3s; }
@keyframes puls {
  0% { transform: scale(1); box-shadow: inset 0 0 0 2px var(--akzent), 0 0 0 0 color-mix(in srgb, var(--akzent) 55%, transparent); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); box-shadow: inset 0 0 0 2px var(--akzent), 0 0 0 0.8rem transparent; }
}
.aufgaben li.geht { opacity: 0; transform: translateX(1.5rem); transition: opacity 0.3s, transform 0.3s; }
.aufgaben li.zu { height: 0 !important; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; overflow: hidden; transition: height 0.25s, padding 0.25s; }
.haken { width: 1.6rem; height: 1.6rem; margin-top: 0.1rem; padding: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--leise); }
/* Nur mit Maus: Am Telefon bliebe der Hover-Zustand nach dem Tippen an der Zeile hängen, die nachrückt */
@media (hover: hover) {
  .haken:hover { box-shadow: inset 0 0 0 2px var(--akzent); background: var(--akzent); filter: none; }
}
.mehr { padding: 0.1rem 0.6rem; background: transparent; color: var(--leise); font-size: 1.3rem; line-height: 1.2; box-shadow: none; }
.aktionen { grid-column: 2 / 4; display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.aktionen .gefahr { color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
.bearbeiten { margin: 0; padding: 0; background: none; }
.bearbeiten .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.bearbeiten select, .abrechnung select, .zahlungsbedingung select, .ang-gitter select { display: block; width: 100%; margin-top: 0.25rem; padding: 0.6rem; border: 1px solid var(--leise); border-radius: 8px; background: var(--grund); color: var(--text); font: inherit; }
/* Auswahlfelder (Priorität, Projekt): gleiche Höhe, gleicher Pfeil, immer sichtbar */
.bearbeiten select, .abrechnung select, .zahlungsbedingung select, .ang-gitter select, input[list] { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: var(--pfeil); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 0.75rem; }
/* Der eingebaute Pfeil der Vorschlagsliste bleibt klickbar, aber unsichtbar über unserem */
input[list]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 2.2rem; height: 100%; cursor: pointer; }
input[list] { position: relative; }
.bearbeiten .senden { width: 100%; margin-left: 0; }
.meldung {
  position: fixed;
  /* über dem Knopf „Anlegen“, nicht daneben */
  left: max(16px, calc(50% - 16rem + 16px));
  right: max(16px, calc(50% - 16rem + 16px));
  bottom: calc(5.25rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: var(--text);
  color: var(--grund);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.28);
  z-index: 20;
  font-size: 0.9rem;
}
.meldung span { min-width: 0; overflow-wrap: anywhere; }
.meldung .zweit { flex: none; color: var(--grund); box-shadow: inset 0 0 0 1px var(--grund); }

/* Filter: Projekte ausblenden */
.filter { margin: 0 0 1rem; padding: 0.6rem 1rem; border-radius: 14px; background: var(--flaeche); }
.filter > summary { cursor: pointer; font-weight: 600; }
.filter-knoepfe { display: flex; gap: 0.5rem; margin: 0.75rem 0 0.4rem; }
.filter-liste, .filter-privat { max-height: 45vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.filter-liste li, .filter-privat li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.6rem; padding: 0.45rem 0; }
.filter-liste input, .filter-privat input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.1rem 0 0; accent-color: var(--akzent); }
/* Eine Zeile, lange Namen enden mit „…“; der volle Name steht im Tooltip. Die Auswahl ändert nur die Farbe, nicht die Breite */
.filter-name { display: block; min-width: 0; max-width: 100%; padding: 0; overflow: hidden; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.filter-name[aria-pressed='true'] { color: var(--akzent); }
.filter-name[role='button'] { cursor: pointer; }
.filter-name:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.filter-liste .zahl, .filter-privat .zahl { margin-left: auto; padding-top: 0.1rem; color: var(--leise); font-size: 0.85rem; }
/* Privat: angeheftet ganz oben, als eigene Karte, mit Luft und einer Haarlinie zu den Projekten */
.filter-privat { overflow: visible; }
/* Projekt-Tags: oben je Tag ein Schalter (an = Projekte sichtbar), am Projekt die Tags als leiser Knopf */
.filter-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.4rem; }
button.feld.tag-filter { color: var(--leise); background: transparent; text-decoration: line-through; }
button.feld.tag-filter.an { color: var(--orange-text); background: var(--orange-hauch); box-shadow: inset 0 0 0 1px var(--akzent); text-decoration: none; }
.filter-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; min-width: 0; }
.filter-kopf button.feld { padding: 0 0.4rem; font-size: 0.75rem; }
.filter-kopf .feld-eingabe { min-width: 0; width: 100%; font-size: 0.8rem; }
.filter-privat li { align-items: center; margin: 0.2rem 0 0; padding: 0.55rem 0.7rem; border: 1px solid color-mix(in srgb, var(--text) 11%, transparent); border-radius: 12px; background: var(--grund); }
.filter-privat input { margin: 0; }
.filter-privat .filter-name { color: var(--text); font-weight: 600; }
.filter-privat .filter-name[aria-pressed='true'] { color: var(--akzent); }
.schloss { display: inline-block; width: 0.95rem; height: 0.95rem; margin-right: 0.45rem; vertical-align: -0.12rem; background: currentColor; -webkit-mask: url('/schloss.svg') center / contain no-repeat; mask: url('/schloss.svg') center / contain no-repeat; }
.filter-privat:not(:empty) + .filter-liste { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid color-mix(in srgb, var(--text) 11%, transparent); }
/* Ausgeblendete Projekte: eigenes Feld unter der Liste, Pfeil statt Dreieck */
/* „Alle zeigen“ und „Alle ausblenden“ sind Textlinks, keine Knöpfe; die Kette ist so lang, damit sie den allgemeinen Rahmen für button.zweit schlägt */
body.drin .filter-knoepfe button.zweit { padding: 0; background: none; box-shadow: none; color: var(--akzent); font-size: 0.85rem; font-weight: 500; }
body.drin .filter-knoepfe { gap: 1rem; }
.filter-weg { margin-top: 0.6rem; }
.filter-weg > summary { list-style: none; cursor: pointer; font-weight: 400; color: var(--leise); font-size: 0.9rem; }
.filter-weg > summary::-webkit-details-marker { display: none; }
.filter-weg > summary::before { content: ''; display: inline-block; width: 0.7rem; height: 0.45rem; margin-right: 0.5rem; background: var(--pfeil) center / contain no-repeat; transform: rotate(-90deg); }
.filter-weg[open] > summary::before { transform: none; }
.filter-weg .filter-liste li { color: var(--leise); }

/* Anlegen: schwebender Knopf und Fenster darüber */
main { padding-bottom: 7rem; }
.fab {
  position: fixed;
  right: max(16px, calc(50% - 16rem + 16px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.28);
  z-index: 5;
}
.neu {
  width: min(32rem, 100%);
  max-width: 100%;
  margin: auto auto 0;
  padding: 1.1rem 16px calc(1.25rem + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--grund);
  color: var(--text);
}
.neu::backdrop { background: rgb(0 0 0 / 0.45); }
#bf-ja.gefahr { background: transparent; color: var(--fehler); box-shadow: inset 0 0 0 1.5px var(--fehler); }
#bf-frage { overflow-wrap: anywhere; }
.neu-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.neu-kopf h2 { margin: 0; }
.neu .feld { background: var(--flaeche); }
@media (min-width: 600px) {
  .neu { margin: auto; border-radius: 20px; padding-bottom: 1.25rem; }
}

[hidden] { display: none !important; }

/* Suche und Timer */
.suche { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 0; border-radius: 12px; background: var(--flaeche); }
.suche:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.timer-leiste { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: 12px; background: var(--m-zeit); }
.timer-punkt { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--fehler); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
button.link { flex: 1; min-width: 0; padding: 0; background: none; color: var(--text); font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: none; }
button.timer-zeit { flex: none; width: auto; margin: 0; padding: 0; background: none; box-shadow: none; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; cursor: text; }
body.drin button.timer-zeit:not(:disabled):hover, body.drin button.timer-zeit:focus-visible { background: none; box-shadow: none; color: var(--text); text-decoration: underline dotted; }
.timer-eingabe { flex: none; width: 4.75rem; margin: 0; padding: 0.25rem 0.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
button.timer-zeit[hidden], .timer-eingabe[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .timer-punkt { animation: none; } }

/* Detailansicht */
/* Kopf: Felder als leise Knöpfe, Antippen macht ein Eingabefeld daraus (ersetzt „Aufgabe bearbeiten“) */
.meta.felder { gap: 0.35rem; margin: 0.35rem 0 0.2rem; align-items: center; }
button.feld {
  padding: 0.15rem 0.55rem;
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--rand);
  font-size: 0.85rem;
  font-weight: 400;
}
button.feld.leer { background: transparent; color: var(--leise); box-shadow: inset 0 0 0 1px var(--rand); }
button.feld.spaet { color: var(--fehler); font-weight: 600; }
@media (hover: hover) {
  button.feld:not(:disabled):hover { filter: none; box-shadow: inset 0 0 0 1px var(--akzent); }
  .feld-titel:hover { cursor: text; text-decoration: underline dotted var(--rand); text-underline-offset: 0.25em; }
}
.feld-eingabe { width: auto; min-width: 9rem; max-width: 100%; margin: 0; padding: 0.15rem 0.45rem; font-size: 0.85rem; }
.feld-eingabe.titel-eingabe { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 600; }
/* Personen als Kürzel: umrandet = zugewiesen */
.leute { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.meta .leute { gap: 0.15rem; }
.kuerzel {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--orange-hauch);
  color: var(--orange-text);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
button.kuerzel.gross {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  background: var(--grund);
  color: var(--leise);
  box-shadow: inset 0 0 0 1px var(--rand);
  font-size: 0.8rem;
  opacity: 0.75;
}
button.kuerzel.gross.an { background: var(--orange-hauch); color: var(--orange-text); box-shadow: inset 0 0 0 2px var(--akzent); opacity: 1; }
button.kuerzel.gross.mehr-leute { opacity: 1; font-weight: 600; }
@media (hover: hover) {
  button.kuerzel.gross:not(:disabled):hover { filter: none; opacity: 1; box-shadow: inset 0 0 0 2px var(--akzent-dunkel); }
}
.detail { max-height: 92vh; overflow-y: auto; }
.detail .neu-kopf h2 { overflow-wrap: anywhere; }
.d-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.d-knoepfe .knopf { background: transparent; color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.d-block { margin: 0 0 1.25rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--flaeche); }
.d-block h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.d-block h3 .leise { font-weight: 400; }
textarea.text { display: block; width: 100%; margin: 0 0 0.5rem; padding: 0.6rem; border: 1px solid var(--leise); border-radius: 8px; background: var(--grund); color: var(--text); font: inherit; resize: vertical; }
textarea.text[readonly] { border-style: dashed; color: var(--leise); }
.d-liste { margin: 0 0 0.6rem; padding: 0; list-style: none; }
.d-liste li { padding: 0.5rem 0; border-bottom: 1px solid var(--grund); overflow-wrap: anywhere; }
.d-liste li:last-child { border-bottom: 0; }
.notiz-text { white-space: pre-wrap; }
.zeit-zeile { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.zeit-knoepfe { display: flex; flex: none; gap: 0.4rem; }
.zeit-knoepfe .gefahr { color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
.d-form { margin: 0; padding: 0; background: none; display: grid; gap: 0.5rem; }
.d-form label { margin: 0; }
.d-form .zeile { display: grid; grid-template-columns: 5rem 6rem 1fr; gap: 0.6rem; }
@media (max-width: 520px) { .d-form .zeile > :last-child { grid-column: 1 / -1; } }
.d-schnell { display: flex; gap: 0.5rem; }
.d-form button[type='submit'] { justify-self: start; }
.zeit-zeile .d-form { flex: 1; }

/* Kundenzeiten */
.monat-wahl { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.75rem; }
.monat-wahl button { min-width: 2.5rem; }
.kunde-stand.klickbar { cursor: pointer; text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 3px; }
.kunde-stand.klickbar:hover, .kunde-stand.klickbar:focus-visible { outline: 2px solid var(--akzent); }
.kunde-stand { margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: var(--m-kunde); font-size: 0.9rem; }

/* Tickets */
.ticket-neu textarea { width: 100%; font: inherit; resize: vertical; }
.ticket-neu .tn-zeit { grid-template-columns: 6rem 6rem; }
.ticket-neu .tn-zeit > :last-child { grid-column: auto; }
.ticket-neu .tn-dringend { display: flex; align-items: center; gap: 0.5rem; }
.ticket-neu .tn-dringend input { width: auto; margin: 0; }
.ticket-neu button { margin: 0; }
.ticket-neu button.senden { justify-self: stretch; width: 100%; margin-top: 0.6rem; }
.ticket-person { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* Filterzeile der Abrechnung (Belege, Abgerechnet); Tickets haben die Filterleiste aus Layout A */
.tickets-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.tickets-filter .suche { flex: 1 1 100%; margin: 0; }
.tickets-filter select { flex: 1 1 8rem; min-width: 0; margin: 0; }
.ticket-person select { flex: 1 1 12rem; margin: 0; }
.umschalter { display: inline-flex; gap: 0.25rem; }
.umschalter button[aria-pressed='true'] { background: var(--akzent); color: #fff; box-shadow: none; }
.kunden-filter { margin: 0 0 0.75rem; }

/* Tagesabschluss */
.tag-summe { margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--m-kunde); font-weight: 600; }
.aufgaben li.tag-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tag-zeile .meta.ohne-zeit { color: var(--fehler); }
.tag-zeile.fertig a { text-decoration: none; color: var(--text); }
.tag-zeile .knoepfe { flex: none; display: flex; flex-direction: column; gap: 0.35rem; }
.tag-zeile button { flex: none; }
.tag-zeile .meta.ohne-zeit.frei { color: var(--leise); }
.aufgaben li.termin-zeile { flex-wrap: wrap; }
.termin-zeile .d-form { flex-basis: 100%; }
.termin-zeile .d-form .zeile { grid-template-columns: 1fr 6rem; }
.termin-zeile .d-form input { width: 100%; }
@media (max-width: 520px) { .termin-zeile .d-form .zeile { grid-template-columns: 1fr; } }
.termin-zeile .titel { font-weight: 500; }
.tag-fertig { margin-top: 0.5rem; }
.abr-kunde { padding: 0.9rem 1rem; }
.abr-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.abr-kopf h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abr-kundensumme { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.abr-knopf { margin: 0; }
.abr-rechts { flex: none; display: flex; align-items: center; gap: 0.75rem; }
@media (max-width: 600px) {
  .abr-kopf { flex-wrap: wrap; row-gap: 0.4rem; }
  .abr-kopf h2 { flex: 0 0 100%; }
  .abr-rechts { flex: 1; justify-content: space-between; }
}
.abr-titel { margin: 1.5rem 0 0.25rem; font-size: 1rem; }
.abr-kunde > a.meta { display: block; margin: 0 0 0.3rem; }
#abr-ergebnis a { margin-left: 0.4rem; white-space: nowrap; }
#abr-ergebnis button { margin-left: 0.4rem; }
.zahlungsbedingung { margin-top: 0.5rem; }
.zahlungsbedingung select { display: block; width: 100%; margin-top: 0.25rem; }
.abr-liste { list-style: none; margin: 0; padding: 0; }
.abr-liste li { padding: 0.55rem 0; border-top: 1px solid var(--grund); }
.abr-liste li:first-child { border-top: 0; }
.abr-liste button { align-self: flex-start; margin-top: 0.35rem; }
.abr-waren { margin-top: 0.6rem; }
.abr-waren .abr-liste li { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; }
.abr-waren .abr-zahl { white-space: nowrap; }
.abr-waren .abr-liste li button { margin: 0; }
.abr-waren .abr-text { flex: 1; min-width: 0; }
.abr-waren .abr-menge { width: 4.5rem; margin: 0; padding: 0.3rem 0.4rem; font-size: 0.9rem; text-align: right; }
.abr-ware-neu { position: relative; }
.lager-kunde { position: relative; }
.abr-ware-neu input { width: 100%; margin: 0.4rem 0 0; }
.abr-dropdown { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; max-height: 14rem; margin: 0.2rem 0 0; padding: 0.25rem; overflow-y: auto; list-style: none; border: 1px solid var(--leise); border-radius: 10px; background: var(--grund); box-shadow: 0 6px 20px rgb(0 0 0 / 0.18); }
.abr-dropdown li { padding: 0; border: 0; }
.abr-dropdown button { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; width: 100%; margin: 0; padding: 0.55rem 0.6rem; border-radius: 8px; background: transparent; color: var(--text); font-weight: 500; text-align: left; box-shadow: none; }
.abr-dropdown button:hover, .abr-dropdown button:focus-visible { background: var(--flaeche); }
.abr-dropdown .meta { flex: none; font-weight: 400; }
.abr-dropdown .leer { padding: 0.55rem 0.6rem; color: var(--leise); }
.abr-liste label { display: flex; align-items: center; gap: 0.7rem; margin: 0; cursor: pointer; }
.abr-liste input[type='checkbox'] { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--akzent); }
.abr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.abr-text strong, .abr-liste > li > strong { min-width: 0; overflow-wrap: anywhere; }
.abr-liste > li { display: flex; flex-direction: column; }
.abr-liste > li:has(label) { display: block; }
.abr-zahl { flex: none; font-size: 0.85rem; font-variant-numeric: tabular-nums; text-align: right; }
.abr-liste .meta { display: block; }
.abr-liste .meta.ohne-zeit { color: var(--fehler); }
.stift { flex: none; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--leise); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.abr-liste .stift { align-self: center; }
.stift::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-20%) rotate(45deg); transition: transform 0.15s; }
.stift.offen::before { transform: translateY(20%) rotate(-135deg); }
.stift-platz { flex: none; width: 2rem; }
.stift:hover, .stift:focus-visible { color: var(--akzent); border-color: var(--akzent); }
.abr-edit { margin: 0.5rem 0 0 1.8rem; padding: 0; background: none; }
.abr-edit-zeile { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.abr-edit-zeile .meta { flex: none; }
.abr-edit-zeile input, .abr-edit-zeile select { margin: 0; }
.abr-edit-zeile input[type='date'] { flex: none; width: 10.5rem; }
.abr-edit-zeile select { flex: none; width: auto; margin: 0; }
.abr-edit-zeile input:not([type='date']) { flex: 1 1 10rem; min-width: 0; }
.abr-edit-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; }
.abr-umzug select { flex: 1 1 12rem; min-width: 0; }
.abr-teil { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 1.1rem 0 0.1rem; padding-top: 0.7rem; border-top: 2px solid var(--rand); }
.abr-kopf + .abr-teil { margin-top: 0.3rem; padding-top: 0; border-top: 0; }
.abr-teil-name { color: var(--leise); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.abr-teil-name a { display: inline; margin-left: 0.3rem; color: var(--orange-text); }
.abr-teil-summe { color: var(--titel); font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) {
  .abr-edit { margin-left: 0; }
  .abr-edit-zeile { flex-wrap: wrap; }
  .abr-edit-zeile > input[type='date']:first-child { flex: 0 0 100%; }
  /* Telefon: Datum und Beschreibung je eine Zeile, Stunden und Minuten nebeneinander */
  .abr-edit-zeile { margin-bottom: 0.9rem; }
  .abr-edit-zeile input:not([type='date']) { flex: 0 0 100%; }
  .abr-edit-zeile select { flex: 1 1 0; min-width: 0; }
}
.abr-beschreibung { white-space: pre-line; }
.abr-liste .abr-aufgabe { margin-top: 0.1rem; }
.abr-menge input { width: 4.5rem; margin-right: 0.2rem; padding: 0.15rem 0.4rem; font-size: 0.9rem; text-align: right; }
.abr-menge input.falsch { border-color: var(--fehler); }
.abr-liste .meta.abr-menge { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; }
.abr-menge .abr-von { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.abr-menge input { flex: none; width: 3.6rem; }
.abr-menge .abr-zahl { margin-left: auto; padding-left: 0.5rem; }
/* Ausbuchen unter einer Hardware-Zeile (odoo:715): eingerückt, Haarlinie oben */
.abr-aus { margin: 0.45rem 0 0 1.8rem; padding-top: 0.45rem; border-top: 1px solid var(--rand); font-size: 0.875rem; }
.abr-liste .abr-aus label { gap: 0.55rem; color: var(--text); font-weight: 400; }
.abr-liste .abr-aus input[type='checkbox'] { width: 1rem; height: 1rem; }
.abr-aus-info { color: var(--leise); }
.abr-aus-geraete { margin: 0.2rem 0 0; padding: 0; list-style: none; }
.abr-liste .abr-aus li.abr-geraet { display: block; padding: 0.2rem 0; border: 0; }
.abr-geraet .abr-text { flex-flow: row wrap; align-items: baseline; column-gap: 0.5rem; }
.abr-geraet .abr-text > span:first-child { color: var(--titel); overflow-wrap: anywhere; }
.abr-liste .abr-geraet .meta { font-size: 0.8rem; }
.abr-liste .abr-geraet .meta.abr-reserviert { color: var(--orange-text); }
.abr-aus .textlink { display: block; }
.abr-aus input.abr-aus-scan { max-width: 18rem; margin: 0.35rem 0 0; padding: 0.35rem 0.5rem; font-size: 0.875rem; }
.abr-aus-hinweis { margin: 0.35rem 0 0; color: var(--fehler); font-size: 0.8rem; }
.abr-aus-hinweis.leise { color: var(--leise); }
.abr-waren .abr-liste li { flex-wrap: wrap; }
.abr-waren .abr-aus { flex: 0 0 100%; margin-left: 0; padding-left: 1.6rem; }
#abr-ergebnis a.abr-ausgebucht { margin-left: 0; }
@media (max-width: 600px) {
  .abr-aus { margin-left: 1.2rem; }
  .abr-waren .abr-aus { padding-left: 1.2rem; }
}
@media (max-width: 480px) {
  .tabs button { padding: 0.55rem 0.1rem; font-size: 0.8rem; }
}
.tag-fertig > summary { list-style: none; cursor: pointer; padding: 0.4rem 0.25rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--leise); }
.tag-fertig > summary::-webkit-details-marker { display: none; }
.tag-fertig > summary::before { content: ''; display: inline-block; width: 0.7rem; height: 0.45rem; margin-right: 0.5rem; background: var(--pfeil) center / contain no-repeat; transform: rotate(-90deg); }
.tag-fertig[open] > summary::before { transform: none; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* Kopf mit Plus (nur am Rechner sichtbar) */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.kopf h1 { margin-bottom: 1.25rem; }
.zahnrad { display: none; width: 2rem; height: 2rem; margin-bottom: 1.25rem; padding: 0; background: transparent; box-shadow: none; color: var(--leise); font-size: 1.5rem; line-height: 1; }
.zahnrad.aktiv { color: var(--akzent); }
/* Schmal: Einstellungen als Zahnrad oben rechts, damit die Reiter Platz haben */
@media (max-width: 999px) {
  body.drin .zahnrad { display: inline-flex; align-items: center; justify-content: center; }
  body.drin #tab-einstellungen { display: none; }
  /* Mehr Reiter als Platz: die Leiste scrollt seitlich */
  body.drin .tabs { overflow-x: auto; scrollbar-width: none; }
  body.drin .tabs::-webkit-scrollbar { display: none; }
  body.drin .tabs button { flex: 1 0 auto; padding: 0.55rem 0.8rem; }
}
.plus { position: relative; display: none; width: 2rem; height: 2rem; margin-bottom: 1.25rem; padding: 0; border-radius: 50%; }
/* Das Plus ist gezeichnet, nicht getippt: ein Schriftzeichen sitzt je nach Schrift nie genau mittig */
.plus::before, .plus::after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.plus::before { width: 14px; height: 2px; }
.plus::after { width: 2px; height: 14px; }
.spalte-links, .spalte-rechts { display: none; }

/* Treffer im Anlegen-Fenster */
.treffer-box { margin-top: 1rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--grund); }
.treffer-titel { margin: 0 0 0.3rem; color: var(--leise); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.treffer { margin: 0; padding: 0; list-style: none; }
.treffer-knopf { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 0.4rem 0.5rem; background: transparent; color: var(--text); font-weight: 500; text-align: left; box-shadow: none; }
.treffer-knopf:focus-visible, .treffer-knopf:hover { background: var(--flaeche); }

/* Am Rechner: Seitenleiste, Liste, Detail (Variante B) */
@media (min-width: 1000px) {
  body.drin { overflow: hidden; }
  body.drin main { max-width: none; height: 100vh; margin: 0; padding: 0; }
  body.drin #drin { display: grid; grid-template-columns: 15rem clamp(24rem, 32vw, 38rem) minmax(0, 1fr); height: 100vh; }
  .spalte-links, .spalte-rechts { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  .spalte-links { padding: 1.25rem 0.75rem; gap: 0.25rem; background: var(--flaeche); border-right: 1px solid var(--grund); }
  .spalte-links .kopf { padding: 0 0.5rem; }
  .plus { display: inline-block; }
  .spalte-links .tabs { flex-direction: column; margin: 0 0 0.75rem; padding: 0; background: none; }
  .spalte-links .tabs button { padding: 0.5rem 0.75rem; text-align: left; }
  .spalte-links .filter { margin: 0; padding: 0.4rem 0.5rem; background: none; }
  .spalte-links .filter-liste { max-height: none; }
  /* Am Rechner steht die Überschrift fest, die Liste ist immer offen */
  .spalte-links .filter > summary { list-style: none; pointer-events: none; cursor: default; }
  .spalte-links .filter > summary::-webkit-details-marker { display: none; }
  .spalte-links #filter-zahl { display: none; }
  .spalte-links .timer-leiste { position: sticky; bottom: 0; margin: auto 0 0; flex-direction: column; align-items: stretch; gap: 0.3rem; background: var(--grund); box-shadow: inset 0 0 0 1px var(--leise); }
  .spalte-links .timer-punkt { display: none; }
  .spalte-links .timer-leiste button.timer-zeit, .spalte-links .timer-eingabe { font-size: 1.3rem; text-align: left; }
  .spalte-links .timer-eingabe { width: 100%; }
  .spalte-mitte { min-width: 0; padding: 1.25rem 1.25rem 2rem; overflow-y: auto; border-right: 1px solid var(--flaeche); }
  .fab { display: none; }
  .meldung { left: 16rem; right: auto; bottom: 1rem; width: 26rem; max-width: calc(100vw - 17.25rem); }
  .spalte-rechts { padding: 1.25rem; }
  .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; }
  .aufgaben li.aktiv { background: color-mix(in srgb, var(--akzent) 11%, var(--flaeche)); }
  /* Tickets, Kunden, Abrechnung und Einstellungen: keine Detailspalte, der Inhalt bekommt die 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: 15rem minmax(0, 1fr); }
  #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; }
  #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; }
  #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; }
  #drin[data-seite='angebot'] .spalte-mitte > div { max-width: 52rem; }
  /* Der Projektfilter gehört nur zur Aufgabenliste */
  #drin[data-seite]:not([data-seite='aufgaben']) .spalte-links .filter { display: none; }
  /* Anlegen wird zur Eingabezeile in der Mitte (⌘K) */
  .neu { margin: 12vh auto auto; width: min(40rem, 92vw); padding-bottom: 1.25rem; border-radius: 16px; }
}

.aufgaben li.klickbar { cursor: pointer; }
@media (hover: hover) {
  .aufgaben li.klickbar:hover { background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche)); }
}
.aufgaben li.klickbar:hover a { text-decoration: none; }
.aufgaben li.klickbar.aktiv, .aufgaben li.klickbar.aktiv:hover { background: color-mix(in srgb, var(--akzent) 11%, var(--flaeche)); }

/* Schlank am Rechner: flache Flächen, Haarlinien, Grün nur als Akzent */
.s-desk, .s-zeile, .palette-fuss { display: none; }
kbd { padding: 0 0.35rem; border: 1px solid var(--rand, var(--flaeche)); border-radius: 4px; background: var(--grund); font: inherit; font-size: 0.8rem; color: var(--leise); }

@media (min-width: 1000px) {
  body.drin { --rand: color-mix(in srgb, var(--text) 11%, transparent); }

  /* Seitenleiste */
  body.drin .spalte-links { border-right: 1px solid var(--rand); }
  body.drin .tabs button[aria-selected='true'] { background: var(--grund); box-shadow: inset 0 0 0 1px var(--rand); }
  body.drin .filter > summary { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--leise); }
  body.drin .filter-knoepfe { gap: 1rem; margin: 0.5rem 0 0.4rem; }
  body.drin .filter-liste li { padding: 0.3rem 0; font-size: 0.9rem; color: var(--leise); }
  body.drin .filter-privat li { padding: 0.5rem 0.7rem; font-size: 0.95rem; }
  body.drin .spalte-links .timer-leiste { box-shadow: inset 0 0 0 1px var(--rand); }
  body.drin .spalte-links .timer-leiste button.klein { background: var(--akzent); }

  /* Liste: keine Karten, nur Linien */
  body.drin .spalte-mitte { 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 .suche { background: none; box-shadow: inset 0 0 0 1px var(--rand); }
  body.drin .aufgaben { background: none; border-radius: 0; overflow: visible; }
  /* Links mehr Luft, damit das Kästchen nicht am orangen Strich der gewählten Zeile klebt; Gruppenköpfe in derselben Flucht */
  body.drin .aufgaben li, body.drin .aufgaben li:last-child { padding: 0.65rem 0.5rem 0.65rem 0.9rem; border-bottom: 1px solid var(--rand); }
  body.drin .aufgaben li.klickbar:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
  body.drin .aufgaben li.klickbar.aktiv, body.drin .aufgaben li.klickbar.aktiv:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); }
  body.drin .gruppe h2 { padding: 0 0.5rem 0 0.9rem; }
  /* Das Menü zeigt sich erst beim Darüberfahren; Touch-Geräte sehen es immer */
  @media (hover: hover) {
    body.drin .mehr { opacity: 0; }
    body.drin .aufgaben li:hover .mehr, body.drin .aufgaben li:focus-within .mehr { opacity: 1; }
  }
  body.drin .chip { background: none; padding: 0; color: var(--leise); }
  body.drin .chip.pruefen-chip { color: var(--fehler); }
  body.drin .tag-summe { padding: 0 0.5rem; background: none; }

  /* Detail: Abschnitte ohne Kasten */
  body.drin .d-block { margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rand); border-radius: 0; background: none; }
  body.drin .d-block h3 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--leise); }
  body.drin textarea.text { border: 0; background: color-mix(in srgb, var(--text) 4%, transparent); }
  body.drin textarea.text:focus { outline: 2px solid color-mix(in srgb, var(--akzent) 60%, transparent); }
  body.drin textarea.text[readonly] { background: none; padding-left: 0; }
  body.drin .d-form input { border-color: var(--rand); }
  body.drin .d-knoepfe button.zweit, body.drin .d-knoepfe .knopf { box-shadow: inset 0 0 0 1px var(--rand); color: var(--text); }
  body.drin .d-knoepfe #d-timer { color: var(--akzent); }
  body.drin .zeit-knoepfe button { padding: 0.2rem 0.45rem; background: none; box-shadow: none; color: var(--leise); }
  body.drin .zeit-knoepfe .gefahr { color: var(--fehler); }
  body.drin .d-schnell button { background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: none; color: var(--text); font-weight: 500; }
  body.drin .d-liste li { border-bottom-color: var(--rand); }
  body.drin .neu-kopf button { box-shadow: none; }
  body.drin .spalte-rechts .neu-kopf { margin-bottom: 0.4rem; }
  body.drin .spalte-rechts .detail .meta { margin-bottom: 0.5rem; }

  /* Einstellungen: Abschnitte durch Linien getrennt */
  body.drin .block { margin: 0; padding: 1.25rem 0; border-top: 1px solid var(--rand); border-radius: 0; background: none; }
  body.drin .block:first-child { border-top: 0; padding-top: 0; }
  body.drin .block form { background: none; padding: 0; }
  body.drin .geraete li { border-bottom-color: var(--rand); }
  body.drin button.zweit { box-shadow: inset 0 0 0 1px var(--rand); color: var(--text); }
  body.drin .neues-token, body.drin .hinweis { background: color-mix(in srgb, var(--akzent) 9%, transparent); }

  /* Anlegen-Fenster als Befehlszeile */
  #neu { padding: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.25); }
  #neu .neu-kopf { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
  #neu .erfassen > .leise, #neu .vorschau { display: none; }
  /* „Als Aufgabe“ aus der Übersicht: der Hinweis auf die Beschreibung bleibt sichtbar */
  #neu .erfassen > #erfassen-notiz:not([hidden]) { display: block; margin: 0; padding: 0.5rem 1.2rem; border-bottom: 1px solid var(--rand); }
  #neu .feld { margin: 0; padding: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--rand); }
  #neu .hervor, #neu .feld textarea { padding: 0.95rem 1.2rem; border-radius: 0; border-color: transparent; }
  #neu .feld textarea:focus { outline: none; }
  #neu .senden { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; margin: 0; padding: 0.7rem 1.2rem; border-radius: 0; background: color-mix(in srgb, var(--akzent) 11%, transparent); color: var(--akzent); text-align: left; transition: none; }
  #neu .senden .s-mobil { display: none; }
  #neu .senden .s-desk { display: block; font-weight: 600; }
  #neu .senden .s-zeile { display: block; grid-column: 1; color: var(--leise); font-size: 0.85rem; font-weight: 400; }
  #neu .senden .s-zeile:empty { display: none; }
  #neu .senden::after { content: '↵'; grid-column: 2; grid-row: 1 / span 2; padding: 0 0.4rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--grund); color: var(--leise); font-size: 0.85rem; }
  #neu .treffer-box { margin: 0; padding: 0.6rem 0 0.3rem; border-radius: 0; background: none; }
  #neu .treffer-titel { padding: 0 1.2rem; }
  #neu .treffer-knopf { padding: 0.5rem 1.2rem; }
  #neu .ergebnis { margin: 0; padding: 0.8rem 1.2rem; border-radius: 0; border-bottom: 1px solid var(--rand); background: none; }
  #neu .fehler { margin: 0.6rem 1.2rem; }
  #neu .palette-fuss { display: flex; gap: 1.2rem; margin: 0.3rem 0 0; padding: 0.6rem 1.2rem; border-top: 1px solid var(--rand); background: var(--flaeche); color: var(--leise); font-size: 0.8rem; }
}

/* Angebot */
.ang-block h2 { margin: 0 0 0.5rem; }
.ang-block textarea, .ang-karte textarea { display: block; width: 100%; margin: 0; padding: 0.6rem; border: 1px solid var(--leise); border-radius: 8px; background: var(--grund); color: var(--text); font: inherit; resize: vertical; }
.ang-karte textarea { background: var(--flaeche); }
.ang-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; }
.ang-gitter label { margin: 0; min-width: 0; }
.ang-gitter select, .ang-gitter input { width: 100%; }
@media (max-width: 600px) { .ang-gitter { grid-template-columns: 1fr; } }
.ang-such { position: relative; }
.ang-such input { width: 100%; margin: 0.25rem 0 0; }
.ang-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.ang-hinweis:empty { display: none; }
.ang-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 0.8rem; }
.ang-textkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.ang-pille { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--flaeche); color: var(--leise); font-size: 0.78rem; white-space: nowrap; }
.ang-pille.ki { color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.ang-pille.warn { color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
.ang-pillen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ang-titelbox { position: relative; flex: 1; min-width: 0; }
.ang-titelbox .ang-pillen { position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); flex-wrap: nowrap; pointer-events: none; }
.ang-karte { margin: 0 0 0.6rem; padding: 0.7rem; border-radius: 0.7rem; background: var(--grund); }
.ang-karte textarea, .ang-karte input { background: var(--flaeche); }
.ang-karte.section { padding: 0.5rem 0.7rem; }
.ang-karte.zieht { opacity: 0.5; }
.ang-kopf { display: flex; align-items: center; gap: 0.4rem; }
.ang-kopf input { flex: 1; min-width: 0; margin: 0; }
.ang-kopf button { flex: none; margin: 0; }
.ang-kopf .ang-such { flex: 1; min-width: 0; }
.ang-kopf .ang-such input { margin: 0; }
.ang-platz { flex: 1; }
.ang-griff { flex: none; color: var(--leise); cursor: grab; user-select: none; letter-spacing: -0.15em; }
.ang-abschnitt { font-weight: 600; }
.ang-zahlen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; margin: 0.4rem 0; }
.ang-zahlen label { margin: 0; font-size: 0.8rem; color: var(--leise); }
.ang-zahlen input { display: block; width: 6.5rem; margin: 0.15rem 0 0; text-align: right; }
.ang-einheit { align-self: flex-end; padding-bottom: 0.6rem; }
.ang-summe { margin-left: auto; padding-bottom: 0.6rem; font-size: 0.95rem; }
.ang-hinzu { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.ang-suchbox { margin-bottom: 0.5rem; }
.ang-dialog h2 { margin-top: 0; }
.ang-verlauf { margin: 0 0 0.3rem; }
.ang-note { margin: 0.4rem 0; padding: 0.4rem 0.6rem; border-left: 3px solid var(--akzent); background: var(--flaeche); border-radius: 0 0.4rem 0.4rem 0; }
.ang-frage-text { margin: 0.6rem 0 0.4rem; font-weight: 600; }
.ang-empfohlen { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; box-shadow: inset 0 0 0 2px var(--akzent); }
.ang-dialog .ang-optionen { margin-bottom: 0.4rem; }
.ang-dialog .ang-eigene-zeile { margin-top: 0.5rem; }
.ang-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ang-eigene-zeile { display: flex; flex: 1 1 14rem; gap: 0.4rem; }
.ang-eigene-zeile input { flex: 1; min-width: 0; margin: 0; }
.ang-eigene-zeile button { flex: none; margin: 0; }
.ang-vorschlag { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--grund); }
.ang-vorschlag .abr-text { flex: 1; }
.ang-vorschlag button { margin: 0; }
.ang-netto { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.3rem; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.ang-fuss .ang-aktionen { margin-top: 0.5rem; }
#ang-ergebnis a { margin-left: 0.4rem; white-space: nowrap; }
#ang-ergebnis button { margin-left: 0.4rem; }
@media (max-width: 600px) {
  .ang-kopf { flex-wrap: wrap; row-gap: 0.4rem; }
  .ang-kopf > input, .ang-kopf > .ang-such, .ang-kopf > .ang-titelbox { order: -1; flex: 1 0 100%; }
  .ang-titelbox .ang-pillen { position: static; transform: none; margin-top: 0.4rem; flex-wrap: wrap; }
  .ang-griff, .ang-platz { flex: 1; }
}

/* Warenwirtschaft */
/* Unterbereiche als leise Textreiter, aktiv orange unterstrichen (docs/design.md) */
.lager-leiste { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin: 0 0 1rem; border-bottom: 1px solid var(--rand); }
.lager-leiste button { margin: 0; }
.lager-inhalt input[type='search'], .lager-inhalt input[type='text'] { width: 100%; }
.lager-inhalt label { display: block; margin: 0 0 0.6rem; }
.lager-inhalt label > input { margin-top: 0.25rem; }
.lager-erkannt .ang-pille { margin-left: 0.4rem; }
.lager-inhalt button { margin: 0; }
.lager-liste { margin-top: 0.75rem; }
.lager-gruppe { margin: 0 0 0.25rem; border-bottom: 1px solid var(--rand); }
.lager-gruppe > summary { display: flex; align-items: baseline; gap: 0.3rem; }
.lager-gruppe > summary .lager-gruppe-zahl { color: var(--leise); }
.lager-gruppe > summary .zahl { margin-left: auto; color: var(--titel); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.lager-gruppe[open] { border-bottom: 0; }
.lager-gruppe > .aufgaben { margin: 0 0 0.5rem; }
.lager-detail .lager-kategorie { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0; font-size: 0.9rem; }
.lager-detail .lager-kategorie select { width: auto; margin: 0; }
.aufgaben li.lager-zeile { display: block; padding: 0; }
.aufgaben li.lager-zeile > button.lager-kopf { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; height: auto; padding: 0.7rem 0.4rem; border-radius: 0; background: none; box-shadow: none; color: var(--text); font: inherit; text-align: left; filter: none; }
.aufgaben li.lager-zeile > button.lager-kopf:hover { background: var(--flaeche); filter: none; }
.lager-oben { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.lager-name { color: var(--titel); font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.lager-bestand { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--titel); white-space: nowrap; }
.lager-bestand.ohne { color: var(--leise); }
.lager-detail { padding: 0 0.4rem 0.6rem 1.6rem; }
.lager-detail h3 { margin: 0.6rem 0 0.2rem; color: var(--orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lager-unter { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.lager-unter .meta { display: inline; }
.lager-unter li, .aufgaben .lager-unter li { display: block; padding: 0.45rem 0; border: 0; border-top: 1px solid var(--rand); }
.lager-erfassen { display: grid; gap: 0.5rem; margin: 0 0 0.75rem; }
.lager-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lager-eingabe { display: flex; gap: 0.5rem; }
.lager-eingabe input { flex: 1; min-width: 0; margin: 0; }
.lager-hinweis { margin: 0 0 0.6rem; }
.lager-erkannt { margin: 0 0 0.75rem; padding: 0.75rem; border-radius: 4px; background: var(--flaeche); }
.lager-vorschau { display: block; max-width: 100%; max-height: 10rem; margin: 0 0 0.6rem; border-radius: 4px; object-fit: contain; }
.lager-optionen { display: grid; gap: 0.3rem; margin: 0 0 0.6rem; }
.lager-inhalt .lager-option { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.lager-option input { width: auto; margin: 0; }
.lager-neu { margin: 0.4rem 0 0 1.4rem; }
.lager-positionen { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.4rem; }
.lager-position, .lager-warte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.5rem 0.75rem; border-radius: 4px; background: var(--flaeche); }
.lager-position .lager-name { flex: 1 1 10rem; }
.lager-position input[type='text'] { flex: 1 1 10rem; min-width: 0; margin: 0; }
.lager-menge { width: 5rem; margin: 0; }
.lager-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lager-ergebnis { margin: 0.75rem 0 0; padding: 0.8rem 1rem; border-left: 4px solid var(--akzent); background: var(--orange-hauch); }
/* Reservieren (odoo:716): Fehlmenge in der Fehlerfarbe, die Liste der Reservierungen unter dem Formular */
.lager-fehlt { color: var(--fehler); }
.lager-reservierungen { margin-top: 1.5rem; }
/* Meta-Zeilen sind sonst Flex mit Abstand; hier fließt „· 2 zu bestellen“ im Text weiter */
.lager-reservierungen .meta, .lager-kopf .meta { display: block; }
.lager-reservierungen .meta { margin: 0.1rem 0 0; }
.lager-zaehlung { margin-top: 0.75rem; }
.lager-scan { width: min(32rem, 94vw); padding: 0.75rem; border: 0; border-radius: 6px; background: var(--grund); color: var(--text); }
.lager-scan::backdrop { background: rgba(0, 0, 0, 0.6); }
.lager-video { display: block; width: 100%; max-height: 60vh; border-radius: 4px; background: #000; object-fit: cover; }
.lager-position .ang-pille { margin-left: 0.4rem; }
.lager-inhalt select { display: block; width: 100%; margin: 0.25rem 0 0.75rem; padding: 0.6rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--grund); color: var(--text); font: inherit; }
.lager-art { flex: 0 1 11rem; min-width: 0; margin: 0; }
.lager-position input.lager-asset { flex: 1 1 9rem; }
.aufgaben li.lager-geraet { display: block; }
.lager-geraet .lager-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.lager-geraet .lager-name .meta { flex-basis: 100%; }
.lager-asset-nr { color: var(--titel); font-weight: 400; font-variant-numeric: tabular-nums; }
.lager-asset-feld { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; margin-top: 0.3rem; }
.lager-asset-feld input { flex: 1 1 12rem; min-width: 0; margin: 0; }
.lager-inhalt .lager-leiste + p, .lager-inhalt .lager-leiste + ul { margin-top: 0; }
.lager-tickets { margin-top: 0.4rem; display: grid; gap: 0.2rem; font-size: 0.9rem; }
/* Die Knöpfe am Gerät sind Textlinks; Entsorgen in der Fehlerfarbe, die Kette schlägt die Farbe der Textlinks */
body.drin .lager-geraet .lager-asset-feld button.zweit.gefahr { color: var(--fehler); }
.lager-asset-feld p { flex-basis: 100%; margin: 0; }
/* Etikett-Bündel (odoo:693): gewählte Geräte als eigene Zeilen, Suche und Treffer in voller Breite */
.lager-buendel { flex-basis: 100%; display: grid; gap: 0.25rem; }
.lager-buendel .chip { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.5rem; color: var(--text); font-weight: 400; }
.lager-asset-feld input[type='search'], .lager-asset-feld .lager-treffer { flex-basis: 100%; }
.lager-asset-feld .lager-treffer { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.lager-asset-feld .lager-treffer:empty { display: none; }
.lager-nachweis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--rand, color-mix(in srgb, var(--text) 18%, transparent)); }
.lager-nachweis select, .lager-nachweis button { margin: 0; width: auto; }

/* Aufträge: ein Auftrag ist eine Gruppe, jede Position eine Zeile (docs/design.md) */
.auf-gruppenkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin: 1.25rem 0 0.2rem; }
.auf-auftrag:first-child .auf-gruppenkopf { margin-top: 0; }
.auf-gruppenkopf h2 { display: block; margin: 0; }
.auf-gruppenkopf h2 a, .auf-gruppenkopf h2 span { color: inherit; text-decoration: none; }
.auf-gruppenkopf .zahl { padding-right: 0.4rem; color: var(--titel); font-size: 0.9rem; white-space: nowrap; }
.auf-gruppenkopf h2 .auf-alias { color: var(--titel); }
.auf-alias-form { margin: 0 0 0.6rem; padding: 0 0.4rem; }
.auf-alias-form input[type='text']:first-child { flex: 1 1 14rem; }
.auf-alias-form button { margin: 0; width: auto; }
.aufgaben li.auf-position { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; }
.auf-text { flex: 1 1 0; min-width: 0; }
.auf-titel { color: var(--titel); overflow-wrap: anywhere; }
.auf-position .zahl.ueber, .auf-position .meta.kontingent.ueber, .kontingent-ueber { color: var(--fehler); }
.auf-position .zahl.knapp, .auf-position .meta.kontingent.knapp { color: var(--orange-text); }
.kontingent-hinweis { margin: -0.25rem 0 1rem; }
.auf-position .knoepfe { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 0.2rem 1rem; }
.auf-frei { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.auf-frei[hidden] { display: none; }
.auf-frei input { margin: 0; min-width: 0; }
.auf-frei input[type='text'] { flex: 2 1 12rem; }
.auf-frei input[type='date'] { flex: 1 1 9rem; }
.auf-frei button { margin: 0; width: auto; }
.lager-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.lager-filter button { margin: 0; }

/* Reiter in Gruppen: Überschrift am Rechner, am Telefon nur ein feiner Strich */
.tab-gruppe { flex: 0 0 auto; align-self: stretch; width: 1px; margin: 0.35rem 0.2rem; background: var(--rand, color-mix(in srgb, var(--text) 18%, transparent)); font-size: 0; }
@media (min-width: 1000px) {
  .spalte-links .tabs .tab-gruppe { width: auto; margin: 0.9rem 0.75rem 0.2rem; background: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); }
  .spalte-links .tabs .tab-gruppe:first-child { margin-top: 0; }
  .spalte-links .tabs .tab-ende { height: 1px; margin: 0.9rem 0.75rem 0.4rem; background: var(--rand, color-mix(in srgb, var(--text) 18%, transparent)); font-size: 0; }
}
@media (max-width: 999px) { .tabs .tab-gruppe:first-child { display: none; } }

/* Bilanz (odoo:666): Gruppenkopf wie bei den Aufträgen, Zähler leise, überfällige Rechnungen rot */
.bilanz .gruppe + .gruppe .auf-gruppenkopf { margin-top: 1.5rem; }
.bilanz .auf-gruppenkopf h2 span { color: var(--leise); }
.bilanz .meta.ueberfaellig { color: var(--fehler); }
.bilanz li .meta { margin: 0.15rem 0 0; }

/* Bilanz-Grafiken (odoo:669): am Rechner rechts neben der Liste, am Telefon darunter. Farben nur aus marke.css:
   rein in --akzent, raus in --leise, Haarlinien in --rand, Text in Texttönen (nie in der Datenfarbe) */
.bilanz-grafik { min-width: 0; margin-top: 1.5rem; }
.bg-gruppe + .bg-gruppe { margin-top: 1.5rem; }
.bg-gruppe h2 { margin-bottom: 0.5rem; }
.bg-plot { position: relative; }
.bg-svg { display: block; overflow: visible; }
.bg-gitter { stroke: var(--rand); stroke-width: 1; }
.bg-null { stroke: var(--leise); stroke-width: 1; opacity: 0.5; }
.bg-achse { fill: var(--leise); font-size: 11px; }
.bg-wert { fill: var(--titel); font-size: 12px; font-weight: 700; }
.bg-linie { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bg-flaeche { fill: var(--akzent); opacity: 0.1; }
.bg-punkt { fill: var(--akzent); stroke: var(--grund); stroke-width: 2; }
.bg-kreuz { stroke: var(--leise); stroke-width: 1; }
.bg-treffer { fill: transparent; cursor: crosshair; }
path.bg-rein, i.bg-rein, .bg-balken.bg-rein { fill: var(--akzent); background: var(--akzent); }
path.bg-raus, i.bg-raus, .bg-balken.bg-raus { fill: var(--leise); background: var(--leise); }
.bg-tip { position: absolute; top: -0.4rem; z-index: 2; padding: 0.3rem 0.55rem; border-radius: 4px; background: var(--titel); color: var(--grund); font-size: 0.8rem; white-space: nowrap; pointer-events: none; }
.bg-legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 0.5rem; color: var(--leise); font-size: 0.8rem; }
.bg-legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.bg-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.bg-zwei { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.bg-partner { margin: 0; padding: 0; list-style: none; }
.bg-partner li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; padding: 0.35rem 0; font-size: 0.85rem; }
.bg-name { overflow: hidden; color: var(--titel); text-overflow: ellipsis; white-space: nowrap; }
.bg-betrag { color: var(--titel); font-weight: 700; }
.bg-spur { grid-column: 1 / -1; height: 8px; }
.bg-balken { display: block; height: 8px; border-radius: 0 4px 4px 0; }
@media (min-width: 560px) {
  .bg-zwei { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  #drin[data-seite='buchhaltung'][data-teil='bilanz'] .spalte-mitte > div { max-width: 82rem; }
  .bilanz-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .bilanz-grafik { position: sticky; top: 1rem; margin-top: 0; }
  .bg-zwei { grid-template-columns: 1fr; }
}
@media (min-width: 1400px) {
  .bg-zwei { grid-template-columns: 1fr 1fr; }
}

/* Garantie und Lizenz am Gerät (odoo:693) */
.lager-geraet .meta.ablauf.bald { color: var(--orange-text); }
.lager-geraet .meta.ablauf.abgelaufen { color: var(--fehler); }

/* QR-Etikett (odoo:693): nur beim Drucken sichtbar, 62 × 29 mm (Brother DK-11209) */
.etikett { display: none; }
@media print {
  @page { size: 62mm 29mm; margin: 1.5mm; }
  body > *:not(#etikett) { display: none !important; }
  body { background: #fff; }
  .etikett { display: flex; align-items: center; gap: 2mm; width: 59mm; height: 26mm; color: #000; font-family: inherit; }
  .etikett-qr { width: 24mm; height: 24mm; flex: none; }
  .etikett-text { display: flex; flex-direction: column; gap: 0.6mm; min-width: 0; font-size: 6.5pt; line-height: 1.15; overflow: hidden; }
  .etikett-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .etikett-text strong { font-size: 10pt; }
  .etikett-firma { margin-top: 1mm; font-size: 6pt; }
}

/* Auswahl beim Tippen im Erfassen-Fenster (odoo:695): @ Kunde, # Auftrag, Aufgabe oder Ticket */
.auswahl { margin-top: 0.5rem; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); overflow: hidden; }
.auswahl-neu { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem; border-bottom: 1px solid var(--rand); }
.auswahl-neu .auswahl-knopf { justify-content: center; border: 1px solid var(--rand); border-radius: 8px; font-weight: 600; text-align: center; }
.auswahl-liste { max-height: 18rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.auswahl-titel { padding: 0.5rem 0.8rem 0.2rem; color: var(--orange-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.auswahl-liste li + li:not(.auswahl-titel) { border-top: 1px solid var(--rand); }
.auswahl-knopf { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 0.45rem 0.8rem; background: transparent; color: var(--text); font-weight: 500; text-align: left; box-shadow: none; }
.auswahl-knopf.aktiv, .auswahl-knopf:hover { background: color-mix(in srgb, var(--akzent) 11%, transparent); }
.ziel { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; padding: 0.2rem 0.3rem 0.2rem 0.7rem; border: 1px solid var(--akzent); border-radius: 8px; color: var(--orange-text); font-size: 0.9rem; font-weight: 600; }
.ziel[hidden] { display: none; }
.ziel .zweit { padding: 0 0.45rem; }
@media (min-width: 1000px) {
  #neu .auswahl { margin: 0; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; }
  #neu .auswahl-neu { padding: 0.6rem 1.2rem; }
  #neu .auswahl-titel { padding: 0.6rem 1.2rem 0.2rem; }
  #neu .auswahl-knopf.auswahl-zeile { padding: 0.45rem 1.2rem; }
  #neu .ziel { margin: 0.7rem 1.2rem 0; }
}
#ziel-text { cursor: pointer; }

/* Aufgaben einer Position zuordnen (odoo:701) */
.auf-zuordnen { flex-basis: 100%; margin: 0.4rem 0 0.6rem; padding: 0.6rem 0.75rem; border-radius: 8px; background: var(--flaeche); }
.auf-zuordnen[hidden] { display: none; }
.auf-haken-liste { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.auf-zuordnen form { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.auf-haken-liste li { display: block; margin: 0; padding: 0; border: 0; background: none; }
.auf-haken-liste li + li { border-top: 1px solid var(--rand); }
.auf-haken { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; padding: 0.45rem 0; cursor: pointer; }
.auf-haken input { flex: none; width: auto; margin: 0.2rem 0 0; accent-color: var(--akzent); }
.auf-haken > span { display: flex; flex-direction: column; }
.auf-zuordnen button { margin: 0.3rem 0 0; width: auto; }

/* Aufgaben von … (odoo:702) */
.person-wahl { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; color: var(--leise); font-size: 0.9rem; }
.person-wahl[hidden] { display: none; }
.person-wahl select { width: auto; flex: 1 1 auto; max-width: 18rem; margin: 0; }
#d-leute-form { margin-top: 0.5rem; }
#d-leute-form[hidden] { display: none; }
#d-leute-form button { width: auto; margin: 0.3rem 0 0; }
/* Ausbuchen/Reservieren: Bestand zum Antippen (Nils am 2026-10-30) */
.lager-bestand-wahl { margin-top: 1.5rem; }
.lager-bestand-wahl input[type='search'] { margin-bottom: 0.5rem; }
.lager-gewaehlt { color: var(--orange-text); font-weight: 700; }
.aufgaben li.lager-zeile.gewaehlt > button.lager-kopf { background: var(--orange-hauch); }
.lager-geraete-wahl { padding: 0 0 0.4rem 1.2rem; }
.lager-geraete-wahl li, .aufgaben .lager-geraete-wahl li { padding: 0; }
button.lager-geraet-wahl { display: flex; flex-direction: column; gap: 0.1rem; width: 100%; height: auto; padding: 0.5rem 0.4rem; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); font: inherit; text-align: left; filter: none; }
button.lager-geraet-wahl:hover { background: var(--flaeche); filter: none; }
button.lager-geraet-wahl[aria-pressed='true'] { background: var(--orange-hauch); color: var(--titel); font-weight: 700; }
button.lager-geraet-wahl .meta { display: block; font-weight: 400; }

/* Texte aufhübschen (Backlog 183) */
.abr-texte { padding: 0.5rem 0 0.25rem; }
.abr-texte-liste { list-style: none; margin: 0.5rem 0; padding: 0; }
.abr-texte-liste li { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rand); }
.abr-texte-liste textarea.text { margin: 0; }
/* Belege (odoo:726): Kopf wie eine Rechnungszeile, darunter Positionen und Knöpfe; doppelte Klasse schlägt „body.drin .aufgaben li:last-child“ */
.beleg-feld { position: relative; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: var(--leise); }
.beleg-lieferant { flex: 1 1 14rem; }
.beleg-feld input { margin: 0; }
.beleg-aendern { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; margin-top: 0.6rem; }
.beleg-aendern .zeile-aktionen { margin: 0; }
.beleg-aendern .zeile-aktionen button:not(.textlink) { width: auto; margin: 0; }
.abr-belege-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.abr-belege-kopf button { width: auto; margin: 0; }

/* Ticket-Verlauf (odoo:756): Liste mit Haarlinien, Notizen mit orangem Hauch, Kundenmails mit Akzentkante */
.ticket-verlauf .verlauf { list-style: none; margin: 0.75rem 0 0; padding: 0; }
/* Die Zeilen sind li in der Ticketliste (.aufgaben), deren Raster und Haarlinie gelten hier nicht */
.ticket-verlauf .verlauf li, body.drin .ticket-verlauf .verlauf li,
body.drin .ticket-verlauf .verlauf li:last-child { display: block; min-height: 0; padding: 0.6rem 0; border-top: 1px solid var(--rand); border-bottom: 0; }
body.drin .ticket-verlauf .verlauf li.verlauf-note { background: var(--orange-hauch); padding-inline: 0.6rem; }
body.drin .ticket-verlauf .verlauf li.verlauf-in { border-left: 3px solid var(--akzent); padding-left: 0.6rem; }
body.drin .ticket-verlauf .verlauf li.verlauf-system { padding: 0.35rem 0; }
.ticket-verlauf .verlauf-kopf { font-size: 0.85rem; color: var(--leise); }
.ticket-verlauf .verlauf-kopf strong { color: var(--titel); }
.ticket-verlauf .verlauf-betreff { font-weight: 700; color: var(--titel); margin-top: 0.15rem; }
.ticket-verlauf .verlauf-text { white-space: pre-line; overflow-wrap: anywhere; margin: 0.25rem 0 0; }
.ticket-verlauf .verlauf-fuss { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin-top: 0.25rem; }
.ticket-verlauf .verlauf-fuss a { color: var(--orange-text); }

/* Übersicht (Nils am 2026-11-01, odoo:769): eine Kennzahl-Zeile ohne Kästen (Ausnahme, docs/design.md), Gruppen in drei Spalten ab 1000px */
.ueb-kennzahlen { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 0.25rem 0 1.25rem; padding: 0 0 1rem; border-bottom: 1px solid var(--rand); }
.ueb-kennzahl { display: grid; gap: 0.05rem; min-width: 7rem; color: var(--text); text-decoration: none; }
.ueb-kennzahl strong { color: var(--titel); font-size: 1.6rem; line-height: 1.15; }
.ueb-kennzahl.warnung strong { color: var(--fehler); }
.ueb-kennzahl:hover strong, .ueb-kennzahl:focus-visible strong { text-decoration: underline; }
.ueb-spalten { display: grid; gap: 0 2.5rem; }
.ueb-spalte { min-width: 0; }
.ueb-gruppe { margin-bottom: 1.25rem; }
.aufgaben li.ueb-zeile { flex-wrap: nowrap; align-items: start; }
.ueb-zeile .auf-text { flex: 1 1 auto; min-width: 0; }
.ueb-zeile .haken { flex: none; margin-top: 0.15rem; }
.ueb-zeile .zahl { flex: none; }
.ueb-uhr { flex: none; align-self: start; width: 4.5rem; padding-top: 0.1rem; color: var(--titel); font-variant-numeric: tabular-nums; font-weight: 700; }
.ueb-uhr.laeuft { color: var(--orange-text); }
.ueb-zeile .ueb-kunde { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ueb-zeile .meta.ueberfaellig { color: var(--fehler); }
.ueb-zeile .ueb-neu { margin-left: 0.4rem; font-size: 0.75rem; vertical-align: 0.1em; }
/* Meta aus Teilen mit Link: fließender Text statt der Flex-Zeile der Listen */
.ueb-zeile .meta.ueb-teile { display: block; }
.ueb-alle, .ueb-zeile .ueb-mahnen { color: var(--orange-text); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.ueb-alle { display: inline-block; margin: 0.5rem 0 0; }
.ueb-mahnen { display: inline-block; margin: 0.15rem 0 0; }
.ueb-alle:hover, .ueb-mahnen:hover { text-decoration: underline; }
@media (min-width: 1000px) {
  .ueb-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #drin[data-seite='uebersicht'] .spalte-mitte > div { max-width: 96rem; }
}
/* Ein Formular rechts (Zeit zuordnen nach dem freien Timer, odoo:834) lässt der Übersicht zu wenig Platz für drei Spalten */
@media (min-width: 1000px) and (max-width: 1599px) {
  #drin.formular-offen .ueb-spalten { grid-template-columns: minmax(0, 1fr); }
}