: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-box { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-radius: 4px; 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; } }
/* Budget einer Aufgabe (odoo:894): Dauer = Budget, gebucht dagegen; drüber nur rot, nie gesperrt */
.timer-budget { flex: none; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timer-budget[hidden] { display: none; }
.timer-budget.ueber, .budget-kurz.ueber, .budget.ueber, .budget-hinweis.ueber { color: var(--fehler); font-weight: 700; }
body.drin button.kopf-uhr.ueber, body.drin button.kopf-uhr.ueber:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--fehler); color: var(--fehler); }
.budget-kurz { flex: none; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem; }
.budget[hidden] { display: none; }
.budget-spur { flex: 0 1 8rem; height: 4px; border-radius: 2px; background: var(--rand); overflow: hidden; }
.budget-balken { display: block; height: 100%; background: var(--akzent); }
.budget.ueber .budget-balken { background: var(--fehler); }

/* 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); }
/* Neues Angebot aus Vorlage: lange Angaben (Kunde · Stand · Datum · Betrag) brechen am Telefon in eine eigene Zeile um */
#ang-vorlage-wahl { margin-top: 0.75rem; }
#ang-vorlage-wahl .abr-dropdown button { flex-wrap: wrap; }
#ang-vorlage-wahl .abr-dropdown .meta { flex: 0 1 auto; min-width: 0; }
.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-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; }

  /* 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; }
  /* Tastenhinweise: je Taste mit Text eine Einheit in einer Zeile, umgebrochen wird nur zwischen den Einheiten */
  #neu .palette-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1.25rem; margin: 0.3rem 0 0; padding: 0.65rem 1.2rem; border-top: 1px solid var(--rand); background: var(--flaeche); color: var(--leise); font-size: 0.8rem; line-height: 1.3; }
  #neu .palette-fuss > span { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
  #neu .palette-fuss kbd { box-sizing: border-box; min-width: 1.5rem; padding: 0.05rem 0.35rem; text-align: center; line-height: 1.3; }
}

/* 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; }
/* Formatieren (Nils am 2026-11-11): Leiste aus Textlinks über dem Feld, Vorschau darunter wie im gedruckten Angebot */
.ang-format { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin: 0 0 0.35rem; }
body.drin .ang-format button.ang-fett, .ang-format button.ang-fett { font-weight: 700; }
.ang-format .ang-kursiv { font-style: italic; }
.ang-format .ang-vorschau-schalter { margin-left: auto; }
.ang-stile { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ang-format .ang-vorschau-schalter[aria-pressed='true'] { color: var(--titel); font-weight: 700; }
.ang-vorschau { margin-top: 0.5rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--rand); background: var(--grund); }
.ang-vorschau > :first-child { margin-top: 0; }
.ang-vorschau > :last-child { margin-bottom: 0; }
.ang-vorschau h3 { margin: 0.6rem 0 0.3rem; font-size: 1.1rem; }
.ang-vorschau h4 { margin: 0.5rem 0 0.25rem; font-size: 1rem; }
.ang-vorschau p, .ang-vorschau ul, .ang-vorschau ol { margin: 0.3rem 0; }
.ang-vorschau ul, .ang-vorschau ol { padding-left: 1.4rem; }
.ang-vorschau table { width: 100%; margin: 0.4rem 0; border-collapse: collapse; }
.ang-vorschau th, .ang-vorschau td { padding: 0.25rem 0.5rem; border: 1px solid var(--rand); text-align: left; vertical-align: top; }
.ang-vorschau th { background: var(--flaeche); }
.ang-vorschau hr { margin: 0.6rem 0; border: 0; border-top: 1px solid var(--rand); }
.ang-vorschau .ang-vorschau-hinweis { margin-top: 0.5rem; }
.ang-textkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.ang-textkopf .ang-alsprodukt { margin-left: auto; }
.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; }
.lager-detail .lager-kategorie input[type='date'] { width: auto; margin: 0; }
/* Produkt anlegen, Geräte aufnehmen (odoo:861) */
label.mit-haken, .lager-inhalt label.mit-haken { display: flex; align-items: center; gap: 0.5rem; }
label.mit-haken input { width: auto; margin: 0; }
.produkt-neu .unterreiter { margin-bottom: 0.25rem; }
.produkt-aufnahme { display: grid; gap: 0.5rem; padding-left: 0.75rem; border-left: 3px solid var(--rand); }
.abr-positionen.produkt-geraete > li { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.abr-positionen.produkt-geraete > li .zeile-aktionen { grid-column: 1 / -1; }
.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; }
/* Zeiten einer Position (Nils am 2026-11-10): Monate als kleine Gruppen unter der Position */
.auf-zeiten { flex-basis: 100%; margin: 0.4rem 0 0.6rem; padding: 0.6rem 0.75rem; border-radius: 4px; background: var(--flaeche); }
.auf-zeiten > .meta { margin: 0 0 0.6rem; }
.auf-zeiten .gruppe { margin: 0 0 0.8rem; }
.auf-zeiten .gruppe:last-child { margin-bottom: 0; }
.auf-zeiten .zeile.ohne-text .zeile-titel { color: var(--leise); font-style: italic; }
.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): Kennzahl-Zeile und Gruppen in drei Spalten ab 1000px.
   Karten (Variante A, Nils am 2026-11-11, Ausnahme in docs/design.md Abschnitt 5): jede Gruppe ein Kasten auf grauer Fläche,
   Kopf mit Haarlinie, Fuß mit „+ N weitere“ und „Alle →“. Im Dunkeln heller Kasten auf dunklem Grund. */
#drin[data-seite='uebersicht'] { --ueb-seite: var(--flaeche); --ueb-karte: var(--grund); }
@media (prefers-color-scheme: dark) { #drin[data-seite='uebersicht'] { --ueb-seite: var(--grund); --ueb-karte: var(--flaeche); } }
#drin[data-seite='uebersicht'] .spalte-mitte { background: var(--ueb-seite); }
.ueb-gruppe, .ueb-kennzahlen { background: var(--ueb-karte); border: 1px solid var(--rand); border-radius: 10px; }
.ueb-gruppe { overflow: hidden; }
.ueb-gruppe > .auf-gruppenkopf { margin: 0; padding: 0.85rem 1.1rem 0.6rem; border-bottom: 1px solid var(--rand); }
.ueb-gruppe > .auf-gruppenkopf h2 span { color: var(--leise); }
.ueb-gruppe > ul.aufgaben { margin: 0; padding: 0 1.1rem; }
body.drin .ueb-gruppe > ul.aufgaben > li:last-child { border-bottom: 0; }
.ueb-gruppe > .leer { margin: 0; padding: 0.8rem 1.1rem; }
.ueb-gruppe > .leer:empty { display: none; }
.ueb-fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 1.1rem; border-top: 1px solid var(--rand); background: var(--ueb-seite); }
.ueb-fuss .ueb-alle { margin: 0; }
.ueb-mehr { color: var(--leise); font-size: 0.85rem; text-decoration: none; }
.ueb-mehr:hover { text-decoration: underline; }
.ueb-kennzahlen { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 0.25rem 0 1.25rem; padding: 1.1rem 1.5rem; }
.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 1.25rem; align-items: start; }
.ueb-spalte { display: grid; gap: 1.25rem; min-width: 0; 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); }
}

/* Tagesplan (odoo:857, Nils am 2026-11-10): heute und morgen, Raster 6–18 Uhr. Termine als Fläche mit oranger Kante,
   Aufgaben nur mit Kante, ohne Fläche; Lage und Höhe kommen als Anteil (--oben, --hoehe) aus uebersicht.js */
.ueb-plan { margin-bottom: 1.25rem; }
.ueb-plan .auf-gruppenkopf { gap: 0.75rem; }
.ueb-plan .plan-tage { padding: 0 1.1rem 0.4rem; }
.ueb-plan .plan-stunde span, .ueb-plan .plan-eintrag.aufgabe { background: var(--ueb-karte); }
.ueb-plan .auf-gruppenkopf .ueb-alle { margin: 0 0 0 auto; }
body.drin .plan-umschalter { gap: 1rem; margin: 0; border-bottom: 0; }
body.drin .plan-umschalter button, body.drin .plan-umschalter button:not(:disabled):hover { padding: 0.1rem 0; font-size: 0.9rem; }
.plan-tage { display: grid; gap: 1.25rem 2.5rem; }
.plan-tag.plan-aus { display: none; }
.plan-tagkopf { margin: 0.6rem 0 0.4rem; color: var(--titel); font-size: 0.95rem; }
.plan-tagkopf .leise { font-weight: 400; font-size: 0.85rem; }
.plan-ganztags { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin: 0 0 0.5rem 3rem; }
.plan-ganz { padding: 0.15rem 0.5rem; border-left: 3px solid var(--akzent); background: var(--orange-hauch); color: var(--titel); font-size: 0.85rem; text-decoration: none; }
.plan-ganz.plan-ganz-ohne { border-left-color: var(--rand); background: none; color: var(--leise); }
.plan-ganz:hover { text-decoration: underline; }
.plan-rand { margin: 0 0 0.4rem 3rem; }
.plan-raster { position: relative; height: calc(12 * 2.6rem); margin: 0.5rem 0 0.75rem; }
.plan-stunde { position: absolute; left: 0; right: 0; top: calc(var(--oben) * 100%); border-top: 1px solid var(--rand); }
.plan-stunde span { position: absolute; top: -0.55rem; left: 0; width: 2.6rem; padding-right: 0.4rem; background: var(--grund); color: var(--leise); font-size: 0.72rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan-flaeche { position: absolute; inset: 0 0 0 3rem; }
.plan-eintrag {
  position: absolute; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 0.05rem;
  top: calc(var(--oben) * 100% + 1px); height: calc(var(--hoehe) * 100% - 2px);
  left: calc(var(--spur) / var(--spuren) * 100%); width: calc(100% / var(--spuren) - 3px);
  margin: 0; padding: 0.2rem 0.45rem; border: 0; border-left: 3px solid var(--akzent); border-radius: 0;
  background: var(--orange-hauch); color: var(--text); font: inherit; font-size: 0.8rem; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer;
}
.plan-eintrag.aufgabe { border: 1px solid var(--rand); border-left: 3px solid var(--leise); background: var(--grund); }
.plan-eintrag.laeuft { border-left-color: var(--orange-text); }
.plan-eintrag:hover .plan-titel, .plan-eintrag:focus-visible .plan-titel { text-decoration: underline; }
.plan-eintrag.kurz { flex-direction: row; align-items: baseline; gap: 0.4rem; padding-block: 0 0; white-space: nowrap; }
.plan-zeit { color: var(--leise); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.plan-eintrag > span { flex: none; }
.plan-titel { overflow: hidden; color: var(--titel); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.plan-eintrag.lang .plan-titel { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.plan-meta { overflow: hidden; color: var(--leise); white-space: nowrap; text-overflow: ellipsis; }
.plan-jetzt { position: absolute; left: -0.3rem; right: 0; top: calc(var(--oben) * 100%); border-top: 2px solid var(--orange-text); pointer-events: none; }
.plan-jetzt::before { content: ''; position: absolute; left: -0.25rem; top: -0.3rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--orange-text); }
@media (min-width: 700px) {
  .plan-tage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-tag.plan-aus { display: block; }
  body.drin .plan-umschalter { display: none; }
  .plan-raster { height: calc(12 * 2.3rem); }
}

/* Rechte Spalte der Aufgaben (odoo:864, Nils am 2026-11-11): ein Tag des Plans (umschaltbar), darunter die Woche.
   Gezogene Aufgaben: die Fläche unter dem Zeiger bekommt eine gestrichelte Kante, im Plan zeigt eine Linie die Uhrzeit */
.spalte-plan { padding-bottom: 2rem; }
.spalte-plan .plan-spalte { margin-bottom: 1.25rem; }
.spalte-plan .auf-gruppenkopf { gap: 0.75rem; }
.spalte-plan .auf-gruppenkopf .ueb-alle { margin: 0 0 0 auto; }
.spalte-plan .plan-spalte > .leise { margin: 0.2rem 0 0; }
.spalte-plan .plan-tage { grid-template-columns: minmax(0, 1fr); }
.spalte-plan .plan-tag.plan-aus { display: none; }
body.drin .spalte-plan .plan-umschalter { display: flex; }
.spalte-plan .plan-raster { height: calc(12 * 2.6rem); }
.plan-ziel { position: absolute; left: 0; right: 0; top: calc(var(--oben) * 100%); border-top: 2px dashed var(--akzent); pointer-events: none; color: var(--orange-text); font-size: 0.72rem; font-weight: 700; }
.plan-ziel[hidden] { display: none; }
.plan-raster.ablage-ziel, .woche-tag.ablage-ziel { outline: 2px dashed var(--akzent); outline-offset: 3px; }
.zieht { opacity: 0.45; }
[draggable='true'] { -webkit-user-drag: element; }
.woche-tag { margin-bottom: 1rem; }
.woche-tag .liste > .zeile:not(.woche-termin) { cursor: grab; }

/* Post am Vorgang (odoo:866–868): Antworten, Empfänger, Vorschlag im Reiter Post */
.post-antwort { display: grid; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.post-antwort .kennzeile { margin: 0.25rem 0 0; }
.post-empfaenger { display: grid; gap: 0.25rem; }
.post-wahl { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
.post-wahl input { width: auto; margin: 0.2rem 0 0; flex: none; }
.post-wahl .meta { display: block; }
.post-senden { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.post-senden button { width: auto; margin: 0; }
.post-vorschlag { display: grid; gap: 0.3rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--rand); }
.post-vorschlag .kennzeile { margin: 0; }
.post-vorschlag > button { width: auto; justify-self: start; margin: 0.25rem 0 0; text-align: left; }
.post-mail .verlauf-text { white-space: pre-line; overflow-wrap: anywhere; margin: 0.25rem 0 0; }
.post-andere { display: grid; gap: 0.5rem; }
.post-vorgang > .meta:first-child { margin: 0 0 0.25rem; }
.post-dateien { margin: 0.5rem 0 0; }
/* Aus Dokument übernehmen (odoo:879): Abstand zu den Knöpfen in Schritt 1 */
#ang-dokument { margin-top: 0.75rem; }