/* Backstube-Board – gemeinsame Grundlage für Dashboard und Handy-App */
/* Farben und Formen nach dem Auftritt von Märkisches Landbrot:
   drei Farben, Großbuchstaben in den Überschriften, flach und kantig. */
:root {
  --crust:      #3f2618;   /* Dunkelbraun – Schrift und dunkle Flächen */
  --crust-dark: #2a190f;
  --dough:      #e5e4dd;   /* Greige – der Seitengrund */
  --dough-2:    #ffffff;   /* Weiß – Karten und Felder */
  --line:       #d2d0c6;
  --ink:        #3f2618;
  --ink-soft:   #6e6256;
  --accent:     #8abae3;   /* Hellblau – der Farbtupfer der Website */
  --accent-strong: #3d7cb5;
  --ok:         #4a7c59;
  --warn:       #b5761f;
  --alarm:      #a63a2b;
  --shadow:     none;
  --radius:     2px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--dough);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Ein Knopf sieht überall gleich aus: dieselbe Form, dieselbe Schrift,
   dieselbe Größe – auf dem Brett, in jeder Maske, in beiden Ansichten.
   Vorbild ist die Reiterzeile im Dashboard: kleine gesperrte Versalien in
   einer Pille. Farben unterscheiden weiterhin (Hauptknopf, Warnknopf), die
   Größe nicht mehr. */
.btn {
  border: 1px solid var(--crust);
  background: transparent;
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  /* Fest gesetzt, sonst ziehen Zeichen wie 🎤 oder 📎 die Zeile auf und der
     Knopf wird einen Pixel höher als sein Nachbar ohne Zeichen. */
  line-height: 1.35;
  transition: background .12s, color .12s;
}
.btn:hover { background: var(--crust); color: var(--dough); }
/* Der Hauptknopf unterscheidet sich nur noch durch die Farbe, nicht mehr
   durch die Schrift. Vorher trug er kleinere Versalien – neben einem
   „Abbrechen" in normaler Schrift sah dasselbe Knopfpaar aus wie zwei
   verschiedene Dinge. Wo Versalien gewollt sind (Kopfzeile, Knopfpaar in der
   Mitarbeiterliste), stehen sie eigens dort. */
.btn-primary {
  background: var(--crust); color: var(--dough); border-color: var(--crust);
}
.btn-primary:hover { background: var(--crust-dark); border-color: var(--crust-dark); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: transparent; color: var(--ink); text-decoration: underline; }
.btn-danger { color: var(--alarm); border-color: var(--alarm); background: transparent; }
.btn-danger:hover { background: var(--alarm); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: block; margin-bottom: .9rem; }
/* Nur die Feldbeschriftung, nicht die Hülle des Mikrofonknopfes: die ist
   ebenfalls ein <span> direkt im Feld, und das Eingabefeld darin würde sonst
   diese winzige Versalienschrift erben. */
.field > span:not(.mic-wrap) {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); margin-bottom: .35rem;
}
.field input, .field select, .field textarea {
  width: 100%; padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--dough-2);
  /* iOS Safari zoomt beim Antippen in jedes Feld unter 16 px hinein – und
     wieder heraus zoomt es nicht. Danach passt die Seite nicht mehr ins
     Fenster. Deshalb hier fest 16 px, unabhängig von der Umgebung. */
  font-size: 16px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent-strong); outline-offset: -1px; border-color: var(--accent-strong);
}
.field textarea { min-height: 5.5rem; resize: vertical; }
/* Verstecktes bleibt versteckt – ausnahmslos.
   Ohne diese Regel schlägt jede `display`-Angabe aus einer Klasse das
   `hidden`-Attribut: `.row { display: flex }` gewinnt gegen die Vorgabe des
   Browsers, und das Feld steht weiter da, obwohl es im Code als versteckt
   gilt. Genau daran blieben im Ticket-Formular „Ort" und „Fällig bis"
   sichtbar. Die Chef-Ansicht hatte diese Regel längst (admin.html), der
   Mitarbeiter-App fehlte sie. */
[hidden] { display: none !important; }

.row { display: flex; gap: .8rem; }
.row > * { flex: 1; }

/* Kopfzeile ------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1rem;
  background: var(--crust); color: var(--dough);
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 {
  font-size: 1rem; margin: 0; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.topbar .spacer { flex: 1; }
.topbar .who { font-size: .85rem; opacity: .85; }
.topbar .btn { background: transparent; border-color: rgba(229,228,221,.4); color: var(--dough); }
.topbar .btn:hover { background: var(--dough); color: var(--crust); border-color: var(--dough); }

/* Etiketten ------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px;
  background: #dcdad0; color: var(--crust-dark); white-space: nowrap;
}
.tag .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.prio-hoch    { background: #f2e3cd; color: #8a5a12; }
.prio-dringend{ background: var(--alarm); color: #fff; }
.prio-niedrig { background: #e3e2da; color: var(--ink-soft); }
.overdue      { background: var(--alarm); color: #fff; }
/* Herrenlos: Der Zuständige wurde gelöscht, der Auftrag hängt in der Luft.
   Dasselbe Rot wie „dringend" und „überfällig" – eine Warnung, kein Schmuck. */
.herrenlos    { background: var(--alarm); color: #fff; }

.empty {
  padding: 2rem 1rem; text-align: center; color: var(--ink-soft); font-size: .9rem;
}

/* Karte ----------------------------------------------------------------- */
.card {
  background: var(--dough-2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem .85rem;
  cursor: pointer;
  transition: border-color .12s;
}
.card:hover { border-color: var(--crust); }
.card h3 { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.3; }
.card .meta {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  font-size: .75rem; color: var(--ink-soft);
}
.card.done { opacity: .62; }
.card.done h3 { text-decoration: line-through; }

/* Overlay / Dialog ------------------------------------------------------ */
.overlay {
  position: fixed; inset: 0; background: rgba(63,38,24,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  /* Rand plus Aussparung für Kerbe und Home-Balken auf iOS. */
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.overlay[hidden] { display: none; }
.sheet {
  background: var(--dough); border-radius: var(--radius);
  width: min(620px, 100%); overflow: auto;
  /* vh meint auf iOS die Ansicht ohne Adressleiste – der untere Teil der
     Maske läge dann hinter der Leiste. dvh meint das wirklich Sichtbare. */
  max-height: 90vh;
  max-height: 90dvh;
  box-shadow: 0 10px 40px rgba(63,38,24,.25);
}
.sheet header {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--dough); z-index: 2;
}
.sheet header h2 {
  margin: 0; font-size: 1rem; flex: 1;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.sheet .body { padding: 1rem; }
.sheet .foot {
  display: flex; gap: .6rem; padding: .9rem 1rem;
  border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--dough);
}
/* Schiebt das Löschen ans andere Ende der Leiste, weg vom Speichern. */
.sheet .foot .foot-luecke { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--crust); color: var(--dough); padding: .6rem 1.1rem; border-radius: 999px;
  font-size: .85rem; z-index: 90; box-shadow: var(--shadow);
}
.toast[hidden] { display: none; }
.toast.err { background: var(--alarm); }

/* Verlauf / Notizen ----------------------------------------------------- */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.notes li { font-size: .88rem; }
.notes .who { font-weight: 600; font-size: .78rem; color: var(--ink-soft); }
.notes .note-body {
  background: var(--dough-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5rem .65rem; margin-top: .2rem; white-space: pre-wrap;
}
.notes .event { color: var(--ink-soft); font-size: .78rem; font-style: italic; }

/* Schmale Handy-Displays: Kopfzeile bleibt einzeilig */
@media (max-width: 480px) {
  .topbar { gap: .6rem; padding: .6rem .7rem; }
  .topbar h1  { font-size: .95rem; white-space: nowrap; }
  .topbar .who { font-size: .74rem; white-space: nowrap; }
  .topbar .btn { padding: .4rem .6rem; font-size: .8rem; }
}

/* Profilbilder ---------------------------------------------------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; object-fit: cover; flex: none;
  color: #fff; font-weight: 700; letter-spacing: .02em;
  background: var(--crust); overflow: hidden;
}

/* Fotos und Anhänge ----------------------------------------------------- */
.gallery { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.thumb {
  position: relative; margin: 0; width: 92px; height: 92px; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); background: var(--dough-2); cursor: zoom-in;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.file {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; font-size: .68rem; text-align: center; padding: .4rem;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.thumb.file span { overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; }
.thumb-del {
  position: absolute; top: .2rem; right: .2rem; width: 1.4rem; height: 1.4rem;
  border: none; border-radius: 50%; background: rgba(63,38,24,.75); color: #fff;
  font-size: .75rem; line-height: 1; display: grid; place-items: center;
}
.lightbox {
  position: fixed; inset: 0; background: rgba(42,25,15,.92); z-index: 100;
  display: grid; place-items: center; padding: 1rem; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; }

.dropzone {
  border: 1px dashed var(--ink-soft); border-radius: var(--radius); padding: .7rem;
  text-align: center; font-size: .82rem; color: var(--ink-soft); background: var(--dough-2);
}
.dropzone.over { border-color: var(--accent-strong); background: #eaf3fb; color: var(--crust-dark); }

/* Diktierknopf ---------------------------------------------------------- */
/* Der Diktierknopf hatte hier einmal eine eigene, kleinere Größe. Sie ist
   entfernt: Er steht in derselben Maske wie „Foto zur Notiz" und „Notiz
   speichern" und soll nicht kleiner sein als die. */
.btn-mic.recording {
  background: var(--alarm); border-color: var(--alarm); color: #fff !important;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .65; } }

/* Glocke und Meldungen -------------------------------------------------- */
.bell { position: relative; }
.bell .count {
  position: absolute; top: -.35rem; right: -.35rem; min-width: 1.15rem;
  height: 1.15rem; padding: 0 .25rem; border-radius: 999px;
  background: var(--alarm); color: #fff; font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
}
.bell .count[hidden] { display: none; }
.notif { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.notif li {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem;
  background: var(--dough-2); font-size: .88rem; cursor: pointer;
}
.notif li.neu { border-left: 4px solid var(--accent-strong); background: #eef5fb; }
.notif .when { float: right; font-size: .72rem; color: var(--ink-soft); }
.notif .body { color: var(--ink-soft); font-size: .82rem; margin-top: .2rem; }

.inline-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.file-input { display: none; }
h3.section-h {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin: 1.4rem 0 .5rem;
  border-top: 1px solid var(--line); padding-top: 1rem;
}

/* Sprachwahl beim Diktieren ---------------------------------------------- */
.dictation { gap: .4rem; }
.lang-select {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--dough-2);
  padding: .5rem .6rem; font-size: .85rem; font-weight: 600;
}
.lang-note { font-size: .75rem; color: var(--ink-soft); flex: 1 1 100%; }
.notes details.original { margin-top: .35rem; }
.notes details.original summary {
  font-size: .74rem; color: var(--ink-soft); cursor: pointer; list-style: none;
}
.notes details.original summary::before { content: "▸ "; }
.notes details.original[open] summary::before { content: "▾ "; }
.notes details.original div {
  font-size: .82rem; color: var(--ink-soft); font-style: italic;
  padding: .35rem .5rem; border-left: 2px solid var(--line); margin-top: .25rem;
}
.tag.lang { background: var(--accent); color: var(--crust-dark); }

/* Empfängerauswahl für Direktnachrichten --------------------------------- */
.people-pick { display: grid; gap: .4rem; margin: .3rem 0 1rem; }
.people-pick label {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--dough-2);
  font-size: .9rem; cursor: pointer;
}
.people-pick label:has(input:checked) {
  border-color: var(--accent-strong); background: #eaf3fb;
}
.people-pick input { width: 1.1rem; height: 1.1rem; accent-color: var(--crust); }
.people-pick .team { margin-left: auto; font-size: .75rem; color: var(--ink-soft); }
.erkannt {
  font-size: .82rem; color: var(--crust-dark); background: #eaf3fb;
  border: 1px solid var(--accent); border-radius: var(--radius); padding: .45rem .6rem;
  margin-bottom: .7rem;
}

/* Kleines Mikrofon an jedem Textfeld ------------------------------------- */
.mic-wrap { position: relative; display: block; }
.mic-wrap > input, .mic-wrap > textarea { padding-right: 2.6rem; }
.mic-mini {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 1.9rem; height: 1.9rem; padding: 0; line-height: 1;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--dough); color: var(--ink); font-size: .82rem;
  display: grid; place-items: center;
}
.mic-mini:hover { border-color: var(--crust); background: var(--crust); }
.mic-wrap.ist-textarea > .mic-mini { top: auto; bottom: .5rem; transform: none; }
.mic-mini.recording {
  background: var(--alarm); border-color: var(--alarm); color: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}
.lang-note.warn { color: var(--warn); font-weight: 600; }

/* Termin verlängern – gesperrt, bis eine Begründung als Notiz vorliegt. */
.termin-box { background: #f4f2ec; border-radius: .6rem; padding: .7rem .8rem; }
.termin-ist { margin: 0 0 .5rem; }
.termin-gesperrt { margin: 0; color: #7a6a55; font-size: .92rem; line-height: 1.35; }
.termin-box input[type=date] { flex: 1; padding: .45rem; border: 1px solid #c9c2b4;
  border-radius: .45rem; font: inherit; background: #fff; }

/* Recht, selbst Aufträge anzulegen – samt Gewerkeauswahl. */
.rechte { border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .8rem .8rem;
  margin: .2rem 0 .9rem; }
.rechte legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); padding: 0 .3rem; }
.schalter { display: flex; align-items: center; gap: .5rem; padding: .25rem 0;
  cursor: pointer; }
.schalter input { width: 1.05rem; height: 1.05rem; flex: none; }
.schalter span { display: flex; align-items: center; gap: .4rem; }
.gewerkwahl { margin-top: .5rem; padding-left: 1.55rem; border-left: 2px solid var(--line); }
.gewerkwahl-hinweis { margin: 0 0 .2rem; font-size: .85rem; color: var(--ink-soft); }

/* Knopf zum Anlegen – nur sichtbar, wenn das Recht gesetzt ist. */
.neuer-auftrag { display: block; width: calc(100% - 1.6rem); margin: .2rem .8rem .6rem; }

/* Hinweis auf einer Karte, die nur gelesen werden darf. */
.nur-lesen-hinweis { background: #f4f2ec; border-left: 3px solid #c9c2b4;
  border-radius: .35rem; padding: .6rem .75rem; margin: .2rem 0 .9rem;
  font-size: .9rem; line-height: 1.4; color: #6b5c4c; }

/* --------------------------------------------------------- Schmale Fenster
   Alles, was geöffnet wird, soll aufs Handy passen. Zwei Felder nebeneinander
   gehen sich bei 375 px aus: Der Mikrofonknopf sitzt absolut im Feld und
   frisst 2,6 rem, danach ist der Platzhalter abgeschnitten. Deshalb stehen
   die Paare hier untereinander – lieber einmal mehr scrollen als quetschen. */
@media (max-width: 560px) {
  .row { flex-direction: column; gap: .55rem; }
  .row > * { flex: none; width: 100%; }

  /* Nichts darf breiter sein als das Fenster. */
  .sheet, .sheet * { max-width: 100%; }
  .sheet img, .sheet video { height: auto; }

  /* Lange Wörter und Adressen sprengen sonst die Karte. */
  .sheet, .card, .notes { overflow-wrap: anywhere; }

  /* Breites bekommt einen eigenen Schieber statt die Seite zu verbiegen. */
  .sheet table, .sheet pre { display: block; overflow-x: auto; max-width: 100%; }

  /* Knopfreihen umbrechen lassen, statt sie hinauszuschieben. */
  .inline-row { flex-wrap: wrap; }

  /* Die Knopfleiste unten in einer Maske. Auf dem Handy standen dort drei
     Knöpfe in Eingabefeldgröße nebeneinander und drängten sich über die
     ganze Breite. Kleiner gesetzt passen sie in eine Zeile und der Blick
     bleibt beim Inhalt darüber. */
  .sheet .foot { padding: .7rem .8rem; gap: .45rem; flex-wrap: wrap; }
  /* Keine eigene Größe mehr – der Knopf ist überall gleich groß. */
  /* Passt alles nicht in eine Zeile, rutscht „Löschen" in die zweite.
     Ohne die Lücke steht es dort allein und wird mittig unter „Änderungen
     speichern" und „Nachfragen" gesetzt. */
  .sheet .foot .foot-luecke { display: none; }
  .sheet .foot .btn-danger { margin-left: auto; margin-right: auto; }

  /* Steht direkt darüber und gehört optisch dazu. */
  #upNow { padding: .42rem .8rem; font-size: .82rem; }
}

/* Zwischenspeicher abräumen, wenn ein Handy die alte Ansicht festhält. */
.auffrischen { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .9rem; }
.auffrischen p { margin: 0 0 .5rem; font-size: .88rem; color: var(--ink-soft); }
.auffrischen code { font-size: .85em; }
.auffrischen .btn { width: 100%; }
.auffrischen-hinweis { margin: .5rem 0 0 !important; line-height: 1.4; }

/* Jedes Gewerk trägt das Logo seiner Firma statt eines Farbpunkts.
   Das runde Landbrot-Siegel braucht etwas mehr Höhe als die flache
   BioLog-Raute, damit beide optisch gleich schwer wirken. */
.gewerk-logo { height: 1.05em; width: auto; vertical-align: -.15em;
  margin-right: .15em; flex: none; }
.gewerk-logo.landbrot { height: 1.35em; vertical-align: -.35em; margin-right: .1em; }

/* --------------------------------------------------------- Doppeltipp-Zoom
   iOS wertet zwei schnelle Tipps als Doppeltipp und zoomt die Seite hinein.
   Beim zügigen Eintippen der PIN passiert das regelmäßig – meist ab der
   dritten Ziffer, wenn der Rhythmus schneller wird. `manipulation` lässt
   Tippen und Wischen unverändert und nimmt dem Browser nur diese eine Geste. */
button, .btn, .chip, .pad button, .schalter, label.field,
[role="button"], summary { touch-action: manipulation; }

/* Feldhilfen ------------------------------------------------------------ */
/* Das „?" sitzt in der Feldbeschriftung. Es muss klein bleiben, aber groß
   genug zum Treffen mit dem Finger – daher der großzügige Innenabstand bei
   kleiner Schrift. */
.hilfe-knopf {
  border: 1px solid var(--line); background: var(--dough-2); color: var(--ink-soft);
  border-radius: 50%; width: 1.35rem; height: 1.35rem; padding: 0;
  font-size: .78rem; font-weight: 700; line-height: 1;
  margin-left: .4rem; vertical-align: middle;
  touch-action: manipulation;
}
.hilfe-knopf:hover, .hilfe-knopf[aria-expanded="true"] {
  background: var(--crust); color: var(--dough); border-color: var(--crust);
}
.hilfe-text {
  margin: 0 0 .4rem; padding: .5rem .65rem;
  background: var(--dough); border-left: 3px solid var(--crust);
  font-size: .84rem; line-height: 1.45; color: var(--ink);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}

/* Briefumschlag als Schriftzeichen, nicht als buntes Bildchen ------------
   Als Emoji kam er hellblau-weiß und war auf dem hellen Teig kaum zu sehen.
   `U+FE0E` verlangt ausdrücklich die Textdarstellung, die Schriftliste
   davor greift zu einer einfarbigen Fassung – so erbt der Umschlag die
   braune Tinte der Schaltfläche, auf der er sitzt. */
.brief {
  font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", "DejaVu Sans",
               "Apple Symbols", sans-serif;
  color: currentColor;
  font-size: 1.05em;
  line-height: 1;
}

/* Anleitung: sitzt rechts in der Reiterzeile der Mitarbeiter-Ansicht.
   Bewusst als Umriss statt gefüllt – sie soll auffindbar sein, aber nicht
   mit den Reitern um Aufmerksamkeit streiten. */
.anleitung-knopf {
  align-self: center;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .8rem; font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  touch-action: manipulation;
}
.anleitung-knopf:hover,
.anleitung-knopf:focus-visible { border-color: var(--crust); color: var(--ink); }

/* In der Mitarbeiter-Ansicht steht sie am rechten Ende der Reiterzeile.
   Im Dashboard sitzt sie in der rechten Gruppe der Kopfzeile und braucht
   diesen Schub nicht. */
.tabs .anleitung-knopf { margin-left: auto; }

/* Diktatfeld mit Original darunter: höher, damit man Übersetzung und Original
   zusammen sieht – sonst scrollt man beim Vergleichen hin und her. */
.field textarea.hat-original { min-height: 11rem; }
.original-hinweis {
  margin: .35rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--ink-soft);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}

/* Warnung im Profil, wenn Push zwar „an" ist, aber über einen Weg läuft, der
   auf diesem Gerät erfahrungsgemäß nichts zustellt (Firefox auf Android).
   Bewusst auffällig: Der Schalter sagt „an", die Wirklichkeit oft nicht. */
.push-warnung {
  margin: .6rem 0 0; padding: .6rem .7rem; border-radius: .5rem;
  background: rgba(166, 58, 43, .08); border: 1px solid var(--alarm);
  color: var(--ink); font-size: .9rem; line-height: 1.35;
}

/* Kurzer Hinweis über der Bauliste in der Handy-Ansicht: Wer sie zum ersten Mal
   öffnet, soll ohne Nachfragen verstehen, warum diese Aufträge nicht auf dem
   Brett stehen. */
.bauhinweis {
  margin: 0 0 .7rem; color: var(--ink-soft); font-size: .88rem; line-height: 1.4;
}

/* Erledigt, aber noch nicht abgenommen ------------------------------------
   Die Karte bleibt hervorgehoben, bis der Auftraggeber die Arbeit kontrolliert
   hat – und ist bewusst NICHT durchgestrichen und nicht blass: Sie ist ja noch
   nicht fertig. Das Durchstreichen kommt erst mit der Bestätigung. */
.card.abnahme {
  background: #f9e7e3;
  border-color: var(--alarm);
  opacity: 1;
}
.card.abnahme h3 { text-decoration: none; color: var(--ink); }
.tag.abnahme { background: var(--alarm); color: #fff; }

/* Termin überschritten ----------------------------------------------------
   Gelb, nicht rot: Rot ist in diesem Board die Abnahme und der Alarm. Gelb
   heißt „hier läuft etwas aus dem Ruder, aber es ist nichts kaputt“. Die
   Fläche trägt die Farbe kräftig – ein blasser Ton ist im Tageslicht der
   Backstube nicht zu sehen, das hatten wir schon. */
.card.ueberfaellig {
  background: #fbeec0;
  border-color: #d6ab1f;
}
/* Der Balken links bleibt bewusst in der Gewerkfarbe: Er steht als
   `style="border-left-color:…"` direkt an der Karte und sagt, WER zuständig
   ist. Diese Auskunft ist zu wertvoll, um sie gegen eine Warnfarbe zu
   tauschen – die Warnung trägt die Fläche. */
.card.ueberfaellig h3 { color: var(--ink); }

/* Der Kasten mit „Bestätigen" und „Beanstanden" steht ganz oben im
   Kartendialog – er ist die Aufforderung, um die es gerade geht. */
.abnahme-kasten {
  background: #f9e7e3; border: 1px solid var(--alarm);
  border-radius: var(--radius); padding: .7rem .8rem; margin-bottom: .9rem;
}
.abnahme-kasten strong { display: block; color: var(--alarm); }
.abnahme-kasten p { margin: .2rem 0 .6rem; font-size: .9rem; }

/* Wartet auf Abnahme, aber ich bin nicht der Auftraggeber: Der Kasten trägt
   dasselbe Rot wie die Aufforderung an den Auftraggeber – er sagt dieselbe
   Sache, nur an eine andere Person gerichtet. Vorher stand er grau und
   ging dadurch zu leicht unter. */

/* Ticketsystem der IT --------------------------------------------------- */
/* Die Nummer steht in fester Schrift – sie ist eine Kennung, kein Text, und
   soll sich beim Überfliegen vom Titel absetzen. */
.ticketnr {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700; font-size: .72rem; letter-spacing: 0;
  background: var(--dough-3); color: var(--crust);
  border-radius: .3rem; padding: 0 .3rem; white-space: nowrap;
}
.tag.termin { background: var(--crust); color: var(--dough); }

/* Die Ticketnummer steht als eigene Zeile ÜBER dem Titel – danach wird
   gefragt („was ist mit IT-039?"), sie darf nicht zwischen den Etiketten
   unter dem Titel untergehen. */
.ticketkopf {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700; font-size: .78rem; letter-spacing: .02em;
  color: var(--crust); margin-bottom: .15rem;
}
/* Terminvorschlag im Kartendialog: gehört der IT, steht deshalb weit oben. */
.terminkasten {
  background: var(--dough-3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .8rem; margin-bottom: .9rem;
}
.terminkasten strong { display: block; margin-bottom: .2rem; }
.terminkasten .hint { margin: 0 0 .5rem; }
.terminkasten input[type="datetime-local"] {
  flex: 1 1 auto; min-width: 0; padding: .5rem .6rem; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--dough-2); color: var(--ink);
}

/* Häkchen „wo tritt das Problem auf?" – zwei Spalten, damit die sieben
   Begriffe auf dem Handy nicht zu einer langen Liste werden. */
.bereiche { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .6rem; }
.bereiche label {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .1rem; font-size: .88rem; cursor: pointer;
}
.bereiche input { width: 1.1rem; height: 1.1rem; flex: none; }
/* „Sonstiges" steht über die ganze Breite – es trägt einen Hinweis, und der
   soll nicht in einer halben Spalte umbrechen. */
.bereiche label.sonstiges { grid-column: 1 / -1; align-items: flex-start; }
.bereiche .feldhinweis {
  font-style: normal; color: var(--ink-soft); font-size: .78rem;
}
@media (max-width: 380px) { .bereiche { grid-template-columns: 1fr; } }
/* Auf der Karte: ruhig, sie sind Einordnung und keine Warnung. */
.tag.bereich { background: var(--dough-3); color: var(--ink-soft); }

/* Auftrag oder Ticket? Die Wahl steht ganz oben im Formular – vorher musste
   man wissen, dass ein Ticket ein Auftrag „für das Gewerk IT" ist, und genau
   das fand niemand. */
.artwahl { display: flex; gap: .5rem; margin-bottom: 1rem; }
.artwahl .btn { flex: 1 1 0; min-width: 0; }
.artwahl .btn[aria-pressed="true"] {
  background: var(--crust); color: var(--dough); border-color: var(--crust);
}

/* Termin-Alarm an der Glocke ---------------------------------------------
   Rot und blinkend, solange eine ungelesene Termin-Meldung vorliegt. Wer
   einen Termin übersieht, steht zur falschen Zeit am falschen Ort – das ist
   die eine Meldung, die auffallen darf. */
@keyframes termin-blinken {
  0%, 100% { background: var(--alarm); border-color: var(--alarm); color: #fff; }
  50%      { background: transparent; border-color: var(--alarm); color: var(--alarm); }
}
.bell.termin-alarm {
  animation: termin-blinken 1.1s ease-in-out infinite;
}
.bell.termin-alarm .count { background: #fff; color: var(--alarm); }
/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt das Rot ohne
   Blinken – die Information bleibt, das Flackern fällt weg. */
@media (prefers-reduced-motion: reduce) {
  .bell.termin-alarm {
    animation: none; background: var(--alarm); border-color: var(--alarm); color: #fff;
  }
}

/* Filterspalte im Archiv --------------------------------------------------
   Alle Auswahlfelder untereinander zum Anhaken. Wer wissen will, was je am
   Netzwerk war, setzt ein Häkchen statt einen Suchbegriff zu erraten. */
.bereichsfilter {
  background: var(--dough-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .7rem;
}
.bereichsfilter h3 {
  margin: 0 0 .4rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-soft);
}
.bereichsfilter label {
  display: flex; align-items: center; gap: .45rem;
  padding: .28rem .1rem; font-size: .86rem; cursor: pointer;
}
.bereichsfilter label input { flex: none; }
.bereichsfilter .btn { width: 100%; margin-top: .45rem; font-size: .74rem; }

/* Felder eines Tickets umbenennen -----------------------------------------
   Nur die IT sieht diesen Kasten. Bewusst schlicht und unter der Beschreibung:
   Er gehört zum Sortieren im Nachgang, nicht zur Meldung selbst. */
.umbenennen {
  background: var(--dough-2); border: 1px solid var(--line);
  border-left: 5px solid var(--accent-strong);
  border-radius: var(--radius); padding: .7rem .8rem; margin-bottom: .9rem;
}
.umbenennen strong { display: block; }
.umbenennen .hint { margin: .15rem 0 .5rem; }
.umbenennen .umb-feld {
  display: block; width: 100%; font-size: 16px; margin-bottom: .35rem;
  padding: .4rem .55rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--dough); color: var(--ink);
}
.umbenennen .btn { margin-top: .25rem; }

/* Wo findet der Termin statt? Zwei Knöpfe statt eines Auswahlfelds – mit
   mehligen Fingern trifft man eine Fläche leichter als eine Zeile in einer
   Liste. Genau eine Wahl ist möglich. */
.ortwahl { display: flex; gap: .5rem; margin: .5rem 0; }
.ortwahl .btn { flex: 1 1 0; min-width: 0; font-size: .7rem; }
.ortwahl .btn[aria-pressed="true"] {
  background: var(--crust); color: var(--dough); border-color: var(--crust);
}

/* Kopfzeile eines Tickets: links die Nummer, Mitte das Problem, rechts die
   Bereiche. Sie sitzt in der klebenden Fensterkopfzeile und bleibt damit beim
   Scrollen stehen – vom Öffnen bis zum Abhaken. */
.sheet header h2.kopf-ticket {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0;
}
.kopf-nr {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700; letter-spacing: 0; color: var(--dough);
  background: var(--crust); border-radius: .3rem; padding: .05rem .35rem;
  flex: none;
}
.kopf-problem {
  flex: 1 1 8rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kleiner und ruhiger als das Problem – eine Einordnung, keine Überschrift.
   Auf schmalen Geräten rutscht sie in eine zweite Zeile, statt das Problem
   aus dem Bild zu schieben. */
.kopf-bereiche {
  flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  text-transform: none; color: var(--ink-soft); white-space: nowrap;
}

/* Termin-Kasten je nach Stand der Abstimmung -----------------------------
   Die drei Zustände müssen sich auf einen Blick unterscheiden – in der
   Backstube schaut niemand zweimal hin. Deshalb ein kräftiger linker Balken
   als Farbträger: Der wirkt auch dann, wenn der Hintergrund hell bleiben muss,
   damit der Text lesbar ist. */
.terminkasten { border-left-width: 5px; border-left-style: solid;
                border-left-color: var(--line); }

/* Ich bin am Zug: hier wird eine Antwort erwartet. */
.terminkasten.offen {
  background: #f7ddd7; border-color: var(--alarm); border-left-color: var(--alarm);
}
.terminkasten.offen strong { color: var(--alarm); }

/* Ich habe vorgeschlagen und warte – es liegt gerade nicht an mir. */
.terminkasten.wartet-auf-antwort {
  background: #ece7dd; border-color: #b6ab97; border-left-color: #8d8270;
}
.terminkasten.wartet-auf-antwort strong { color: #6b6152; }

/* Einig: die Sache steht. */
.terminkasten.steht {
  background: #e2eee4; border-color: #7fa98c; border-left-color: #2f6b4f;
}
.terminkasten.steht strong { color: #2f6b4f; }
.terminkasten details { margin-top: .5rem; }
.terminkasten summary {
  cursor: pointer; font-size: .82rem; color: var(--ink-soft); padding: .2rem 0;
}