/* ============================================================
   bausteine.css — der eine Satz Bausteine von Kahf OS (ADR-055)
   ============================================================
   Geschäftsführung (25.10.2026): „wir hatten doch mal über Design geredet,
   warum sieht es wieder so billig aus". Maßstab ist der bestätigte Entwurf
   „Ruhige Zukunft": gleich große Karten, große Zahl mit kurzem Wort und
   kleinem Diagramm, viel Luft, wenige ruhige Farben (Navy, Teal, Gold),
   feine Linien-Icons, keine Emojis.

   Diese Datei lädt als letzte und ist verbindlich. Neue Bildschirme bauen
   nur aus diesen Bausteinen (Helfer in public/bausteine.js):

     .bs-kopf       Seitenkopf: Titel und ein Satz
     .bs-jetzt      Jetzt-Karte: das Eine, das gerade dran ist, ein Knopf
     .bs-raster     gleich große Kacheln
     .bs-kachel     Kachel: Titel klein, große Zahl, Wort, Mini-Diagramm, ein Satz
     .bs-liste      ruhige Liste in einer Karte, darin
       .bs-zeile    Zeile: Titel, Unterzeile, Fälligkeit rechts, Pfeil
       .bs-stapel   Stapelzeile: Zahl links („Privatrechnungen · 4")
     .bs-hinweis    Hinweis: weiße Karte mit Farbkante — kein beiger Balken
     .bs-leer       Leerzustand: Zeichen, ein Satz, höchstens ein Knopf
     .bs-knopf      Knopf primär (Teal) — eine Hauptsache je Bildschirm
     .bs-knopf-leise  Knopf leise — alles andere

   Unten: alte Klassen, auf diese Bausteine abgebildet (zwei Knopfarten,
   Hinweise, Überschriften, Hintergrund). Farben nur aus farben.css.
   tests/bausteine.test.js hält das fest.
   ============================================================ */

:root {
  --bs-rund: 18px;
  --bs-rund-klein: 12px;
  --bs-luft: 16px;
  --bs-schatten: var(--karte-schatten);
  --bs-kante: var(--kante);
}

/* ---------- Fläche: ruhig, ohne Farbwasch ---------- */
body { background: var(--hintergrund); background-attachment: scroll; }
#inhalt { max-width: 1180px; }

/* Keine Großbuchstaben-Etiketten im Inhalt — Schrift trägt die Hierarchie, nicht Versalien */
#inhalt *:not(.bs-jetzt-wort) { text-transform: none; }

/* ---------- Seitenkopf ---------- */
.bs-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 4px 0 20px; }
.bs-kopf-text { min-width: 0; flex: 1 1 320px; }
#inhalt .bs-kopf h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
#inhalt .bs-kopf .seiten-satz, #inhalt .seiten-satz { margin: 6px 0 0; color: var(--text-leise); font-size: 1rem; max-width: 62ch; }
#inhalt h1 + .seiten-satz { margin-bottom: 20px; }
.bs-kopf-rechts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Abschnitt: eine ruhige Zwischenüberschrift, kein Etikett */
.bs-abschnitt { margin: 28px 0 0; }
#inhalt .bs-abschnitt > h2, #inhalt .bs-abschnitt-titel {
  margin: 0 0 10px; font-size: 1.05rem; font-weight: 650; color: var(--text); letter-spacing: 0;
}

/* ---------- Karte (Grundform aller Flächen) ---------- */
.bs-karte {
  background: var(--karte); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund);
  box-shadow: var(--bs-schatten); padding: var(--bs-luft);
}

/* ---------- Jetzt-Karte ---------- */
.bs-jetzt {
  position: relative; overflow: hidden; border-radius: 24px; padding: 20px;
  background: linear-gradient(135deg, var(--held-von), var(--held-bis)); color: var(--held-text);
  box-shadow: 0 14px 30px var(--schatten);
  display: grid; gap: 16px;
}
.bs-jetzt::before {   /* sanfte Aura, nur hier */
  content: ""; position: absolute; inset: -60px -40px auto auto; width: 320px; height: 220px; pointer-events: none;
  background: radial-gradient(60% 60% at 40% 40%, var(--aura-teal), transparent 70%), radial-gradient(50% 50% at 80% 30%, var(--aura-gold), transparent 70%);
  filter: blur(8px); opacity: .9;
}
.bs-jetzt > * { position: relative; }
.bs-jetzt-kopf { display: flex; gap: 16px; align-items: center; min-width: 0; }
.bs-jetzt-text { display: grid; gap: 4px; min-width: 0; }
.bs-jetzt-wort { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ring-bis); }
.bs-jetzt-titel { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bs-jetzt-warum { color: var(--held-leise); font-size: .98rem; }
.bs-jetzt-frist { justify-self: start; font-size: .82rem; font-weight: 650; padding: 3px 10px; border-radius: 999px;
  background: var(--held-spur); color: var(--held-text); }
.bs-jetzt .bs-knopf { width: 100%; min-height: 56px; font-size: 1.08rem; }
/* leiser Knopf auf der dunklen Karte: helle Schrift auf heller Spur statt Akzentgrün auf Dunkel (Kontrast ≥ 4,5:1) */
.bs-jetzt .bs-knopf-leise { width: 100%; min-height: 56px; font-size: 1.08rem; background: var(--held-spur); color: var(--held-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--held-text) 28%, transparent); }
.bs-jetzt .bs-knopf-leise:hover { background: color-mix(in srgb, var(--held-text) 24%, transparent); }

/* ---------- Kacheln ---------- */
.bs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin: 16px 0 0; }
@media (max-width: 640px) { .bs-raster { grid-auto-rows: auto; } .bs-raster .bs-kachel { min-height: 0; } }
.bs-kachel {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 196px;
  background: var(--karte); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund);
  box-shadow: var(--bs-schatten); padding: 16px 18px; color: var(--text); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.bs-kachel:hover { transform: translateY(-2px); box-shadow: 0 2px 4px var(--bs-kante), 0 14px 30px var(--bs-kante); }
a.bs-kachel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.bs-kachel-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .88rem; font-weight: 600; color: var(--text-leise); }
.bs-kachel-titel svg { flex: none; color: var(--text-leise); }
.bs-zahl-zeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bs-zahl { font-size: 2.15rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bs-wort { font-size: .95rem; color: var(--text-leise); }
.bs-zahl.stufe-kritisch { color: var(--rot-text); }
.bs-zahl.stufe-achtung { color: var(--text); }
.bs-kachel-bild { margin-top: 6px; min-width: 0; }
.bs-kachel-satz { margin-top: auto; padding-top: 8px; font-size: .9rem; color: var(--text-leise); display: flex; gap: 6px; align-items: baseline; }
.bs-kachel-satz.stufe-kritisch { color: var(--rot-text); font-weight: 600; }
.bs-kachel-satz.stufe-achtung { color: var(--text); font-weight: 600; }
.bs-kachel-satz.stufe-kritisch::before, .bs-kachel-satz.stufe-achtung::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); background: var(--gold);
}
.bs-kachel-satz.stufe-kritisch::before { background: var(--rot); }

/* Mini-Diagramme in der Kachel: klein, ruhig, ohne eigene Überschrift */
.bs-kachel .dg { margin: 0; }
.bs-kachel .dg-unter, .bs-kachel .dg-verlauf-kopf { display: none; }
.bs-kachel .dg-balken-zeile { font-size: .85rem; min-height: 28px; gap: 10px; padding: 0; grid-template-columns: minmax(0, 40%) 1fr auto; }
.bs-kachel .dg-balken-name { color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-kachel .dg-balken-zahl { font-weight: 600; font-variant-numeric: tabular-nums; }
.bs-kachel .dg-verlauf-svg { max-height: 96px; }
.bs-kachel .dg-legende { font-size: .82rem; }
/* Heatmap: ruhige Farbfelder mit lesbarem Zeichen (✓ gut, ! knapp, ✕ fehlt jemand, – zu) — nie Farbe allein (Befund R1: keine 0-px- und keine unsichtbare Schrift) */
.bs-kachel .dg-heat-zelle { min-height: 20px; border-radius: 4px; border: 0; display: grid; place-items: center;
  font-size: .75rem; font-weight: 800; line-height: 1; color: var(--text-leise); }
.bs-kachel .dg-heat-zelle.stufe-gut { background: color-mix(in srgb, var(--akzent) 22%, transparent); color: var(--akzent-text); }
.bs-kachel .dg-heat-zelle.stufe-still { background: color-mix(in srgb, var(--vorder) 7%, transparent); }
.bs-kachel .dg-heat-zelle.stufe-achtung { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--text); }
.bs-kachel .dg-heat-zelle.stufe-kritisch { background: color-mix(in srgb, var(--rot) 16%, transparent); color: var(--rot-text); }
.bs-legende { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: .78rem; color: var(--text-leise); }
.bs-legende i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; margin-right: 5px; vertical-align: -4px;
  font-style: normal; font-size: .75rem; font-weight: 800; line-height: 1; color: var(--text); }
.bs-legende .gut { background: color-mix(in srgb, var(--akzent) 22%, transparent); }
.bs-legende .achtung { background: color-mix(in srgb, var(--gold) 30%, transparent); }
.bs-legende .kritisch { background: color-mix(in srgb, var(--rot) 16%, transparent); }
.bs-legende .still { background: color-mix(in srgb, var(--vorder) 7%, transparent); }

/* ---------- Liste, Zeile, Stapelzeile ---------- */
.bs-liste {
  background: var(--karte); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund);
  box-shadow: var(--bs-schatten); overflow: hidden;
}
.bs-liste > * + * { border-top: 1px solid var(--rand); }
.bs-zeile { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; color: var(--text); text-decoration: none; }
a.bs-zeile:hover, .bs-zeile a.bs-zeile-ziel:hover { background: var(--flow-karte-hell); }
.bs-zeile-ziel { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; align-self: stretch; }
/* Note 1, W3: Der Link trägt die volle Zeilenhöhe als Tippziel (mindestens 44 px) — der Abstand liegt im Link, nicht in der Zeile */
.bs-zeile:has(> .bs-zeile-ziel) { padding-block: 0; }
.bs-zeile > .bs-zeile-ziel { padding-block: 12px; min-height: 44px; }
/* Zeile mit eigenem Knopf (z. B. „Jetzt sichern“ im Cockpit): am Handy steht der Knopf unter dem Satz */
.bs-zeile > .bs-knopf { flex: none; }
@media (max-width: 640px) { .bs-zeile:has(> .bs-knopf) { flex-wrap: wrap; } .bs-zeile > .bs-knopf { width: 100%; } }
.bs-zeile-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.bs-zeile-titel { font-weight: 600; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.bs-zeile-unter { font-size: .88rem; color: var(--text-leise); overflow-wrap: anywhere; }
.bs-wann { flex: none; font-size: .85rem; font-weight: 600; color: var(--text-leise); white-space: nowrap; }
.bs-wann.stufe-kritisch { color: var(--rot-text); }
.bs-wann.stufe-achtung { color: var(--text); }
.bs-pfeil { flex: none; color: var(--text-leise); font-size: 1.3rem; line-height: 1; }
.bs-stapel-zahl {
  flex: none; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--akzent) 12%, transparent); color: var(--akzent-text); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.bs-zeile-zeichen { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--vorder) 6%, transparent); color: var(--text-leise); }
@media (max-width: 560px) {
  .bs-zeile { padding: 12px 14px; }
  .bs-zeile-ziel { flex-wrap: wrap; row-gap: 2px; }
  .bs-zeile-ziel .bs-wann { order: 3; flex-basis: 100%; padding-left: 56px; }
  .bs-zeile-ziel:not(:has(.bs-stapel-zahl, .bs-zeile-zeichen)) .bs-wann { padding-left: 0; }
}

/* Haken vorne: ein runder Kreis zum Abhaken (wie im Entwurf), gefüllt erst nach dem Tipp */
.bs-zeile > .arb-haken { order: -1; flex: none; width: 44px; min-height: 44px; margin: 0 -4px 0 -6px; display: grid; place-items: center;
  background: none; border: 0; color: transparent; font-size: 0; cursor: pointer; }
.bs-zeile > .arb-haken::before { content: ''; grid-area: 1 / 1; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--flow-rand-hell); box-sizing: border-box; }
.bs-zeile > .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); }
.bs-zeile > .arb-haken:hover::before { border-color: var(--akzent); }
.bs-zeile > .arb-haken.ja::before { background: var(--akzent); border-color: var(--akzent); }
.bs-zeile > .arb-haken.ja::after { transform: rotate(45deg) scale(1); }
.bs-zeile > .arb-haken:disabled { opacity: 1; }
.bs-zeile:has(> .arb-haken.ja) { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .bs-zeile > .arb-haken::before { transition: background-color .2s, border-color .2s; }
  .bs-zeile > .arb-haken::after { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1) .05s; }
  .bs-zeile { transition: opacity .4s .5s; }
}

/* Zweispaltige Liste (Rechner): kurze Einträge nebeneinander, z. B. „Braucht dich heute" */
@media (min-width: 900px) {
  .bs-liste.bs-zwei { display: grid; grid-template-columns: 1fr 1fr; }
  .bs-liste.bs-zwei > * + * { border-top: 0; }
  .bs-liste.bs-zwei > * { border-bottom: 1px solid var(--rand); }
  .bs-liste.bs-zwei > *:nth-child(odd) { border-right: 1px solid var(--rand); }
  .bs-liste.bs-zwei > *:nth-last-child(-n+2):nth-child(odd), .bs-liste.bs-zwei > *:last-child { border-bottom: 0; }
}
.bs-liste.bs-zwei .bs-zeile-unter { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Hinweis ---------- */
.bs-hinweis {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px; margin: 12px 0;
  background: var(--karte); border: 1px solid var(--bs-kante); border-left: 4px solid var(--akzent);
  border-radius: var(--bs-rund-klein); box-shadow: var(--bs-schatten); color: var(--text); text-decoration: none;
}
.bs-hinweis.stufe-achtung { border-left-color: var(--gold); }
.bs-hinweis.stufe-kritisch { border-left-color: var(--rot); }
.bs-hinweis-text { flex: 1; min-width: 0; }
.bs-hinweis-text b { font-weight: 650; }
a.bs-hinweis:hover { background: var(--flow-karte-hell); }

/* ---------- Leerzustand ---------- */
.bs-leer { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 36px 20px; color: var(--text-leise);
  background: var(--karte); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund); box-shadow: var(--bs-schatten); margin-bottom: 16px; }
.bs-leer-zeichen { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: color-mix(in srgb, var(--akzent) 10%, transparent); color: var(--akzent-text); }
.bs-leer-satz { font-size: 1rem; max-width: 46ch; }

/* ---------- Zwei Knopfarten ---------- */
.bs-knopf, .bs-knopf-leise {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 14px; font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bs-knopf { background: var(--akzent); color: var(--auf-akzent); box-shadow: 0 6px 16px color-mix(in srgb, var(--akzent) 25%, transparent); }
.bs-knopf:hover { background: var(--akzent-tief); transform: translateY(-1px); }
.bs-knopf-leise { background: color-mix(in srgb, var(--akzent) 9%, transparent); color: var(--akzent-text); }
.bs-knopf-leise:hover { background: color-mix(in srgb, var(--akzent) 16%, transparent); }
.bs-knopf:disabled, .bs-knopf-leise:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bs-knopf:focus-visible, .bs-knopf-leise:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.bs-wege { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; }

/* ============================================================
   Alte Klassen → Bausteine (damit nichts zusammengestückelt wirkt)
   ============================================================ */

/* Knöpfe: aus fünf Arten werden zwei. Primär: .btn, .btn.primaer, .btn.gruen. Leise: alles Kleine und Zweite. */
#inhalt .btn, #modal-box .btn, .ma-kette .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 14px; border: 1px solid transparent; font-weight: 650; font-size: 1rem; text-decoration: none;
  background: var(--akzent); color: var(--auf-akzent); box-shadow: 0 6px 16px color-mix(in srgb, var(--akzent) 25%, transparent);
  filter: none;
}
#inhalt .btn:hover, #modal-box .btn:hover { background: var(--akzent-tief); transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--akzent) 25%, transparent); }
#inhalt .btn.primaer, #inhalt .btn.gruen, #modal-box .btn.primaer, #modal-box .btn.gruen { background: var(--akzent); color: var(--auf-akzent); border-color: transparent; }
#inhalt .btn.gross, #modal-box .btn.gross { min-height: 56px; font-size: 1.08rem; padding: 0 24px; }
#inhalt .btn.leise, #inhalt .btn.gefahr, #modal-box .btn.leise, #modal-box .btn.gefahr, #inhalt .klein-btn, #inhalt .ua-klein {
  background: color-mix(in srgb, var(--akzent) 9%, transparent); color: var(--akzent-text); border-color: transparent; box-shadow: none;
}
#inhalt .btn.leise:hover, #inhalt .btn.gefahr:hover, #modal-box .btn.leise:hover, #modal-box .btn.gefahr:hover, #inhalt .klein-btn:hover, #inhalt .ua-klein:hover {
  background: color-mix(in srgb, var(--akzent) 16%, transparent); transform: none; box-shadow: none;
}
#inhalt .btn.gefahr, #modal-box .btn.gefahr { color: var(--rot-text); background: color-mix(in srgb, var(--rot) 9%, transparent); }
#inhalt .ua-klein { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 600; text-decoration: none; font-size: .95rem; }

/* Hinweise: kein beiger oder oranger Balken mehr — weiße Karte mit Farbkante */
#inhalt :is(.se-hinweis, .ma-hinweis, .zt-hinweis, .ab-hinweis, .gr-hinweis, .ln-hinweis, .bl-hinweis, .hinweis-mittel, .zt-konto-satz, .ln-patin) {
  background: var(--karte); color: var(--text); border: 1px solid var(--bs-kante); border-left: 4px solid var(--gold);
  border-radius: var(--bs-rund-klein); box-shadow: var(--bs-schatten); padding: 12px 14px;
}
#inhalt .warnung-liste li { background: var(--karte); border: 1px solid var(--bs-kante); border-left: 4px solid var(--gold); color: var(--text); }

/* „Als Nächstes hier" (app.js): dieselbe Hinweis-Karte */
#inhalt .ns-band {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 16px;
  background: var(--karte); color: var(--text); border: 1px solid var(--bs-kante); border-left: 4px solid var(--akzent);
  border-radius: var(--bs-rund-klein); box-shadow: var(--bs-schatten); text-decoration: none;
}
#inhalt .ns-band .ns-wort { font-size: .88rem; font-weight: 600; color: var(--text-leise); letter-spacing: 0; }
#inhalt .ns-band .ns-pfeil { margin-left: auto; color: var(--akzent-text); font-weight: 600; }
/* Der Satz oben sagt, was dran ist — darunter nur der Knopf mit dem Verb, keine zweite Karte (Philosophie-Kontrolle G1, R4) */
#inhalt .ns-band.ns-jetzt { background: none; border: 0; box-shadow: none; padding: 0; margin: 4px 0 16px; }

/* Leerzustände und Fehler der Module: wie .bs-leer */
#inhalt :is(.leer-zustand, .cp2-leer, .vt-leer) {
  background: var(--karte); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund); box-shadow: var(--bs-schatten);
  color: var(--text-leise); padding: 32px 20px; text-align: center;
}
#inhalt .karte { border-radius: var(--bs-rund); border: 1px solid var(--bs-kante); box-shadow: var(--bs-schatten); }

/* Kleine graue Fußlinks: lesbar, als leise Knöpfe */
#inhalt :is(.ls-fuss, .arb-wege) a { font-size: .95rem; }

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion: reduce) {
  .bs-kachel, .bs-knopf, .bs-knopf-leise, #inhalt .btn { transition: none; }
  a.bs-kachel:hover, .bs-knopf:hover, #inhalt .btn:hover { transform: none; }
}

/* Listen (ADR-052) auf den Bausteinen: Jetzt-Karte ohne alte Kante, Gruppen ruhig */
#inhalt .bs-jetzt { border: 0; display: grid; align-items: stretch; gap: 16px; }
#inhalt .ls-laufend h2 { color: var(--text); margin: 0 0 10px; }
#inhalt .ls-reihe-gruppe { border: 0; padding: 0; margin-top: 14px; }
#inhalt .ls-reihe-gruppe .bs-abschnitt-titel { font-size: .92rem; font-weight: 600; color: var(--text-leise); margin: 0 0 8px 2px; }
#inhalt .ls-reihen { padding: 0; }
#inhalt .ls-ohne-ki { margin-top: 12px; }
#inhalt .arb-kennzahlen { display: grid; gap: 10px; margin: 14px 0 4px; }
#inhalt .arb-kennzahlen .bs-hinweis { margin: 0; }

/* Videoreihen (Videos, Handbuchkapitel) als ruhige Liste: eine Karte, Trennlinien, Abspielzeichen getönt */
#inhalt .hb-video-reihe { display: block; margin: 0; background: var(--karte); border: 1px solid var(--bs-kante);
  border-radius: var(--bs-rund); box-shadow: var(--bs-schatten); overflow: hidden; }
#inhalt .hb-video-reihe > .hb-video-kachel + .hb-video-kachel { border-top: 1px solid var(--rand); }
#inhalt .hb-video-kachel { width: 100%; min-height: 64px; padding: 12px 16px; gap: 12px; border: 0; border-radius: 0;
  box-shadow: none; background: transparent; text-align: left; }
#inhalt .hb-video-kachel:hover { background: var(--flow-karte-hell); }
#inhalt .hb-video-play { width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: color-mix(in srgb, var(--akzent) 12%, transparent); color: var(--akzent-text); }
#inhalt .hb-video-titel { font-weight: 600; }

/* Umschalter „Cockpit / Mein Tag“: Zeichen mit Luft zum Wort */
#inhalt .heute-reiter .dp-wahl { display: inline-flex; align-items: center; gap: 8px; }
#inhalt .heute-reiter .nb-zeichen { display: inline-grid; place-items: center; }

/* ============================================================
   Etappe 2: Altbestand der übrigen Bildschirme auf die Bausteine
   ============================================================ */

/* Seitenköpfe: Titel und Satz links untereinander, Knöpfe rechts — wie .bs-kopf */
#inhalt :is(.dp-kopf, .ln-kopf) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: end; margin: 4px 0 20px; }
#inhalt :is(.dp-kopf, .ln-kopf) > :is(h1, h2) { grid-column: 1; margin: 0 0 4px; }
#inhalt :is(.dp-kopf, .ln-kopf) > .seiten-satz { grid-column: 1; margin: 0; }
#inhalt :is(.dp-kopf, .ln-kopf) > :not(h1, h2, .seiten-satz) { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
#inhalt :is(.ab-kopf, .gr-kopf) { align-items: flex-end; margin: 4px 0 20px; }
#inhalt :is(.ab-kopf, .gr-kopf) h1 { margin: 0 0 4px; }
#inhalt .st-kopf { margin-bottom: 20px; }
@media (max-width: 640px) {
  #inhalt :is(.dp-kopf, .ln-kopf) { grid-template-columns: 1fr; }
  #inhalt :is(.dp-kopf, .ln-kopf) > :not(h1, h2, .seiten-satz) { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
}

/* Abschnitte: ohne eigene Karte, wenn darin eine Liste steht; sonst eine Bausteinkarte */
#inhalt .zt-block { max-width: none; padding: 20px; border-radius: var(--bs-rund); border: 1px solid var(--bs-kante);
  background: var(--karte); box-shadow: var(--bs-schatten); margin: 0 0 24px; }
#inhalt .zt-block:has(> .st-liste), #inhalt .zt-block:has(> .zt-block-kopf + .st-liste) {
  padding: 0; border: 0; background: none; box-shadow: none; }
#inhalt .zt-block > h2, #inhalt .zt-block-kopf h2, #inhalt .ab-abschnitt, #inhalt .gr-raum-kopf b {
  font-size: 1.05rem; font-weight: 650; color: var(--text); letter-spacing: 0; margin: 0 0 10px; }
#inhalt .zt-block-kopf { margin-bottom: 10px; }
#inhalt .zt-block-kopf h2 { margin: 0; }

/* Zeilen: eine Karte mit Trennlinien, Stufe als kleiner Punkt statt bunter Kante */
#inhalt :is(.st-liste, .ab-aufgaben, .gr-liste) { display: block; margin: 0; background: var(--karte); border: 1px solid var(--bs-kante);
  border-radius: var(--bs-rund); box-shadow: var(--bs-schatten); overflow: hidden; }
#inhalt .st-punkt { min-height: 64px; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; }
#inhalt .st-punkt:hover { background: var(--flow-karte-hell); }
#inhalt .st-punkt:is(.stufe-rot, .stufe-orange, .stufe-achtung):has(> .st-zeichen:empty) { grid-template-columns: 10px 1fr auto; }
#inhalt .st-punkt:is(.stufe-rot, .stufe-orange, .stufe-achtung) > .st-zeichen:empty { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--st-farbe); }
#inhalt :is(.ab-aufgabe, .gr-zeile) { min-height: 64px; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#inhalt :is(.ab-aufgabe, .gr-zeile):hover { background: var(--flow-karte-hell); }
#inhalt :is(.st-liste, .ab-aufgaben, .gr-liste) > * + * { border-top: 1px solid var(--rand); }
#inhalt .gr-punkt { width: 10px; height: 10px; box-shadow: none; }
#inhalt .gr-raum-kopf { margin: 24px 2px 10px; }
#inhalt .ma-zeile + .ma-zeile { border-top: 1px solid var(--rand); }

/* Kennzahlen (Privatabrechnung, Belege): wie Kacheln — große Zahl, kleines Wort */
#inhalt .ab-zahlen { gap: 16px; margin-bottom: 8px; }
#inhalt .ab-zahl { padding: 20px; border-radius: var(--bs-rund); border: 1px solid var(--bs-kante); background: var(--karte); box-shadow: var(--bs-schatten); }
#inhalt .ab-zahl-titel { font-size: .9rem; font-weight: 600; color: var(--text-leise); }
#inhalt .ab-zahl-wert { font-size: 2.15rem; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; }
#inhalt .ab-zahl.stufe-achtung .ab-zahl-wert, #inhalt .ab-zahl.stufe-gut .ab-zahl-wert { color: var(--text); }
#inhalt .ab-zahl.stufe-kritisch .ab-zahl-wert { color: var(--rot-text); }

/* Hinweis zum Prüfen (Privatabrechnung) und Leerzustand */
#inhalt .ab-pruefen { background: var(--karte); border: 1px solid var(--bs-kante); border-left: 4px solid var(--gold);
  border-radius: var(--bs-rund-klein); box-shadow: var(--bs-schatten); padding: 14px 16px; color: var(--text); }
#inhalt .ab-leer { background: var(--karte); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund); box-shadow: var(--bs-schatten); padding: 32px 16px; color: var(--text-leise); }
#inhalt .ab-leer-zeichen { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.4rem;
  background: color-mix(in srgb, var(--akzent) 12%, transparent); color: var(--akzent-text); }

/* Wege-Kacheln (Start, Einstellungen) und Standortkarten: gleich große Bausteinkarten */
#inhalt .mb-kachel, #inhalt .stb-karte { border-radius: var(--bs-rund); border: 1px solid var(--bs-kante); background: var(--karte); box-shadow: var(--bs-schatten); }
#inhalt .mb-kachel { min-height: 96px; padding: 16px; gap: 10px; }
#inhalt .mb-kachel:hover, #inhalt .stb-karte:hover { background: var(--flow-karte-hell); border-color: var(--bs-kante); }
#inhalt .mb-zeichen:not(:empty) { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--akzent) 12%, transparent); color: var(--akzent-text); }
#inhalt .st-wege { max-width: none; gap: 16px; margin-bottom: 24px; }

/* Auswahl (Standorte, Filter): ruhige Chips, gewählt in Teal */
#inhalt .pa-praxis { border-radius: var(--bs-rund-klein); border: 1px solid var(--bs-kante); background: var(--karte); box-shadow: none; }
#inhalt .pa-praxis.aktiv { border: 1px solid var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, var(--karte)); }
/* Stufe ohne Zeichenfeld (Start „Was dich heute braucht“): Punkt vor dem Text */
#inhalt .st-punkt:is(.stufe-rot, .stufe-orange, .stufe-achtung):has(> .st-text:first-child) { grid-template-columns: 10px 1fr auto; }
#inhalt .st-punkt:is(.stufe-rot, .stufe-orange, .stufe-achtung):has(> .st-text:first-child)::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--st-farbe); }
#inhalt .ab-abschnitt { margin: 28px 0 10px; }
/* Lage im Dienstplan: Hinweis statt farbigem Kasten */
#inhalt .dp-lage { background: var(--karte); border: 1px solid var(--bs-kante); border-left: 4px solid var(--akzent);
  border-radius: var(--bs-rund-klein); box-shadow: var(--bs-schatten); color: var(--text); }
#inhalt .dp-lage.achtung { border-left-color: var(--gold); }

/* Handbuch-Kapitel: Lesespalte, Schritte und Abhakliste als ruhige Listen, Kästen als Hinweise */
#inhalt .hb-pw { max-width: 900px; }
#inhalt .hb-mikro { letter-spacing: .02em; font-weight: 650; }
#inhalt .hb-abschnitt h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 10px; }
#inhalt .hb-wichtigste, #inhalt .hb-unsicher { background: var(--karte); border: 1px solid var(--bs-kante); border-left: 4px solid var(--akzent);
  border-radius: var(--bs-rund-klein); box-shadow: var(--bs-schatten); padding: 16px 18px; font-size: 1.05rem; }
#inhalt .hb-unsicher { border-left-color: var(--gold); }
#inhalt ol.hb-schritte, #inhalt .hb-haken-liste { display: block; gap: 0; padding: 0; margin: 0; background: var(--karte); border: 1px solid var(--bs-kante);
  border-radius: var(--bs-rund); box-shadow: var(--bs-schatten); overflow: hidden; }
#inhalt .hb-schritt, #inhalt .hb-haken-zeile { margin: 0; padding: 14px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#inhalt .hb-schritt + .hb-schritt, #inhalt .hb-haken-zeile + .hb-haken-zeile { border-top: 1px solid var(--rand); }
#inhalt .hb-schritt { grid-template-columns: 32px 1fr; }
#inhalt .hb-schritt-nr { width: 32px; height: 32px; font-size: .95rem; background: color-mix(in srgb, var(--akzent) 12%, transparent); color: var(--akzent-text); }
#inhalt .hb-unsicher p, #inhalt .hb-wichtigste p:last-child { margin-bottom: 0; }
#inhalt .hb-haken-zeile:hover { background: var(--flow-karte-hell); }
#inhalt .hb-haken-zeile.an { background: transparent; }
#inhalt .hb-haken-kasten { border-radius: 50%; }
#inhalt .hb-nachschlagen { background: var(--karte); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund); box-shadow: var(--bs-schatten); }
#inhalt .hb-nachschlagen:hover { background: var(--flow-karte-hell); border-color: var(--bs-kante); }

/* Kapitel als Dokument (ADR-071): ruhiger Einleitungskasten, darunter der Text am Stück in einer Lesespalte,
   normale Überschriften ohne Nummern, Checklisten mit Haken, Kopfdaten zugeklappt am Ende */
#inhalt .hb-blatt { max-width: 720px; gap: 18px; }
#inhalt .hb-blatt > *, #inhalt .hb-lesetext > * { min-width: 0; }   /* breite Tabellen scrollen in sich, nicht die Seite */
#inhalt .hb-einleitung { background: var(--flow-karte-hell); border: 1px solid var(--rand); border-radius: var(--bs-rund-klein);
  padding: 14px 18px; font-size: 1.08rem; line-height: 1.6; }
#inhalt .hb-einleitung p { margin: .3rem 0 0; }
#inhalt .hb-lesetext { display: grid; gap: 6px; font-size: 1.06rem; line-height: 1.65; color: var(--text); }
#inhalt .hb-teil h2 { font-size: 1.2rem; font-weight: 700; margin: 18px 0 8px; }
#inhalt .hb-teil:first-child h2 { margin-top: 4px; }
#inhalt .hb-teil p { margin: 0 0 12px; }
#inhalt .hb-teil .hb-untertitel { font-size: 1.06rem; color: var(--text); margin: 14px 0 6px; }
#inhalt .hb-teil .hb-liste { display: block; margin: 0 0 12px; padding-left: 24px; }
#inhalt .hb-teil .hb-liste li { margin-bottom: 6px; }
#inhalt .hb-teil .hb-zitat { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--rand); }
#inhalt .hb-teil .tabellen-halter { border: 1px solid var(--rand); border-radius: 12px; margin: 0 0 12px; overflow-x: auto; }
#inhalt .hb-teil table { font-size: .97rem; border-collapse: collapse; width: 100%; }
#inhalt .hb-teil th { text-align: left; background: var(--flow-karte-hell); font-weight: 600; }
#inhalt .hb-teil th, #inhalt .hb-teil td { padding: 9px 12px; border-bottom: 1px solid var(--rand); vertical-align: top; }
#inhalt .hb-teil tr:last-child td { border-bottom: 0; }
#inhalt .hb-hakenliste { list-style: none; margin: 0 0 12px; padding: 0; }
#inhalt .hb-hakenliste li { position: relative; padding: 6px 0 6px 34px; }
#inhalt .hb-hakenliste li::before { content: '✓'; position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--akzent-text);
  background: color-mix(in srgb, var(--akzent) 12%, transparent); }
#inhalt .hb-haken-neben { display: block; font-size: .92rem; color: var(--text-leise); }
#inhalt .hb-verweis { color: var(--akzent-text); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0;
  padding: 0; font: inherit; cursor: pointer; text-align: left; }
#inhalt .hb-marke { font-size: .82rem; color: var(--text-leise); margin-left: 4px; white-space: nowrap; }
/* Dateien am Kapitel (ADR-073): Vorschau, Titel, ein großer Knopf; im Text ein Verweis oder leise „Datei folgt“ */
#inhalt .hb-datei-chip { color: var(--akzent-text); text-decoration: underline; text-underline-offset: 3px; }
#inhalt .hb-datei-folgt { font-size: .9rem; color: var(--text-leise); font-style: italic; white-space: nowrap; }
#inhalt .hb-datei-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 12px; }
#inhalt .hb-datei { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--bs-kante); border-radius: var(--bs-rund);
  background: var(--karte); overflow: hidden; }
#inhalt .hb-datei-vorschau { height: 160px; display: grid; place-items: center; background: var(--flow-karte-hell);
  border-bottom: 1px solid var(--rand); }
#inhalt .hb-datei-bild { max-width: 92%; max-height: 144px; object-fit: contain; }
#inhalt .hb-datei-art { font-size: 1.4rem; font-weight: 700; letter-spacing: .06em; color: var(--text-leise); }
#inhalt .hb-datei-text { display: grid; gap: 8px; padding: 12px 14px 14px; align-content: start; }
#inhalt .hb-datei-titel { overflow-wrap: anywhere; }
#inhalt .hb-datei-laden { width: 100%; justify-content: center; text-align: center; min-height: 48px; }
#inhalt .hb-datei-text .btn-reihe { gap: 6px; }
#inhalt .hb-datei-fehlt li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
#inhalt .hb-ueber { border-top: 1px solid var(--rand); padding-top: 12px; color: var(--text-leise); }
#inhalt .hb-ueber summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
#inhalt .hb-ueber-liste { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 12px; font-size: .95rem; }
#inhalt .hb-ueber-liste dt { font-weight: 600; }
#inhalt .hb-ueber-liste dd { margin: 0; overflow-wrap: anywhere; }
#inhalt .hb-gelesen-ende { display: grid; gap: 6px; }
#inhalt .hb-arbeitsstand { margin: 4px 0 12px; }
#inhalt .hb-arbeitsstand > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
#inhalt .hb-arbeitsstand h3 { font-size: 1rem; margin: 12px 0 6px; color: var(--text); }

/* Kalender: der Monat als eine Karte mit Trennlinien, ungeplante Tage ohne eigenen Kasten */
#inhalt .kl-gitter { gap: 0; padding: 4px 12px 8px; background: var(--karte); border: 1px solid var(--bs-kante);
  border-radius: var(--bs-rund); box-shadow: var(--bs-schatten); }
#inhalt .kl-kopfzeile { background: var(--karte); }
#inhalt .kl-tag { padding: 3px 0; border-top: 1px solid var(--rand); }
#inhalt .kl-zelle { min-height: 44px; }   /* W3b: Daumenmaß, Monat am Rechner unter 3 Bildschirmen */
#inhalt .kl-zelle.offen-plan { background: transparent; border: 1px dashed var(--rand); }

/* Diagrammkarten außerhalb des Cockpits (Standorte): Bausteinkarte, Heatmap leise wie im Cockpit */
#inhalt .dg-karte { border-radius: var(--bs-rund); border: 1px solid var(--bs-kante); background: var(--karte); box-shadow: var(--bs-schatten); padding: 20px; }
#inhalt .dg-karte::before { display: none; }
#inhalt .dg-karte .dg-heat-zelle { border: 0; border-radius: 6px; }
#inhalt .dg-karte .dg-heat-zelle.stufe-gut { background: color-mix(in srgb, var(--akzent) 18%, transparent); }
#inhalt .dg-karte .dg-heat-zelle.stufe-achtung { background: color-mix(in srgb, var(--gold) 22%, transparent); }
#inhalt .dg-karte .dg-heat-zelle.stufe-kritisch { background: color-mix(in srgb, var(--rot) 12%, transparent); color: var(--rot-text); }
#inhalt .dg-karte .dg-heat-zelle.stufe-still { background: color-mix(in srgb, var(--vorder) 5%, transparent); }

/* Spielliste und „Als Nächstes“ (spielliste.js, auch im Videofenster): ruhige Liste, Kennung als getönte Marke */
.sl-kopf { margin-bottom: 10px; }
.sl-kopf h2 { font-size: 1.05rem; font-weight: 650; margin: 0; }
.sl-mit-liste > .sl-liste { margin-top: 0; }
.bs-liste.sl-reihe { display: block; gap: 0; }
.bs-liste > .sl-zeile { border: 0; border-radius: 0; background: transparent; padding: 10px 14px; min-height: 56px; }
.bs-liste > .sl-zeile + .sl-zeile { border-top: 1px solid var(--rand); }
.bs-liste > a.sl-zeile:hover { background: var(--flow-karte-hell); }
.bs-liste > .sl-zeile.aktuell { background: color-mix(in srgb, var(--akzent) 10%, var(--karte)); }
.sl-marke { background: color-mix(in srgb, var(--akzent) 12%, transparent); color: var(--akzent-text); border-radius: 10px; }
.sl-zeile.erledigt .sl-marke { background: color-mix(in srgb, var(--gruen) 14%, transparent); color: var(--akzent-text); }
.sl-countdown { background: var(--karte); border: 1px solid var(--bs-kante); border-left: 4px solid var(--akzent); border-radius: var(--bs-rund-klein); box-shadow: var(--bs-schatten); }
.sl-suche { margin-bottom: 10px; }
/* Hinweise zu Videos (videohinweise.js): freigegebene Hinweise als Hinweiskarte mit Goldkante */
.vh-kasten { background: var(--karte); border: 1px solid var(--bs-kante); border-left: 4px solid var(--gold);
  border-radius: var(--bs-rund-klein); box-shadow: var(--bs-schatten); padding: 12px 16px; color: var(--text); }
.vh-entscheiden { display: grid; gap: 12px; }
.vh-entscheiden .bs-wege { margin-top: 4px; }

/* Große Zahlen außerhalb der Kacheln (Urlaub, Zeitkonto, Geräte): dunkel wie .bs-zahl, das Wort sagt die Richtung */
#inhalt .zt-konto-zahl, #inhalt .gr-ich-zahl { color: var(--text); font-weight: 700; letter-spacing: -.02em; }
#inhalt .zt-konto, #inhalt .zt-heute, #inhalt .gr-ich { max-width: none; border-radius: var(--bs-rund); border: 1px solid var(--bs-kante);
  background: var(--karte); box-shadow: var(--bs-schatten); }
#inhalt .zt-konto-zahl.vorlaeufig { color: var(--text-leise); }
#inhalt .hb-schaufenster .seiten-satz { color: var(--text); }

/* Fortbildung Medizin und Leitlinie je Video (fortbildung.js, ADR-057): eine Zeile unter dem Video, Lücke mit Goldkante */
.hb-leitlinie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0; padding: 10px 14px;
  background: color-mix(in srgb, var(--akzent) 7%, var(--karte)); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund-klein); color: var(--text); }
.hb-leitlinie.luecke { background: var(--karte); border-left: 4px solid var(--gold); }
.hb-leitlinie-wort { color: var(--text-leise); font-size: .92rem; }
.hb-leitlinie-link { color: var(--akzent-text); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.hb-leitlinie-klein { color: var(--text-leise); font-size: .85rem; }
a.hb-leitlinie-klein { color: var(--akzent-text); }
.hb-leitlinie-weitere { flex-basis: 100%; color: var(--text-leise); font-size: .85rem; }
.hb-leitlinie-weitere a { color: var(--akzent-text); }
.fb-teil { margin-top: 18px; }
.fb-teil .sl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fb-pruefen { display: grid; gap: 12px; }
.fb-anders { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-wahl { flex: 1 1 260px; min-height: 44px; }
.fb-titel { width: 100%; min-height: 44px; font-size: 1rem; }
.fb-pruefen .hb-spieler { max-height: 300px; width: 100%; object-fit: contain; background: var(--primaer); }
.fb-marke { display: block; color: var(--orange); font-size: .85rem; font-weight: 600; }
.fb-teil-freigeben { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
/* Lernvideos nach Kategorien (ADR-057 Nachtrag 2): gewählte Fläche mit Akzentkante, Kopf der Kategorie, „Wer bekommt das?“ */
.bs-kachel.vt-kategorie.gewaehlt { box-shadow: 0 0 0 3px var(--akzent); }
.vt-bereich { margin-top: 22px; }
.vt-kategorie-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.vt-kategorie-kopf h2 { margin: 0 0 2px; }
.fb-teil h3 { margin: 0; font-size: 1rem; }
.fb-wer { display: grid; gap: 14px; margin-bottom: 14px; }
.fb-wirkung { font-weight: 650; color: var(--akzent-text); margin: 0; }

/* „Heute fehlt …“ (ausfaelle.js, ADR-059): eine ruhige Zeile oben, Goldkante nur bei knapper Besetzung */
.af-hinweis { display: grid; gap: 6px; margin: 12px 0; }
.af-hinweis .af-zeile { margin: 0; flex-wrap: wrap; }
.af-zeile .bs-hinweis-text { display: grid; gap: 4px; flex: 1 1 260px; }
.af-knapp { color: var(--text); }
.af-grund { color: var(--text-leise); font-size: .85rem; }
.af-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.af-urlaub { color: var(--text-leise); font-size: .92rem; padding: 2px 4px 0 20px; }

/* ---------- Navigation einfacher (ADR-062) ----------
   Zurück: leiser Knopf mit Pfeil, geht einen Schritt zurück (zurueck() in app.js).
   Sammelseiten „Wissen“ und „Mitarbeiter“: Einträge als ruhige Zeilen mit Zeichen.
   „Rechnung hochladen“ unter der Fläche im Dialog „Hochladen“. */
.bs-knopf-leise.zurueck { gap: 6px; }
.bs-zurueck-pfeil { font-size: 1.25em; line-height: 1; margin-top: -2px; }
.hb-seitenkopf + .bs-knopf-leise.zurueck, .ls-fuss .bs-knopf-leise.zurueck { align-self: flex-start; }
#inhalt .ma-team-titel { margin: 28px 0 10px; font-size: 1.05rem; font-weight: 650; color: var(--text); }
.hl-box .hl-rechnung { display: flex; width: 100%; justify-content: center; margin-top: 12px; }

/* ---------- Formulare (ADR-072): Feld, Formular, Wahl, Schritte — überall gleich ----------
   Beschriftung über dem Feld, alle Felder gleich breit, 16 px Abstand, ein großer Knopf unten.
   Gilt auf Seiten (#inhalt) und im Fenster (#modal-box). */
.bs-form, .bs-schritte { display: grid; gap: 18px; max-width: 560px; min-width: 0; }
.bs-form-felder { display: grid; gap: 16px; min-width: 0; }
.bs-schritt { display: grid; gap: 10px; min-width: 0; }
.bs-schritt[hidden] { display: none; }
.bs-schritt > .bs-form-felder { margin-top: 8px; }
.bs-form > .bs-form-satz { margin-top: -8px; }
:is(#inhalt, #modal-box) .bs-form-titel { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
:is(#inhalt, #modal-box) .bs-form-satz { margin: 0; color: var(--text-leise); font-size: 1rem; line-height: 1.5; }
.bs-feld { display: grid; gap: 6px; min-width: 0; }
:is(#inhalt, #modal-box) :is(.bs-feld > label, .bs-feld-titel) { margin: 0; font-weight: 600; font-size: .95rem; color: var(--text); text-transform: none; letter-spacing: 0; }
:is(#inhalt, #modal-box) .bs-feld > :is(input, select, textarea) { width: 100%; max-width: none; min-height: 48px; box-sizing: border-box; margin: 0; }
:is(#inhalt, #modal-box) .bs-feld > textarea { min-height: 96px; }
:is(#inhalt, #modal-box) .bs-feld-hinweis { margin: 0; font-size: .9rem; color: var(--text-leise); }
:is(#inhalt, #modal-box) .bs-feld-fehler { margin: 0; color: var(--rot-text); font-weight: 600; }
.bs-fuss { display: grid; gap: 8px; margin-top: 4px; }
:is(#inhalt, #modal-box) .bs-fuss > .bs-knopf { width: 100%; min-height: 56px; font-size: 1.08rem; justify-content: center; }
:is(#inhalt, #modal-box) .bs-fuss > .bs-knopf-leise { width: 100%; justify-content: center; }
@media (min-width: 700px) {
  .bs-fuss { grid-auto-flow: column; justify-content: start; align-items: center; }
  :is(#inhalt, #modal-box) .bs-fuss > .bs-knopf { width: auto; min-width: 220px; padding: 0 28px; }
  :is(#inhalt, #modal-box) .bs-fuss > .bs-knopf-leise { width: auto; }
}
:is(#inhalt, #modal-box) .bs-schritt-zahl { margin: 0 0 -10px; font-size: .88rem; font-weight: 600; color: var(--text-leise); }
:is(#inhalt, #modal-box) .bs-schritt-titel { margin: 0 0 -10px; font-size: .88rem; font-weight: 700; color: var(--akzent-text); }
/* Segment-Umschalter (Note 1): helles Feld auf ruhiger Spur, kein Vollknopf; Fingerfläche 44 px */
.bs-segment { display: inline-flex; gap: 2px; max-width: 100%; margin: 0 0 14px; padding: 3px; border-radius: 12px;
  background: var(--segment-spur); }
.bs-segment-teil { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--text-leise); font: inherit;
  font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.bs-segment-teil:hover { color: var(--text); }
.bs-segment-teil[aria-current="page"], .bs-segment-teil[aria-pressed="true"] { background: var(--segment-aktiv); color: var(--text);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--schatten) 40%, transparent), 0 0 0 .5px color-mix(in srgb, var(--schatten) 20%, transparent); }
.bs-segment-teil:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; }
@media (max-width: 600px) { .bs-segment { display: flex; } }

.bs-wahl { display: grid; gap: 10px; }
:is(#inhalt, #modal-box) .bs-wahl-option { display: grid; gap: 2px; width: 100%; min-height: 56px; padding: 12px 16px; text-align: left;
  border: 1.5px solid var(--rand); border-radius: 14px; background: var(--karte); color: var(--text); cursor: pointer; font: inherit; }
:is(#inhalt, #modal-box) .bs-wahl-option[aria-checked="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, var(--karte));
  box-shadow: inset 0 0 0 1px var(--akzent); }
.bs-wahl-titel { font-weight: 700; font-size: 1.02rem; }
.bs-wahl-satz { color: var(--text-leise); font-size: .92rem; }

/* Jedes Eingabefeld im Fenster bleibt in der Fensterbreite (ADR-072). */
#modal-box :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"]), select, textarea) { max-width: 100%; min-width: 0; box-sizing: border-box; }

/* Tabelle am Handy als Karten: keine Spalte läuft aus dem Bild (ADR-072). Kopf ausblenden, je Zelle „Spalte: Wert“. */
@media (max-width: 699px) {
  table.bs-tabelle-karten, table.bs-tabelle-karten tbody { display: block; width: 100%; }
  table.bs-tabelle-karten thead { display: none; }
  table.bs-tabelle-karten tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--rand); }
  table.bs-tabelle-karten td { display: grid; gap: 2px; padding: 0; border: 0; white-space: normal; }
  table.bs-tabelle-karten td:first-child { grid-column: 1 / -1; font-weight: 700; font-size: 1.02rem; }
  table.bs-tabelle-karten td:not(:first-child)::before { content: attr(data-spalte); font-size: .85rem; color: var(--text-leise); font-weight: 600; }
}

/* Das Seitenmuster (Kritik 11/2026, E-7): ein Kopf, ein Zurück an fester Stelle, ein Hauptknopf unten, ein Leerzustand,
   eine Fehlermeldung. Zurück steht im Kopf oben links über dem Titel. */
.bs-kopf > .zurueck { flex: 0 0 auto; justify-content: flex-start; margin: 0 0 -4px -6px; }
.bs-kopf > .zurueck + .bs-kopf-text { flex-basis: 100%; }
/* Hauptknopf: am Rechner rechts unter dem Inhalt */
.bs-hauptknopf { display: flex; justify-content: flex-end; margin: 20px 0 8px; }
.bs-hauptknopf > .bs-knopf { min-height: 52px; min-width: 220px; padding: 0 28px; font-size: 1.05rem; justify-content: center; }
/* Am Handy und solange unten die Leiste steht: klebt über der Leiste, volle Breite, im Daumenbereich */
@media (max-width: 1100px) {
  .bs-hauptknopf {
    position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5;
    margin: 20px -4px 8px; padding: 8px 4px; background: linear-gradient(to top, var(--hintergrund) 70%, transparent);
  }
  .bs-hauptknopf > .bs-knopf { width: 100%; min-height: 56px; }
}
/* Fehlermeldung: wie der Leerzustand, mit roter Kante — ein Satz, kein Fachwort */
.bs-fehler { display: grid; gap: 8px; justify-items: start; padding: 18px 20px; border-radius: var(--bs-rund);
  background: var(--karte); border: 1px solid var(--bs-kante); border-left: 4px solid var(--rot); box-shadow: var(--bs-schatten); }
.bs-fehler-titel { font-size: 1.05rem; color: var(--text); }
.bs-fehler-satz { margin: 0; color: var(--text-leise); max-width: 62ch; }
/* Aufklappbare Gruppe (E-3): ganze Zeile antippbar, Pfeil rechts, Lage leise daneben */
.bs-klapp { margin: 0 0 12px; border-radius: var(--bs-rund); background: var(--karte); border: 1px solid var(--bs-kante); }
.bs-klapp-kopf { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; cursor: pointer; list-style: none; }
.bs-klapp-kopf::-webkit-details-marker { display: none; }
.bs-klapp-kopf::after { content: '›'; margin-left: auto; font-size: 1.3rem; color: var(--text-leise); transition: transform .2s; }
.bs-klapp[open] > .bs-klapp-kopf::after { transform: rotate(90deg); }
.bs-klapp-titel { font-size: 1.05rem; color: var(--text); }
.bs-klapp-lage { color: var(--text-leise); font-size: .9rem; }
.bs-klapp-inhalt { padding: 0 12px 4px; }
@media (prefers-reduced-motion: reduce) { .bs-klapp-kopf::after { transition: none; } }