/* =====================================================================
   TerminPilot — Oberfläche
   Tokens und Bausteine nach FRONTEND.md §3.7 und §4.3
   ===================================================================== */

/* --- hidden schlägt alles ------------------------------------------------
   `[hidden]` steht nur im Browser-Stylesheet und verliert gegen jede
   Autorenregel mit display. Genau das ist passiert: Eine Knopfreihe mit
   `display:flex` blieb sichtbar, obwohl der Formularwächter sie verborgen
   hatte. Ein Attribut, das „weg" bedeutet, muss „weg" bedeuten. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------- 1 · Tokens */

:root {
  --farbe-flaeche:     #ffffff;
  --farbe-flaeche-2:   #fafbfc;
  --farbe-flaeche-3:   #f4f5f7;
  --farbe-linie:       #d0d5dc;
  --farbe-linie-stark: #858c96;

  --farbe-text:        #14171b;
  --farbe-text-2:      #454b55;
  --farbe-text-3:      #5f6672;

  --farbe-aktion:      #1544c0;
  --farbe-aktion-dz:   #10328f;
  --farbe-aktion-bg:   #e8effc;

  --farbe-ok:          #0c6733;
  --farbe-ok-bg:       #e6f4ec;
  --farbe-warn:        #6f4800;
  --farbe-warn-bg:     #fff4e5;
  --farbe-fehler:      #a11616;
  --farbe-fehler-bg:   #fdecec;
  --farbe-dringend:    #a5350a;

  --abstand-1: 4px;  --abstand-2: 8px;  --abstand-3: 12px;
  --abstand-4: 16px; --abstand-5: 24px; --abstand-6: 32px;
  --abstand-7: 48px;

  --radius:    8px;
  --radius-s:  5px;
  --schrift:   16px;
  --zeile:     1.6;

  --schatten-1: 0 1px 3px rgba(16, 24, 40, .10);
  --schatten-2: 0 4px 14px rgba(16, 24, 40, .13);
  --schatten-3: 0 12px 32px rgba(16, 24, 40, .12);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ------------------------------------------------------ 2 · Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--schrift);
  line-height: var(--zeile);
  color: var(--farbe-text);
  background: var(--farbe-flaeche-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.011em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 var(--abstand-3); }

a { color: var(--farbe-aktion); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--farbe-aktion-dz); }

/* Fokus immer sichtbar (FRONTEND.md §11) */
:focus-visible {
  outline: 3px solid var(--farbe-aktion);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------- 3 · Formularfelder */

.feld { margin-bottom: var(--abstand-4); }

.feld > label {
  display: block;
  font-size: .925rem;
  font-weight: 600;
  color: var(--farbe-text);
  margin-bottom: var(--abstand-2);
}

.feld .hilfe {
  display: block;
  font-size: .865rem;
  color: var(--farbe-text-3);
  margin-top: var(--abstand-2);
}

.feld .fehler {
  display: block;
  font-size: .865rem;
  color: var(--farbe-fehler);
  margin-top: var(--abstand-2);
  font-weight: 500;
}

.eingabe {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie-stark);
  border-radius: var(--radius-s);
  transition: border-color .12s, box-shadow .12s;
}

.eingabe::placeholder { color: var(--farbe-text-3); }

.eingabe:focus {
  outline: none;
  border-color: var(--farbe-aktion);
  box-shadow: 0 0 0 3px var(--farbe-aktion-bg);
}

.eingabe[aria-invalid="true"] {
  border-color: var(--farbe-fehler);
}

.eingabe[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--farbe-fehler-bg);
}

/* Feld mit Sichtbarkeitsschalter */
.feld-mit-knopf { position: relative; }
.feld-mit-knopf .eingabe { padding-right: 46px; }

.knopf-im-feld {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--farbe-text-3);
  cursor: pointer;
}
.knopf-im-feld:hover { background: var(--farbe-flaeche-3); color: var(--farbe-text-2); }

/* -------------------------------------------------------- 4 · Schalter */

/* Knöpfe.
 *
 * Ein Knopf soll aussehen wie etwas, das man drückt: eine Spur Licht von
 * oben, ein farbiger Schatten darunter, und beim Drücken verschwindet
 * beides. Flach und einfarbig war er zwar korrekt, aber die Seite bestand
 * dadurch aus lauter gleich lauten Rechtecken — der Blick fand die
 * Handlung nicht.
 *
 * Der Schatten trägt die Farbe des Knopfes, nicht Grau: Ein blauer Knopf
 * mit grauem Schatten sieht aus wie aufgeklebt. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--abstand-2);
  padding: 11px 18px;
  font: inherit; font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .12s ease;
}

/* Bewegung als Rückmeldung: Beim Überfahren hebt sich der Knopf einen
   Punkt an und wirft mehr Schatten, beim Drücken sackt er darunter. Ohne
   das bleibt ein Knopf ein Rechteck, das seine Farbe wechselt — man merkt
   erst beim Klicken, dass er einer ist. */
.knopf:hover:not([disabled]) { transform: translateY(-1px); }
.knopf:active:not([disabled]) { transform: translateY(1px); box-shadow: none; }

/* Wer Bewegung abgestellt hat, bekommt keine. Die Farbe bleibt. */
@media (prefers-reduced-motion: reduce) {
  .knopf { transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
  .knopf:hover:not([disabled]),
  .knopf:active:not([disabled]) { transform: none; }
}

/* Der Fokusring nimmt die Farbe der Handlung an — er gehört zum Knopf und
   ist keine Systemmeldung, die darüberliegt. */
.knopf:focus-visible {
  outline: 2px solid var(--farbe-aktion);
  outline-offset: 2px;
}

/* Gesperrt heißt gesperrt: kein Schatten, keine Erhebung, kein Zeiger. */
.knopf[disabled] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(.4);
}

.knopf-primaer {
  background: linear-gradient(180deg, #2a5be0 0%, var(--farbe-aktion) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgb(21 68 192 / .30), 0 4px 12px rgb(21 68 192 / .28);
}
.knopf-primaer:hover:not([disabled]) {
  /* Heller, aber nicht so hell, dass die weiße Schrift darauf unter
     4,5:1 fällt — bei #3d70f0 waren es 4,4:1. Der Sprung kommt ohnehin
     mehr aus dem Schein und der Hebung als aus der Helligkeit. */
  background: linear-gradient(180deg, #3366e8 0%, #1846c6 100%);
  box-shadow: 0 3px 6px rgb(21 68 192 / .34), 0 10px 22px rgb(21 68 192 / .34);
}

/* Der zweite Weg ist keine Fläche, sondern eine Handlung: Deshalb trägt
   er die Schrift der Handlung schon im Ruhezustand und färbt sich beim
   Überfahren ganz ein. Vorher stand er schwarz auf weiß da und war von
   einem Kasten nicht zu unterscheiden. */
.knopf-sekundaer {
  background: var(--farbe-flaeche);
  border-color: #b6cbf4;
  color: var(--farbe-aktion-dz);
  box-shadow: 0 1px 2px rgb(16 24 40 / .07);
}
.knopf-sekundaer:hover:not([disabled]) {
  background: var(--farbe-aktion-bg);
  border-color: var(--farbe-aktion);
  color: var(--farbe-aktion-dz);
  box-shadow: 0 2px 6px rgb(21 68 192 / .22);
}

/* Ein Ausgang, der gut ist: „Erledigt" heißt, der Kunde ist informiert —
   das ist ein Ergebnis, kein Aussortieren. Neben „→ Mensch" sah es
   vorher gleich aus, obwohl das eine abschließt und das andere weiterreicht. */
.knopf-erfolg {
  background: linear-gradient(180deg, #0f7a41 0%, var(--farbe-ok) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgb(12 103 51 / .30), 0 4px 12px rgb(12 103 51 / .26);
}
.knopf-erfolg:hover:not([disabled]) {
  background: linear-gradient(180deg, #12864a 0%, #095128 100%);
  box-shadow: 0 3px 6px rgb(12 103 51 / .34), 0 10px 22px rgb(12 103 51 / .32);
}
.knopf-erfolg:focus-visible { outline-color: var(--farbe-ok); }

/* Der stille Knopf: für Handlungen, die da sein müssen, aber nichts
   vorschlagen — Schließen, Abmelden. Als blauer Knopf riefen sie lauter
   als das, was auf der Seite zu tun ist. */
.knopf-stumm {
  background: transparent;
  border-color: transparent;
  color: var(--farbe-text-3);
  box-shadow: none;
  font-weight: 500;
}
.knopf-stumm:hover:not([disabled]) {
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text);
  box-shadow: none;
}

.knopf-breit { width: 100%; }

/* ------------------------------------------------------- 5 · Meldungen */

.hinweis {
  display: flex; gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  border-radius: var(--radius-s);
  font-size: .9375rem;
  margin-bottom: var(--abstand-4);
  border: 1px solid transparent;
}
.hinweis-fehler  { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); border-color: #f3c9c9; }
.hinweis-ok      { background: var(--farbe-ok-bg);     color: var(--farbe-ok);     border-color: #bfe3cd; }
.hinweis-warn    { background: var(--farbe-warn-bg);   color: var(--farbe-warn);   border-color: #f0c98a; }
.hinweis-info    { background: var(--farbe-aktion-bg); color: var(--farbe-aktion-dz); border-color: #c7d9f8; }
.hinweis .sym    { flex: 0 0 auto; margin-top: 1px; }

/* ==================================================================
   6 · Anmeldung — geteilter Schirm
   ================================================================== */

.auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- linke Hälfte: Marke ------------------------------------------- */

.auth-marke {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--abstand-7);
  color: #fff;
  background:
    radial-gradient(120% 90% at 8% 8%,  #2b5fe3 0%, transparent 55%),
    radial-gradient(110% 80% at 92% 96%, #0d2b6b 0%, transparent 60%),
    linear-gradient(155deg, #12275c 0%, #0b1834 100%);
}

/* ruhiges Punktraster, rein dekorativ */
.auth-marke::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(90% 75% at 30% 25%, #000 20%, transparent 78%);
  pointer-events: none;
}

.auth-marke > * { position: relative; z-index: 1; }

.auth-logo {
  display: inline-flex; align-items: center; gap: var(--abstand-3);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
}
.auth-logo .mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
}

.auth-claim { max-width: 25rem; }
.auth-claim h1 {
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  line-height: 1.2;
  margin-bottom: var(--abstand-4);
}
.auth-claim p {
  color: rgba(255,255,255,.9);
  font-size: 1.06rem;
  margin: 0;
}

.auth-punkte {
  list-style: none;
  margin: var(--abstand-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-3);
}
.auth-punkte li {
  display: flex; align-items: flex-start; gap: var(--abstand-3);
  color: rgba(255,255,255,.92);
  font-size: .98rem;
}
.auth-punkte .haken {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
}

.auth-fuss {
  font-size: .865rem;
  color: rgba(255,255,255,.72);
}

/* --- rechte Hälfte: Formular --------------------------------------- */

.auth-formular {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand-6);
  background: var(--farbe-flaeche);
}

.auth-karte {
  width: 100%;
  max-width: 25rem;
}

.auth-karte header { margin-bottom: var(--abstand-5); }
.auth-karte header h2 { margin-bottom: var(--abstand-2); font-size: 1.45rem; }
.auth-karte header p  { color: var(--farbe-text-2); margin: 0; font-size: 1rem; }

.auth-mobil-logo {
  display: none;
  align-items: center; gap: var(--abstand-2);
  font-weight: 700; color: var(--farbe-text);
  margin-bottom: var(--abstand-5);
}

.auth-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-5);
  font-size: .9rem;
}

.auth-hilfe-fuss {
  margin-top: var(--abstand-5);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie);
  font-size: .87rem;
  color: var(--farbe-text-2);
}

/* --- Zwei-Faktor ---------------------------------------------------- */

.code-eingabe {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  letter-spacing: .22em;
  text-align: center;
  padding-left: .22em;   /* gleicht den Abstand hinter dem letzten Zeichen aus */
  text-transform: uppercase;
}

.totp-qr {
  display: grid; place-items: center;
  padding: var(--abstand-4);
  background: #fff;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  margin-bottom: var(--abstand-4);
}
.totp-qr svg { display: block; width: 210px; height: 210px; }

.totp-secret {
  font-family: var(--font-mono);
  font-size: .95rem;
  text-align: center;
  padding: var(--abstand-3);
  background: var(--farbe-flaeche-3);
  border-radius: var(--radius-s);
  word-break: break-all;
  user-select: all;
}

/* --- schmale Schirme ------------------------------------------------ */

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-marke { display: none; }
  .auth-mobil-logo { display: flex; }
  .auth-formular { align-items: flex-start; padding-top: var(--abstand-7); }
}

/* ==================================================================
   7 · Shell — Seitenleiste und Kopfzeile
   ================================================================== */

.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 56px 1fr;
  grid-template-areas: "banner banner" "marke kopf" "nav inhalt";
  min-height: 100vh;
  min-height: 100dvh;
}

.shell-marke {
  grid-area: marke;
  display: flex; align-items: center; gap: var(--abstand-2);
  padding: 0 var(--abstand-4);
  font-weight: 700; letter-spacing: -.02em;
  color: #fff;
  background: #12275c;
}

.shell-kopf {
  grid-area: kopf;
  display: flex; align-items: center; gap: var(--abstand-3);
  padding: 0 var(--abstand-5);
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-linie);
}

.shell-mandant {
  font-weight: 600; font-size: .92rem;
}

.shell-nav {
  grid-area: nav;
  padding: var(--abstand-4) 0;
  background: var(--farbe-flaeche);
  border-right: 1px solid var(--farbe-linie);
  overflow-y: auto;
}

.nav-gruppe {
  padding: var(--abstand-4) var(--abstand-4) var(--abstand-1);
  font-size: .755rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--farbe-text-3);
}
.nav-gruppe:first-child { padding-top: 0; }

.nav-punkt {
  display: flex; align-items: center; gap: var(--abstand-3);
  padding: 8px var(--abstand-4);
  color: var(--farbe-text-2);
  text-decoration: none;
  font-size: .95rem;
  border-left: 2px solid transparent;
}
.nav-punkt:hover { background: var(--farbe-flaeche-3); color: var(--farbe-text); }
.nav-punkt[aria-current="page"] {
  background: var(--farbe-aktion-bg);
  color: var(--farbe-aktion-dz);
  font-weight: 600;
  border-left-color: var(--farbe-aktion);
}
.nav-punkt .zaehler {
  margin-left: auto;
  min-width: 22px; padding: 2px 7px;
  border-radius: 11px;
  background: var(--farbe-dringend); color: #fff;
  font-size: .775rem; font-weight: 700; text-align: center;
}

.shell-inhalt {
  grid-area: inhalt;
  padding: var(--abstand-5);
  overflow-x: hidden;
}

.seiten-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-5);
}
.seiten-kopf .unter { color: var(--farbe-text-3); font-size: .9rem; margin: var(--abstand-1) 0 0; }

/* Kennzahlen */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-5);
}
.kennzahl {
  padding: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
}
.kennzahl .titel { font-size: .855rem; color: var(--farbe-text-3); font-weight: 600; }
.kennzahl .wert  { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin-top: var(--abstand-1); }
.kennzahl .wert.dringend { color: var(--farbe-dringend); }

/* Leerer Zustand */
.leer {
  padding: var(--abstand-7) var(--abstand-5);
  text-align: center;
  background: var(--farbe-flaeche);
  border: 1px dashed var(--farbe-linie-stark);
  border-radius: var(--radius);
}
.leer h3 { margin-bottom: var(--abstand-2); }
.leer p  { color: var(--farbe-text-2); max-width: 34rem; margin: 0 auto var(--abstand-4); }

/* Statusabzeichen — immer Punkt UND Text */
.abzeichen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: .8125rem; font-weight: 600;
  white-space: nowrap;
}
.abzeichen::before { content: "●"; font-size: .68em; line-height: 1; }
.abz-wartet   { background: var(--farbe-flaeche-3); color: var(--farbe-text-2); }
.abz-laeuft   { background: var(--farbe-aktion-bg); color: var(--farbe-aktion-dz); }
.abz-fertig   { background: var(--farbe-ok-bg);     color: var(--farbe-ok); }
.abz-mensch   { background: var(--farbe-warn-bg);   color: var(--farbe-warn); }
.abz-fehler   { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); }

@media (max-width: 1023px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 56px 1fr;
    grid-template-areas: "banner" "kopf" "inhalt";
  }
  .shell-marke, .shell-nav { display: none; }
}

/* ==================================================================
   8 · Listen, Karten, Filter — Kundenverwaltung und Einstellungen
   ================================================================== */

.filterleiste {
  display: flex; align-items: center; gap: var(--abstand-2);
  flex-wrap: wrap;
  padding: var(--abstand-3) 0 var(--abstand-4);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--farbe-linie-stark);
  border-radius: 14px;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-2);
  font-size: .9rem;
  text-decoration: none;
}
.chip:hover { background: var(--farbe-flaeche-3); color: var(--farbe-text); }
.chip b { font-weight: 700; }
.chip-aktiv {
  background: var(--farbe-aktion);
  border-color: var(--farbe-aktion);
  color: #fff;
}
.chip-aktiv:hover { background: var(--farbe-aktion-dz); color: #fff; }

.eingabe-klein { padding: 7px 11px; font-size: .9rem; width: 270px; }
.eingabe-titel { font-size: 1.05rem; font-weight: 650; padding: 6px 10px; }
.suchform { margin: 0; }

.tabellenrahmen {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  overflow-x: auto;
}

.tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabelle th {
  position: sticky; top: 0;
  text-align: left; padding: 10px 14px;
  background: var(--farbe-flaeche-3);
  border-bottom: 1px solid var(--farbe-linie);
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .045em;
  color: var(--farbe-text-2);
  white-space: nowrap;
}
.tabelle td { padding: 11px 14px; border-bottom: 1px solid var(--farbe-linie); vertical-align: top; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--farbe-flaeche-2); }
.tabelle .rechts { text-align: right; }
.zeile-dringend { background: #fff8f0; }
.zeile-dringend:hover { background: #fff2e4; }

.stark { font-weight: 600; text-decoration: none; }
.stark:hover { text-decoration: underline; }
.dezent { color: var(--farbe-text-3); font-size: .875rem; }
.dringend { color: var(--farbe-dringend); }
.fehlend { color: var(--farbe-dringend); font-size: .875rem; font-style: italic; }
.mono { font-family: var(--font-mono); font-size: .89rem; }
.kontakt-proxy { color: var(--farbe-warn); font-weight: 500; }
.brotkrume { font-size: .9rem; margin: 0 0 var(--abstand-1); }
.abschnitt { margin: var(--abstand-6) 0 var(--abstand-3); font-size: 1.05rem; }

.seiten {
  display: flex; align-items: center; justify-content: center;
  gap: var(--abstand-4);
  padding: var(--abstand-4) 0;
  font-size: .9rem; color: var(--farbe-text-2);
}

/* Karten */
.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: var(--abstand-5);
  margin-bottom: var(--abstand-4);
  box-shadow: var(--schatten-1);
}
.karte h2 { font-size: 1.09rem; margin-bottom: var(--abstand-4); }
.karte h3 { font-size: 1.02rem; margin-bottom: var(--abstand-2); }

/* Eine Überschrift direkt nach einem Formular braucht Luft. Ohne sie
   klebt der nächste Abschnitt an der Knopfleiste und sieht aus, als
   gehöre er noch dazu — „Zugänge" las sich wie eine fünfte Schaltfläche. */
.karte form + h3,
.karte .formular-aktionen + h3 { margin-top: var(--abstand-5); }
.karte-gefahr { border-color: #f0c9c9; }
.karte-gefahr h2 { color: var(--farbe-fehler); }
.karte-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--abstand-4); margin-bottom: var(--abstand-4);
}

.zweispaltig { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--abstand-5); align-items: start; }

/* Feldpaare brechen auf schmalen Schirmen um und nutzen breite voll aus. */
.feld-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 var(--abstand-5);
}

/* Karten mit Formularinhalt: alle direkten Felder in ein gemeinsames Raster.
   Überschrift, erklärender Text und Feldgruppen laufen über die volle Zeile. */
.karte-formular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 var(--abstand-5);
  align-items: start;
}
.karte-formular > h2,
.karte-formular > h3,
.karte-formular > p,
.karte-formular > fieldset,
.karte-formular > .feld-paar,
.karte-formular > .hinweis,
.karte-formular > .feld-breit,
.karte-formular > .feld-rahmen,
/* Die Knopfleiste gehört über die ganze Zeile. Ohne diese Zeile landete
   sie in einer Rasterzelle und brach mitten im Satz um: zwei Knöpfe oben,
   zwei versetzt darunter. */
.karte-formular > .formular-aktionen,
.karte-formular > .knopfreihe { grid-column: 1 / -1; }
.karte-formular > .feld-paar { display: contents; }
.feld-rahmen {
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-s);
  padding: var(--abstand-3); background: var(--farbe-flaeche-2);
}

fieldset.feld { border: 0; padding: 0; margin: 0 0 var(--abstand-4); }
fieldset.feld legend {
  padding: 0; font-size: .875rem; font-weight: 600; margin-bottom: var(--abstand-2);
}

.wahl {
  display: flex; align-items: flex-start; gap: var(--abstand-3);
  padding: 9px 11px; margin-bottom: 6px;
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-s);
  cursor: pointer; font-size: .9375rem; font-weight: 400;
}
.wahl:hover { background: var(--farbe-flaeche-2); }
.wahl input { margin-top: 3px; flex: 0 0 auto; }
.wahl:has(input:checked) { border-color: var(--farbe-aktion); background: var(--farbe-aktion-bg); }
.wahl-aus { opacity: .5; cursor: not-allowed; }
.wahl-knapp { margin: 0; padding: 6px 10px; white-space: nowrap; }

.pflicht { color: var(--farbe-fehler); font-weight: 600; font-size: .82rem; }
.knopfreihe { display: flex; gap: var(--abstand-2); align-items: center; }
.knopf-klein { padding: 6px 12px; font-size: .865rem; }

/* Rot mit demselben Aufbau — was Schaden anrichten kann, sieht aus wie ein
   Knopf und nicht wie eine Warnfläche. */
.knopf-gefahr {
  background: linear-gradient(180deg, #bb2020 0%, var(--farbe-fehler) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgb(161 22 22 / .28), 0 3px 10px rgb(161 22 22 / .20);
}
.knopf-gefahr:hover:not([disabled]) {
  background: linear-gradient(180deg, #cd2a2a 0%, #8c1616 100%);
  box-shadow: 0 3px 6px rgb(161 22 22 / .34), 0 10px 22px rgb(161 22 22 / .32);
}
.knopf-gefahr:focus-visible { outline-color: var(--farbe-fehler); }

.tagblock { margin-bottom: var(--abstand-3); }
.tagname  { font-size: .8rem; font-weight: 700; color: var(--farbe-text-3);
            text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.slotzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-3); padding: 5px 0;
  border-bottom: 1px solid var(--farbe-linie);
  font-size: .9rem;
}
.slotzeile:last-child { border-bottom: 0; }

/* Das Wochenmuster trägt vier Angaben statt zwei: Zeitspanne, Dauer, wer
   kommt, was geschieht. space-between würde sie über die ganze Breite
   auseinanderziehen — links gesammelt, die Leistungen rechts. */
.slotzeile-muster {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-3);
}
.slotzeile-muster .slot-leistungen {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.slot-angabe {
  padding: 1px var(--abstand-2);
  border-radius: 3px;
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text-2);
  font-size: .8rem;
}

.dublette {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-3); padding: 8px 0;
  border-bottom: 1px solid var(--farbe-linie);
  font-size: .9rem;
}
.dublette:last-child { border-bottom: 0; }

@media (max-width: 1200px) {
  .zweispaltig { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .feld-paar { grid-template-columns: 1fr; }
  .eingabe-klein { width: 100%; }
}

/* ==================================================================
   9 · Betreiber-Ebene
   ================================================================== */

.zeile-gesperrt { opacity: .62; }
.zeile-gesperrt:hover { opacity: 1; }

/* Formulare nutzen die volle Breite. Damit ein Eingabefeld auf einem breiten
   Schirm nicht 1600 Pixel lang wird, ordnen sich die Felder in einem Raster
   an — mehr Felder nebeneinander statt eines überdehnten Feldes. */
.schmal { max-width: none; }

.karte-zugang {
  border-color: var(--farbe-ok);
  background: var(--farbe-ok-bg);
}
.karte-zugang h2 { color: var(--farbe-ok); }

.zugangsdaten {
  display: grid; gap: var(--abstand-3);
  padding: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-s);
}
.zugangsdaten > div { display: flex; align-items: baseline; gap: var(--abstand-4); }
.zugangsdaten .label {
  flex: 0 0 100px;
  font-size: .82rem; font-weight: 700; color: var(--farbe-text-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.gross { font-size: 1.06rem; font-weight: 600; }
.auswaehlbar { user-select: all; }

/* Übernahme-Banner — eigene Zeile über Marke und Kopfzeile, damit die
   Brotkrume sichtbar bleibt. Ohne Übernahme ist die Zeile 0 hoch. */
.uebernahme {
  grid-area: banner;
  display: flex; align-items: center; gap: var(--abstand-3);
  padding: 0 var(--abstand-5);
  background: var(--farbe-warn-bg);
  border-bottom: 1px solid #f0c98a;
  color: var(--farbe-warn);
  font-size: .92rem;
  min-height: 40px;
}
.uebernahme strong { color: #6b4500; }
.uebernahme form { margin: 0; }

/* ---------------------------------------- Wiederherstellungscodes */

.codeliste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-2);
  padding: var(--abstand-4);
  background: var(--farbe-flaeche-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-s);
}
.codeliste span {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .04em;
  user-select: all;
  padding: 3px 0;
}

@media print {
  .auth-marke, .hinweis, .knopfreihe, form { display: none !important; }
  .codeliste { border: 1px solid #000; }
}

.apphilfe { margin-bottom: var(--abstand-4); }
.apphilfe summary { cursor: pointer; font-weight: 600; font-size: .9375rem; padding: 4px 0; }
.apphilfe ul { margin: var(--abstand-2) 0 0; padding-left: var(--abstand-5); }
.apphilfe li { margin-bottom: 3px; }

.loeschumfang {
  margin: 0 0 var(--abstand-4);
  padding-left: var(--abstand-5);
  font-size: .9375rem;
  color: var(--farbe-text-2);
}
.loeschumfang li { margin-bottom: 3px; }
.knopf[disabled] { cursor: not-allowed; }

/* ==================================================================
   10 · Markenblock, Brotkrume, Navigationssymbole, Registerkarten
   ================================================================== */

/* --- Markenblock ------------------------------------------------- */

.shell-marke {
  display: flex; align-items: center; gap: var(--abstand-3);
  padding: 0 var(--abstand-4);
  background: #101d3f;
  color: #fff;
  overflow: hidden;
}
.marke-zeichen {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 9px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
}
.marke-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marke-name {
  font-size: 1.06rem; font-weight: 700; letter-spacing: -.015em;
  white-space: nowrap;
}
.marke-version { font-weight: 500; font-size: .82rem; color: rgba(255,255,255,.72); }
.marke-zusatz {
  font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255,255,255,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Brotkrume --------------------------------------------------- */

.brotkrume ol {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--abstand-2);
  list-style: none; margin: 0; padding: 0;
  font-size: .9rem;
}
.brotkrume li { display: flex; align-items: center; gap: var(--abstand-2); }
.brotkrume li + li::before {
  content: "›";
  color: var(--farbe-text-3);
  font-size: 1.05rem; line-height: 1;
}
.brotkrume a { color: var(--farbe-text-2); text-decoration: none; }
.brotkrume a:hover { color: var(--farbe-aktion); text-decoration: underline; }
.brotkrume [aria-current="page"] { color: var(--farbe-text); font-weight: 600; }

.kopf-benutzer {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; color: var(--farbe-text-2); text-decoration: none;
  padding: 5px 9px; border-radius: var(--radius-s);
}
.kopf-benutzer:hover { background: var(--farbe-flaeche-3); color: var(--farbe-text); }

/* Laufende Frist bis zum Termin. Ruhig gehalten — sie steht neben der
   Aussage, nicht an ihrer Stelle. */
/* Eigene Zeile, feste Stellen: Zwei Fristen untereinander sollen sich
   vergleichen lassen, ohne dass man sie liest. Deshalb Ziffern gleicher
   Breite (tabular-nums) und immer dieselbe Zahl von Stellen. */
.frist {
  display: block;
  margin-top: 2px;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  color: var(--farbe-text-2);
  white-space: nowrap;
  letter-spacing: .01em;
}
/* In einer Flex-Zeile bekommt die Frist eine eigene Reihe — sonst stünde
   sie neben den Terminen und die Stellen lägen wieder woanders. */
.verschiebung-zeit .frist { flex-basis: 100%; }

.frist-zahl    { font-weight: 700; color: var(--farbe-text); }
.frist-zahl.ist-null { color: var(--farbe-text-3); font-weight: 400; }
/* Unsichtbar, aber platzhaltend: „00 T" verschwindet, die Stellen bleiben,
   wo sie sind. display:none würde die Ausrichtung zerstören. */
.frist .ist-leer { visibility: hidden; }
.frist-einheit { color: var(--farbe-text-3); font-size: .82em; }
.frist-trenner { color: var(--farbe-text-3); }
.frist-zeichen { color: var(--farbe-text-3); margin-right: 2px; }

/* --- Kopf der Warteschlange: der Anrufstart --------------------------
   Drei Angaben nebeneinander, jede in eigener Zone: der Zeitpunkt, die
   Frist, der Anteil der Wartezeit. Sie sagen dasselbe in drei Formen —
   als Datum zum Lesen, als Ziffern zum Vergleichen, als Balken zum
   Erfassen ohne Lesen. */
.anrufstart {
  display: flex;
  align-items: center;
  gap: var(--abstand-5);
  flex-wrap: wrap;
  padding: var(--abstand-4) var(--abstand-5);
  margin-bottom: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: 14px;
}

.anrufstart-symbol {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--farbe-aktion-bg);
  color: var(--farbe-aktion);
}
.anrufstart-symbol svg { width: 30px; height: 30px; }

.anrufstart-text { flex: 2 1 260px; }

/* Die kleine Marke benennt, worum es geht — die große Zeile darunter ist
   die Antwort. Ohne sie stünde ein Datum ohne Frage im Raum. */
.anrufstart-marke {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--farbe-aktion);
}
.anrufstart-zeit {
  margin: 2px 0 4px;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--farbe-text);
}
.anrufstart-hinweis { margin: 0; font-size: .92rem; color: var(--farbe-text-2); }

/* Ziffernfeld: derselbe Countdown wie in den Zeilen, nur groß. Er ist die
   Angabe, die man im Vorbeigehen liest. */
.anrufstart-uhr {
  flex: none;
  margin-left: auto;
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--farbe-flaeche-3);
  border-radius: 12px;
}
.anrufstart-uhr .frist { margin-top: 2px; font-size: 1.9rem; letter-spacing: 0; }
/* In den Zeilen hält ein leerer Tagesblock Platz, damit die Ziffern
   untereinander fluchten. Hier steht nur eine einzige Frist — es gibt
   nichts auszurichten, also verschwindet der Block ganz statt eine
   Lücke vor die Stunden zu setzen. */
.anrufstart-uhr .frist .ist-leer { display: none; }
.anrufstart-uhr .frist-zahl { color: var(--farbe-aktion); }
.anrufstart-uhr .frist-einheit { font-size: .55em; color: var(--farbe-aktion); }
.anrufstart-uhr .frist-trenner { color: var(--farbe-aktion); }

.anrufstart-marke-2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--farbe-text-3);
}
.anrufstart-marke-2 svg { width: 15px; height: 15px; }

/* Offen: es wird gerade gewählt — das ist ein Zustand, kein Warten. */
.anrufstart-offen .anrufstart-symbol { background: var(--farbe-ok-bg); color: var(--farbe-ok); }
.anrufstart-offen .anrufstart-marke { color: var(--farbe-ok); }
.anrufstart-offen .anrufstart-uhr .frist-zahl,
.anrufstart-offen .anrufstart-uhr .frist-einheit,
.anrufstart-offen .anrufstart-uhr .frist-trenner { color: var(--farbe-ok); }

/* Ohne Fenster wird nie gewählt. Das ist ein Missstand und sieht auch so aus. */
.anrufstart-fehlt { border-color: var(--farbe-fehler); background: var(--farbe-fehler-bg); }
.anrufstart-fehlt .anrufstart-symbol { background: #fff; color: var(--farbe-fehler); }
.anrufstart-fehlt .anrufstart-marke { color: var(--farbe-fehler); }

/* --- Zeitslots der Warteschlange -------------------------------------
   Eine Tabelle je Startzeitpunkt. Der Kopf trägt die Uhrzeit und die
   Frist bis dahin; er klebt oben, damit beim Blättern durch eine lange
   Schlange nie unklar ist, zu welchem Zeitpunkt die Zeilen gehören. */
.zeitslot { margin-bottom: 22px; }

.zeitslot-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 2px;
  background: var(--farbe-flaeche);
  border-bottom: 2px solid var(--farbe-linie);
}
.zeitslot-kopf h2 { margin: 0; font-size: 1.05rem; }
/* Im Kopf steht die Frist neben der Uhrzeit, nicht darunter. */
.zeitslot-kopf .frist { display: inline-block; margin-top: 0; }
.zeitslot-zahl { color: var(--farbe-text-3); font-size: .9rem; white-space: nowrap; }

/* Der laufende Slot ist der einzige, aus dem gerade wirklich gewählt wird. */
.zeitslot-offen .zeitslot-kopf { border-bottom-color: var(--farbe-ok); }
.zeitslot-offen .zeitslot-kopf h2 { color: var(--farbe-ok); }

/* Zeilen aus dem Wochenmustervergleich: ein Rückschluss, kein Abgleich.
   Ein schmaler Streifen links reicht — die Zeile soll auffallen, ohne wie
   ein Fehler auszusehen. */

/* Ein Termin, der vorbei ist. Durchgestrichen und beschriftet: Die bloße
   Dämpfung ließ ihn wie eine Nebensächlichkeit aussehen, nicht wie einen
   Zeitpunkt, der nicht mehr kommt. */
td.termin-vorbei .mono { text-decoration: line-through; color: var(--farbe-text-3); }
td.termin-vorbei::after {
  content: 'vorbei';
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .72rem;
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text-3);
  vertical-align: middle;
}
/* Vorbei schlägt „nächster": Ein vergangener Termin wird nie hervorgehoben. */
td.termin-vorbei.ist-naechster { background: none; }
td.termin-vorbei.ist-naechster .mono { font-weight: 400; }

/* Der nächste der beiden Termine einer Zeile. Nicht bunt, sondern
   kräftiger: Die Farbe ist für Dringlichkeit reserviert. */
td.ist-naechster { background: var(--farbe-aktion-bg); }
td.ist-naechster .mono { font-weight: 700; color: var(--farbe-text); }
.frist.ist-naechster .frist-zahl { color: var(--farbe-aktion-dz); }

.frist.ist-knapp .frist-zahl { color: var(--farbe-dringend); }
.frist.ist-knapp .frist-einheit,
.frist.ist-knapp .frist-trenner { color: var(--farbe-dringend); }
.frist.ist-vorbei { opacity: .6; }
.frist.ist-vorbei .frist-zahl { font-weight: 400; }

.anlassZeile { padding: 2px 0; white-space: nowrap; }
.anlassZeile + .anlassZeile { border-top: 1px dashed var(--farbe-linie); margin-top: 4px; padding-top: 6px; }

/* --- Suche, die während des Tippens nachlädt ----------------------- */

.suchform { display: flex; align-items: center; gap: var(--abstand-2); }

/* Ein ruhiger Punkt statt eines kreisenden Rades: Er zeigt, dass etwas
   läuft, ohne den Blick vom Ergebnis wegzuziehen. */
.suchform-lader {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--farbe-aktion);
  animation: suchpuls 1s ease-in-out infinite;
}
@keyframes suchpuls { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Während des Ladens bleibt das alte Ergebnis stehen, nur gedämpft. Es zu
   leeren sähe für den Augenblick aus wie „nichts gefunden". */
[data-ergebnis][aria-busy="true"] { opacity: .55; transition: opacity .12s; }

@media (prefers-reduced-motion: reduce) {
  .suchform-lader { animation: none; opacity: .8; }
  [data-ergebnis][aria-busy="true"] { transition: none; }
}

.feiertagsliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px var(--abstand-4);
  font-size: .9rem;
}
.feiertagsliste .mono { color: var(--farbe-text-3); margin-right: 6px; }

/* Ein Knopf, der wie ein Verweis aussieht — für Schnellwahlen im Hilfetext. */
.knopf-verweis {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--farbe-aktion);
  text-decoration: underline; cursor: pointer;
}
.knopf-verweis:hover { color: var(--farbe-aktion-dz); }

/* Zeilen, die als Ganzes eine Aktion auslösen. */
.tabelle tr.ist-klickbar { cursor: pointer; }
/* Die hervorgehobene Zeile — der gerade betrachtete Tag im
   Leistungsnachweis. */
.tabelle tr.zeile-gewaehlt td:first-child { box-shadow: inset 3px 0 0 var(--farbe-aktion); }
.tabelle tr.ist-klickbar:hover { background: var(--farbe-flaeche-3); }
/* Verweise in der Zeile behalten ihren eigenen Zeiger — sie führen woandershin. */
.tabelle tr.ist-klickbar a { cursor: pointer; }

/* --- Fallfenster in der Übersicht ---------------------------------- */

.fallfenster {
  width: min(1080px, calc(100vw - 2 * var(--abstand-4)));
  max-height: 85vh;
  padding: var(--abstand-5);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}
.fallfenster::backdrop { background: rgb(0 0 0 / .35); }
.fallfenster h2 { margin: 0 0 4px; padding-right: 2.5rem; }
.fallfenster h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--farbe-text-3); margin: var(--abstand-5) 0 var(--abstand-2);
}
/* Links, worum es geht — rechts, wer angerufen wird und was über ihn
   notiert ist. Auf schmalen Schirmen untereinander. */
.fallfenster-spalten {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--abstand-5); align-items: start;
}
.fallfenster-links, .fallfenster-rechts { min-width: 0; }
.fallfenster-rechts {
  padding-left: var(--abstand-5);
  border-left: 1px solid var(--farbe-linie);
}
@media (max-width: 780px) {
  .fallfenster-spalten { grid-template-columns: 1fr; }
  .fallfenster-rechts { padding-left: 0; border-left: 0; border-top: 1px solid var(--farbe-linie); padding-top: var(--abstand-4); }
}

/* Was der Mandant selbst notiert hat, hebt sich von dem ab, was der Import
   beigesteuert hat — es wiegt schwerer und steht in derselben Spalte. */
.notiz-eigen  { border-left: 3px solid var(--farbe-aktion); padding-left: var(--abstand-3); }
.notiz-import { border-left: 3px solid var(--farbe-linie); padding-left: var(--abstand-3); font-size: .85rem; }

/* Mehrere Terminpaare untereinander — jedes gehört zu einer Änderung. */
/* Ein Feld, das noch gefüllt werden muss. */
.eingabe.feld-fehlt { border-color: var(--farbe-fehler); background: var(--farbe-fehler-bg); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }

.terminpaar + .terminpaar {
  border-top: 1px dashed var(--farbe-linie);
  padding-top: var(--abstand-3);
}

.fallfenster-schliessen { position: absolute; top: var(--abstand-3); right: var(--abstand-3); margin: 0; }
.fallfenster-form { margin-top: var(--abstand-4); }
.fallfenster-verwerfen { margin-top: var(--abstand-4); }
.fallfenster-verwerfen summary { cursor: pointer; }

.mitschrift {
  white-space: pre-wrap; font-size: .82rem;
  background: var(--farbe-flaeche-3); padding: var(--abstand-3);
  border-radius: var(--radius-s); max-height: 240px; overflow-y: auto;
}

/* --- Arbeitsplatz (Fokusmodus, ohne Navigation) -------------------- */

body.fokus { background: var(--farbe-flaeche-3); }

.fokus-rahmen { max-width: 1200px; margin: 0 auto; padding: var(--abstand-4); }

.fokus-kopf {
  display: flex; align-items: center; gap: var(--abstand-4);
  padding: var(--abstand-3) var(--abstand-4);
  margin-bottom: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}
.fokus-zurueck { text-decoration: none; font-size: .9rem; }
.fokus-titel { font-weight: 600; }

.reservierung {
  font-size: .85rem; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 999px;
  background: var(--farbe-flaeche-3); color: var(--farbe-text-2);
}
.reservierung.ist-knapp     { background: var(--farbe-warn-bg); color: var(--farbe-warn); font-weight: 600; }
.reservierung.ist-abgelaufen{ background: var(--farbe-fehler-bg); color: var(--farbe-fehler); }

/* Der Grund bleibt oben stehen, über beiden Spalten. */
.fokus-grund { margin-bottom: var(--abstand-4); }

.fokus-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-4); align-items: start; }
@media (max-width: 900px) { .fokus-spalten { grid-template-columns: 1fr; } }

.fokus-lesen, .fokus-erfassen {
  min-width: 0;
  padding: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}
.fokus-lesen h2, .fokus-erfassen h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--farbe-text-3); margin: var(--abstand-5) 0 var(--abstand-2);
}
.fokus-lesen h2:first-child, .fokus-erfassen h2:first-child { margin-top: 0; }

.fokus-name   { font-size: 1.25rem; font-weight: 600; margin: 0; }
.fokus-nummer { font-size: 1.1rem; }

.fokus-aktionen { margin-top: var(--abstand-4); }
.fokus-aktionen .knopf { width: 100%; }

.fokus-nebenaktionen {
  margin-top: var(--abstand-4); padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie);
  display: flex; flex-direction: column; gap: var(--abstand-3);
}

/* --- Kundenseite: Kopfzeile und Bahn ------------------------------ */

.kundenkopf {
  display: flex; flex-wrap: wrap; gap: var(--abstand-4);
  align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--abstand-4);
}
.kundenkopf-name { min-width: 0; }
.kundenkopf h1 { margin: 0; }

/* Der Stand rechts steht für sich — deshalb Rahmen statt bloßer Ausrichtung. */
.einsatzstand {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  min-width: 200px;
  background: var(--farbe-flaeche-2);
  border: 1px solid var(--farbe-linie);
  border-left: 3px solid var(--farbe-linie);
  border-radius: var(--radius);
}
.einsatzstand.lz-faellig    { border-left-color: var(--farbe-fehler); }
.einsatzstand.lz-bald       { border-left-color: var(--farbe-warn); }
.einsatzstand.lz-aktiv      { border-left-color: var(--farbe-ok); }
.einsatzstand.lz-geschuetzt { border-left-color: var(--farbe-warn); }
.einsatzstand-titel  { font-size: .78rem; color: var(--farbe-text-3); text-transform: uppercase; letter-spacing: .04em; }
.einsatzstand-datum  { font-size: 1.25rem; }
.einsatzstand .abzeichen { align-self: flex-start; margin-top: 4px; }

/* --- Kopfkarte der Kundenseite --------------------------------------
   Wer ist das, ist er anrufbar, wann war er zuletzt dran, was kann ich
   tun. Vier Fragen in einer Zeile — vorher standen Name und Einsatzstand
   nebeneinander, aber ohne Bild und ohne Handlungen. */
.kundenkarte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-5);
  padding: var(--abstand-4) var(--abstand-5);
  margin-bottom: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: 14px;
  box-shadow: var(--schatten-1);
}
.kundenkarte-person { display: flex; align-items: center; gap: var(--abstand-4); flex: 1 1 280px; min-width: 0; }
.kundenkarte-name { min-width: 0; }
.kundenkarte-name h1 { margin: 0; font-size: 1.6rem; }
.kundenkarte-name .unter { margin: 4px 0 0; }

/* Initialen statt Platzhalterbild: Ein Kunde hat kein Foto, aber einen
   Namen — und zwei Buchstaben unterscheiden zwei Karteikarten schneller
   als eine Zeile Text. */
.kundenbild {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--farbe-aktion-bg);
  color: var(--farbe-aktion-dz);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Der Einsatzstand steht in der Kopfkarte ohne eigenen Rahmen — zwei
   Kästen ineinander sind einer zu viel. Die Farbe bleibt. */
.kundenkarte .einsatzstand {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--farbe-linie);
  border-radius: 0;
  padding: 2px 0 2px var(--abstand-4);
  min-width: 190px;
}
.kundenkarte .einsatzstand-datum { font-size: 1.5rem; font-weight: 700; }
.kundenkarte .einsatzstand .abzeichen { margin: 0 0 4px; }

.kundenkarte-aktionen { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; }
.kundenkarte-schalter { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* --- Ansehen und Bearbeiten ----------------------------------------
   Zwei Zustände derselben Seite, geschaltet über ein verborgenes
   Kontrollkästchen ganz oben. Beide Fassungen stehen im Dokument; ohne
   JavaScript funktioniert der Wechsel unverändert. */
.nur-bearbeiten { display: none; }
#kunde-bearbeiten:checked ~ * .nur-ansicht,
#kunde-bearbeiten:checked ~ * .nur-ansicht.datenraster { display: none; }
#kunde-bearbeiten:checked ~ * .nur-bearbeiten { display: block; }
#kunde-bearbeiten:checked ~ * .nur-bearbeiten.karte-formular { display: grid; }
/* Im Bearbeiten-Zustand heißt der Knopf „Fertig" und ist nicht mehr die
   offene Handlung, sondern der Weg zurück: also der zweite Weg. */
#kunde-bearbeiten:checked ~ * .kundenkarte-schalter {
  background: var(--farbe-flaeche);
  border-color: #b6cbf4;
  color: var(--farbe-aktion-dz);
  box-shadow: 0 1px 2px rgb(16 24 40 / .07);
}
label.kundenkarte-schalter .nur-bearbeiten { display: none; }
#kunde-bearbeiten:checked ~ * label.kundenkarte-schalter .nur-ansicht { display: none; }
#kunde-bearbeiten:checked ~ * label.kundenkarte-schalter .nur-bearbeiten { display: inline; }

/* --- Werte ohne Kästen ---------------------------------------------
   Im Ansehen-Zustand ist ein Eingabefeld eine Behauptung: Es sieht aus,
   als könne man tippen. Also stehen dort nur Beschriftung und Wert. */
.datenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--abstand-4) var(--abstand-5);
  margin: 0;
}
.datenraster > div { min-width: 0; }
.datenraster-breit { grid-column: 1 / -1; }
.datenraster dt {
  font-size: .78rem;
  color: var(--farbe-text-3);
  margin-bottom: 3px;
}
.datenraster dd { margin: 0; color: var(--farbe-text); }
/* Gruppen statt eines Blocks aus sechs Werten: wer der Kunde ist, wie man
   ihn erreicht, was intern vermerkt ist. Die Linie trennt, was nicht
   zusammengehört. */
.datenraster-gruppe {
  margin-top: var(--abstand-4);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie);
}
.mit-sinnbild { display: flex; align-items: center; gap: 7px; }
.mit-sinnbild .sinnbild { width: 17px; height: 17px; color: var(--farbe-text-3); flex: none; }

.abstand-oben { margin-top: var(--abstand-4); }

/* Im Ansehen-Zustand ist der Anrufweg eine Feststellung, kein Bedienelement. */
.kontaktweg { margin: 0; }

/* Weitere Kontaktpersonen stehen mit, gehören aber nicht zur Antwort auf
   die Frage „Wer wird angerufen?". Gedämpft, nicht versteckt: Wer sie
   sucht, findet sie; wer die Karte überfliegt, liest die gewählte. */
.kontakt-ruhend { opacity: .68; }

/* Die gewählte Person ist die Antwort — und die soll man sehen, ohne die
   Beschriftungen zu lesen. Grün wie „anrufbar", mit Streifen links, damit
   sie sich auch ohne Farbe unterscheidet. */
.kontaktblatt {
  padding: var(--abstand-3) var(--abstand-4);
  border-radius: var(--radius-s);
}
.kontaktblatt-gewaehlt {
  background: var(--farbe-ok-bg);
  border-top-color: transparent;
  box-shadow: inset 3px 0 0 var(--farbe-ok);
}
.kontaktblatt-gewaehlt dt { color: var(--farbe-ok); }

/* In der Kundenliste stehen alle Personen untereinander; farbig ist die,
   die angerufen wird. Ohne die Hervorhebung müsste man in einer Liste von
   fünfzig Kunden jede Zeile lesen, um zu sehen, wer dran ist. */
.kontaktliste { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.kontaktmarke {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .86rem;
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kontaktmarke-gewaehlt {
  background: var(--farbe-ok-bg);
  color: var(--farbe-ok);
  font-weight: 600;
}
.kontaktmarke-gewaehlt .dezent { color: inherit; opacity: .8; }
.kontaktmarke-direkt { background: transparent; padding-left: 0; }

/* Weitere Kontaktpersonen im Fallfenster: nicht die Antwort auf „Wer wird
   angerufen?", aber die Rückfallebene, wenn dort niemand abnimmt. */
.weiterer-kontakt {
  padding: 8px 0;
  border-bottom: 1px solid var(--farbe-linie);
  font-size: .94rem;
}
.weiterer-kontakt:last-child { border-bottom: 0; }
.weiterer-kontakt .abzeichen { margin-left: 6px; }

/* Auswählen und Bearbeiten sind zwei Handlungen: Die eine entscheidet,
   wer angerufen wird, die andere ändert eine Angabe über eine Person.
   Deshalb der Stift am Ende der Zeile — und neben dem Label, nicht darin:
   Ein Klick ins Label wählt den Radioknopf aus. */
.wahlzeile { display: flex; align-items: stretch; gap: var(--abstand-2); }
.wahlzeile .wahl { flex: 1; min-width: 0; }
.wahlzeile-stift {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  margin-bottom: var(--abstand-2);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-s);
  color: var(--farbe-text-3);
}
.wahlzeile-stift:hover { background: var(--farbe-flaeche-3); color: var(--farbe-aktion); }
.wahlzeile-stift .sinnbild { width: 17px; height: 17px; }

.kontaktform-aktionen { display: flex; gap: var(--abstand-2); margin-top: var(--abstand-4); }

/* Rufnummern — eine geordnete Liste, und die Ordnung ist die Aussage.

   Die Nummer, die gewählt wird, steht oben und ist die einzige mit einem
   Rahmen. Die übrigen stehen ruhig darunter: Sie sind Vorrat, keine
   Alternative, über die gerade zu entscheiden wäre. Ohne diesen
   Unterschied liest sich die Liste wie vier gleichwertige Nummern — und
   genau das ist sie nicht.

   Die Ziffern der Aufzählung bleiben sichtbar: Sie sind der Platz, um den
   es beim Verschieben geht. */
.nummernliste {
  list-style: decimal;
  margin: 0 0 var(--abstand-4);
  padding-left: 1.6rem;
  display: grid;
  gap: var(--abstand-2);
}
.nummernliste li::marker { color: var(--farbe-text-3); font-size: .85rem; }
.nummernzeile {
  display: flex; align-items: flex-start; gap: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
}
.nummernzeile-erste { border-color: var(--farbe-linie); background: var(--farbe-flaeche-2); }
.nummernzeile-wert { flex: 1; min-width: 0; }
.nummernzeile-wert .mono { font-size: 1.02rem; }
.nummernzeile-wert .abzeichen { margin-left: 8px; }
.nummernzeile-hinweis { margin-top: 2px; font-size: .92rem; }
.nummernzeile .dezent { font-size: .8125rem; }
.nummernzeile-knoepfe { flex: none; display: flex; align-items: center; gap: 4px; }
.nummernzeile-knoepfe form { margin: 0; }
.nummernzeile-knoepfe .wahlzeile-stift { width: 32px; height: 32px; margin-bottom: 0; }

/* Die Zugänge eines Handlers: mehrere Token untereinander, jedes mit
   seinem Präfix. Widerrufene bleiben stehen — wer wissen will, welcher
   Zugang wann galt, findet es sonst nirgends. */
.zugaenge { min-width: 15rem; }

/* Die Handlerkarte im Betreiberbereich steht in einer Spalte, nicht über
   die ganze Seite: Drei Felder à 300 Pixel passen dort nicht nebeneinander
   und schoben die Karte über den Rand hinaus. */
.karte-handler { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.karte-handler > .formular-aktionen { margin-top: var(--abstand-3); }
.zugang {
  display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap;
  padding: 3px 0;
  font-size: .9rem;
}
.zugang + .zugang { border-top: 1px solid var(--farbe-linie); }
.zugang-weg { opacity: .55; }
.zugang form { display: inline; }

/* Mehrere Knöpfe im Seitenkopf: Der seltenere steht links vom
   Hauptknopf, damit der Blick zuerst auf die Arbeit fällt. */
.seiten-kopf-aktionen { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; }

/* Ein Fenster für eine Person braucht keine 1080 Pixel. */
.fallfenster-schmal { width: min(620px, calc(100vw - 2 * var(--abstand-4))); }
.fallfenster-schmal .karte-formular { margin-top: var(--abstand-4); }

/* Ohne JavaScript ist der Stift ein Anker. Ein geschlossenes <dialog> ist
   display:none — der Sprung ginge ins Leere. Mit :target klappt das
   Formular stattdessen an Ort und Stelle auf, ohne Verdunkelung. Mit
   JavaScript kommt es nie so weit: Das Verhalten hält den Sprung an, die
   Adresse ändert sich nicht, und :target trifft nichts. */
.fallfenster-schmal:target {
  display: block;
  position: relative;
  margin: var(--abstand-4) 0;
  max-height: none;
}

/* Im Bearbeiten-Zustand hängen die Felder der Kontaktperson an der
   Auswahl: Wer sie anwählt, will sofort eintragen, wer das ist. Mit
   JavaScript nimmt das Verhalten `kontakt-modus` das hidden-Attribut weg;
   ohne JavaScript greift diese Regel — und muss dafür das !important von
   [hidden] überbieten, sonst bliebe der Block verborgen. */
.karte:has(input[name="contact_mode"][value="proxy"]:checked) .kontaktblock #kontakt-felder[hidden] {
  display: block !important;
}

.notizblock {
  padding: 10px 12px;
  background: var(--farbe-flaeche-3);
  border-radius: var(--radius-s);
  color: var(--farbe-text-2);
  font-size: .94rem;
}

/* Sinnbild in der Kartenüberschrift: benennt die Kachel im Vorbeigehen. */
.karte h2 .sinnbild { width: 19px; height: 19px; color: var(--farbe-aktion); vertical-align: -3px; margin-right: 7px; }
.karte-gefahr h2 .sinnbild { color: var(--farbe-fehler); }

/* --- Kundenseite: zwei Spalten oben, volle Breite unten -------------- */
.kundenraster {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--abstand-4);
  align-items: start;
  margin-bottom: var(--abstand-4);
}
.kundenraster > * { min-width: 0; }
.kundenraster .karte { margin-bottom: 0; }
.kundenspalte { display: flex; flex-direction: column; gap: var(--abstand-4); }

@media (max-width: 900px) {
  .kundenraster { grid-template-columns: 1fr; }
}

/* Eine Kachel je Zeile, jede über die volle Breite des Bereichs. */
.kundenbahn { display: flex; flex-direction: column; gap: var(--abstand-5); }
.kundenbahn > * { min-width: 0; }
.kundenbahn form > .karte { margin-bottom: var(--abstand-5); }
.kundenbahn form > .karte:last-of-type { margin-bottom: 0; }

/* --- Reiter innerhalb der Terminkachel ---------------------------- */

.terminreiter > input { position: absolute; }

.terminreiter-leiste {
  display: flex; flex-wrap: wrap; gap: var(--abstand-1);
  padding-bottom: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}
.terminreiter-leiste label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  font-size: .9rem; font-weight: 600;
  color: var(--farbe-text-2); cursor: pointer;
  border: 1px solid transparent;
}
.terminreiter-leiste label:hover { background: var(--farbe-flaeche-3); color: var(--farbe-text); }

.reiterzahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 0 6px; height: 20px;
  border-radius: 999px; font-size: .75rem;
  background: var(--farbe-flaeche-3); color: var(--farbe-text-2);
}

/* Tafeln sind verborgen, bis ihr Knopf gewählt ist. */
.terminreiter-tafel { display: none; }

/* Der gewählte Reiter ist hell hinterlegt, nicht vollflächig blau: Er
   steht über einer weißen Karte, und ein blauer Balken darüber zieht mehr
   Aufmerksamkeit auf sich als die Liste darunter. */
#tr-verschoben:checked  ~ .terminreiter-leiste label[for="tr-verschoben"],
#tr-kommende:checked    ~ .terminreiter-leiste label[for="tr-kommende"],
#tr-vergangene:checked  ~ .terminreiter-leiste label[for="tr-vergangene"] {
  background: var(--farbe-aktion-bg);
  border-color: #bcd0f5;
  color: var(--farbe-aktion-dz);
}
#tr-verschoben:checked ~ .terminreiter-leiste label[for="tr-verschoben"] .reiterzahl,
#tr-kommende:checked   ~ .terminreiter-leiste label[for="tr-kommende"] .reiterzahl,
#tr-vergangene:checked ~ .terminreiter-leiste label[for="tr-vergangene"] .reiterzahl {
  background: #fff; color: var(--farbe-aktion-dz);
}

#tr-verschoben:checked ~ .terminreiter-tafel[data-fuer="verschoben"],
#tr-kommende:checked   ~ .terminreiter-tafel[data-fuer="kommende"],
#tr-vergangene:checked ~ .terminreiter-tafel[data-fuer="vergangene"] { display: block; }

/* Tastaturbedienung sichtbar machen — die Knöpfe selbst sind verborgen. */
.terminreiter > input:focus-visible ~ .terminreiter-leiste label[for="tr-verschoben"],
.terminreiter > input:focus-visible ~ .terminreiter-leiste label[for="tr-kommende"],
.terminreiter > input:focus-visible ~ .terminreiter-leiste label[for="tr-vergangene"] {
  outline: 2px solid var(--farbe-aktion); outline-offset: 2px;
}

.verschiebung {
  padding: 9px 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.verschiebung:last-child { border-bottom: 0; }
.verschiebung-zeit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.verschiebung-pfeil { color: var(--farbe-text-3); }

/* Termine stehen untereinander, in einer Liste. Ein Spaltensatz sähe auf
   breiten Schirmen aufgeräumter aus, zwingt aber zum Springen zwischen den
   Spalten, um die Tage der Reihe nach zu lesen. */
.terminreiter-tafel .terminblock { display: block; }

/* --- Letzter Einsatz / Aufbewahrung ------------------------------- */

.karte-lebenslauf { border-left: 3px solid var(--farbe-linie); }
.karte-lebenslauf.lz-faellig { border-left-color: var(--farbe-fehler); }
.karte-lebenslauf.lz-bald    { border-left-color: var(--farbe-warn); }
.karte-lebenslauf.lz-aktiv      { border-left-color: var(--farbe-ok); }
.karte-lebenslauf.lz-geschuetzt { border-left-color: var(--farbe-warn); }

.lz-zelle { border-left: 3px solid transparent; padding-left: 9px; }
.lz-zelle.lz-faellig    { border-left-color: var(--farbe-fehler); }
.lz-zelle.lz-bald       { border-left-color: var(--farbe-warn); }
.lz-zelle.lz-geschuetzt { border-left-color: var(--farbe-warn); }

.lz-datum   { font-size: 1.35rem; margin: 0; }
.lz-abstand { margin: 2px 0 var(--abstand-3); color: var(--farbe-text-2); font-size: .88rem; }
.karte-lebenslauf .abzeichen + p { margin-top: var(--abstand-2); }

/* --- Kundenauswahl im Seitenkopf ---------------------------------- */

.kundenwahl { position: relative; }

.kundenwahl-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .9rem; color: var(--farbe-text-2);
  text-decoration: none; cursor: pointer;
  padding: 5px 12px;
  background: var(--farbe-flaeche-2);
  border: 1px solid var(--farbe-linie);
  border-radius: 999px;
}
.kundenwahl-knopf:hover { background: var(--farbe-flaeche-3); color: var(--farbe-text); }
.kundenwahl.ist-offen .kundenwahl-knopf {
  background: var(--farbe-flaeche-3); color: var(--farbe-text);
  border-color: var(--farbe-aktion);
}
.kundenwahl-pfeil { font-size: .8rem; line-height: 1; color: var(--farbe-text-3); }

.kundenwahl-tafel {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: min(360px, calc(100vw - 2 * var(--abstand-2)));
  padding: var(--abstand-2);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / .12);
}
.kundenwahl.ist-offen .kundenwahl-tafel { display: block; }

.kundenwahl-tafel .eingabe { width: 100%; }
.kundenwahl-status { margin: 8px 0 4px; font-size: .78rem; }

.kundenwahl-liste { max-height: 320px; overflow-y: auto; }

.kundenwahl-treffer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 8px;
  padding: 7px 9px;
  border-radius: var(--radius-s);
  text-decoration: none; color: var(--farbe-text);
}
.kundenwahl-treffer.ist-markiert { background: var(--farbe-flaeche-3); }
.kundenwahl-name  { font-size: .9rem; }
.kundenwahl-unter {
  grid-column: 1; font-size: .78rem; color: var(--farbe-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kundenwahl-abzeichen { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.kundenwahl-alle {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--farbe-linie);
  font-size: .82rem; text-align: center;
}

/* --- Symbole in der Navigation ----------------------------------- */

.sym-icon { flex: 0 0 auto; }
.nav-punkt .sym-icon { color: var(--farbe-text-3); }
.nav-punkt:hover .sym-icon { color: var(--farbe-text-2); }
.nav-punkt[aria-current="page"] .sym-icon { color: var(--farbe-aktion); }
.nav-text { flex: 1; min-width: 0; }

/* --- Registerkarten ---------------------------------------------- */

.reiter {
  display: flex; gap: var(--abstand-1);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--farbe-linie);
  margin-bottom: var(--abstand-5);
  padding-bottom: var(--abstand-2);
}
.reiter a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: .9375rem; font-weight: 600;
  color: var(--farbe-text-2);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.reiter a:hover { background: var(--farbe-flaeche-3); color: var(--farbe-text); }
.reiter a[aria-current="page"] {
  background: var(--farbe-aktion);
  border-color: var(--farbe-aktion);
  color: #fff;
}
.reiter a[aria-current="page"] .sym-icon { color: #fff; }
.reiter a .sym-icon { color: var(--farbe-text-3); }
.reiter a:hover .sym-icon { color: var(--farbe-text-2); }
.reiter .zaehler-klein {
  background: var(--farbe-dringend); color: #fff;
  border-radius: 10px; padding: 1px 7px;
  font-size: .76rem; font-weight: 700;
}
.reiter a[aria-current="page"] .zaehler-klein { background: rgba(255,255,255,.28); }

@media (max-width: 1023px) {
  .brotkrume ol { font-size: .85rem; }
}

/* ---------------------------------------- Balken im Mandanten-Dashboard */

.balkenzeile {
  display: grid;
  grid-template-columns: 9rem 1fr 3rem;
  align-items: center;
  gap: var(--abstand-3);
  padding: 5px 0;
  font-size: .9rem;
}
.balken-name { color: var(--farbe-text-2); }
.balken {
  height: 9px; border-radius: 5px;
  background: var(--farbe-flaeche-3);
  overflow: hidden;
}
.balken-fuell { display: block; height: 100%; background: var(--farbe-aktion); border-radius: 5px; }
.balken-wert { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==================================================================
   11 · Speicherleiste — erscheint, sobald ein Feld geändert wurde
   ================================================================== */

.speicherleiste {
  /* Fest am unteren Fensterrand, nicht am Ende des Inhalts: Wer oben in einem
     langen Formular etwas ändert, soll nicht erst nach unten scrollen müssen,
     um zu sehen, dass es etwas zu speichern gibt. */
  position: fixed;
  left: 240px; right: 0; bottom: 0;
  z-index: 60;
  display: flex; align-items: center; gap: var(--abstand-4);
  padding: var(--abstand-3) var(--abstand-5);
  background: var(--farbe-flaeche);
  border-top: 2px solid var(--farbe-aktion);
  box-shadow: 0 -6px 20px rgba(16, 24, 40, .16);
  animation: leiste-auf .16s ease-out;
}
.speicherleiste[hidden] { display: none; }

@keyframes leiste-auf {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.speicherleiste .meldung {
  display: flex; align-items: center; gap: var(--abstand-2);
  font-size: .9375rem; font-weight: 600;
  color: var(--farbe-text);
}
.speicherleiste .punkt {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--farbe-dringend);
  flex: 0 0 auto;
}
.speicherleiste .anzahl { color: var(--farbe-text-2); font-weight: 400; }
.speicherleiste .knoepfe { margin-left: auto; display: flex; gap: var(--abstand-2); }

/* Feld mit ungespeicherter Änderung */
.eingabe[data-geaendert="1"] {
  border-color: var(--farbe-aktion);
  background: #f7faff;
}

/* Ohne JavaScript bleibt die eingebaute Schaltfläche sichtbar.
 *
 * Eine Reihe, kein Block: Mehrere Knöpfe untereinander lesen sich als
 * mehrere Entscheidungen, nebeneinander als eine mit mehreren Ausgängen.
 * `flex-wrap` bricht auf schmalen Schirmen sauber um, statt die Knöpfe
 * versetzt stehen zu lassen. */
.formular-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  margin-top: var(--abstand-4);
}

/* Was Schaden anrichten kann, rückt nach rechts ab — nicht direkt neben
   den Weg, den man üblicherweise geht. */
.formular-aktionen .knopf-gefahr { margin-left: auto; }

/* Solange die Leiste steht, bekommt der Inhalt unten Luft — sonst verdeckt
   sie das letzte Feld genau dann, wenn man es bearbeitet. */
body.hat-speicherleiste .shell-inhalt { padding-bottom: 92px; }

@media (max-width: 1023px) {
  .speicherleiste { left: 0; padding: var(--abstand-3) var(--abstand-4); }
  .speicherleiste .meldung { font-size: .875rem; }
  .speicherleiste .anzahl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .speicherleiste { animation: none; }
}

/* ==================================================================
   12 · Abstände zwischen Schaltflächen — auch in SweetAlert2
   ================================================================== */

/*
  SweetAlert2 setzt die Ränder seiner Knöpfe zurück, sobald buttonsStyling
  auf false steht — dann kleben sie aneinander. Der Abstand kommt deshalb
  von hier. Das Stylesheet der Bibliothek wird bewusst VOR app.css geladen,
  damit diese Regeln greifen.
*/
.swal2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  margin-top: var(--abstand-5);
}
.swal2-actions .knopf { margin: 0; }

/* Reihenfolge: die bestätigende Aktion rechts, wie im übrigen Portal */
.swal2-actions .swal2-confirm { order: 2; }
.swal2-actions .swal2-cancel  { order: 1; }
.swal2-actions .swal2-deny    { order: 1; }

.swal2-popup { font-family: var(--font); font-size: var(--schrift); }
.swal2-title { font-size: 1.3rem; color: var(--farbe-text); }
.swal2-html-container { color: var(--farbe-text-2); font-size: .9375rem; }
.swal2-input, .swal2-textarea {
  font-family: var(--font);
  border: 1px solid var(--farbe-linie-stark);
  border-radius: var(--radius-s);
  box-shadow: none;
}
.swal2-input:focus, .swal2-textarea:focus {
  border-color: var(--farbe-aktion);
  box-shadow: 0 0 0 3px var(--farbe-aktion-bg);
}
.swal2-validation-message {
  background: var(--farbe-fehler-bg);
  color: var(--farbe-fehler);
  font-size: .9rem;
}

/* Eigene Knopfreihen: durchgehend derselbe Abstand */
.knopfreihe { gap: var(--abstand-3); flex-wrap: wrap; }
.speicherleiste .knoepfe { gap: var(--abstand-3); }
.auth-zeile { gap: var(--abstand-3); }

/* Zwei Schaltflächen, die direkt nebeneinander stehen, ohne Reihenbehälter */
.knopf + .knopf { margin-left: var(--abstand-3); }
.knopfreihe .knopf + .knopf,
.swal2-actions .knopf + .knopf { margin-left: 0; }

/* ---------------------------------------------------- Audit-Log */

.nowrap { white-space: nowrap; }

.detailzeile {
  display: flex; gap: var(--abstand-2);
  font-size: .875rem;
  padding: 1px 0;
}
.detail-schluessel {
  flex: 0 0 auto;
  color: var(--farbe-text-3);
  font-weight: 600;
  min-width: 5.5rem;
}

/* Abzeichenfarben nach Art der Aktion */
.abz-anmeldung { background: var(--farbe-flaeche-3); color: var(--farbe-text-2); }
.abz-kennwort  { background: var(--farbe-aktion-bg); color: var(--farbe-aktion-dz); }
.abz-mandant   { background: var(--farbe-aktion-bg); color: var(--farbe-aktion-dz); }
.abz-benutzer  { background: var(--farbe-ok-bg);     color: var(--farbe-ok); }
.abz-kunde     { background: var(--farbe-ok-bg);     color: var(--farbe-ok); }
.abz-import    { background: var(--farbe-flaeche-3); color: var(--farbe-text-2); }
.abz-export    { background: var(--farbe-warn-bg);   color: var(--farbe-warn); }
.abz-gefahr    { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); }
.abz-handler   { background: var(--farbe-aktion-bg); color: var(--farbe-aktion-dz); }
.abz-sonstige  { background: var(--farbe-flaeche-3); color: var(--farbe-text-2); }

.abzeichen[class*="abz-"]::before { content: "●"; }

/* ==================================================================
   13 · Anschriften — Blocksatz statt Spaltensalat
   ================================================================== */

/*
  Eine Anschrift ist ein zusammenhängender Block und wird gelesen wie auf
  einem Briefumschlag: Straße in einer Zeile, darunter Postleitzahl und Ort
  gemeinsam, darunter das Land. Nebeneinander verstreute Adressfelder
  zwingen zum Suchen.

  Die Breite ist bewusst begrenzt: Ein Ortsname wird nicht lesbarer, wenn
  das Feld 1400 Pixel breit ist.
*/
.adressblock {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0 var(--abstand-4);
  max-width: 38rem;
}
.adressblock .feld { margin-bottom: var(--abstand-4); }
.adressblock .zeile-voll { grid-column: 1 / -1; }
.adressblock .zeile-schmal { grid-column: 1 / 2; }

/* Innerhalb eines Adressblocks nicht zusätzlich in Spalten brechen */
.karte-formular > .adressblock { grid-column: 1 / -1; }

/* Ein Feld über die volle Zeile nutzt sie auch ganz.

   Bis zum 10.09.2026 stand hier eine Deckelung auf 46 rem mit der
   Begründung, über diese Breite lasse sich eine Eingabe nicht mehr
   überblicken. Das stimmt für den Text IM Feld — aber das Feld stand
   dadurch in einer Karte, die anderthalbmal so breit war, mit einem
   leeren Streifen daneben, und dieser Streifen sah aus wie ein Fehler.
   Wer die Breite begrenzen will, tut es über die Spalte (`.feld` statt
   `.feld-breit`): Dann steht neben dem Feld ein zweites statt nichts. */

@media (max-width: 560px) {
  .adressblock { grid-template-columns: 1fr; }
  .adressblock .zeile-schmal { grid-column: 1 / -1; }
}

/* Formular in einer vollbreiten Karte: das Eingabefeld bleibt handlich. */
.uebernahme-form { max-width: 38rem; }

/* ---------------------------------------------------- Bürozeiten */

.wochenzeiten { display: grid; gap: 6px; max-width: 34rem; }
.wochentag {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: center;
  gap: var(--abstand-3);
  padding: 4px 0;
}
.wochentag .wahl { margin: 0; border: 0; padding: 6px 8px; }
.wochentag .wahl:has(input:checked) { background: transparent; border-color: transparent; }
.wochenzeit { display: flex; align-items: center; gap: var(--abstand-2); }
.wochenzeit .eingabe-klein { width: 7.5rem; }
.wochenzeit .bis { color: var(--farbe-text-3); font-size: .9rem; }
.wochentag .geschlossen { color: var(--farbe-text-3); font-size: .9rem; font-style: italic; }
.wochentag-zu .wahl span { color: var(--farbe-text-3); }

/* ==================================================================
   14 · Anrufmatrix — Viertelstundenraster
   ================================================================== */

.matrix { user-select: none; }

.matrix-hilfe {
  display: flex; align-items: center; gap: var(--abstand-4);
  flex-wrap: wrap;
  margin-bottom: var(--abstand-3);
  font-size: .875rem;
}
.matrix-legende { display: inline-flex; align-items: center; gap: 6px; color: var(--farbe-text-2); }
.probe { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--farbe-linie-stark); }
.probe-an  { background: var(--farbe-aktion); border-color: var(--farbe-aktion); }
.probe-aus { background: var(--farbe-flaeche-2); }

.matrix-tabelle {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-s);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche);
  overflow-x: auto;
}

.matrix-kopf,
.matrix-zeile {
  display: grid;
  grid-template-columns: 10.5rem minmax(46rem, 1fr);
  align-items: center;
  gap: var(--abstand-3);
}

.matrix-stunden {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  font-size: .72rem;
  color: var(--farbe-text-3);
  padding-bottom: 3px;
}
.matrix-stunde { text-align: left; padding-left: 1px; }

.matrix-zeile + .matrix-zeile { margin-top: 3px; }
.matrix-tagname .wahl { margin: 0; border: 0; padding: 4px 6px; background: transparent; }
.matrix-tagname .wahl:has(input:checked) { background: transparent; border-color: transparent; }

.matrix-takte {
  display: grid;
  grid-template-columns: repeat(96, 1fr);
  height: 26px;
  border: 1px solid var(--farbe-linie);
  border-radius: 3px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;   /* sonst scrollt das Ziehen die Seite */
}

.takt {
  background: var(--farbe-flaeche-2);
  border-right: 1px solid rgba(0, 0, 0, .05);
}
.takt[data-stundenstart] { border-left: 1px solid var(--farbe-linie); }
.takt:last-child { border-right: 0; }
.takt-an { background: var(--farbe-aktion); }
.matrix-takte:hover .takt:hover { outline: 1px solid var(--farbe-text); outline-offset: -1px; }

.matrix-satz {
  margin: var(--abstand-3) 0 0;
  font-weight: 600;
  font-size: .9375rem;
}

@media (prefers-reduced-motion: reduce) {
  .takt { transition: none; }
}

.feiertagsliste { display: flex; flex-wrap: wrap; gap: 6px; }
.feiertagsmarke {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--farbe-flaeche-3);
  border: 1px solid var(--farbe-linie);
  font-size: .82rem;
  color: var(--farbe-text-2);
  white-space: nowrap;
}

/* --- Kennwerte: Beschriftung und Wert paarweise untereinander ------------
   Für Angaben, die man abliest und nicht ändert. Eine Tabelle wäre zu viel
   Gerüst für zwei Spalten, eine Aufzählung zu wenig Struktur. */
.kennwerte { display: grid; gap: var(--abstand-3); margin: 0 0 var(--abstand-4); }
.kennwerte > div {
  display: grid;
  grid-template-columns: minmax(9rem, 40%) 1fr;
  gap: var(--abstand-3);
  align-items: baseline;
  padding-bottom: var(--abstand-3);
  border-bottom: 1px solid var(--farbe-linie);
}
.kennwerte > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kennwerte dt { color: var(--farbe-text-3); font-size: .9rem; font-weight: 600; }
.kennwerte dd { margin: 0; font-weight: 600; }

/* Aufzählung ohne Punkte, für Hinweislisten aus einem Lauf */
.liste-schmal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.liste-schmal li { padding-left: var(--abstand-4); position: relative; }
.liste-schmal li::before {
  content: '·'; position: absolute; left: var(--abstand-2); color: var(--farbe-text-3);
}

/* Ein laufender Import blockiert die Seite mehrere Sekunden — der Knopf muss
   sagen, dass etwas passiert, sonst wird ein zweites Mal geklickt. */
.knopf[aria-busy='true'] { opacity: .7; cursor: progress; }

/* --- Dringende Karte -----------------------------------------------------
   Für den einen Kasten, der nicht übersehen werden darf. Bewusst sparsam
   eingesetzt: Wenn drei Karten rot sind, ist keine mehr dringend. */
.karte-dringend {
  border-color: var(--farbe-dringend);
  border-left: 4px solid var(--farbe-dringend);
  background: #fdf3ef;   /* Kontrast zu --farbe-text (#14171b): 15,7:1 */
}
.karte-dringend > h2 { color: var(--farbe-dringend); }

/* --- Optionskarte -------------------------------------------------------
   Für Einstellungen, deren Optionen sich nur in Fällen unterscheiden, die
   man sich vorstellen können muss. Jede Karte trägt Titel, Erklärung,
   Beispiel und Preis.

   Zwei Spalten im Grid statt Flex: Ein Flex-Kind ohne `min-width: 0` kann
   nicht unter seine inhaltliche Mindestbreite schrumpfen und sprengt die
   Karte nach rechts. Genau das ist hier passiert. */
.optionsgruppe { border: 0; margin: 0 0 var(--abstand-4); padding: 0; min-width: 0; }
.optionsgruppe-legende {
  padding: 0; margin-bottom: var(--abstand-3);
  font-weight: 600; font-size: .9rem; color: var(--farbe-text-2);
}

.optionskarte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* minmax(0,…) hält den Text im Rahmen */
  gap: var(--abstand-3);
  align-items: start;
  padding: var(--abstand-4);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.optionskarte + .optionskarte { margin-top: var(--abstand-3); }
.optionskarte:hover { border-color: var(--farbe-linie-stark); background: var(--farbe-flaeche-2); }
.optionskarte input { margin: 2px 0 0; }

/* Ausgewählt: Rahmen UND Fläche UND ein zweiter Rahmen nach innen — der
   innere Ring ersetzt eine dickere Kante, die das Layout verschieben würde. */
.optionskarte:has(input:checked) {
  border-color: var(--farbe-aktion);
  background: var(--farbe-aktion-bg);
  box-shadow: inset 0 0 0 1px var(--farbe-aktion);
}
.optionskarte:focus-within { outline: 3px solid var(--farbe-aktion); outline-offset: 2px; }

.optionskarte-inhalt { display: grid; gap: var(--abstand-2); min-width: 0; }
.optionskarte-titel { font-weight: 700; font-size: 1.0125rem; color: var(--farbe-text); }
.optionskarte-text  { color: var(--farbe-text-2); font-size: .9375rem; line-height: 1.5; }

/* Beispiel und Preis: zwei Zeilen mit fester Marke links. */
.fakten {
  display: grid; gap: var(--abstand-2);
  margin-top: var(--abstand-1);
  padding-top: var(--abstand-3);
  border-top: 1px solid var(--farbe-linie);
}
.optionskarte:has(input:checked) .fakten { border-top-color: rgba(21, 68, 192, .22); }

.faktum {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--abstand-3);
  font-size: .9rem; line-height: 1.5;
  color: var(--farbe-text-2);
}
.faktum-marke {
  font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--farbe-text-3);
  padding-top: 2px;
}
/* Der Preis ist die Kehrseite — er wird gekennzeichnet, nicht versteckt. */
.faktum-preis .faktum-marke { color: var(--farbe-warn); }

@media (max-width: 720px) {
  .faktum { grid-template-columns: 1fr; gap: 2px; }
}

/* Wörtlich das, was der Angerufene hört. Als Zitat gesetzt, damit klar ist:
   Das ist kein erklärender Text, das ist der Satz selbst. */
.hoerprobe {
  margin: 0;
  padding: var(--abstand-3) var(--abstand-4);
  border-left: 3px solid var(--farbe-aktion);
  background: var(--farbe-flaeche-2);
  font-size: 1.05rem;
  line-height: 1.55;
}
.feldtitel {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  color: var(--farbe-text-3);
  margin-bottom: var(--abstand-2);
}

/* --- Benutzerkarten ------------------------------------------------------
   Die Speicherzeile und die Aktionen sind zweierlei: Oben wird bearbeitet,
   unten wird etwas ausgelöst. Die Trennlinie sagt das ohne Worte. */
.knopfreihe-getrennt {
  margin-top: var(--abstand-4);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie);
  flex-wrap: wrap;
}
.karte-gesperrt { opacity: .72; }
.karte-gesperrt:focus-within { opacity: 1; }
.abzeichenreihe { display: flex; gap: var(--abstand-2); flex-wrap: wrap; align-items: center; }

/* Nummerierter Ablauf — für Erklärungen, bei denen die Reihenfolge zählt */
.ablauf { margin: 0 0 var(--abstand-4); padding-left: var(--abstand-5); display: grid; gap: var(--abstand-2); }
.ablauf li { padding-left: var(--abstand-1); }

/* --- Kennwortstärke ------------------------------------------------------
   Die Anzeige ist eine Hilfe beim Tippen, keine Instanz. Sie ist deshalb
   bewusst zurückhaltend gestaltet — kein rotes Sperrgefühl, sondern eine
   Liste, die sich abhakt. */
.staerke { margin-top: var(--abstand-3); }

.staerke-balken { display: flex; gap: 4px; margin-bottom: var(--abstand-2); }
.staerke-balken span {
  height: 5px; flex: 1; border-radius: 3px;
  background: var(--farbe-flaeche-3);
  transition: background-color .15s ease;
}
.staerke[data-stufe="1"] .staerke-balken span.gefuellt,
.staerke[data-stufe="0"] .staerke-balken span.gefuellt { background: var(--farbe-fehler); }
.staerke[data-stufe="2"] .staerke-balken span.gefuellt { background: var(--farbe-warn); }
.staerke[data-stufe="3"] .staerke-balken span.gefuellt,
.staerke[data-stufe="4"] .staerke-balken span.gefuellt { background: var(--farbe-ok); }

.staerke-wort { margin: 0 0 var(--abstand-3); font-size: .9rem; font-weight: 600; }
.staerke[data-stufe="0"] .staerke-wort,
.staerke[data-stufe="1"] .staerke-wort { color: var(--farbe-fehler); }
.staerke[data-stufe="2"] .staerke-wort { color: var(--farbe-warn); }
.staerke[data-stufe="3"] .staerke-wort,
.staerke[data-stufe="4"] .staerke-wort { color: var(--farbe-ok); }

.pruefliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.pruefliste li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--abstand-2);
  align-items: start; font-size: .9rem; color: var(--farbe-text-3);
}
.pruefliste .haken {
  width: 16px; height: 16px; border-radius: 50%; margin-top: 2px;
  border: 2px solid var(--farbe-linie);
  display: grid; place-items: center; font-size: 11px; line-height: 1;
}
/* Erfüllt: Haken UND Farbe UND Textfarbe — nie allein über Farbe (§12) */
.pruefliste li[data-erfuellt="1"] { color: var(--farbe-ok); }
.pruefliste li[data-erfuellt="1"] .haken {
  border-color: var(--farbe-ok); background: var(--farbe-ok); color: #fff;
}
.pruefliste li[data-erfuellt="1"] .haken::after { content: '✓'; }
.pruefliste li[data-erfuellt="0"] .haken::after { content: '·'; color: var(--farbe-text-3); }
/* Was der Browser nicht prüfen kann, bleibt neutral — kein Haken auf Verdacht */
.pruefliste li[data-serverseitig="1"] .haken::after { content: '?'; color: var(--farbe-text-3); }

.staerke-fussnote { margin: var(--abstand-3) 0 0; font-size: .85rem; }

/* --- Vormerkung ----------------------------------------------------------
   Ein Zustand, der noch nicht eingetreten ist. Er wird abgesetzt gezeigt,
   aber nicht als Warnung — es ist ja noch nichts passiert. */
.vormerkung {
  border: 1px solid var(--farbe-warn);
  border-left: 4px solid var(--farbe-warn);
  border-radius: var(--radius-s);
  background: var(--farbe-warn-bg);
  padding: var(--abstand-4);
  margin-bottom: var(--abstand-5);
}
.vormerkung-kopf {
  display: flex; align-items: baseline; gap: var(--abstand-3);
  flex-wrap: wrap; margin-bottom: var(--abstand-2);
}
.vormerkung-kopf strong { font-size: 1.15rem; }
.vormerkung p { margin: 0 0 var(--abstand-3); }

/* --- Preistafel ----------------------------------------------------------
   Vier Zahlen, die zusammengehören und sich vergleichen lassen sollen.
   Als Tabelle wären sie zu schwer, als Fließtext nicht auffindbar. */
.preistafel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--abstand-4);
  margin: var(--abstand-4) 0;
  padding: var(--abstand-4);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-s);
  background: var(--farbe-flaeche-2);
}
.preistafel > div { display: grid; gap: 2px; min-width: 0; }
.preis-marke {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--farbe-text-3);
}
.preis-wert { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.preistafel .dezent { font-size: .85rem; }

/* --- Festwert -----------------------------------------------------------
   Ein Wert, den der Betrachter sehen, aber nicht ändern darf. Kein
   gesperrtes Eingabefeld: Das sieht aus wie ein Fehler und verleitet zum
   Hineinklicken. Stattdessen Text — und die Begründung daneben, denn eine
   Sperre ohne Grund ist eine Zumutung. */
.festwertgruppe { display: grid; gap: var(--abstand-4); margin-top: var(--abstand-4); }
.festwert {
  display: grid; gap: 2px;
  padding: var(--abstand-3) var(--abstand-4);
  border-left: 3px solid var(--farbe-linie);
  background: var(--farbe-flaeche-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.festwert + .festwert { margin-top: var(--abstand-3); }
.festwert-marke {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--farbe-text-3);
}
.festwert-wert { font-size: 1.05rem; font-weight: 600; }
.festwert-grund { font-size: .875rem; color: var(--farbe-text-3); margin-top: 2px; }

/* --- Entscheidungsprotokoll ---------------------------------------------
   Chronologie mit Begründung. Eine Abschwächung wird gekennzeichnet, nicht
   verurteilt: Sie kann gute Gründe haben — sie soll nur auffindbar sein. */
.entscheidungen { list-style: none; margin: 0 0 var(--abstand-4); padding: 0; display: grid; gap: var(--abstand-3); }
.entscheidungen li {
  padding: var(--abstand-3) var(--abstand-4);
  border-left: 3px solid var(--farbe-linie);
  background: var(--farbe-flaeche-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.entscheidungen li.abgeschwaecht { border-left-color: var(--farbe-warn); background: var(--farbe-warn-bg); }
.entscheidung-kopf {
  display: flex; gap: var(--abstand-3); align-items: baseline;
  flex-wrap: wrap; margin-bottom: var(--abstand-2);
}
.entscheidungen p { margin: 0 0 var(--abstand-1); }
.entscheidung-grund {
  margin: var(--abstand-2) 0 0;
  padding-left: var(--abstand-3);
  border-left: 2px solid var(--farbe-linie-stark);
  font-style: italic;
}

/* --- Beanstandetes Feld --------------------------------------------------
   Rot allein reicht nicht (§12): Der Rahmen wird dicker, das Feld bekommt
   eine getönte Fläche, und darunter steht der Satz im Klartext. Wer keine
   Farben unterscheidet, sieht Rahmenstärke und Text. */
.eingabe-fehler,
.eingabe-fehler:hover {
  border-color: var(--farbe-fehler);
  border-width: 2px;
  background: var(--farbe-fehler-bg);
}
.eingabe-fehler:focus {
  outline-color: var(--farbe-fehler);
  box-shadow: 0 0 0 3px var(--farbe-fehler-bg);
}
.feldfehler {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--abstand-2);
  align-items: start;
  margin-top: var(--abstand-2);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--farbe-fehler);
  font-weight: 500;
}
.feldfehler .sym {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--farbe-fehler); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.hinweis-fehler a { color: inherit; }

/* --- Volumenbalken -------------------------------------------------------
   Wie viel vom Inklusivvolumen verbraucht ist. Der Balken ist die schnelle
   Auskunft, die Zahl darunter die genaue — die Zahl steht immer da, denn
   ein Balken allein lässt sich nicht ablesen. */
.volumenbalken {
  height: 10px;
  border-radius: 5px;
  background: var(--farbe-flaeche-3);
  overflow: hidden;
  margin: var(--abstand-3) 0 var(--abstand-2);
}
.volumenbalken span {
  display: block;
  height: 100%;
  background: var(--farbe-ok);
  transition: width .2s ease;
}
.volumenbalken span.voll { background: var(--farbe-warn); }

/* --- Abgesetzte Navigationsgruppe ---------------------------------------
   „Administration" steht am Ende und soll sich vom täglichen Betrieb
   abheben: Es sind die Punkte, die man selten braucht und nie
   versehentlich treffen will.

   Abgesetzt wird über Abstand und eine Trennlinie, nicht über eine
   auffällige Farbe — der Bereich ist nicht wichtiger als der Rest,
   sondern anderer Art. */
.nav-gruppe-abgesetzt {
  margin-top: var(--abstand-5);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie);
  color: var(--farbe-text-2);
}

/* Wird die Seitenleiste nach unten hin knapp, bleibt die Gruppe trotzdem
   unten — sie ist der Fuß der Navigation, nicht ein Punkt darin. */
@media (min-height: 700px) {
  .nav-gruppe-abgesetzt { margin-top: auto; }
  .shell-nav { display: flex; flex-direction: column; }
}

/* --- Termine am Kunden ---------------------------------------------------
   Nach Tagen gebündelt statt als flache Liste: Ein Pflegekunde hat oft
   drei Einsätze am Tag, und die gehören zusammen gelesen.

   Der Tag ist eine Trennzeile — Wochentag und Datum fett, das Abzeichen
   daneben, dann ein Strich bis zum Rand. Darunter eine Zeitachse: ein
   Punkt je Einsatz, verbunden durch eine Linie. Die Achse macht aus
   Einzelzeilen einen Tagesablauf. */
.terminblock { margin-bottom: var(--abstand-5); }
.terminblock.vergangen { opacity: .55; }

.terminkopf {
  display: flex; align-items: center; gap: var(--abstand-3);
  margin-bottom: var(--abstand-3);
}
.terminwochentag { font-weight: 700; font-size: 1rem; white-space: nowrap; }
/* Der Strich füllt, was die Überschrift übrig lässt. Ein Rahmen unter der
   ganzen Zeile liefe auch unter das Abzeichen — hier soll er daneben. */
.terminstrich { flex: 1; height: 1px; background: var(--farbe-linie); }

/* Ein Punkt vor der Zeit, eine Linie zwischen den Punkten. Die Linie
   endet am letzten Punkt, nicht am Ende der Liste. */
.terminachse { list-style: none; margin: 0; padding: 0; }
.terminzeile {
  position: relative;
  display: grid; grid-template-columns: 4.2rem 1fr;
  gap: var(--abstand-3);
  padding: 4px 0 10px 26px;
  font-size: .9375rem;
}
.terminzeile::before {
  content: '';
  position: absolute; left: 3px; top: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--farbe-aktion);
}
.terminzeile::after {
  content: '';
  position: absolute; left: 7px; top: 19px; bottom: -4px;
  width: 1px; background: var(--farbe-linie);
}
.terminzeile:last-child { padding-bottom: 0; }
.terminzeile:last-child::after { display: none; }
.terminblock.vergangen .terminzeile::before { background: var(--farbe-linie-stark); }
.terminzeit { font-weight: 600; }
.terminwer  { font-weight: 600; }

/* Ein Punkt vor dem Wort: „heute" ist ein Zustand, kein Etikett. */
.abz-punkt::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  margin-right: 5px; vertical-align: 1px;
}

/* --- Ablegefläche -------------------------------------------------------
   Das Dateifeld bleibt ein Dateifeld — es wird nur groß genug, dass man
   etwas darauf fallen lassen mag. Ohne JavaScript sieht man ein
   gewöhnliches Feld und kann es benutzen. */
.ablage {
  display: grid; place-items: center; gap: var(--abstand-2);
  padding: var(--abstand-6) var(--abstand-4);
  border: 2px dashed var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.ablage:hover { border-color: var(--farbe-linie-stark); }
.ablage[data-ueber] {
  border-color: var(--farbe-aktion);
  background: var(--farbe-aktion-bg);
}
.ablage[data-gefuellt="1"] { border-style: solid; border-color: var(--farbe-ok); }
.ablage-symbol {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--farbe-flaeche-3); color: var(--farbe-text-2);
  font-size: 1.4rem; line-height: 1;
}
.ablage[data-gefuellt="1"] .ablage-symbol { background: var(--farbe-ok); color: #fff; }
.ablage-text { margin: 0; font-size: 1.05rem; }
.ablage-text label { cursor: pointer; text-decoration: underline; }
.ablage-datei:empty { display: none; }
.ablage-datei {
  margin: 0; font-weight: 600; font-family: ui-monospace, monospace;
  font-size: .9rem; color: var(--farbe-ok);
}
.ablage .dezent { margin: 0; font-size: .85rem; }
/* Das Feld bleibt bedienbar und für die Tastatur erreichbar, tritt aber
   optisch zurück — sichtbar nur, wenn kein Skript läuft. */
.ablage input[type="file"] { max-width: 20rem; font-size: .875rem; }


/* ==================================================================
   Statistik
   ================================================================== */

/* Die vier Zahlen, wegen derer man die Seite öffnet. Was davon eine
   Aufgabe ist, trägt einen Weg dorthin — eine Zahl ohne Weg ist eine
   Feststellung, und davon hat niemand etwas. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-5);
}
.kennzahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-left: 3px solid var(--farbe-linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
}
.kennzahl-titel {
  font-size: .78rem;
  color: var(--farbe-text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.kennzahl-wert { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kennzahl-aktion { border-left-color: var(--farbe-aktion); }
.kennzahl-warn   { border-left-color: var(--farbe-warn); }
.kennzahl a { color: var(--farbe-aktion); }

/* Der Tagesverlauf: zwei Säulen je Tag, gebaut aus Höhen in Prozent.
   Für zwei Reihen über 90 Tage braucht es keine Bibliothek — und was
   nicht geladen wird, kann auch nicht fehlen. */
.reihe {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 150px;
  padding: var(--abstand-3) 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.reihe-tag { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.reihe-saeulen { display: flex; align-items: flex-end; gap: 1px; width: 100%; height: 100%; }
.reihe-saeule {
  flex: 1;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: opacity .12s;
}
.reihe-tag:hover .reihe-saeule { opacity: .75; }
.reihe-erkannt  { background: #9db8ee; }
.reihe-erledigt { background: var(--farbe-aktion); }

.reihe-legende {
  display: flex; gap: var(--abstand-4); flex-wrap: wrap;
  margin: var(--abstand-3) 0 0;
  font-size: .875rem; color: var(--farbe-text-2);
}
.reihe-punkt {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 5px; vertical-align: -1px;
}

/* Anteilsbalken der Ergebnisse. Eigener Name, weil `.balken` schon den
   Statusbalken der Mandantenseite gehört — zwei Bedeutungen unter einem
   Klassennamen gehen irgendwann auseinander. */
.quote {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--farbe-flaeche-3);
  overflow: hidden;
}
.quote-fuell { display: block; height: 100%; border-radius: 999px; }
.quote-ok  { background: var(--farbe-aktion); }
.quote-aus { background: var(--farbe-linie-stark); }

/* Ein Ergebnis, das nie eintrat, steht mit — aber nicht gleich laut. */
.tabelle tr.zeile-leer td { opacity: .5; }


/* ==================================================================
   Öffentliche Beschreibung (/callcenter)
   ================================================================== */

/* Ein Blatt zum Lesen, kein Arbeitsbereich: eine Spalte, begrenzte Breite,
   ruhiger Grund. Wer hier ist, liest von oben nach unten und schreibt
   nebenher Code. */
body.doku { background: var(--farbe-flaeche-2); }

.doku-kopf {
  display: flex; align-items: baseline; gap: var(--abstand-3);
  padding: var(--abstand-4) var(--abstand-5);
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-linie);
}
.doku-marke { font-weight: 700; color: var(--farbe-text); text-decoration: none; }

.doku-blatt {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--abstand-6) var(--abstand-5) var(--abstand-7);
}
.doku-blatt h1 { margin: 0 0 var(--abstand-3); }
.doku-blatt h2 {
  margin: var(--abstand-7) 0 var(--abstand-3);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie);
}
.doku-blatt h3 { margin: var(--abstand-5) 0 var(--abstand-2); font-size: 1.02rem; }
.doku-blatt p, .doku-blatt li { line-height: 1.65; }
.doku-blatt .tabelle { margin: var(--abstand-3) 0; background: var(--farbe-flaeche); }

.doku-lead { font-size: 1.06rem; color: var(--farbe-text-2); }

/* Das Inhaltsverzeichnis ist eine Zeile, keine Seitenleiste: Sechs Punkte
   brauchen keine eigene Spalte. */
.doku-inhalt {
  display: flex; flex-wrap: wrap; gap: var(--abstand-2);
  margin: var(--abstand-5) 0;
}
.doku-inhalt a {
  padding: 5px 11px;
  border: 1px solid var(--farbe-linie);
  border-radius: 999px;
  background: var(--farbe-flaeche);
  font-size: .875rem;
  color: var(--farbe-aktion-dz);
  text-decoration: none;
}
.doku-inhalt a:hover { background: var(--farbe-aktion-bg); border-color: var(--farbe-aktion); }

/* Beispiele stehen in Kästen, die man am Stück markieren kann. Umbruch
   erhalten: Ein umgebrochenes JSON ist unlesbar, ein waagerecht
   scrollendes auch — deshalb sind die Beispiele von Hand kurz gehalten. */
.doku-code {
  margin: var(--abstand-3) 0;
  padding: var(--abstand-4);
  background: #0f1729;
  color: #dbe4f5;
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .855rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

.doku-verb {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 6px;
  border-radius: var(--radius-s);
  background: var(--farbe-aktion-bg);
  color: var(--farbe-aktion-dz);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
}

.doku-regeln { padding-left: 1.25rem; }
.doku-regeln li { margin-bottom: var(--abstand-3); }

.doku-fuss {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 var(--abstand-5) var(--abstand-6);
}

/* --- Empfangsadresse für die Einlieferung per E-Mail ---------------------
   Die Adresse ist das eine, was von dieser Karte abgeschrieben oder
   kopiert wird. Sie steht deshalb frei, groß und in Festbreite — und darf
   umbrechen: 34 Zeichen Localpart passen auf einem schmalen Bildschirm in
   keine Zeile, und ein waagerechter Rollbalken versteckt genau das, was
   gebraucht wird. */
.mailadresse {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche-2);
  padding: var(--abstand-3);
  margin-bottom: var(--abstand-4);
}
.mailadresse-kopf {
  display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap;
  margin-bottom: var(--abstand-2);
}
.mailadresse-wert {
  margin: 0 0 var(--abstand-3);
  font-size: 1rem;
  line-height: 1.4;
  word-break: break-all;
  user-select: all;
}

/* Eine Zeile mit Text links und Knopf rechts — die Absenderliste. Der
   Aufzählungspunkt von .liste-schmal fällt weg, sonst stünde er neben
   einer Zeile, die schon eine eigene Struktur hat. */
.liste-schmal .listenzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-3); padding-left: 0;
}
.liste-schmal .listenzeile::before { content: none; }

/* --- Zusatzangaben aus der Importquelle ---------------------------------
   Grundlage und Leistungen eines Einsatzes. Zweispaltig, damit die Marke
   links steht und der Wert daneben — untereinander gesetzt läsen sich drei
   Angaben wie ein Fließtext, und man sucht die Grundlage zwischen den
   Leistungen. */
.zusatzangaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--abstand-3);
  margin: var(--abstand-2) 0 0;
  font-size: .85rem;
}
.zusatzangaben dt {
  color: var(--farbe-text-3);
  white-space: nowrap;
}
.zusatzangaben dd { margin: 0; color: var(--farbe-text-2); }

/* Was der Kunde zu diesem einen Termin gesagt hat. Grün, wenn er
   einverstanden war; sonst auffällig, denn dann ist noch etwas zu tun. */
/* Die Wiederholungen: eine Zeile je WIEDERHOLUNG, Zahl und Einheit
   nebeneinander. Die Nummer steht vorn und traegt die Aussage — „1.
   Wiederholung nach 30 Minuten" liest sich als Satz. Der erste Anruf ist
   keine Wiederholung und steht deshalb als Vorspann ueber der Liste. */
.versuchszeile {
  display: flex; align-items: center; gap: var(--abstand-2);
  padding: 4px 0; flex-wrap: wrap;
}
.versuchsnummer {
  flex: 0 0 1.6rem; text-align: right;
  color: var(--farbe-text-3); font-variant-numeric: tabular-nums;
}
.versuchszeile-mehr { margin-top: var(--abstand-2); gap: var(--abstand-3); }
.versuchszeile label { flex: 0 0 auto; margin: 0; }
.eingabe-schmal { width: auto; min-width: 5.5rem; }
.versuchszeile [data-versuch-weg] {
  padding: 2px 8px; line-height: 1.2; color: var(--farbe-text-3);
}
.versuchs-hinweis { display: block; margin-top: 4px; }

/* Der Hinweis auf einen haengenden Testanruf im Fallfenster — als Formular,
   damit der Abbrechen-Knopf gleich daneben steht. */
.fallfenster-testlauf {
  display: flex; align-items: center; gap: var(--abstand-3);
  margin: var(--abstand-3) 0;
}
.fallfenster-testlauf button { margin-left: auto; flex: 0 0 auto; }

/* Der Testanruf im Pruefen-Fenster. Abgesetzt vom Rest: Er entscheidet
   nichts ueber den Fall, er probiert ihn nur aus. */
.fallfenster-debug {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-3);
  margin: var(--abstand-4) 0 0;
  padding: var(--abstand-3);
  border: 1px dashed var(--farbe-warn);
  border-radius: 4px;
  background: var(--farbe-warn-bg);
  flex-wrap: wrap;
}

/* Ein gekuendigter Vertrag. Nicht rot wie ein Fehler — es ist nichts
   schiefgegangen, es endet nur etwas. Warnfarbe, deutlich abgesetzt, damit
   niemand die beiden Daten uebersieht. */
.karte-gekuendigt {
  border-left: 3px solid var(--farbe-warn);
}
.karte-gekuendigt .kennzahlen { margin-bottom: var(--abstand-4); }

/* Der Debugmodus im Arbeitsplatz. Abgesetzt, damit ein Testanruf nicht
   aussieht wie eine gewoehnliche Fallaktion. */
.karte-debug {
  border: 2px dashed var(--farbe-warn);
  background: var(--farbe-warn-bg);
}
.karte-debug h2 { color: var(--farbe-warn); }

.terminergebnis {
  display: inline-block;
  margin: var(--abstand-2) 0 0;
  padding: 2px var(--abstand-2);
  border-radius: 3px;
  font-size: .85rem;
  color: var(--farbe-ok);
  background: var(--farbe-ok-bg);
}
/* Die internen Nummern am Fussende einer Detailansicht. Klein, grau, ohne
   Anspruch — sie richten sich an den, der etwas nachstellt, nicht an den,
   der telefoniert. */
.kennungen {
  margin: var(--abstand-4) 0 0;
  padding-top: var(--abstand-2);
  border-top: 1px solid var(--farbe-linie);
  font-size: .75rem;
  color: var(--farbe-text-3);
  user-select: all;
}

.terminergebnis-offen {
  color: var(--farbe-warn);
  background: var(--farbe-warn-bg);
}

/* Nummerierte Anleitung in einer aufklappbaren Hilfe. Die Zahlen bleiben
   stehen, der Text rückt daneben ein — bei einem Schritt über drei Zeilen
   ist sonst nicht mehr zu sehen, wo der nächste anfängt. */
.anleitung {
  margin: var(--abstand-2) 0 var(--abstand-3);
  padding-left: 1.4rem;
  font-size: .9375rem;
  color: var(--farbe-text-2);
}

.anleitung li {
  margin-bottom: .5rem;
  line-height: 1.5;
}

.anleitung code {
  white-space: nowrap;
}

/* Ein Abzeichen in einer Feldbeschriftung erbt deren Schriftschnitt und
   steht sonst zu eng am Text. */
label > .abzeichen {
  margin-left: .5rem;
  font-weight: 600;
  vertical-align: middle;
}

/* --- Rufnummer bestätigen lassen -------------------------------------
   Ein Eingabefeld mit einem Knopf daneben; auf schmalen Schirmen
   untereinander, weil ein halbes Feld neben einem halben Knopf beides
   unbrauchbar macht. */
.feld-mit-knopf {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.feld-mit-knopf .eingabe {
  flex: 1 1 16rem;
}

.feld-mit-knopf .knopf {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Der Code wird vom Bildschirm abgelesen und am Telefon eingetippt —
   während es klingelt. Deshalb groß, gesperrt und in Zifferngruppen, wie
   auf einer Tastatur und nicht wie in einem Fließtext. */
.pruefcode {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin: 1rem 0;
}

.pruefcode-ziffer {
  font-family: var(--schrift-fest, ui-monospace, monospace);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  padding: .5rem .7rem;
  border-radius: .4rem;
  background: var(--flaeche-2, #f1f3f5);
  border: 1px solid var(--rand, #dee2e6);
}

.pruef-nummer {
  text-align: center;
  font-weight: 600;
  margin-bottom: .25rem;
}

/* ------------------------------------------------------------------
   Gesprächsablauf (/doku/ablauf)

   Eine Senkrechte von oben nach unten: Ein Anruf hat einen Verlauf, und
   den liest man in einer Richtung. Je Schritt links, was geschieht, und
   rechts die Einstellung, die es entscheidet — der Blick springt beim
   Vergleichen zwischen beiden, deshalb zwei feste Spalten und keine
   Aufzählung mit eingerücktem Zusatz.

   Die Seite wird ausgedruckt und einem Kunden vorgelegt. Beim Drucken
   fallen Navigation, Knöpfe und Verweise weg; die Rahmen werden grau
   statt farbig, weil Farbe auf einem Schwarzweissdrucker zu Grau wird,
   das niemand mehr unterscheiden kann.
   ------------------------------------------------------------------ */

.ablauf-wortlaut {
  font-size: 1.0625rem;
  line-height: 1.6;
  padding: var(--abstand-4);
  margin: 0 0 var(--abstand-3);
  background: var(--farbe-flaeche-2, #f6f7f9);
  border-left: 3px solid var(--farbe-akzent, #2f6fdb);
  border-radius: var(--radius-s);
}

.ablauf-phase { position: relative; }

.ablauf-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-3);
}

.ablauf-kopf h2 { margin: 0; }
.ablauf-kopf > div { flex: 1; }
.ablauf-kopf p { margin: 2px 0 0; }

.ablauf-nummer {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--farbe-akzent, #2f6fdb);
  color: #fff;
  font-weight: 700;
}

.ablauf-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--farbe-linie);
}

.ablauf-schritt {
  display: grid;
  grid-template-columns: 1fr 15rem;
  gap: var(--abstand-4);
  padding: var(--abstand-3) 0;
  border-bottom: 1px solid var(--farbe-linie);
  align-items: start;
}

.ablauf-was { line-height: 1.55; }

.ablauf-regel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--abstand-3);
  border-left: 3px solid var(--farbe-linie-stark, #c9ced6);
}

.ablauf-regel-name {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--farbe-text-2);
}

.ablauf-regel-wert { font-weight: 600; }

.ablauf-regel-fest {
  font-size: .875rem;
  color: var(--farbe-text-2);
  font-style: italic;
}

/* Eine Einstellung, die eine Schranke aufhebt, faellt ins Auge — sie ist
   der Grund, warum jemand diese Seite liest. */
.ablauf-warn .ablauf-regel { border-left-color: var(--farbe-warn, #c86a00); }
.ablauf-warn .ablauf-regel-wert { color: var(--farbe-warn, #c86a00); }

/* Abgeschaltet heisst: Hier geschieht NICHTS. Das gehoert gedaempft, aber
   sichtbar — ein fehlender Anruf ist auch eine Auskunft. */
.ablauf-aus .ablauf-was { color: var(--farbe-text-2); }

.ablauf-nie { margin: 0; padding-left: var(--abstand-5); line-height: 1.6; }
.ablauf-nie li { margin-bottom: var(--abstand-2); }

@media (max-width: 720px) {
  .ablauf-schritt { grid-template-columns: 1fr; gap: var(--abstand-2); }
  .ablauf-regel { border-left: none; padding-left: 0; }
}

@media print {
  .nur-bildschirm { display: none !important; }
  .ablauf-phase { break-inside: avoid; }
  .ablauf-schritt { break-inside: avoid; }
  .ablauf-nummer { background: #000; }
  .ablauf-wortlaut { border-left-color: #000; background: none; }
  .ablauf-warn .ablauf-regel { border-left-color: #000; border-left-width: 5px; }
  .ablauf-warn .ablauf-regel-wert { color: #000; }
}

/* ------------------------------------------------------- Liveview (Betreiber)
 *
 * Nur das, was die Seite wirklich neu braucht. Alles Übrige steht schon da:
 * `.kennzahlen`, `.karte`, `.karte-dringend`, `.tabellenrahmen`, `.tabelle`,
 * `.abzeichen` mit seinen Zuständen, `.zeile-dringend`, `.dezent`, `.mono`.
 * Eine eigene Farbwelt für diese Seite wäre eine zweite Sprache im Haus.
 */

/* Die Standanzeige im Seitenkopf.
 *
 * Sie ist kein Zierrat: Ein Lagebild, das nicht sagt, wie alt es ist,
 * behauptet live zu sein — und bei ausgefallenem Takt zeigt es minutenlang
 * gelassen alte Zahlen. Der Punkt ist dabei NICHT die Information; die steht
 * daneben im Text. Farbe allein trägt hier nichts (WCAG), wie bei den
 * Abzeichen auch.
 */
.liveview-stand {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--farbe-text-3);
  white-space: nowrap;
}

.liveview-stand .punkt {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--farbe-ok); flex: none;
}

.liveview-stand.ist-getrennt { color: var(--farbe-fehler); font-weight: 600; }
.liveview-stand.ist-getrennt .punkt { background: var(--farbe-fehler); }

/* Ein Hindernis: Mandant, darunter die Gründe.
 *
 * Mehrere Mandanten in einer Karte, durch eine Linie getrennt statt durch je
 * eine eigene Karte — drei rote Karten nebeneinander heben sich gegenseitig
 * auf, und die Reihenfolge (das Dringendste oben) wäre nicht mehr zu sehen.
 */
.hindernis + .hindernis {
  margin-top: var(--abstand-4);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie);
}

.hindernis h3 { font-size: 1rem; margin: 0 0 .4rem; font-weight: 600; }

.hindernis ul.gruende { margin: 0; padding: 0; list-style: none; }

.hindernis ul.gruende li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .2rem 0; line-height: 1.5;
}

/* Die Zahl im Abzeichen soll in einer Spalte stehen, damit die Sätze
 * daneben auf einer Linie beginnen. */
.hindernis ul.gruende .abzeichen {
  flex: none; min-width: 4.5rem; justify-content: center;
}

/* Die gehaltenen Anrufe in der Agentenzeile. */
ul.gespraeche { margin: 0; padding: 0; list-style: none; }
ul.gespraeche li { line-height: 1.45; }
ul.gespraeche li + li {
  margin-top: .4rem; padding-top: .4rem;
  border-top: 1px dashed var(--farbe-linie);
}

@media (max-width: 720px) {
  .liveview-stand { white-space: normal; }
  .hindernis ul.gruende li { flex-direction: column; gap: .15rem; }
  .hindernis ul.gruende .abzeichen { min-width: 0; }
}

/* ------------------------------------------------- Fließbild der Liveview
 *
 * Die Zeichnung über den Tabellen. Sie zeigt nichts, was nicht darunter
 * auch steht — sie zeigt es nur so, dass man es ohne Spaltenvergleich
 * sieht: links was wartet, in der Mitte was es aufhält, rechts wer gerade
 * telefoniert und wie weit das Gespräch ist.
 *
 * ZWEI REGELN, DIE DAS GANZE AUSSEHEN BESTIMMEN:
 *
 * Farbe allein trägt nichts. Jeder Zustand steht zusätzlich als Wort da —
 * „stillgelegt", „zu bei 2 Mandanten". Der grüne Punkt und die gestrichelte
 * Bahn sind die schnelle Lesart, nicht die einzige (WCAG 1.4.1, wie bei den
 * Abzeichen).
 *
 * Bewegung bedeutet etwas. Der Zulauf fließt nur, wenn Arbeit hinausgehen
 * KANN; der Herzpunkt pocht nur, solange sich der Agent meldet. Eine
 * Dauer-Animation wäre ein Betriebsgeräusch, das Betrieb behauptet.
 *
 * Keine eigene Farbwelt: alles aus den Tokens, dieselben Bedeutungen wie in
 * den Abzeichen (ok = läuft, fehler = hängt, warn = wartet auf jemanden).
 */

.liveview-bild { padding: var(--abstand-3) var(--abstand-3) var(--abstand-2); }

/* Schmale Bildschirme: lieber waagerecht rollen als Schrift auf vier Pixel
 * schrumpfen. Die Tabellen darunter bleiben die vollständige Auskunft. */
.liveview-bild { overflow-x: auto; }

.fliessbild { display: block; width: 100%; min-width: 860px; height: auto; }

.fb-rahmen { fill: var(--farbe-flaeche-2); stroke: var(--farbe-linie); }

.fb-titel {
  font: 600 10.5px/1 var(--font);
  fill: var(--farbe-text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.fb-mark { font: 400 11.5px/1 var(--font); fill: var(--farbe-text-2); }
.fb-fein { font: 400 9.5px/1 var(--font);  fill: var(--farbe-text-3); }
.fb-name { font: 600 12.5px/1 var(--font); fill: var(--farbe-text); }
.fb-lage { font: 400 9.5px/1 var(--font);  fill: var(--farbe-text-3); }
.fb-leer { font: 400 11.5px/1 var(--font); fill: var(--farbe-text-3); }

.fb-zahl {
  font: 700 13px/1 var(--font-mono);
  fill: var(--farbe-text);
}

/* Eine Null ist keine Zahl, die man lesen muss. Sie bleibt stehen (ihr
 * Fehlen wäre eine Lücke, und eine Lücke liest sich als Störung), tritt
 * aber zurück. */
.fb-zahl.ist-null { font-weight: 400; fill: var(--farbe-text-3); }

.fb-balken { transition: width .5s ease; }
.fb-balken.fb-freigabe { fill: var(--farbe-warn); }
.fb-balken.fb-faellig  { fill: var(--farbe-aktion); }
.fb-balken.fb-ruht     { fill: var(--farbe-linie-stark); }
.fb-balken.fb-mensch   { fill: var(--farbe-text-3); }

/* --- Die Tore ----------------------------------------------------------- */

.fb-tor .fb-punkt { fill: var(--farbe-ok); stroke: none; }
.fb-tor.ist-zu .fb-punkt { fill: var(--farbe-fehler); }
.fb-tor.ist-zu .fb-mark  { fill: var(--farbe-fehler); font-weight: 600; }
.fb-tor.ist-zu .fb-fein  { fill: var(--farbe-fehler); }

.fb-tick    { stroke: var(--farbe-linie); stroke-width: 1; }
.fb-schiene { stroke: var(--farbe-linie); stroke-width: 1; }
.fb-stich   { stroke: var(--farbe-linie); stroke-width: 1; }

/* Der Zulauf. Gestrichelt und still, solange nichts hinausgehen kann —
 * und nur dann in Bewegung, wenn Arbeit fällig ist, alle Schranken offen
 * stehen und jemand bereit ist, sie zu holen. */
.fb-strom {
  fill: none;
  stroke: var(--farbe-linie-stark);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.fb-zulauf.fliesst .fb-strom {
  stroke: var(--farbe-aktion);
  animation: fb-strom 1.1s linear infinite;
}

@keyframes fb-strom { to { stroke-dashoffset: -20; } }

/* --- Die Agentenbahnen -------------------------------------------------- */

.fb-herz { fill: var(--farbe-linie-stark); }
.fb-spur { stroke: var(--farbe-linie); stroke-width: 2; }

.fb-bahn.ist-bereit .fb-herz { fill: var(--farbe-ok); }
.fb-bahn.ist-still  .fb-herz { fill: var(--farbe-fehler); }
.fb-bahn.ist-nie    .fb-herz { fill: var(--farbe-warn); }
.fb-bahn.ist-aus    .fb-herz { fill: var(--farbe-text-3); }

/* Wer nicht abholt, hat keine durchgezogene Bahn. */
.fb-bahn.ist-aus   .fb-spur,
.fb-bahn.ist-still .fb-spur,
.fb-bahn.ist-nie   .fb-spur { stroke-dasharray: 4 5; }

.fb-bahn.ist-aus   .fb-name,
.fb-bahn.ist-aus   .fb-lage { fill: var(--farbe-text-3); }
.fb-bahn.ist-still .fb-lage { fill: var(--farbe-fehler); font-weight: 600; }

/* Das Pochen. Es sagt genau eine Sache: Dieser Agent hat sich innerhalb
 * der letzten 45 Sekunden gemeldet. Bleibt es aus, steht daneben, seit wann
 * er still ist — die Bewegung ersetzt die Angabe nicht. */
.fb-bahn.atmet .fb-herz { animation: fb-puls 2.4s ease-in-out infinite; }

@keyframes fb-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

.fb-platz { fill: var(--farbe-flaeche); stroke: var(--farbe-linie-stark); }
.fb-platz.ist-belegt { fill: var(--farbe-aktion); stroke: var(--farbe-aktion); }

/* --- Die Gespräche ------------------------------------------------------ */
/*
 * Eine Figur je laufendes Gespräch, auf der Station, die der Agent gemeldet
 * hat. Das Gleiten von Station zu Station ist die eigentliche Auskunft des
 * Bildes: Wer zweimal hinsieht, weiß, ob es vorangeht.
 *
 * Die Dauer ist mit Bedacht lang (.7 s). Der Takt ist fünf Sekunden; eine
 * schnelle Bewegung sähe aus wie ein Sprung und wäre genau dann vorbei,
 * wenn der Blick ankommt.
 */
.fb-figur {
  transition: transform .7s cubic-bezier(.33, 1, .68, 1), opacity .35s ease;
}

.fb-figur rect {
  fill: var(--farbe-aktion-bg);
  stroke: var(--farbe-aktion);
  stroke-width: 1;
}

/* 9,5 statt 10 Pixel: Damit passen zwei Zeichen mehr in die Figur, und bei
 * deutschen Namen entscheiden zwei Zeichen oft darüber, ob der Nachname noch
 * anfängt. Der ganze Name steht im Zeigetext und in der Tabelle darunter. */
.fb-figur text { font: 600 9.5px/1 var(--font); fill: var(--farbe-aktion-dz); }

.fb-figur.kommt, .fb-figur.geht { opacity: 0; }

/* Die Reservierung ist abgelaufen: Der Anruf steht auf `dialing`, aber
 * niemand spricht mehr. Das ist der Zustand, für den die Liveview gebaut
 * wurde — er muss ins Auge fallen. */
.fb-figur.ist-verwaist rect {
  fill: var(--farbe-fehler-bg);
  stroke: var(--farbe-fehler);
}

.fb-figur.ist-verwaist text { fill: var(--farbe-fehler); }

/* Kein Lebenszeichen seit über zwei Minuten — vier verpasste Herzschläge.
 * Die Reservierung gilt noch, das Gespräch steht trotzdem. */
.fb-figur.ist-stumm rect { stroke-dasharray: 3 3; }

/* Stufe JETZT: dieser Anruf geht an Anrufzeitfenster und Feiertag vorbei. */
.fb-figur.ist-sofort rect {
  stroke: var(--farbe-dringend);
  stroke-width: 2;
}

/* --- Getrennt ----------------------------------------------------------- */
/*
 * Der Takt bekommt keine Antwort mehr. Die Zahlen bleiben stehen — eine
 * geleerte Zeichnung sähe aus wie „nichts los", und das ist eine andere
 * Lage als „ich weiß gerade nichts". Aber sie tritt zurück und hört auf,
 * sich zu bewegen: Bewegung hieße hier, Aktualität zu behaupten.
 */
.liveview-bild.ist-getrennt .fliessbild { opacity: .5; }
.liveview-bild.ist-getrennt .fb-strom,
.liveview-bild.ist-getrennt .fb-herz { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .fb-figur { transition: none; }
  .fb-zulauf.fliesst .fb-strom,
  .fb-bahn.atmet .fb-herz { animation: none; }
  .fb-balken { transition: none; }
}

@media print {
  .liveview-bild { overflow: visible; }
  .fliessbild { min-width: 0; }
}

/* ------------------------------------------- Agentenschnittstelle (Betreiber)
 *
 * Eine Leseseite INNERHALB des Portals — anders als /callcenter, das sein
 * eigenes Gerüst hat. Sie borgt sich dessen Bausteine (`.doku-blatt`,
 * `.doku-code`, `.doku-verb`, `.doku-inhalt`, `.doku-regeln`) und nimmt ihnen
 * nur den seitlichen Rand: Den setzt hier schon die Shell, und zweimal
 * gesetzt stünde die Spalte nicht mehr unter ihrer eigenen Überschrift.
 */

/* VOLLE BREITE, anders als /callcenter (dort 60rem).
 *
 * Dort ist es ein Blatt zum Lesen, hier sind es siebzehn Tabellen — und eine
 * Tabelle mit drei Textspalten in einer 60-rem-Spalte bricht in jeder Zelle
 * viermal um. Für den Fließtext dieser Seite ist die volle Breite der
 * schlechtere Kompromiss, für ihre Tabellen der klar bessere, und die
 * Tabellen sind der Zweck. */
.schnitt {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Den Fließtext trotzdem nicht über die ganze Breite laufen lassen: Eine
 * Zeile mit 200 Zeichen findet beim Umbruch den Anfang der nächsten nicht
 * mehr. Nur Absätze und Aufzählungen — Tabellen und Überschriften behalten
 * die volle Breite. */
.schnitt > p,
.schnitt > ul,
.schnitt > ol,
.schnitt > .hinweis,
.schnitt > pre { max-width: 68rem; }

/* Die Tabellen dieser Seite sind Lesetabellen, nicht Datenlisten: viel Text
 * in den Zellen, und die erste Spalte ist eine Beschriftung. Deshalb oben
 * ausgerichtet statt mittig — bei vier Zeilen Text in der Nachbarzelle steht
 * ein mittig gesetztes Feld irgendwo im Nichts. */
.schnitt .tabelle td { vertical-align: top; }
.schnitt .tabelle td, .schnitt .tabelle th { line-height: 1.5; }

/* Die Schrittfolge „Was der Agent damit tut". Eigene Nummernkreise, damit
 * die Reihenfolge auch dann sichtbar bleibt, wenn ein Schritt zwei Absätze
 * braucht. */
.schnitt-schritte {
  list-style: none;
  margin: var(--abstand-4) 0;
  padding: 0;
  counter-reset: schritt;
}

.schnitt-schritte li {
  position: relative;
  counter-increment: schritt;
  padding: 0 0 var(--abstand-4) var(--abstand-6);
  border-left: 2px solid var(--farbe-linie);
  margin-left: 11px;
}

.schnitt-schritte li:last-child { border-left-color: transparent; padding-bottom: 0; }

.schnitt-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: -12px; top: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--farbe-aktion);
  color: #fff;
  font: 700 12px/1 var(--font);
}

.schnitt-schritte li p { margin: 2px 0 0; color: var(--farbe-text-2); }

@media print {
  .schnitt .tabellenrahmen { overflow: visible; }
  .schnitt h2 { break-after: avoid; }
  .schnitt .tabelle tr { break-inside: avoid; }
}

/* ------------------------------------------------------------------ *
 * Agentenverwaltung (Betreiber) — /betreiber/agenten
 *
 * Zwei Klassen, nicht mehr. Die Seite besteht ansonsten aus Karten,
 * Tabellen und Formularen, die es alle schon gibt; neue Klassen dafür
 * wären eine zweite Fassung derselben Gestaltung.
 * ------------------------------------------------------------------ */

/* Die Betriebe eines Pools. Je Zeile ein Name und ein Knopf zum Lösen —
   also eine Liste, in der etwas rechts steht, und keine Tabelle: Eine
   Tabelle mit einer Spalte ist eine Liste mit Rahmen. */
.liste-knapp { list-style: none; margin: 0 0 var(--abstand-3); padding: 0; }

.liste-knapp li {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  padding: 7px 0;
  border-bottom: 1px solid var(--farbe-linie);
}

.liste-knapp li:last-child { border-bottom: 0; }

/* Der Knopf rückt nach rechts, egal wie lang der Name ist. `margin-left:
   auto` statt `justify-content: space-between`, damit die Abzeichen neben
   dem Namen bleiben und nicht mitwandern. */
.inline-formular { margin-left: auto; display: inline; }