/* ==========================================================================
   ERFASSUNGS-BILDSCHIRM

   Aufteilung nach Reichweite des Daumens: Ortskopf oben (klebt, reine
   Orientierung), Karten in der Mitte, alle Bedienung unten. Wer einhändig im
   Gehen arbeitet, erreicht zuverlässig nur das untere Drittel.
   ========================================================================== */

.erf { display: flex; flex-direction: column; min-height:100vh;min-height:100svh; }

/* --------------------------------------------------- Ortskopf: wo bin ich */
/* Klebt UNTER der App-Leiste, nicht unter ihr versteckt: Beide klebten oben
   bei 0, und gescrollt (etwa nach jeder Aufnahme, die ihre Karte in die
   Mitte holt) war vom Ort nur ein leerer Streifen übrig. Steht das Netzband,
   rückt er um dessen Höhe nach (--netz-h, siehe rundgang.css). */
.ortkopf {
  position: sticky; top: calc(var(--bar) + var(--safe-t) + var(--netz-h, 0px)); z-index: 40;
  display: flex; align-items: center; gap: var(--s3);
  min-height: 68px; padding: var(--s3) var(--s4);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.ortkopf-pin { color: var(--brand); flex: none; }
.ortkopf-t { flex: 1; min-width: 0; }
.ortkopf-t b {
  display: block; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ortkopf-t span { display: block; font-size: .8rem; color: var(--ink-2); margin-top: 1px; }
.ortkopf > .ic:last-child { color: var(--ink-3); flex: none; }

/* ----------------------------------------------------------- Kartenliste */
.erf-liste {
  flex: 1;
  padding: var(--s3) var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}

.kar {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--line-2); border-radius: var(--r-md);
  overflow: hidden;
}
.kar.sofort { border-left-color: var(--bad); }
.kar.laeuft {
  border-left-color: var(--bad);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent);
}

.kar-haupt {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: var(--s3) var(--s4);
  color: inherit;
}
.kar-haupt:active { background: var(--surface-2); }
.kar-kopf { display: flex; align-items: baseline; gap: var(--s2); }
/* Das dringendste Signal der Erfassung war ihre kleinste Schrift (9,9 px),
   Weiß auf --bad nur 3,4 : 1. Jetzt 0,8 rem auf dem dunkleren Rot (5,2 : 1). */
.kar-sofort {
  flex: none; font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--r-full); background: var(--bad-flaeche); color: #fff;
}
.kar-titel {
  flex: 1; min-width: 0; font-size: 1.04rem; font-weight: 750; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Eine Karte ohne Titel sieht auch so aus — nichts täuscht Fertigkeit vor. */
/* Hell eine Stufe dunkler: --ink-3 kam dort nur auf 3,5 : 1. */
.kar-titel.blass { color: var(--ink-3-schrift, var(--ink-3)); font-weight: 600; font-style: italic; }
.kar-zeit { flex: none; font-size: .78rem; color: var(--ink-3-schrift, var(--ink-3)); font-variant-numeric: tabular-nums; }
.kar-text {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px; font-size: .88rem; color: var(--ink-2); line-height: 1.4;
}
.kar-abt { display: block; margin-top: 6px; font-size: .8rem; font-weight: 650; color: var(--brand); }
.kar-hinweise { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
/* Die Schrift hell in dunklerem Orange: auf dem blassen Grund kam --orange
   nur auf 2,2 : 1 — „Kein Foto" war im Licht des Flurs kaum zu lesen. */
.kar-hinweise .pill {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange-schrift, var(--orange));
}

.kar-laeuft {
  display: flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: .86rem; font-weight: 650; color: var(--bad-schrift, var(--bad));
}
.kar-laeuft i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--bad);
  animation: pulsieren 1.3s ease-in-out infinite;
}
/* Gestoppt, das letzte Stück ist noch unterwegs: nicht mehr rot — es wird
   nicht mehr gesprochen —, aber sichtbar beschäftigt. */
.kar-laeuft.sichert { color: var(--ink-2); }
.kar-laeuft.sichert i { background: var(--ink-2); }
@keyframes pulsieren { 50% { opacity: .25; } }

/* Fotostreifen. Rechts sitzen Foto und Sprechen für GENAU DIESE Karte —
   damit sind „mehrere Bilder zu einer Maßnahme" und „erst das Foto, dann
   darüber sprechen" kein Sonderweg, sondern der normale. Unten in der
   Leiste entsteht dagegen immer eine neue Maßnahme. */
.kar-fotos {
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--s4) var(--s3);
}
/* Die Bilder geben nach, die Knöpfe nie: Auf einem schmalen Telefon wird
   eher ein Bild weniger gezeigt, als dass ein Knopf aus der Karte rutscht. */
.kar-bilder {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  overflow: hidden;
}
.kar-foto {
  width: 52px; height: 52px; flex: none;
  padding: 0; border: 0; border-radius: var(--r-xs);
  overflow: hidden; background: var(--photo-bg);
}
.kar-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kar-mehr {
  width: 52px; height: 52px; flex: none;
  padding: 0; border: 0; border-radius: var(--r-xs);
  display: grid; place-items: center; background: var(--surface-3);
  font-size: .86rem; font-weight: 700; color: var(--ink-2);
}
.kar-aktionen { flex: none; display: flex; gap: 6px; margin-left: auto; }
/* Symbol UND Wort: Ein Symbol muss man deuten, ein Wort liest man.
   In rem statt px: Wer die Schrift größer stellt, bekommt auch größere
   Knöpfe — vorher ragte „Sprechen" dann über den Rand. */
.kar-knopf {
  width: 4rem; min-height: 3.5rem; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 2px 0;
  background: var(--surface-2); border: 1.5px dashed var(--line-2);
  border-radius: var(--r-xs); color: var(--ink-2);
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
}
.kar-knopf:active { background: var(--surface-3); border-color: var(--brand); color: var(--brand); }
/* Eine Karte ohne ein brauchbares Wort: Sprechen ist der nächste Schritt.
   Ein dunkles Blau statt der Markenfarbe — Weiß auf dem hellen Blau war mit
   2,7 : 1 zu blass, gerade auf dem Knopf, der als Nächstes dran ist. */
.kar-knopf.wichtig { background: #0b6a93; border: 1.5px solid #0b6a93; color: #fff; }
.kar-knopf.wichtig:active { background: #08506f; }
.kar-knopf.kar-stopp { background: #c43b2e; border: 1.5px solid #c43b2e; color: #fff; }

/* „Wird ausgewertet …" — Mikrofon, Schallwellen, Zeilen, die entstehen.
   Klein und ruhig: Es soll zeigen, dass etwas passiert, nicht ablenken. */
.kar-wertet {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: .86rem; font-weight: 650; color: var(--ink-2);
}
/* Hell das dunklere Blau: Das Markenblau kam auf Weiß nur auf 2,7 : 1. */
.kw-bild { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-zeichen, var(--brand)); flex: none; }
.kw-bild .ic { flex: none; }
.kw-wellen { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.kw-wellen i {
  display: block; width: 3px; height: 4px; border-radius: 2px;
  background: currentColor; animation: kw-welle 1s ease-in-out infinite;
}
.kw-wellen i:nth-child(2) { animation-delay: .15s; }
.kw-wellen i:nth-child(3) { animation-delay: .3s; }
@keyframes kw-welle { 0%, 100% { height: 4px; opacity: .5; } 50% { height: 13px; opacity: 1; } }
.kw-zeilen { display: inline-grid; gap: 2px; width: 16px; }
.kw-zeilen i {
  display: block; height: 2px; border-radius: 1px; background: currentColor;
  transform-origin: left center; animation: kw-zeile 1.8s ease-in-out infinite;
}
.kw-zeilen i:nth-child(1) { width: 100%; }
.kw-zeilen i:nth-child(2) { width: 80%; animation-delay: .2s; }
.kw-zeilen i:nth-child(3) { width: 55%; animation-delay: .4s; }
@keyframes kw-zeile {
  0% { transform: scaleX(0); opacity: .3; }
  40%, 80% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: .3; }
}
/* Ohne Netz wird nichts ausgewertet — dann auch keine Bewegung. */
/* Gedämpft, aber lesbar: --ink-3 kam im hellen Thema nur auf 3,5:1. */
.kar-wertet.aus { color: var(--ink-2); }
.kar-wertet.aus .ic { color: var(--ink-2); flex: none; }

/* Blatt „Ergänzen": wozu ergänzt wird. */
.ergaenzen-zu {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 var(--s3); font-size: .92rem; color: var(--ink-2);
}
.ergaenzen-zu b { color: var(--ink); }

.erf-leer { text-align: center; padding: var(--s8) var(--s5); color: var(--ink-2); }
.erf-leer .ic { color: var(--ink-3); }
.erf-leer h3 { margin-top: var(--s3); font-size: 1.04rem; color: var(--ink); }
.erf-leer p { margin-top: var(--s2); font-size: .9rem; line-height: 1.5; }

.erf-trenner {
  margin: var(--s5) 0 var(--s1); text-align: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3-schrift, var(--ink-3));
}
.ort-zeile {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; min-height: 54px; padding: 0 var(--s4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink-2); text-align: left;
}
.ort-zeile > span {
  flex: 1; min-width: 0; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ort-zeile b { font-size: .8rem; font-weight: 650; color: var(--ink-3-schrift, var(--ink-3)); }

/* ------------------------------------------ Untere Leiste: Ort + drei Wege */
.erf-leiste {
  position: sticky; bottom: 0; z-index: 45;
  padding: var(--s2) var(--s3) calc(var(--s3) + var(--safe-b));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line);
}
.ortzeile-unten {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; min-height: 52px; margin-bottom: var(--s2); padding: 0 var(--s3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); text-align: left;
}
.ortzeile-unten > span {
  flex: 1; min-width: 0; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ortzeile-unten em { font-size: .78rem; font-style: normal; color: var(--ink-3-schrift, var(--ink-3)); }
.ortzeile-unten .ic:first-child { color: var(--brand); }

/* Die drei Wege sind gleich groß: keiner ist der Hauptweg, weil der Auftrag
   ausdrücklich alle drei Reihenfolgen als gleichwertig beschreibt. */
.erf-wege { display: flex; gap: var(--s2); }
.weg {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 86px; padding: var(--s2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); font-weight: 700; font-size: .94rem;
  transition: transform .08s var(--ease), background .15s;
}
.weg:active { transform: scale(.97); background: var(--surface-3); }
.weg .ic { color: var(--brand); }
.weg-sprechen { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.weg-sprechen .ic { color: #fff; }

/* Während der Aufnahme: Stopp über die volle Breite — aber Foto und Schreiben
   bleiben erreichbar. Genau hier ging in der alten Demo die Aufnahme verloren. */
.erf-wege.aufnahme { flex-direction: column; }
/* Dasselbe dunklere Rot wie „Stopp" an der Karte: Weiß auf --bad kam nur auf
   3,4 : 1 — auf dem wichtigsten Knopf während der Aufnahme. Rot ist hier
   Signal, keine Markenfarbe; mit #c43b2e sind es 5,2 : 1. */
.weg-stop {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  width: 100%; min-height: 72px; padding: 0 var(--s4);
  background: #c43b2e; border: 0; border-radius: var(--r-md);
  color: #fff; font-size: 1.04rem; font-weight: 750;
  animation: atmen 1.8s ease-in-out infinite;
}
.weg-stop b { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
@keyframes atmen {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #c43b2e 40%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, #c43b2e 0%, transparent); }
}
.weg-paar { display: flex; gap: var(--s2); margin-top: var(--s2); }
.weg-paar .weg { min-height: 72px; }
.weg-hinweis { margin-top: 6px; text-align: center; font-size: .76rem; color: var(--ink-3-schrift, var(--ink-3)); }

/* Zuordnung wird kurz gezeigt und ist sofort korrigierbar — nie stillschweigend. */
/* Ein dunkleres Grün als --ok: Weiß auf dem hellen Grün war mit 2,8 : 1
   kaum zu lesen — und hier steht der nächste Schritt. */
.foto-ok {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s2); padding: 10px var(--s3);
  background: #23743a; color: #fff; border-radius: var(--r-md);
  font-size: .9rem; box-shadow: var(--sh-2);
  animation: hochschieben .2s var(--ease);
}
.foto-ok.ruhig { animation: none; }
/* Darf umbrechen: „Neue Maßnahme mit Foto" war neben dem Knopf sonst nur
   noch „Neue Maßnahme m…". */
.foto-ok span { flex: 1; min-width: 0; line-height: 1.3; }
.foto-ok .ic { flex: none; }
.foto-ok button {
  flex: none; background: rgba(255, 255, 255, .22); border: 0; border-radius: var(--r-xs);
  color: #fff; font-weight: 700; font-size: .82rem; padding: 7px 11px;
  display: inline-flex; align-items: center; gap: 5px;
}
/* „Dazu sprechen" nach einem Foto: der nächste Schritt, nicht nur ein
   Hinweis — deshalb so groß wie die anderen Knöpfe (56 px). */
.foto-ok button[data-dazu-sprechen] {
  min-height: 56px; padding: 0 var(--s4);
  background: #fff; color: #23743a; font-size: .95rem;
}
.ton-neu { justify-content: center; }
@keyframes hochschieben { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------ Vollbildblatt */
.blatt {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; background: var(--bg);
  transform: translateY(100%); transition: transform .24s var(--ease);
}
.blatt.offen { transform: none; }
.blatt .panel-bar { flex: none; }
.blatt-koerper {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--s4) calc(var(--s8) + var(--safe-b));
}

/* Ortwahl: große Zeilen, weil hier im Gehen getippt wird. */
.ort-suche { margin: 0 0 var(--s4); }
.ort-liste { display: flex; flex-direction: column; gap: var(--s2); }
.ort-gross {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: 64px; padding: 0 var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); font-size: 1.04rem; font-weight: 650; text-align: left;
}
.ort-gross:active { background: var(--surface-3); }
.ort-gross .ic { color: var(--ink-3); flex: none; }
.ort-gross span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ort-neu { border-style: dashed; border-color: var(--brand); color: var(--brand); }
.ort-neu .ic { color: var(--brand); }
.ort-leer { color: var(--ink-3-schrift, var(--ink-3)); font-size: .9rem; text-align: center; padding: var(--s6) var(--s4); }

/* Schreiben — gleichrangig, nicht Notbehelf. */
.schreib-feld {
  width: 100%; padding: var(--s4); font-size: 1.08rem; line-height: 1.5;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-md); outline: none;
  resize: vertical; min-height: 160px;
}
.schreib-feld:focus { border-color: var(--brand); }
/* Ohne eigene Farbe nahm der Browser sein Grau — dunkel nur 3,8 : 1. */
.schreib-feld::placeholder { color: var(--ink-3-schrift, var(--ink-3)); }
.schreib-tipp {
  display: flex; align-items: center; gap: 7px;
  margin: var(--s3) 0 var(--s5); font-size: .84rem; color: var(--ink-2);
}
.schreib-tipp .ic { color: var(--brand); flex: none; }

/* Maßnahme bearbeiten */
.ton-zeile {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3); padding: var(--s3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: .88rem; color: var(--ink-2);
}
.ton-zeile .ic { color: var(--brand); }
/* So hoch, wie Chromium seine Leiste selbst zeichnet (54 px). Mit 36 px
   schnitt sie dem Abspielknopf die Tippfläche ab: Der Knopf misst 32 px, ein
   Tipp wirkt aber bis etwa 8 px um ihn herum — das sind jetzt rund 48 × 48 px
   statt 36 px Höhe (in Edge vermessen). Größer geht nur mit einem eigenen Knopf. */
.ton-zeile audio { width: 100%; height: 54px; margin-top: var(--s2); }

/* „So wurde es gesagt:" — nur zum Lesen, deshalb nichts, das wie ein Feld
   aussieht (kein Kasten, den man antippen möchte): ein Zitat mit Strich
   davor, groß und ruhig, mit den Zeilenumbrüchen der Nachträge. */
.wortlaut-lesen {
  margin: 0; padding: var(--s1) 0 var(--s1) var(--s4);
  border-left: 4px solid var(--line-2);
  font-size: 1.05rem; line-height: 1.5; color: var(--ink);
  white-space: pre-line; overflow-wrap: anywhere;
}

.foto-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s2); }
.foto-feld {
  position: relative; aspect-ratio: 1;
  border-radius: var(--r-sm); overflow: hidden; background: var(--photo-bg);
}
.foto-feld img { width: 100%; height: 100%; object-fit: cover; }
/* Getroffen wird 44 × 44 von der Ecke aus; zu sehen bleibt der kleine Kreis
   (28 px) an seiner Stelle — ein größerer deckte mehr vom Foto zu. Mit 28 × 28
   traf man das Kreuz kaum. Wer daneben tippt, wird ohnehin erst gefragt. */
.foto-feld button[data-foto-weg] {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 44px; padding: 4px 4px 0 0;
  display: grid; place-items: start end;
  background: none; border: 0; color: #fff;
}
.foto-feld button[data-foto-weg] .ic {
  width: 28px; height: 28px; padding: 7px;
  border-radius: 50%; background: rgba(0, 0, 0, .6);
}
.foto-plus {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--surface-2); border: 1.5px dashed var(--line-2); color: var(--ink-2);
  font-size: .76rem; font-weight: 650;
}
.foto-plus .ic { color: var(--brand); }

.prio-wahl { display: flex; gap: var(--s2); }
.prio {
  flex: 1; min-height: 52px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  color: var(--ink-2); font-weight: 700; font-size: .95rem;
}
/* Gewählt: dieselben Töne, dunkler. Weiß auf --orange kam nur auf 2,5 : 1 —
   und „Hoch" ist auf jeder Karte vorgewählt, also der am schlechtesten
   lesbare Text jedes Detailblatts. */
.prio.an { color: #fff; }
.prio-sofort.an { background: var(--bad-flaeche); border-color: var(--bad-flaeche); }
.prio-hoch.an { background: var(--orange-flaeche); border-color: var(--orange-flaeche); }
.prio-mittel.an { background: var(--idle-flaeche); border-color: var(--idle-flaeche); }

.abt-gruppe { margin-top: var(--s3); }
.abt-marke {
  display: block; margin-bottom: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3-schrift, var(--ink-3));
}
.abt-wahl { display: flex; flex-wrap: wrap; gap: var(--s2); }
.abt {
  min-height: 48px; padding: 0 var(--s4);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-full);
  color: var(--ink-2); font-weight: 650; font-size: .92rem;
}
.abt.an { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

.blatt-koerper .btn-block { margin-top: var(--s5); }
.blatt-koerper .btn-quiet { margin-top: var(--s2); }

@media (prefers-reduced-motion: reduce) {
  .weg-stop, .kar-laeuft i { animation: none; }
  .blatt { transition: none; }
  .foto-ok { animation: none; }
  /* Die Auswerte-Bewegung steht dann still: volle Wellen, fertige Zeilen. */
  .kw-wellen i { animation: none; height: 10px; opacity: 1; }
  .kw-zeilen i { animation: none; transform: none; opacity: 1; }
}

/* ------------------------------------------- Wortgenau oder sortiert
   Zwei ganze Wörter, zwei große Flächen, kein Symbol zum Deuten und
   keine Wischbewegung: die Nutzer sind teils ältere Kollegen, und was
   man nur findet, wenn man es schon kennt, findet im Haus niemand.
   Außerdem ist Wischen nach rechts im iPhone-Safari die Zurück-Geste. */
.kar-fassung {
  display: flex; gap: 6px;
  padding: 0 var(--s4) var(--s3);
}
.fsg {
  flex: 1 1 0;
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 var(--s2);
}
.fsg.an {
  border-color: var(--brand);
  background: var(--brand-weich);
  color: var(--brand-tief);
}
.fsg.an::before { content: '✓ '; }
/* Noch nicht wählbar — aber lesbar: Hier steht die einzige Statusmeldung
   einer getippten Karte („Wird sortiert …"). Mit Deckkraft .55 kam sie auf
   2,3 : 1. Inaktiv wirkt sie jetzt durch den gestrichelten Rand ohne Fläche
   und die schräge Schrift, nicht durch Blässe. */
.fsg.wartet {
  cursor: default;
  font-weight: 500; font-style: italic;
  border-style: dashed;
  background: none;
  color: var(--ink-3-schrift, var(--ink-3));
}
.fsg:not(.an):not(.wartet):active { background: var(--surface-3); }

/* Der Wortlaut bekommt zwei Zeilen: ein diktierter Satz hat keine
   Überschrift, die man auf eine Zeile kürzen könnte. */
.kar-titel.lang {
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: .98rem; font-weight: 650; line-height: 1.35;
}

/* ------------------------------------------- Abteilung auf der Karte
   Eigene Zeile und eigener Knopf: eine falsche Zuordnung muss sich mit
   zwei Tippern richten lassen, nicht mit vieren. Eine Maßnahme beim
   falschen Team ist schlimmer als eine ohne Team — die fällt wenigstens
   im Abschluss-Bildschirm auf. */
.kar-abt {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s4);
  border: 0; background: none; color: var(--brand-tief);
  font: inherit; font-size: .9rem; font-weight: 650;
  text-align: left; cursor: pointer;
}
.kar-abt svg { flex: none; opacity: .75; }
.kar-abt svg:last-child { margin-left: auto; opacity: .45; }
.kar-abt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kar-abt:active { background: var(--surface-2); }

/* Noch niemand zugeordnet — das ist eine Aufgabe, kein Zustand. Hell in
   dunklem Gelb: --warn als Schrift auf Weiß kam nur auf 2,4 : 1. */
.kar-abt-leer { color: var(--warn-schrift, var(--warn)); }

/* Von travdo vorgeschlagen, noch von keinem Menschen bestätigt. Dunkel in
   --ink-2: --ink-3 auf --surface-3 kam dort nur auf 3,9 : 1 — genau dieser
   Chip soll sagen, dass noch jemand draufschauen muss. */
.kar-abt-q {
  flex: none;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-3-schrift, var(--ink-2));
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
}

/* Hinweis oben im Abteilungsblatt. Ein Satz, der fließt — kein Flex: Text
   und <b> wurden sonst je eine eigene Spalte, und „travdo hat Housekeeping
   vorgeschlagen. Stimmt das?" stand in drei Spalten nebeneinander. Das
   Zeichen hängt links davor, die Zeilen beginnen alle bündig daneben. */
.abt-hinweis {
  position: relative;
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 16px + var(--s2));
  border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2);
  font-size: .9rem; line-height: 1.45;
}
.abt-hinweis svg { position: absolute; left: var(--s4); top: calc(var(--s3) + 3px); opacity: .8; }

/* Was ein Blatt zu sagen hat („Bitte etwas eintragen", „NICHT gespeichert"),
   steht in ihm selbst — über dem Knopf, mit dem es weitergeht. Eine Meldung
   unten lag hinter dem Blatt und war nicht zu sehen. */
.blatt-meldung {
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line-2);
  font-size: .95rem; font-weight: 650; line-height: 1.4;
}
/* Konnte das Gerät nicht sichern: dann rot. */
.blatt-meldung.fehler {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
  color: var(--bad-schrift, var(--bad));
}

/* ------------------------------------------- Pegel beim Sprechen
   Der einzige Beweis, dass das Handy wirklich zuhört. Ohne ihn merkt
   man eine zu leise Aufnahme erst Minuten später an „Nichts verstanden"
   auf der Karte — da ist der Mangel längst zwei Zimmer entfernt. */
.pegel {
  height: 8px;
  margin: var(--s2) var(--s1) 0;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.pegel i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--ok);
  transition: width .08s linear;
}
/* Zu leise: die Farbe sagt es, ohne dass jemand eine Skala lesen muss. */
.pegel i.leise { background: var(--warn); }

/* ------------------------------------------- Rückweg nach Sprach-Ortswechsel
   Keine Meldung, die nach drei Sekunden verschwindet: Hat travdo sich
   geirrt, landen ALLE folgenden Mängel im falschen Raum — und das fällt
   erst viel später auf. Also bleibt die Leiste stehen, bis sie benutzt
   oder der Ort wieder von Hand gesetzt wird — und zwar im Blick: Sie klebt
   unter dem Ortskopf (dessen Höhe misst rueckwegAnheften()) und rückt wie er
   um das Netzband nach. Vorher lag sie bei gescrollter Liste oberhalb des
   Bildschirms. Der Grund ist deckend, weil die Karten beim Scrollen darunter
   durchlaufen. */
.ortzurueck {
  position: sticky; z-index: 39;
  top: calc(var(--bar) + var(--safe-t) + var(--netz-h, 0px) + var(--ortkopf-h, 68px));
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--s4);
  border: 0;
  border-bottom: 1px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  color: var(--brand-tief);
  font: inherit; text-align: left; cursor: pointer;
}
.ortzurueck svg { flex: none; opacity: .8; }
.ortzurueck-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ortzurueck-t b {
  font-size: .95rem; font-weight: 750; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ohne Deckkraft: Die Zeile sagt, wohin der Tipp führt, und kam hell mit .85
   nur auf 3,9 : 1. Die Rangfolge geben Größe und Gewicht. */
.ortzurueck-t span { font-size: .8rem; }
.ortzurueck:active { background: var(--surface-3); }

/* Runde 6: Karte ohne Mangel */
/* Die Auswertung hat in den Worten keinen Mangel gefunden („So, jetzt
   Zimmer 504, hier ist alles in Ordnung."). Vorher blieb davon eine stumme
   Karte, die nur ihren Satz zeigte und den Abschluss sperrte. Jetzt steht es
   groß an der Karte, und der Weg hinaus liegt gleich darunter: ein ganzes
   Wort auf einer Fläche von 52 px. Verschwinden tut nichts von selbst.
   Kontrast (gerechnet): Schrift 13,9 / 15,1 : 1, Satz 7,5 / 5,4 : 1,
   Knopf 5,2 : 1 — dunkel / hell. */
.kar-ohne {
  margin: 0 var(--s4) var(--s3);
  padding: var(--s3) var(--s4);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.kar-ohne-t {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0;
  font-size: 1rem; font-weight: 750; color: var(--ink);
}
/* Grün heißt hier: in Ordnung. Hell ein dunkleres Grün — --ok kam auf dem
   hellen Grund nur auf 2,7 : 1, #23743a kommt auf 5,5 : 1. */
.kar-ohne-t svg { flex: none; color: var(--ok); }
[data-theme="light"] .kar-ohne-t svg { color: #23743a; }
.kar-ohne-s { margin: 4px 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.kar-ohne-weg {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: 52px; margin-top: var(--s3); padding: 0 var(--s4);
  border: 1.5px solid var(--bad-schrift, var(--bad)); border-radius: var(--r-sm);
  background: var(--surface); color: var(--bad-schrift, var(--bad));
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.kar-ohne-weg svg { flex: none; }
.kar-ohne-weg:active { background: var(--surface-3); }