/* ============================================================
   flow.css — Kahf OS Flow: die Oberfläche des ganzen Programms
   ============================================================
   Wird NACH style.css geladen und stellt das gesamte Werkzeug um:
   dunkle, ruhige Flächen, große Schrift, große Flächen zum Antippen.

   Leitgedanke (Vorgabe der Geschäftsführung, 20.10.2026):
   „Ein Sechsjähriger muss es im stressigen Alltag sofort verstehen."
   Daraus folgen vier Regeln, die hier technisch durchgesetzt werden:
     1. Nichts unter 17 px, Fließtext 18 px.
     2. Alles Antippbare mindestens 48 px hoch — auch auf dem Handy.
     3. Je Bildschirm eine Hauptsache; alles andere tritt zurück.
     4. Immer sichtbar: wo bin ich, was ist der nächste Schritt, wo ist Hilfe.

   Umgesetzt über die vorhandenen Farbvariablen aus style.css — deshalb
   wirkt die Umstellung auf jedem Bildschirm, ohne jede Ansicht anzufassen.
   Die Druckansichten bleiben hell (eigene Richtlinie, ADR-004).
   ============================================================ */

:root {
  /* Farben stehen in farben.css (Hell und Dunkel); hier nur Maße */
  --flow-rund: 18px;
}

/* ---------- Fläche ---------- */
body {
  font-size: 18px;
  line-height: 1.5;
  background:
    radial-gradient(1200px 760px at 12% -5%, color-mix(in srgb, var(--akzent) 10%, transparent), transparent 60%),
    radial-gradient(1000px 680px at 92% 8%, color-mix(in srgb, var(--lila) 9%, transparent), transparent 60%),
    radial-gradient(900px 600px at 60% 100%, color-mix(in srgb, var(--blau) 8%, transparent), transparent 60%),
    var(--flow-tief);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Kopfleiste ---------- */
#kopfleiste {
  background: color-mix(in srgb, var(--flaeche) 82%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rand);
  box-shadow: none;
}
.kopf-innen { padding: .7rem 1rem; gap: .9rem; }
.logo { font-size: 1.15rem; letter-spacing: -.01em; }
#hauptmenu { gap: .25rem; }
#hauptmenu a {
  color: var(--flow-leise);
  font-size: .97rem;
  padding: .62rem .85rem;
  border-radius: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background .12s ease, color .12s ease;
}
#hauptmenu a:hover { background: color-mix(in srgb, var(--vorder) 7%, transparent); color: var(--text); }
#hauptmenu a.aktiv {
  background: linear-gradient(145deg, var(--akzent), var(--akzent-tief));
  color: var(--auf-akzent);
  font-weight: 700;
  box-shadow: 0 0 20px color-mix(in srgb, var(--akzent) 30%, transparent);
}
.klein-btn {
  background: color-mix(in srgb, var(--vorder) 8%, transparent);
  border: 1px solid var(--rand);
  border-radius: 11px;
  padding: .5rem .85rem;
  font-size: .9rem;
  min-height: 42px;
}
.klein-btn:hover { background: color-mix(in srgb, var(--vorder) 16%, transparent); }
.kopf-rechts { font-size: .9rem; color: var(--flow-leise); }

/* ---------- Inhalt ---------- */
#inhalt { padding: 1.3rem 1rem 7rem; }
h1 { color: var(--text); font-size: 1.85rem; letter-spacing: -.02em; margin: .5rem 0 1rem; }
h2 { color: var(--text); font-size: 1.28rem; margin: 1.4rem 0 .6rem; }
h3 { color: var(--text); font-size: 1.08rem; }

.karte {
  background: var(--flow-karte);
  border: 1px solid var(--rand);
  border-radius: var(--flow-rund);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--flow-glanz);
  backdrop-filter: blur(12px);
}
.karten-reihe { gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* ---------- Knöpfe: groß genug für einen Daumen im Stress ---------- */
.btn {
  border-radius: 13px;
  padding: .85rem 1.4rem;
  font-size: 1.02rem;
  font-weight: 650;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: linear-gradient(145deg, var(--akzent), var(--akzent-tief));
  color: var(--auf-akzent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--akzent) 26%, transparent);
  transition: transform .1s ease, box-shadow .12s ease, filter .12s ease;
}
/* hidden muss gegen display: inline-flex gewinnen (Stempeln: nur das Ergebnis bleibt, Endkontrolle 10.11.2026) */
.btn[hidden] { display: none; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 30px color-mix(in srgb, var(--akzent) 40%, transparent); filter: none; }
.btn:active { transform: translateY(0); }
.btn.primaer { background: linear-gradient(145deg, var(--blau), var(--primaer)); color: var(--auf-primaer); box-shadow: none; }
.btn.leise {
  background: color-mix(in srgb, var(--vorder) 7%, transparent);
  color: var(--text);
  border: 1px solid var(--rand);
  box-shadow: none;
}
.btn.leise:hover { background: color-mix(in srgb, var(--vorder) 14%, transparent); }
.btn.gefahr { background: linear-gradient(145deg, var(--rot), var(--rot-tief)); color: var(--auf-rot); box-shadow: none; }
.btn.gruen { background: linear-gradient(145deg, var(--gruen), var(--gruen-tief)); color: var(--auf-akzent); }
.btn.gross { font-size: 1.2rem; padding: 1.1rem 1.8rem; min-height: 62px; }
.btn-reihe { gap: .7rem; margin: 1rem 0; }

/* ---------- Formulare ---------- */
label { color: var(--flow-leise); font-size: .92rem; margin: .9rem 0 .3rem; }
input, select, textarea {
  background: color-mix(in srgb, var(--flaeche) 60%, transparent);
  border: 1.5px solid var(--rand);
  border-radius: 12px;
  color: var(--text);
  font-size: 1.02rem;
  padding: .8rem .9rem;
  min-height: 50px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 16%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--still); }
select option { background: var(--flow-tief); color: var(--text); }
.feld-hinweis { color: var(--flow-leise); font-size: .86rem; }

/* ---------- Tabellen ---------- */
table { background: transparent; font-size: .97rem; }
th {
  background: color-mix(in srgb, var(--flaeche) 96%, transparent);
  color: var(--flow-leise);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .7rem .7rem;
  border-bottom: 1px solid var(--rand);
}
td { border-bottom: 1px solid color-mix(in srgb, var(--linie) 10%, transparent); padding: .7rem; color: var(--text); }
tr:hover td { background: color-mix(in srgb, var(--vorder) 4%, transparent); }

/* ---------- Dialoge ---------- */
#modal-hintergrund { background: color-mix(in srgb, var(--abdunkeln-basis) 70%, transparent); backdrop-filter: blur(6px); }
#modal-box {
  background: color-mix(in srgb, var(--flaeche) 98%, transparent);
  border: 1px solid var(--flow-rand-hell);
  border-radius: 20px;
  color: var(--text);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--schatten) 70%, transparent);
}

/* ---------- Meldungen ---------- */
.meldung {
  border-radius: 14px;
  font-size: 1rem;
  box-shadow: var(--flow-glanz);
}
.meldung.info { background: var(--flaeche); border: 1px solid var(--flow-rand-hell); }
.meldung.erfolg { background: linear-gradient(145deg, var(--gruen), var(--gruen-tief)); }
.meldung.fehler { background: linear-gradient(145deg, var(--rot), var(--rot-tief)); }

.lade-hinweis { color: var(--flow-leise); font-size: 1.05rem; }

/* ---------- Handy: alles eine Spur größer, nichts gedrängt ---------- */
@media (max-width: 720px) {
  body { font-size: 18px; }
  #inhalt { padding: 1rem .8rem 8rem; }
  h1 { font-size: 1.6rem; }
  .kopf-innen { padding: .55rem .7rem; }
  #hauptmenu a { font-size: .95rem; padding: .6rem .7rem; }
  .btn { width: 100%; }
  .btn-reihe .btn { width: auto; flex: 1 1 auto; }
}

/* ---------- Druck bleibt hell ---------- */
@media print {
  body { background: #fff; color: #111; }
  .karte { background: #fff; border-color: #ddd; box-shadow: none; }
}

/* ============================================================
   Handbuch im Flow — groß, ruhig, eine Sache je Bildschirm
   ============================================================ */

/* ---------- Schaufenster: das Netz zieht hinter der Suche seine Bahn ---------- */
.hb-schaufenster {
  position: relative; border-radius: 22px; overflow: hidden; margin-bottom: 1.4rem;
  min-height: 330px; display: flex; align-items: center;
  border: 1px solid var(--rand);
  background: radial-gradient(900px 480px at 20% 10%, color-mix(in srgb, var(--akzent) 14%, transparent), transparent 62%),
              radial-gradient(760px 420px at 85% 85%, color-mix(in srgb, var(--lila) 13%, transparent), transparent 62%),
              linear-gradient(170deg, var(--flow-tief) 0%, var(--flow-tief) 100%);
}
.hb-schaufenster-flaeche { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.hb-schaufenster-vorne { position: relative; z-index: 2; width: 100%; padding: 2.2rem 1.6rem; pointer-events: none; }
.hb-schaufenster-vorne .hb-suche-halter { pointer-events: auto; }
.hb-schaufenster-knopf {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; cursor: pointer;
  background: color-mix(in srgb, var(--flaeche) 80%, transparent); border: 1px solid var(--flow-rand-hell); color: var(--text);
  border-radius: 14px; padding: .6rem 1rem; font-size: .92rem; min-height: 46px;
}
.hb-schaufenster-knopf:hover { background: color-mix(in srgb, var(--vorder) 12%, transparent); color: var(--auf-primaer); }

/* ---------- Die große Suche ---------- */
.hb-suche-halter { position: relative; max-width: 780px; }
.hb-suche-zeile {
  display: flex; align-items: center; gap: .8rem; background: color-mix(in srgb, var(--vorder) 96%, transparent);
  border-radius: 18px; padding: .3rem 1.2rem; box-shadow: 0 18px 50px color-mix(in srgb, var(--schatten) 40%, transparent);
}
.hb-lupe { font-size: 1.8rem; color: var(--still); }
.hb-suche-gross {
  flex: 1; border: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 1.5rem !important; padding: .9rem 0 !important; color: var(--text) !important; min-height: 62px;
}
.hb-suche-gross::placeholder { color: var(--text-leise); }
.hb-treffer {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 30;
  background: color-mix(in srgb, var(--flaeche) 98%, transparent); border: 1px solid var(--flow-rand-hell); border-radius: 16px;
  overflow: hidden; max-height: 58vh; overflow-y: auto; box-shadow: 0 24px 70px color-mix(in srgb, var(--schatten) 60%, transparent);
}
.hb-treffer-zeile {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; border: 0;
  background: none; padding: 1rem 1.2rem; cursor: pointer; color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--linie) 10%, transparent); font-size: 1.05rem; min-height: 60px;
}
.hb-treffer-zeile:hover { background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.hb-treffer-titel { flex: 1; }
.hb-treffer-leer { padding: 1.2rem; color: var(--flow-leise); display: grid; gap: .8rem; }

/* ---------- Aufgaben und Kacheln ---------- */
.hb-mikro { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--flow-leise); font-weight: 800; }
.hb-abstand { margin: 1.6rem 0 .7rem; }
.hb-aufgaben { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.hb-aufgabe {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; cursor: pointer;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rot) 16%, transparent), color-mix(in srgb, var(--rot) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--rot) 40%, transparent); border-radius: 16px; padding: 1.1rem 1.2rem;
  color: var(--text); min-height: 76px;
}
.hb-aufgabe:hover { background: color-mix(in srgb, var(--rot) 22%, transparent); }
.hb-aufgabe-zeichen {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--rot);
  color: var(--auf-rot); font-weight: 900; font-size: 1.4rem; display: grid; place-items: center;
}
.hb-aufgabe-titel { display: block; font-size: 1.15rem; font-weight: 650; }

.hb-kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hb-kachel {
  display: block; text-align: left; cursor: pointer; color: var(--text);
  background: var(--flow-karte); border: 1px solid var(--rand); border-top: 4px solid var(--akzent);
  border-radius: 18px; padding: 1.2rem; min-height: 150px;
  box-shadow: var(--flow-glanz); transition: transform .12s ease, box-shadow .12s ease;
}
.hb-kachel:hover { transform: translateY(-3px); box-shadow: 0 22px 60px color-mix(in srgb, var(--schatten) 50%, transparent); }
.hb-kachel-nr { display: block; font-family: ui-monospace, Menlo, monospace; font-weight: 800;
  color: var(--akzent-text); font-size: 1.05rem; margin-bottom: .4rem; }
.hb-kachel-titel { display: block; font-size: 1.16rem; font-weight: 650; line-height: 1.3; }
.hb-kachel-teil { display: block; color: var(--flow-leise); font-size: .88rem; margin-top: .5rem; }
.hb-werkzeug-kachel { border-top-color: var(--akzent); text-align: center; }
.hb-werkzeug-ik { display: block; font-size: 2.6rem; margin-bottom: .5rem; }
.hb-nebenwege { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }

/* ---------- Kapitelseite ---------- */
.hb-seitenkopf { display: flex; align-items: flex-start; gap: 1rem; margin: .3rem 0 1.2rem; }
.hb-zurueck { font-size: 1.5rem; min-width: 56px; min-height: 56px; padding: 0; }
.hb-gross { font-size: 1.9rem; margin: .1rem 0 0; line-height: 1.18; }
.hb-blatt { display: grid; gap: 1.1rem; max-width: 900px; }
.hb-wichtigste {
  background: linear-gradient(135deg, color-mix(in srgb, var(--akzent) 15%, transparent), color-mix(in srgb, var(--blau) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent); border-left: 5px solid var(--akzent);
  border-radius: 6px 18px 18px 6px; padding: 1.3rem 1.4rem; font-size: 1.12rem; line-height: 1.6;
}
.hb-wichtigste p { margin: .4rem 0 0; }
.hb-bild-halter { position: relative; background: var(--papier); border-radius: 18px; padding: 1rem;
  border: 1px solid var(--rand); }
.hb-bild svg { width: 100%; height: auto; display: block; }
.hb-bild-knopf { position: absolute; right: 12px; top: 12px; min-height: 44px; }
.hb-voll-huelle { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--abdunkeln-basis) 96%, transparent);
  padding: 1rem; overflow: auto; cursor: zoom-out; }
.hb-voll-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--text); margin-bottom: 1rem; font-size: 1.1rem; }
.hb-bild-voll { background: var(--papier); border-radius: 14px; padding: 1.2rem; }
.hb-bild-voll svg { width: 100%; height: auto; }

.hb-abschnitt h2 { font-size: 1.3rem; margin: 0 0 .7rem; }
.hb-schritte ol { padding-left: 0; list-style: none; counter-reset: s; margin: 0; }
.hb-schritte ol li { counter-increment: s; display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 0; border-top: 1px solid color-mix(in srgb, var(--linie) 12%, transparent); font-size: 1.08rem; line-height: 1.55; }
.hb-schritte ol li:first-child { border-top: 0; }
.hb-schritte ol li::before {
  content: counter(s); flex: 0 0 42px; height: 42px; border-radius: 50%;
  background: color-mix(in srgb, var(--akzent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent); color: var(--akzent-text);
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 800;
}
.hb-schritte ul { padding-left: 1.4rem; }

.hb-haken-liste { display: grid; gap: .6rem; }
.hb-haken-zeile {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--vorder) 5%, transparent); border: 1px solid var(--rand); border-radius: 14px;
  padding: .9rem 1.1rem; color: var(--text); font-size: 1.06rem; min-height: 68px;
}
.hb-haken-zeile:hover { background: color-mix(in srgb, var(--vorder) 10%, transparent); }
.hb-haken-zeile.an { background: color-mix(in srgb, var(--gruen) 14%, transparent); border-color: color-mix(in srgb, var(--gruen) 45%, transparent); }
.hb-haken-kasten {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; border: 2px solid var(--still); display: grid; place-items: center; color: transparent; font-size: 1.2rem;
}
.hb-haken-zeile.an .hb-haken-kasten { background: var(--gruen); border-color: var(--gruen); color: var(--auf-akzent); }
.hb-haken-zeile.an .hb-haken-text { text-decoration: line-through; color: var(--flow-leise); }
.hb-stand { color: var(--flow-leise); font-size: 1rem; align-self: center; }

.hb-unsicher {
  background: color-mix(in srgb, var(--orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
  border-left: 5px solid var(--orange); border-radius: 6px 18px 18px 6px; padding: 1.2rem 1.3rem;
  font-size: 1.08rem;
}
/* Kästen vom Kapitelanfang (Handbuch 1.2, ADR-070) */
.hb-kasten { border-radius: 6px 18px 18px 6px; padding: 1.1rem 1.3rem; font-size: 1.06rem; line-height: 1.55; }
.hb-kasten .hb-liste { margin: .4rem 0 0; }
.hb-kasten-gilt { background: color-mix(in srgb, var(--gruen) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gruen) 40%, transparent);
  border-left: 5px solid var(--gruen); }
.hb-kasten-offen { background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-left: 5px solid var(--gold); }
.hb-kasten-info { border: 1px solid var(--rand); border-left: 5px solid var(--akzent); }
.hb-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; border-radius: 16px; padding: 1.1rem 1.2rem; }
.hb-band.pflicht { background: color-mix(in srgb, var(--rot) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rot) 45%, transparent); }
.hb-band.ok { background: color-mix(in srgb, var(--gruen) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gruen) 40%, transparent); }
.hb-mehr { width: 100%; }
.hb-rest { display: grid; gap: 1.1rem; }
.hb-werkzeuge { margin-top: .6rem; }

.hb-liste { display: grid; gap: .5rem; }
.hb-listen-zeile {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; cursor: pointer;
  background: var(--flow-karte); border: 1px solid var(--rand); border-radius: 14px;
  padding: .9rem 1.1rem; color: var(--text); min-height: 68px;
}
.hb-listen-zeile:hover { background: var(--flow-karte-hell); }
.hb-listen-titel { display: block; font-size: 1.06rem; }
.hb-chip.gross { padding: .7rem 1.1rem; font-size: 1rem; min-height: 50px; }

/* ---------- Kapitel als Fenster ---------- */
.hb-fenster-huelle { position: fixed; inset: 0; z-index: 80; display: flex; }
.hb-fenster-schleier { position: absolute; inset: 0; background: color-mix(in srgb, var(--abdunkeln-basis) 70%, transparent); backdrop-filter: blur(5px); }
.hb-fenster {
  position: relative; margin: auto; width: min(840px, 94vw); max-height: 92vh; display: flex;
  flex-direction: column; background: color-mix(in srgb, var(--flaeche) 99%, transparent); border: 1px solid var(--flow-rand-hell);
  border-radius: 22px; box-shadow: 0 30px 90px color-mix(in srgb, var(--schatten) 70%, transparent); overflow: hidden;
}
.hb-fenster-kopf { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--rand); }
.hb-fenster-titel { flex: 1; font-size: 1.1rem; font-weight: 650; }
.hb-fenster-koerper { padding: 1.2rem; overflow-y: auto; display: grid; gap: 1rem; }
.hb-fenster-fuss { display: flex; gap: .7rem; padding: 1rem 1.2rem; border-top: 1px solid var(--rand); }
.hb-rund { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--vorder) 7%, transparent); color: var(--text); font-size: 1.1rem; cursor: pointer; flex: 0 0 44px; }
.hb-rund:hover { background: color-mix(in srgb, var(--vorder) 16%, transparent); }

/* ---------- Hilfe-Knopf ---------- */
.hb-hilfe-knopf {
  position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 66px; height: 66px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(145deg, var(--akzent), var(--akzent-tief)); color: var(--auf-akzent);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--akzent) 45%, transparent); display: grid; place-items: center;
}
.hb-hilfe-knopf:hover { transform: scale(1.06); }
.hb-hilfe-zeichen { font-size: 2rem; font-weight: 900; line-height: 1; }
.hb-hilfe { display: grid; gap: .9rem; }
.hb-video-reihe { display: grid; gap: .6rem; margin: .5rem 0 1rem; }
.hb-video-kachel {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand); border-radius: 14px;
  padding: .9rem 1rem; color: var(--text); min-height: 72px;
}
.hb-video-kachel:hover { background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.hb-video-play {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--akzent);
  color: var(--auf-akzent); display: grid; place-items: center; font-size: 1.2rem;
}
.hb-video-titel { display: block; font-size: 1.05rem; font-weight: 600; }
.hb-spieler { width: 100%; border-radius: 14px; background: var(--primaer); margin: .6rem 0; }
details summary { cursor: pointer; color: var(--flow-leise); padding: .6rem 0; font-size: .95rem; }

/* ---------- Netz in groß ---------- */
.hb-netz { position: relative; height: min(74vh, 720px); border-radius: 20px; overflow: hidden;
  border: 1px solid var(--rand);
  background: radial-gradient(900px 480px at 20% 10%, color-mix(in srgb, var(--akzent) 14%, transparent), transparent 62%),
              linear-gradient(170deg, var(--flow-tief) 0%, var(--flow-tief) 100%); }
.hb-netz-flaeche { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.hb-netz-flaeche.zieht { cursor: grabbing; }
.hb-tipp { position: absolute; z-index: 5; pointer-events: none; max-width: 320px;
  background: color-mix(in srgb, var(--flaeche) 96%, transparent); border: 1px solid var(--flow-rand-hell); border-radius: 12px;
  padding: .7rem .9rem; color: var(--text); font-size: .95rem; }
.hb-legende { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; flex-wrap: wrap; gap: .4rem; }
.hb-legende-knopf { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  background: color-mix(in srgb, var(--flaeche) 82%, transparent); border: 1px solid var(--rand); color: var(--text);
  border-radius: 20px; padding: .45rem .9rem; font-size: .88rem; min-height: 42px; }
.hb-legende-punkt { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.hb-stiller { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 3;
  color: var(--flow-leise); font-size: .85rem; pointer-events: none; }

@media (max-width: 720px) {
  .hb-schaufenster { min-height: 260px; }
  .hb-schaufenster-vorne { padding: 1.4rem 1rem; }
  .hb-suche-gross { font-size: 1.2rem !important; }
  .hb-gross { font-size: 1.5rem; }
  .hb-netz { height: 62vh; }
  .hb-hilfe-knopf { right: 14px; bottom: 14px; width: 60px; height: 60px; }
  .hb-fenster { width: 100%; max-height: 100vh; border-radius: 0; }
}

/* ---------- Zuständigkeit auf der Schichtkarte ---------- */
.zustaendig {
  display: inline-block; margin: .25rem .3rem 0 0; padding: .15rem .55rem;
  background: color-mix(in srgb, var(--akzent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
  border-radius: 20px; font-size: .78rem; color: var(--akzent-text); white-space: nowrap;
}

/* ============================================================
 * Kapitel lesen — Alltag und Nachschlagewerk sind getrennt
 * ============================================================
 * Der Alltagsbildschirm zeigt nur, was man tut: Wichtigstes, Bild,
 * Schritte, Abhaken. Jeder Schritt ist EINE Zeile. Der ganze Text
 * liegt hinter dem Knopf „Nachschlagen" — er ist Wissensspeicher.
 * ============================================================ */

/* --- Schritte: eine Zeile je Schritt --- */
ol.hb-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hb-schritt {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
  background: color-mix(in srgb, var(--akzent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--akzent) 16%, transparent);
  border-radius: 14px; padding: 14px 16px;
}
.hb-schritt-nr {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--akzent); color: var(--auf-akzent);
  font-weight: 700; font-size: 1.05rem;
}
.hb-schritt-text { min-width: 0; }
.hb-schritt-kopf { font-size: 1.08rem; line-height: 1.45; }
.hb-schritt-mehr {
  margin-top: 8px; padding-top: 8px; line-height: 1.55;
  border-top: 1px solid color-mix(in srgb, var(--vorder) 9%, transparent);
  color: var(--text-leise, var(--text-leise));
}
.hb-mini {
  margin-top: 6px; background: none; border: 0; padding: 4px 0;
  color: var(--akzent-text); font: inherit; font-size: .9rem;
  text-decoration: underline; cursor: pointer; min-height: 32px;
}

/* --- Der eine Knopf zum Nachschlagen --- */
.hb-nachschlagen {
  width: 100%; margin-top: 10px;
  display: grid; grid-template-columns: 34px 1fr 18px; gap: 14px; align-items: center;
  text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--vorder) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--vorder) 18%, transparent);
  border-radius: 16px; padding: 16px 18px;
  color: inherit; font: inherit; min-height: 64px;
}
.hb-nachschlagen:hover { background: color-mix(in srgb, var(--vorder) 7%, transparent); border-color: var(--akzent); }
.hb-nachschlagen-zeichen { font-size: 1.5rem; }
.hb-nachschlagen-pfeil { font-size: 1.6rem; opacity: .5; }
.hb-nachschlagen-text b { font-size: 1.05rem; }

/* --- Die Nachschlage-Ansicht: eigene helle Leseseite, eine Spalte --- */
.hb-voll-lesen {
  position: fixed; inset: 0; z-index: 90; overflow: auto;
  background: var(--hintergrund); color: var(--text);
  overscroll-behavior: contain;
}
.hb-vt-leiste {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px max(20px, calc((100% - 760px) / 2));
  background: color-mix(in srgb, var(--karte) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rand);
}
.hb-vt-leiste-titel {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-vt-leiste-titel > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.hb-vt-leiste .btn { flex: none; width: auto; min-width: 96px; }
.hb-volltext {
  max-width: 760px; margin: 0 auto; padding: 28px 20px 96px;
  font-size: 1.04rem; line-height: 1.7;
}
.hb-vt-titel { margin: 0 0 20px; }
.hb-vt-titel h1 { font-size: 1.9rem; line-height: 1.2; margin: 10px 0 4px; letter-spacing: -.01em; }
.hb-vt-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.hb-vt-sprung-knopf {
  min-height: 36px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: var(--karte); border: 1px solid var(--rand); color: var(--text); font: inherit; font-size: .92rem;
}
.hb-vt-sprung-knopf:hover { border-color: var(--akzent); color: var(--akzent-text); }
.hb-vt-abschnitt {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 18px;
  padding: 22px 26px; margin: 0 0 16px; scroll-margin-top: 76px;
}
.hb-vt-abschnitt h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.22rem; margin: 0 0 14px;
}
.hb-vt-nr {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: .9rem;
  background: color-mix(in srgb, var(--akzent) 14%, transparent); color: var(--akzent-text);
}
.hb-volltext p { margin: 0 0 14px; }
.hb-volltext .hb-untertitel { font-size: 1.05rem; margin: 18px 0 8px; }
.hb-volltext .hb-liste { margin: 0 0 14px; padding-left: 22px; line-height: 1.7; }
.hb-volltext .hb-liste li { margin-bottom: 7px; }
.hb-volltext .tabellen-halter { border: 1px solid var(--rand); border-radius: 12px; }
.hb-volltext table { font-size: .95rem; border-collapse: collapse; width: 100%; }
.hb-volltext th { text-align: left; background: var(--flow-karte-hell); font-weight: 600; }
.hb-volltext th, .hb-volltext td { padding: 9px 12px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.hb-volltext tr:last-child td { border-bottom: 0; }
.hb-volltext > .hb-vt-abschnitt > :last-child { margin-bottom: 0; }
.hb-vt-liste { display: grid; gap: 8px; }
.hb-vt-zeile {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; min-height: 52px; padding: 10px 14px;
  background: color-mix(in srgb, var(--vorder) 4%, transparent); border: 1px solid color-mix(in srgb, var(--vorder) 10%, transparent);
  border-radius: 12px; color: inherit; font: inherit; cursor: pointer;
}
.hb-vt-zeile:hover { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.hb-vt-zeile.gesperrt { opacity: .45; cursor: default; }
.hb-vt-pfeil { font-size: 1.4rem; opacity: .5; }

@media (max-width: 640px) {
  .hb-volltext { padding: 18px 14px 80px; }
  .hb-vt-abschnitt { padding: 18px 16px; border-radius: 16px; }
  .hb-vt-titel h1 { font-size: 1.5rem; }
  .hb-vt-leiste { padding: 8px 14px; }
  .hb-schritt { grid-template-columns: 32px 1fr; gap: 11px; padding: 12px 13px; }
  .hb-schritt-nr { width: 32px; height: 32px; font-size: .95rem; }
}

/* ============================================================
 * Lesbarkeit im ganzen Programm
 * ============================================================
 * style.css wurde für helle Flächen gebaut: weiße Eingabefelder,
 * weiße Tabellen, weiße Modale, weiße Schrift auf dem Akzent.
 * Auf dunklem Grund verschwindet das. Hier wird jede dieser
 * Stellen nachgezogen — Schrift, Flächen, Ränder, Knöpfe.
 * ============================================================ */

/* Die Farbwerte dieses Abschnitts stehen seit 23.10.2026 in farben.css. */

/* --- Schrift --- */
body, label { color: var(--text); }
.feld-hinweis, .hb-leise, .hb-zaehler, .hb-treffer-leer, .hb-meta, .kal-info,
.schicht-zeit, .hb-check-meta, .hb-erledigt, .hb-pfeil, .hb-lupe, .hb-code-art,
.hb-knoten-name, .hb-mikro { color: var(--text-leise); }
.login-halter .logo-gross { color: var(--text); }
.hilfe { border-bottom-color: var(--text-leise); }

/* --- Eingabefelder --- */
input, select, textarea {
  background: var(--flach); color: var(--text); border-color: var(--rand);
}
input::placeholder, textarea::placeholder { color: var(--platzhalter); }
input:focus, select:focus, textarea:focus {
  border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
}
select option { background: var(--flach); color: var(--text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--akzent); }

/* --- Knöpfe --- */
.btn { background: var(--akzent); color: var(--auf-akzent); }
.btn.primaer { background: var(--flach-hoch); color: var(--text); border: 1px solid var(--flow-rand-hell); }
.btn.gruen { background: var(--gruen); color: var(--auf-akzent); }
.btn.gefahr { background: var(--rot); color: var(--auf-rot); }
.btn.leise {
  background: color-mix(in srgb, var(--vorder) 7%, transparent); color: var(--text);
  border: 1px solid var(--rand);
}
.btn.leise:hover { background: color-mix(in srgb, var(--akzent) 14%, transparent); border-color: var(--akzent); }
.plus-btn { color: var(--text-leise); border-color: var(--rand); }
#hauptmenu a.aktiv { color: var(--auf-akzent); }

/* --- Tabellen --- */
table { background: var(--flach); color: var(--text); }
th { background: var(--flach-hoch); color: var(--text); }
td { border-color: var(--rand); }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--vorder) 2.5%, transparent); }
.hb-zeile:hover td { background: color-mix(in srgb, var(--akzent) 9%, transparent); }

/* --- Modal --- */
#modal-hintergrund { background: color-mix(in srgb, var(--abdunkeln-basis) 74%, transparent); }
#modal-box {
  background: var(--flach-hoch); color: var(--text);
  border: 1px solid var(--flow-rand-hell);
}
#modal-box .numpad button { background: var(--flach-hoch); color: var(--text); }

/* --- Hinweis- und Warnkästen --- */
.warnung-liste li { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--text); }
.warnung-liste li.hart { background: color-mix(in srgb, var(--rot) 16%, transparent); }
.hinweis-box { background: color-mix(in srgb, var(--akzent) 11%, transparent); color: var(--text); }
.hb-h-warn { background: color-mix(in srgb, var(--gold) 16%, transparent); }

/* --- Kalender und Dienstplan --- */
.kal-zelle.orange { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.kal-zelle.rot { background: color-mix(in srgb, var(--rot) 15%, transparent); }
.kal-feiertag { background: color-mix(in srgb, var(--blau) 14%, transparent) !important; }
.tag-spalte { background: var(--flow-karte); border-color: var(--rand); }
.schicht-karte.problem { background: color-mix(in srgb, var(--rot) 15%, transparent); }

/* --- Abzeichen, Ampeln, Meldungen --- */
.ampel, .abzeichen, .quali-mini { color: var(--auf-akzent); }
.ampel.rot, .abzeichen.rot { color: var(--auf-rot); }
.ampel.geschlossen, .abzeichen.grau { background: var(--still); color: var(--text); }
.tag-chip { background: color-mix(in srgb, var(--vorder) 8%, transparent); color: var(--text); }
.meldung { color: var(--auf-akzent); }
.meldung.fehler { color: var(--auf-rot); }
.meldung.info { background: var(--flach-hoch); color: var(--text); }

/* --- Handbuch-Teile, die noch aus style.css stammen --- */
.hb-suche-zeile, .hb-treffer-liste, .hb-falt, .hb-reiter-knopf, .hb-chip {
  background: var(--flach); color: var(--text); border-color: var(--rand);
}
.hb-treffer-zeile { color: var(--text); border-bottom-color: var(--rand); }
.hb-treffer-zeile:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.hb-chip.gesperrt { background: color-mix(in srgb, var(--vorder) 5%, transparent); color: var(--text-leise); }
.hb-chip.gesperrt .hb-chip-nr { color: var(--text-leise); }
.hb-chip.aktiv, .hb-reiter-knopf.aktiv {
  background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent);
}
.hb-chip.aktiv .hb-chip-nr { color: var(--auf-akzent); }
.hb-rolle { background: color-mix(in srgb, var(--blau) 16%, transparent); color: var(--blau-text); }
.hb-verweis { background: color-mix(in srgb, var(--akzent) 18%, transparent); color: var(--akzent-text); }
.hb-verweis:hover { background: var(--akzent); color: var(--auf-akzent); }
.hb-haken { background: var(--flach); border-color: var(--rand); }
.hb-haken[aria-pressed="true"] { color: var(--auf-akzent); }
.hb-check-zeile, .hb-fuss, .zugang { border-top-color: var(--rand); }
.hb-legende-knopf { color: var(--text); }
.hb-legende-knopf:hover { background: var(--akzent); color: var(--auf-akzent); }

/* --- Codes und Schlüssel --- */
.zugang-zeile code, .freischaltcode, .backup-codes, .pin-anzeige {
  background: var(--flach); color: var(--text); border: 1px solid var(--rand);
}

/* --- Auf Papier bleibt alles hell --- */
@media print {
  body, table, td, th, #modal-box, .karte { background: #fff !important; color: #000 !important; }
  th { background: #eceff3 !important; }
}

/* Nachtrag: zwei Kalenderzellen und breite Tabellen */
.kal-zelle.gruen { background: color-mix(in srgb, var(--gruen) 13%, transparent); }
.kal-zelle.geschlossen { background: color-mix(in srgb, var(--vorder) 4%, transparent); color: var(--text-leise); }
.hb-volltext .tabellen-halter { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.hb-volltext table { min-width: 520px; }

/* ============================================================
   Werkstatt (ADR-014) — einwerfen, prüfen, übernehmen
   Große Flächen, wenig Felder: Der Bildschirm fragt nacheinander
   „Was ist neu?" und „Wohin gehört es?", alles andere tritt zurück.
   ============================================================ */

.wk-hinweis { display: flex; gap: .9rem; align-items: flex-start; }
.wk-hinweis-zeichen { font-size: 1.6rem; line-height: 1; }

.wk-wege { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .9rem; }
.wk-weg { flex: 1 1 240px; display: flex; align-items: center; gap: .8rem; min-height: 64px;
  padding: .7rem 1rem; border: 1.5px dashed var(--rand); border-radius: var(--flow-rund);
  background: var(--flow-karte); cursor: pointer; }
.wk-weg:hover, .wk-weg:focus-within { border-color: var(--akzent); background: var(--flow-karte-hell); }
.wk-weg b { display: block; }
.wk-weg-zeichen { font-size: 1.5rem; line-height: 1; }
.wk-datei-eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wk-zeile { display: flex; flex-wrap: wrap; gap: .8rem; }
.wk-zeile > label { flex: 1 1 200px; display: flex; flex-direction: column; gap: .25rem; }

.wk-feld { display: block; margin-top: .9rem; }
.wk-feld > span:first-child { display: block; margin-bottom: .25rem; font-weight: 600; }

.wk-spalten { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(320px, 3fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .wk-spalten { grid-template-columns: 1fr; } }
.wk-roh { position: sticky; top: 1rem; }
.wk-rohtext { white-space: pre-wrap; word-break: break-word; font-size: .95rem; line-height: 1.5;
  background: color-mix(in srgb, var(--schatten) 25%, transparent); border: 1px solid var(--rand); border-radius: 12px;
  padding: .8rem 1rem; max-height: 46vh; overflow: auto; }

.wk-posten { display: flex; align-items: flex-start; gap: .7rem; width: 100%; text-align: left;
  min-height: 56px; padding: .7rem .2rem; background: none; border: 0; border-top: 1px solid var(--rand);
  color: inherit; cursor: pointer; font-size: 1rem; }
.wk-posten:first-of-type { border-top: 0; }
.wk-posten:hover { background: color-mix(in srgb, var(--vorder) 5%, transparent); border-radius: 12px; }
.wk-posten b { display: block; font-weight: 600; }

.wk-punkt + .wk-punkt { border-top: 1px solid var(--rand); }
.wk-korpus { display: none; padding: .2rem .2rem 1rem 2.6rem; }
.wk-korpus.auf { display: block; }

/* Lektion aus der Videopipeline (ADR-023) */
.wk-lektion { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--flow-rund);
  background: color-mix(in srgb, var(--gruen) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gruen) 35%, transparent); }
.wk-lektion b { display: block; font-size: 1.1rem; }
.wk-schema { margin-top: .9rem; }
.wk-schema:empty { display: none; }
.wk-feld-titel { display: block; margin-bottom: .25rem; font-weight: 600; }
.wk-schema .hb-bild svg { max-height: 60vh; }
.hb-spieler::cue { font-size: 1.05rem; line-height: 1.35; }
@media (max-width: 600px) { .hb-spieler::cue { font-size: .8rem; } }
.hb-begleit { margin-top: .7rem; padding: .6rem .9rem; border: 1px solid var(--rand); border-radius: 12px; }
.hb-begleit > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.hb-begleit li { margin: .35rem 0; }

/* Videoaufträge (ADR-023): vier Schritte, Schnittmarken, Untertitel */
.wk-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-top: .9rem; }
.wk-schritt { display: flex; flex-direction: column; gap: .15rem; min-height: 72px; padding: .7rem .9rem;
  border-radius: var(--flow-rund); border: 1px solid var(--rand); background: var(--flow-karte); }
.wk-schritt-zeichen { font-size: 1.4rem; line-height: 1; }
.wk-schritt-name { font-weight: 600; }
.wk-schritt-fertig { border-color: color-mix(in srgb, var(--gruen) 50%, transparent); }
.wk-schritt-fertig .wk-schritt-zeichen { color: var(--gruen); }
.wk-schritt-laeuft { border-color: var(--akzent); }
.wk-schritt-wartet { border-color: color-mix(in srgb, var(--orange) 50%, transparent); }
.wk-schritt-wartet .wk-schritt-zeichen { color: var(--orange); }
.wk-schritt-fehler { border-color: color-mix(in srgb, var(--rot) 60%, transparent); }
.wk-schritt-fehler .wk-schritt-zeichen { color: var(--rot); }
.wk-marke { display: flex; align-items: flex-start; gap: .7rem; min-height: 48px; padding: .5rem 0; border-top: 1px solid var(--rand); }
.wk-marke:first-child { border-top: 0; }
.wk-marke input { width: 22px; height: 22px; margin-top: .2rem; }
.wk-marke b { display: block; font-weight: 600; }
.wk-untertitel { display: grid; gap: .35rem; margin-top: .6rem; max-height: 50vh; overflow: auto; }
.wk-ut { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: .5rem; }
.wk-ut-zeit { font-variant-numeric: tabular-nums; color: var(--text-leise); }
.wk-haken { display: flex; align-items: flex-start; gap: .8rem; min-height: 48px; cursor: pointer; }
.wk-haken input { width: 24px; height: 24px; margin-top: .15rem; flex: none; }

.wk-zahlen { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.wk-zahl { flex: 1 1 140px; text-align: center; }
.wk-zahl-wert { font-size: 2.1rem; font-weight: 700; color: var(--akzent-text); line-height: 1.1; }

/* ---------- Bestand: Schlüssel und Geräte (ADR-015) ---------- */
.inv-zeile { display: flex; align-items: center; gap: .8rem; padding: .7rem 0;
  border-top: 1px solid var(--rand); min-height: 56px; }
.inv-zeile:first-of-type { border-top: 0; }
.inv-zeile > div { flex: 1; }
.inv-art { flex: 0 0 auto; font-weight: 600; }
.inv-merk { flex: 0 0 auto; border-radius: 8px; padding: .15rem .6rem; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--vorder) 7%, transparent); color: var(--flow-leise); white-space: nowrap; }
.inv-merk.gut, .inv-frei { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: var(--gruen); }
.inv-ausgegeben { background: color-mix(in srgb, var(--blau) 16%, transparent); color: var(--blau-text); }
.inv-verloren { background: color-mix(in srgb, var(--rot) 18%, transparent); color: var(--rot); }
.inv-ausgemustert { background: color-mix(in srgb, var(--vorder) 6%, transparent); color: var(--flow-leise); }
.inv-warnung { color: var(--orange) !important; }
.inv-hochladen { position: relative; cursor: pointer; }

/* Nachtrag 2: alle hellen Flächen, die der erste Durchgang verpasst hat
   (systematisch gesucht: jede helle Hintergrund- und jede dunkle
   Schriftfarbe aus style.css, die hier noch nicht überschrieben war) */
.kal-we td:first-child { background: color-mix(in srgb, var(--vorder) 5%, transparent); }
.schicht-karte.kv { background: color-mix(in srgb, var(--lila) 14%, transparent); }
#modal-box .numpad button:hover { background: color-mix(in srgb, var(--akzent) 20%, transparent); }
.geburtstag-heute { background: color-mix(in srgb, var(--gold) 15%, transparent); }
.hinweis { color: var(--text); }
.hinweis-hoch { background: color-mix(in srgb, var(--rot) 15%, transparent); }
.hinweis-mittel { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.zugang-geheim:not(:empty) { background: var(--flach); color: var(--text); }
.zugang-feld { color: var(--text-leise); }
.hb-falt-knopf { color: var(--text); }
.hb-falt-knopf:hover { background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.hb-falt-nr { background: color-mix(in srgb, var(--vorder) 8%, transparent); color: var(--text); }
.hb-zitat { color: var(--text-leise); border-left-color: var(--rand); }
.hb-h-info { background: color-mix(in srgb, var(--blau) 13%, transparent); color: var(--text); }
.hb-h-pflicht { background: color-mix(in srgb, var(--rot) 15%, transparent); color: var(--text); }
.hb-h-ok { background: color-mix(in srgb, var(--gruen) 13%, transparent); color: var(--text); }
.hb-art-input { background: color-mix(in srgb, var(--lila) 20%, transparent); color: var(--lila-text); }
.hb-art-pruefen { background: color-mix(in srgb, var(--blau) 18%, transparent); color: var(--blau-text); }
.hb-art-drive { background: color-mix(in srgb, var(--vorder) 9%, transparent); color: var(--text-leise); }

/* ---------- Listenstelle (ADR-016) ----------
   Ein Fall groß, drei große Knöpfe: am Empfang zwischen zwei Patienten bedienbar. */
.ls-ohne-ki { margin: .2rem 0 .9rem; }
.ls-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.ls-kachel { display: flex; flex-direction: column; gap: .45rem; text-align: left; cursor: pointer; min-height: 150px;
  padding: 1rem 1.1rem; border: 1px solid var(--rand); border-radius: var(--flow-rund);
  background: var(--flow-karte); color: inherit; font-size: 1rem; }
.ls-kachel:hover { border-color: var(--akzent); background: var(--flow-karte-hell); }
.ls-kachel-titel { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.ls-kachel-zahlen { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.ls-balken { height: 8px; border-radius: 20px; background: color-mix(in srgb, var(--vorder) 10%, transparent); overflow: hidden; }
.ls-balken i { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--akzent), var(--blau)); }
.ls-warn { color: var(--orange); font-weight: 600; font-size: .9rem; }
.ls-sop p { margin: .6rem 0 0; }

.ls-posten { max-width: 760px; }
.ls-posten-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ls-patient { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.ls-aufgabe { font-size: 1.25rem; margin: 1rem 0; padding: .9rem 1.1rem; border-radius: 14px;
  background: color-mix(in srgb, var(--akzent) 10%, transparent); border-left: 4px solid var(--akzent); }
.ls-daten-zeile { display: flex; gap: .8rem; align-items: baseline; padding: .2rem 0; }
.ls-daten-zeile .feld-hinweis { min-width: 11rem; }
.ls-dublette { margin: .6rem 0; padding: .6rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--blau) 12%, transparent); }
.ls-posten textarea { margin-top: .8rem; }
.ls-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1rem; }
.ls-knoepfe .btn { min-height: 64px; font-size: 1.1rem; }
@media (max-width: 640px) { .ls-knoepfe { grid-template-columns: 1fr; } }
.ls-nebenknoepfe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: .8rem; }
/* Abnahme 22.10.2026: Telefon zum Antippen, Seltenes hinter „Mehr", Fortschritt im Kopf */
.ls-telefon a { color: var(--akzent-text); text-decoration: none; white-space: nowrap; }
.ls-telefon a:hover { text-decoration: underline; }
.ls-knoepfe .btn.leise { border: 1px solid var(--flow-rand-hell); }
.btn.leise.ls-mehr-knopf { margin-top: .7rem; background: none; border: 0; color: var(--text-leise); }
.ls-mehr[hidden] { display: none; }
.ls-mehr { margin-top: .6rem; }
.ls-kopf-balken { margin-top: .5rem; max-width: 22rem; }
.ls-anleitung { font-size: 1.05rem; line-height: 1.45; }
.ls-sop .ls-herkunft { margin-top: .6rem; font-size: .82rem; }
@media (max-width: 640px) {
  .ls-daten-zeile { flex-direction: column; align-items: flex-start; gap: .1rem; padding: .35rem 0; }
  .ls-daten-zeile .feld-hinweis { min-width: 0; }
  .ls-telefon a { font-size: 1.15rem; }
}
.ls-fertig { text-align: center; padding: 2rem 1rem; }
.ls-fertig-zeichen { font-size: 3rem; }
.ls-zuordnung { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem .9rem; }
.ls-zuordnung label { display: flex; flex-direction: column; gap: .2rem; }
.ls-check { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.ls-bericht { max-height: 30vh; overflow: auto; margin: .6rem 0; }
.ls-erledigt, .ls-kein_bedarf { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: var(--gruen); }
.ls-nicht_erreicht { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.ls-zurueckgestellt { background: color-mix(in srgb, var(--blau) 16%, transparent); color: var(--blau-text); }
.markierung { color: var(--auf-akzent); }
.markierung.ferien { color: var(--auf-akzent); }
.hb-bild-knopf, .hb-bild-knopf.btn.leise {
  background: color-mix(in srgb, var(--flaeche) 82%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--vorder) 20%, transparent);
}

/* ============================================================
 * Handy: Leiste unten statt Menü oben
 * ============================================================
 * Am Computer unsichtbar. Am Handy verschwinden Menü, E-Mail und
 * Abmelden aus der Kopfzeile; unten stehen vier Daumen-Knöpfe und
 * „Mehr" mit allen Bereichen als große Kacheln.
 * ============================================================ */
#untenleiste, #mehr-blatt { display: none; }

@media (max-width: 720px) {
  #hauptmenu, .kopf-rechts { display: none !important; }
  #kopfleiste .kopf-innen { padding: .7rem 1rem; }
  #praxis-titel { font-size: 1.05rem; }

  #untenleiste {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: color-mix(in srgb, var(--flaeche) 97%, transparent);
    border-top: 1px solid var(--flow-rand-hell);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    backdrop-filter: blur(12px);
  }
  #untenleiste.versteckt { display: none; }
  #untenleiste a, #untenleiste button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 58px; border-radius: 14px; border: 0; background: none;
    color: var(--flow-leise); text-decoration: none; font: inherit; cursor: pointer;
  }
  #untenleiste a.aktiv { color: var(--akzent-text); background: color-mix(in srgb, var(--akzent) 10%, transparent); }
  .ul-zeichen { font-size: 1.45rem; line-height: 1; }
  .ul-name { font-size: .75rem; font-weight: 600; letter-spacing: .01em; }

  #inhalt { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
  .hb-hilfe-knopf { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }

  #mehr-blatt {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 120; overflow-y: auto;
    background: var(--hintergrund);
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  }
  .mb-kopf { display: flex; justify-content: space-between; align-items: center;
             font-size: 1.25rem; margin-bottom: 14px; }
  .mb-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mb-kachel {
    display: flex; flex-direction: column; gap: 8px; justify-content: center;
    min-height: 92px; padding: 14px; border-radius: 16px;
    background: var(--flow-karte); border: 1px solid var(--rand);
    color: var(--text); text-decoration: none; font-weight: 600; font-size: .98rem; line-height: 1.25;
  }
  .mb-kachel:active { background: color-mix(in srgb, var(--akzent) 14%, transparent); border-color: var(--akzent); }
  .mb-zeichen { font-size: 1.7rem; }
  .mb-fuss { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rand); }
  .mb-fuss .btn { flex: 1; min-height: 52px; }
}

/* Kalender am Handy: jede Tageszeile wird eine Karte */
@media (max-width: 720px) {
  .kal-jahr { display: none; }
  .kalender-tabelle, .kalender-tabelle tbody { display: block; background: none; }
  .kalender-tabelle .kal-kopf { display: none; }
  .kalender-tabelle tr {
    display: block; margin: 0 0 10px; border-radius: 14px; overflow: hidden;
    background: var(--flow-karte); border: 1px solid var(--rand);
  }
  .kalender-tabelle td { display: block; padding: 0; border: 0; background: none; }
  .kalender-tabelle td:first-child {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 14px; background: color-mix(in srgb, var(--vorder) 4%, transparent) !important;
    border-bottom: 1px solid var(--rand);
  }
  .kal-datum { font-weight: 700; font-size: 1.02rem; }
  .kalender-tabelle td[data-standort] .kal-zelle {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    min-width: 0; min-height: 48px; padding: 8px 14px;
    border-top: 1px solid color-mix(in srgb, var(--vorder) 5%, transparent);
  }
  .kalender-tabelle td[data-standort] .kal-zelle::before {
    content: attr(data-standort); font-weight: 600; font-size: .9rem;
  }
  .kalender-tabelle .kal-info { font-size: .86rem; text-align: right; }
  .karte.tabellen-halter:has(.kalender-tabelle) { background: none; border: 0; padding: 0; box-shadow: none; }
}

/* ============================================================
 * Praxis aufbauen (praxis.js): das Haus von oben nach unten
 * ============================================================ */
.pa-kopf h1 { margin-bottom: 4px; }
.pa-einstieg {
  display: grid; grid-template-columns: 44px 1fr 18px; gap: 14px; align-items: center;
  text-decoration: none; color: var(--text); min-height: 72px;
}
.pa-einstieg:hover { border-color: var(--akzent); }
.pa-einstieg-zeichen { font-size: 1.9rem; }

.pa-praxen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 16px 0 20px; }
.pa-praxis {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  min-height: 70px; padding: 12px 16px; border-radius: 16px;
  background: var(--flow-karte); border: 1px solid var(--rand); color: var(--text); font: inherit;
}
.pa-praxis.aktiv { border: 2px solid var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.pa-praxis b { font-size: 1.02rem; }

.pa-haus { display: grid; gap: 12px; }
.pa-ebene {
  border-radius: 18px; padding: 14px; background: var(--flow-karte);
  border: 1px solid var(--rand); border-left: 6px solid var(--akzent);
}
.pa-ohne { border-left-color: var(--orange); }
.pa-ebene-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.pa-ebene-name {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; padding: 4px 0;
}
.pa-ebene-name b { font-size: 1.15rem; }
.pa-pfeile { display: flex; gap: 6px; }
.pa-pfeile .hb-rund:disabled { opacity: .25; cursor: default; }

.pa-raeume { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pa-raum {
  display: flex; flex-direction: column; gap: 4px; justify-content: center; text-align: left;
  min-height: 92px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--vorder) 5%, transparent); border: 1px solid var(--rand); color: var(--text); font: inherit;
}
.pa-raum:hover { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.pa-raum-name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.pa-raum-nr { font-size: .82rem; color: var(--text-leise); }
.pa-raum-bereich { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--text-leise); }
.pa-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--rand); flex: none; }
.pa-plus {
  align-items: center; justify-content: center; border-style: dashed;
  color: var(--akzent-text); background: none;
}
.pa-plus-zeichen { font-size: 1.6rem; line-height: 1; }

.pa-neue-ebene {
  width: 100%; margin: 12px 0 22px; min-height: 64px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 18px; border: 2px dashed var(--flow-rand-hell); background: none;
  color: var(--akzent-text); font: inherit; font-weight: 700; font-size: 1.05rem;
}
.pa-neue-ebene:hover { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 6%, transparent); }

.pa-leer { text-align: center; padding: 34px 16px; border-radius: 18px; border: 2px dashed var(--flow-rand-hell); }
.pa-leer-zeichen { font-size: 3rem; }

.pa-bereich-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-bereich {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px;
  border-radius: 999px; background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand);
  color: var(--text); font: inherit; cursor: pointer;
}
.pa-bereich.pa-plus { border-style: dashed; }

.pa-feld { margin-bottom: 10px; }
.pa-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pa-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
input[type="color"] { height: 48px; padding: 4px; cursor: pointer; }

@media (max-width: 720px) {
  .pa-praxen { grid-template-columns: 1fr 1fr; }
  .pa-raeume { grid-template-columns: 1fr 1fr; }
}

/* Listenstelle Stufe 2: Team, Zuteilung, Zahlen (ADR-016) */
.ls-team-zeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0 .4rem; }
.ls-haken-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem .9rem;
  max-height: 45vh; overflow: auto; margin: .6rem 0; }
.ls-zuteilen { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .6rem; }

/* Handbuch-Kopf: Die Zeile über dem Suchfeld liegt auf dem bewegten Netz.
   Am Handy überdecken sich dort Schrift und Punkte — eine ruhige Unterlage
   macht sie lesbar, ohne das Netz zu verstecken. */
.hb-schaufenster-vorne .hb-mikro {
  display: inline-block; align-self: flex-start;
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--flaeche) 78%, transparent); color: var(--text);
  backdrop-filter: blur(6px);
}
@media (max-width: 720px) {
  .hb-schaufenster-vorne .hb-mikro { font-size: .75rem; letter-spacing: .08em; }
}

/* ============================================================
 * Cockpit der Geschäftsführung (cockpit.js)
 * ============================================================
 * Ein leuchtender Lage-Kern, „Jetzt wichtig" daneben, darunter die
 * Kacheln. Farbe heißt immer dasselbe: Rot = jetzt handeln, Orange =
 * anschauen, Grün = in Ordnung, Grau = keine Daten.
 * ============================================================ */
.cp { --cp-kritisch: var(--rot); --cp-achtung: var(--orange); --cp-gut: var(--gruen); --cp-still: var(--still); }
.cp .stufe-kritisch { --cp-farbe: var(--cp-kritisch); }
.cp .stufe-achtung  { --cp-farbe: var(--cp-achtung); }
.cp .stufe-gut      { --cp-farbe: var(--cp-gut); }
.cp .stufe-still    { --cp-farbe: var(--cp-still); }

.cp-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.cp-gruss { margin: 0; font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.01em; }
.cp-datum { color: var(--text-leise); font-size: 1rem; margin-top: 2px; }
.cp-live {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: color-mix(in srgb, var(--gruen) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gruen) 30%, transparent); color: var(--gruen-text);
}
.cp-live-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-gut); animation: cp-puls 2s ease-in-out infinite; }

/* --- Lage: Kern + Jetzt wichtig --- */
.cp-lage { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; margin-bottom: 18px; }
.cp-kern {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 26px 20px; border-radius: 24px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cp-farbe) 22%, transparent), transparent 70%), var(--flow-karte);
  border: 1px solid color-mix(in srgb, var(--cp-farbe) 40%, transparent);
}
.cp-kern-orb { position: relative; width: 172px; height: 172px; display: grid; place-items: center; }
.cp-kern-orb.klein { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--rand); border-top-color: var(--akzent); animation: cp-dreh 1s linear infinite; }
.cp-kern-glut {
  position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cp-farbe) 70%, var(--papier) 10%), color-mix(in srgb, var(--cp-farbe) 25%, transparent) 60%, transparent 72%);
  filter: blur(6px); animation: cp-atmen 4s ease-in-out infinite;
}
.cp-kern-bahn {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, color-mix(in srgb, var(--cp-farbe) 90%, var(--papier)) 75%, transparent 76% 100%);
  -webkit-mask: radial-gradient(circle, transparent 62%, var(--text) 63% 66%, transparent 67%);
          mask: radial-gradient(circle, transparent 62%, var(--text) 63% 66%, transparent 67%);
  animation: cp-dreh 6s linear infinite;
}
.cp-kern-innen {
  position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kern-innen); border: 1px solid color-mix(in srgb, var(--cp-farbe) 55%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--cp-farbe) 45%, transparent), inset 0 0 22px color-mix(in srgb, var(--cp-farbe) 20%, transparent);
}
.cp-kern-zahl { font-size: 3rem; font-weight: 800; color: var(--cp-farbe); line-height: 1; text-shadow: 0 0 18px color-mix(in srgb, var(--cp-farbe) 60%, transparent); }
.cp-kern-satz { font-size: 1.22rem; font-weight: 700; line-height: 1.35; max-width: 18em; }

.cp-fokus { border-radius: 24px; padding: 18px; background: var(--flow-karte); border: 1px solid var(--rand); }
.cp-fokus-titel { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 12px; }
.cp-fokus-liste { display: grid; gap: 8px; }
.cp-fokus-zeile {
  display: grid; grid-template-columns: 34px 1fr 18px; gap: 12px; align-items: center;
  min-height: 58px; padding: 10px 14px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--cp-farbe) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cp-farbe) 30%, transparent);
  border-left: 5px solid var(--cp-farbe);
  transition: transform .15s ease, background .15s ease;
}
.cp-fokus-zeile:hover { transform: translateX(3px); background: color-mix(in srgb, var(--cp-farbe) 17%, transparent); }
.cp-fokus-zeichen { font-size: 1.5rem; text-align: center; }
.cp-fokus-text { font-weight: 600; line-height: 1.35; }
.cp-pfeil { font-size: 1.5rem; opacity: .5; }
.cp-fokus-leer { display: grid; place-items: center; gap: 8px; min-height: 180px; text-align: center; color: var(--text-leise); font-size: 1.05rem; }
.cp-fokus-leer-zeichen { font-size: 2.6rem; }

/* --- Kacheln --- */
.cp-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cp-kachel {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  min-height: 168px; padding: 16px 18px; border-radius: 22px; text-decoration: none; color: var(--text);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cp-farbe) 9%, transparent), transparent 55%), var(--flow-karte);
  border: 1px solid color-mix(in srgb, var(--cp-farbe) 28%, var(--rand));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: cp-auftauchen .45s ease both;
}
.cp-kachel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cp-farbe), transparent);
  box-shadow: 0 0 18px var(--cp-farbe);
}
.cp-kachel:hover { transform: translateY(-3px); border-color: var(--cp-farbe); box-shadow: 0 14px 40px color-mix(in srgb, var(--schatten) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--cp-farbe) 30%, transparent); }
/* Ruhige Kachel (keine Daten, nichts zu tun): gedämpft über Farbe, nie über Deckkraft —
   mit opacity lag der Text bei 2,2 : 1 (Prüfstelle 21.10.2026). */
.cp-kachel.stufe-still { background: var(--flow-karte); border-color: var(--rand); }
.cp-kachel.stufe-still::before { opacity: .35; box-shadow: none; }
.cp-kachel.stufe-still .cp-kachel-zeichen { filter: grayscale(1); }
.cp-kachel.stufe-still .cp-kachel-titel, .cp-kachel.stufe-still .cp-zahl { color: var(--text-leise); }
.cp-kachel.stufe-still .cp-stufe { color: var(--text-leise); background: color-mix(in srgb, var(--vorder) 6%, transparent); }
.cp-kachel.feier { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%), var(--flow-karte); }
.cp-gitter .cp-kachel:nth-child(2) { animation-delay: .04s; } .cp-gitter .cp-kachel:nth-child(3) { animation-delay: .08s; }
.cp-gitter .cp-kachel:nth-child(4) { animation-delay: .12s; } .cp-gitter .cp-kachel:nth-child(5) { animation-delay: .16s; }
.cp-gitter .cp-kachel:nth-child(6) { animation-delay: .2s; }  .cp-gitter .cp-kachel:nth-child(7) { animation-delay: .24s; }
.cp-gitter .cp-kachel:nth-child(8) { animation-delay: .28s; } .cp-gitter .cp-kachel:nth-child(9) { animation-delay: .32s; }
.cp-gitter .cp-kachel:nth-child(10) { animation-delay: .36s; } .cp-gitter .cp-kachel:nth-child(11) { animation-delay: .4s; }

.cp-kachel-kopf { display: flex; align-items: center; gap: 10px; }
.cp-kachel-zeichen { font-size: 1.45rem; }
.cp-kachel-titel { font-weight: 700; font-size: 1rem; flex: 1; }
.cp-stufe {
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  color: var(--cp-farbe); background: color-mix(in srgb, var(--cp-farbe) 14%, transparent);
}
.cp-kachel-mitte { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: 1; }
.cp-zahl { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cp-satz { color: var(--text-leise); font-size: .92rem; margin-top: 6px; line-height: 1.35; }
.cp-ring-halter { position: relative; width: 60px; height: 60px; flex: none; display: grid; place-items: center; }
.cp-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-ring-bahn { fill: none; stroke: color-mix(in srgb, var(--vorder) 8%, transparent); stroke-width: 6; }
.cp-ring-wert { fill: none; stroke: var(--cp-farbe); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 4px var(--cp-farbe)); }
.cp-ring-zahl { position: relative; font-size: .78rem; font-weight: 700; }
.cp-teile { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-teil {
  font-size: .75rem; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--cp-farbe) 16%, transparent); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--cp-farbe) 35%, transparent);
}

.cp-laden { display: flex; align-items: center; gap: 14px; padding: 40px 0; color: var(--text-leise); }

@keyframes cp-dreh { to { transform: rotate(360deg); } }
@keyframes cp-atmen { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes cp-puls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gruen) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gruen) 0%, transparent); } }
@keyframes cp-auftauchen { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .cp-kern-glut, .cp-kern-bahn, .cp-live-punkt, .cp-kachel, .cp-kern-orb.klein { animation: none !important; }
  .cp-ring-wert { transition: none; }
}

@media (max-width: 860px) {
  .cp-lage { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cp-kopf { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cp-kern { flex-direction: row; justify-content: flex-start; text-align: left; padding: 16px; gap: 14px; }
  .cp-kern-orb { width: 104px; height: 104px; flex: none; }
  .cp-kern-innen { width: 66px; height: 66px; }
  .cp-kern-zahl { font-size: 1.9rem; }
  .cp-kern-satz { font-size: 1.05rem; }
  .cp-gitter { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cp-kachel { min-height: 148px; padding: 13px; gap: 8px; }
  .cp-zahl { font-size: 2rem; }
  .cp-stufe { display: none; }
  .cp-ring-halter { width: 46px; height: 46px; }
  .cp-ring-zahl { font-size: .75rem; }
  .cp-satz { font-size: .82rem; }
}
.cp-stufe { align-self: flex-start; }

/* Menü: Die Kopfleiste fasst die Einträge erst ab rund 1100 px in wenigen
   Zeilen. Darunter bricht sie in viele Zeilen um und verdeckt den Inhalt —
   dort übernimmt die Leiste unten, wie am Handy. */
@media (min-width: 721px) and (max-width: 1100px) {
  #hauptmenu { display: none !important; }
  #untenleiste {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: color-mix(in srgb, var(--flaeche) 97%, transparent); border-top: 1px solid var(--flow-rand-hell);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); backdrop-filter: blur(12px);
  }
  #untenleiste.versteckt { display: none; }
  #untenleiste a, #untenleiste button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 58px; border-radius: 14px; border: 0; background: none;
    color: var(--flow-leise); text-decoration: none; font: inherit; cursor: pointer;
  }
  #untenleiste a.aktiv { color: var(--akzent-text); background: color-mix(in srgb, var(--akzent) 10%, transparent); }
  #inhalt { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
  .hb-hilfe-knopf { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
  #mehr-blatt {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 120; overflow-y: auto;
    background: var(--hintergrund); padding: 24px 32px;
  }
  .mb-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 1.3rem; margin-bottom: 16px; }
  .mb-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .mb-kachel {
    display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 96px; padding: 14px;
    border-radius: 16px; background: var(--flow-karte); border: 1px solid var(--rand);
    color: var(--text); text-decoration: none; font-weight: 600;
  }
  .mb-zeichen { font-size: 1.7rem; }
  .mb-fuss { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rand); }
}

/* Lernvideos: Datenschutz-Schranke (ADR-023 Punkt 8) */
.wk-lv-gruppe { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--text-leise); }
.wk-lv-spieler { width: 100%; max-height: 60vh; border-radius: 12px; background: var(--vorder); margin: .6rem 0; }
.wk-lv-auswahl { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.wk-lv-regel { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--rand); }
.wk-lv-regel span:last-child { display: flex; flex-direction: column; gap: .15rem; }
.wk-lv-zeichen { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 600; }
.wk-lv-regel.ok .wk-lv-zeichen { background: color-mix(in srgb, var(--gruen) 15%, transparent); color: var(--gruen-text); }
.wk-lv-regel.offen .wk-lv-zeichen { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.wk-lv-vermerk { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .8rem; margin: .4rem 0; border-radius: 10px; background: color-mix(in srgb, var(--rot) 7%, transparent); }
.wk-lv-vermerk.erledigt { background: var(--flaeche); opacity: .8; }
.wk-lv-begruendung { width: 100%; font: inherit; border-radius: 8px; border: 1px solid var(--rand); padding: .5rem; }
.wk-lv-einwilligung { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.wk-lv-aktion { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.hb-art.wk-lv-rot { background: color-mix(in srgb, var(--rot) 14%, transparent); color: var(--rot-tief); }
.wk-lv-titel { display: flex; gap: .5rem; align-items: center; }
.wk-lv-titel h2 { margin: 0; }
.wk-lv-titel-eingabe { flex: 1; font: inherit; font-size: 1.1rem; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--rand); }
.wk-lv-schnitt { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--rand); }
/* Erklärvideos aus der Demo (ADR-023 Punkt 14) */
.wk-ev-zeile { margin: .3rem 0; }
/* Handbuch und Videos (unter Einstellungen): eine schlichte Liste, je Zeile ein großer Tippbereich */
.hb-einst-liste { padding: 0; overflow: hidden; }
.hb-einst-zeile { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; width: 100%; text-align: left; font: inherit;
  color: inherit; background: none; border: 0; border-bottom: 1px solid var(--linie); padding: .9rem 1rem; cursor: pointer; min-height: 56px; }
.hb-einst-zeile:last-child { border-bottom: 0; }
.hb-einst-zeile:hover, .hb-einst-zeile:focus-visible { background: var(--linie); }
.hb-einst-zeile .feld-hinweis { grid-column: 1; }
.hb-einst-zeile .za-pfeil { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* Neue Videos einzeln ansehen: jede Zeile ein großer Tippbereich (GF: „einzeln sichten und freigeben“) */
.wk-ev-ansehen { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  border-bottom: 1px solid var(--linie); padding: .7rem .2rem; cursor: pointer; min-height: 44px; }
.wk-ev-ansehen:hover, .wk-ev-ansehen:focus-visible { background: var(--linie); }
.wk-ev-ansehen:disabled { opacity: .5; cursor: wait; }
/* Durchsehen: Marker der Vermerke unter dem Video (ADR-023 Punkt 15) */
.wk-lv-marken { position: relative; height: 14px; margin: -.3rem 0 .6rem; border-radius: 7px; background: var(--linie); }
.wk-lv-marke { position: absolute; top: 0; height: 14px; min-width: 6px; border: 0; padding: 0; border-radius: 7px; cursor: pointer;
  background: var(--orange); }
.wk-lv-marke.rot { background: var(--rot); }
.wk-lv-marke.erledigt { opacity: .35; }
/* Weichgezeichnete Stellen mit Zeit und Art (GF 02.11.2026) — jede Zeit springt im Spieler hin */
.lv-stellen { margin: -.2rem 0 .6rem; }
.lv-stelle { border: 0; background: none; padding: 0; font: inherit; color: var(--blau, inherit); text-decoration: underline; cursor: pointer; }
.lv-stelle:hover, .lv-stelle:focus-visible { text-decoration-thickness: 2px; }
/* Wer darf es sehen? (ADR-023 Punkt 16) */
.wk-sicht { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0; padding: .8rem; border-radius: 12px; background: var(--flaeche); }
.wk-sicht-arten { display: flex; gap: 1rem; flex-wrap: wrap; }
.wk-sicht-art { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; cursor: pointer; }
.wk-sicht-art input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; }
.wk-sicht-art { white-space: nowrap; }
.wk-sicht-bestimmt { display: flex; flex-direction: column; gap: .4rem; }
.wk-sicht-bestimmt[hidden], .wk-sicht-mehrere[hidden], .wk-lv-mark[hidden], .wk-sicht-chip[hidden] { display: none; }
.wk-sicht-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.wk-sicht-chip { font: inherit; min-height: 40px; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--rand);
  background: var(--karte); color: var(--text); cursor: pointer; }
.wk-sicht-chip.an { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.wk-sicht-suche { font: inherit; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--rand); max-width: 20rem; }
.wk-lv-zeile { display: flex; align-items: center; gap: .5rem; }
.wk-lv-zeile .wk-posten { flex: 1; }
.wk-lv-mark { width: 22px; height: 22px; flex: none; }
/* Sammelfreigabe ohne Ansehen (ADR-081) */
.wk-lv-sammel { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin: .8rem 0; padding: .8rem;
  border: 1px solid var(--rand); border-radius: 12px; }
.wk-lv-zeile .btn.leise { flex: none; }
@media (max-width: 600px) {
  .wk-lv-zeile { flex-wrap: wrap; }
  .wk-lv-zeile .wk-posten { flex-basis: 100%; }
  .wk-lv-zeile .btn.leise { margin-left: auto; }
}
.wk-lv-ohne-ansehen { margin: .5rem 0; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--rand); }
/* Schnell erklären (ADR-046): Handy zuerst, ein großer Knopf */
.se-oben { display: flex; flex-direction: column; gap: .7rem; }
.se-oben h1 { margin: 0; }
.se-thema { font: inherit; padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--rand); background: var(--karte); color: var(--text); }
.se-knopf { text-align: center; min-height: 64px; display: flex; align-items: center; justify-content: center; }
.se-knopf.aus { opacity: .45; pointer-events: none; }
.se-datei { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.se-balken { width: 100%; height: 12px; accent-color: var(--akzent); }
.se-balken[hidden] { display: none; }
.se-kopf { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.se-clip { border-top: 1px solid var(--linie); padding-top: .8rem; margin-top: .8rem; }
.se-clip h3 { margin: 0 0 .2rem; }
.se-hinweis { padding: .5rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--orange) 14%, transparent); }
.se-informieren { display: flex; align-items: center; gap: .5rem; min-height: 44px; }

/* ===================================================== * Listenstelle: Datei aus einem Werkzeug einwerfen (ADR-018)
 * Ein Knopf, eine Vorschau in Worten, ein großer Übernehmen-Knopf.
 * ============================================================ */
.ls-einwurf { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; cursor: pointer;
  padding: 2rem 1.2rem; margin: .4rem 0 1rem; border: 2px dashed var(--flow-rand-hell); border-radius: var(--flow-rund);
  background: var(--flow-karte); }
.ls-einwurf:hover, .ls-einwurf:focus-within { border-color: var(--akzent); background: var(--flow-karte-hell); }
.ls-einwurf b { font-size: 1.25rem; }
.ls-einwurf-zeichen { font-size: 2.6rem; line-height: 1; }
/* Das Browser-Dateifeld bleibt für Tastatur und Vorleser da, ist aber unsichtbar — die ganze Fläche ist das Label */
.ls-einwurf { position: relative; }
.ls-einwurf-feld { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ls-einwurf:focus-within { outline: 2px solid var(--akzent); outline-offset: 3px; }
.ls-einwurf-gewaehlt { font-weight: 600; color: var(--akzent-text); }
.ls-abgelehnt { padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--rot); background: color-mix(in srgb, var(--rot) 10%, transparent); }
.ls-abgelehnt h3 { margin: 0 0 .5rem; color: var(--rot); }
.ls-abgelehnt p { margin: .35rem 0; }
.ls-vorschau-titel { font-size: 1.4rem; margin: .2rem 0 .7rem; }
.ls-pruefungen { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.ls-ok { color: var(--gruen); font-weight: 600; font-size: .95rem; }
.ls-vorschau-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.ls-vorschau-kachel { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border-radius: 14px;
  border: 1px solid var(--rand); background: var(--flow-karte); }
.ls-vorschau-kachel.leer { opacity: .6; }
.ls-vorschau-zahl { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--akzent-text); }
.ls-vorschau-orte { display: flex; flex-wrap: wrap; gap: .3rem; }
.ls-chip-offen { border-color: var(--orange); color: var(--orange); }
.ls-standort-lernen { margin-bottom: 1rem; }
.ls-standort-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0; }
.ls-standort-zeile span { min-width: 12rem; }
.ls-uebernehmen { width: 100%; min-height: 64px; font-size: 1.15rem; margin-top: .6rem; }
.ls-fertig-liste { width: 100%; min-height: 56px; margin: .35rem 0; text-align: left; }
.ls-lauf { cursor: default; }
.ls-lauf-zeile { display: flex; flex-direction: column; gap: .35rem; width: 100%; padding: .65rem .75rem; text-align: left;
  border-radius: 12px; border: 1px solid var(--rand); background: transparent; color: var(--text); cursor: pointer; min-height: 52px; }
.ls-lauf-zeile:hover, .ls-lauf-zeile:focus-visible { border-color: var(--akzent); background: var(--flow-karte-hell); }
.ls-lauf-kopf { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ls-standort-wahl .hb-chip { min-height: 48px; }
 * Listen-Termine: Zeitplan je wiederkehrender Liste (listen-zeitplan.js, ADR-020)
 * ============================================================
 * Ein Bildschirm, fünf Schritte, Eingabe als Satz. Farbe heißt dasselbe
 * wie im Cockpit: Rot = überfällig, Orange = bald, Grün = Liste ist da.
 * Schriftfarben nur über die Variablen oben.
 * ============================================================ */
.lz-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.lz-karte {
  --lz-farbe: var(--rand);
  display: flex; flex-direction: column; gap: .5rem; text-align: left; font: inherit; color: var(--text);
  padding: 1rem 1.1rem; border-radius: var(--flow-rund); background: var(--flow-karte);
  border: 1px solid var(--rand); border-left: 6px solid var(--lz-farbe);
}
button.lz-karte { cursor: pointer; min-height: 160px; }
button.lz-karte:hover { background: var(--flow-karte-hell); border-color: var(--akzent); border-left-color: var(--lz-farbe); }
.lz-karte-name { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.lz-verpasst { --lz-farbe: var(--rot); }
.lz-bald     { --lz-farbe: var(--orange); }
.lz-erstellt { --lz-farbe: var(--gruen); }
.lz-spaeter  { --lz-farbe: var(--flow-rand-hell); }
.lz-still { opacity: .7; }
.lz-zwischentitel { margin: 1.4rem 0 .6rem; color: var(--text-leise); font-size: 1.05rem; }

.lz-quartal { padding: .55rem .75rem; border-radius: 12px; background: color-mix(in srgb, var(--vorder) 4%, transparent);
  border-left: 4px solid var(--lz-farbe); display: grid; gap: .1rem; }
.lz-quartal-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.lz-marke { font-size: .85rem; font-weight: 700; color: var(--lz-farbe); }
.lz-spaeter .lz-marke { color: var(--text-leise); }

/* --- Formular --- */
.lz-formular { max-width: 760px; }
.lz-schritt h2 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .8rem; font-size: 1.25rem; }
.lz-schritt label { display: block; margin-top: .6rem; }
.lz-nummer { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: var(--akzent); color: var(--auf-akzent); font-size: 1rem; font-weight: 800; }
.lz-satz { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem; font-size: 1.2rem; margin-top: .6rem; }
.lz-satz select, .lz-satz input { width: auto; min-height: 52px; font-size: 1.15rem; }
.lz-satz .lz-klein { min-width: 6.5rem; }
.lz-satz .lz-zahl { width: 6rem; }
.lz-wahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.lz-wahl {
  min-height: 60px; padding: .7rem 1rem; border-radius: 14px; font: inherit; font-size: 1.05rem; font-weight: 600;
  cursor: pointer; text-align: left; color: var(--text); background: color-mix(in srgb, var(--vorder) 5%, transparent); border: 2px solid var(--rand);
}
.lz-wahl:hover { border-color: var(--flow-rand-hell); }
.lz-wahl.aktiv { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.lz-vorschau { margin: 1rem 0; padding: 1rem 1.1rem; border-radius: var(--flow-rund); min-height: 4rem;
  background: color-mix(in srgb, var(--akzent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent); display: grid; gap: .5rem; }
.lz-vorschau-zeile { display: grid; grid-template-columns: 9rem 1fr 1fr; gap: .6rem; align-items: baseline; font-size: 1.05rem; }
.lz-vorschau-fehler { color: var(--orange); font-weight: 600; }
.lz-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 2rem; }
.lz-knoepfe .lz-stilllegen { margin-left: auto; color: var(--rot); }

/* --- Karte „Noch zu erstellen" (für die Listenstelle) --- */
.lz-erinnerung { border-color: var(--flow-rand-hell); }
.lz-erinnerung-kopf { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.lz-erinnerung-kopf h2 { margin: 0; font-size: 1.25rem; }
.lz-zeile { padding: .7rem .9rem; margin-bottom: .55rem; border-radius: 14px; border-left: 6px solid var(--lz-farbe);
  background: color-mix(in srgb, var(--vorder) 5%, transparent); }
.lz-zeile-name { font-size: 1.15rem; font-weight: 700; }
.lz-zeile-wann { font-weight: 600; color: var(--lz-farbe); }

@media (max-width: 640px) {
  .lz-vorschau-zeile { grid-template-columns: 1fr; gap: .1rem; }
  .lz-knoepfe .btn { flex: 1 1 100%; }
  .lz-knoepfe .lz-stilllegen { margin-left: 0; }
}
.ls-quartal-wahl { margin-bottom: 1rem; }
.ls-quartal-wahl .hb-chip { min-height: 48px; min-width: 6.5rem; font-size: 1.05rem; }

/* ============================================================
 * Recall in Kahf OS (ADR-022): drei Schritte, große Knöpfe
 * ============================================================ */
.rc-schritte { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.rc-schritt { display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 20px;
  border: 1px solid var(--rand); color: var(--flow-leise); font-size: .9rem; }
.rc-schritt.aktiv { border-color: var(--akzent); color: var(--text); font-weight: 700; }
.rc-schritt.fertig { color: var(--gruen); }
.rc-schritt-zahl { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid currentColor; font-size: .8rem; }
.rc-gross .hb-chip { min-height: 52px; min-width: 7rem; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
.rc-prueffall { display: flex; flex-direction: column; gap: .6rem; max-width: 760px; border-color: var(--akzent); }
.rc-kandidat { text-align: left; min-height: 56px; }
/* Cockpit: „Kommt bald" und die Info-Seite dazu */
.cp-bald-bereich { margin-top: 22px; }
.cp-bald {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 22px; text-decoration: none; color: var(--text);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--lila) 6%, transparent) 0 12px, transparent 12px 24px), var(--flow-karte);
  border: 1px dashed color-mix(in srgb, var(--lila) 45%, transparent);
}
.cp-bald:hover { border-style: solid; }
.cp-bald-zeichen { font-size: 2rem; text-align: center; }
.cp-bald-text { display: flex; flex-direction: column; gap: 2px; }
.cp-bald-text b { font-size: 1.05rem; }
.cp-bald-marke {
  display: inline-block; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lila-text); background: color-mix(in srgb, var(--lila) 16%, transparent); border: 1px solid color-mix(in srgb, var(--lila) 40%, transparent);
}
.bt-kopf { margin-bottom: 14px; }
.bt-kopf h1 { margin: 10px 0 4px; }
.bt-block h2 { font-size: 1.12rem; margin: 0 0 10px; }
.bt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bt-liste li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; line-height: 1.45; }
.bt-zeichen { font-size: 1.2rem; text-align: center; font-weight: 800; color: var(--akzent-text); }

/* ============================================================
 * Dienstplan (Neugestaltung 21.10.2026)
 * ============================================================
 * Ein Bildschirm = eine Aufgabe: Wer arbeitet wann? Oben Standort
 * und Woche per Tipp, darunter ein Satz zur Lage der Woche, dann
 * die Tage. Am Handy (bis 860 px) ein Tag auf einmal, gewählt über
 * die Tagesleiste. Seltenes (Serie, Räume) steht hinter „Mehr".
 * Farben nur aus den Variablen; die Farbe der Qualifikation kommt
 * als --dp-farbe (durch cssFarbe() geprüft) und färbt nur Ränder.
 * ============================================================ */
.dp-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-kopf h1 { margin: 0; }
.dp-mehr-knopf, .dp-aufklapp {
  min-height: 48px; padding: 0 18px; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 600;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); color: var(--text); border: 1px solid var(--rand);
}
.dp-mehr-knopf:hover, .dp-aufklapp:hover { border-color: var(--akzent); }
.dp-mehr-menue { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.dp-mehr-menue .btn { min-height: 48px; }

.dp-standorte, .dp-wahlen { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-standorte { margin: 16px 0 0; }
.dp-wahl {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--flow-rand-hell); background: color-mix(in srgb, var(--vorder) 5%, transparent);
  color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.dp-wahl:hover { border-color: var(--akzent); }
.dp-wahl.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
/* Tausch: wer nicht kann, ist sichtbar raus — grau, durchgestrichen, der Grund klein darunter (Befund A-1) */
.dp-wahl:disabled { opacity: .5; cursor: not-allowed; border-style: dashed; }
.dp-wahl:disabled:hover { border-color: var(--flow-rand-hell); }
.dp-kandidat { flex-direction: column; align-items: flex-start; padding: 6px 18px; gap: 1px; text-align: left; line-height: 1.2; }
.dp-kandidat:disabled .dp-kandidat-name { text-decoration: line-through; }
.dp-kandidat-grund { font-size: .8rem; font-weight: 500; color: var(--text-leise); }
.dp-kandidat.aktiv .dp-kandidat-grund { color: inherit; }
.dp-weitere { margin: 10px 0 0; }
.dp-weitere-satz { margin: 16px 0 8px; }
/* Dienst abgeben (Befund A-8) */
/* Dienst abgeben (Note-1-Auftrag R2): oben im Tauschdialog — wen es fragt, darunter der Knopf */
.dp-abgeben-block {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 18px; padding: 14px 16px;
  border-radius: 16px; background: color-mix(in srgb, var(--akzent) 8%, transparent); border: 1px solid var(--rand);
}
.dp-abgeben-satz { flex: 1 1 16em; margin: 0; }
.dp-abgeben { min-height: 44px; }
.dp-angebot { justify-content: space-between; }
.dp-nehmen { min-height: 44px; }

.dp-woche { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; }
/* Wochenpfeile mit Wort („‹ Vorige Woche“, Note-1-Auftrag R2) */
.dp-pfeil {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; flex: none;
  border-radius: 14px; background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand);
  color: var(--text); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.dp-pfeil:hover { border-color: var(--akzent); color: var(--akzent-text); }
.dp-zeitraum { display: flex; flex-direction: column; align-items: center; min-width: 11em; }
.dp-zeitraum strong { font-size: 1.2rem; }
.dp-zeitraum span { color: var(--text-leise); font-size: .95rem; }
.dp-heute {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 14px;
  color: var(--akzent-text); border: 1px solid var(--akzent); text-decoration: none; font-weight: 600;
}

.dp-lage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 12px 16px; border-radius: 16px; margin-bottom: 14px; font-weight: 600; color: var(--text);
}
.dp-lage.gut { background: color-mix(in srgb, var(--gruen) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gruen) 40%, transparent); }
.dp-lage.achtung { background: color-mix(in srgb, var(--orange) 13%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 50%, transparent); }
/* „noch nicht geplant“ — grau, keine Warnung (Befund A-4, gleiches Wort wie Auftrag B) */
#inhalt .dp-lage.leise { background: transparent; border: 1px dashed var(--rand); box-shadow: none; color: var(--text-leise); font-weight: 500; }
.dp-lage-tag {
  min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  background: var(--orange); color: var(--auf-akzent); border: 0;
}

/* Status-Punkt: gut = grün, Achtung = orange, zu = leise */
.dp-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--gruen); }
.achtung > .dp-punkt, .achtung .dp-tag-kopf .dp-punkt { background: var(--orange); }
.rot > .dp-punkt, .rot .dp-tag-kopf .dp-punkt { background: var(--rot); }
.zu > .dp-punkt, .zu .dp-tag-kopf .dp-punkt { background: var(--text-leise); opacity: .5; }

.dp-tagesleiste { display: none; }
.dp-gitter { display: grid; grid-template-columns: var(--dp-spalten, repeat(7, minmax(0, 1fr))); gap: 10px; align-items: start; }
.dp-tag {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 10px; border-radius: 18px; background: var(--flow-karte); border: 1px solid var(--rand);
}
.dp-tag.heute { border-color: var(--akzent); }
.dp-tag.achtung { border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.dp-tag.rot { border-color: color-mix(in srgb, var(--rot) 70%, transparent); }
.dp-tag.schmal { padding: 10px 4px; align-items: center; background: color-mix(in srgb, var(--vorder) 2%, transparent); }
.dp-tag-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  min-height: 48px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  color: var(--text); font: inherit; font-weight: 700; font-size: 1.02rem; text-align: left;
}
.dp-tag.schmal .dp-tag-kopf { flex-direction: column; justify-content: center; gap: 4px; padding: 0; text-align: center; }
.dp-zu { color: var(--text-leise); font-size: .95rem; }
.dp-kurz, .dp-tag-name.kurz .dp-lang { display: none; }
.dp-tag-name.kurz .dp-kurz { display: inline; }
@media (min-width: 861px) and (max-width: 1240px) { .dp-lang { display: none; } .dp-kurz { display: inline; } }
.dp-hinweis {
  display: block; width: 100%; padding: 8px 10px; border-radius: 12px; font: inherit; font-size: .95rem; text-align: left;
  background: color-mix(in srgb, var(--vorder) 5%, transparent); border: 1px solid var(--rand); color: var(--text);
}
button.dp-hinweis { cursor: pointer; min-height: 44px; }
.dp-hinweis.offen { background: color-mix(in srgb, var(--rot) 14%, transparent); border-color: color-mix(in srgb, var(--rot) 50%, transparent); font-weight: 700; }

.dp-dienst {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 56px;
  padding: 9px 11px; border-radius: 14px; cursor: pointer; text-align: left; font: inherit;
  background: var(--flow-karte-hell); color: var(--text);
  border: 1px solid var(--rand); border-left: 5px solid var(--dp-farbe, var(--akzent));
}
.dp-dienst:hover { border-color: var(--akzent); border-left-color: var(--dp-farbe, var(--akzent)); }
.dp-dienst.kv { background: color-mix(in srgb, var(--lila) 14%, transparent); }
/* Der eigene Dienst fällt auf (Befund A-3) */
.dp-dienst.dp-meiner { box-shadow: 0 0 0 2px var(--akzent); }
.dp-wer { font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.dp-zeile { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.dp-zeit { color: var(--text-leise); font-size: .95rem; font-variant-numeric: tabular-nums; }
.dp-kuerzel {
  padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: var(--text); border: 1.5px solid var(--dp-farbe, var(--rand));
}
.dp-extra { color: var(--text-leise); font-size: .9rem; overflow-wrap: anywhere; }
.dp-leer { color: var(--text-leise); font-size: .95rem; padding: 4px; }
.dp-warnungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dp-warnungen li { padding: 6px 9px; border-radius: 10px; font-size: .88rem; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--text); }
.dp-plus {
  width: 100%; min-height: 48px; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 600;
  background: none; border: 1.5px dashed var(--flow-rand-hell); color: var(--text-leise);
}
.dp-plus:hover { border-color: var(--akzent); color: var(--akzent-text); }
.dp-tag.schmal .dp-plus { width: 48px; padding: 0; font-size: 1.3rem; }
.dp-tag.schmal .dp-plus-wort { display: none; }

/* Handy und kleines Tablet: ein Tag auf einmal */
@media (max-width: 860px) {
  /* Zeitraum oben über die ganze Breite, darunter die beiden Pfeile nebeneinander, „Heute“ zuletzt */
  .dp-woche { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .dp-zeitraum { min-width: 0; flex: 1 0 100%; order: -1; }
  .dp-pfeil { flex: 1 1 0; padding: 0 10px; }
  .dp-heute { order: 4; flex: 1 0 100%; justify-content: center; }
  .dp-standorte { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dp-standorte .dp-wahl { flex: none; }
  .dp-tagesleiste { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
  .dp-tag-knopf {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 64px; padding: 4px 0; border-radius: 14px; cursor: pointer; font: inherit;
    background: color-mix(in srgb, var(--vorder) 5%, transparent); border: 1px solid var(--rand); color: var(--text);
  }
  .dp-tag-knopf.zu { color: var(--text-leise); }
  .dp-tag-knopf.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
  .dp-tag-knopf.aktiv .dp-punkt { box-shadow: 0 0 0 2px var(--auf-akzent); }
  .dp-tk-name { font-size: .8rem; font-weight: 600; }
  .dp-tk-zahl { font-size: 1.15rem; font-weight: 800; line-height: 1; }
  .dp-gitter { display: block; }
  .dp-tag { display: none; padding: 0; background: none; border: 0; }
  .dp-tag.gewaehlt { display: flex; }
  .dp-tag.schmal.gewaehlt { align-items: stretch; }
  .dp-tag.schmal .dp-plus { width: 100%; font-size: 1.05rem; }
  .dp-tag.schmal .dp-tag-kopf { flex-direction: row; justify-content: space-between; padding: 0 4px; }
  .dp-tag.schmal .dp-zu { font-size: 0; padding: 4px; }
  .dp-tag.schmal .dp-zu::after { content: 'Die Praxis ist an diesem Tag zu.'; font-size: 1rem; }
  .dp-tag.schmal .dp-plus-wort { display: inline; }
  .dp-tag-kopf { font-size: 1.15rem; }
  .dp-dienst { min-height: 64px; padding: 12px 14px; }
  .dp-wer { font-size: 1.08rem; }
  .dp-plus { min-height: 56px; border-style: solid; background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); font-size: 1.05rem; }
}

/* Dienst-Dialog: Wer? Wann? Jede Woche? */
.dp-dialog h2 { margin: 0; }
.dp-dialog-datum { margin: 2px 0 6px; color: var(--text-leise); font-size: 1.05rem; }
.dp-frage { margin: 18px 0 8px; font-size: 1.1rem; font-weight: 800; }
.dp-suche { width: 100%; margin-bottom: 10px; min-height: 48px; }
.dp-wer-halter { display: grid; gap: 10px; }
.dp-weitere { display: grid; gap: 8px; }
.dp-unterzeile { color: var(--text-leise); font-size: .95rem; font-weight: 600; margin-top: 4px; }
.dp-aufklapp { justify-self: start; margin-top: 16px; }
.dp-wer-halter .dp-aufklapp { margin-top: 0; }
/* Ein Datumsfeld braucht am Handy gut 150 px: zu zweit passt es nur, wenn beide die volle Spalte bekommen (ADR-079) */
.dp-eigene-zeit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; margin-top: 10px; }
.dp-eigene-zeit label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; min-width: 0; }
.dp-eigene-zeit input { min-height: 48px; width: 100%; min-width: 0; box-sizing: border-box; }
.dp-vorbei { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .95rem; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--text); }
/* Einzelnes Feld direkt im Dialog: volle Breite wie alle anderen (ADR-072) */
.dp-dialog > :is(input, select, textarea), .dp-dialog > .bs-feld { width: 100%; box-sizing: border-box; margin-top: 10px; }
.dp-dialog > :is(input, select) { min-height: 48px; }
.dp-mehr { margin-top: 12px; }
/* Speichern bleibt immer erreichbar (ADR-079): Der Fuß klebt am unteren Rand des Fensters, auch wenn der Inhalt länger ist.
   -1.2rem gleicht das Polster von #modal-box aus. */
.dp-dialog-fuss { display: flex; gap: 10px; margin-top: 22px; position: sticky; bottom: -1.2rem; z-index: 1;
  margin-bottom: -1.2rem; padding: 12px 0 1.2rem; background: var(--flach-hoch); }
.dp-speichern { flex: 1; min-height: 56px; font-size: 1.1rem; }
.dp-dialog-fuss .btn.leise { min-height: 56px; }
.dp-loeschen {
  margin-top: 1.8rem; min-height: 48px; padding: 0 6px; background: none; border: 0; cursor: pointer;
  color: var(--rot); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 520px) {
  .dp-wer-halter .dp-wahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-wer-halter .dp-wahl { padding: 6px 10px; font-size: .95rem; line-height: 1.2; text-align: center; border-radius: 16px; }
}

/* ============================================================
 * Kopfzeile und Menü: fünf Bereiche, Suche, Konto (21.10.2026)
 * ============================================================
 * Oben stehen nur noch die Bereiche aus navigation.js (Heute, Team,
 * Arbeit, Wissen, Praxis). Ein Klick öffnet ein ruhiges Feld mit großen
 * Kacheln — dieselben Kacheln wie „Mehr" am Handy. Rechts nur Suche
 * (⌘K) und das Personen-Symbol; E-Mail, Ansicht und Abmelden liegen
 * im Konto-Feld. Ab 721 px passt das Menü oben wieder in eine Zeile,
 * die Leiste unten bleibt dem Handy vorbehalten.
 * ============================================================ */
.kopf-innen { flex-wrap: nowrap; }
#hauptmenu { flex-wrap: nowrap; align-items: center; gap: 6px; }
#hauptmenu .nav-bereich {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border-radius: 14px; border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: none;
}
#hauptmenu .nav-bereich:hover { background: color-mix(in srgb, var(--vorder) 7%, transparent); }
#hauptmenu .nav-bereich.aktiv {
  background: color-mix(in srgb, var(--akzent) 14%, transparent); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); color: var(--akzent-text); font-weight: 700;
}
#hauptmenu .nav-bereich[aria-expanded="true"] { background: color-mix(in srgb, var(--vorder) 10%, transparent); border-color: var(--flow-rand-hell); }
.nb-zeichen { font-size: 1.1rem; }

.kopf-werkzeuge { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.kopf-rund {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; height: 48px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand); color: var(--text);
  font: inherit; font-size: 1.05rem;
}
.kopf-rund:hover { border-color: var(--akzent); }
/* Im Chat (W3c): die Sprechblase ist der aktive Ort — wie ein aktiver Bereich im Menü */
.kopf-rund.aktiv { background: color-mix(in srgb, var(--akzent) 14%, transparent); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); color: var(--akzent-text); }
.kopf-suche { padding: 0 14px; }
.ks-text { font-size: .95rem; color: var(--text-leise); }
.ks-taste {
  font: inherit; font-size: .78rem; font-weight: 700; color: var(--text-leise);
  padding: 2px 7px; border-radius: 7px; border: 1px solid var(--rand);
}

#konto-feld {
  position: absolute; right: 16px; top: calc(100% + 6px); z-index: 90; width: min(320px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--flach-hoch); border: 1px solid var(--flow-rand-hell); border-radius: 20px; box-shadow: var(--flow-glanz);
  color: var(--text);
}
#konto-feld.versteckt { display: none; }
#konto-name { font-size: 1.05rem; }
#benutzer-info { color: var(--text-leise); font-size: .92rem; overflow-wrap: anywhere; margin-bottom: 6px; }
.konto-zeile {
  min-height: 48px; padding: 0 14px; border-radius: 14px; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand); color: var(--text); font: inherit; font-weight: 600;
}
.konto-zeile:hover { border-color: var(--akzent); }
#modus-schalter.versteckt { display: none; }
#geraete-knopf.versteckt { display: none; }

/* Zweiter Faktor: „Dieses Gerät 30 Tage merken" — das ganze Feld ist das Ziel (48 px) */
.zf-merken { margin: 12px 0 4px; }
.zf-merken label {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand); color: var(--text); font-weight: 600;
}
.zf-merken input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; transform: none; flex: none; }
.zf-merken .feld-hinweis { margin: 6px 2px 0; }

/* Einladung (ADR-017 Nachtrag): Passwort-Regeln als Haken, die sich beim Tippen füllen */
.ei-regeln { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ei-regeln li { color: var(--text-leise); font-weight: 600; }
.ei-regeln li::before { content: "○  "; }
.ei-regeln li.erfuellt { color: var(--text); }
.ei-regeln li.erfuellt::before { content: "✓  "; }
/* Mitarbeiter → Zugang: Einladungs-Link mit QR-Code */
.einl-bereich { margin: 4px 0 16px; }
.einl-stand { font-weight: 600; font-size: 1.05rem; }
.einl-qr { width: 220px; max-width: 70vw; height: auto; display: block; margin: 8px auto; background: var(--papier); padding: 8px; border-radius: 12px; }
.einl-link { width: 100%; font-size: .85rem; }
.einl-mehr { margin-top: 8px; }
.einl-mehr summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.einl-pruefen { border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.einl-verlauf { list-style: none; margin: 4px 0 0; padding: 0; }
.einl-verlauf li { padding: 6px 0; border-top: 1px solid var(--linie); font-size: .92rem; }

/* Gemerkte Geräte: eine Zeile je Gerät, Abmelden rechts */
.gg-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gg-zeile {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; min-height: 60px;
  padding: 10px 14px; border-radius: 14px; background: var(--flow-karte-hell); border: 1px solid var(--rand); color: var(--text);
}
.gg-zeichen { font-size: 1.4rem; text-align: center; }
.gg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gg-text b { overflow-wrap: anywhere; }
.gg-knopf { min-height: 48px; }
.gg-gruppe { display: flex; flex-direction: column; gap: 6px; }
.gg-gruppe + .gg-gruppe { margin-top: 8px; }
.gg-konto { font-size: .85rem; font-weight: 700; color: var(--text-leise); padding-left: 4px; overflow-wrap: anywhere; }
.gg-hinweis { border-left: 5px solid var(--orange); }
@media (max-width: 560px) {
  .gg-zeile { grid-template-columns: 28px 1fr; }
  .gg-zeile .gg-knopf { grid-column: 1 / -1; width: 100%; }
}

/* Passkeys (ADR-102): großer Knopf auf der Anmeldeseite; Zeilen im Fenster „Face ID / Fingerabdruck“ ohne Zeichen-Spalte */
.pk-karte { margin-bottom: 12px; }
.pk-anmelden { width: 100%; min-height: 64px; font-size: 1.1rem; }
/* Passkey-Pflicht (ADR-116): Passwort als kleiner Rückfallweg unter dem großen Knopf; Einrichten in drei Schritten */
.lg-passwort summary { min-height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 600; padding: 0; }
.lg-passwort[open] summary { margin-bottom: 8px; }
.pk-schritte { margin: 0 0 16px; padding-left: 1.4rem; line-height: 1.7; font-size: 1.05rem; }
.pk-einrichten .btn-reihe .btn.leise { width: 100%; min-height: 48px; }
/* Praxis-PC (RP-174): zweiter großer Knopf „Terminal öffnen“ auf der Anmeldeseite */
.tk-karte { margin-top: 12px; }
.tk-oeffnen { width: 100%; min-height: 64px; font-size: 1.1rem; }
.tk-oeffnen:disabled { opacity: .5; cursor: not-allowed; }
.pk-liste .gg-zeile { grid-template-columns: 1fr auto auto; }
.pk-liste .gg-text input { min-height: 48px; width: 100%; }
@media (max-width: 560px) {
  .pk-liste .gg-zeile { grid-template-columns: 1fr 1fr; }
  .pk-liste .gg-zeile .gg-text { grid-column: 1 / -1; }
  .pk-liste .gg-zeile .gg-knopf { grid-column: auto; width: 100%; }
}

/* Praxisnetz (Einstellungen): Adresse/Netz/Name, Bezeichnung, Entfernen */
.pn-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.pn-zeile { display: grid; grid-template-columns: 2fr 1.3fr 48px; gap: 8px; align-items: center; }
.pn-zeile input { min-height: 48px; }
.pn-weg { min-height: 48px; padding: 0; }
.pn-info { grid-column: 1 / -1; margin: 0 2px; }
.pn-warnung {
  margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; color: var(--text);
  background: color-mix(in srgb, var(--orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
}
@media (max-width: 560px) { .pn-zeile { grid-template-columns: 1fr 48px; } .pn-zeile .pn-name { grid-column: 1; } }

/* Kacheln — überall gleich (Bereichsfeld oben, „Mehr" am Handy) */
.mb-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mb-kachel {
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  min-height: 92px; padding: 14px; border-radius: 16px;
  background: var(--flow-karte); border: 1px solid var(--rand);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.25;
}
.mb-kachel:hover, .mb-kachel:focus-visible { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); outline: none; }
.mb-kachel.aktiv { border-color: var(--akzent); }
.mb-zeichen { font-size: 1.7rem; }

#bereich-feld { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: color-mix(in srgb, var(--abdunkeln-basis) 55%, transparent); overflow-y: auto; }
.bf-box {
  max-width: 980px; margin: 12px auto; padding: 20px; border-radius: 22px;
  background: var(--flach-hoch); border: 1px solid var(--flow-rand-hell); box-shadow: var(--flow-glanz);
}
.bf-titel { font-size: 1.15rem; font-weight: 800; margin-bottom: 14px; }
.bf-gitter { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

/* „Mehr" am Handy: dieselben Bereiche als Überschriften */
.mb-kopf-knoepfe { display: flex; gap: 8px; }
.mb-bereich { margin-bottom: 18px; }
.mb-suche {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0 0 18px; padding: 0 16px;
  border-radius: 14px; border: 1px solid var(--flow-rand-hell); background: color-mix(in srgb, var(--vorder) 5%, transparent);
  color: var(--text-leise); font: inherit; font-size: 1.05rem; text-align: left; cursor: pointer;
}
.mb-bereich-titel { font-size: 1rem; color: var(--text-leise); margin: 0 0 8px; letter-spacing: .02em; }

/* Schnellsuche */
#schnellsuche {
  position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; align-items: flex-start;
  padding: 10vh 16px 16px; background: color-mix(in srgb, var(--abdunkeln-basis) 72%, transparent);
}
.ss-box {
  width: min(640px, 100%); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--flach-hoch); border: 1px solid var(--flow-rand-hell); border-radius: 22px; box-shadow: var(--flow-glanz);
}
.ss-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--rand); }
.ss-lupe { font-size: 1.2rem; }
.ss-kopf .ss-feld, .ss-kopf .ss-feld:focus {
  flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; box-shadow: none; outline: none;
  color: var(--text); font: inherit; font-size: 1.2rem; padding: 0;
}
.ss-zu {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; flex: none;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand); color: var(--text); font: inherit;
}
.ss-liste { overflow-y: auto; padding: 8px; display: grid; gap: 2px; }
.ss-treffer {
  display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px; width: 100%; min-height: 56px;
  padding: 6px 12px; border-radius: 14px; border: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.ss-treffer.aktiv, .ss-treffer:hover { background: color-mix(in srgb, var(--akzent) 13%, transparent); }
.ss-zeichen { font-size: 1.4rem; text-align: center; }
.ss-text { display: flex; flex-direction: column; min-width: 0; }
.ss-text b { font-size: 1.02rem; }
.ss-text span { color: var(--text-leise); font-size: .9rem; }
.ss-treffer.aktiv .ss-text span, .ss-treffer:hover .ss-text span { color: var(--text); }   /* auf der hellen Markierung sonst nur 4,8 : 1 */
.ss-leer { padding: 16px 12px; color: var(--text-leise); }
.ss-fuss { padding: 10px 18px; border-top: 1px solid var(--rand); color: var(--text-leise); font-size: .85rem; }

/* Ab 721 px: Bereiche oben, keine Leiste unten (überschreibt den Abschnitt „Menü" weiter oben) */
@media (min-width: 721px) and (max-width: 1100px) {
  #hauptmenu { display: flex !important; }
  #untenleiste { display: none !important; }
  #inhalt { padding-bottom: 7rem !important; }
  .hb-hilfe-knopf { bottom: 24px !important; }
  #hauptmenu .nav-bereich { padding: 0 12px; }
  .ks-text { display: none; }
}
@media (max-width: 860px) and (min-width: 721px) {
  .nb-zeichen { display: none; }
  .ks-taste { display: none; }
}
@media (max-width: 720px) {
  .kopf-werkzeuge { display: flex !important; }
  .ks-text, .ks-taste { display: none; }
  .kopf-suche { padding: 0 12px; }
  /* Suche als Blatt von unten, im Daumenbereich (Befund A-10) */
  #schnellsuche { padding: 0; align-items: flex-end; }
  #schnellsuche .ss-box { width: 100%; max-height: 82dvh; border-radius: 22px 22px 0 0; border-bottom: 0;
                          padding-bottom: env(safe-area-inset-bottom); }
  .ss-fuss { display: none; }
  #konto-feld { right: 12px; }
  .mb-gitter { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
 * Meine Zeiten (Neugestaltung 21.10.2026)
 * ============================================================
 * Oben ein Satz: Bin ich eingestempelt? Darunter das Zeitkonto als
 * eine Zahl, dann eine Zeile je Tag (antippen = „stimmt nicht").
 * Keine Tabelle mehr — am Handy lief sie seitlich aus dem Bild.
 * ============================================================ */
.zt-heute, .zt-konto, .zt-block {
  padding: 18px; border-radius: 20px; margin-bottom: 14px;
  background: var(--flow-karte); border: 1px solid var(--rand);
}
.zt-heute, .zt-konto, .zt-block { max-width: 880px; }   /* lange Zeilen am großen Bildschirm lesen sich schlecht */
.zt-heute.da { border-color: color-mix(in srgb, var(--gruen) 50%, transparent); background: color-mix(in srgb, var(--gruen) 10%, transparent); }
.zt-heute.alt { border-color: color-mix(in srgb, var(--orange) 55%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.zt-heute-satz { font-size: 1.3rem; font-weight: 800; line-height: 1.3; }
.zt-heute-zahl { font-size: 1.05rem; color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums; }
.zt-heute-knoepfe { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.zt-heute-knoepfe .btn { flex: 1 1 160px; min-height: 56px; }
.zt-heute > .btn, .zt-heute-link { margin-top: 14px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; }
.zt-leise { color: var(--text-leise); font-size: .95rem; }
.zt-heute .zt-leise { margin-top: 10px; }
.zt-konto-titel { color: var(--text-leise); font-weight: 700; }
.zt-konto-zahl { font-size: 2.3rem; font-weight: 800; line-height: 1.15; margin: 4px 0; font-variant-numeric: tabular-nums; }
.zt-konto-zahl.plus { color: var(--gruen); }
.zt-konto-zahl.minus { color: var(--orange); }
.zt-block h2 { margin: 0; }
.zt-block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.zt-liste { display: grid; gap: 8px; }
.zt-tag {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 10px 14px; border-radius: 14px; cursor: pointer; text-align: left; font: inherit;
  background: var(--flow-karte-hell); border: 1px solid var(--rand); color: var(--text);
}
.zt-tag:hover { border-color: var(--akzent); }
.zt-tag.warnung { border-left: 5px solid var(--orange); }
.zt-datum { display: flex; flex-direction: column; font-size: .95rem; line-height: 1.25; white-space: nowrap; }
.zt-datum b { font-size: 1.05rem; }
.zt-mitte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zt-von-bis { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.zt-hinweis { font-size: .9rem; color: var(--text); background: color-mix(in srgb, var(--orange) 16%, transparent); border-radius: 8px; padding: 2px 8px; justify-self: start; width: fit-content; }
.zt-dauer { font-weight: 800; font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zt-nachmelden { margin-top: 12px; min-height: 52px; width: 100%; }
.zt-meldungen { display: grid; gap: 8px; margin-top: 10px; }
.zt-meldung { padding: 12px 14px; border-radius: 14px; background: var(--flow-karte-hell); border: 1px solid var(--rand); }
.zt-meldung-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.zt-status { padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 1px solid var(--rand); color: var(--text); }
.zt-status.offen { background: color-mix(in srgb, var(--orange) 18%, transparent); border-color: color-mix(in srgb, var(--orange) 50%, transparent); }
.zt-status.gut { background: color-mix(in srgb, var(--gruen) 16%, transparent); border-color: color-mix(in srgb, var(--gruen) 50%, transparent); }
.zt-status.nein { background: color-mix(in srgb, var(--rot) 16%, transparent); border-color: color-mix(in srgb, var(--rot) 50%, transparent); }
.zt-antwort { margin-top: 6px; font-size: .95rem; }
.zt-nachschlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.zt-nachschlagen .mb-kachel { min-height: 76px; cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
.zt-pause-feld { margin-top: 10px; max-width: 160px; min-height: 48px; }
#ka-grund, #ka-datum { margin-top: 10px; min-height: 48px; width: 100%; }
@media (max-width: 720px) {
  .zt-heute, .zt-konto, .zt-block { padding: 16px; }
  .zt-tag { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 10px 12px; }
  .zt-nachschlagen { grid-template-columns: 1fr; }
}

/* ============================================================
 * Zeiterfassung der Leitung (Neugestaltung 21.10.2026)
 * ============================================================
 * Oben ein Satz, was dich braucht. Dann Meldungen entscheiden,
 * „Gerade da" und der Abgleich mit dem Dienstplan. Alles Weitere
 * (alle Zeiten, Zeitkonten, Hinweise) hinter je einem Knopf.
 * ============================================================ */
.za-meldung .zt-heute-knoepfe .btn { flex: 1 1 140px; min-height: 52px; }
.za-zeile { font-weight: 600; }
.za-neu { margin: 2px 0; }
.za-da { display: flex; flex-wrap: wrap; gap: 8px; }
.za-person {
  display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; min-width: 180px;
  background: color-mix(in srgb, var(--gruen) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gruen) 40%, transparent); color: var(--text);
}
.za-person span { color: var(--text); font-size: .92rem; }
.za-person.pause { background: color-mix(in srgb, var(--orange) 12%, transparent); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.za-abstand { margin-top: 20px; }
.za-abstand-klein { margin-top: 10px; }
.za-datum { min-height: 48px; max-width: 190px; }
.za-hinweise { margin-top: 12px; }
.za-hinweise li { font-size: .95rem; }
.za-hinweise li.rot { background: color-mix(in srgb, var(--rot) 16%, transparent); }
.za-falten { display: grid; gap: 8px; margin-top: 10px; }
.za-falt-knopf {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 16px;
  border-radius: 14px; cursor: pointer; font: inherit; font-weight: 700; text-align: left;
  background: var(--flow-karte-hell); border: 1px solid var(--rand); color: var(--text);
}
.za-falt-knopf:hover { border-color: var(--akzent); }
.za-falt-knopf > span:first-child { flex: 1; }
.za-anzahl { padding: 1px 10px; border-radius: 999px; font-size: .85rem; border: 1px solid var(--flow-rand-hell); }
.za-pfeil { font-size: 1.4rem; line-height: 1; transition: transform .15s ease; }
.za-falt-knopf[aria-expanded="true"] .za-pfeil { transform: rotate(90deg); }
.za-falt-koerper { display: grid; gap: 8px; padding: 10px 0 4px; }
.za-konto {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px;
  border-radius: 14px; background: var(--flow-karte-hell); border: 1px solid var(--rand); color: var(--text); text-decoration: none;
}
.za-konto:hover { border-color: var(--akzent); }
.za-konto-name { display: flex; flex-direction: column; min-width: 0; }
.za-konto-zahl { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.za-konto-zahl.plus { color: var(--gruen); }
.za-konto-zahl.minus { color: var(--orange); }
.za-antwort-feld { margin-top: 10px; min-height: 48px; width: 100%; }
@media (max-width: 720px) { .za-person { min-width: 0; flex: 1 1 100%; } }

/* ============================================================
 * Urlaub & Abwesenheit, Anträge (Neugestaltung 21.10.2026)
 * ============================================================
 * Oben „x Tage frei", darunter die zwei häufigsten Wege groß
 * (Urlaub beantragen, Krank melden). Einträge als Karten, kommende
 * zuerst. Anträge: ein Satz, je Antrag eine Karte mit Genehmigen;
 * Überschneidungen stehen direkt auf der Karte.
 * ============================================================ */
.ua-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; max-width: 880px; }
.ua-weg { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; font-size: 1.08rem; width: 100%; }
.ua-weg-zeichen { font-size: 1.5rem; }
.ua-eintrag { border-left: 5px solid var(--ua-farbe, var(--rand)); }
.ua-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ua-klein {
  min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 600;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand); color: var(--text);
}
.ua-klein:hover { border-color: var(--akzent); }
.ua-au {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; font: inherit; font-weight: 600;
  background: color-mix(in srgb, var(--rot) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rot) 50%, transparent); color: var(--text);
}
button.ua-au { cursor: pointer; }
.ua-au.da { background: color-mix(in srgb, var(--gruen) 14%, transparent); border-color: color-mix(in srgb, var(--gruen) 50%, transparent); }
.ua-au-halter { margin-top: 12px; }
.ua-wer { min-height: 48px; width: 100%; }
.ua-schnell { margin-bottom: 8px; }
.ua-mehr-arten { margin-top: 0; }
.ua-name { font-size: 1.1rem; }
.ua-konflikt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 2px;
  padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); color: var(--text);
}
.ua-vorrang { border-color: color-mix(in srgb, var(--gruen) 55%, transparent); background: color-mix(in srgb, var(--gruen) 8%, transparent); }
@media (max-width: 720px) { .ua-wege { grid-template-columns: 1fr; } }

/* ============================================================
 * Startseite (Neugestaltung 21.10.2026)
 * ============================================================
 * Leitung: „Was dich heute braucht" als Liste, jede Zeile führt hin.
 * Alle: mein Dienst heute groß, die Woche klein, vier häufige Wege,
 * je Standort eine Zeile „Heute in der Praxis".
 * ============================================================ */
.st-kopf { margin-bottom: 14px; }
.st-kopf h1 { margin-bottom: 2px; }
.st-liste { display: grid; gap: 8px; margin-top: 10px; }
.st-punkt {
  --st-farbe: var(--text-leise);
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 10px 14px; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; text-decoration: none;
  background: var(--flow-karte-hell); color: var(--text);
  border: 1px solid var(--rand); border-left: 5px solid var(--st-farbe);
}
.st-punkt:hover { border-color: var(--akzent); border-left-color: var(--st-farbe); }
.st-punkt.stufe-rot { --st-farbe: var(--rot); }
.st-punkt.stufe-orange, .st-punkt.stufe-achtung { --st-farbe: var(--orange); }
.st-punkt.stufe-gut { --st-farbe: var(--gruen); }
.st-punkt.stufe-zu, .st-punkt.stufe-still { --st-farbe: var(--text-leise); }
.st-zeichen { font-size: 1.4rem; text-align: center; }
.st-ampel { width: 14px; height: 14px; justify-self: center; background: var(--st-farbe); }
.st-text { display: flex; flex-direction: column; min-width: 0; }
.st-heute { margin-top: 8px; display: grid; gap: 6px; }
.st-heute-zeit { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-woche { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand); }
.st-woche-tag { display: grid; grid-template-columns: 40px auto 1fr; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.st-woche-tag > span:nth-child(2) { white-space: nowrap; }
.st-woche-tag .zt-leise { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-wege { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; max-width: 880px; }
.st-wege .mb-kachel { min-height: 84px; }
.st-geburtstag {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-radius: 16px; max-width: 880px;
  background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--text); text-decoration: none;
}
.st-andere { margin-top: 8px; }
.st-link { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 720px) {
  .st-wege { grid-template-columns: 1fr 1fr; }
  .st-woche-tag { grid-template-columns: 34px auto 1fr; gap: 10px; }
}

/* Tagesdetail (Kalender, Dienstplan, Start): Abschnitte statt Überschriften-Stapel */
.td-abschnitt { margin-top: 4px; }
.td-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--rand);
}
.td-zeile:last-child { border-bottom: 0; }
.td-zeile .zt-leise { text-align: right; }
.dp-dialog .dp-warnungen { margin-top: 10px; }
.dp-warnungen li.rot { background: color-mix(in srgb, var(--rot) 16%, transparent); }
.dp-dialog-fuss .st-link { justify-content: center; }

/* ============================================================
 * Mitarbeiter (Neugestaltung 21.10.2026)
 * ============================================================
 * Liste statt Tabelle: Name groß, Können und Standort darunter, Suche
 * und Standort per Tipp. Im Dialog das Wichtigste offen, der Rest in
 * aufklappbaren Abschnitten; Kästchen werden zu Auswahl-Knöpfen.
 * ============================================================ */
.ma-neu { width: 100%; max-width: 880px; min-height: 56px; margin-bottom: 12px; }
.ma-suche { max-width: 880px; }
.ma-filter { margin: 0 0 14px; }
.ma-zeile { display: flex; gap: 8px; align-items: stretch; }
.ma-zeile .ma-person { flex: 1; }
.ma-kreis {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--akzent) 14%, transparent); color: var(--text); font-weight: 800; font-size: .9rem;
}
.ma-hinweis { font-size: .88rem; color: var(--text); background: color-mix(in srgb, var(--orange) 16%, transparent); border-radius: 8px; padding: 1px 8px; width: fit-content; margin-top: 2px; }
.ma-bericht {
  display: grid; place-items: center; width: 56px; flex: none; border-radius: 14px; text-decoration: none; font-size: 1.3rem;
  background: var(--flow-karte-hell); border: 1px solid var(--rand);
}
.ma-bericht:hover { border-color: var(--akzent); }
.ma-aktionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 10px 0 6px; }
.ma-aktionen .mb-kachel { min-height: 72px; cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
.ma-chip { position: relative; display: inline-flex; cursor: pointer; }
.ma-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ma-chip span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--flow-rand-hell); background: color-mix(in srgb, var(--vorder) 5%, transparent); color: var(--text); font-weight: 600;
}
.ma-chip:hover span { border-color: var(--akzent); }
.ma-chip input:checked + span { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.ma-chip input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }
.ma-falten { margin-top: 18px; }
.ma-abschnitt .formular-gitter { gap: .4rem .9rem; }
.ma-abstand { margin-top: 10px; }
.ma-dialog textarea { width: 100%; }
.ma-vertrag { flex-wrap: wrap; }
.ma-vertrag-felder { display: flex; gap: 10px; }
.ma-vertrag-felder label { display: flex; flex-direction: column; font-size: .85rem; color: var(--text-leise); }
.ma-vertrag-felder input { width: 96px; min-height: 44px; }
@media (max-width: 720px) {
  .ma-aktionen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ma-aktionen .mb-kachel { min-height: 64px; padding: 8px 6px; font-size: .8rem; gap: 4px; align-items: center; text-align: center; }
  .ma-aktionen .mb-zeichen { font-size: 1.3rem; }
}

/* ============================================================
 * Geburtstage und Exporte (Neugestaltung 21.10.2026)
 * ============================================================ */
.gb-liste { display: grid; gap: 6px; margin-top: 8px; }
.gb-zeile {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; min-height: 52px; padding: 8px 14px;
  border-radius: 14px; background: var(--flow-karte-hell); border: 1px solid var(--rand); color: var(--text);
}
.gb-zeile.heute { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.gb-datum { font-variant-numeric: tabular-nums; }
.gb-fehlt { max-width: 880px; margin-bottom: 14px; }
.gb-druck { margin-bottom: 14px; }
.ex-einleitung { max-width: 880px; margin: -6px 0 14px; }
.ex-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ex-gitter .zt-block { margin-bottom: 0; max-width: none; display: flex; flex-direction: column; gap: 12px; }
.ex-kopf { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; }
.ex-zeichen { font-size: 1.8rem; line-height: 1.2; }
.ex-kopf h2 { margin: 0 0 2px; }
.ex-knoepfe { margin-top: auto; align-items: center; }
.ex-knoepfe .btn { min-height: 48px; }
.ex-zwei { display: grid; gap: 8px; }
@media (max-width: 720px) {
  .ex-gitter { grid-template-columns: 1fr; }
  .gb-zeile { grid-template-columns: 60px 1fr auto; }
}

/* Terminals (Neugestaltung 21.10.2026): Geräte als Karten, neues Terminal im Dialog */
.tm-geraet.aus { opacity: .6; }
.tm-radius { display: inline-flex; align-items: center; gap: 8px; color: var(--text-leise); font-size: .9rem; }
.tm-radius input { width: 90px; min-height: 44px; }
.tm-code { margin-top: 16px; padding: 16px; border-radius: 16px; text-align: center; background: color-mix(in srgb, var(--akzent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent); }
.tm-code .freischaltcode { margin: 10px 0; }

/* Personal & Gehalt (Neugestaltung 21.10.2026): je Person eine Zeile, Brutto rechts */
.pg-brutto { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-abweichung { font-size: .88rem; border-radius: 8px; padding: 1px 8px; width: fit-content; margin-top: 2px; color: var(--text); }
.pg-abweichung.plus { background: color-mix(in srgb, var(--gruen) 14%, transparent); }
.pg-abweichung.minus { background: color-mix(in srgb, var(--orange) 16%, transparent); }
.pg-fehlt { margin-top: 10px; }

/* Stammdaten (Neugestaltung 21.10.2026): nach Thema, Einträge als Zeilen, Ja/Nein per Tipp */
.sd-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.sd-kachel { cursor: pointer; font: inherit; text-align: left; justify-content: flex-start; gap: 6px; }
.sd-titel { font-weight: 700; font-size: 1.02rem; }
.sd-hinweis { font-weight: 400; font-size: .88rem; line-height: 1.35; }
.sd-eintrag.aus { opacity: .65; }
.sd-farbe { width: 72px; height: 48px; padding: 4px; }
.sd-gruppe { max-width: none; }
/* Formulare ohne Fachwerte (Vollständigkeitsprüfung 11/2026): Häkchen, Ampel als Farbknöpfe */
.sd-haken { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; }
.sd-breit { grid-column: 1 / -1; }
#modal-box .sd-haken .re-haken { display: flex; margin: 0; color: inherit; font-size: .95rem; cursor: pointer; }
.sd-neu-reihe { display: flex; gap: 8px; margin-top: 6px; }
.sd-neu-reihe input { flex: 1; min-width: 0; }
.sd-ampel { gap: 8px; }
.sd-ampel::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--sd-ampel); flex: none; }
.sd-ampel-gruen { --sd-ampel: var(--gruen); }
.sd-ampel-orange { --sd-ampel: var(--orange); }
.sd-ampel-rot { --sd-ampel: var(--rot); }
.sd-ampel.aktiv { background: var(--sd-ampel); border-color: var(--sd-ampel); color: var(--auf-akzent); }
.sd-ampel.aktiv::before { background: var(--auf-akzent); }

/* Einstellungen (Neugestaltung 21.10.2026): Liste wie in den Telefon-Einstellungen, jede Zeile ein kleines Fenster */
.ei-zeile { min-height: 64px; }
.ei-ics { cursor: pointer; justify-content: flex-start; gap: 12px; align-items: center; }
.ei-ics .ma-chip span { min-height: 40px; min-width: 40px; padding: 0; justify-content: center; }
.ei-ics .ma-chip input:not(:checked) + span { color: transparent; }
/* ---------- Aufgaben (ADR-019) ----------
   Je Prüfpunkt drei große Knöpfe; „Alles in Ordnung" für den Normalfall. */
.af-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .8rem; }
/* Ohne Reiter, als Stapel (Philosophie-Kontrolle R2/R3): oben das Nächste, „noch N“ und „Filtern“ leise darunter */
.af-noch-reihe { margin: 12px 0 8px; }
.af-filter[hidden], .af-rest[hidden], .af-stapel-innen[hidden] { display: none; }
.af-filter select { min-height: 44px; max-width: 320px; }
.af-stapel-innen { padding-left: 16px; border-left: 2px solid var(--rand); margin: 0 0 8px 12px; }
.af-wege { border-top: 1px solid var(--rand); padding-top: 16px; }
.af-gruppe { font-size: 1.05rem; margin: 1.2rem 0 .6rem; }
.af-gruppe.af-ueberfaellig { color: var(--orange); }
.af-kachel { min-height: 120px; }
.af-kachel.af-ueberfaellig { border-color: var(--orange); }
.af-warum { margin: 0 0 .5rem; }
.af-checkliste { max-width: 860px; }
.af-punkt { padding: .7rem 0; border-bottom: 1px solid var(--rand); }
.af-punkt:last-of-type { border-bottom: 0; }
.af-punkt-text { display: flex; gap: .5rem; font-size: 1.05rem; line-height: 1.35; }
.af-nr { color: var(--flow-leise); min-width: 1.6rem; }
.af-wahlen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 0 2.1rem; }
.af-wahl { min-height: 48px; min-width: 7rem; white-space: nowrap; padding: .4rem .9rem; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--rand); background: transparent; color: inherit; font: inherit; }
.af-wahl[aria-pressed="true"].af-wahl-in_ordnung, .markierung.af-wahl-in_ordnung { background: color-mix(in srgb, var(--gruen) 20%, transparent); color: var(--gruen); border-color: var(--gruen); }
.af-wahl[aria-pressed="true"].af-wahl-mangel, .markierung.af-wahl-mangel { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); border-color: var(--orange); }
.af-wahl[aria-pressed="true"].af-wahl-entfaellt, .markierung.af-wahl-entfaellt { background: color-mix(in srgb, var(--text-leise) 20%, transparent); border-color: var(--rand); }
.af-bemerkung { margin: .5rem 0 0 2.1rem; width: calc(100% - 2.1rem); }
/* Messpunkt (Kritik 11/2026, D-1): Wert mit Einheit, Lage gleich darunter */
.af-wert-feld { display: inline-flex; align-items: center; gap: .4rem; }
.af-wert { width: 7rem; min-height: 48px; font-size: 1.15rem; text-align: right; }
.af-einheit { font-weight: 600; }
.af-wahl.af-wahl-schmal { min-width: 0; flex: 0 0 auto; }
.af-wert-lage { display: block; margin: .35rem 0 0 2.1rem; font-size: .92rem; }
.af-wert-lage:empty { display: none; }
.af-wert-gut { color: var(--gruen); }
.af-wert-aus { color: var(--orange); font-weight: 600; }
.af-wert-nachweis { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .af-wert-lage { margin-left: 0; } }
.af-checkliste textarea { margin-top: .8rem; }
.af-abschluss { max-width: 860px; }
.af-klickbar { cursor: pointer; }
.af-klickbar:hover td { background: color-mix(in srgb, var(--vorder) 4%, transparent); }
.af-aus td { opacity: .55; }
.btn.af-klein { padding: .25rem .7rem; min-height: 44px; min-width: 44px; }
.af-formular label { display: flex; flex-direction: column; gap: .2rem; margin: .4rem 0; }
.af-formular label.af-haken { flex-direction: row; align-items: center; gap: .5rem; }
@media (max-width: 640px) { .af-wahlen, .af-bemerkung { margin-left: 0; width: 100%; } .af-wahl { flex: 1; min-width: 0; } }
.af-bereich-wahl { max-width: 320px; }
/* Vorlagen am Handy: Karten statt einer Tabelle zum Seitwärtsschieben */
@media (max-width: 720px) {
  .af-vorlagen thead { display: none; }
  .af-vorlagen, .af-vorlagen tbody, .af-vorlagen tr, .af-vorlagen td { display: block; width: 100%; }
  .af-vorlagen tr { padding: .7rem 0; border-bottom: 1px solid var(--rand); }
  .af-vorlagen td { border: 0; padding: .1rem 0; }
  .af-vorlagen td[data-label]::before { content: attr(data-label) ": "; color: var(--flow-leise); }
  .af-vorlagen .af-v-kennung { font-size: .8rem; color: var(--flow-leise); }
  .af-vorlagen .af-v-name { font-weight: 700; font-size: 1.05rem; }
}

/* Handbuch: Zwischenüberschriften im Kapitel (style.css setzt --primaer, im dunklen Design fast unsichtbar) */
.hb-untertitel { color: var(--text); }
/* Recall-Regeln: Zeilen brechen um statt überzustehen; am Handy steht der Knopf in eigener Zeile */
.rc-regel-zeile { flex-wrap: wrap; }
.rc-regel-zeile > div, .rc-regel-zeile > b { min-width: 0; flex: 1 1 12rem; overflow-wrap: anywhere; }
.rc-formular { margin-top: .8rem; display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 720px) {
  .rc-regel-zeile .btn { width: 100%; }
  .rc-formular .wk-zeile { flex-direction: column; align-items: stretch; }
  .rc-formular .wk-zeile > label { flex: none; }
}

/* Nach Prüfstelle 21.10.2026: Am Handy verdeckte der runde Hilfeknopf Zeilenenden.
   Kleiner, an den Rand, und unten mehr Luft im Inhalt, damit nichts darunter verschwindet. */
@media (max-width: 720px) {
  .hb-hilfe-knopf { width: 46px !important; height: 46px !important; right: 8px !important; font-size: 1.2rem; opacity: .92; }
  #inhalt { padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
  .zt-block, .dp-tag, .st-liste { scroll-margin-bottom: 140px; }
}

/* ============================================================
   Privatabrechnung (Modul 7.2) — public/abrechnung.js
   Je Bildschirm eine Aufgabe: einwerfen, Ergebnis, Fall für Fall.
   Status nie nur als Farbe: immer Zeichen und Wort dazu.
   ============================================================ */
.ab-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.ab-kopf h1 { margin: 0; }
.ab-kopf p { margin: .25rem 0 0; }
.ab-kopf-knoepfe { display: flex; gap: .55rem; flex-wrap: wrap; }
.ab-zurueck { display: inline-flex; align-items: center; min-height: 44px; color: var(--flow-leise); text-decoration: none; margin-bottom: .4rem; }
.ab-zurueck:hover { color: var(--text); }
.ab-abschnitt { font-size: 1.15rem; margin: 1.6rem 0 .7rem; color: var(--text); }
.ab-ohne-ki { margin-top: 1.4rem; }

.ab-pruefen { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; margin-bottom: 1.1rem; border-radius: var(--flow-rund);
  background: color-mix(in srgb, var(--orange) 12%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); color: var(--text); text-decoration: none; }
.ab-pruefen-zeichen { font-size: 1.5rem; }
.ab-pruefen .cp-pfeil { margin-left: auto; }
.ab-pruefen-karte { border-color: color-mix(in srgb, var(--orange) 55%, transparent); }

/* Einwerfen */
.ab-flaeche { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; cursor: pointer;
  padding: 2.4rem 1.2rem; border-radius: 24px; border: 2px dashed var(--flow-rand-hell); background: var(--flow-karte);
  transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.ab-flaeche:hover, .ab-flaeche:focus-visible { border-color: var(--akzent); outline: none; }
.ab-flaeche.drueber { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); transform: scale(1.01); }
.ab-flaeche-zeichen { font-size: 2.6rem; line-height: 1; color: var(--akzent-text); }
.ab-flaeche-titel { font-size: 1.35rem; font-weight: 700; }
.ab-alter { color: var(--flow-leise); font-size: .95rem; }
.ab-alter.alt { color: var(--orange); }

/* Aufgaben-Kacheln und Zahlen */
.ab-aufgaben { display: grid; gap: .7rem; }
.ab-aufgabe { display: flex; align-items: center; gap: .9rem; min-height: 64px; padding: .9rem 1.2rem; border-radius: var(--flow-rund);
  background: var(--flow-karte); border: 1px solid var(--rand); color: var(--text); text-decoration: none; font-size: 1.1rem; font-weight: 600; }
.ab-aufgabe:hover { border-color: var(--akzent); }
.ab-aufgabe-zeichen { font-size: 1.6rem; }
.ab-aufgabe .cp-pfeil { margin-left: auto; }
.ab-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.ab-zahl { display: block; padding: 1rem 1.2rem; border-radius: var(--flow-rund); background: var(--flow-karte); border: 1px solid var(--rand);
  color: var(--text); text-decoration: none; }
.ab-zahl-titel { color: var(--flow-leise); font-size: .95rem; }
.ab-zahl-wert { font-size: 1.9rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ab-zahl.stufe-achtung .ab-zahl-wert { color: var(--orange); }
.ab-zahl.stufe-gut .ab-zahl-wert { color: var(--gruen); }

.ab-leer { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 1.8rem 1rem;
  border-radius: var(--flow-rund); background: var(--flow-karte); border: 1px solid var(--rand); color: var(--flow-leise); }
.ab-leer.gross { padding: 3rem 1rem; font-size: 1.15rem; }
.ab-leer-zeichen { font-size: 2.4rem; line-height: 1; color: var(--gruen); }

/* Vorschau und Ergebnis */
.ab-datei { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--rand); }
.ab-datei-zeichen { font-size: 1.6rem; }
.ab-datei.fehler b { color: var(--rot); }
.ab-zuordnung { padding: .8rem 1rem; margin: .4rem 0 .8rem; border-radius: 14px; background: color-mix(in srgb, var(--vorder) 4%, transparent); }
.ab-zwei { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: .6rem; align-items: center; margin: .35rem 0; }
.ab-zwei label { margin: 0; }
.ab-ergebnis { text-align: center; }
.ab-ergebnis-haken { width: 72px; height: 72px; margin: .3rem auto .4rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.3rem;
  background: color-mix(in srgb, var(--gruen) 16%, transparent); color: var(--gruen); }
.ab-ergebnis-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1rem 0; }
.ab-ergebnis-zahl { padding: .9rem; border-radius: 14px; background: color-mix(in srgb, var(--vorder) 4%, transparent); }
.ab-ergebnis-wert { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ab-ergebnis-zahl.stufe-gut .ab-ergebnis-wert { color: var(--gruen); }
.ab-ergebnis-zahl.stufe-achtung .ab-ergebnis-wert { color: var(--orange); }
.ab-ignorieren { text-align: left; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rand); }
.ab-ignorieren-zeile { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .45rem 0; flex-wrap: wrap; }

/* Fälle */
.ab-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.ab-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border-radius: 999px; text-decoration: none;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1px solid var(--rand); color: var(--text); font-size: .97rem; }
.ab-chip.aktiv { background: linear-gradient(145deg, var(--akzent), var(--akzent-tief)); color: var(--auf-akzent); font-weight: 700; border-color: transparent; }
.ab-fall-kopf { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ab-fall-art { font-weight: 650; color: var(--akzent-text); }
.ab-frage { font-size: 1.45rem; margin: .5rem 0 1rem; }
.ab-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.ab-seite { padding: 1rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, var(--vorder) 4.5%, transparent); border: 1px solid var(--rand); min-width: 0; }
.ab-seite.bank { background: color-mix(in srgb, var(--blau) 8%, transparent); }
.ab-seite-titel { color: var(--flow-leise); font-size: .9rem; margin-bottom: .2rem; }
.ab-name { font-size: 1.3rem; font-weight: 700; overflow-wrap: anywhere; }
.ab-betrag { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.ab-zweck { margin-top: .4rem; padding: .5rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--schatten) 25%, transparent); font-family: ui-monospace, Menlo, monospace;
  font-size: .95rem; overflow-wrap: anywhere; }
.ab-teil { color: var(--akzent-text); font-weight: 650; margin-top: .3rem; }
.ab-gruende { display: flex; gap: .45rem; flex-wrap: wrap; margin: .9rem 0 .2rem; }
.ab-grund { padding: .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--akzent) 10%, transparent); color: var(--text); font-size: .9rem; }
.ab-grund.achtung { background: color-mix(in srgb, var(--orange) 15%, transparent); }
.ab-knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.ab-knoepfe .btn.gross { flex: 1 1 220px; }
.ab-nebenwege { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--rand); }
.ab-unterfrage { font-size: 1.05rem; margin: 1.1rem 0 .5rem; }
.ab-suche { width: 100%; margin-bottom: .7rem; }
.ab-kandidaten { display: grid; gap: .5rem; }
.ab-kandidat { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 60px; padding: .7rem 1rem; text-align: left; cursor: pointer;
  border-radius: 14px; background: color-mix(in srgb, var(--vorder) 4.5%, transparent); border: 1.5px solid var(--rand); color: var(--text); font: inherit; }
.ab-kandidat.aktiv { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.ab-kandidat-haken { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--rand); color: transparent; }
.ab-kandidat.aktiv .ab-kandidat-haken { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.ab-kandidat-text { display: flex; flex-direction: column; min-width: 0; }
.ab-kandidat-betrag { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-kandidat-betragzeile { display: flex; align-items: center; gap: .6rem; padding: .4rem 1rem .6rem 3.4rem; flex-wrap: wrap; }
.ab-kandidat-betragzeile label { margin: 0; }
.ab-betrag-feld { max-width: 11rem; text-align: right; font-variant-numeric: tabular-nums; }
.ab-summe { margin-top: .6rem; color: var(--flow-leise); }
.ab-summe.zuviel { color: var(--rot); font-weight: 650; }

/* Listen */
.ab-liste { display: grid; gap: .45rem; }
.ab-zeile { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 60px; padding: .7rem 1rem; text-align: left;
  border-radius: 14px; background: var(--flow-karte); border: 1px solid var(--rand); color: var(--text); font: inherit; cursor: pointer; }
.ab-zeile:hover { border-color: var(--flow-rand-hell); }
.ab-zeile.still { cursor: default; background: color-mix(in srgb, var(--vorder) 3%, transparent); }
.ab-zeile.geloest { opacity: .6; }
.ab-zeile-haupt { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ab-zeile-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.ab-zeile-betrag { font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-marke { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; font-size: .88rem; font-weight: 650; white-space: nowrap;
  background: color-mix(in srgb, var(--vorder) 7%, transparent); color: var(--flow-leise); }
.ab-marke.stufe-gut { background: color-mix(in srgb, var(--gruen) 15%, transparent); color: var(--gruen); }
.ab-marke.stufe-achtung { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.ab-marke.stufe-kritisch { background: color-mix(in srgb, var(--rot) 15%, transparent); color: var(--rot); }

/* Einstellungen und Formulare */
.ab-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .2rem .9rem; }
.ab-feld { display: flex; flex-direction: column; }
.ab-feld input, .ab-feld select { width: 100%; }
.ab-einst h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.ab-einst .btn { margin-top: .8rem; }
.ab-schalter { display: flex; align-items: center; gap: .8rem; min-height: 52px; margin: 0; color: var(--text); font-size: 1rem; cursor: pointer; }
.ab-schalter input { width: 26px; height: 26px; min-height: 0; accent-color: var(--akzent); }
.ab-schalter .feld-hinweis { margin-left: auto; }
.ab-hinweis { margin-top: .6rem; padding: .6rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--text); }

/* Beteiligung */
.ab-gross-zahl { padding: 1.3rem 1.4rem; border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--akzent) 14%, transparent), color-mix(in srgb, var(--blau) 8%, transparent));
  border: 1px solid var(--flow-rand-hell); }
.ab-gross-wert { font-size: 2.8rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ab-leistungen { display: flex; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.ab-leistung { min-height: 52px; padding: .6rem 1.05rem; border-radius: 14px; cursor: pointer; font: inherit; font-size: 1rem;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); border: 1.5px solid var(--rand); color: var(--text); }
.ab-leistung.aktiv { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); font-weight: 650; }
.ab-extra label { margin-top: .4rem; }
.ab-ergebnis-beteiligung { display: flex; flex-direction: column; gap: .15rem; margin-top: .9rem; padding: .9rem 1rem; border-radius: 14px;
  background: color-mix(in srgb, var(--vorder) 4%, transparent); color: var(--flow-leise); }
.ab-ergebnis-beteiligung b { font-size: 1.8rem; color: var(--gruen); font-variant-numeric: tabular-nums; }
.ab-summenzeile { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rand); font-variant-numeric: tabular-nums; }
.ab-summenzeile.stark { font-size: 1.25rem; font-weight: 800; border-bottom: none; }
.ab-freigabe { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .8rem 0; padding: .9rem 1rem;
  border-radius: 14px; background: color-mix(in srgb, var(--orange) 10%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
.ab-freigabe .btn-reihe { margin: 0; }

@media (max-width: 720px) {
  .ab-kopf { align-items: flex-start; }
  .ab-frage { font-size: 1.25rem; }
  .ab-zwei { grid-template-columns: 1fr; }
  .ab-gross-wert { font-size: 2.3rem; }
  .ab-kandidat-betragzeile { padding-left: 1rem; }
}
@media (max-width: 720px) {
  .ab-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -.8rem; margin-right: -.8rem; padding: 0 .8rem; }
  .ab-chips::-webkit-scrollbar { display: none; }
  .ab-chip { flex: none; }
  .ab-seite .ab-betrag { font-size: 1.45rem; }
  /* Fälle am Handy: Rechnung und Zahlung kompakt, die Antwort immer im Daumenbereich
     über der unteren Leiste (Befund der Prüfstelle, 21.10.2026) */
  .ab-fall { padding: 1rem; }
  .ab-frage { margin: .3rem 0 .7rem; }
  .ab-paar { gap: .55rem; }
  .ab-seite { padding: .7rem .85rem; }
  .ab-name { font-size: 1.12rem; }
  .ab-zweck { margin-top: .3rem; padding: .35rem .55rem; font-size: .9rem; }
  .ab-gruende { margin: .6rem 0 0; }
  .ab-fall > .ab-knoepfe { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 5;
    margin: .8rem -1rem -1rem; padding: .7rem 4.6rem calc(.7rem + 2px) 1rem; gap: .5rem;   /* rechts Platz für den Hilfe-Knopf */
    background: color-mix(in srgb, var(--flaeche) 96%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--rand);
    border-radius: 0 0 var(--flow-rund) var(--flow-rund); }
  .ab-fall > .ab-knoepfe .btn.gross { flex: 1 1 42%; min-height: 54px; padding: .7rem .9rem; font-size: 1.05rem; }
}

/* ============================================================
 * Lernpfade und Lernkontrollen (lernen.js, Modul 7.11)
 * ============================================================
 * „Eine neue MFA sieht am ersten Tag EINEN großen nächsten Schritt."
 * Eine Karte, ein Knopf, ein Ring. Grün = geschafft, Orange = fällig,
 * sonst ruhig. Keine Rangliste, keine Zahlen über andere.
 * ============================================================ */
.ln-mikro { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--flow-leise); }
.ln-leise { color: var(--flow-leise); font-size: 1rem; }
.ln-gross { font-size: 1.25rem; font-weight: 600; }
.ln-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Ring */
.ln-ring-halter { position: relative; display: grid; place-items: center; width: 58px; height: 58px; flex: none; }
.ln-ring-halter.gross { width: 102px; height: 102px; }
.ln-ring { width: 100%; height: 100%; }
.ln-ring-bahn { fill: none; stroke: var(--rand); stroke-width: 7; }
.ln-ring-wert { fill: none; stroke: var(--akzent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ln-ring-zahl { position: absolute; font-weight: 800; font-size: .95rem; }
.ln-ring-halter.gross .ln-ring-zahl { font-size: 1.35rem; }

/* Startkarte: der eine nächste Schritt */
.ln-start { border-radius: 24px; padding: 22px; border: 1px solid var(--flow-rand-hell);
  background: linear-gradient(150deg, color-mix(in srgb, var(--akzent) 16%, transparent), transparent 55%), var(--flow-karte); }
.ln-start.faellig { background: linear-gradient(150deg, color-mix(in srgb, var(--orange) 20%, transparent), transparent 55%), var(--flow-karte); border-color: var(--orange); }
.ln-start.fertig { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--text);
  background: linear-gradient(150deg, color-mix(in srgb, var(--gruen) 18%, transparent), transparent 60%), var(--flow-karte); }
.ln-start-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ln-start-titel { font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 800; line-height: 1.2; margin: 6px 0 4px; }
.ln-start-zeichen { font-size: 2.6rem; }
.btn.ln-los, .ln-los { display: flex; justify-content: center; width: 100%; margin-top: 18px; min-height: 60px; font-size: 1.2rem; font-weight: 700;
  background: linear-gradient(145deg, var(--akzent), var(--akzent-tief)); color: var(--auf-akzent); box-shadow: 0 0 26px color-mix(in srgb, var(--akzent) 28%, transparent); }
.ln-ganz { display: block; margin-top: 14px; text-align: center; color: var(--flow-leise); text-decoration: none; min-height: 44px; line-height: 44px; }
.ln-ganz:hover { color: var(--text); }
.ln-leer { text-align: center; }
/* Auf dem farbigen Verlauf der Karte reicht das leise Grau nicht (Prüfstelle: 4,38:1).
   Heller gemischt aus Text- und Leisefarbe → rund 8,5:1 auf Türkis, Orange und Grün. */
.ln-start .ln-mikro, .ln-start .ln-leise, .ln-start .ln-ganz { color: color-mix(in srgb, var(--text) 78%, var(--flow-leise)); }

/* Pfad als ruhige Liste */
.ln-pfad { margin-top: 22px; }
.ln-pfad-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ln-pfad-kopf h2 { margin: 0; }
.ln-pfad-kopf > div { flex: 1; }
.ln-pfad-kopf > .ln-ring-halter { flex: none; margin-left: auto; }   /* W3c: der Ring rechts, nicht in der Mitte */
.ln-pfad-kopf.klein { margin-top: 10px; }
.ln-pfad-zeichen { font-size: 1.8rem; }
.ln-abschnitt { border-radius: 20px; padding: 6px 14px 10px; margin-bottom: 12px; background: var(--flow-karte); border: 1px solid var(--rand); }
.ln-abschnitt.faellig { border-color: var(--orange); }
.ln-abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ln-abschnitt-kopf h3, .ln-abschnitt-kopf h4 { margin: 10px 0 6px; }
.ln-frist { font-size: .95rem; font-weight: 700; color: var(--flow-leise); white-space: nowrap; }
.ln-abschnitt.faellig .ln-frist { color: var(--orange); }
.ln-abschnitt.erledigt .ln-frist { color: var(--gruen); }
.ln-schritte { display: grid; gap: 4px; }
.ln-schritt { display: grid; grid-template-columns: 34px 30px 1fr 18px; align-items: center; gap: 8px; min-height: 60px;
  padding: 8px 6px; border-radius: 14px; color: var(--text); text-decoration: none; transition: background .12s ease; }
.ln-schritt:hover { background: color-mix(in srgb, var(--vorder) 6%, transparent); }
.ln-haken { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--flow-rand-hell); display: grid; place-items: center;
  font-weight: 800; color: var(--auf-akzent); }
.ln-schritt.erledigt .ln-haken, .ln-detail-schritt.erledigt .ln-haken, .ek-prinzip.erledigt .ln-haken { background: var(--gruen); border-color: var(--gruen); }
.ln-schritt.erledigt .ln-schritt-titel { color: var(--flow-leise); }
.ln-schritt-zeichen { font-size: 1.3rem; text-align: center; }
.ln-schritt-text { display: grid; gap: 2px; min-width: 0; }
.ln-schritt-titel { font-weight: 650; overflow-wrap: anywhere; }
.ln-pfeil { font-size: 1.6rem; opacity: .45; }

/* Fragen: eine pro Bildschirm */
.ln-fragen-kopf { display: flex; align-items: center; gap: 12px; }
.ln-fragen-titel { font-size: 1.3rem; margin: 2px 0; }
.ln-buehne { max-width: 680px; margin: 14px auto 0; }
.ln-frage-karte { border-radius: 24px; padding: 22px; }
.ln-frage { font-size: clamp(1.3rem, 4.6vw, 1.7rem); line-height: 1.3; margin: 8px 0 18px; }
.ln-optionen { display: grid; gap: 12px; }
.ln-option { min-height: 64px; padding: 14px 18px; border-radius: 16px; text-align: left; font-size: 1.12rem; font-weight: 600;
  color: var(--text); background: var(--flow-karte-hell); border: 2px solid var(--flow-rand-hell); cursor: pointer;
  transition: border-color .12s ease, transform .12s ease; }
.ln-option:hover, .ln-option:focus-visible { border-color: var(--akzent); transform: translateY(-1px); }
.ln-punkte { display: flex; gap: 8px; margin-bottom: 14px; }
.ln-punkt { flex: 1; height: 6px; border-radius: 3px; background: var(--rand); }
.ln-punkt.fertig { background: var(--akzent); }
.ln-punkt.jetzt { background: var(--flow-rand-hell); }
.ln-ok { color: var(--gruen); font-weight: 700; margin-bottom: 8px; }
.ln-patin { border-radius: 14px; padding: 10px 14px; background: color-mix(in srgb, var(--orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); }
.ln-ergebnis-zeichen { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800;
  margin: 0 auto 6px; background: var(--orange); color: var(--orange); }
.ln-frage-karte.bestanden .ln-ergebnis-zeichen { background: var(--gruen); color: var(--auf-akzent); }
.ln-ergebnis { text-align: center; margin: 6px 0; }
.ln-frage-karte.bestanden > .ln-leise, .ln-frage-karte.nochmal > .ln-leise { text-align: center; }
.ln-auswertung { display: grid; gap: 10px; margin-top: 16px; }
.ln-auswertung-zeile { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px; border-radius: 14px; background: var(--flow-karte-hell); }
.ln-auswertung-zeichen { font-weight: 800; font-size: 1.3rem; }
.ln-auswertung-zeile.richtig .ln-auswertung-zeichen { color: var(--gruen); }
.ln-auswertung-zeile.falsch .ln-auswertung-zeichen { color: var(--orange); }
.ln-auswertung-frage { font-weight: 650; }
.ln-auswertung-richtig { margin: 2px 0; }

/* Leitung */
.ln-reiter { display: flex; gap: 8px; margin: 6px 0 16px; overflow-x: auto; }
.ln-reiter-knopf { min-height: 48px; padding: 10px 16px; border-radius: 14px; color: var(--flow-leise); text-decoration: none;
  background: var(--flow-karte); border: 1px solid var(--rand); white-space: nowrap; display: inline-flex; align-items: center; }
.ln-reiter-knopf.aktiv { color: var(--text); border-color: var(--akzent); font-weight: 700; }
.ln-vorschlaege h2 { margin-top: 0; }
.ln-vorschlag { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); }
.ln-team { display: grid; gap: 10px; }
.ln-team-karte { padding: 0; overflow: hidden; }
.ln-team-kopf { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; width: 100%; min-height: 76px;
  padding: 10px 16px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ln-team-text { display: grid; gap: 2px; min-width: 0; }
.ln-zustand { font-weight: 700; font-size: .95rem; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--vorder) 6%, transparent); }
.ln-zustand.stufe-gut { color: var(--gruen); }
.ln-zustand.stufe-achtung { color: var(--orange); }
.ln-zustand.stufe-kritisch { color: var(--rot); }
.ln-team-detail { padding: 0 16px 14px; border-top: 1px solid var(--rand); }
.ln-detail-abschnitt { margin-top: 6px; }
.ln-detail-schritt { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; min-height: 40px; }
.ln-ausgelassen { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--flow-rand-hell); display: grid; gap: 4px; }
.ln-pfad-pflege summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.ln-pflege-abschnitt { border-top: 1px solid var(--rand); margin-top: 10px; padding-top: 4px; }
.ln-pflege-schritt { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ln-pflege-schritt > span { flex: 1; overflow-wrap: anywhere; }
.ln-pflege-neu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ln-pflege-neu .eingabe { flex: 1 1 160px; min-height: 48px; }
.ln-frist-label { display: inline-flex; align-items: center; gap: 6px; }
.ln-frist-feld { width: 6.5em; flex: 0 0 auto !important; min-height: 44px; }
.ln-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.ln-bank-frage { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rand); }
.ln-bank-frage.aus { opacity: .5; }
.ln-bank-optionen { margin: 6px 0; padding-left: 1.4em; }
.ln-bank-optionen li.richtig { color: var(--gruen); font-weight: 700; }
.ln-vorlagen { margin-top: 16px; display: grid; gap: 8px; }
.ln-vorlage { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--flow-karte-hell); }
.ln-frage-formular { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rand); }
.ln-option-feld { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.ln-option-feld input[type="radio"] { width: 26px; height: 26px; flex: none; accent-color: var(--gruen); }
.ln-haken-feld { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.lernen-band { text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--akzent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent); }

@media (max-width: 640px) {
  .ln-start { padding: 18px; }
  .ln-ring-halter.gross { width: 84px; height: 84px; }
  .ln-team-kopf { grid-template-columns: 52px 1fr; }
  .ln-team-kopf .ln-zustand { grid-column: 1 / -1; justify-self: start; }
  .ln-vorschlag, .ln-bank-frage, .ln-vorlage { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .ln-ring-wert, .ln-option { transition: none; } }
.ln-fragen-kopf > .btn { flex: none; width: 56px; min-width: 56px; padding: 0; }
.hb-abschnitt { scroll-margin-top: 72px; }

/* ============================================================
   Geräte (Module 7.13/7.14) — So geht's · Bin ich eingewiesen? · Nächste Prüfung
   Handy zuerst: eine Spalte, große Flächen, oben ein Satz in einer Farbe.
   Farben nur über die Variablen oben; --gr-farbe setzt die Stufe.
   ============================================================ */
.gr-gruen  { --gr-farbe: var(--gruen); }
.gr-orange { --gr-farbe: var(--orange); }
.gr-rot    { --gr-farbe: var(--rot); }
.gr-grau   { --gr-farbe: var(--text-leise); }

.gr-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.gr-kopf h1 { margin-bottom: 2px; }
.gr-kopf .btn-reihe { margin: 0 0 8px; }
.gr-praxen { margin: 12px 0 16px; }

/* Mein Stand in einem Satz */
.gr-ich {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; padding: 12px 16px;
  border-radius: var(--flow-rund); background: var(--flow-karte); border: 1px solid var(--rand);
}
.gr-ich-zahl { font-size: 1.6rem; font-weight: 800; color: var(--orange); letter-spacing: -.02em; }
.gr-ich-fertig .gr-ich-zahl { color: var(--gruen); }

/* Liste nach Räumen */
.gr-raum { margin-bottom: 18px; }
.gr-raum-kopf { display: flex; align-items: baseline; gap: 10px; margin: 0 4px 8px; }
.gr-raum-kopf b { font-size: 1.05rem; }
.gr-liste { display: grid; gap: 8px; }
.gr-zeile {
  display: grid; grid-template-columns: 18px 1fr 16px; gap: 14px; align-items: center;
  min-height: 64px; padding: 12px 16px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: var(--flow-karte); border: 1px solid var(--rand); transition: border-color .12s ease, transform .1s ease;
}
.gr-zeile:hover { border-color: var(--flow-rand-hell); }
.gr-zeile:active { transform: scale(.99); }
.gr-zeile-text b { font-size: 1.05rem; }
.gr-zeile-satz { font-size: .95rem; color: var(--text-leise); }
.gr-text-rot { color: var(--rot); } .gr-text-orange { color: var(--orange); }
.gr-pfeil { font-size: 1.6rem; color: var(--text-leise); line-height: 1; }
.gr-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--gr-farbe); box-shadow: 0 0 10px var(--gr-farbe); display: inline-block; flex: none; }

/* Geräteseite: oben ein Satz, eine Farbe */
.gr-zurueck { display: inline-flex; align-items: center; min-height: 48px; color: var(--text-leise); text-decoration: none; font-size: 1rem; }
.gr-zurueck:hover { color: var(--text); }
.gr-held {
  position: relative; overflow: hidden; margin: 4px 0 16px; padding: 20px 20px 18px; border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gr-farbe) 20%, transparent), transparent 70%), var(--flow-karte);
  border: 1px solid color-mix(in srgb, var(--gr-farbe) 45%, var(--rand));
  box-shadow: var(--flow-glanz);
}
.gr-held::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gr-farbe); }
.gr-held-gruen { --gr-farbe: var(--gruen); } .gr-held-orange { --gr-farbe: var(--orange); } .gr-held-rot { --gr-farbe: var(--rot); }
.gr-held-ort { color: var(--text-leise); font-size: .95rem; }
.gr-held-name { margin: 2px 0 0; font-size: 1.9rem; line-height: 1.15; letter-spacing: -.01em; }
.gr-held-typ { color: var(--text-leise); font-size: .95rem; margin-top: 2px; }
.gr-held-lage { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.gr-held-zeichen {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800; background: var(--gr-farbe); color: var(--auf-akzent);
}
.gr-held-rot .gr-held-zeichen { color: var(--auf-rot); }
.gr-held-satz { font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.gr-held-unter { color: var(--text); opacity: .85; margin-top: 2px; }

.gr-karte h2 { font-size: 1.2rem; margin: 0 0 12px; }
.gr-kurz { font-size: 1.05rem; margin-bottom: 12px; }
.gr-karte .hb-schritte { margin: 0 0 12px; }
.gr-stand {
  padding: 12px 14px; border-radius: 14px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--gr-farbe) 12%, transparent);
  border-left: 5px solid var(--gr-farbe);
}
.gr-stand b { font-size: 1.1rem; }
.gr-frage { font-weight: 700; font-size: 1.1rem; margin: 6px 0 10px; }

/* Große Personen-Knöpfe: antippen statt aus einer Liste wählen */
.gr-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.gr-wahl-knopf {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; text-align: left;
  border-radius: 14px; border: 1px solid var(--rand); background: var(--flach); color: var(--text);
  font: inherit; font-size: 1.05rem; cursor: pointer;
}
.gr-wahl-knopf:hover { border-color: var(--akzent); }
.gr-wahl-name { flex: 1; }
.gr-wahl-haken {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none;
  border: 2px solid var(--rand); color: transparent; font-weight: 800;
}
.gr-wahl-knopf[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, var(--flach)); }
.gr-wahl-knopf[aria-pressed="true"] .gr-wahl-haken { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.gr-marke {
  font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  color: var(--akzent-text); background: color-mix(in srgb, var(--akzent) 10%, transparent);
}

/* Prüfungen */
.gr-pruef { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rand); }
.gr-pruef:first-of-type { border-top: 0; padding-top: 0; }
.gr-pruef-text b { font-size: 1.05rem; }
.gr-pruef-knopf { grid-column: 1 / -1; justify-self: start; min-height: 48px; }
.gr-pille {
  padding: 6px 12px; border-radius: 999px; font-size: .9rem; font-weight: 750; white-space: nowrap;
  color: var(--gr-farbe); background: color-mix(in srgb, var(--gr-farbe) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gr-farbe) 45%, transparent);
}
.gr-fachlich {
  margin-top: 6px; font-size: .9rem; color: var(--orange);
  padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--orange) 10%, transparent);
}

/* Wer ist eingewiesen */
.gr-team { display: grid; gap: 2px; margin-bottom: 12px; }
.gr-team-zeile { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rand); }
.gr-team-zeichen {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  color: var(--gr-farbe); background: color-mix(in srgb, var(--gr-farbe) 10%, transparent);
}

/* Problem melden, Verwalten */
.gr-problem { margin: 6px 0 18px; }
.gr-sperren { width: 100%; }
/* Problem melden (Kritik 11/2026, D-5): oben, ein großer Knopf; Meldungen für Paten und Leitung */
.gr-melden { display: grid; gap: 6px; margin: 4px 0 14px; }
.gr-melden-knopf { width: 100%; justify-content: center; }
.gr-melden-vorschau { max-width: 100%; max-height: 220px; border-radius: 12px; margin: 4px 0 8px; object-fit: contain; }
.gr-meldung { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.gr-meldung:last-child { border-bottom: 0; }
.gr-meldung-text { margin: 0; font-weight: 600; }
.gr-meldung-foto img { max-width: 100%; max-height: 240px; border-radius: 10px; display: block; }
.gr-meldung .btn { justify-self: start; }
.gr-team-zu { margin: 0 0 14px; }
.gr-team-zu > summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; }
.gr-gemeldet h2 { margin-top: 0; }
.gr-verwalten summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; min-height: 48px; display: flex; align-items: center; }
.gr-hinweis { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 10%, transparent); }
.gr-punkt-zeile { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.gr-knoepfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 12px 0; }
.gr-knoepfe .btn { justify-content: flex-start; }
.gr-unterliste { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand); }
.gr-link { background: none; border: 0; padding: 6px 0; color: var(--akzent-text); font: inherit; text-align: left; cursor: pointer; min-height: 48px; }
.gr-link:hover { text-decoration: underline; }
.gr-verlauf { padding: 4px 0; }
.gr-mehr { margin: 10px 0; }
.gr-mehr summary { cursor: pointer; color: var(--akzent-text); min-height: 48px; display: flex; align-items: center; }
.gr-pate { padding: 10px 0; border-bottom: 1px solid var(--rand); }

/* „Wartet auf dich" — Start und Geräte */
.gr-offen { border-color: color-mix(in srgb, var(--orange) 50%, var(--rand)); }
.gr-offen-zeile { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rand); }
.gr-offen-zeile:first-of-type { border-top: 0; }
.gr-offen-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

.gr-leer { text-align: center; padding: 32px 20px; }
.gr-leer-zeichen { font-size: 3rem; }

@media (max-width: 640px) {
  .gr-held-name { font-size: 1.6rem; }
  .gr-offen-zeile { grid-template-columns: 1fr; }
  .gr-offen-knoepfe .btn { flex: 1; }
  .gr-wahl { grid-template-columns: 1fr; }
  .gr-knoepfe { grid-template-columns: 1fr; }
  /* Praxis-Auswahl als Wischleiste — die Geräte sollen ohne Scrollen sichtbar sein */
  .gr-praxen { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .gr-praxen .pa-praxis { flex: none; min-height: 48px; padding: 8px 14px; justify-content: center; }
  .gr-praxen .pa-praxis b { font-size: .95rem; white-space: nowrap; }
}
.gr-held-zutun { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand); font-size: .95rem; color: var(--text-leise); }
.gr-held-zutun b { color: var(--text); }
.gr-held-knopf { width: 100%; margin-top: 16px; }
/* Zuständigkeit je Listenart (22.10.2026): wer erstellt, wer arbeitet ab */
.ls-zustaendig { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .3rem; font-size: .9rem; }
/* Chip unter dem Mauszeiger: style.css färbt die Schrift „primaer" — im dunklen Flow-Design wäre das dunkel auf dunkel */
.hb-chip:hover { color: var(--text); }
.hb-chip.aktiv:hover { color: var(--auf-akzent); }
.gr-held-liste { margin: 12px 0 0; padding: 12px 0 0 1.2rem; border-top: 1px solid var(--rand); display: grid; gap: 4px; }
.gr-held-liste li { color: var(--text); }

/* ---------- Wer macht was (ADR-027): zwei große Felder je Erzeuger ---------- */
.zu-warnung { border-color: var(--orange); }
.zu-zeile { margin-bottom: .8rem; }
.zu-zeile.zu-fehlt { border-color: var(--orange); }
.zu-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.zu-name { font-size: 1.15rem; font-weight: 700; }
.zu-ok { color: var(--gruen); font-weight: 600; white-space: nowrap; }
.zu-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: .8rem; }
.zu-feld { display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem; border-radius: 14px; background: color-mix(in srgb, var(--vorder) 4%, transparent); }
.zu-feld-fehlt { outline: 2px solid var(--orange); }
.zu-frage { font-weight: 700; }
.zu-wahl { min-height: 48px; font-size: 1.05rem; }
.zu-fest { padding: .6rem 0; color: var(--flow-leise); }
.zu-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.zu-chip { min-height: 44px; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--rand); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.zu-chip.an { background: color-mix(in srgb, var(--gruen) 20%, transparent); border-color: var(--gruen); color: var(--gruen); }

/* Aufgaben, Abnahme 22.10.2026: Kopfzeile lesbar statt Technik in Großbuchstaben, Papier ganz unten */
.af-herkunft { font-size: .85rem; color: var(--flow-leise); letter-spacing: 0; text-transform: none; }
.af-abschluss .btn[disabled] { opacity: .45; cursor: not-allowed; }
.af-papier { margin: 1.4rem 0 .4rem; text-align: center; }

/* ============================================================
 * Ein System für alle Bildschirme (Feinschliff 22.10.2026)
 * ============================================================
 * Die Module entstanden in mehreren Sitzungen. Hier wird alles auf
 * einen Rhythmus gezogen — ohne Funktion zu ändern:
 *   Rundung   Karte 20 px · Zeile/Knopf 14 px · Abzeichen rund
 *   Tipp-Ziel mindestens 44 px, Hauptknöpfe 48 px
 *   Schrift   nichts unter 14 px, Hinweise 16 px
 *   Zustände  leer, lädt, Fehler sehen überall gleich aus
 * Die Regeln stehen bewusst am Ende: Sie gewinnen gegen die
 * Modulabschnitte darüber, ohne dort etwas anzufassen.
 * ============================================================ */
:root { --flow-rund: 20px; --rund-zeile: 14px; }

/* --- Rundungen: eine Familie --- */
.cp-kachel, .cp-fokus, .cp-kern, .bf-box, .ss-box, #modal-box, .ab-seite, .ln-start, .ln-frage-karte, .gr-leer, .pa-leer,
.hb-kapitel-kopf, .hb-fenster { border-radius: var(--flow-rund) !important; }
.hb-chip, .hb-reiter-knopf, .ls-vorschau-kachel, .ab-fall, .ln-option, .af-aufgabe, .gr-geraet, .rc-schritt, .hb-treffer-zeile { border-radius: var(--rund-zeile); }

/* --- Tipp-Ziele: Reiter und Chips der Module auf Knopfhöhe --- */
.hb-reiter-knopf, .hb-chip { min-height: 44px; display: inline-flex; align-items: center; font-size: .95rem; padding: 0 14px; }
.hb-chip.gross, .ls-standort-wahl .hb-chip, .ls-quartal-wahl .hb-chip, .rc-gross .hb-chip { min-height: 48px; }
.hb-reiter { gap: 8px; }
.klein-btn { min-height: 44px; }

/* --- Schrift: nichts unter 14 px --- */
.feld-hinweis, .hb-leise, .hb-meta, .kal-info { font-size: .92rem; }
.abzeichen, .tag-chip, .ab-marke, .ls-marke { font-size: .82rem; }
.hb-mikro, .cp-fokus-titel { font-size: .78rem; }
.hb-art, .hb-verweis, .cp-teil, .cp-ring-zahl { font-size: .82rem; }
.cp-satz { font-size: .95rem; }
th { font-size: .85rem; }
.markierung, .vertretung-offen, .vertretung-ok { font-size: .8rem; }

/* --- Kopf jeder Seite: Titel, darunter ein leiser Satz --- */
#inhalt h1 { font-size: 1.85rem; margin: .5rem 0 .9rem; }
#inhalt h1 + .feld-hinweis, #inhalt h1 + p.feld-hinweis { margin: -.6rem 0 1rem; font-size: 1rem; max-width: 60ch; }
.hb-kopfzeile { align-items: center; gap: 12px; }

/* --- Leer, lädt, Fehler: überall dieselbe Sprache --- */
.leer-zustand {
  display: grid; place-items: center; gap: 6px; text-align: center; padding: 28px 16px; color: var(--text-leise);
}
.leer-zustand b { color: var(--text); font-size: 1.05rem; }
.leer-zustand .zeichen { font-size: 2.4rem; line-height: 1; margin-bottom: 4px; }
.leer-zustand .btn, .leer-zustand .ua-klein { margin-top: 8px; }
.lade-zeile {
  display: flex; align-items: center; gap: 10px; color: var(--text-leise); padding: 12px 0; min-height: 48px;
}
.lade-zeile::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 3px solid var(--rand); border-top-color: var(--akzent); animation: cp-dreh 1s linear infinite;
}
.fehler-karte {
  max-width: 560px; padding: 20px; border-radius: var(--flow-rund);
  background: color-mix(in srgb, var(--rot) 10%, transparent); border: 1px solid color-mix(in srgb, var(--rot) 45%, transparent);
}
.fehler-karte h2 { margin: 0 0 6px; }
.fehler-karte p { margin: 0 0 14px; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .lade-zeile::before { animation: none; } }

/* ============================================================
 * Kalender (Neugestaltung 22.10.2026)
 * ============================================================
 * Am Rechner ein Raster: Tage als Zeilen, Standorte als Spalten, je
 * Zelle die Zahl der Anwesenden mit Ampelpunkt. Am Handy wird jeder
 * Tag eine Zeile mit einem Chip je Standort — statt einer Karte je
 * Standort und Tag (vorher 8 700 Pixel hoch).
 * ============================================================ */
.kl-nav { margin-top: 0; }
.kl-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--text-leise); font-size: .95rem; margin-bottom: 14px; }
.kl-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: var(--text-leise); }
.kl-punkt.gut { background: var(--gruen); }
.kl-punkt.achtung { background: var(--orange); }
.kl-punkt.rot { background: var(--rot); }
.kl-punkt.zu { opacity: .45; }
.kl-gitter { display: grid; gap: 6px; }
.kl-gitter.kl-vorbei-zu > .kl-tag.vorbei { display: none; }   /* W3b: vergangene Tage eingeklappt */
.kl-vorbei-knopf { justify-self: start; min-height: 44px; }
.kl-kopfzeile, .kl-tag { display: grid; grid-template-columns: 110px repeat(var(--kl-spalten), minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.kl-kopfzeile { position: sticky; top: 64px; z-index: 5; padding: 8px 0; background: var(--hintergrund); }
.kl-standort { font-weight: 700; color: var(--text-leise); font-size: .95rem; padding: 0 12px; }
.kl-datum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 8px; font-variant-numeric: tabular-nums; }
.kl-datum b { width: 2em; }
.kl-zahl { font-weight: 700; }
.kl-marke { font-size: .8rem; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--blau) 18%, transparent); color: var(--text); }
.kl-marke.ferien { background: color-mix(in srgb, var(--lila) 20%, transparent); }
.kl-tag.we .kl-datum { color: var(--text-leise); }
.kl-tag.heute .kl-datum { color: var(--akzent-text); }
.kl-tag.heute .kl-datum b { text-decoration: underline; text-underline-offset: 4px; }
.kl-zu { grid-column: 2 / -1; display: flex; align-items: center; padding: 0 12px; min-height: 44px; }
.kl-zelle {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'punkt ort anzahl' 'extra extra extra'; align-items: center; gap: 2px 8px;
  min-height: 56px; padding: 8px 12px; border-radius: var(--rund-zeile); cursor: pointer; text-align: left; font: inherit;
  background: var(--flow-karte); border: 1px solid var(--rand); color: var(--text);
}
.kl-zelle:hover { border-color: var(--akzent); }
.kl-zelle .kl-punkt { grid-area: punkt; }
.kl-ort { grid-area: ort; display: none; font-weight: 600; }
.kl-anzahl { grid-area: anzahl; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.kl-extra { grid-area: extra; color: var(--text-leise); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-zelle.gut { background: color-mix(in srgb, var(--gruen) 9%, transparent); }
.kl-zelle.achtung { background: color-mix(in srgb, var(--orange) 12%, transparent); }
.kl-zelle.rot { background: color-mix(in srgb, var(--rot) 13%, transparent); }
.kl-zelle.zu { background: color-mix(in srgb, var(--vorder) 3%, transparent); color: var(--text-leise); }
.kl-zelle.zu .kl-anzahl { font-size: .95rem; font-weight: 600; }
.kl-zelle.offen { border-color: color-mix(in srgb, var(--rot) 55%, transparent); }
.kl-zelle.offen .kl-extra { color: var(--text); font-weight: 600; }
@media (max-width: 860px) {
  .kl-kopfzeile { display: none; }
  .kl-gitter { gap: 8px; }
  .kl-tag { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-radius: var(--rund-zeile); background: var(--flow-karte); border: 1px solid var(--rand); }
  .kl-tag.zu { padding: 6px 12px; background: none; border-color: transparent; }
  .kl-tag.heute { border-color: var(--akzent); }
  .kl-datum { width: 100%; padding: 0; min-height: 28px; }
  .kl-zu { min-height: 28px; padding: 0; }
  .kl-zelle { flex: 1 1 calc(50% - 6px); min-height: 48px; padding: 6px 10px; background: color-mix(in srgb, var(--vorder) 4%, transparent); }
  .kl-ort { display: inline; font-size: .92rem; }
  .kl-anzahl { font-size: 1.05rem; }
  .kl-extra { font-size: .8rem; }
}

/* Zusammenfassung einer Person und Tariftabellen (22.10.2026): Zahlen als Kacheln, Zeilen statt Tabellen */
.kl-kopfzeile, .kl-tag { grid-template-columns: 150px repeat(var(--kl-spalten), minmax(0, 1fr)); }
.mb-zahlen { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 14px; max-width: 880px; }
.mb-zahl { min-height: 84px; gap: 2px; }
.mb-zahl-wert { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.mb-rest { font-size: 1.1rem; white-space: nowrap; }
.zt-konto-zahl.mb-rest { font-size: 1.1rem; margin: 0; }
.mb-art { display: inline-flex; align-items: center; gap: 8px; }
.mb-monat .zt-datum b { font-size: .95rem; }
.mb-plus { color: var(--gruen); }
.mb-minus { color: var(--orange); }
.mb-fussnote { max-width: 880px; margin: 4px 0 14px; font-size: .9rem; }
.mb-export { margin-bottom: 14px; }
.dp-mehr-knopf.st-link { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 860px) { .kl-kopfzeile, .kl-tag { grid-template-columns: 110px repeat(var(--kl-spalten), minmax(0, 1fr)); } }
.tf-knopf { margin: -2px 0 2px 36px; min-height: 44px; padding: 0 12px; font-size: .9rem; }
.tf-fruehere { margin-left: 36px; }
.tf-alt { opacity: .85; }
.hb-mikro, .cp-fokus-titel, .cp-bald-marke { font-size: max(.78rem, 13px); }
.zt-heute-zeile { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rand); }
.za-fehlen { background: color-mix(in srgb, var(--orange) 10%, transparent); border-color: color-mix(in srgb, var(--orange) 40%, transparent); margin-bottom: 8px; }

/* Abnahme 22.10.2026: Kalender — ungeplante Tage neutral; Feiertag bleibt in seiner Zelle. Mitarbeiter — Sammelzeile. */
.kl-punkt.offen-plan { background: transparent; border: 2px dashed var(--text-leise); width: 12px; height: 12px; }
.kl-zelle.offen-plan { background: color-mix(in srgb, var(--vorder) 2.5%, transparent); border-style: dashed; color: var(--text-leise); }
.kl-zelle.offen-plan .kl-anzahl { color: var(--text-leise); font-weight: 600; }
.kl-datum { min-width: 0; }
.kl-marke { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-sammel { max-width: 880px; margin-bottom: 12px; }
.cp-fokus-mehr { color: var(--text-leise); font-size: .92rem; padding: 4px 14px 2px; }
.cp-fokus .cp-fokus-titel:not(:first-child) { margin-top: 10px; }
/* „Gelesen ✓" am Ende des Kapitels (Lernpfad); fest am unteren Rand, sobald der Anfang aus dem Blick ist */
.hb-gelesen-ende { margin: 22px 0 8px; }
.hb-gelesen-ende.fest { position: sticky; bottom: 16px; z-index: 5; }
.hb-gelesen-knopf { width: 100%; min-height: 60px; font-size: 1.2rem; font-weight: 800; box-shadow: 0 10px 30px color-mix(in srgb, var(--schatten) 45%, transparent); }
@media (max-width: 720px) {
  .hb-gelesen-ende.fest { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .hb-gelesen-ende.fest .hb-gelesen-knopf { width: calc(100% - 64px); }   /* Platz für den runden Hilfeknopf */
}

/* ---------- Hilfe: „So geht's hier" (Anleitung, 22.10.2026) ----------
   Unter jeder Überschrift ein Satz; im Hilfe-Fenster zuerst Bild und Schritte
   für genau diesen Bildschirm. Farben nur über Variablen. */
.seiten-satz { color: var(--text-leise); font-size: 1.02rem; line-height: 1.45; margin: -.35rem 0 1.1rem; max-width: 62ch; }
h1 + .seiten-satz { margin-top: -.6rem; }
.hb-hilfe-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.hb-hilfe-kopf h2 { margin: .15rem 0 .25rem; font-size: 1.5rem; }
.hb-hilfe-satz { margin: 0; color: var(--text-leise); font-size: 1.02rem; line-height: 1.45; }
.hb-hilfe-hier { background: color-mix(in srgb, var(--akzent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 28%, transparent); border-radius: var(--flow-rund); padding: 1rem 1.1rem; }
.hb-hilfe-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.1rem; align-items: start; margin-top: .5rem; }
.hb-hilfe-bild-halter { display: block; width: 100%; padding: 0; border: 1px solid var(--flow-rand-hell); border-radius: 12px;
  overflow: hidden; background: var(--flach); cursor: zoom-in; box-shadow: var(--flow-glanz); }
.hb-hilfe-bild { display: block; width: 100%; height: auto; }
.hb-hilfe-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hb-hilfe-schritte li { display: flex; gap: .75rem; align-items: flex-start; }
.hb-hilfe-schritte .hb-schritt-nr { width: 32px; height: 32px; flex: 0 0 32px; font-size: .95rem; }
.hb-hilfe-schritt-text { font-size: 1.02rem; line-height: 1.45; padding-top: .2rem; }
.hb-foto-voll { background: var(--flach); border-radius: 14px; padding: .6rem; cursor: zoom-out; }
.hb-foto-voll img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 760px) {
  .hb-hilfe-zeile { grid-template-columns: 1fr; }
  .hb-hilfe-kopf h2 { font-size: 1.3rem; }
}

.hb-start-titel { margin: 0 0 .4rem; font-weight: 600; }
.hb-schaufenster-vorne .seiten-satz { display: table; margin: 0 0 .8rem; padding: .35rem .75rem; border-radius: 10px;
  background: color-mix(in srgb, var(--flaeche) 78%, transparent); color: var(--text-leise); }

/* Mein Medizintechnik-Handbuch und „Wer ist eingewiesen“ (22.10.2026) — Farben nur aus Variablen */
.gr-hb-zahl { width: auto; min-width: 64px; padding: 0 12px; border-radius: 999px; font-size: 1.05rem; }
.gr-hb { margin-bottom: 18px; }
.gr-hb-titel { font-size: 1.1rem; margin: 6px 4px 10px; }
.gr-hb-zeile {
  display: grid; gap: 10px; padding: 14px 16px; margin-bottom: 10px; border-radius: 18px;
  background: var(--flow-karte); border: 1px solid var(--rand); border-left: 5px solid var(--gr-farbe);
}
.gr-hb-kopf { display: grid; grid-template-columns: 34px 1fr 16px; gap: 12px; align-items: center; min-height: 48px; text-decoration: none; color: var(--text); }
.gr-hb-zeichen {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  color: var(--gr-farbe); background: color-mix(in srgb, var(--gr-farbe) 10%, transparent);
}
.gr-hb-text b { font-size: 1.08rem; }
.gr-hb-stand { display: grid; gap: 2px; }
.gr-hb-bald .gr-hb-stand b { color: var(--orange); }
.gr-hb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.gr-hb-knopf { min-height: 48px; }
.gr-hb-zuordnung { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--rand); }
.gr-hb-zuordnung select { min-height: 48px; }
.gr-hb-fuss { margin-top: 4px; }
.gr-mx-luecken .gr-ich-zahl { color: var(--rot); }
.gr-mx-halter { padding: 0; overflow-x: auto; }
.gr-mx { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.gr-mx th, .gr-mx td { padding: 10px 12px; border-bottom: 1px solid var(--rand); text-align: center; white-space: nowrap; }
.gr-mx thead th { font-size: .9rem; color: var(--text-leise); font-weight: 600; }
.gr-mx th[scope="row"], .gr-mx thead th:first-child {
  position: sticky; left: 0; z-index: 1; text-align: left; background: var(--flach);
}
.gr-mx a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.gr-mx a:hover { color: var(--akzent-text); }
.gr-mx-zelle span {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 800;
  color: var(--gr-farbe); background: color-mix(in srgb, var(--gr-farbe) 10%, transparent);
}
.gr-mx-legende { margin: 8px 4px 16px; }
.gr-ich { flex-wrap: wrap; }
.gr-ich-link { margin-left: auto; color: var(--akzent-text); text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; font-weight: 600; }
.gr-mx th { text-transform: none; letter-spacing: normal; font-size: .98rem; }
.gr-mx th[scope="row"] { font-weight: 600; color: var(--text); }
.gr-mx-zelle.gr-rot span { background: var(--rot); color: var(--auf-rot); }   /* Lücke: volle Fläche, Kontrast 6,6 : 1 */
.zu-hinweis-liste { margin: .4rem 0 .2rem 1.1rem; padding: 0; }
.zu-hinweis-liste li { margin: .15rem 0; }
.zu-alles-gut { color: var(--gruen); font-weight: 600; }

/* Hilfe-Knopf in der Kopfzeile (Endabnahme 22.10.2026): nicht mehr schwebend über dem Inhalt,
   sondern neben Suche und Konto — 48 px wie diese, überall gleich. */
.hb-hilfe-knopf.im-kopf {
  position: static !important; width: 48px !important; height: 48px !important; min-width: 48px; padding: 0;
  right: auto !important; bottom: auto !important; opacity: 1 !important; transform: none;
  background: color-mix(in srgb, var(--akzent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 50%, transparent); color: var(--akzent-text); box-shadow: none;
}
.hb-hilfe-knopf.im-kopf:hover { transform: none; background: color-mix(in srgb, var(--akzent) 22%, transparent); }
.hb-hilfe-knopf.im-kopf .hb-hilfe-zeichen { font-size: 1.3rem; font-weight: 900; }
@media (max-width: 720px) {
  .kopf-werkzeuge { gap: 6px; }
  #inhalt { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }   /* nur noch die Leiste unten */
}
@media (max-width: 860px) { .cp-lage { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
 * QR-Schnitzeljagd (schnitzeljagd.js, AB.5)
 * ============================================================
 * Die Stempelkarte: Felder, die sich beim Scannen füllen. Grün = gestempelt,
 * Orange-Rand = wartet auf die Patin, dicker Rand = erste 3 Stunden.
 * ============================================================ */
.sj-karte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 30%), 1fr)); gap: 10px; margin-top: 18px; }
.sj-feld { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; min-height: 104px; border-radius: 18px;
  text-decoration: none; color: var(--text); background: var(--flow-karte); border: 1px solid var(--rand); text-align: center; }
.sj-feld:hover { border-color: var(--akzent); }
.sj-feld.sj-erste { border-width: 2px; border-color: var(--flow-rand-hell); }
.sj-feld-nr { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
  border: 2px dashed var(--flow-rand-hell); color: var(--text); }
.sj-feld-name { font-size: .85rem; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; color: color-mix(in srgb, var(--text) 82%, var(--flow-leise)); }
.sj-feld.sj-gestempelt { background: color-mix(in srgb, var(--gruen) 16%, var(--flow-karte)); border-color: var(--gruen); }
.sj-feld.sj-gestempelt .sj-feld-nr { background: var(--gruen); border: 0; color: var(--auf-akzent); }
.sj-feld.sj-wartet .sj-feld-nr, .sj-feld.sj-nochmal .sj-feld-nr { border: 2px solid var(--orange); color: var(--orange); }
.sj-legende { margin-top: 10px; }
.sj-video { width: 100%; max-height: 60vh; border-radius: 16px; background: var(--flow-tief); }

.sj-kopf { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.sj-titel { margin: 2px 0; font-size: clamp(1.4rem, 5vw, 1.9rem); }
.sj-nr { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
  background: var(--flow-karte-hell); border: 2px solid var(--akzent); color: var(--text); }
.sj-nr.an { background: var(--gruen); border-color: var(--gruen); color: var(--auf-akzent); }
.sj-nr.klein { width: 40px; height: 40px; font-size: 1rem; }
.sj-wissen { display: grid; gap: 12px; }
.btn.sj-clip { min-height: 56px; font-size: 1.1rem; }
.sj-text { font-size: 1.1rem; line-height: 1.5; margin: 0; }
.sj-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hb-mini.aktiv { border-color: var(--akzent); color: var(--text); background: color-mix(in srgb, var(--akzent) 18%, transparent); }
.sj-aufgabe .ln-frage { margin-top: 6px; }
.sj-warte { font-size: 1.1rem; font-weight: 600; color: var(--orange); }
.sj-mangel-halter { margin-top: 18px; }
.btn.sj-mangel { width: 100%; min-height: 52px; }
.sj-patin-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); }
.sj-patin-zeile .btn-reihe { margin: 0; flex: none; }
.sj-standort { max-width: 260px; min-height: 48px; }
.sj-pflege { padding: 12px 14px; }
.sj-pflege-kopf { display: flex; align-items: center; gap: 12px; }
.sj-pflege-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sj-fehlt { color: var(--orange); font-weight: 600; }

/* ---------- Onboarding (ADR-061): ein Bereich, zwei Teile ---------- */
.ob-bilanz { margin-top: 10px; text-align: center; }
.ob-ansprech p { margin: 0 0 8px; }
.ob-ansprech-inhalt { display: grid; gap: 10px; justify-items: start; }
.ob-videos { display: grid; gap: 8px; padding: 4px 0 8px; }
.ob-video { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--karte); border: 1px solid var(--rand); color: inherit; text-decoration: none; min-height: 44px; }
.ob-video-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ob-video-pfeil { color: var(--akzent); font-size: 1.3em; }
.ob-video.fertig .ob-video-name { color: var(--text-leise); }
.ob-teil { display: flex; align-items: center; gap: 12px; margin: 28px 0 10px; }
.ob-teil h2 { margin: 0; }
.ob-teil > div { flex: 1; min-width: 0; }
.ob-teil-nr { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: var(--akzent); color: var(--auf-akzent); }
.ob-teil-stand { flex: none; font-weight: 700; color: var(--flow-leise); }
.ob-vorort .sj-karte { margin-top: 12px; }
.sj-naechste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sj-naechste .btn-reihe { margin: 0; }

/* ---------- Stationen am Raum bzw. Gerät, Lücken (ADR-061) ---------- */
.sj-ort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.sj-ort-feld { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; }
.sj-ort-schalter { width: 22px; height: 22px; accent-color: var(--akzent); }
.sj-foto { width: 100%; max-height: 50vh; object-fit: cover; border-radius: 16px; background: var(--flow-tief); }
.sj-luecken { display: grid; gap: 12px; margin-top: 18px; }
.sj-luecken .stb-kopf { margin: 0; }
.sj-luecke { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rand); }
.sj-luecke .btn-reihe { margin: 0; flex-wrap: wrap; }
.sj-luecke .eingabe { flex: 1 1 200px; min-height: 44px; }
.sj-datei { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sj-da { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 10px; border-top: 1px solid var(--rand); }
a.sj-pflege { display: block; color: var(--text); text-decoration: none; }
a.sj-pflege:hover { border-color: var(--akzent); }
.sj-luecke-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); }
.sj-ok { color: var(--gruen); font-weight: 600; }
.sj-bilanz { font-weight: 700; margin: 12px 0 8px; }
@media (max-width: 640px) {
  .sj-karte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sj-patin-zeile { flex-direction: column; align-items: stretch; }
}
/* Mängel: große Wahlknöpfe statt Links (zum Tippen am Handy) */
.sj-wahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.sj-wahl { min-height: 52px; padding: 10px 12px; border-radius: 14px; text-align: left; font: inherit; font-size: 1rem; cursor: pointer;
  color: var(--text); background: var(--flow-karte-hell); border: 2px solid var(--rand); }
.sj-wahl:hover { border-color: var(--flow-rand-hell); }
.sj-wahl.aktiv { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, var(--flow-karte-hell)); font-weight: 700; }

/* Bereich „Heute" mit zwei Seiten (GF): Reiter Cockpit | Mein Tag oben auf beiden Seiten */
.heute-reiter { display: flex; gap: 8px; margin: 0 0 14px; }
.heute-reiter .dp-wahl { text-decoration: none; }

/* ============================================================
 * Hell und Dunkel (23.10.2026): ein System, zwei Farbsätze
 * Die Farben stehen allein in farben.css; dieser Abschnitt sagt nur,
 * wo welche Variable hingehört. Hell: ruhige Fläche, weiße Karten mit
 * weichem Schatten statt Rahmen, Navy-Schrift, Teal als Akzent.
 * Dunkel: der bisherige Flow-Stil (--karte-schatten ist dort „none").
 * ============================================================ */

/* Schrift: Poppins nur, wenn sie auf dem Gerät liegt — nichts wird von außen geladen */
body { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Kopfleiste: Milchglas über der Fläche, Schrift in Textfarbe */
#kopfleiste { color: var(--text); box-shadow: var(--karte-schatten); }
.logo, .logo a { color: var(--text); font-weight: 800; }

/* Karten: im Hellen trägt der Schatten, der Rahmen tritt zurück */
.karte, .cp2-kachel, .hb-kachel, .bf-box, .ss-box, .ab-seite, .ln-start, .ln-frage-karte,
.gr-geraet, .af-aufgabe, .ls-vorschau-kachel, .ab-fall, .nf-kachel, .hb-schaufenster {
  box-shadow: var(--karte-schatten), var(--flow-glanz);
}
.karte { border-color: color-mix(in srgb, var(--rand) 70%, transparent); }

/* Aktiver Bereich oben: Akzent als Fläche, im Hellen kräftig */
#hauptmenu .nav-bereich.aktiv { color: var(--akzent-text); }

/* Konto-Feld: Darstellung wählen (Hell / Dunkel / Wie das Gerät) */
.konto-darstellung { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; }
.konto-titel { font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }
#darstellung-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#darstellung-wahl .dp-wahl { min-height: 48px; justify-content: center; font-size: .95rem; }
#darstellung-wahl .dp-wahl[data-wahl="geraet"] { grid-column: 1 / -1; }

/* Gemessen 23.10.2026 (WCAG AA in beiden Modi): Pfeile und Stufen-Etiketten ohne Durchsichtigkeit,
   Etiketten in der Stufenfarbe, zur Schrift hin gezogen — so tragen sie auf Hell wie auf Dunkel 4,5 : 1 */
.cp-pfeil, .hb-nachschlagen-pfeil, .ln-pfeil, .hb-vt-pfeil { opacity: 1; color: var(--text-leise); }
.cp-stufe { color: color-mix(in srgb, var(--cp-farbe) 70%, var(--text)); }
.cp-kachel.stufe-still .cp-stufe { color: var(--text-leise); }
/* Abgeschaltetes Terminal: gestrichelt statt blass */
.tm-geraet.aus { opacity: 1; border-style: dashed; background: transparent; }
/* Kopf mit Knopf am Handy: der Knopf rutscht unter den Titel statt aus dem Bild (Tarife, 375 px) */
@media (max-width: 480px) { .dp-kopf { flex-wrap: wrap; } }

/* Anmeldeseite: unter dem Praxisnamen der Name des Programms (Einstellung „programmname") */
.login-halter .login-programm { text-align: center; margin: -.6rem 0 1rem; font-size: .95rem; font-weight: 600; letter-spacing: .04em; color: var(--text-leise); }

/* Geräte & Schlüssel: ein Menüpunkt, Reiter als Links (23.10.2026) */
.gr-reiter { margin-bottom: 14px; }
a.hb-reiter-knopf { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }

/* Einweisungen organisieren und Kennzahl je Person (ADR-043) */
.gr-plan { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rand); }
.gr-plan-markiert { background: color-mix(in srgb, var(--orange) 10%, transparent); border-radius: 10px; padding-inline: 8px; }
.gr-plan .btn-reihe { margin: 0; }
.gr-plan-zeit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gr-videos { margin: 12px 0; }
.gr-alle { margin: 4px 0 8px; }
.arb-kennzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.arb-kennzahl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--rand); background: var(--flow-karte); color: inherit; text-decoration: none; font-weight: 600; }
.arb-kennzahl.gut { border-color: color-mix(in srgb, var(--gruen) 50%, transparent); }
.arb-kennzahl.achtung { border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
@media (max-width: 520px) { .gr-plan { grid-template-columns: 1fr; } .gr-plan-zeit { grid-template-columns: 1fr; } }

/* ---------- Wiederholungen und Aufgabenkatalog (ADR-034) ---------- */
.af-katalog-knopf { font-weight: 700; }
.af-regel { display: flex; flex-direction: column; gap: .3rem; }
.af-regel-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .2rem 0; }
.af-regel-zeile > span:first-child { min-width: 9rem; font-weight: 600; }
.af-zahl { width: 5rem; }
.af-katalog-suche { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.af-katalog-suche input[type="search"] { flex: 1 1 260px; min-height: 48px; font-size: 1.05rem; }
.af-katalog-zeile { display: grid; grid-template-columns: 28px 1fr auto; gap: .7rem; align-items: start; padding: .55rem 0;
  border-bottom: 1px solid var(--rand); cursor: pointer; }
.af-katalog-zeile:last-child { border-bottom: 0; }
.af-katalog-zeile input[type="checkbox"] { width: 22px; height: 22px; margin-top: .15rem; }
.af-katalog-titel { line-height: 1.35; }
.af-zugewiesen { opacity: .7; }
.af-auswahl-leiste { position: sticky; bottom: 76px; z-index: 50; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 16px; background: var(--flow-karte);
  border: 1px solid var(--akzent); box-shadow: var(--flow-glanz); font-weight: 600; }
.af-serie { min-height: 0; cursor: default; }
/* Quote je Bereich, Standort, Person (ADR-101): Schalter der GF mit Hinweis daneben */
.af-quote-schalter { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer; }
.af-quote-schalter > span { display: flex; flex-direction: column; gap: 2px; }
.af-formular label.af-regel-zeile { align-items: stretch; text-align: left; }
/* Dienstplan (ADR-033): Funktion, Raum und Ebene auf jedem Dienst; Berufsschule im Tag;
   „An welchen Tagen?" mit Vorschau; Schultage in der Personenpflege */
.dp-ort { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; min-width: 0; }
.dp-funktion { font-weight: 700; font-size: .9rem; color: var(--text); overflow-wrap: anywhere; }
.dp-raum { font-size: .875rem; color: var(--text-leise); overflow-wrap: anywhere; }
.dp-schule {
  font-size: .9rem; font-weight: 600; padding: 8px 10px; margin-bottom: 8px; border-radius: var(--rund-zeile);
  color: var(--text); background: color-mix(in srgb, var(--lila) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--lila) 45%, transparent); overflow-wrap: anywhere;
}
.dp-raum-wahl { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-weight: 600; }
.dp-raum-wahl select { font-weight: 400; }
.dp-wochentage { margin-top: 10px; }
.dp-wochentage .dp-wahl { min-width: 56px; }
.dp-vorschau {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--rund-zeile);
  background: color-mix(in srgb, var(--vorder) 4%, transparent); border: 1px solid var(--rand);
}
.dp-vorschau-satz { font-weight: 700; }
.dp-vorschau-liste { margin: 6px 0 0; padding-left: 1.1rem; color: var(--text-leise); }
.bs-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.bs-zeile:last-child { border-bottom: 0; }
.bs-dialog .btn { margin-top: 10px; }
.bs-naechste { margin: 4px 0 0; padding-left: 1.1rem; }
.bs-naechste li { padding: 2px 0; }
.bs-naechste li.faellt-aus { color: var(--text-leise); text-decoration: line-through; text-decoration-thickness: 1px; }
/* ============================================================
 * Was hinter dem Kapitel steht (lernen.js, Auftrag der GF 23.10.2026)
 * „Das Wichtigste" in höchstens drei Zeilen, Schritte zum Aufklappen, Kapitel öffnen.
 * ============================================================ */
.ln-schritt-block + .ln-schritt-block { border-top: 1px solid var(--rand); }
.kk { margin: -4px 0 10px 80px; display: grid; gap: 6px; }
.kk.kompakt { margin: 0 0 8px 42px; }
.kk-text { margin: 0; font-size: 1rem; line-height: 1.45; color: color-mix(in srgb, var(--text) 86%, var(--flow-leise));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kk-zeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.kk-schritte { flex-basis: 100%; }
.kk-schritte summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; color: var(--akzent); }
.kk-schritte ol { margin: 4px 0 6px; padding-left: 1.4em; display: grid; gap: 4px; line-height: 1.4; }
.kk-zeichen { font-size: .95rem; color: color-mix(in srgb, var(--text) 82%, var(--flow-leise)); }
.kk-oeffnen { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; color: var(--akzent); text-decoration: none; }
.kk-oeffnen:hover { text-decoration: underline; }
.kk-weiter { font-weight: 700; color: var(--akzent); text-decoration: none; white-space: nowrap; }
.kk-weiter:hover { text-decoration: underline; }
@media (max-width: 640px) { .kk { margin-left: 46px; } .kk.kompakt { margin-left: 8px; } }
/* In Checklisten (Aufgaben): direkt unter dem Punkttext, ohne Einzug */
.af-punkt .kk, .ls-sop .kk { margin: 4px 0 6px; }
.ls-sop .kk + .kk { border-top: 1px solid var(--rand); padding-top: 8px; }
.kk-kopf { font-weight: 700; margin-top: 4px; }
/* ============================================================
   Lohnmonat — public/lohn.js (Auftrag der GF, 23.10.2026)
   Ampel nie nur als Farbe: Zeichen und Wort stehen immer dabei.
   ============================================================ */
.ln-stand-kopf { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ln-protokoll { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .35rem; }
.ln-ampel .ab-zahl.aktiv { border-color: var(--akzent); }
.ab-zahl.stufe-kritisch .ab-zahl-wert { color: var(--rot); }
.ln-liste { display: grid; gap: .7rem; margin-top: 1.1rem; padding-bottom: 6rem; }
.ln-person { padding: 1rem 1.2rem; border-radius: var(--flow-rund); background: var(--flow-karte); border: 1px solid var(--rand); border-left-width: 6px; }
.ln-person.ampel-rot { border-left-color: var(--rot); }
.ln-person.ampel-orange { border-left-color: var(--orange); }
.ln-person.ampel-gruen { border-left-color: var(--gruen); }
.ln-person-kopf { display: flex; align-items: center; gap: .7rem; }
.ln-ampel-zeichen { font-size: 1.3rem; }
.ln-name { display: flex; flex-direction: column; min-width: 0; }
.ln-name b { font-size: 1.12rem; }
.ln-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .4rem .9rem; margin-top: .7rem; }
.ln-wert { display: flex; flex-direction: column; }
.ln-wert b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ln-hinweise { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.ln-hinweis { padding: .35rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--orange) 12%, transparent); }
.ln-hinweis.rot { background: color-mix(in srgb, var(--rot) 14%, transparent); }
.ln-aktion { position: sticky; bottom: 1rem; z-index: 5; display: flex; gap: .6rem; flex-wrap: wrap; padding: .8rem 1rem;
  border-radius: var(--flow-rund); background: color-mix(in srgb, var(--flaeche) 96%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--rand); }
.ln-aktion .btn.gross { flex: 1 1 260px; }
.lohn-verweis { display: block; text-decoration: none; color: var(--text); }
.lohn-verweis:hover { border-color: var(--akzent); }
/* Die drei Ampel-Zahlen immer nebeneinander — am Handy kompakt, damit die Personen gleich sichtbar sind */
.ln-ampel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .ln-aktion { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .ln-ampel { gap: .45rem; }
  .ln-ampel .ab-zahl { padding: .6rem .7rem; }
  .ln-ampel .ab-zahl-wert { font-size: 1.45rem; }
  .ln-ampel .ab-zahl .feld-hinweis { display: none; }
}

/* Beteiligung auf der Startseite der Ärztin und neben dem Zahlungsabgleich (23.10.2026) */
.bt-start { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--text); }
.bt-start-zeichen { font-size: 2rem; }
.bt-start-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.bt-start-wert { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ab-bereiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.ab-bereich { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.2rem; border-radius: var(--flow-rund);
  background: var(--flow-karte); border: 1px solid var(--rand); color: var(--text); text-decoration: none; }
.ab-bereich:hover { border-color: var(--akzent); }
.ab-bereich.aktiv { border-color: var(--flow-rand-hell); }
.ab-bereich-titel { font-weight: 700; font-size: 1.1rem; }
.ab-bereich-wert { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }


/* --- Personalakte in der Person (ADR-036) --- */
.ma-akte-knopf { width: 100%; margin-top: 12px; min-height: 48px; }
.pk-hauptknopf { width: 100%; margin: 4px 0 14px; }
.pk-wartet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-left: 4px solid var(--orange); }
.pk-abschnitt { padding: 0; overflow: hidden; }
.pk-abschnitt-knopf { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px;
  background: none; border: 0; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.pk-abschnitt-knopf > span:first-child { flex: 1; }
.pk-abschnitt-knopf[aria-expanded="true"] .za-pfeil { transform: rotate(90deg); }
.pk-zahl { color: var(--text-leise); font-weight: 500; font-size: .92rem; }
.pk-abschnitt-koerper { padding: 0 16px 14px; display: grid; gap: 6px; }
.pk-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--rand); background: none; border-left: 0; border-right: 0; border-bottom: 0;
  color: var(--text); font: inherit; text-align: left; width: 100%; }
button.pk-zeile { cursor: pointer; min-height: 48px; }
.pk-dokument { align-items: center; }
.pk-entfernt { opacity: .6; }
.pk-warn { color: var(--orange); }
.pk-formular { display: grid; gap: 8px; }
.pk-formular label { margin-top: 6px; }
.pk-transkript { font-size: .95rem; line-height: 1.45; }
.pk-vereinbarungen { display: grid; gap: 10px; }
.pk-vereinbarung { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--rand); border-radius: 14px; }
.pk-vereinbarung-fuss { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pk-vereinbarung-fuss select, .pk-vereinbarung-fuss input { flex: 1 1 140px; }
.pk-transkript-text { white-space: pre-wrap; max-height: 40vh; overflow: auto; font: inherit; font-size: .9rem; margin: 8px 0 0; }
.pk-knoepfe { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; margin: 12px 0 24px; }
@media (max-width: 640px) { .pk-knoepfe { grid-template-columns: 1fr; } }
.pk-einstellungen { display: grid; gap: 8px; }

/* Standort-Steckbrief und Praxisplanung (ADR-038) */
.stb-karten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.stb-karte {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 44px 18px 18px; min-height: 120px;
  border-radius: var(--flow-rund); background: var(--flow-karte); border: 1px solid var(--rand); color: var(--text);
  text-decoration: none; box-shadow: var(--karte-schatten), var(--flow-glanz);
}
.stb-karte:hover { border-color: var(--akzent); }
.stb-karte .za-pfeil { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.stb-karte-name { font-size: 1.25rem; font-weight: 800; }
.stb-zahlen { font-size: .95rem; color: var(--text-leise); }
.stb-titel { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.stb-titel h1 { margin: 0; }
.stb-abschnitt h2 { margin: 0; }
.stb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.stb-gross { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.stb-zeiten { display: grid; gap: 4px; }
.stb-zeit { display: grid; grid-template-columns: 44px 1fr; gap: 10px; font-variant-numeric: tabular-nums; }
.stb-zeiten-form { display: grid; gap: 8px; }
.stb-zeit-feld { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
/* Öffnungszeiten je Wochentag (Stammdaten einfach, 11/2026): Häkchen, Uhrzeit-Felder, bis zu drei Zeiträume */
.stb-tag { display: grid; grid-template-columns: 9.5rem 1fr; gap: 6px 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.stb-tag:last-child { border-bottom: 0; }
#modal-box .stb-tag [hidden] { display: none; }
.stb-tag-name { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.stb-tag-name input { width: 22px; height: 22px; margin: 0; }
.stb-zu { align-self: center; }
.stb-zeitraeume { display: grid; gap: 6px; }
.stb-zeitraum { display: flex; align-items: center; gap: 8px; min-width: 0; }
#modal-box .stb-zeitraum input { flex: 0 1 9.5rem; width: 9.5rem; min-width: 0; min-height: 44px; }
#modal-box .stb-weg { flex: none; width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
#modal-box .stb-dazu { grid-column: 2; justify-self: start; width: auto; min-height: 44px; }
@media (max-width: 560px) {
  .stb-tag { grid-template-columns: minmax(0, 1fr); }
  #modal-box .stb-dazu { grid-column: 1; }
  #modal-box .stb-zeitraum input { flex: 1 1 0; width: auto; }
}
.stb-regeln { margin: 6px 0 0; padding-left: 1.1rem; color: var(--text-leise); }
.stb-personen { display: flex; flex-wrap: wrap; gap: 8px; }
.stb-person, .stb-funktion {
  padding: 6px 12px; border-radius: 999px; font-size: .95rem; color: var(--text);
  background: color-mix(in srgb, var(--vorder) 5%, transparent); border: 1px solid var(--rand);
}
.stb-person small { color: var(--text-leise); font-weight: 700; }
.stb-person.verantwortlich { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, transparent); font-weight: 700; }
.stb-stockwerk { margin-top: 8px; }
.stb-raeume { display: grid; gap: 8px; }
.stb-raum { padding: 10px 12px; border-radius: var(--rund-zeile); border: 1px solid var(--rand); background: color-mix(in srgb, var(--vorder) 3%, transparent); }
.stb-geraete { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stb-geraet { font-size: .9rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rand); color: var(--text); text-decoration: none; }
.stb-geraet:hover { border-color: var(--akzent); }
.stb-geraet.gesperrt { border-color: var(--rot); color: var(--text); }
.stb-schluessel { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.stb-schluessel:last-child { border-bottom: 0; }
.stb-mehr { display: inline-block; margin-top: 10px; }
.dp-tausch-hinweis { width: 100%; text-align: left; cursor: pointer; font: inherit; font-weight: 700; color: var(--text); }
.dp-nur-lesen { margin: 0 0 10px; }
.tausch-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.tausch-zeile:last-child { border-bottom: 0; }
.st-tausch-neu { margin-top: 8px; padding: 8px 10px; border-radius: var(--rund-zeile); background: color-mix(in srgb, var(--akzent) 10%, transparent); font-weight: 600; }
.rz-angebot .btn { min-height: 44px; }
.st-woche-tag { grid-template-columns: 52px auto 1fr auto; align-items: center; }
.st-woche-tag .ua-klein { min-height: 40px; }
@media (max-width: 480px) {
  .st-woche-tag { grid-template-columns: 52px 1fr auto; }
  .st-woche-tag > .zt-leise { grid-column: 2 / 3; grid-row: 2; }
}

/* „Meine Arbeit" (ADR-040): eine Zeile je Sache, rechts öffnen oder direkt abhaken */
.arb-gruppe { margin-top: 10px; }
.arb-gruppe:first-of-type { margin-top: 0; }
.arb-zeile { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.arb-oeffnen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px;
  border-radius: var(--rund-zeile); border: 1px solid var(--rand); border-left-width: 5px; color: var(--text); text-decoration: none;
  background: var(--flow-karte); }
.arb-oeffnen:hover { border-color: var(--akzent); }
.arb-zeile.stufe-rot .arb-oeffnen { border-left-color: var(--rot); }
.arb-zeile.stufe-orange .arb-oeffnen { border-left-color: var(--orange); }
.arb-zeile.stufe-still .arb-oeffnen { border-left-color: var(--rand); }
.arb-oeffnen .st-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.arb-oeffnen .st-text b, .arb-oeffnen .st-text .zt-leise { overflow-wrap: anywhere; }
.arb-haken { flex: none; width: 56px; min-height: 56px; border-radius: var(--rund-zeile); cursor: pointer; font: inherit; font-size: 1.4rem; font-weight: 800;
  color: var(--auf-akzent); background: var(--akzent); border: 0; }
.arb-haken:disabled { opacity: .6; cursor: default; }
.arb-wege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
/* --- Listen: ein Schalter je Posten, Notiz, Abgeben (ADR-039) --- */
.ls-werkzeug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.ls-werkzeug .feld-hinweis { flex: 1; }
.ls-abhakliste { padding: 0; overflow: hidden; }
.ls-zeile { border-top: 1px solid var(--rand); }
.ls-zeile:first-child { border-top: 0; }
.ls-zeile-oben { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 0; }
.ls-zeile-kopf { flex: 1; display: grid; gap: 2px; text-align: left; background: none; border: 0; color: var(--text);
  font: inherit; padding: 12px 16px; min-height: 60px; cursor: pointer; }
.ls-zeile.fertig .ls-zeile-kopf b { color: var(--text-leise); text-decoration: line-through; }
.ls-zeile.ueberfaellig { box-shadow: inset 4px 0 0 var(--rot); }
.ls-zeile-details { padding: 0 16px 14px; display: grid; gap: 8px; }
.ls-zeile-details .ls-aufgabe { margin: 0; }
.ls-schalter-halter { display: flex; align-items: center; min-width: 64px; min-height: 48px; justify-content: center; cursor: pointer; }
.ls-zeile input.ls-schalter, .af-quote-schalter input.ls-schalter { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; min-width: 52px; min-height: 0;
  max-height: 32px; padding: 0; border: 0; border-radius: 16px; margin: 0; box-sizing: border-box;
  background: var(--rand); position: relative; cursor: pointer; transition: background .15s; flex: none; }
.ls-zeile input.ls-schalter::after, .af-quote-schalter input.ls-schalter::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--flow-karte); box-shadow: 0 1px 3px var(--schatten); transition: transform .15s; }
.ls-zeile input.ls-schalter:checked, .af-quote-schalter input.ls-schalter:checked { background: var(--akzent); }
.ls-zeile input.ls-schalter:checked::after, .af-quote-schalter input.ls-schalter:checked::after { transform: translateX(20px); }
.ls-zeile input.ls-schalter:focus-visible, .af-quote-schalter input.ls-schalter:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.ls-zeile input.ls-schalter:disabled { opacity: .5; cursor: default; }
.ls-abgabe-hinweis { border-left: 4px solid var(--orange); display: grid; gap: 6px; }
.ls-abgeben { display: grid; gap: 8px; }
.ls-frist { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .92rem; color: var(--text-leise); }
/* ---------- Handbuch: erst prüfen, dann sichtbar (ADR-041) ---------- */
.hb-geprueft, .hb-ungeprueft { display: inline-block; margin-top: .35rem; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.hb-geprueft { background: var(--flow-karte); color: var(--gruen-text); border: 1px solid var(--gruen); }
.hb-ungeprueft { background: var(--flow-karte); color: var(--text-leise); border: 1px dashed var(--rand); }
.hb-pw { margin-bottom: 1rem; }
.hb-pw-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.hb-pw-feld { margin-top: 1rem; display: grid; gap: .6rem; }
.hb-pw-feld textarea { width: 100%; }
.hb-hinweis-kasten { padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--orange); background: var(--flow-karte); }
.hb-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hb-vergleich-spalte { min-width: 0; }
.hb-vergleich-text { max-height: 60vh; overflow: auto; padding: .6rem; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--flow-karte); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.hb-vergleich-text .hb-neu { background: var(--flow-karte-hell); color: var(--gruen-text); font-weight: 600; }
.hb-vergleich-text .hb-weg { color: var(--rot); text-decoration: line-through; }
.hb-fassung-zeile, .hb-archiv-zeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem 0;
  border-bottom: 1px solid var(--linie); }
.hb-archiv-titel { flex: 1 1 16rem; text-align: left; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; padding: .3rem 0; min-height: 44px; }
.hb-archiv-titel:hover { color: var(--akzent-text); }
@media (max-width: 720px) { .hb-vergleich { grid-template-columns: 1fr; } }

/* ============================================================
 * Ehrenkodex und Einarbeitung (ADR-042) — ein großer nächster Schritt, Unterschrift mit dem Finger
 * ============================================================ */
.ek-volltext { font-size: 1.1rem; line-height: 1.5; margin: 12px 0 8px; }
.ek-einfach { margin: 0 0 4px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--akzent) 10%, var(--flow-karte)); }
.ek-hinweis { margin-top: 10px; text-align: center; }
.ek-punkte { margin: 10px 0 0; padding-left: 1.2rem; font-size: 1.1rem; line-height: 1.5; }
.ek-punkte li { margin: 8px 0; }
.ek-satz { font-size: 1.1rem; font-weight: 700; line-height: 1.45; margin: 10px 0 12px; }
.ek-feld { display: block; color: var(--text); width: 100%; height: auto; aspect-ratio: 5 / 2; border-radius: 16px; touch-action: none;
  background: var(--flow-karte); border: 2px dashed color-mix(in srgb, var(--text) 35%, transparent); cursor: crosshair; }
.ek-feld.nur-lesen { border-style: solid; border-width: 1px; cursor: default; }
.ek-feld-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.ek-feld-fuss .btn { width: auto; flex: none; min-width: 88px; }
/* Ehrenkodex als eine Seite zum Lesen (ADR-071): zwölf Abschnitte untereinander, am Ende eine Unterschrift */
.ek-lesen { max-width: 720px; margin: 8px 0 20px; }
.ek-prinzip { border-top: 1px solid var(--rand); padding: 16px 0 12px; font-size: 1.06rem; line-height: 1.6; }
.ek-prinzip:first-child { border-top: none; padding-top: 4px; }
.ek-prinzip h2 { font-size: 1.15rem; margin: 0 0 8px; }
.ek-prinzip p { margin: 0 0 8px; }
.ek-verbindlich { max-width: 720px; border-top: 2px solid var(--rand); }
.ek-ende { max-width: 720px; }
.ek-link { display: inline-block; margin-top: 12px; min-height: 44px; line-height: 44px; font-weight: 700; color: var(--akzent); text-decoration: none; }
.ek-offen { text-decoration: none; color: var(--text); }
.ea-willkommen .ln-start-titel { margin-bottom: 8px; }
/* Eintritt und Austritt (ADR-072): Karte mit Rand, Name, ein Satz, was fehlt, ruhige Liste, Knöpfe untereinander am Handy */
#inhalt .bs-abschnitt-satz { margin: 0 0 14px; color: var(--text-leise); }
#inhalt .ea-karte { display: grid; gap: 8px; margin-bottom: 12px; }
#inhalt .ea-name { margin: 0; font-size: 1.15rem; font-weight: 700; }
#inhalt .ea-phase { margin: -4px 0 0; color: var(--text-leise); font-size: .95rem; }
#inhalt .ea-fehlt { margin: 0; font-weight: 600; color: var(--text); }
#inhalt .ea-fehlt.gut { color: var(--gruen-text); }
#inhalt .ea-nachweise { margin: 0; padding-left: 20px; display: grid; gap: 2px; color: var(--text-leise); font-size: .95rem; }
#inhalt .ea-knoepfe { display: grid; gap: 8px; margin-top: 6px; }
#inhalt .ea-knoepfe > * { width: 100%; justify-content: center; }
@media (min-width: 700px) {
  #inhalt .ea-knoepfe { display: flex; flex-wrap: wrap; }
  #inhalt .ea-knoepfe > * { width: auto; }
  #inhalt .ea-knoepfe > .ea-beenden { margin-left: auto; }
}
#inhalt .ea-start { margin-top: 4px; }

/* ============================================================
 * GF-Cockpit (ADR-044, cockpit.js cp2-*)
 * ============================================================
 * Nach dem vom GF bestätigten Entwurf: Gruß, Band „Braucht dich heute",
 * sieben ruhige Kacheln ohne Diagramm. Farbe nur als Beiwerk zum Wort
 * (Punkt vor der Zeile, Zahl in Signalfarbe) — der Text sagt die Stufe.
 * Nur Variablen aus farben.css.
 * ============================================================ */
.cp2 { max-width: none; }   /* ganze Breite: am Rechner keine leere rechte Spalte (Abnahme Befund 9); das Raster verteilt die Kacheln selbst */
.cp2-kopf { margin: 4px 0 14px; }
.cp2-kopf h1 { margin: 0 0 2px; font-size: clamp(1.5rem, 3.6vw, 1.75rem); }
.cp2-heute {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 0 0 18px; padding: 12px 16px; border-radius: 16px;
  background: var(--heute-flaeche); border: 1px solid var(--heute-rand);
}
.cp2-heute-titel { margin: 0; font-size: 1rem; font-weight: 700; color: var(--heute-text); }
.cp2-heute-leer { color: var(--text); }
.cp2-heute-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.cp2-heute-punkt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px;
  border-radius: 12px; background: var(--flow-karte); border: 1px solid var(--heute-rand);
  color: var(--text); text-decoration: none; font-weight: 600;
}
.cp2-heute-punkt:hover, .cp2-heute-punkt:focus-visible { border-color: var(--heute-text); }
.cp2-pfeil { color: var(--text-leise); font-size: 1.2rem; line-height: 1; }
.cp2-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.cp2-kachel {
  display: flex; flex-direction: column; gap: 4px; min-height: 48px; padding: 18px 20px;
  border-radius: 18px; background: var(--flow-karte); border: 1px solid var(--rand);
  color: var(--text); text-decoration: none;
}
.cp2-kachel:hover, .cp2-kachel:focus-visible { border-color: var(--akzent); }
.cp2-kachel:focus-visible, .cp2-posten:focus-visible, .cp2-heute-punkt:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.cp2-titel { margin: 0 0 8px; font-size: .875rem; font-weight: 600; color: var(--text-leise); display: flex; align-items: center; gap: 8px; }
.cp2-titel svg, .cp2-heute-titel svg, .cp2-hochladen svg { flex: none; }
.cp2-heute-titel { display: flex; align-items: center; gap: 8px; }
.cp2-hochladen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; min-height: 48px; margin: -6px 0 18px; padding: 10px 16px;
  border-radius: 14px; border: 1px dashed var(--flow-rand-hell); background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.cp2-hochladen:hover, .cp2-hochladen:focus-visible { border-color: var(--akzent); }
.cp2-hochladen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.cp2-hochladen-satz { font-weight: 400; color: var(--text-leise); }
.cp2-gross { font-size: 1.875rem; font-weight: 700; line-height: 1.15; margin-bottom: 2px; }
/* Stil der großen Zahl aus der Diagramm-Hilfe (fett, enge Laufweite), aber in Kachelgröße: Sätze wie „0 % der Listen erledigt“ passen */
.cp2-gross.dg-gross { font-size: 1.875rem; line-height: 1.15; }
/* Ein ganzer Satz als Hauptaussage (Besetzung: „An 3 Tagen fehlt jemand, an 21 ist es knapp“) — kleiner als eine Zahl */
.cp2-gross.dg-gross.cp2-gross-satz { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; }
.cp2-gross.stufe-achtung { color: var(--orange); }
.cp2-zeile { display: flex; align-items: baseline; gap: 8px; margin: 2px 0; line-height: 1.4; }
.cp2-punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--still); transform: translateY(-1px); }
.stufe-kritisch > .cp2-punkt { background: var(--rot); }
.stufe-achtung > .cp2-punkt { background: var(--orange); }
.stufe-gut > .cp2-punkt { background: var(--gruen); }
.cp2-punkt.leer, .stufe-gut > .cp2-punkt.leer { background: transparent; }   /* nur Platzhalter, damit die Zeilen fluchten */
.cp2-gross.stufe-kritisch, .cp2-zeile.stufe-kritisch { color: var(--rot); }
.cp2-gross.stufe-gut { color: var(--gruen-text); }
.cp2-zeile.stufe-achtung { color: var(--orange); }
.cp2-leer { color: var(--text-leise); line-height: 1.45; }
.cp2-diagramm { margin: 6px 0 4px; min-width: 0; }
.cp2-diagramm .dg { margin: 0; }
.cp2-weiter { margin-top: auto; padding-top: 10px; font-size: .875rem; font-weight: 600; color: var(--akzent-text); }
/* Ebene 2 */
.cp2-zurueck { display: inline-flex; align-items: center; min-height: 48px; color: var(--akzent-text); text-decoration: none; font-weight: 600; }
.cp2-zusammen { padding: 14px 18px; border-radius: 16px; background: var(--flow-karte); border: 1px solid var(--rand); margin-bottom: 18px; }
.cp2-abschnitt { margin: 0 0 20px; }
.cp2-abschnitt h2 { font-size: 1.05rem; margin: 0 0 8px; }
.cp2-posten-liste { display: grid; gap: 6px; }
.cp2-posten {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 14px; border-radius: 14px;
  background: var(--flow-karte); border: 1px solid var(--rand); color: var(--text); text-decoration: none;
}
.cp2-posten:hover { border-color: var(--akzent); }
.cp2-posten-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: break-word; }
.cp2-posten-text .feld-hinweis { margin: 0; }
.cp2-posten-wert { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .cp2-raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cp2-kachel { padding: 14px 16px; }
  .cp2-gross, .cp2-gross.dg-gross { font-size: 1.6rem; }
  .cp2-heute-punkt { flex: 1 1 100%; }
}

/* ============================================================
 * Cockpit aus Bausteinen (ADR-060, cockpit.js cp4-*)
 * ============================================================
 * „Anpassen": jeder Baustein bekommt eine ruhige Leiste mit Verschieben,
 * Ausblenden, Entfernen; der Inhalt ist dabei nicht antippbar (inert).
 * Katalog „Kachel hinzufügen" im Fenster. Knöpfe ≥ 48 px, Handy ohne Querscrollen.
 * Nur Variablen aus farben.css.
 * ============================================================ */
.cp4-rahmen { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border: 1px dashed var(--flow-rand-hell); border-radius: 18px; }
.cp4-rahmen-zeile { margin: 0 0 12px; }
.cp4-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.cp4-name { font-size: .875rem; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.cp4-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp4-knopf { min-width: 48px; min-height: 48px; padding: 0 12px; border: 1px solid var(--rand); border-radius: 12px; background: var(--karte); color: var(--text); font: inherit; cursor: pointer; }
.cp4-knopf:hover, .cp4-knopf:focus-visible { border-color: var(--akzent); }
.cp4-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.cp4-knopf:disabled { color: var(--text-leise); cursor: default; border-color: var(--rand); }
.cp4-fest { font-size: .8125rem; color: var(--text-leise); padding: 0 6px; }
.cp4-inhalt { min-width: 0; }
.cp4-inhalt > * { margin: 0; }
.cp4-platzhalter { padding: 14px 16px; border-radius: 14px; background: var(--flow-karte-hell); color: var(--text-leise); line-height: 1.45; }
.cp4-neu { display: grid; gap: 8px; margin: 0 0 14px; }
.cp4-neu-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--rand); border-radius: 14px; background: var(--karte); }
.cp4-neu-zeile > svg { flex: none; color: var(--akzent-text); }
.cp4-neu-text { flex: 1 1 220px; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.cp4-unten { display: grid; gap: 14px; }
.cp4-aus { display: grid; gap: 6px; }
.cp4-aus h3 { margin: 0; font-size: 1rem; }
.cp4-aus-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--rand); }
.cp4-katalog h2 { margin: 0 0 4px; }
.cp4-katalog-gruppe { margin: 16px 0 0; }
.cp4-katalog-gruppe h3 { margin: 0 0 6px; font-size: 1rem; color: var(--text-leise); }
.cp4-katalog-eintrag { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--rand); min-width: 0; }
.cp4-katalog-kopf { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.cp4-katalog-kopf > svg { flex: none; margin-top: 2px; color: var(--akzent-text); }
.cp4-katalog-kopf .feld-hinweis { margin: 2px 0 0; overflow-wrap: anywhere; }
.cp4-varianten { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cp4-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cp4-wahl legend, .cp4-ort > span { font-size: .8125rem; color: var(--text-leise); margin-right: 4px; padding: 0; }
.cp4-wahl-feld { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px; border: 1px solid var(--rand); border-radius: 12px; cursor: pointer; }
.cp4-wahl-feld:has(input:checked) { border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.cp4-ort select { min-height: 48px; max-width: 100%; }
@media (max-width: 720px) {
  .cp4-leiste { flex-direction: column; align-items: stretch; }
  .cp4-varianten { flex-direction: column; }
}

/* Einlesen: was war schon bekannt, was ist neu (ADR-045) */
.ab-ueberlapp { display: grid; gap: .35rem; margin: .4rem 0 .2rem; text-align: left; }
.ab-ueberlapp-zeile { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .55rem .8rem;
  border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); font-variant-numeric: tabular-nums; }

/* Beteiligung: Schnellmodus auf Startseite und in „Meine Arbeit" (ADR-045) */
.bt-schnell { display: grid; gap: .6rem; }
.bt-schnell-zeile { display: grid; gap: .45rem; padding-top: .7rem; border-top: 1px solid var(--rand); }
.bt-schnell-rechnung { display: flex; flex-direction: column; }
.bt-schnell-knoepfe { display: flex; flex-wrap: wrap; gap: .45rem; }
.bt-schnell-knoepfe .ab-leistung { min-height: 48px; }
.ab-leistung.andere { display: inline-flex; align-items: center; text-decoration: none; color: var(--text-leise); }

/* --- Personalakte Stufe 2: Bewertung, Selbstreflexion, nächstes Gespräch (ADR-047) --- */
.pk-aktionen { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin: 4px 0 14px; }
.pk-aktionen .pk-hauptknopf { margin: 0; }
@media (max-width: 640px) { .pk-aktionen { grid-template-columns: 1fr; } }
.pk-faellig { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-left: 4px solid var(--akzent); }
.pk-faellig.ueberfaellig { border-left-color: var(--rot); }
.pk-note { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 8px;
  font-weight: 800; color: var(--auf-akzent); background: var(--akzent); }
.pk-note.gross { min-width: 56px; height: 56px; font-size: 1.8rem; border-radius: 14px; }
.pk-note-B { background: var(--orange); }
.pk-note-C { background: var(--rot); color: var(--auf-rot); }
.pk-ergebnis { display: grid; gap: 10px; }
@media (min-width: 900px) { .pk-ergebnis { position: sticky; top: 72px; z-index: 5; } }
.pk-ergebnis-kopf { display: flex; align-items: center; gap: 14px; }
.pk-gf-hinweis { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rot); color: var(--text); font-weight: 600; }
.pk-kriterien { display: grid; gap: 8px; }
.pk-bereich { margin: 14px 4px 2px; }
.pk-kriterium { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--flow-karte); border: 1px solid var(--rand); }
.pk-kriterium.red-flag { border-color: var(--rot); }
.pk-kriterium-kopf { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.pk-kriterium input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--akzent); }
.pk-frage p { margin: 0 0 10px; }
.pk-skala { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.pk-skala-knopf { min-height: 44px; border-radius: 10px; border: 1px solid var(--rand); background: var(--flow-karte); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.pk-skala-knopf.aktiv { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
@media (max-width: 400px) { .pk-skala { grid-template-columns: repeat(5, 1fr); } }
.pk-extern { display: grid; gap: 8px; }
.pk-extern-freigabe { display: grid; gap: 8px; }

/* ---------- Listen als eine einfache Seite (ADR-052): „Jetzt zu tun“, schlichte Zeilen ---------- */
.ls-jetzt { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; border-left: 4px solid var(--akzent); }
.ls-jetzt.ls-jetzt-ruhig { border-left-color: var(--gruen); }
.ls-jetzt-satz { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin: 0; color: var(--text); }
.ls-jetzt-knopf { min-width: 12rem; }
.ls-laufend h2 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; color: var(--text-leise); }
.ls-reihen { padding: .25rem 0; }
.ls-reihe { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; background: none; border: 0;
  border-bottom: 1px solid var(--rand); text-align: left; color: var(--text); font: inherit; cursor: pointer; min-height: 3.2rem; }
.ls-reihen > .ls-reihe:last-child, .ls-reihe-gruppe:last-child .ls-reihe:last-child { border-bottom: 0; }
.ls-reihe:hover { background: var(--flow-karte-hell); }
.ls-reihe.ls-reihe-still { cursor: default; }
.ls-reihe.ls-reihe-still:hover { background: none; }
.ls-reihe-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.ls-reihe-text b { overflow-wrap: anywhere; }
.ls-reihe-zahl { color: var(--text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-reihe-gruppe { border-bottom: 1px solid var(--rand); padding-top: .6rem; }
.ls-reihe-gruppe > .hb-mikro { padding: 0 1rem; }
.ls-reihe-gruppe .ls-reihe { padding-left: 1.6rem; }
.ls-fuss { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.25rem 0 .5rem; font-size: .9rem; }
.ls-fuss-link { color: var(--text-leise); }
.ls-mehr { margin-top: 1.25rem; }
.ls-mehr summary { cursor: pointer; color: var(--text-leise); padding: .6rem 0; }
.ls-mehr-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.ls-erkannt { margin-bottom: .75rem; }
.ls-pruefungen .ls-ok, .ls-pruefungen .ls-warn, .ls-einwurf-ergebnis .ls-ok, .ls-einwurf-ergebnis .ls-warn { overflow-wrap: anywhere; }

/* Videos unter Wissen (Vorgabe GF 24.10.2026) */
.vt-suche { width: 100%; min-height: 52px; font-size: 1.05rem; margin: 4px 0 14px; }
.vt-block { margin-bottom: 18px; }
.vt-freigabe { text-decoration: none; }
/* Pflichtlektüre-Karte im Handbuch: Hinweistext auf dem roten Hauch in Textfarbe (hell 4,36 : 1 → gemessen, ADR-030) */
.hb-aufgabe .feld-hinweis { color: var(--text); }
.hb-hilfe-wenn { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--rand); }
.hb-hilfe-wenn ul { margin: .35rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.hb-hilfe-wenn li { font-size: .98rem; line-height: 1.45; color: var(--text); }
.hb-wichtigste.hb-blick { font-size: 1.05rem; }


/* ============================================================
 * Ruhig-futuristisch (ADR-048, GF 24.10.2026): große Zahlen, feine Typografie,
 * Tiefe sparsam, Verlauf nur als Akzent, kurze Bewegung beim Erscheinen.
 * Diagramme aus public/diagramm.js — Farben nur hier über Klassen.
 * ============================================================ */
:root { --dg-gut: var(--gruen); --dg-achtung: var(--orange); --dg-kritisch: var(--rot); --dg-still: var(--still);
        --dg-akzent-verlauf: linear-gradient(90deg, var(--akzent), var(--blau)); }
#inhalt h1 { font-weight: 800; letter-spacing: -.025em; }
.dg-gross, .kz-wert, .cp-kern-zahl, .zt-konto-zahl, .stb-gross { font-variant-numeric: tabular-nums; }

.dg { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dg [data-tipp] { cursor: pointer; }
.dg-ausgabe { min-height: 1.3em; font-size: .9rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.dg-unter { font-size: .9rem; color: var(--text-leise); }
.dg-gross { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--text); }
.dg-einheit { font-size: 1rem; font-weight: 700; color: var(--text-leise); margin-left: 4px; }
.dg-spur { fill: color-mix(in srgb, var(--vorder) 8%, transparent); }
.dg .stufe-gut { --dg-farbe: var(--dg-gut); }
.dg .stufe-achtung { --dg-farbe: var(--dg-achtung); }
.dg .stufe-kritisch { --dg-farbe: var(--dg-kritisch); }
.dg .stufe-still { --dg-farbe: var(--dg-still); }

/* Ring */
.dg-ring { align-items: center; text-align: center; }
.dg-ring-bild { position: relative; width: 120px; height: 120px; }
.dg-ring.dg-klein .dg-ring-bild { width: 72px; height: 72px; }
.dg-ring-svg { width: 100%; height: 100%; }
.dg-ring-spur { fill: none; stroke: color-mix(in srgb, var(--vorder) 9%, transparent); stroke-width: 9; }
.dg-ring-wert { fill: none; stroke: var(--dg-farbe); stroke-width: 9; stroke-linecap: round; }
.dg-ring-mitte { position: absolute; inset: 0; display: grid; place-items: center; }
.dg-ring-zahl { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.dg-ring.dg-klein .dg-ring-zahl { font-size: 1rem; }

/* Balken */
.dg-balken-zeile { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 12px; min-height: 36px; border-radius: 10px; padding: 2px 4px; }
.dg-balken-name { font-weight: 600; overflow-wrap: anywhere; }
.dg-balken-svg { width: 100%; height: 12px; }
.dg-balken-wert { fill: var(--dg-farbe); }
.dg-balken-zahl { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dg-gewaehlt { outline: 2px solid color-mix(in srgb, var(--akzent) 60%, transparent); outline-offset: 2px; }

/* Stufen */
.dg-stufen-svg { width: 100%; height: 14px; }
.dg-stufe { fill: var(--dg-farbe); stroke: var(--karte); stroke-width: .6; }
.dg-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dg-legende-teil { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: .95rem; }
.dg-legende-teil b { font-variant-numeric: tabular-nums; }
.dg-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--dg-farbe); display: inline-block; }

/* Verlauf */
.dg-verlauf-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.dg-verlauf-svg { width: 100%; height: auto; overflow: visible; }
.dg-flaeche { fill: url(#dg-flaeche); }
.dg-flaeche-oben { stop-color: var(--akzent); stop-opacity: .28; }
.dg-flaeche-unten { stop-color: var(--akzent); stop-opacity: 0; }
.dg-linie { fill: none; stroke: var(--akzent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dg-p { fill: var(--karte); stroke: var(--akzent); stroke-width: 2; }
.dg-p.dg-letzter { fill: var(--akzent); }
.dg-ziel { stroke: var(--text-leise); stroke-width: 1; stroke-dasharray: 4 4; }
.dg-achse { fill: var(--text-leise); font-size: 12px; font-family: inherit; }

/* Heatmap */
.dg-heat-rolle { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.dg-heat-gitter { display: grid; grid-template-columns: fit-content(11rem) repeat(var(--dg-spalten), minmax(36px, 1fr)); gap: 4px; min-width: min-content; }
.dg-heat-spalte { font-size: .75rem; font-weight: 700; color: var(--text-leise); text-align: center; line-height: 1.15; align-self: end; }
.dg-heat-zeile { font-size: .9rem; font-weight: 700; align-self: stretch; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
/* Am Handy rollt das Gitter seitwärts, die Namen bleiben links stehen, Tage zweizeilig */
@media (max-width: 600px) {
  .dg-heat-gitter { grid-template-columns: 6.5rem repeat(var(--dg-spalten), 36px); }
  .dg-heat-zeile, .dg-heat-ecke { position: sticky; left: 0; z-index: 1; background: var(--karte); }
  .dg-heat-spalte { inline-size: min-content; justify-self: center; }
  .dg-karte:has(.dg-heat-gitter) { background: var(--karte); }
}
.dg-heat-zelle { min-height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: .85rem; font-weight: 800;
  color: var(--text); background: color-mix(in srgb, var(--dg-farbe) 22%, transparent); border: 1px solid color-mix(in srgb, var(--dg-farbe) 55%, transparent); }
.dg-heat-zelle.stufe-still { background: color-mix(in srgb, var(--vorder) 4%, transparent); border-color: var(--rand); color: var(--text-leise); }

/* Pill und Kennzahl */
.dg-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700;
  color: var(--text); background: color-mix(in srgb, var(--dg-farbe, var(--still)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--dg-farbe, var(--still)) 45%, transparent); }
.dg-pill.stufe-gut { --dg-farbe: var(--dg-gut); } .dg-pill.stufe-achtung { --dg-farbe: var(--dg-achtung); }
.dg-pill.stufe-kritisch { --dg-farbe: var(--dg-kritisch); } .dg-pill.stufe-still { --dg-farbe: var(--dg-still); }
.dg-kennzahl-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }

/* Dashboard-Karte: Glas sparsam, eine feine Verlaufslinie oben als Akzent */
.dg-karte { position: relative; overflow: hidden; border-radius: var(--flow-rund); padding: 18px 18px 14px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--karte) 88%, transparent); border: 1px solid color-mix(in srgb, var(--rand) 80%, transparent);
  box-shadow: var(--karte-schatten), var(--flow-glanz); backdrop-filter: blur(14px) saturate(1.2); }
.dg-karte::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--dg-akzent-verlauf); opacity: .85; }
.dg-karte h2 { margin: 0 0 12px; font-size: 1.05rem; letter-spacing: .02em; }
.dg-karten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Bewegung: Balken wachsen, Ringe laufen, Zeilen tauchen auf — nur ohne „Bewegung reduzieren" */
@media (prefers-reduced-motion: no-preference) {
  .dg-balken-wert, .dg-stufe { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
  .dg.dg-da .dg-balken-wert, .dg.dg-da .dg-stufe { transform: scaleX(1); }
  .dg-ring-wert { transition: stroke-dasharray .9s cubic-bezier(.2, .8, .2, 1); }
  .dg-karte { animation: dg-auftauchen .45s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes dg-auftauchen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Diagramm-Hilfe, Nachtrag Cockpit: ruhig (in Links), laufender Punkt, kompakte Heatmap ohne Rollen */
.dg-ruhig [data-tipp], .dg-ruhig { cursor: inherit; }
.dg-p.dg-laufend { fill: var(--karte); stroke-dasharray: 2 2; }
.dg-laufend-linie { stroke-dasharray: 4 4; }
.dg-heat-kompakt { grid-template-columns: fit-content(9rem) repeat(var(--dg-spalten), minmax(0, 1fr)); min-width: 0; }
@media (max-width: 600px) {
  .dg-heat-gitter.dg-heat-kompakt { grid-template-columns: 4.5rem repeat(var(--dg-spalten), minmax(0, 1fr)); gap: 2px; }
  .dg-heat-kompakt .dg-heat-zelle { min-height: 20px; border-radius: 5px; font-size: .75rem; }
  .dg-heat-kompakt .dg-heat-zeile { line-height: 20px; font-size: .8rem; position: static; background: none; }
  .dg-heat-kompakt .dg-heat-ecke { position: static; background: none; }
  .dg-heat-kompakt .dg-heat-spalte { inline-size: auto; font-size: .75rem; }
  /* nur jeden zweiten Tag beschriften (Kind 1 ist die Ecke, Kind 2 der erste Tag) */
  .dg-heat-kompakt .dg-heat-spalte:nth-child(odd) { visibility: hidden; }
  .dg-karte:has(.dg-heat-kompakt) { background: color-mix(in srgb, var(--karte) 88%, transparent); }
}

/* ============================================================
 * „Ruhige Zukunft" (ADR-048, GF 24.10.2026): Mitarbeitersicht ruhig — Begrüßung,
 * „Dein Dienst heute" mit leichtem Glas, dunkle Hero-Karte mit Ring Teal→Gold,
 * große runde Abhak-Zeilen, ein Knopf. Farben aus farben.css (--aura-*, --held-*, --ring-*).
 * Bewegung nur beim Abhaken und beim Füllen des Rings, nie bei „Bewegung reduzieren".
 * ============================================================ */
:root { --flow-rund: 20px; }
#inhalt { position: relative; }
#inhalt h1, .dg-gross, .rz-held b { letter-spacing: -.03em; }

/* Farbaura hinter der Kopfzeile — unscharf, ohne Klick, ohne Rollbalken */
.rz-aura { position: absolute; left: 0; right: 0; top: 0; height: 300px; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(55% 60% at 22% 30%, var(--aura-teal), transparent 70%), radial-gradient(45% 55% at 82% 22%, var(--aura-gold), transparent 70%);
  filter: blur(12px); }
.rz-aura ~ * { position: relative; z-index: 1; }

.rz-gruss { margin-bottom: 14px; }
.rz-gruss-zeile { display: block; font-size: 1rem; color: var(--text-leise); }
.rz-gruss h1 { font-size: 2rem; margin: 2px 0 2px; }

.rz-dienst { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 14px 16px; border-radius: var(--flow-rund);
  background: var(--glas); border: 1px solid var(--kante); box-shadow: var(--karte-schatten); backdrop-filter: blur(14px) saturate(1.2); }
.rz-dienst-text { display: flex; flex-direction: column; min-width: 0; }
.rz-dienst-text small { font-size: .9rem; color: var(--text-leise); }
.rz-dienst-text strong { font-size: 1.3rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rz-chip { font-size: .9rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--akzent-text); background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.rz-chip.stufe-achtung { color: var(--text); background: color-mix(in srgb, var(--orange) 16%, transparent); }
.rz-chip.stufe-still { color: var(--text-leise); background: color-mix(in srgb, var(--vorder) 6%, transparent); }

/* Hero: dunkle Karte, Ring, ein Satz, „Als Nächstes" */
.rz-held { display: flex; align-items: center; gap: 16px; padding: 18px; margin: 0 0 6px; border-radius: 24px;
  background: linear-gradient(135deg, var(--held-von), var(--held-bis)); color: var(--held-text);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--held-von) 30%, transparent); border: 1px solid var(--kante); }
.rz-held-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rz-held-text b { font-size: 1.35rem; line-height: 1.2; }
.rz-held-text span { color: var(--held-leise); font-size: 1rem; overflow-wrap: anywhere; }
.rz-ring { flex: none; width: 76px; height: 76px; }
.rz-ring circle { fill: none; stroke-width: 9; }
.rz-ring-spur { stroke: var(--held-spur); }
.rz-ring-wert { stroke: url(#rz-ring-verlauf); stroke-linecap: round; }
.rz-ring-von { stop-color: var(--ring-von); }
.rz-ring-bis { stop-color: var(--ring-bis); }

/* Posten: große Karten-Zeilen, runder Haken links, keine Zeichen, keine Gruppentitel auf der Startseite */
.rz-posten { margin-top: 10px; }
.rz-arbeit .rz-posten .dp-unterzeile { display: none; }
.rz-posten .st-liste { gap: 10px; }
.rz-posten .arb-zeile { gap: 0; align-items: center; border-radius: 18px; background: var(--karte); border: 1px solid var(--kante); box-shadow: var(--karte-schatten); }
.rz-posten .arb-oeffnen { border: 0; background: none; box-shadow: none; min-height: 64px; padding: 12px 14px; }
.rz-posten .st-zeichen { display: none; }
.arb-wann { display: none; }
.rz-posten .arb-wann { display: inline-block; flex: none; margin-left: 8px; font-size: .8rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.rz-posten .arb-wann.stufe-rot { color: var(--rot-text); background: color-mix(in srgb, var(--rot) 9%, transparent); }
.rz-posten .arb-wann.stufe-orange { color: var(--text); background: color-mix(in srgb, var(--orange) 14%, transparent); }
.rz-ring-wert.leer { stroke: var(--ring-bis); }   /* bei 0 ein goldener Startpunkt statt leerer Spur (Abnahme Befund 2) */
.rz-posten .arb-haken { order: -1; width: 52px; min-height: 52px; margin-left: 6px; display: grid; place-items: center;
  background: none; border: 0; color: transparent; font-size: 0; }
.rz-posten .arb-haken::before { content: ''; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--flow-rand-hell); box-sizing: border-box;
  grid-area: 1 / 1; }
.rz-posten .arb-haken::after { content: ''; grid-area: 1 / 1; width: 7px; height: 13px; margin-top: -3px; border: solid var(--auf-akzent);
  border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); }
.rz-posten .arb-haken:hover::before { border-color: var(--akzent); }
.rz-posten .arb-haken.ja::before { background: var(--akzent); border-color: var(--akzent); }
.rz-posten .arb-haken.ja::after { transform: rotate(45deg) scale(1); }
.rz-posten .arb-haken:disabled { opacity: 1; }

.rz-weiter { display: block; width: 100%; text-align: center; margin-top: 14px; border-radius: 16px; }
.rz-woche { margin-top: 22px; }

@media (prefers-reduced-motion: no-preference) {
  .rz-ring-wert { transition: stroke-dasharray 1s cubic-bezier(.2, .8, .2, 1); }
  .rz-posten .arb-haken::before { transition: background-color .2s, border-color .2s; }
  .rz-posten .arb-haken::after { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1) .05s; }
  .rz-posten .arb-zeile:has(.arb-haken.ja) { transition: opacity .4s .5s; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .rz-posten .arb-zeile:has(.arb-haken.ja) { opacity: .5; }
}

/* Icon-Set (ADR-048): Linie in Schriftfarbe, Fläche Teal 15 % — statt Emojis */
.ic { display: inline-block; vertical-align: middle; flex: none; overflow: visible; }
.ic-l { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-f { fill: var(--akzent); fill-opacity: .15; stroke: none; }
.nav-bereich[aria-current="page"] .ic-f, .nav-bereich.aktiv .ic-f, #untenleiste a.aktiv .ic-f, #untenleiste a[aria-current="page"] .ic-f { fill-opacity: .3; }
.nb-zeichen, .ul-zeichen, .mb-zeichen { display: inline-grid; place-items: center; line-height: 0; }
.mb-bereich-titel .ic { margin-right: 4px; vertical-align: -4px; }
/* Was früher ein Emoji trug, ist jetzt leer — der Platz fällt weg, die Schrift trägt */
.st-zeichen:empty, .mb-zeichen:empty, .ss-zeichen:empty, .ua-weg-zeichen:empty, .gg-zeichen:empty, .leer-zustand .zeichen:empty,
.nb-zeichen:empty, .ul-zeichen:empty, .za-zeichen:empty, .cp-zeichen:empty { display: none; }
/* Ohne Zeichen keine leere Zeichen-Spalte: sonst rückt der Text in die 36 px schmale erste Spalte */
.st-punkt:has(> .st-zeichen:empty), .st-punkt:has(> .st-text:first-child) { grid-template-columns: 1fr auto; }
/* Dasselbe für die anderen Raster mit Zeichen-Spalte: leeres oder fehlendes Zeichen → keine leere schmale Spalte */
.bt-liste li:has(> .bt-zeichen:empty) { grid-template-columns: 1fr; }
.ex-kopf:has(> .ex-zeichen:empty) { grid-template-columns: 1fr; }
.hb-nachschlagen:has(> .hb-nachschlagen-text:first-child) { grid-template-columns: 1fr 18px; }

/* „Hochladen" (ADR-048): immer gleich — Rechner oben rechts dunkel, Handy unten rechts über der Leiste */
.hl-knopf { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--hoch-text); background: var(--hoch-flaeche); box-shadow: var(--flow-glanz); }
.hl-knopf .ic-f { fill: var(--ring-bis); fill-opacity: .35; }
.hl-oben { min-height: 44px; padding: 9px 16px; border-radius: 12px; font-size: .95rem; margin-right: 6px; }   /* Tippziel 44 px (Note 1, W3) */
/* In der Leiste unten: wie die anderen Plätze, aber dunkel hinterlegt — immer an derselben Stelle */
#untenleiste .hl-unten { background: none; color: var(--text-leise); flex-direction: column; justify-content: center; gap: 2px; border-radius: 14px; box-shadow: none; padding: 6px 4px; }
/* Abnahme Befund 10: unten wie jeder andere Platz (nicht dauerhaft „ausgewählt"), erkennbar am goldenen Pfeil */
#untenleiste .hl-unten .ul-name { color: inherit; }
#untenleiste .hl-unten .ic-l { color: var(--akzent-text); }
#untenleiste .hl-unten .ic-f { fill: var(--ring-bis); fill-opacity: .45; }
/* Wohin der Verteiler springt, steht unter der festen Kopfleiste, nicht dahinter */
.ab-vorschau, .ls-einwurf-ergebnis, .hl-erkannt { scroll-margin-top: 90px; }
@media (max-width: 860px) { .hl-oben { display: none; } }
@media print { .hl-knopf { display: none !important; } }

.hl-dialog .hl-box { display: flex; flex-direction: column; gap: 14px; }
.hl-flaeche { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 32px 18px; cursor: pointer;
  border: 2px dashed var(--flow-rand-hell); border-radius: var(--flow-rund); background: color-mix(in srgb, var(--akzent) 4%, transparent); }
.hl-flaeche .ic { color: var(--akzent-text); }
.hl-flaeche b { font-size: 1.25rem; }
.hl-flaeche.drueber, .hl-flaeche:hover { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, transparent); }
.hl-datei { margin: 0; color: var(--text-leise); font-size: .95rem; overflow-wrap: anywhere; }
.hl-satz { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.hl-satz.leise { font-weight: 600; color: var(--text-leise); font-size: 1.1rem; }
.hl-weiter { width: 100%; }
.hl-kacheln { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.hl-kacheln .hl-wahl { min-height: 72px; width: 100%; }
.hl-andere { align-self: center; }
.hl-wartet { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 45;
  display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 14px;
  background: var(--held-von); color: var(--held-text); box-shadow: var(--flow-glanz); }
.hl-wartet .ua-klein { color: var(--held-text); }

/* „Als Nächstes hier" (ADR-048): ein Satz oben auf Leitungsseiten, ganz antippbar */
.ns-band { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 16px; padding: 12px 16px; border-radius: 16px;
  text-decoration: none; color: var(--heute-text); background: var(--heute-flaeche); border: 1px solid var(--heute-rand); }
.ns-band b { color: var(--text); }
.ns-wort { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ns-mehr { color: var(--text-leise); font-size: .95rem; }
.ns-pfeil { margin-left: auto; font-weight: 700; }
.ns-band:hover { border-color: var(--gold); }

/* Leere Zustände: einladend, groß, mittig — ein Satz, was man tun kann */
.leer-zustand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 32px 18px;
  border: 1.5px dashed var(--flow-rand-hell); border-radius: var(--flow-rund); background: color-mix(in srgb, var(--akzent) 3%, transparent); }
.leer-zustand b { font-size: 1.2rem; }
.leer-zustand .btn { margin-top: 8px; }
/* Kontrast (Messung ADR-048): Orange als Schrift auf eigenem Hauch erreicht 4,4 : 1 — dunkler Ton für die Schrift */
.ab-marke.stufe-achtung { color: var(--heute-text); }
.st-verantwortlich { margin-left: 6px; font-size: .78rem; padding: 1px 8px; }

/* Abnahme Befund 1 (ADR-048): vergessener Stempel auf der Start-Karte; Zeitkonto ohne Alarmfarbe */
.rz-vergessen { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 12px 14px; border-radius: 14px;
  background: var(--heute-flaeche); border: 1px solid var(--heute-rand); color: var(--text); }
.rz-vergessen b { color: var(--heute-text); }
.rz-vergessen .btn { align-self: flex-start; margin-top: 6px; }
.zt-konto-zahl.minus { color: var(--text); }
.zt-konto-satz { margin: 4px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--heute-flaeche); color: var(--text); font-size: .98rem; }
/* Hochladen (Abnahme Befund 3): was erkannt wurde, steht oben auf der Zielseite */
.hl-erkannt { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 14px; padding: 12px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--akzent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent); }
.hl-erkannt b { font-size: 1.1rem; }
.hl-erkannt span { color: var(--text-leise); font-size: .95rem; }
.ein-weitere { margin: 4px 0 18px; }
/* Dienstplan (Abnahme Befund 7): vergangene Tage neutral grau, keine Ampel mehr */
.dp-tag.vorbei { border-color: var(--rand); background: color-mix(in srgb, var(--vorder) 3%, var(--karte)); }
.vorbei > .dp-punkt, .vorbei .dp-tag-kopf .dp-punkt { background: var(--still); }
.dp-tag-knopf.vorbei .dp-tk-name, .dp-tag-knopf.vorbei .dp-tk-zahl { color: var(--text-leise); }
.stb-titel { display: block; } .stb-zurueck { display: inline-block; margin-bottom: 4px; }
.zt-konto-zahl.vorlaeufig { font-size: 1.35rem; color: var(--text-leise); }
/* ---------- Handbuch-Start: Mitarbeitende nur Suche + „Oft gebraucht"; am Handy keine Überlappung (Abnahme Befund 5) ---------- */
.hb-team-start { margin: .4rem 0 1.2rem; }
@media (max-width: 600px) {
  .hb-schaufenster { flex-direction: column; align-items: stretch; min-height: 0; }
  .hb-schaufenster-vorne { padding: 1.4rem 1rem .6rem; }
  .hb-schaufenster-knopf { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: 0 1rem 1rem; }
  .hb-schaufenster .hb-start-titel { font-size: 1rem; text-transform: none; letter-spacing: 0; line-height: 1.3; }
}

/* Abgleich in einem Schritt (Abnahme Nr. 3): Ergebnis-Satz groß, ein Knopf, kein Widerspruch darunter */
.ab-ergebnis { margin-bottom: 1rem; }
.ab-ergebnis-satz { font-size: 1.45rem; line-height: 1.3; font-weight: 800; margin: .2rem 0 .4rem; font-variant-numeric: tabular-nums; }
.ab-ergebnis .ab-weiter { display: block; width: 100%; max-width: 420px; margin: 1rem auto 0; text-align: center; }
.ab-laeuft { text-align: center; font-weight: 700; padding: 1.4rem 1rem; }
.ab-liest .ab-leer { display: none; }
@media (max-width: 600px) { .ab-ergebnis-satz { font-size: 1.25rem; } }
.ab-ergebnis { scroll-margin-top: 72px; }

/* Urlaubsantrag: was die Genehmigung für die Besetzung heißt (Befund unabhängige Prüfung Nr. 9) — der Satz sagt es, die Farbe hilft nur */
.ua-besetzung { margin: 6px 0; padding: 8px 12px; border-radius: 10px; font-weight: 600; line-height: 1.4; border-left: 4px solid var(--rand); background: var(--flow-karte-hell); color: var(--text); }
.ua-besetzung.stufe-gut { border-left-color: var(--gruen); }
.ua-besetzung.stufe-achtung { border-left-color: var(--orange); }
.ua-besetzung.stufe-kritisch { border-left-color: var(--rot); }


/* Kopfzeile bei mittlerer Breite (Rechner/Tablet 861–1199 px): „Hochladen" und „Suchen" nur als Symbol,
   damit nichts über den Rand ragt (Hinweis Cockpit-Sitzung: bei 1024 px 45 px zu breit) */
@media (min-width: 861px) and (max-width: 1199px) {
  .hl-oben { padding: 9px 11px; }
  .hl-oben span { display: none; }
  .kopf-suche .ks-text, .kopf-suche .ks-taste { display: none; }
  #hauptmenu .nav-bereich { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 861px) and (max-width: 1000px) { #hauptmenu .nb-zeichen { display: none; } #hauptmenu .nav-bereich { padding-left: 8px; padding-right: 8px; } }

/* Emojis sind aus dem Quelltext (ADR-048, Abnahme Befund 10): leere Symbolplätze fallen weg — die Schrift trägt */
[class*="zeichen"]:empty, .ss-lupe:empty { display: none; }
.ss-lupe { display: inline-grid; place-items: center; color: var(--text-leise); }
/* Personenliste: der Knopf trägt jetzt ein Wort statt eines Emojis */
.ma-bericht { font-size: .85rem; font-weight: 700; color: var(--akzent-text); width: auto; min-width: 64px; padding: 0 10px; }
/* Nur Belege (Mitarbeitende, ADR-051): rundes Symbol oben wie Suche und Konto, auch am Handy; nicht dunkel hinterlegt */
.hl-knopf.hl-rund { background: color-mix(in srgb, var(--vorder) 6%, transparent); color: var(--text); padding: 0; box-shadow: none; }
@media (max-width: 860px) { .hl-oben.hl-rund { display: inline-grid; place-items: center; } }
.rz-beleg { display: inline-block; margin: 14px 0 4px; }
/* Lernpfad-Zeile (Befund Videoprüfung EV-11): ohne Zeichen-Spalte — Haken, Titel über die volle Breite, Pfeil.
   Die Schritt-Zeichen waren Emojis; fiel die leere Zelle weg, rutschte der Titel in die 30-px-Spalte. */
.ln-schritt { grid-template-columns: 34px minmax(0, 1fr) 18px; }
.ln-schritt-zeichen { display: none; }
/* Kleiner Lernpfad-Ring (58 px): „100 %“ passt hinein, statt über den Ring zu ragen */
.ln-ring-halter:not(.gross) .ln-ring-zahl { font-size: .75rem; letter-spacing: -.02em; white-space: nowrap; }

/* ============================================================
 * „Meine Arbeit" neu (GF 24.10.2026): oben „Jetzt" mit einem Knopf, darunter „Danach" als Stapel und Zeilen,
 * unten eine schmale Leiste für die Weiter-Kette. Rot nur, was überfällig ist.
 * ============================================================ */
.ma-jetzt { flex-direction: column; align-items: stretch; gap: 16px; }
.ma-jetzt-kopf { display: flex; align-items: center; gap: 16px; }
.ma-ring { position: relative; flex: none; display: grid; place-items: center; }
.ma-ring-text small { display: block; font-size: .75rem; font-weight: 600; text-align: center; }
.ma-ring-text { position: absolute; text-align: center; font-size: .78rem; font-weight: 800; color: var(--held-text); font-variant-numeric: tabular-nums; }
.ma-jetzt-wort { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ring-bis) !important; }
.ma-jetzt .rz-held-text b { font-size: 1.3rem; }
.ma-jetzt-frist { align-self: flex-start; margin-top: 4px; font-size: .85rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--held-text) 14%, transparent); color: var(--held-text) !important; }
.ma-jetzt-knopf { display: block; width: 100%; text-align: center; border-radius: 16px; }

.ma-danach { margin-top: 18px; }
.ma-danach-wort { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-leise); margin: 0 4px 8px; }
.rz-posten .ma-stapel .arb-oeffnen { gap: 14px; }
.ma-zahl { flex: none; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--akzent-text);
  background: color-mix(in srgb, var(--akzent) 12%, transparent); }
/* Fälligkeit an jeder Zeile als Wort (auch „bis Fr 30.10."), nicht nur auf der Startseite */
.ma-danach .arb-wann { display: inline-block; align-self: flex-start; margin-top: 4px; font-size: .8rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.ma-danach .arb-wann.stufe-rot { color: var(--rot-text); background: color-mix(in srgb, var(--rot) 9%, transparent); }
.ma-danach .arb-wann.stufe-orange { color: var(--text); background: color-mix(in srgb, var(--orange) 14%, transparent); }
.ma-danach .arb-wann.stufe-still { color: var(--text-leise); background: color-mix(in srgb, var(--vorder) 6%, transparent); }

/* Weiter-Kette: schmal über der Leiste, am Rechner unten mittig */
.ma-kette { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 46;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 0 auto; max-width: 640px;
  padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--held-von); color: var(--held-text); box-shadow: var(--flow-glanz); }
.ma-kette-text { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.25; }
.ma-kette .ma-kette-weiter { flex: none; width: auto; padding: 10px 14px; min-height: 44px; }
.ma-kette .ma-kette-ende { flex: none; padding: 8px 6px; min-height: 44px; background: none; border: 0; }
.ma-kette-text { font-weight: 700; font-variant-numeric: tabular-nums; }
.ma-kette .ma-kette-ende { color: var(--held-leise); }
@media (min-width: 861px) { .ma-kette { bottom: 24px; } }
@media print { .ma-kette { display: none !important; } }
.ma-danach .rz-posten .arb-wann, .rz-posten.ma-danach .arb-wann { margin-left: 0; }
body:has(.ma-kette) #inhalt { padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important; }
/* Stempeln zuerst (W3-Stempeln): am Rechner unter dem Dienst, am Handy fest über der Leiste im Daumenbereich */
.rz-stempel-unten { justify-content: stretch; margin: 0 0 20px; }
.rz-stempel-unten > .stempel-knopf { margin: 0; }
@media (max-width: 1100px) {
  .bs-hauptknopf.rz-stempel-unten { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 45;
    margin: 0; padding: 0; background: none; }
  .rz-stempel-unten > .stempel-knopf { box-shadow: var(--flow-glanz); }
  body:has(.rz-stempel-unten) #inhalt { padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- Spielliste unter dem Video (GF 25.10.2026, spielliste.js) ---------- */
.sl-liste, .sl-naechstes { display: grid; gap: .5rem; }
.sl-naechstes { margin: .4rem 0 .8rem; }
.sl-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.sl-kopf h3 { margin: 0; }
.sl-suche { width: 100%; }
.sl-gruppen { display: grid; gap: .3rem; }
.sl-gruppe > summary { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; color: var(--text); }
.sl-zahl { font-size: .85rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.sl-reihe { display: grid; gap: .3rem; }
.sl-naechstes .sl-reihe { max-height: 320px; overflow-y: auto; }
.sl-zeile {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 12px;
  border: 1px solid var(--rand); color: var(--text); text-decoration: none; min-height: 52px;
  background: color-mix(in srgb, var(--vorder) 4%, transparent);
}
a.sl-zeile:hover, a.sl-zeile:focus-visible { background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.sl-zeile.aktuell { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 18%, transparent); }
.sl-zeile.erledigt { opacity: .62; }
.sl-marke {
  flex: 0 0 auto; min-width: 2.6rem; padding: .25rem .45rem; border-radius: 8px; text-align: center;
  font-size: .78rem; font-weight: 700; background: var(--akzent); color: var(--auf-akzent);
}
.sl-zeile.erledigt .sl-marke { background: var(--gruen); }
.sl-text { display: grid; min-width: 0; }
.sl-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-unter { font-size: .82rem; color: var(--text-leise); }
.sl-auto { font-size: .9rem; color: var(--text-leise); display: inline-flex; align-items: center; gap: .3rem; }
.sl-countdown {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .8rem; border-radius: 12px;
  background: color-mix(in srgb, var(--akzent) 16%, transparent); border: 1px solid var(--akzent);
}
.sl-countdown > span { flex: 1 1 14rem; font-weight: 600; }
/* Breiter Bildschirm: Spielliste rechts neben dem Durchsehen, wie bei YouTube */
@media (min-width: 1180px) {
  .sl-mit-liste { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
  .sl-mit-liste > .sl-liste { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
}

/* ---------- Hinweise zu Videos (GF 25.10.2026, videohinweise.js) ---------- */
.vh-kasten { display: grid; gap: .4rem; padding: .7rem .9rem; border-radius: 12px; margin: .3rem 0 .6rem;
  background: color-mix(in srgb, var(--orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); }
.vh-hinweis { line-height: 1.45; }
.vh-stelle { margin-left: .4rem; }
.vh-geben { display: grid; gap: .5rem; margin: .2rem 0 .6rem; }
.vh-text { width: 100%; }
.vh-stelle-wahl { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; color: var(--text-leise); }
.vh-danke { font-weight: 600; color: var(--gruen); }

/* ---------- Die Hilfe-Karte (Vorgabe der GF vom 02.11.2026): klein, eine Handlung, „Mehr dazu“ ---------- */
.hb-karte { gap: .8rem; }
.hb-karte-kopf { display: flex; gap: .6rem; align-items: center; }
.hb-karte-suche { flex: 1; min-width: 0; font-size: 1.05rem; padding: .7rem .9rem; border-radius: 999px; }
.hb-karte-treffer { display: grid; gap: .35rem; }
.hb-karte-treffer-zeile { display: grid; gap: .1rem; text-align: left; padding: .65rem .85rem; border: 1px solid var(--rand);
  border-radius: 12px; background: var(--karte, transparent); color: var(--text); font: inherit; cursor: pointer; }
.hb-karte-treffer-zeile:hover, .hb-karte-treffer-zeile:focus-visible { border-color: var(--akzent); }
.hb-karte-frage { font-weight: 650; font-size: 1.02rem; }
.hb-karte-wo, .hb-karte-leer { color: var(--text-leise); font-size: .92rem; margin: 0; }
.hb-karte-inhalt { display: grid; gap: .75rem; }
.hb-karte-titel { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.hb-karte-satz { margin: 0; font-size: 1.08rem; line-height: 1.45; }
.hb-karte-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hb-karte-schritte li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.05rem; line-height: 1.4; }
.hb-karte-schritte .hb-schritt-nr { width: 30px; height: 30px; flex: 0 0 30px; font-size: .95rem; margin-top: -.1rem; }
.hb-karte-bild { display: block; width: 100%; padding: 0; border: 1px solid var(--rand); border-radius: 12px; overflow: hidden;
  background: none; cursor: zoom-in; max-height: 190px; }
.hb-karte-bild img { display: block; width: 100%; height: auto; }
.hb-karte-mehr, .hb-karte-zurueck { justify-self: start; background: none; border: 0; padding: .35rem 0; font: inherit;
  color: var(--text-leise); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hb-karte-mehr { justify-self: center; font-size: .98rem; }
.hb-karte-mehr:hover, .hb-karte-zurueck:hover { color: var(--akzent); }
@media (max-width: 600px) {
  .hb-karte-titel { font-size: 1.25rem; }
  .hb-karte-bild { max-height: 150px; }
}

/* ---------- Fahrzeuge (ADR-068): nehmen/zurückgeben mit freiwilligem km-Stand ---------- */
.fz-handgriff { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.fz-km { flex: 0 1 12rem; min-width: 9rem; }
.fz-melden { display: flex; justify-content: flex-end; margin: .4rem 0 1rem; }
a.fz-stb { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
a.fz-stb:hover b { text-decoration: underline; }

/* Warnung vor einer Entscheidung und Knopf bei der Arbeit (ADR-080) */
.warnung-rot { margin: .4rem 0; color: var(--rot-text); font-weight: 600; }
button[aria-busy="true"] { opacity: .6; cursor: progress; }
.bestaetigen-angaben { font-weight: 600; }

/* Ein Fenster fragt nach, bevor Eingaben verloren gehen (ADR-080, A10) */
.modal-nachfrage { margin-top: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--rot); background: color-mix(in srgb, var(--rot) 9%, transparent); }
.modal-nachfrage p { margin: 0 0 10px; font-weight: 600; }
/* Lange Wörter und Links brechen um, statt die Seite zu sprengen (ADR-080, A11) */
.zt-meldung, .zt-meldung-kopf > *, .za-zeile, .za-neu, .zt-leise, .bestaetigen-angaben { overflow-wrap: anywhere; min-width: 0; }
/* Wer im Plan steht, aber fehlt (ADR-080, A14) */
.dp-dienst.dp-fehlt { opacity: .85; border-style: dashed; }
.dp-abwesend { color: var(--rot-text); font-size: .9rem; font-weight: 700; }

/* Eine Meldung, die etwas rettet (ADR-080, B2 und B9) */
.meldung-knopf { pointer-events: auto; margin-left: 10px; padding: 4px 12px; min-height: 36px; border-radius: 10px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }

/* Handy: Der Knopf des To-do-Fensters bleibt unten stehen, auch wenn das Fenster scrollt (ADR-080, D1) */
@media (max-width: 720px) {
  .af-formular > .btn-reihe { position: sticky; bottom: -1.2rem; padding: .7rem 0 1.2rem; background: var(--flach-hoch); z-index: 1; }
}

/* ---------- KI-Hilfe (ADR-084): ein Knopf, ein Feld, ein Mensch entscheidet ---------- */
.ki-platz { display: block; }
.ki-platz:empty { display: none; }
.ki-knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem .95rem; margin: .35rem 0;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--lila) 45%, var(--rand));
  background: color-mix(in srgb, var(--lila) 10%, transparent);
  color: var(--text); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .12s ease;
}
.ki-knopf:hover { background: color-mix(in srgb, var(--lila) 18%, transparent); }
.ki-knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.ki-feld {
  display: grid; gap: .7rem; margin: .5rem 0 1rem; padding: 1rem;
  border-radius: var(--flow-rund); border: 1px solid color-mix(in srgb, var(--lila) 35%, var(--rand));
  background: color-mix(in srgb, var(--flaeche) 92%, var(--lila));
}
.ki-hinweis { margin: 0; font-size: .88rem; color: var(--flow-leise); }
.ki-eingabe { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; }
.ki-ausgabe {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  padding: .8rem; border-radius: 12px; min-height: 3rem; max-height: 60vh; overflow: auto;
  background: var(--flaeche); border: 1px dashed color-mix(in srgb, var(--lila) 50%, var(--rand));
}
.ki-ausgabe.laeuft::after { content: '▍'; color: var(--lila); animation: ki-blinken 1s steps(2) infinite; }
@keyframes ki-blinken { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ki-ausgabe.laeuft::after { animation: none; } }
.ki-warte { margin: 0; color: var(--flow-leise); font-size: .92rem; }
.ki-marke {
  justify-self: start; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  padding: .15rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--lila) 16%, transparent); color: var(--text);
}
.ki-quellen { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.ki-quelle { padding: .2rem .6rem; border-radius: 10px; border: 1px solid var(--rand); }
.ki-fuss { display: flex; flex-wrap: wrap; gap: .5rem; }
.ki-fuss .btn { min-height: 44px; flex: 1 1 auto; }

/* GF-Steuerung */
.ki-steuerung { display: grid; gap: 1rem; }
.ki-verbrauch { display: grid; gap: .4rem; }
.ki-verbrauch-zahl { font-size: 1.3rem; font-weight: 700; }
.ki-balken { height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--vorder) 10%, transparent); }
.ki-balken-fuellung { height: 100%; border-radius: inherit; background: var(--gruen); }
.ki-balken.stufe-hinweis .ki-balken-fuellung { background: var(--orange); }
.ki-balken.stufe-gestoppt .ki-balken-fuellung { background: var(--rot); }
.ki-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ki-tabelle th, .ki-tabelle td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--rand); }
.ki-grenze { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.ki-funktion { display: grid; gap: .4rem; padding: .75rem 0; border-bottom: 1px solid var(--rand); }
.ki-funktion-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ki-schalter { flex: 0 0 auto; }
.ki-modell { max-width: 100%; }
.ki-nie { font-size: .9rem; color: var(--flow-leise); padding-left: 1.1rem; margin: 0; }
@media (min-width: 720px) {
  .ki-fuss .btn { flex: 0 0 auto; }
  .ki-modell { max-width: 28rem; }
}
.ki-quelle a { color: var(--akzent-tief); text-decoration: none; font-weight: 600; }
/* Kalender am Handy: Monatsraster mit einem Punkt je Tag statt der langen Liste (Befund A-5) */
.kl-monat { display: none; }
@media (max-width: 720px) {
  .kl-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 16px; }
  .kl-gitter { display: none !important; }
  .kl-monat-kopf { text-align: center; font-size: .8rem; font-weight: 600; color: var(--text-leise); padding-bottom: 2px; }
  .kl-monat-tag {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px;
    border-radius: 12px; border: 1px solid var(--rand); background: var(--flow-karte-hell); color: var(--text); font: inherit; cursor: pointer;
  }
  .kl-monat-tag.zu { background: transparent; color: var(--text-leise); border-style: dashed; }
  .kl-monat-tag.heute { border: 2px solid var(--akzent); }
  .kl-monat-zahl { font-weight: 700; font-size: 1rem; }
  .kl-monat-tag.zu .kl-punkt { visibility: hidden; }
}

/* ---------- Azubi-Karte auf „Heute" und Ausbildungsnachweis (Kritik D-3) ---------- */
.az-karte, .az-unterschreiben { display: grid; gap: 10px; }
.az-zeile { display: grid; grid-template-columns: minmax(8.5rem, auto) 1fr; gap: 4px 12px; align-items: baseline; }
.az-link { color: inherit; text-decoration: none; }
.az-woche { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 4px 0; }
.az-gut { color: var(--gruen-text); font-weight: 600; }
.az-haken { min-height: 44px; }
.az-nie { font-weight: 600; padding-top: 6px; border-top: 1px solid var(--rand); }
@media (max-width: 560px) { .az-zeile { grid-template-columns: 1fr; } }

/* ---------- Kapitel ↔ Checkliste (Kritik D-4) ---------- */
.af-so-gehts { display: inline-block; margin: 14px 0 4px; font-weight: 600; min-height: 44px; line-height: 44px; }
.af-ohne-kapitel { display: block; font-size: .85rem; color: var(--orange); }
.af-wird-geprueft { display: grid; gap: 4px; max-width: 900px; margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--gruen); background: var(--flaeche, transparent); border-radius: 8px; }
.af-wird-zeile a, .az-nie, .az-link span, .af-so-gehts { color: var(--akzent-text, var(--akzent)); text-decoration: none; font-weight: 600; }
.af-wird-zeile { display: flex; flex-wrap: wrap; gap: 2px 10px; }

/* Regel-Editor in Alltagssprache (Kritik 11/2026): Sätze mit Auswahlfeldern, Vorschau der nächsten Woche, JSON nur unter „Experte“ */
.re-dialog .re-feld { display: grid; gap: .35rem; margin: 0 0 .9rem; }
.re-dialog .re-feld > label { font-weight: 600; }
.re-bau { display: grid; gap: .6rem; margin: .4rem 0 .6rem; }
.re-lead { margin: .6rem 0 .1rem; font-weight: 600; }
.re-zeile { display: grid; gap: .5rem; padding: .7rem .8rem; border: 1px solid var(--rand); border-radius: 14px; }
.re-moeglichkeit { display: grid; gap: .45rem; }
.re-paar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.re-zahl { width: 4.5rem; min-height: 44px; }
.re-rolle, .re-vergleich { min-height: 44px; flex: 1 1 12rem; }
.re-und, .re-oder { color: var(--text-leise); font-size: .9rem; }
.re-oder { display: block; margin-top: .3rem; font-style: italic; }
.re-klein { min-height: 44px; justify-self: start; }
.re-satz { margin: .6rem 0 .2rem; padding: .7rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--akzent) 10%, transparent); font-weight: 600; }
.re-fehler:empty { display: none; }
.re-fehler { color: var(--rot-text, var(--text)); margin: .2rem 0; }
.re-vorschau h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.re-vorschau-kopf { margin: 0 0 .4rem; }
.re-tage { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.re-tag { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem .7rem; border-radius: 10px; border-left: 4px solid var(--rand); }
.re-tag.gut { border-left-color: var(--gruen, var(--akzent)); }
.re-tag.achtung { border-left-color: var(--orange, var(--akzent)); background: color-mix(in srgb, var(--orange, var(--akzent)) 8%, transparent); }
.re-aufgaben { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.re-haken { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; }
.re-meldung { width: 100%; min-height: 44px; }
.re-experte { margin: 1rem 0; }
.re-experte summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--text-leise); }
.re-json { width: 100%; font-family: ui-monospace, monospace; }

/* Stempel-Aufkleber (ADR-107): Werte zum Beschreiben, einmal angezeigt */
.ak-wert { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; margin: 10px 0; text-align: left; }
.ak-wert .zt-leise { grid-column: 1 / -1; }
.ak-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; overflow-wrap: anywhere; user-select: all; }
.ak-warnung { margin: 0 0 8px; font-weight: 600; color: var(--rot-text); text-align: left; }

/* Erstpasswort (ADR-109): zweiter Weg neben dem Einladungs-Link; der Vorschlag ist nur einmal zu sehen */
.einl-erstpw { border-top: 1px solid var(--rand); margin-top: 14px; padding-top: 10px; }
.erstpw-anzeige { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--flow-karte-hell); border: 1px solid var(--rand); }
.erstpw-anzeige p { margin: 0 0 6px; }
.erstpw-wert { font: 600 1.6rem/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; word-break: break-all; user-select: all; }

/* Erstpasswort für mehrere (RP-180): Kopf mit Filter und Zahl, Liste zum Anhaken */
.epm-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.epm-zahl { margin-left: auto; }
.epm-liste { max-height: 50vh; overflow-y: auto; border: 1px solid var(--rand); border-radius: 12px; margin: 4px 0 12px; }
.epm-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; min-height: 44px; border-top: 1px solid var(--linie); cursor: pointer; }
.epm-zeile:first-child { border-top: 0; }
.epm-zeile input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.epm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.epm-kennzeichen { font-size: .85rem; font-weight: 600; color: var(--orange); }