/* Klärzentrale · regio-logistik
   CI: Grün #89B71A, Dunkelgrau #39393A, Schrift Calibri (Ersatz: Carlito, Segoe UI, Arial).
   Eine Datei für die Arbeitsoberfläche (index.html) und die Scanner-Seite (scanner.html, body.scanner).
   Keine externen Aufrufe: keine Webfonts, keine Bilder von fremden Hosts. */

:root {
  --gruen: #89B71A;
  --gruen-kraeftig: #7aa317;
  --gruen-dunkel: #4F6B0F;
  --gruen-zart: #EEF5DC;
  --gruen-text: #1f2a05;
  --grau: #39393A;
  --grau-mittel: #66666a;
  --grau-hell: #9a9a9c;
  --linie: #e0e0e3;
  --flaeche: #f4f4f5;
  --weiss: #fff;
  --warn: #8a5a00;
  --warn-hell: #fff4d6;
  --warn-linie: #e6cf8f;
  --ernst: #b3261e;
  --ernst-hell: #fde8e6;
  --ernst-linie: #f0b8b3;
  --blau: #2b5c8a;
  --blau-hell: #e6eff7;
  --radius: 8px;
  --schatten: 0 1px 2px rgba(57, 57, 58, .08), 0 4px 14px rgba(57, 57, 58, .06);
  --kopf-hoehe: 56px;
  --panel-breite: clamp(420px, 42vw, 720px);
  --schrift: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--flaeche);
  color: var(--grau);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.4;
}
a { color: var(--gruen-dunkel); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; color: var(--grau); }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: .95rem; color: var(--gruen-dunkel); text-transform: uppercase; letter-spacing: .04em; }
.mono { font-family: var(--mono); font-size: .92em; }
.leise { color: var(--grau-mittel); }
.klein { font-size: .85rem; }
.lade { padding: 2.5rem 1rem; text-align: center; color: var(--grau-mittel); }
.fehlertext { color: var(--ernst); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--gruen-dunkel); outline-offset: 1px; }

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .38rem .8rem; border-radius: 6px; border: 1px solid var(--linie);
  background: #fff; color: var(--grau); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--flaeche); border-color: var(--grau-hell); }
.btn.primaer { background: var(--gruen); border-color: var(--gruen-kraeftig); color: var(--gruen-text); font-weight: 700; }
.btn.primaer:hover { background: var(--gruen-kraeftig); }
.btn.gruen { color: var(--gruen-dunkel); border-color: var(--gruen); }
.btn.gruen:hover { background: var(--gruen-zart); }
.btn.gefahr { color: var(--ernst); border-color: var(--ernst-linie); }
.btn.gefahr:hover { background: var(--ernst-hell); }
.btn.klein { padding: .18rem .5rem; font-size: .84rem; }
.btn.aktiv { background: var(--gruen-zart); border-color: var(--gruen); color: var(--gruen-dunkel); }
.btn:disabled { opacity: .5; cursor: default; }
.link-knopf { background: none; border: none; padding: 0; color: var(--gruen-dunkel); cursor: pointer; text-decoration: underline; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 3px solid var(--gruen); }
.kopf-innen { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; padding: .4rem 1rem; }
.marke { display: flex; align-items: center; gap: .65rem; color: var(--grau); text-decoration: none; }
.marke img { height: 34px; width: auto; display: block; }
.marke b { font-size: 1.18rem; letter-spacing: .01em; }
.hauptnav { display: flex; gap: .15rem; }
.hauptnav a { padding: .35rem .65rem; border-radius: 6px; color: var(--grau); font-weight: 600; text-decoration: none; }
.hauptnav a:hover { background: var(--flaeche); }
.hauptnav a.aktiv { background: var(--gruen-zart); color: var(--gruen-dunkel); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1 1 auto; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .16rem .6rem .16rem .2rem;
  border-radius: 999px; border: 1px solid var(--linie); background: #fff; cursor: pointer; font-size: .9rem; color: var(--grau);
}
.chip b {
  min-width: 1.75em; padding: 0 .4em; border-radius: 999px; background: var(--flaeche);
  text-align: center; font-size: .86rem; line-height: 1.55; color: var(--grau);
}
.chip:hover { border-color: var(--gruen); }
.chip.hat b { background: var(--grau); color: #fff; }
.chip.neu.hat b { background: var(--gruen); color: var(--gruen-text); }
.chip.warn.hat b { background: var(--ernst); color: #fff; }
.chip.aktiv { background: var(--gruen-zart); border-color: var(--gruen); color: var(--gruen-dunkel); font-weight: 700; }
/* Quellen-Ampel: eine Quelle meldet sich nicht oder wurde abgelehnt – für alle sichtbar */
.ampel-leiste { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip.ampel { border-color: var(--ernst-linie); background: var(--ernst-hell); color: var(--ernst); font-weight: 600; }
.chip.ampel b { background: var(--ernst); color: #fff; }
.chip.ampel:hover { border-color: var(--ernst); }
.ampel-liste li.a-still::before { background: var(--warn); }
.ampel-liste li.a-fehler::before { background: var(--ernst); }
.kopf-rechts { display: flex; align-items: center; gap: .5rem; margin-left: auto; position: relative; }
.menue {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: #fff; border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten); padding: .3rem; z-index: 50; display: grid; gap: 2px;
}
.menue .wer { padding: .35rem .6rem .45rem; border-bottom: 1px solid var(--linie); margin-bottom: .2rem; font-size: .85rem; color: var(--grau-mittel); }
.menue .wer b { display: block; color: var(--grau); font-size: .95rem; }
.menue button { text-align: left; background: none; border: none; padding: .42rem .6rem; border-radius: 6px; cursor: pointer; }
.menue button:hover { background: var(--gruen-zart); }

main#inhalt { padding: .8rem 1rem 3rem; }

/* ---------- Filterleiste ---------- */
.filterleiste { display: flex; flex-wrap: wrap; gap: .4rem; align-items: end; margin-bottom: .55rem; }
.filterleiste label { display: grid; gap: 1px; font-size: .76rem; color: var(--grau-mittel); }
.filterleiste select, .filterleiste input {
  padding: .3rem .45rem; border: 1px solid var(--linie); border-radius: 6px; background: #fff; font-size: .92rem; max-width: 210px;
}
.filterleiste input[type=search] { width: 250px; max-width: 100%; }
.filterleiste .gesetzt { border-color: var(--gruen); background: var(--gruen-zart); }
.listenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 .4rem; font-size: .88rem; color: var(--grau-mittel); }
.listenkopf b { color: var(--grau); }
.listenkopf .fehlertext { color: var(--ernst); }
.listenkopf .rechts { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

/* ---------- Tabelle / Karten ---------- */
.tab-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); }
table.tab { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tab th {
  text-align: left; font-weight: 700; color: var(--gruen-dunkel); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .45rem .55rem; border-bottom: 2px solid var(--gruen); white-space: nowrap; background: #fff;
}
table.tab td { padding: .36rem .55rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.tab tr:last-child td { border-bottom: none; }
table.tab tr.klick { cursor: pointer; }
table.tab tr.klick:hover td { background: #f7faee; }
table.tab tr.gewaehlt td { background: var(--gruen-zart); }
table.tab tr.gewaehlt td:first-child { box-shadow: inset 4px 0 0 var(--gruen); }
table.tab tr.prio-hoch td:first-child { box-shadow: inset 4px 0 0 var(--ernst); }
table.tab tr.ist-geklaert td { color: var(--grau-mittel); }
/* durch die Sichtbarkeitsregel ausgeblendet (nur mit Filter „Mit/Nur ausgeblendete“ oder bei einer Suche in der Liste) */
table.tab tr.ist-ausgeblendet td { background: #fafafa; color: var(--grau-mittel); }
table.tab tr.ist-ausgeblendet td:first-child { box-shadow: inset 4px 0 0 var(--grau-hell); }
table.tab tr.ist-ausgeblendet .c-titel .titel { color: var(--grau-mittel); }
table.tab td.r, table.tab th.r { text-align: right; }
table.tab .leerzeile td { padding: 1.6rem; text-align: center; color: var(--grau-mittel); cursor: default; }
table.tab .leerzeile.gut td { color: var(--gruen-dunkel); font-weight: 600; }
.c-nummer { white-space: nowrap; font-family: var(--mono); font-size: .86rem; }
.c-alter { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.c-alter.alt { color: var(--ernst); font-weight: 700; }
.c-alter .lz { display: block; }
.c-alter .sdg { display: block; font-size: .76rem; font-weight: 400; color: var(--grau-mittel); }
.c-netz { white-space: nowrap; }
.badge.va-express { background: var(--warn-hell); color: var(--warn); }
.badge.va-samstag { background: var(--blau-hell); color: var(--blau); }
.badge.aus { background: #fff; color: var(--grau-mittel); border: 1px dashed var(--grau-hell); font-weight: 600; }
.c-titel .titel { font-weight: 600; color: var(--grau); overflow-wrap: anywhere; }
.c-titel .unter { font-size: .84rem; color: var(--grau-mittel); overflow-wrap: anywhere; }
.c-status, .c-hinweise { white-space: nowrap; }
.hinweise { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.listenfuss { margin-top: .6rem; display: flex; gap: .8rem; align-items: center; color: var(--grau-mittel); font-size: .88rem; }

.badge {
  display: inline-block; padding: .05em .55em; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.55; white-space: nowrap;
  background: var(--flaeche); color: var(--grau-mittel);
}
.badge.s-neu { background: var(--gruen); color: var(--gruen-text); }
.badge.s-in_arbeit { background: var(--grau); color: #fff; }
.badge.s-wartet { background: var(--blau-hell); color: var(--blau); }
.badge.s-geklaert { background: var(--gruen-zart); color: var(--gruen-dunkel); }
.badge.prio { background: var(--ernst); color: #fff; }
.badge.warn { background: var(--warn-hell); color: var(--warn); }
.badge.ernst { background: var(--ernst-hell); color: var(--ernst); }
.badge.ok { background: var(--gruen-zart); color: var(--gruen-dunkel); }
.badge.zahl { background: var(--flaeche); color: var(--grau-mittel); font-weight: 600; }

/* ---------- Detail-Seitenpanel ---------- */
.detail {
  position: fixed; top: var(--kopf-hoehe); right: 0; bottom: 0; width: var(--panel-breite); z-index: 25;
  background: #fff; border-left: 1px solid var(--linie); box-shadow: -6px 0 24px rgba(57, 57, 58, .12);
  overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem 2rem;
}
@media (min-width: 1100px) {
  body.detail-offen main#inhalt { padding-right: calc(var(--panel-breite) + 1rem); }
}
@media (min-width: 1100px) and (max-width: 1700px) {
  body.detail-offen table.faelle .c-quelle, body.detail-offen table.faelle .c-art { display: none; }
}
.detail.beschaeftigt { cursor: progress; }
.detail.beschaeftigt .btn, .detail.beschaeftigt select { pointer-events: none; opacity: .6; }
.d-kopf { position: sticky; top: 0; background: #fff; z-index: 2; padding: .7rem 0 .5rem; border-bottom: 1px solid var(--linie); margin-bottom: .6rem; }
.d-kopf .zeile1 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.d-kopf .zeile1 .schliessen { margin-left: auto; }
.d-kopf h2 { margin: .3rem 0 .1rem; overflow-wrap: anywhere; }
/* Der Kopf klebt oben: ein langer Titel (Scanner-Freitext bis 300 Zeichen) belegte auf dem Handy sonst den halben Bildschirm.
   Zwei Zeilen, Antippen zeigt den ganzen Titel. */
.d-kopf h2.kurz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; cursor: pointer; }
.d-kopf h2.kurz.offen { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; max-height: 40vh; overflow-y: auto; }
.detail:focus { outline: none; }
.d-kopf .unter { font-size: .88rem; color: var(--grau-mittel); }
.schliessen { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--grau-mittel); padding: 0 .3rem; border-radius: 6px; }
.schliessen:hover { background: var(--flaeche); color: var(--grau); }
.detail section { margin: 0 0 1rem; }
.detail section > h3 { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--linie); padding-bottom: .2rem; margin-bottom: .45rem; }
.detail section > h3 .rechts { margin-left: auto; text-transform: none; letter-spacing: 0; }
.banner { padding: .45rem .7rem; border-radius: 6px; margin: 0 0 .5rem; font-size: .92rem; background: var(--warn-hell); color: var(--warn); border: 1px solid var(--warn-linie); }
.banner.ernst { background: var(--ernst-hell); color: var(--ernst); border-color: var(--ernst-linie); }
.banner.ok { background: var(--gruen-zart); color: var(--gruen-dunkel); border-color: #cfe0a3; }
.banner.info { background: var(--blau-hell); color: var(--blau); border-color: #c4d7ea; }
.banner a, .banner .link-knopf { color: inherit; font-weight: 700; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.knopfzeile .abstand { flex: 1 1 auto; }
.zustaendig-wahl { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--grau-mittel); }
.zustaendig-wahl select { padding: .3rem .4rem; border: 1px solid var(--linie); border-radius: 6px; background: #fff; color: var(--grau); }
.aktionsform { margin-top: .55rem; padding: .7rem; border: 1px solid var(--gruen); border-radius: var(--radius); background: #fbfdf5; }
.aktionsform h4 { margin: 0 0 .45rem; font-size: .98rem; }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; font-size: .93rem; margin: 0; }
.dl dt { color: var(--grau-mittel); }
.dl dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.dl dd .btn { margin-left: .4rem; vertical-align: baseline; }
details.rohdaten { margin-top: .4rem; }
details.rohdaten summary { cursor: pointer; color: var(--gruen-dunkel); font-weight: 600; font-size: .9rem; }
details.rohdaten pre {
  margin: .4rem 0 0; padding: .6rem; background: var(--flaeche); border-radius: 6px; font-family: var(--mono); font-size: .8rem;
  max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Weitere Fälle zu dieser Sendung (dieselbe Sendung in mehreren Quellen) */
.verwandte { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.verwandt {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; width: 100%; text-align: left; font: inherit; color: var(--grau);
  padding: .35rem .55rem; border: 1px solid var(--linie); border-radius: 6px; background: #fff; cursor: pointer;
}
.verwandt:hover { border-color: var(--gruen); background: var(--gruen-zart); }
.verwandt .v-titel { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.verwandt .v-quelle { font-size: .85rem; color: var(--grau-mittel); }

/* Verlauf */
.verlauf { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linie); }
.verlauf li { position: relative; padding: .22rem 0 .32rem .85rem; font-size: .92rem; }
.verlauf li::before { content: ""; position: absolute; left: -6px; top: .62rem; width: 10px; height: 10px; border-radius: 50%; background: var(--grau-hell); border: 2px solid #fff; }
.verlauf li.a-vermerk::before { background: var(--gruen); }
.verlauf li.a-status::before { background: var(--grau); }
.verlauf li.a-quelle::before { background: var(--warn); }
.verlauf li.a-mail::before { background: var(--blau); }
.verlauf .meta { font-size: .8rem; color: var(--grau-mittel); }
.verlauf .meta b { color: var(--grau); font-weight: 600; }
.verlauf .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.verlauf li.a-vermerk .text { background: var(--gruen-zart); border-radius: 6px; padding: .3rem .5rem; margin-top: .12rem; }

/* Anhänge */
.anhaenge { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.anhang { border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-size: .76rem; }
.anhang button.bild, .anhang a.datei {
  display: flex; align-items: center; justify-content: center; height: 88px; width: 100%; padding: 0; border: none; background: var(--flaeche);
  cursor: pointer; text-decoration: none; color: var(--grau-mittel); font-weight: 700; font-size: 1rem;
}
.anhang button.bild { cursor: zoom-in; }
.anhang img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anhang .name { padding: .22rem .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--grau-mittel); }
.ablage { margin-top: .5rem; padding: .55rem .7rem; border: 1.5px dashed var(--linie); border-radius: 6px; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .88rem; color: var(--grau-mittel); }
.ablage.ziel { border-color: var(--gruen); background: var(--gruen-zart); }

/* Die Lightbox ist ein <dialog> (showModal): Fokusfalle und Esc kommen vom Browser, die Seite dahinter ist inaktiv */
dialog.lightbox { border: none; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; color: inherit; }
dialog.lightbox::backdrop { background: rgba(20, 20, 20, .9); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20, 20, 20, .9); display: flex; align-items: center; justify-content: center; }
dialog.lightbox:not([open]) { display: none; }
.lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 4px; background: #222; }
.lightbox .lb-knopf { position: absolute; background: rgba(255, 255, 255, .14); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 1.7rem; line-height: 1; padding: .45rem .8rem; }
.lightbox .lb-knopf:hover { background: rgba(255, 255, 255, .28); }
.lightbox .lb-zu { top: 14px; right: 14px; }
.lightbox .lb-vor { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-zurueck { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-titel { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #ddd; font-size: .88rem; padding: 0 1rem; }
.lightbox .lb-titel a { color: #cfe58a; }

/* ---------- Formulare / Dialoge ---------- */
.form { display: grid; gap: .55rem; }
.form label { display: grid; gap: .15rem; font-size: .84rem; color: var(--grau-mittel); }
.form input, .form select, .form textarea { padding: .42rem .55rem; border: 1px solid var(--linie); border-radius: 6px; background: #fff; font-size: .95rem; color: var(--grau); width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--gruen); outline: none; box-shadow: 0 0 0 2px rgba(137, 183, 26, .25); }
.form textarea { min-height: 84px; resize: vertical; }
.form .spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .55rem; }
.form .haken { display: flex; align-items: center; gap: .45rem; font-size: .95rem; color: var(--grau); }
.form .haken input { width: auto; }
.form .zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fehler { color: var(--ernst); font-size: .9rem; margin: 0; }
.hinweis { color: var(--grau-mittel); font-size: .85rem; margin: 0; }
.zaehler-text { font-size: .78rem; color: var(--grau-hell); margin-left: auto; }

dialog.dialog { border: none; border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); box-shadow: 0 12px 50px rgba(0, 0, 0, .3); color: var(--grau); }
dialog.dialog.breit { width: min(760px, calc(100vw - 1.5rem)); }
dialog.dialog::backdrop { background: rgba(57, 57, 58, .5); }
.dialog-kopf { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 3px solid var(--gruen); position: sticky; top: 0; background: #fff; z-index: 1; }
.dialog-kopf h2 { margin: 0; flex: 1; }
.dialog-inhalt { padding: 1rem; }
.geheim { display: flex; gap: .4rem; align-items: stretch; }
.geheim input { font-family: var(--mono); font-size: .9rem; }
.mit-einheit { display: flex; gap: .5rem; align-items: center; }
.form .mit-einheit input { width: 9rem; }
/* Anschreiben: „Gesendet“ erst nach dem Senden – abgesetzt vom Kopieren/Öffnen */
.nach-senden { display: grid; gap: .45rem; border-top: 1px solid var(--linie); padding-top: .65rem; margin-top: .2rem; }
.nach-senden h4 { margin: 0; font-size: .95rem; }

.meldungen { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 200; display: grid; gap: .4rem; width: min(560px, calc(100vw - 1.5rem)); pointer-events: none; }
.meldung { pointer-events: auto; cursor: pointer; padding: .6rem .9rem; border-radius: 8px; background: var(--grau); color: #fff; box-shadow: var(--schatten); font-size: .95rem; }
.meldung.ok { background: var(--gruen-dunkel); }
.meldung.fehler { background: var(--ernst); }

/* ---------- Login ---------- */
.login { max-width: 400px; margin: 9vh auto 2rem; padding: 0 1rem; }
.karte { background: #fff; border-radius: 10px; box-shadow: var(--schatten); padding: 1rem 1.1rem; }
.login .karte { padding: 1.6rem; border-top: 4px solid var(--gruen); }
.login img { height: 64px; width: auto; display: block; margin: 0 auto .9rem; }
.login h1 { text-align: center; margin-bottom: .15rem; }
.login .unter { text-align: center; color: var(--grau-mittel); margin: 0 0 1.1rem; font-size: .92rem; }
.login .fuss { text-align: center; color: var(--grau-hell); font-size: .8rem; margin-top: 1rem; }

/* ---------- Auswertung ---------- */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .7rem; }
.seitenkopf h1 { margin: 0; }
.seitenkopf .rechts { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; margin-bottom: .8rem; }
.kachel { background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); padding: .7rem .9rem; border-left: 4px solid var(--gruen); }
.kachel .wert { font-size: 1.8rem; font-weight: 700; line-height: 1.1; color: var(--grau); }
.kachel .label { font-size: .86rem; color: var(--grau-mittel); }
button.kachel { border: none; border-left: 4px solid var(--grau-hell); text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.kachel:hover { background: var(--flaeche); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: .8rem; }
.balkenliste { display: grid; gap: .28rem; }
.balkenzeile { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 3.2em; gap: .5rem; align-items: center; font-size: .9rem; background: none; border: none; padding: .05rem 0; text-align: left; width: 100%; color: inherit; }
button.balkenzeile { cursor: pointer; border-radius: 4px; }
button.balkenzeile:hover { background: var(--gruen-zart); }
.balkenzeile .bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balkenzeile .bb { height: 14px; background: var(--flaeche); border-radius: 3px; overflow: hidden; }
.balkenzeile .bb i { display: block; height: 100%; background: var(--gruen); border-radius: 3px; min-width: 2px; }
.balkenzeile.alt .bb i { background: var(--ernst); }
.balkenzeile .bz { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.saeulen { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding-top: .3rem; }
.saeulen i { flex: 1 1 0; background: var(--gruen); border-radius: 2px 2px 0 0; min-height: 2px; display: block; }
.saeulen i.null { background: var(--linie); }

/* ---------- Kontakte ---------- */
.seitenhinweis { margin: -.2rem 0 .8rem; max-width: 72rem; }
h2.abschnitt { margin: 1.1rem 0 .45rem; font-size: 1.05rem; color: var(--gruen-dunkel); }
h2.abschnitt:first-child { margin-top: 0; }
table.kontakte .adresse { font-family: var(--mono); font-size: .86rem; overflow-wrap: anywhere; }
table.kontakte .vorlage { display: inline-block; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
table.kontakte td.bemerkung { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 22rem; }
.luecken { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .5rem 0 .2rem; }

/* ---------- Verwaltung ---------- */
.reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); margin-bottom: .8rem; overflow-x: auto; }
.reiter button { white-space: nowrap; }
/* Sichtbarkeit: je Quelle eine Karte mit Haken je Netz und Versandart (Haken = sichtbar) */
.werkzeug.klebend { position: sticky; top: var(--kopf-hoehe); z-index: 5; background: var(--flaeche); padding: .45rem 0; }
.sk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: .8rem; align-items: start; }
.sk-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.sk-kopf h3 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 1.02rem; color: var(--grau); }
.karte.sk .hinweis { margin: .15rem 0 0; }
fieldset.sk-gruppe { border: none; padding: 0; margin: .6rem 0 0; min-width: 0; }
fieldset.sk-gruppe legend { padding: 0; margin-bottom: .2rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gruen-dunkel); }
.sk-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .6rem; }
.sk-haken { display: flex; align-items: center; gap: .45rem; padding: .16rem .3rem; border-radius: 4px; cursor: pointer; font-size: .92rem; min-width: 0; }
.sk-haken:hover { background: var(--gruen-zart); }
.sk-haken input { accent-color: var(--gruen-dunkel); width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; }
.sk-haken .sk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-haken .sk-zahl { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--grau-mittel); font-size: .84rem; }
.sk-haken.null .sk-name, .sk-haken.null .sk-zahl { color: var(--grau-hell); }
.sk-haken.aus { background: var(--flaeche); }
.sk-haken.aus .sk-name { text-decoration: line-through; color: var(--grau-mittel); }
.reiter button { background: none; border: none; border-bottom: 3px solid transparent; padding: .45rem .8rem; cursor: pointer; font-weight: 600; color: var(--grau-mittel); }
.reiter button.aktiv { color: var(--gruen-dunkel); border-bottom-color: var(--gruen); }
.werkzeug { display: flex; gap: .5rem; align-items: center; margin-bottom: .55rem; flex-wrap: wrap; }
.werkzeug .rechts { margin-left: auto; }
table.tab td.aktionen { white-space: nowrap; text-align: right; }
table.tab td.aktionen .btn { margin-left: .25rem; }
table.tab tr.inaktiv td { color: var(--grau-hell); }

/* ---------- Schmal: Karten statt Tabelle ---------- */
@media (max-width: 1099px) {
  .detail { width: min(720px, 100%); }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .kopf { position: static; }
  .kopf-innen { padding: .35rem .6rem; gap: .3rem .6rem; }
  .marke img { height: 28px; }
  .marke b { font-size: 1.05rem; }
  .hauptnav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .hauptnav a { white-space: nowrap; }
  .ampel-leiste { order: 4; flex-basis: 100%; }
  .chips { order: 5; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .chip { white-space: nowrap; }
  .werkzeug.klebend { top: 0; }
  .sk-liste { grid-template-columns: minmax(0, 1fr); }
  .seitenkopf .rechts { margin-left: 0; flex-wrap: wrap; }
  main#inhalt { padding: .6rem .6rem 3rem; }
  .filterleiste label { flex: 1 1 44%; }
  .filterleiste select, .filterleiste input, .filterleiste input[type=search] { max-width: none; width: 100%; }
  .detail { top: 0; width: 100%; z-index: 40; padding: 0 .7rem 2rem; }

  .tab-wrap.karten { background: none; box-shadow: none; overflow: visible; }
  table.faelle, table.faelle tbody { display: block; width: 100%; }
  table.faelle thead { display: none; }
  /* Hinweise stehen in einer EIGENEN Zeile über beide Spalten und dürfen umbrechen: mehrere Badges in der
     auto-Spalte drückten sonst die linke Spalte (Nummer, Kunde, Quelle, Zuständig) auf wenige Pixel zusammen. */
  table.faelle tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .6rem;
    grid-template-areas: "nummer status" "titel titel" "kunde alter" "quelle netz" "zustaendig art" "hinweise hinweise";
    background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); padding: .55rem .7rem; margin-bottom: .5rem; border-left: 4px solid transparent;
  }
  table.faelle tr.prio-hoch { border-left-color: var(--ernst); }
  table.faelle tr.gewaehlt { border-left-color: var(--gruen); background: var(--gruen-zart); }
  table.faelle tr.leerzeile { display: block; }
  table.faelle td { display: block; border: none !important; padding: 0 !important; background: none !important; box-shadow: none !important; min-width: 0; }
  table.faelle td.c-nummer { grid-area: nummer; }
  table.faelle td.c-status { grid-area: status; text-align: right; }
  table.faelle td.c-titel { grid-area: titel; padding: .1rem 0 .15rem !important; }
  table.faelle td.c-kunde { grid-area: kunde; font-weight: 600; }
  table.faelle td.c-alter { grid-area: alter; }
  table.faelle td.c-quelle { grid-area: quelle; font-size: .84rem; color: var(--grau-mittel); }
  table.faelle td.c-art { grid-area: art; font-size: .84rem; color: var(--grau-mittel); text-align: right; }
  table.faelle td.c-netz { grid-area: netz; font-size: .84rem; text-align: right; }
  table.faelle td.c-zustaendig { grid-area: zustaendig; font-size: .84rem; color: var(--grau-mittel); }
  table.faelle td.c-zustaendig::before { content: "Zuständig: "; }
  table.faelle td.c-hinweise { grid-area: hinweise; white-space: normal; }
  table.faelle td.c-hinweise .hinweise { display: flex; margin-top: .2rem; }
  table.faelle td.c-hinweise .hinweise:empty { display: none; }
  /* Liegezeit und Sendungsalter nebeneinander: „seit 3 T  Sdg. 20 T“ */
  table.faelle td.c-alter .lz, table.faelle td.c-alter .sdg { display: inline; }
  table.faelle td.c-alter .sdg { margin-left: .45rem; }
  table.faelle tr.ist-ausgeblendet { border-left-color: var(--grau-hell); background: #fafafa; }

  /* Tabellen mit Beschriftung je Zelle (Kontakte): Karten statt Tabelle, Beschriftung aus data-label */
  .tab-wrap.stapel-wrap { background: none; box-shadow: none; overflow: visible; }
  table.stapel, table.stapel tbody { display: block; width: 100%; }
  table.stapel thead { display: none; }
  table.stapel tr { display: block; background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); padding: .5rem .7rem; margin-bottom: .5rem; }
  table.stapel td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; border: none !important; padding: .14rem 0; }
  table.stapel td::before { content: attr(data-label); color: var(--grau-mittel); font-size: .84rem; }
  table.stapel td:empty { display: none; }
  table.stapel td.aktionen { display: flex; justify-content: flex-end; gap: .3rem; padding-top: .4rem; }
  table.stapel td.aktionen::before { content: none; }
  table.stapel tr.leerzeile td { display: block; }
  table.stapel tr.leerzeile td::before { content: none; }
  table.kontakte .vorlage { max-width: 100%; }
}
@media print {
  .kopf, .filterleiste, .btn, .meldungen { display: none !important; }
  .detail { position: static; width: auto; box-shadow: none; border: none; }
}

/* =====================================================================
   Scanner-Seite (scanner.html) – große Bedienelemente für RS36 / Handschuhe
   ===================================================================== */
body.scanner { background: #e9eaec; font-size: 17px; -webkit-tap-highlight-color: transparent; min-height: 100vh; display: flex; justify-content: center; }
.geraet { width: 100%; max-width: 480px; min-height: 100vh; display: flex; flex-direction: column; background: var(--flaeche); position: relative; }
.s-kopf { background: #fff; border-bottom: 4px solid var(--gruen); padding: .55rem .9rem; display: flex; align-items: center; gap: .7rem; position: sticky; top: 0; z-index: 20; }
.s-kopf img { height: 34px; width: auto; display: block; }
.s-kopf .s-titel { font-weight: 700; font-size: 1.1rem; line-height: 1.1; color: var(--grau); }
.s-kopf .s-titel small { display: block; font-weight: 400; font-size: .74rem; color: var(--grau-mittel); letter-spacing: .02em; }
.s-status { margin-left: auto; display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: var(--gruen-dunkel); }
.s-status .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); }
.s-status.aus { color: var(--ernst); }
.s-status.aus .punkt { background: var(--ernst); }
.s-haupt { flex: 1; padding: .9rem .8rem 7.5rem; display: flex; flex-direction: column; gap: .9rem; }
.s-schritt { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grau-mittel); margin: 0 0 .4rem; }
.s-karte { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: .9rem; }

.scanfeld { background: var(--grau); border-radius: 14px; padding: .8rem; }
.scanfeld .kopfzeile { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #cfe58a; margin-bottom: .5rem; }
.scanfeld input {
  width: 100%; min-height: 64px; border-radius: 10px; border: 3px solid transparent; background: #1f1f20; color: #d9f08f;
  font-family: var(--mono); font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; padding: .5rem .7rem; outline: none;
}
.scanfeld input::placeholder { color: #74803f; font-weight: 400; font-size: 1.05rem; font-family: var(--schrift); }
.scanfeld input:focus { border-color: var(--gruen); }
.scanfeld .werkzeuge { display: flex; gap: .5rem; margin-top: .6rem; }
.scanfeld .werkzeuge button {
  flex: 1; min-height: 52px; border-radius: 10px; border: 2px solid #5a5a5c; background: transparent; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.scanfeld .werkzeuge button.aktiv { background: var(--gruen); border-color: var(--gruen); color: var(--gruen-text); }
.scanfeld .tipp { margin: .55rem 0 0; font-size: .8rem; color: #c9c9cc; }

.gruende { display: grid; gap: .55rem; }
.grund {
  display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 66px; padding: .6rem .9rem; text-align: left;
  border-radius: 12px; border: 2.5px solid var(--linie); background: #fff; color: var(--grau); font-size: 1.15rem; font-weight: 600; cursor: pointer;
}
.grund .marke-rund { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--grau-hell); flex-shrink: 0; position: relative; }
.grund.aktiv { border-color: var(--gruen); background: var(--gruen-zart); color: var(--gruen-text); }
.grund.aktiv .marke-rund { border-color: var(--gruen-dunkel); }
.grund.aktiv .marke-rund::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--gruen-dunkel); }
.grundtext { margin-top: .6rem; }
.grundtext textarea {
  width: 100%; min-height: 92px; border: 2.5px solid var(--linie); border-radius: 12px; padding: .7rem; font-size: 1.1rem; resize: vertical; outline: none; background: #fff;
}
.grundtext textarea:focus { border-color: var(--gruen); }

.fotoknopf {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; border-radius: 12px; border: 2.5px dashed var(--grau-hell);
  background: #fff; color: var(--grau); font-size: 1.1rem; font-weight: 600; cursor: pointer;
}
.fotovorschau { margin-top: .6rem; position: relative; }
.fotovorschau img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; display: block; }
.fotovorschau button { position: absolute; top: 8px; right: 8px; min-height: 48px; padding: 0 1rem; border: none; border-radius: 10px; background: rgba(57, 57, 58, .88); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }

.s-verlauf .eintrag { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.s-verlauf .eintrag:last-child { border-bottom: none; }
.s-verlauf .code { font-family: var(--mono); font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.s-verlauf .info { color: var(--grau-mittel); font-size: .84rem; overflow-wrap: anywhere; }
.s-verlauf .haken-ok { color: var(--gruen-dunkel); font-size: 1.4rem; font-weight: 700; }
.s-verlauf .leer { color: var(--grau-mittel); text-align: center; padding: .4rem 0; font-size: .92rem; }
.s-fuss-link { text-align: center; }
.s-fuss-link button { background: none; border: none; color: var(--grau-mittel); text-decoration: underline; font-size: .85rem; padding: .8rem; cursor: pointer; }

.sendeleiste { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; padding: 1rem .8rem .9rem; z-index: 30; background: linear-gradient(to top, var(--flaeche) 70%, rgba(244, 244, 245, 0)); }
.senden { width: 100%; min-height: 72px; border: none; border-radius: 14px; background: var(--grau); color: #fff; font-size: 1.4rem; font-weight: 700; cursor: pointer; letter-spacing: .02em; }
.senden:disabled { background: #b9b9bd; color: #f1f1f2; cursor: not-allowed; }
.senden.bereit { background: var(--gruen); color: var(--gruen-text); box-shadow: 0 6px 18px rgba(137, 183, 26, .45); }

/* Bleibender Hinweis "NICHT gesendet" über dem Sendeknopf – bis erneut gesendet oder verworfen wurde */
.s-fehlversand { display: flex; align-items: center; gap: .6rem; background: var(--ernst); color: #fff; border-radius: 12px; padding: .6rem .7rem; margin-bottom: .55rem; font-size: .95rem; box-shadow: 0 4px 14px rgba(179, 38, 30, .35); }
.s-fehlversand p { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.s-fehlversand button { flex-shrink: 0; min-height: 48px; padding: 0 .9rem; border: 2px solid #fff; border-radius: 10px; background: transparent; color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; }
body.hat-fehlversand .s-haupt { padding-bottom: 14rem; }
body.hat-fehlversand .s-toast { bottom: 225px; }
.scanfeld input[readonly] { opacity: .6; border-color: #5a5a5c; }
.scanfeld .werkzeuge button:disabled { opacity: .45; cursor: not-allowed; }

.s-toast { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); width: calc(100% - 1.6rem); max-width: 450px; background: var(--grau); color: #fff; padding: .8rem 1rem; border-radius: 12px; font-size: 1rem; text-align: center; z-index: 60; }
.s-toast.fehler { background: var(--ernst); }
.s-banner { background: var(--ernst-hell); color: var(--ernst); border: 2px solid var(--ernst-linie); border-radius: 12px; padding: .7rem .9rem; font-weight: 600; }

.s-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(57, 57, 58, .6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.s-erfolg { background: #fff; border-radius: 18px; padding: 1.4rem 1.2rem; width: 100%; max-width: 420px; text-align: center; border-top: 6px solid var(--gruen); }
.s-erfolg .kreis { width: 68px; height: 68px; border-radius: 50%; background: var(--gruen-zart); color: var(--gruen-dunkel); font-size: 2.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto .7rem; }
.s-erfolg h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.s-erfolg p { margin: 0 0 .7rem; color: var(--grau-mittel); font-size: .95rem; }
.s-erfolg dl { text-align: left; background: var(--flaeche); border-radius: 12px; padding: .7rem .8rem; margin: 0 0 1rem; display: grid; grid-template-columns: max-content 1fr; gap: .2rem .7rem; font-size: .95rem; }
.s-erfolg dt { color: var(--grau-mittel); }
.s-erfolg dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.s-erfolg button { width: 100%; min-height: 66px; border: none; border-radius: 12px; background: var(--gruen); color: var(--gruen-text); font-size: 1.2rem; font-weight: 700; cursor: pointer; }

.s-leer { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.4rem; gap: .6rem; }
.s-leer h1 { font-size: 1.5rem; }
.s-leer p { margin: 0; color: var(--grau-mittel); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }