/* Lineva – Oberfläche. Farben des Mandanten kommen aus /mandant.css (--primaer, --dunkel, --akzent). */
[hidden] { display: none !important; }
:root {
  --primaer: #3F3E8F; --dunkel: #1F2937; --akzent: #00B894;
  --hg: #F5F6F8; --flaeche: #FFFFFF; --linie: #E3E6EA; --text: #1F2328; --leise: #667085; --schwach: #98A2B3;
  --rot: #C62828; --rot-hg: #FDECEC; --gelb: #9A6700; --gelb-hg: #FFF6DB; --gruen: #1A7F37; --gruen-hg: #E6F6EA; --blau: #1F5FBF; --blau-hg: #E8F0FC;
  --grau-hg: #F0F2F5; --radius: 10px; --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --schrift: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--schrift); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--hg); -webkit-font-smoothing: antialiased; }
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; line-height: 1.25; margin: 0 0 .25rem; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .6rem; font-weight: 650; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; font-weight: 650; }
small, .leise { color: var(--leise); }
code, .mono { font-family: var(--mono); font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 1.2rem 0; }

/* Kopfleiste */
.kopfleiste { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 18px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.marke { display: flex; align-items: center; gap: 12px; color: var(--text); }
.marke:hover { text-decoration: none; }
.marke .logo { height: 34px; width: auto; display: block; }
.logo-text { font-weight: 700; font-size: 1.1rem; color: var(--dunkel); }
.produkt { font-size: .82rem; color: var(--leise); border-left: 1px solid var(--linie); padding-left: 12px; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.menue-knopf { display: none; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--dunkel); }
.nutzer-menue { position: relative; }
.nutzer-menue summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.nutzer-menue summary::-webkit-details-marker { display: none; }
.nutzer-menue summary:hover { background: var(--grau-hg); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primaer);
  color: #fff; font-size: .8rem; font-weight: 650; text-transform: uppercase; }
.nutzer-name { font-size: .9rem; }
.menue { position: absolute; right: 0; top: 44px; min-width: 240px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12); padding: 6px; }
.menue a, .menue button.link { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text); font: inherit;
  background: none; border: 0; cursor: pointer; }
.menue a:hover, .menue button.link:hover { background: var(--grau-hg); text-decoration: none; }
.menue-info { padding: 8px 10px 10px; border-bottom: 1px solid var(--linie); margin-bottom: 4px; font-size: .88rem; }

/* Rahmen */
.rahmen { background: linear-gradient(to right, var(--dunkel) 248px, transparent 248px);  display: flex; min-height: calc(100vh - 60px); }
.seitenleiste { width: 248px; flex: 0 0 248px; background: var(--dunkel); color: #D0D5DD; padding: 14px 10px 30px; position: sticky; top: 60px;
  height: calc(100vh - 60px); overflow-y: auto; }
.nav-abschnitt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #98A2B3; margin: 16px 10px 6px; font-weight: 650; }
.nav-abschnitt:first-child { margin-top: 4px; }
.nav-eintrag { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: #E4E7EC; font-size: .9rem; }
.nav-eintrag:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.nav-eintrag.aktiv { background: var(--primaer); color: #fff; }
.nav-eintrag .symbol { display: inline-flex; opacity: .9; }
.inhalt { flex: 1; min-width: 0; padding: 24px 28px 20px; }
.fuss { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: .78rem; color: var(--schwach); }

/* Seitenkopf */
.seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.seitenkopf p { margin: .2rem 0 0; color: var(--leise); max-width: 820px; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Knöpfe */
.knopf, button.knopf, a.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; font-size: .9rem; font-weight: 550; cursor: pointer;
  line-height: 1.2; white-space: nowrap; }
.knopf:hover { background: var(--grau-hg); text-decoration: none; }
.knopf.primaer { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.knopf.primaer:hover { filter: brightness(1.08); }
.knopf.gefahr { color: var(--rot); border-color: #F1C0C0; }
.knopf.gefahr:hover { background: var(--rot-hg); }
.knopf.gruen { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf.klein { padding: 4px 10px; font-size: .82rem; }
.knopf.gross { padding: 14px 20px; font-size: 1.05rem; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
button.link { background: none; border: 0; color: var(--primaer); cursor: pointer; font: inherit; padding: 0; }

/* Karten und Kacheln */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px 20px; margin-bottom: 18px; }
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.raster { display: grid; gap: 16px; }
.raster.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten); color: var(--text);
  display: block; border-left: 4px solid var(--linie); }
.kachel:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(16, 24, 40, .1); }
.kachel .titel { font-size: .82rem; color: var(--leise); }
.kachel .wert { font-size: 1.6rem; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; }
.kachel .zusatz { font-size: .8rem; color: var(--leise); }
.kachel.rot { border-left-color: var(--rot); } .kachel.gelb { border-left-color: #E3A008; } .kachel.gruen { border-left-color: var(--gruen); }
.kachel.blau { border-left-color: var(--primaer); }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--grau-hg); color: var(--leise);
  white-space: nowrap; }
.badge.rot { background: var(--rot-hg); color: var(--rot); } .badge.gelb { background: var(--gelb-hg); color: var(--gelb); }
.badge.gruen { background: var(--gruen-hg); color: var(--gruen); } .badge.blau { background: var(--blau-hg); color: var(--blau); }
.badge.grau { background: var(--grau-hg); color: var(--leise); }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th { text-align: left; font-weight: 600; color: var(--leise); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px;
  background: #FAFBFC; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 9px 12px; border-bottom: 1px solid #EEF0F3; vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover td { background: #F8F9FB; }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle .zeile-rot td { background: #FFF7F7; } .tabelle .zeile-gelb td { background: #FFFCF0; } .tabelle .zeile-grau td { color: var(--schwach); }
.leer { padding: 28px; text-align: center; color: var(--leise); }

/* Filterleiste */
.filterleiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filterleiste input[type=search], .filterleiste select { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; font: inherit; background: var(--flaeche);
  min-width: 160px; }
.filterleiste input[type=search] { min-width: 260px; }
.seiten { display: flex; gap: 6px; align-items: center; margin-top: 12px; font-size: .88rem; color: var(--leise); }

/* Formulare */
.formular .gruppe { margin-bottom: 18px; }
.formular .gruppe h2 { margin-top: 0; font-size: 1rem; }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; }
.feld label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 4px; color: #344054; }
.feld .hilfe { font-size: .78rem; color: var(--leise); margin-top: 3px; }
.feld .fehler { font-size: .8rem; color: var(--rot); margin-top: 3px; }
.feld.breit { grid-column: 1 / -1; }
.eingabe, .auswahl, input.eingabe, select.auswahl, textarea.eingabe { width: 100%; padding: 8px 10px; border: 1px solid #D0D5DD; border-radius: 8px; font: inherit;
  background: #fff; color: var(--text); }
.eingabe:focus, .auswahl:focus { outline: 2px solid color-mix(in srgb, var(--primaer) 35%, transparent); border-color: var(--primaer); }
textarea.eingabe { resize: vertical; }
input[type=color].eingabe { padding: 2px; height: 38px; }
.schalter-feld { display: flex; align-items: center; gap: 8px; }
.schalter-feld input { width: 18px; height: 18px; accent-color: var(--primaer); }
.feld ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; }
.feld ul label { font-weight: 450; display: flex; gap: 8px; align-items: center; }
.formular-fuss { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.formular-fuss .rechts { margin-left: auto; }

/* Meldungen und Hinweise */
.meldungen { margin-bottom: 14px; }
.meldung { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; background: var(--blau-hg); color: #123B78; border: 1px solid #C9DAF6; }
.meldung.success { background: var(--gruen-hg); color: #135C2A; border-color: #BFE3C8; }
.meldung.error { background: var(--rot-hg); color: #8A1C1C; border-color: #F3C2C2; }
.meldung.warning { background: var(--gelb-hg); color: #7A5200; border-color: #F2DE9F; }
.hinweis { padding: 12px 14px; border-radius: 8px; background: var(--grau-hg); color: #344054; font-size: .9rem; margin: 10px 0; }
.hinweis.gelb { background: var(--gelb-hg); color: #6B4A00; } .hinweis.rot { background: var(--rot-hg); color: #7F1D1D; } .hinweis.blau { background: var(--blau-hg); color: #173F7A; }
.hinweis.gruen { background: var(--gruen-hg); color: #145A2B; }

/* Reiter */
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin: 6px 0 16px; overflow-x: auto; }
.reiter a { padding: 9px 14px; color: var(--leise); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 550; font-size: .92rem; }
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a.aktiv { color: var(--primaer); border-bottom-color: var(--primaer); }

/* Datenblatt (Detailansicht) */
.datenblatt { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 22px; }
.datenblatt div > span { display: block; font-size: .76rem; color: var(--leise); text-transform: uppercase; letter-spacing: .03em; }
.datenblatt div > strong { font-weight: 550; }
.profil-kopf { display: flex; align-items: center; gap: 16px; }
.profil-kopf .avatar { width: 56px; height: 56px; font-size: 1.2rem; }

/* Kalender / Urlaubsplan */
.plan { border-collapse: collapse; font-size: .78rem; }
.plan th, .plan td { border: 1px solid #EEF0F3; padding: 0; text-align: center; min-width: 26px; height: 28px; }
.plan th { background: #FAFBFC; font-weight: 600; color: var(--leise); }
.plan td.name { text-align: left; padding: 0 10px; white-space: nowrap; min-width: 160px; font-size: .85rem; position: sticky; left: 0; background: #fff; }
.plan .we { background: #F3F4F6; } .plan .ft { background: #ECEEF2; } .plan .heute { outline: 2px solid var(--primaer); outline-offset: -2px; }
.plan .zelle { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 650; font-size: .72rem; }
.legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--leise); margin: 8px 0; }
.legende span i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1px solid #E4E7EC; }

/* Nachtrag (Wochenraster) */
.raster-tabelle input { width: 100%; padding: 5px 6px; border: 1px solid #D0D5DD; border-radius: 6px; font: inherit; font-size: .88rem; min-width: 64px; }
.raster-tabelle select { padding: 5px; border: 1px solid #D0D5DD; border-radius: 6px; font: inherit; font-size: .86rem; }
.raster-tabelle td { padding: 5px 6px; }
.befund-liste { margin: 4px 0 0; padding-left: 16px; font-size: .8rem; }
.befund-liste li.verstoss { color: var(--rot); } .befund-liste li.warnung { color: var(--gelb); } .befund-liste li.hinweis { color: var(--blau); }

/* Anmeldung */
body.leer-seite { background: linear-gradient(160deg, var(--dunkel), #111827 70%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.anmelde-karte { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 28px 28px 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.anmelde-karte h1 { font-size: 1.35rem; }
.anmelde-karte .feld { margin-bottom: 12px; }
.anmelde-karte .knopf { width: 100%; padding: 11px; margin-top: 6px; }
.anmelde-karte .fuss-text { font-size: .78rem; color: var(--leise); margin-top: 16px; text-align: center; }
.qr-box { display: flex; justify-content: center; padding: 12px; background: #fff; border: 1px solid var(--linie); border-radius: 12px; }
.qr-box svg { width: 220px; height: 220px; }

/* Portal (Handy) */
.portal-kopf { background: var(--primaer); color: #fff; border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.portal-kopf .gross { font-size: 1.6rem; font-weight: 700; }
.portal-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stempel-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.stempel-knoepfe .knopf { padding: 22px 10px; font-size: 1.1rem; border-radius: 14px; }
.stempel-knoepfe .kommen { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.stempel-knoepfe .gehen { background: var(--rot); color: #fff; border-color: var(--rot); }
.stempel-knoepfe .pause { background: #E3A008; color: #fff; border-color: #E3A008; }
.status-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--schwach); }
.status-punkt.anwesend { background: var(--gruen); } .status-punkt.pause { background: #E3A008; } .status-punkt.abwesend { background: var(--schwach); }

/* Prüfpunkte (Abfahrtskontrolle) */
.pruefpunkt { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF0F3; }
.pruefpunkt .text { flex: 1; }
.pruefpunkt .wahl { display: flex; gap: 6px; }
.pruefpunkt .wahl label { border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: .85rem; }
.pruefpunkt .wahl input { display: none; }
.pruefpunkt .wahl input:checked + span { font-weight: 700; }
.pruefpunkt .wahl label.ok:has(input:checked) { background: var(--gruen-hg); border-color: var(--gruen); color: var(--gruen); }
.pruefpunkt .wahl label.mangel:has(input:checked) { background: var(--rot-hg); border-color: var(--rot); color: var(--rot); }

/* Responsive */
@media (max-width: 980px) {
  .raster.k3, .raster.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rahmen { background: none; }
  .menue-knopf { display: inline-block; }
  .seitenleiste { position: fixed; left: 0; top: 60px; bottom: 0; transform: translateX(-100%); transition: transform .2s; z-index: 30; height: auto; }
  body.menue-offen .seitenleiste { transform: none; box-shadow: 6px 0 24px rgba(0, 0, 0, .25); }
  .inhalt { padding: 16px; }
  .produkt, .nutzer-name { display: none; }
  .raster.k2, .raster.k3, .raster.k4 { grid-template-columns: 1fr; }
  .filterleiste input[type=search] { min-width: 0; width: 100%; }
}

/* Mitarbeiterportal: untere Leiste auf dem Handy */
.portal-tabs { display: none; }
.portal .leise .leise { color: inherit; }
.portal-kopf .leise { color: rgba(255, 255, 255, .85); }
.portal-kacheln { margin-bottom: 16px; }
.portal-kacheln a.kachel .titel { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.badge.gelb { background: var(--gelb-hg); color: var(--gelb); }
.badge.blau { background: var(--blau-hg); color: var(--blau); }
details summary { cursor: pointer; }
details.verdeckt summary { font-weight: 600; list-style: none; } details.verdeckt summary::-webkit-details-marker { display: none; }
details.verdeckt[open] summary { display: none; }
.tabelle th.matrix { white-space: normal; min-width: 104px; max-width: 150px; font-size: .68rem; line-height: 1.3; vertical-align: bottom; }
.plan th.heute { background: var(--primaer); color: #fff; }
.plan td.pz { font-size: .72rem; font-weight: 650; text-align: center; }
.legende span i { width: auto; min-width: 20px; height: auto; padding: 1px 4px; font-style: normal; font-weight: 650; text-align: center; font-size: .72rem; color: var(--text); }
.raster-tabelle input.z { width: 62px; min-width: 62px; } .raster-tabelle input.n { width: 52px; min-width: 52px; } .raster-tabelle input.t { width: 100px; min-width: 100px; }
.raster-tabelle select.art { width: 128px; } .raster-tabelle select.fz { width: 100px; } .raster-tabelle select.ja { width: 64px; }
.raster-tabelle td.tag { white-space: nowrap; min-width: 92px; }
@media (max-width: 860px) {
  .portal .seitenleiste { display: none; }
  .portal .inhalt { padding-bottom: 84px; }
  .portal-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--flaeche);
    border-top: 1px solid var(--linie); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .portal-tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; color: var(--leise); padding: 4px 0; }
  .portal-tabs a.aktiv { color: var(--primaer); font-weight: 650; }
  .portal-tabs a:hover { text-decoration: none; }
  .portal .menue-knopf { display: none; }
}

@media print {
  .kopfleiste, .seitenleiste, .fuss, .filterleiste, .knopfreihe, .meldungen { display: none !important; }
  .inhalt { padding: 0; } body { background: #fff; }
  .karte, .tabelle-rahmen { box-shadow: none; }
}

/* Auswahl statt Freitext */
.wahl-gruppe { border: 1px solid var(--rand, #E5E7EB); border-radius: 12px; padding: 10px 12px; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wahl-gruppe legend { font-weight: 600; padding: 0 4px; }
label.wahl { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #D1D5DB; border-radius: 999px; padding: 6px 12px; cursor: pointer; background: #fff; }
label.wahl:has(input:checked) { border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 10%, #fff); font-weight: 600; }
.stempel-knoepfe .knopf small { display: block; font-size: .8rem; font-weight: 500; opacity: .9; margin-top: 2px; }
.stempel-knoepfe .knopf { flex-direction: column; }
.stempel-knoepfe .erschoepft { opacity: .65; border-style: dashed; }
.kontrollliste { list-style: none; padding: 0; margin: 0; }
.mehrfach { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.mehrfach label { display: inline-flex; gap: 5px; align-items: center; font-weight: 400; }
.nav-zahl { margin-left: auto; background: #DC2626; color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 1px 7px; line-height: 1.4; }
.erledigen-gruppe { margin-bottom: 18px; }
.erledigen-gruppe h2 { display: flex; align-items: center; gap: 8px; }
.entscheid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.entscheid select, .entscheid input { max-width: 260px; }
.stempel-zeile.storniert td { text-decoration: line-through; color: #9CA3AF; }
.dl-liste { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; }
.dl-liste dt { color: var(--leise); font-size: .86rem; }
.dl-liste dd { margin: 0; }
@media (max-width: 900px) { .raster.k2, .raster.k3, .raster.k4 { grid-template-columns: 1fr; } }
.feld-titel { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.hinweis ul { margin: 6px 0 8px 18px; padding: 0; }
.akte-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; list-style: none; margin: 8px 0 0; padding: 0; font-size: .9rem; }
.akte-check li { display: flex; gap: 6px; align-items: baseline; }
.akte-check .ok { color: #0ca30c; } .akte-check .nein { color: #d03b3b; }
.fortschritt { height: 8px; background: #e1e0d9; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.fortschritt span { display: block; height: 100%; background: var(--primaer); border-radius: 4px; }
.pruefpunkt { flex-wrap: wrap; }
.pruefpunkt .text small { display: block; margin-top: 2px; }
.pruefpunkt .text small.recht { color: var(--leise); font-size: .72rem; }
.pruefpunkt .text small.bekannt { color: #b45309; }
.pruefpunkt.sicher .text { font-weight: 550; }
.pruefpunkt .mangel-angaben, .pruefpunkt .messwert { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pruefpunkt .mangel-angaben .eingabe { flex: 1 1 220px; }
.pruefpunkt .messwert .eingabe { width: 90px; display: inline-block; margin-left: 6px; }
.pruefpunkt .foto { font-size: .85rem; }
.kontroll-schalter { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bestaetigung { margin-top: 12px; font-weight: 600; }
@media (max-width: 640px) {
  .pruefpunkt { display: block; }
  .pruefpunkt .wahl { margin-top: 8px; }
  .pruefpunkt .wahl label { flex: 1; text-align: center; padding: 10px; font-size: .95rem; }
  .pruefpunkt .mangel-angaben, .pruefpunkt .messwert { margin-top: 8px; }
}
.pruefpunkt.sicher .text small { font-weight: 400; }
.export-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.export-karte { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.export-karte h2 { margin: 0; font-size: 1rem; }
.export-karte p { margin: 0; flex: 1; }
.export-karte .knopf { align-self: flex-start; }
.export-karte.sicherung { border: 1px dashed var(--primaer); }
.export-zeitraum { display: flex; gap: 8px; flex-wrap: wrap; font-size: .85rem; }
.export-zeitraum .eingabe { width: auto; }
.kennwort { font: 700 1.6rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .06em; background: #F3F4F6; padding: 12px 16px; border-radius: 10px; display: inline-block; user-select: all; }

/* ---------------------------------------------------------------- Statistik (Diagramme) */
:root {
  --diagramm-flaeche: #fcfcfb; --raster: #e1e0d9; --basislinie: #c3c2b7; --tinte-leise: #898781; --tinte-zweit: #52514e; --tinte: #0b0b0b;
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300;
  --status-gut: #0ca30c; --status-warnung: #fab219; --status-ernst: #ec835a; --status-kritisch: #d03b3b;
  --div-plus: #2a78d6; --div-minus: #e34948;
}
.statistik-filter { align-items: center; }
.statistik-filter label { display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; }
.sprungmarken { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; font-size: .85rem; }
.statistik-abschnitt { margin: 22px 0 8px; scroll-margin-top: 70px; }
.statistik-abschnitt > h2 { font-size: 1.15rem; margin: 0 0 8px; }
.kacheln.kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kacheln.kpi .kachel { background: #fff; border: 1px solid var(--linie, #E5E7EB); border-radius: 12px; padding: 12px 14px; }
.kacheln.kpi .titel { font-size: .8rem; color: var(--tinte-zweit); }
.kacheln.kpi .wert { font-size: 1.6rem; font-weight: 700; color: var(--tinte); line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kacheln.kpi .zusatz { font-size: .76rem; color: var(--tinte-leise); margin-top: 2px; }
.diagramm-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.diagramm { margin: 0; background: var(--diagramm-flaeche); }
.diagramm figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.diagramm h3 { margin: 0; font-size: .98rem; color: var(--tinte); }
.legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--tinte-zweit); }
.legende li { display: inline-flex; align-items: center; gap: 6px; }
.legende-farbe { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.diagramm-svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagramm-svg text { font-family: inherit; font-size: 12px; }
.diagramm-svg .achse { fill: var(--tinte-leise); }
.diagramm-svg .beschriftung { fill: var(--tinte-zweit); }
.diagramm-svg .wert { fill: var(--tinte-zweit); font-weight: 600; font-variant-numeric: tabular-nums; }
.diagramm-svg .raster { stroke: var(--raster); stroke-width: 1; shape-rendering: crispEdges; }
.diagramm-svg .basis { stroke: var(--basislinie); stroke-width: 1; shape-rendering: crispEdges; }
.diagramm-svg .ref { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; }
.diagramm-svg .treffer { fill: transparent; cursor: default; outline: none; }
.diagramm-svg .treffer:focus-visible { stroke: var(--tinte-zweit); stroke-width: 1.5; stroke-dasharray: 3 3; }
.diagramm-svg .linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagramm-svg .punkt { stroke: var(--diagramm-flaeche); stroke-width: 2; }
.diagramm-svg .kreuz { stroke: var(--basislinie); stroke-width: 1; opacity: 0; pointer-events: none; }
.diagramm-svg .fadenkreuz.aktiv .kreuz { opacity: 1; }
.diagramm-svg .s1, .legende-farbe.s1 { fill: var(--serie-1); background: var(--serie-1); stroke: var(--serie-1); }
.diagramm-svg .s2, .legende-farbe.s2 { fill: var(--serie-2); background: var(--serie-2); stroke: var(--serie-2); }
.diagramm-svg .s3, .legende-farbe.s3 { fill: var(--serie-3); background: var(--serie-3); stroke: var(--serie-3); }
.diagramm-svg .s4, .legende-farbe.s4 { fill: var(--serie-4); background: var(--serie-4); stroke: var(--serie-4); }
.diagramm-svg .s5, .legende-farbe.s5 { fill: var(--serie-5); background: var(--serie-5); stroke: var(--serie-5); }
.diagramm-svg .s6, .legende-farbe.s6 { fill: var(--serie-6); background: var(--serie-6); stroke: var(--serie-6); }
.diagramm-svg .linie.s1, .diagramm-svg .linie.s2, .diagramm-svg .linie.s3 { fill: none; }
.diagramm-svg .marke { stroke: none; }
.diagramm-svg .st-gut, .legende-farbe.st-gut { fill: var(--status-gut); background: var(--status-gut); }
.diagramm-svg .st-warnung, .legende-farbe.st-warnung { fill: var(--status-warnung); background: var(--status-warnung); }
.diagramm-svg .st-kritisch, .legende-farbe.st-kritisch { fill: var(--status-kritisch); background: var(--status-kritisch); }
.diagramm-svg .div-plus, .legende-farbe.div-plus { fill: var(--div-plus); background: var(--div-plus); }
.diagramm-svg .div-minus, .legende-farbe.div-minus { fill: var(--div-minus); background: var(--div-minus); }
.diagramm-svg .neutral, .legende-farbe.neutral { fill: color-mix(in srgb, var(--tinte-leise) 40%, transparent); background: color-mix(in srgb, var(--tinte-leise) 40%, transparent); }
.diagramm-hinweis { margin: 6px 0 0; font-size: .78rem; }
.diagramm-tabelle { margin-top: 6px; font-size: .85rem; }
.diagramm-tabelle summary { cursor: pointer; color: var(--tinte-zweit); font-size: .8rem; }
.diagramm-tabelle table { margin-top: 6px; }
.diagramm-tip { position: fixed; z-index: 50; background: #fff; color: var(--tinte); border: 1px solid var(--raster); border-radius: 8px; padding: 7px 10px;
  font-size: .8rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); pointer-events: none; max-width: 280px; font-variant-numeric: tabular-nums; }
.diagramm-tip .kopf { font-weight: 700; margin-bottom: 2px; }
@media print { .diagramm-tabelle { display: block; } .diagramm-tabelle[open] summary { display: none; } .statistik-filter { display: none; } }
.diagramm-svg .linie { fill: none !important; }
.diagramm-svg circle.punkt { stroke: var(--diagramm-flaeche) !important; stroke-width: 2; }
.stempel-knoepfe { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stempel-knoepfe .knopf { white-space: normal; min-width: 0; text-align: center; justify-content: center; line-height: 1.25; }
.stempel-knoepfe .knopf small { color: inherit; opacity: .92; }
.stempel-knoepfe .knopf { hyphens: auto; overflow-wrap: anywhere; }
.stempel-knoepfe .knopf.pause { font-size: 1rem; padding: 16px 8px; }
/* Stellen, Stellenbeschreibung, Organigramm, Nachweis NachwG */
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
.eingabe.klein { padding: 4px 6px; font-size: .85rem; width: auto; min-width: 0; }
.aktionen-zelle { white-space: nowrap; text-align: right; }
.aktionen-zelle .knopf, .aktionen-zelle form { margin-left: 4px; }
.kacheln.kompakt { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dl-liste.zweispaltig { grid-template-columns: max-content 1fr max-content 1fr; }
@media (max-width: 760px) { .dl-liste.zweispaltig { grid-template-columns: max-content 1fr; } .aktionen-zelle { white-space: normal; } }
.stellenbeschreibung h3 { font-size: .95rem; margin: 18px 0 6px; }
.stellenbeschreibung ul { margin: 0 0 8px 18px; padding: 0; }
.anteile { display: flex; gap: 2px; height: 14px; margin: 8px 0 16px; }
.anteile span { min-width: 3px; }
.anteile span:first-child { border-radius: 4px 0 0 4px; } .anteile span:last-child { border-radius: 0 4px 4px 0; }
.anteile span:only-child { border-radius: 4px; }
.s1-hg { background: var(--serie-1); } .s2-hg { background: var(--serie-2); } .s3-hg { background: var(--serie-3); }
.s4-hg { background: var(--serie-4); } .s5-hg { background: var(--serie-5); } .s6-hg { background: var(--serie-6); } .s0-hg { background: #9ca3af; }
.legende-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.organigramm-rahmen { overflow-x: auto; padding: 6px 2px 10px; }
.organigramm-rahmen svg { width: 100%; height: auto; display: block; min-width: 820px; margin: 0 auto; }
.organigramm-rahmen a rect { transition: stroke .15s; }
.organigramm-rahmen a:hover rect, .organigramm-rahmen a:focus rect { stroke: var(--primaer); stroke-width: 2; }
.organigramm-legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--leise); margin: 4px 0 8px; }
.organigramm-legende span::before { content: ""; display: inline-block; width: 4px; height: 12px; margin-right: 6px; vertical-align: -2px; background: var(--c); }
.muster-liste label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.muster-liste label.vorhanden { color: var(--leise); }
.nachw-tabelle td:first-child { width: 32%; font-weight: 600; }
.nachw-status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabelle-rahmen.flach { border: 0; box-shadow: none; border-radius: 0; }
.nowrap { white-space: nowrap; }
/* Recruiting */
.pipeline { display: grid; grid-template-columns: repeat(7, minmax(138px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.pipeline-spalte { background: var(--grau-hg); border-radius: 10px; padding: 10px; min-height: 240px; border: 2px solid transparent; }
.pipeline-spalte.ziel { border-color: var(--primaer); background: #eef2ff; }
.pipeline-spalte h2 { font-size: .86rem; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.zahl-kreis { background: #fff; border-radius: 999px; padding: 0 8px; font-size: .78rem; color: var(--leise); }
.pipeline-karten { display: grid; gap: 8px; }
.pipeline-karte { background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; font-size: .84rem; box-shadow: 0 1px 2px rgba(16,24,40,.05); cursor: grab; }
.pipeline-karte.zieht { opacity: .5; }
.pipeline-karte[draggable=false] { cursor: default; }
.pipeline-meta { display: flex; justify-content: space-between; gap: 6px; color: var(--leise); font-size: .78rem; margin-top: 4px; }
.pipeline-termin { margin-top: 4px; font-size: .78rem; color: var(--primaer); font-weight: 600; }
.stufe-zusage h2 { color: var(--gruen); } .stufe-absage h2 { color: var(--leise); }
.leer-klein { color: var(--leise); font-size: .8rem; margin: 0; }
.sterne { color: #b45309; letter-spacing: 1px; }
.sterne-wahl { display: inline-flex; gap: 2px; align-items: center; }
.sterne-wahl .stern { background: none; border: 0; font-size: 1.4rem; color: #d1d5db; cursor: pointer; padding: 0 2px; line-height: 1; }
.sterne-wahl .stern.an { color: #b45309; }
.sterne-wahl .stern:hover, .sterne-wahl .stern:focus-visible { color: #92400e; }
.stufen { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: stufe; }
.stufen li { display: flex; }
.stufen .stufe-knopf, .stufen a { border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer; color: var(--text); text-decoration: none; }
.stufen li.aktuell .stufe-knopf, .stufen li.aktuell a { background: var(--primaer); color: #fff; border-color: var(--primaer); cursor: default; }
.stufen .stufe-knopf:disabled { opacity: 1; }
.entscheid-form.hervor { outline: 2px solid var(--primaer); outline-offset: 6px; border-radius: 6px; }
.entscheid-form h3 { margin: 0 0 8px; font-size: 1rem; }
.verlauf { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.verlauf li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.notizen { white-space: normal; font-size: .9rem; background: var(--grau-hg); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
/* öffentliche Bewerbungsseite */
body.bewerben-seite { background: #f6f7f9; margin: 0; }
.bewerben-breite { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.bewerben-kopf { background: #fff; border-bottom: 3px solid var(--primaer); margin-bottom: 20px; }
.bewerben-kopf .bewerben-breite { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.bewerben-marke img { max-height: 44px; max-width: 220px; display: block; }
.bewerben-held { background: #fff; border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; border-left: 6px solid var(--primaer); }
.bewerben-held h1 { margin-top: 0; }
.bewerben-stellen { display: grid; gap: 14px; margin-bottom: 18px; }
.bewerben-stelle h3 { margin: 0 0 4px; }
.bewerben-fuss { font-size: .8rem; color: var(--leise); padding-top: 18px; padding-bottom: 30px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) { .pipeline { grid-template-columns: repeat(7, 78vw); } }
.termin-liste { display: grid; gap: 10px; margin-bottom: 6px; }
.termin-zeile { border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; }
.termin-zeile .knopfreihe { margin-top: 6px; }
/* Personalführung */
.ablauf { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.ablauf li { position: relative; padding: 8px 0 10px 34px; border-left: 2px solid var(--linie); margin-left: 12px; }
.ablauf li::before { counter-increment: schritt; content: counter(schritt); position: absolute; left: -13px; top: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--linie); text-align: center; font-size: .78rem; line-height: 20px; font-weight: 700; color: var(--leise); }
.ablauf li.erledigt::before { content: "✓"; background: var(--primaer); border-color: var(--primaer); color: #fff; }
.ablauf li:last-child { border-left-color: transparent; }
.akte-check label { cursor: pointer; }
.rechner .kachel .wert { font-size: 1.25rem; }
.checkliste { list-style: none; margin: 10px 0 0; padding: 0; }
.checkliste li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: .9rem; }
.checkliste li.erledigt .titel { color: var(--leise); text-decoration: line-through; }
.checkliste li.ueberfaellig .titel { color: var(--rot); font-weight: 600; }
.haken-knopf { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #98a2b3; background: #fff; cursor: pointer; flex: none; font-weight: 700; color: #fff; line-height: 1; padding: 0; }
.checkliste li.erledigt .haken-knopf { background: var(--primaer); border-color: var(--primaer); }
.haken-knopf:hover { border-color: var(--primaer); }

/* KI-Assistent */
.ki-raster { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.ki-vorlagen { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 12px; }
.ki-suche { margin-bottom: 8px; }
.ki-gruppe h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 12px 6px 4px; }
.ki-vorlage { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--text); font-size: .9rem; }
.ki-vorlage:hover { background: var(--grau-hg); text-decoration: none; }
.ki-vorlage.aktiv { background: color-mix(in srgb, var(--primaer) 12%, transparent); color: var(--primaer); font-weight: 600; }
.ki-vorlage[hidden], .ki-gruppe[hidden] { display: none; }
.ki-merkmale { display: flex; gap: 3px; flex-shrink: 0; }
.ki-merkmale .badge { font-size: .66rem; padding: 1px 6px; }
.ki-form .feld { margin-bottom: 14px; }
.ki-schutz { background: var(--grau-hg); border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: .88rem; }
.ki-schutz ul { margin: 6px 0 10px 18px; padding: 0; color: var(--leise); }
.ki-schritte { margin: 0 0 0 20px; padding: 0; } .ki-schritte li { margin-bottom: 8px; }
.ki-laeuft { display: flex; gap: 14px; align-items: center; padding: 8px 4px; }
.ki-kreisel { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--linie); border-top-color: var(--primaer); animation: ki-dreh 1s linear infinite; flex-shrink: 0; }
@keyframes ki-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ki-kreisel { animation-duration: 3s; } }
.ki-zusammenfassung { font-size: 1.02rem; margin: 0; }
.ki-abschnitt h2 { margin-top: 0; font-size: 1.02rem; }
.ki-abschnitt ul { margin: 0 0 0 18px; padding: 0; } .ki-abschnitt li { margin-bottom: 4px; } .ki-abschnitt p { margin: 0 0 8px; }
.ki-tabelle-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ki-tabelle td { vertical-align: top; font-size: .88rem; }
.ki-wahl { width: 34px; text-align: center; } .ki-wahl input { width: 17px; height: 17px; accent-color: var(--primaer); }
.ki-aktionsleiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.ki-aktion h3 { margin: 0 0 4px; } .ki-aktion p { margin: 0 0 8px; font-size: .84rem; }
.ki-aktion-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ki-aktion-zeile .auswahl { width: auto; min-width: 180px; flex: 1; }
.ki-quellen li { word-break: break-word; }
.ki-meta { font-size: .8rem; margin-top: 10px; }
.ki-entwurf { margin-bottom: 14px; }
@media (max-width: 980px) { .ki-raster { grid-template-columns: 1fr; } .ki-vorlagen { position: static; max-height: none; } }
.ki-werte td { font-size: .84rem; padding: 6px 8px; vertical-align: top; } .ki-werte td:first-child { width: 58%; } .ki-werte td:last-child { word-break: break-word; }
.uebernahme-meldungen { margin: 6px 0 0 16px; padding: 0; font-size: .8rem; max-height: 260px; overflow-y: auto; }
.uebernahme-meldungen li.fehler { color: var(--rot); } .uebernahme-meldungen li.neu { color: var(--gruen); }
.ueb-modus { min-width: 230px; }

/* ---------------------------------------------------------------- Disposition */
:root { --va-mietomnibus: #2a78d6; --va-reiseverkehr: #7c3aed; --va-taxi: #e2a000; --va-mietwagen: #0f766e; --va-krankenfahrt: #dc2626; --va-sonstige: #6b7280; }
.va-mietomnibus { --va: var(--va-mietomnibus); } .va-reiseverkehr { --va: var(--va-reiseverkehr); } .va-taxi { --va: var(--va-taxi); }
.va-mietwagen { --va: var(--va-mietwagen); } .va-krankenfahrt { --va: var(--va-krankenfahrt); } .va-sonstige { --va: var(--va-sonstige); }
.tafel-legende i { background: var(--va, #e5e7eb); width: 14px; min-width: 14px; height: 12px; border: 0; padding: 0; }
.tafel-legende i.tafel-legende-entwurf { background: repeating-linear-gradient(45deg, #cbd5e1 0 3px, #fff 3px 6px); border: 1px dashed #64748b; }
.tafel-legende i.tafel-legende-rot { background: #fff; outline: 2px solid var(--rot); } .tafel-legende i.tafel-legende-gelb { background: #fff; outline: 2px solid #E3A008; }
.tafel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow-x: auto; position: relative; }
.tafel.laedt { opacity: .6; pointer-events: none; }
.tafel-kopf, .tafel-zeile { display: grid; grid-template-columns: 200px minmax(820px, 1fr); }
.tafel-kopf { position: sticky; top: 0; background: #FAFBFC; border-bottom: 1px solid var(--linie); z-index: 4; }
.tafel-kopf .tafel-spur { min-height: 0; height: 30px; }
.tafel-kopf .tafel-name { background: #FAFBFC; }
.tafel-kopf .tafel-name { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 650; padding: 6px 10px; }
.tafel-stunde { position: absolute; top: 6px; transform: translateX(-50%); font-size: .7rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.tafel-zeile { border-bottom: 1px solid #EEF0F3; min-height: 44px; }
.tafel-zeile:last-child { border-bottom: 0; }
.tafel-zeile.offen { background: #FFFBEB; }
.tafel-zeile.abwesend .tafel-spur { background: repeating-linear-gradient(135deg, #F3F4F6 0 6px, #fff 6px 12px); }
.tafel-zeile.ziel { background: color-mix(in srgb, var(--primaer) 10%, #fff); outline: 2px dashed var(--primaer); outline-offset: -2px; }
.tafel-name { padding: 6px 10px; border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 1px; justify-content: center; position: sticky; left: 0;
  background: inherit; z-index: 1; min-width: 0; }
.tafel-zeile .tafel-name { background: #fff; } .tafel-zeile.offen .tafel-name { background: #FFFBEB; }
.tafel-name .n { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tafel-name small { color: var(--leise); font-size: .72rem; }
.tafel-name .badge { align-self: flex-start; font-size: .68rem; padding: 0 6px; }
.tafel-spur { position: relative; min-height: 44px; }
.tafel-linie { position: absolute; top: 0; bottom: 0; width: 1px; background: #EEF0F3; }
.tafel-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rot); z-index: 3; opacity: .7; }
.tafel-dienst { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; background: #DCE7F7; color: #1f2937; font-size: .72rem; font-weight: 650; padding: 2px 6px;
  overflow: hidden; white-space: nowrap; border: 1px solid rgba(0, 0, 0, .06); opacity: .75; }
.tafel-dienst:hover { text-decoration: none; opacity: 1; }
.tafel-dienst.entwurf { border-style: dashed; border-color: #64748b; }
.tafel-auftrag { position: absolute; top: 9px; bottom: 9px; border-radius: 6px; background: color-mix(in srgb, var(--va, #6b7280) 22%, #fff); color: #111827;
  font-size: .74rem; overflow: hidden; white-space: nowrap; display: flex; align-items: center; gap: 4px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--va) 50%, #fff);
  z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.tafel-auftrag:hover { text-decoration: none; z-index: 4; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.tafel-auftrag[draggable=true] { cursor: grab; }
.tafel-auftrag.zieht { opacity: .4; }
.tafel-auftrag .fahrt { position: absolute; top: 0; bottom: 0; background: var(--va, #6b7280); opacity: .85; z-index: -1; }
.tafel-auftrag .t { position: relative; color: #111827; background: rgba(255, 255, 255, .9); border-radius: 4px; padding: 0 4px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.tafel-zeile.alarm .tafel-name { box-shadow: inset 4px 0 0 var(--rot); }
.tafel-dienst.alarm { background: var(--rot-hg) !important; border: 2px solid var(--rot); color: var(--rot); animation: alarm-puls 1.6s ease-in-out infinite; }
@keyframes alarm-puls { 50% { box-shadow: 0 0 0 4px rgba(217, 45, 32, .18); } }
@media (prefers-reduced-motion: reduce) { .tafel-dienst.alarm { animation: none; } }
.tafel-auftrag.st-entwurf, .tafel-auftrag.st-geplant { background: repeating-linear-gradient(45deg, #f1f5f9 0 4px, #fff 4px 8px); border-style: dashed; }
.tafel-auftrag.st-entwurf .fahrt, .tafel-auftrag.st-geplant .fahrt { opacity: .55; }
.tafel-auftrag.st-erledigt .fahrt { background: #9ca3af; }
.tafel-auftrag.ampel-rot { outline: 2px solid var(--rot); outline-offset: 0; }
.tafel-auftrag.ampel-gelb { outline: 2px solid #E3A008; outline-offset: 0; }
.tafel-auftrag.zweit { opacity: .7; }
.tafel-auftrag .mk { position: relative; font-style: normal; font-size: .68rem; background: #fff; border-radius: 6px; padding: 0 4px; color: var(--rot); font-weight: 700; }
.tafel-auftrag .mk.gelb { color: var(--gelb); } .tafel-auftrag .mk.gruen { color: var(--gruen); }
.tafel-dienst.ampel-rot { outline: 2px solid var(--rot); } .tafel-dienst.ampel-gelb { outline: 1px solid #E3A008; }
.befunde { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.befunde li { font-size: .88rem; display: flex; gap: 8px; align-items: baseline; }
.befunde li .badge { flex: none; }
.dialog-hg { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { width: 100%; max-width: 560px; margin: 0; }
.dialog textarea.fehlt { border-color: var(--rot); }
.vorschau { margin: 10px 0; }
/* Dienstplan */
.plan.dienstplan th, .plan.dienstplan td { min-width: 44px; height: 40px; }
.plan.dienstplan th.name, .plan.dienstplan td.name { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 180px; text-align: left; padding: 2px 10px; }
.plan.dienstplan th.name { background: #FAFBFC; }
.dp-zelle { cursor: pointer; vertical-align: middle; position: relative; padding: 2px !important; }
.dp-zelle:hover { background: #F5F8FF; }
.dp-zelle.ampel-rot { box-shadow: inset 0 0 0 2px var(--rot); } .dp-zelle.ampel-gelb { box-shadow: inset 0 0 0 2px #E3A008; }
.dp-dienst { display: inline-block; min-width: 26px; padding: 3px 4px; border-radius: 5px; font-weight: 700; font-size: .74rem; color: #1f2937; background: #E5E7EB; border: 1px solid rgba(0, 0, 0, .06); }
.dp-dienst:hover { text-decoration: none; filter: brightness(.95); }
.dp-dienst.entwurf { border: 1px dashed #475569; }
.dp-auftraege { display: block; font-size: .64rem; color: var(--primaer); font-weight: 650; }
.dp-abw { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--leise); background: var(--grau-hg); border-radius: 4px; padding: 1px 4px; }
.dp-wunsch { position: absolute; top: 1px; right: 2px; font-size: .62rem; color: #be185d; }
.plan.dienstplan tr.besetzung td { font-size: .74rem; font-weight: 650; }
.plan.dienstplan tr.besetzung td.fehlt { background: var(--rot-hg); color: var(--rot); } .plan.dienstplan tr.besetzung td.ok { color: var(--gruen); }
.dp-menue { position: absolute; z-index: 40; width: 320px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .25); }
.dp-menue-kopf { font-weight: 650; margin-bottom: 8px; font-size: .9rem; }
.dp-menue-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dp-menue-knoepfe .knopf small { font-weight: 400; color: var(--leise); }
/* Mitteilungen */
.tabelle.aenderung td.alt { color: var(--leise); text-decoration: line-through; } .tabelle.aenderung td.neu { color: #065f46; font-weight: 600; }
@media (max-width: 640px) {   /* Handy: Änderungen untereinander statt dreispaltig (6.3) */
  .tabelle.aenderung thead { display: none; }
  .tabelle.aenderung, .tabelle.aenderung tbody, .tabelle.aenderung tr, .tabelle.aenderung td { display: block; width: 100%; }
  .tabelle.aenderung tr { border-bottom: 1px solid var(--linie); padding: 6px 0; }
  .tabelle.aenderung td { border: 0; padding: 2px 0; } .tabelle.aenderung td:first-child { font-weight: 700; }
  .tabelle.aenderung td[data-label]::before { content: attr(data-label) ": "; font-weight: 400; color: var(--leise); text-decoration: none; display: inline-block; margin-right: 4px; }
}
.mt-liste { list-style: none; margin: 0; padding: 0; }
.mt-liste li { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--linie); padding: 8px 0; }
.mt-liste li a { flex: 1; display: flex; flex-direction: column; color: var(--text); }
.mt-liste li a small { color: var(--leise); }
.mt-liste li.dringend a strong { color: var(--rot); }
.offene-mt { border-left: 5px solid var(--rot); }
.offene-mt h2 { display: flex; gap: 8px; align-items: center; }
.mt-block { border-top: 1px solid var(--linie); padding: 8px 0; }
.alarm-karte { border-left: 5px solid var(--rot); background: #FFF8F8; }
/* Tagesprotokoll */
.protokoll-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .protokoll-raster { grid-template-columns: 1fr; } }
.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 4px; }
.zeitstrahl li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EEF0F3; position: relative; }
.zeitstrahl .z-zeit { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--leise); }
.zeitstrahl .z-text { font-size: .86rem; margin-top: 3px; color: #344054; }
.zeitstrahl li.z-verspaetung .badge { background: var(--gelb-hg); color: var(--gelb); } .zeitstrahl li.z-unfall .badge, .zeitstrahl li.z-fahrzeugausfall .badge,
.zeitstrahl li.z-schaden .badge { background: var(--rot-hg); color: var(--rot); } .zeitstrahl li.z-status .badge { background: var(--gruen-hg); color: var(--gruen); }
.zeitstrahl li.z-personalausfall .badge, .zeitstrahl li.z-alarm .badge { background: #FFE4E6; color: #9F1239; } .zeitstrahl li.z-lob .badge { background: var(--blau-hg); color: var(--blau); }
.zeitstrahl li.nachtrag { background: #FFFDF5; }
.schnellwahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.uebergabe-karte { border-left: 5px solid #E3A008; }
.uebergabe-karte .checkliste li { align-items: center; }
/* Kennzahlen (Balken) */
.balken-zeile { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 40px; gap: 8px; align-items: center; margin: 6px 0; font-size: .86rem; }
.b-balken { background: var(--grau-hg); border-radius: 4px; height: 12px; overflow: hidden; }
.b-balken i { display: block; height: 100%; background: var(--serie-1); border-radius: 4px; }
.b-wert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.fs-fotos img { width: 100%; height: auto; border-radius: 8px; }
.fs-fotos figcaption { font-size: .8rem; color: var(--leise); margin-top: 6px; }
/* Portal: Dienste und Auftragsmappe */
.tag-block { margin-bottom: 14px; }
.tag-block h3 { margin: 6px 0; font-size: .92rem; color: var(--leise); }
.tag-block.heute h3 { color: var(--primaer); }
.einsatz { display: flex; gap: 12px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--va, #CBD5E1); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; color: var(--text); box-shadow: var(--schatten); }
a.einsatz:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(16, 24, 40, .12); }
.einsatz .zeit { font-weight: 750; font-size: 1.1rem; font-variant-numeric: tabular-nums; min-width: 54px; }
.einsatz .was { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.einsatz .was small { color: var(--leise); }
.einsatz.erledigt { opacity: .6; }
.tausch-form { margin: 0; }
.naechster { border-left: 5px solid var(--primaer); }
.naechster-kurz { display: flex; flex-direction: column; gap: 2px; border-left: 5px solid var(--primaer); color: var(--text); }
.naechster-kurz:hover { text-decoration: none; }
.naechster-kurz small { color: var(--leise); } .naechster-kurz strong { font-size: 1.15rem; }
.zeiten-karte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.zeiten-karte small { display: block; color: var(--leise); font-size: .74rem; }
.zeiten-karte strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .zeiten-karte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.status-leiste { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 12px; }
.status-leiste li { flex: 1; text-align: center; font-size: .72rem; padding: 6px 2px; border-radius: 6px; background: var(--grau-hg); color: var(--leise); }
.status-leiste li.erledigt { background: var(--gruen-hg); color: var(--gruen); font-weight: 650; }
.knopf.breit { width: 100%; }
.knopf-gitter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.halte { margin: 0; padding-left: 20px; } .halte li { margin-bottom: 8px; } .halte .zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.unfall-schritte { border-left: 5px solid var(--rot); } .unfall-schritte ol { margin: 0; padding-left: 20px; } .unfall-schritte li { margin-bottom: 4px; }
.rot-text { color: var(--rot); }
.kachel .titel svg, .knopf svg, .nav svg { flex-shrink: 0; }
.vorschlag-zeile td { background: #F2F7FF; }
.vorschlag-zeile input, .vorschlag-zeile select { border-style: dashed; }
.folge-gefaehrdet { border-left: 5px solid var(--rot); }
.protokoll-suche { display: flex; gap: 8px; margin-bottom: 12px; }
.protokoll-suche input[type=search] { flex: 1; min-width: 0; }
.tafel-ton { margin-bottom: 8px; }
.schreiben-offen { border-left-color: #B45309; }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inline-form .eingabe.klein, .inline-form .auswahl.klein { width: auto; min-width: 0; }
.karte.formular > .feld { margin-bottom: 12px; }

/* ---------------------------------------------------------------- Große Textfelder (textfeld.js) */
.textfeld { position: relative; }
.tf-leiste { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border: 1px solid #D0D5DD; border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--grau-hg); }
.textfeld textarea.eingabe { border-radius: 0 0 8px 8px; resize: vertical; line-height: 1.55; min-height: 70px; }
.tf-knopf { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 2px 8px; font: inherit; font-size: .82rem; color: #344054; cursor: pointer; min-height: 28px; }
.tf-knopf:hover, .tf-knopf:focus-visible { background: var(--flaeche); border-color: var(--linie); }
.tf-knopf.fett { font-weight: 800; }
.tf-knopf.klein { border-color: var(--linie); background: var(--flaeche); margin-left: 6px; }
.tf-titel { display: none; font-weight: 650; margin-right: 8px; }
.tf-status { margin-left: auto; font-size: .75rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-status.fehler { color: var(--rot); }
.tf-voll { margin-left: 2px; }
.tf-entwurf { background: var(--gelb-hg); color: var(--gelb); border: 1px solid #F0D58A; border-bottom: 0; padding: 6px 10px; font-size: .84rem; }
.tf-menue { position: absolute; z-index: 40; top: 36px; left: 0; width: min(520px, 100%); max-height: 360px; display: flex; flex-direction: column; gap: 6px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); padding: 8px; }
.tf-liste { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tf-gruppe { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin: 6px 4px 2px; }
.tf-baustein { text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.tf-baustein:hover, .tf-baustein:focus-visible { background: var(--blau-hg); }
.tf-baustein span { font-size: .8rem; color: var(--leise); }
.tf-pflege { font-size: .8rem; padding: 2px 6px; }
.textfeld.vollbild { position: fixed; inset: 0; z-index: 100; background: var(--flaeche); display: flex; flex-direction: column; padding: 18px max(18px, calc(50vw - 440px)); }
.textfeld.vollbild .tf-leiste { border-radius: 8px 8px 0 0; }
.textfeld.vollbild .tf-titel { display: inline; }
.textfeld.vollbild textarea.eingabe { flex: 1; height: auto !important; resize: none; font-size: 1.02rem; line-height: 1.7; padding: 16px 18px; }
.textfeld.vollbild .tf-menue { top: 56px; left: max(18px, calc(50vw - 440px)); }
body.tf-vollbild-offen { overflow: hidden; }
p.text, dd.text, td.text { white-space: pre-line; }
.dl-liste.vorbereitung { display: block; } .dl-liste.vorbereitung dd { margin: 2px 0 8px; }

/* Personalgespräche */
.anlass-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.anlass-wahl.zwei { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.anlass-karte { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px 10px 36px;
  cursor: pointer; background: var(--flaeche); font-weight: 450 !important; }
.anlass-karte input { position: absolute; left: 12px; top: 13px; }
.anlass-karte .t { font-weight: 650; color: var(--text); }
.anlass-karte .leise { font-size: .8rem; line-height: 1.4; }
.anlass-karte .marken { display: flex; gap: 4px; flex-wrap: wrap; }
.anlass-karte:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaer) 25%, transparent); }
.ziel-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ziel-zeile { display: grid; grid-template-columns: minmax(0, 3fr) minmax(150px, 1fr) minmax(140px, 1fr) auto; gap: 8px 12px; align-items: end;
  padding-bottom: 10px; border-bottom: 1px dashed var(--linie); }
.ziel-zeile.rueckblick { grid-template-columns: minmax(0, 3fr) minmax(160px, 1fr) minmax(0, 2fr); align-items: start; }
.ziel-zeile .feld label { margin-bottom: 4px; }
.ziel-zeile .feld label > .eingabe, .ziel-zeile .feld label > .auswahl { margin-top: 4px; font-weight: 400; }
.ziel-weg { white-space: nowrap; font-size: .82rem; padding-bottom: 8px; }
.portal-status { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.portal-status.zurueck { opacity: .6; }
.portal-status .badge { margin: 3px 4px 0 0; }
dl.vorbereitung dt { font-weight: 600; margin-top: 8px; color: var(--text); }
.wahl-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 6px; }
@media (max-width: 720px) {
  .ziel-zeile, .ziel-zeile.rueckblick { grid-template-columns: 1fr; }
  .textfeld.vollbild { padding: 8px; }
  .tf-status { display: none; }
}

/* Stellenanzeigen */
.anzeige-ablauf { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.anzeige-ablauf li { border-top: 4px solid var(--linie); padding-top: 8px; font-size: .82rem; font-weight: 650; color: var(--leise); }
.anzeige-ablauf li small { display: block; font-weight: 450; }
.anzeige-ablauf li.fertig { border-top-color: var(--gruen); color: var(--text); }
.anzeige-ablauf li.jetzt { border-top-color: var(--primaer); color: var(--primaer); }
.anz-balken { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin: 14px 0 4px; border-bottom: 1px solid var(--linie); }
.anz-balken span { flex: 1; min-height: 2px; background: color-mix(in srgb, var(--primaer) 70%, #fff); border-radius: 2px 2px 0 0; }
.qr-box svg { width: 100%; height: auto; }
@media (max-width: 720px) { .anzeige-ablauf { grid-template-columns: repeat(3, 1fr); } }

/* Karriereseite gestalten */
.ke-zeile { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--linie); }
.ke-zeile.bereich { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
.ke-zeile.stimme { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.2fr) 150px auto; align-items: start; }
.ke-abschnitte { display: grid; gap: 6px; }
.ke-abschnitte .zeile { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; }
.ke-farben { display: flex; gap: 18px; flex-wrap: wrap; }
.ke-farben label { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: .9rem; }
.ke-farben input[type=color] { width: 46px; height: 34px; border: 1px solid var(--linie); border-radius: 8px; padding: 2px; background: #fff; }
.ke-bild { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--linie); }
.ke-bild img { width: 150px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); }
.ke-bild .leer { width: 150px; height: 84px; border-radius: 8px; border: 1px dashed var(--linie); display: grid; place-items: center; color: var(--leise); font-size: .8rem; }
.ke-schnipsel { font-family: var(--mono); font-size: .8rem; }
@media (max-width: 900px) { .ke-zeile, .ke-zeile.bereich, .ke-zeile.stimme { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Tagesprotokoll 2.0 und Krankmeldungen (Phase 4a) */
.tp-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.tp-gruppe legend { font-weight: 650; font-size: .86rem; color: var(--primaer); margin: 10px 0 2px; padding: 0; }
.tp-gruppe[hidden], .feld[hidden] { display: none !important; }
.zeitstrahl li.storniert .z-inhalt > a, .zeitstrahl li.storniert .z-text { text-decoration: line-through; color: var(--leise); }
.zeitstrahl li.z-krank .badge { background: #FFE4E6; color: #9F1239; } .zeitstrahl li.z-gesund .badge { background: var(--gruen-hg); color: var(--gruen); }
.zeitstrahl li.z-beschwerde .badge, .zeitstrahl li.z-nicht_erschienen .badge, .zeitstrahl li.z-fahrtausfall .badge { background: var(--rot-hg); color: var(--rot); }
.zeitstrahl li.z-antritt_spaet .badge, .zeitstrahl li.z-subunternehmen .badge, .zeitstrahl li.z-kontrolle .badge { background: var(--gelb-hg); color: var(--gelb); }
.zeitstrahl li.z-fundsache .badge, .zeitstrahl li.z-witterung .badge, .zeitstrahl li.z-fahrzeugtausch .badge { background: var(--blau-hg); color: var(--blau); }
.zeitstrahl .badge + .badge, .zeitstrahl a + .badge { margin-left: 4px; }
.mono.leise { font-size: .78rem; }
.zaehler { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 9px; background: var(--rot); color: #fff; font-size: .72rem; line-height: 1.4em; text-align: center; margin-left: 2px; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.kopfzeile h2 { margin: 0; }
.liste-schlicht { list-style: none; margin: 8px 0; padding: 0; }
.liste-schlicht li { padding: 7px 0; border-bottom: 1px solid #EEF0F3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.liste-schlicht li:last-child { border-bottom: 0; }
.knopfreihe-klein { margin-left: auto; display: inline-flex; gap: 4px; }
.knopf.mini { padding: 2px 8px; font-size: .76rem; }
p.klein, .klein { font-size: .8rem; }
.krank-karte { border-left: 4px solid #F43F5E; }
.pillen { border: 0; padding: 0; margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pillen legend { font-weight: 600; font-size: .86rem; margin-bottom: 4px; padding: 0; width: 100%; }
.pillen label { cursor: pointer; }
.pillen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pillen label span { display: inline-block; padding: 7px 14px; border: 1px solid var(--linie, #D0D5DD); border-radius: 999px; background: var(--flaeche, #fff); font-size: .9rem; }
.pillen input:checked + span { background: var(--primaer); border-color: var(--primaer); color: #fff; font-weight: 600; }
.pillen input:focus-visible + span { outline: 3px solid var(--fokus, #93C5FD); outline-offset: 1px; }
.felder-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.raster.k2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .raster.k2-1 { grid-template-columns: 1fr; } }
.kette { list-style: none; margin: 8px 0; padding: 0 0 0 14px; border-left: 2px solid var(--linie, #D0D5DD); }
.kette li { position: relative; padding: 6px 0 8px 8px; }
.kette li::before { content: ""; position: absolute; left: -20px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--primaer); }
.kette li.aktuell::before, .kette li.kette-storno::before { background: var(--rot); }
.kette li.kette-stellungnahme::before, .kette li.kette-antwort::before { background: var(--gruen); }
.anhang-liste { margin: 4px 0 8px; padding-left: 18px; }
details.storno { margin-top: 10px; } details.storno summary { cursor: pointer; color: var(--rot); font-size: .86rem; }
.knopf.gefahr { border-color: var(--rot); color: var(--rot); }
.portal-reihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin: 10px 0; }
.portal-reihe label { width: 100%; font-weight: 600; font-size: .9rem; }
.portal-reihe .eingabe { flex: 1 1 160px; width: auto; }
.tp-gruppe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.tp-gruppe > legend { grid-column: 1 / -1; }
.tp-gruppe > .feld.breit { grid-column: 1 / -1; }
.tp-gruppe > .feld { min-width: 0; }
@media (max-width: 520px) { .tp-gruppe { grid-template-columns: minmax(0, 1fr); } }
/* Führerscheinkontrolle im Original (Phase 4b) */
.unterschrift-feld { border: 1px dashed var(--linie); border-radius: 10px; background: #FCFCFD; margin: 8px 0; }
.unterschrift-feld canvas { width: 100%; height: 160px; display: block; touch-action: none; cursor: crosshair; border-bottom: 1px solid #D0D5DD; }
.unterschrift-feld .u-fuss { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; font-size: .78rem; color: var(--leise); }
.erklaerung { background: #F8F9FB; border-left: 3px solid var(--primaer); padding: 8px 10px; font-size: .86rem; margin: 6px 0 10px; border-radius: 6px; }
.fs-klassen { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fs-punkte label { display: block; padding: 4px 0; }
.sig-bild { max-width: 260px; max-height: 90px; display: block; border-bottom: 1px solid var(--linie); }
.checkliste-schlicht { list-style: none; padding: 0; margin: 6px 0; font-size: .86rem; }
.checkliste-schlicht li { padding: 3px 0; } .checkliste-schlicht li.ok { color: var(--gruen); } .checkliste-schlicht li.fehlt { color: var(--leise); }
.fortschritt { position: relative; height: 8px; border-radius: 6px; background: #EEF0F3; overflow: hidden; margin: 2px 0 3px; max-width: 220px; }
.fortschritt.gross { height: 14px; max-width: 420px; }
.fortschritt i, .fortschritt b { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.fortschritt b { background: repeating-linear-gradient(45deg, #C7D2FE, #C7D2FE 4px, #E0E7FF 4px, #E0E7FF 8px); }
.fortschritt i { background: var(--gruen); z-index: 1; }
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--schwach); vertical-align: middle; }
.ampel.rot { background: var(--rot); } .ampel.gelb { background: #E8A317; } .ampel.gruen { background: var(--gruen); }
.badge.grau { background: #EEF0F3; color: var(--leise); }
.leise.klein, p.klein { font-size: .82rem; }
.sig-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.sig-paar figure { margin: 0; border: 1px solid var(--linie, #E5E7EB); border-radius: 8px; padding: 8px; background: #fff; }
.sig-paar img { display: block; max-width: 100%; height: 64px; object-fit: contain; margin: 0 auto; }
.sig-paar figcaption { font-size: .78rem; color: var(--leise); border-top: 1px solid var(--linie, #E5E7EB); margin-top: 6px; padding-top: 4px; }
@media (max-width: 700px) { .sig-paar { grid-template-columns: 1fr; } }
.matrix-fb th, .matrix-fb td { padding: 7px 8px; font-size: .84rem; vertical-align: top; }
.matrix-fb td:nth-child(n+3):nth-child(-n+7) .badge { white-space: nowrap; }
.matrix-fb td:first-child { min-width: 150px; }
.badge.umbruch { white-space: normal; line-height: 1.35; display: inline-block; }
.stand-zelle small { display: inline-block; margin-top: 3px; }
.kontrollen-liste li { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--linie, #E5E7EB); }
.kontrollen-liste li:last-child { border-bottom: 0; }
.kontrollen-liste li > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
details.karte > summary { cursor: pointer; }
details.karte[open] > summary { margin-bottom: 12px; }
.portal-kacheln .kachel .titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.fs-foto { margin: 0 0 14px; overflow: hidden; }
.fs-foto img { display: block; width: 100%; height: auto; border-radius: 8px; }
.fs-foto figcaption { font-size: .8rem; color: var(--leise); margin-top: 6px; }
/* Etappe 4c: Datenschutzmanagement */
.lage-kopf { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten);
  margin-bottom: 14px; border-left: 6px solid var(--gruen); }
.lage-kopf.ampel-rot { border-left-color: var(--rot); } .lage-kopf.ampel-gelb { border-left-color: #E8A317; }
.ampel.gross { width: 18px; height: 18px; }
.lage-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lage-kachel { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten);
  color: var(--text); border-top: 3px solid var(--gruen); }
.lage-kachel:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(16, 24, 40, .12); }
.lage-kachel.rot { border-top-color: var(--rot); } .lage-kachel.gelb { border-top-color: #E8A317; }
.lage-kachel .ampel { margin-top: 5px; flex: none; }
.lage-kachel .titel { font-size: .82rem; color: var(--leise); }
.lage-kachel .wert { font-weight: 650; }
.lage-kachel .zusatz { font-size: .82rem; color: var(--leise); }
.hinweis-karte { border-left: 4px solid var(--primaer); }
.dl-liste.breit dt { min-width: 190px; }
.uhr-72 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); background: var(--gruen-hg); margin-bottom: 14px; }
.uhr-72.rot { background: var(--rot-hg); } .uhr-72.gelb { background: var(--gelb-hg); } .uhr-72.grau { background: var(--grau-hg); }
.uhr-72 .balken { flex: 0 0 180px; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.uhr-72 .balken i { display: block; height: 100%; background: var(--rot); }
.uhr-72.gruen .balken i, .uhr-72.grau .balken i { background: var(--gruen); }
.matrix-scroll { overflow-x: auto; }
.matrix-zugriff { font-size: .8rem; }
.matrix-zugriff th.dreh { height: 150px; white-space: nowrap; vertical-align: bottom; padding: 4px 2px; width: 34px; }
.matrix-zugriff th.dreh span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); text-transform: none; letter-spacing: 0; }
.matrix-zugriff .fix { position: sticky; left: 0; background: var(--flaeche); z-index: 1; min-width: 200px; }
.matrix-zugriff td.code { text-align: center; font-weight: 650; font-family: var(--mono); padding: 4px 2px; }
.matrix-zugriff .code-K { color: var(--schwach); } .matrix-zugriff .code-E { background: #F5F3FF; color: #5B21B6; }
.matrix-zugriff .code-L { background: var(--blau-hg); color: var(--blau); } .matrix-zugriff .code-T { background: var(--grau-hg); }
.matrix-zugriff .code-B { background: var(--gelb-hg); color: var(--gelb); } .matrix-zugriff .code-A { background: var(--gruen-hg); color: var(--gruen); }
.matrix-zugriff td.ueber { outline: 2px solid var(--rot); outline-offset: -2px; background: var(--rot-hg); color: var(--rot); }
.matrix-zugriff .schutz-zeile th { font-size: .66rem; text-transform: none; padding: 2px; text-align: center; }
.matrix-zugriff .sb-hoch { background: var(--gelb-hg); } .matrix-zugriff .sb-sehr_hoch { background: var(--rot-hg); }
.matrix-zugriff.bearbeiten td { padding: 2px; }
.matrix-zugriff .begr { white-space: normal; min-width: 180px; max-width: 220px; text-transform: none; padding-right: 12px; }
.matrix-zugriff .fix { min-width: 170px; }
.code-wahl { padding: 2px 4px; min-width: 46px; font-family: var(--mono); }
.knopfreihe-umbruch { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-punkt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
.audit-punkt:first-of-type { border-top: 0; }
.audit-punkt .vorschlag { font-size: .8rem; color: var(--blau); margin-top: 4px; }
.audit-punkt .bewertung { display: flex; flex-direction: column; gap: 6px; }
.audit-punkt.nicht { box-shadow: inset 3px 0 0 var(--rot); padding-left: 8px; } .audit-punkt.teilweise { box-shadow: inset 3px 0 0 #E8A317; padding-left: 8px; }
.audit-punkt.erfuellt { box-shadow: inset 3px 0 0 var(--gruen); padding-left: 8px; }
@media (max-width: 800px) { .audit-punkt { grid-template-columns: 1fr; } }
.saeulen { display: flex; align-items: flex-end; gap: 14px; height: 160px; padding: 10px 4px 0; }
.saeule { flex: 0 0 56px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.saeule .balken { width: 100%; background: var(--primaer); border-radius: 4px 4px 0 0; position: relative; min-height: 4px; }
.saeule .balken span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: .75rem; font-weight: 650; }
.formular-fuss.oben { margin: 0 0 12px; }
.dsfa-tab textarea, .dsfa-tab input { min-width: 120px; }
.dsfa-tab th.stufe { white-space: normal; width: 64px; }
.dsfa-tab select.stufe { width: 58px; min-width: 0; padding-right: 18px; }
.dsfa-tab th, .dsfa-tab td { padding-left: 6px; padding-right: 6px; }
/* Etappe 4d: Arbeitsschutz */
.raster.k3-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.gbu-kopf .karte { margin-bottom: 0; }
.gbu-punkt { padding: 12px 0; border-top: 1px solid var(--linie); }
.gbu-punkt:first-of-type { border-top: 0; }
.gbu-punkt.nein .gbu-titel { color: var(--leise); }
.gbu-punkt.offen .gbu-titel strong { background: var(--gelb-hg); color: var(--gelb); border-radius: 4px; padding: 0 5px; }
.gbu-titel { margin-bottom: 8px; }
.gbu-felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; align-items: end; }
.gbu-felder label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--leise); font-weight: 600; }
.gbu-felder .breit2 { grid-column: span 2; }
.gbu-felder textarea { min-height: 54px; }
.gbu-felder .eingabe, .gbu-felder .auswahl { font-weight: 400; font-size: .86rem; color: var(--text, #1A171B); }
.gbu-lesen { font-size: .88rem; display: grid; gap: 3px; }
.risikomatrix { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .82rem; }
.risikomatrix th { font-size: .72rem; color: var(--leise); font-weight: 600; text-align: center; }
.risikomatrix td { text-align: center; height: 38px; border-radius: 6px; padding: 4px; }
.rm-gering { background: var(--gruen-hg); } .rm-mittel { background: var(--gelb-hg); } .rm-hoch { background: var(--rot-hg); }
.ba-blatt { border: 6px solid var(--ba-farbe, #1F5FBF); border-radius: 6px; background: #fff; }
.ba-kopf { background: var(--ba-farbe, #1F5FBF); color: #fff; text-align: center; padding: 10px; }
.ba-kopf .ba-titel { font-size: 1.25rem; font-weight: 700; }
.ba-kopf .ba-unter { font-size: .82rem; opacity: .9; }
.ba-abschnitt .ba-ueber { background: var(--ba-farbe, #1F5FBF); color: #fff; font-weight: 650; font-size: .86rem; padding: 4px 10px; text-transform: uppercase; letter-spacing: .03em; }
.ba-abschnitt .ba-inhalt { padding: 8px 12px; display: flex; gap: 12px; align-items: flex-start; }
.ba-abschnitt ul { margin: 0; padding-left: 18px; flex: 1; }
.ba-pikto { display: flex; flex-direction: column; gap: 6px; flex: none; }
.ba-pikto img { width: 58px; height: 58px; object-fit: contain; }
.pikto-klein { width: 22px; height: 22px; vertical-align: middle; margin-right: 4px; }
.beg-punkt { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linie); }
.beg-punkt:first-of-type { border-top: 0; }
.beg-punkt.mangel { box-shadow: inset 3px 0 0 #E8A317; padding-left: 8px; } .beg-punkt.erheblich { box-shadow: inset 3px 0 0 var(--rot); padding-left: 8px; }
.beg-wahl { display: flex; gap: 4px; flex-wrap: wrap; }
.beg-knopf input { position: absolute; opacity: 0; pointer-events: none; }
.beg-knopf span { display: inline-block; padding: 6px 9px; border: 1px solid var(--linie); border-radius: 999px; font-size: .78rem; cursor: pointer; white-space: nowrap; background: var(--flaeche); }
.beg-knopf input:checked + span { color: #fff; border-color: transparent; }
.beg-knopf.ok input:checked + span { background: var(--gruen); } .beg-knopf.mangel input:checked + span { background: #D08A00; }
.beg-knopf.erheblich input:checked + span { background: var(--rot); } .beg-knopf.na input:checked + span { background: var(--schwach); }
.beg-knopf input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.beg-feststellung { display: flex; gap: 6px; align-items: center; }
.beg-feststellung .eingabe { flex: 1; min-width: 0; }
.matrix-psa th { white-space: normal; min-width: 90px; font-size: .72rem; }
@media (max-width: 900px) {
  .raster.k3-1 { grid-template-columns: 1fr; }
  .gbu-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beg-punkt { grid-template-columns: 1fr; }
}
.gbu-wirk { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.gbu-wirk .auswahl { width: auto; min-width: 180px; }

/* ---------------------------------------------------------------- Etappe 4e: Lernplattform */
.lern-kurs { display: block; padding: 12px 14px; border: 1px solid var(--linie); border-left: 5px solid var(--primaer); border-radius: 10px; margin: 0 0 10px; color: var(--text); background: var(--flaeche); }
.lern-kurs:hover { text-decoration: none; box-shadow: var(--schatten); }
.lern-kurs.ueberfaellig { border-left-color: var(--rot); }
.lern-kurs.gesperrt { opacity: .65; border-left-color: var(--schwach); }
.lern-kurs-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.lern-kurs-info { font-size: .82rem; color: var(--leise); margin-top: 2px; }
.lernen-offen { border-left-color: #E3A008; }
.lern-lektionen { list-style: none; counter-reset: lk; margin: 10px 0 14px; padding: 0; }
.lern-lektionen li { counter-increment: lk; display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF0F3; }
.lern-lektionen li::before { content: counter(lk); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 650;
  background: var(--grau-hg); color: var(--leise); }
.lern-lektionen li.fertig::before { background: var(--gruen); color: #fff; }
.lern-lektionen li a, .lern-lektionen li > span:first-of-type { flex: 1; }
.lern-haken { color: var(--gruen); display: inline-flex; }
.lern-kopf { margin: 4px 0 14px; } .lern-kopf small { color: var(--leise); } .lern-kopf h1 { margin: 2px 0 8px; } .lern-kopf.klein h2 { margin: 2px 0 10px; }
.lern-lektion { font-size: 1.02rem; line-height: 1.6; }
.lern-lektion ul, .lern-lektion ol { padding-left: 22px; } .lern-lektion li { margin: 3px 0; }
.lern-weiter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.lern-weiter .knopf.primaer { flex: 1; justify-content: center; }
.lb { margin: 0 0 16px; }
.lb-marke { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: .86rem; margin-bottom: 4px; }
.lb-marke small { font-weight: 400; color: var(--leise); }
.lb-hinweis { background: var(--blau-hg); border-left: 4px solid var(--blau); border-radius: 8px; padding: 10px 14px; }
.lb-hinweis.warnung { background: var(--gelb-hg); border-left-color: #E3A008; }
.lb-hinweis p:last-child, .lb-fall p:last-child { margin-bottom: 0; }
.lb-bild, .lb-video { margin: 0 0 16px; } .lb-bild img, .lb-video video { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; background: #000; display: block; }
.lb-bild img { background: transparent; }
.lb-bild figcaption, .lb-video figcaption { font-size: .84rem; color: var(--leise); margin-top: 4px; }
.lb-fall { border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; background: #FBFBFE; }
.lb-fall-frage { font-weight: 650; }
.lb-aufklappen summary { cursor: pointer; color: var(--primaer); font-weight: 600; padding: 4px 0; }
.lb-frage, .lb-bildaufgabe { border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; background: var(--flaeche); }
.lb-frage-text { font-weight: 650; }
.lb-optionen { display: grid; gap: 8px; margin: 8px 0; }
.lb-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; background: var(--flaeche); font-size: .98rem; }
.lb-option input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--primaer); }
.lb-option:has(input:checked) { border-color: var(--primaer); background: #F4F4FB; }
.lb-option.richtig { border-color: var(--gruen); background: var(--gruen-hg); }
.lb-option.falsch { border-color: var(--rot); background: var(--rot-hg); }
.lb-rueck { font-weight: 650; margin-top: 8px; } .lb-rueck.ok { color: var(--gruen); } .lb-rueck.nein { color: var(--rot); }
.lb-erkl { font-size: .92rem; background: var(--grau-hg); border-radius: 8px; padding: 8px 12px; margin-top: 6px; }
.lb-ba-flaeche { position: relative; user-select: none; touch-action: manipulation; cursor: crosshair; border-radius: 8px; overflow: hidden; }
.lb-ba-flaeche img { display: block; width: 100%; height: auto; pointer-events: none; }
.lb-ba-treffer { position: absolute; border: 3px solid var(--gruen); border-radius: 8px; background: rgba(26, 127, 55, .15); color: #fff; font-weight: 700; font-size: .8rem;
  display: flex; align-items: flex-start; justify-content: flex-start; padding: 1px 5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.lb-ba-treffer.aufgedeckt { border-color: #E3A008; background: rgba(227, 160, 8, .15); }
.lb-ba-daneben { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid var(--rot); border-radius: 50%; animation: lb-weg .7s ease-out forwards; pointer-events: none; }
@keyframes lb-weg { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .lb-ba-daneben { animation: none; } }
.lb-ba-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.lb-ba-liste { margin: 8px 0 0; padding-left: 22px; } .lb-ba-liste li.aufgedeckt { color: var(--leise); }
.lb-bildaufgabe.fertig .lb-ba-stand { color: var(--gruen); font-weight: 650; }
.lern-frage { border: 1px solid var(--linie); margin: 0 0 14px; }
.lern-frage legend { font-weight: 650; padding: 0 4px; font-size: 1.02rem; float: left; width: 100%; margin-bottom: 8px; }
.lern-frage legend + * { clear: both; }
.lern-frage-nr { display: block; font-size: .78rem; color: var(--leise); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.lern-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #EEF0F3; }
@media (max-width: 560px) { .lern-paar { grid-template-columns: 1fr; } }
.lern-ergebnis { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; margin-bottom: 16px; }
.lern-ergebnis.ok { background: var(--gruen-hg); color: #135C2A; } .lern-ergebnis.nein { background: var(--gelb-hg); color: #6B4A00; }
.lern-prozent { font-size: 2rem; font-weight: 750; font-variant-numeric: tabular-nums; min-width: 84px; text-align: center; }
.lern-rueck { padding-left: 22px; } .lern-rueck > li { padding: 8px 0; border-bottom: 1px solid #EEF0F3; }
.lern-rueck-marke { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 650; margin-right: 4px; }
.lern-rueck li.ok .lern-rueck-marke { color: var(--gruen); } .lern-rueck li.nein .lern-rueck-marke { color: var(--rot); }
.sterne-feld { border: 0; padding: 0; margin: 0 0 10px; } .sterne-feld legend { font-size: .9rem; font-weight: 600; padding: 0; margin-bottom: 2px; }
.sterne { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.sterne input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterne label { font-size: 2rem; line-height: 1; color: #D0D5DD; cursor: pointer; padding: 0 2px; }
.sterne input:checked ~ label, .sterne label:hover, .sterne label:hover ~ label { color: #E3A008; }
.sterne input:focus-visible + label { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
.scorm-rahmen iframe { width: 100%; height: 78vh; min-height: 480px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
.lern-baustein-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.lern-baustein-kopf h2 { margin: 0; font-size: 1rem; }
.lern-medium { margin-bottom: 10px; } .lern-medium img, .lern-medium video { max-width: 100%; max-height: 260px; border-radius: 8px; display: block; }
.lern-punkte-flaeche { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; user-select: none; touch-action: none; }
.lern-punkte-flaeche img { display: block; max-width: 100%; height: auto; pointer-events: none; border-radius: 6px; }
.lern-punkt { position: absolute; border: 2px solid var(--rot); background: rgba(198, 40, 40, .12); border-radius: 6px; color: #fff; font-size: .75rem; font-weight: 700;
  padding: 0 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); pointer-events: none; }
.lern-punkt.neu { border-style: dashed; }
.lern-punkte-liste { padding-left: 22px; } .lern-punkte-liste li { margin: 6px 0; } .lern-punkte-liste li .eingabe { width: calc(100% - 100px); margin-right: 6px; }
.lern-optionen-tabelle td:last-child { width: 70px; } .lern-optionen-tabelle input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primaer); }
.lern-personen { border: 0; padding: 0; margin: 0 0 10px; } .lern-personen legend, .lern-personen summary { font-weight: 650; font-size: .9rem; margin-bottom: 4px; cursor: pointer; }
.balken-inline { display: flex; align-items: center; gap: 8px; } .balken-inline .fortschritt { flex: 1; margin: 0; min-width: 80px; }
.lern-vorschau { max-width: 760px; }
.sig-bild.klein { max-width: 120px; max-height: 40px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.unterschrift-tablet { max-width: 820px; } .unterschrift-tablet .gross { font-size: 1.4rem; margin: 0 0 6px; }
.unterschrift-tablet .unterschrift-feld canvas { height: 220px; }
.pruef-seite { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.pruef-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten); padding: 20px; max-width: 480px; width: 100%; }
.pruef-kopf { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; }
.pruef-kopf.ok { background: var(--gruen-hg); color: #135C2A; } .pruef-kopf.nein { background: var(--gelb-hg); color: #6B4A00; }
.pruef-symbol { font-size: 1.8rem; font-weight: 800; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .7); flex: none; }
.karte-innen summary { cursor: pointer; font-weight: 600; color: var(--primaer); }
fieldset.ohne-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; }
.lern-kurs .fortschritt { width: 100%; max-width: none; }
.lern-fertig li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.lern-fertig .lern-fertig-zeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
/* Prüflisten (Postfach, Zeugnisse) */
.gelb-text { color: #9A6700; } .gruen-text { color: var(--gruen); } .grau-text { color: var(--leise); } .blau-text { color: var(--blau); }
.einwilligung-karte .stand { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.einwilligung-karte .text { font-size: .9rem; line-height: 1.45; background: var(--grau-hg, #F3F4F6); border-radius: 8px; padding: 10px 12px; }
.postfach-liste li.neu strong::after { content: ' neu'; font-size: .7rem; font-weight: 700; color: var(--blau); margin-left: 6px; text-transform: uppercase; }
/* Werdegang */
ol.werdegang { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--linie); }
ol.werdegang li { position: relative; display: flex; gap: 18px; padding: 10px 0 14px; flex-wrap: wrap; }
ol.werdegang li::before { content: ''; position: absolute; left: -26px; top: 15px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--schwach, #9CA3AF); }
ol.werdegang li.aktuell::before { border-color: var(--primaer, #3F3E8F); background: var(--primaer, #3F3E8F); }
ol.werdegang .wann { min-width: 150px; display: flex; flex-direction: column; } ol.werdegang .wann small { color: var(--leise); }
ol.werdegang .was { flex: 1; min-width: 220px; } ol.werdegang details ul { margin: 4px 0 0; padding-left: 18px; }
body.portal ol.werdegang li { flex-direction: column; gap: 2px; padding: 8px 0 12px; }
ol.werdegang .wg-zeit { font-size: .9rem; } ol.werdegang .wg-titel { font-weight: 600; } ol.werdegang .wg-info { font-size: .9rem; }
/* Onboarding (5d) */
ol.schritte { list-style: none; margin: 12px 0 0; padding: 0; }
ol.schritte li a { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--linie); color: inherit; text-decoration: none; }
ol.schritte li:first-child a { border-top: 0; }
.schritt-punkt { flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
  background: #EEF0F3; color: var(--text, #1F2937); }
li.erledigt .schritt-punkt { background: var(--gruen); color: #fff; } li.rueckfrage .schritt-punkt { background: var(--rot); color: #fff; }
li.pruefung .schritt-punkt { background: #DBEAFE; color: #1E3A8A; }
.schritt-text { flex: 1; display: flex; flex-direction: column; } .schritt-text small { color: var(--leise); }
.erster-tag h3 { font-size: .95rem; margin: 14px 0 4px; }
ul.liste-haken { margin: 4px 0 12px; padding-left: 20px; } ul.liste-haken li { margin: 2px 0; }
ul.vorbereitung li { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; } ul.vorbereitung li > span:last-child { flex: 1; }
ul.vorbereitung li svg, ul.vorbereitung .punkt-offen { flex: 0 0 auto; margin-top: 3px; }
details.vorbereitung-klapp summary { cursor: pointer; font-weight: 600; } details.vorbereitung-klapp summary small { font-weight: 400; color: var(--leise); } ul.vorbereitung li.erledigt { color: var(--leise); }
.punkt-offen { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--schwach, #9CA3AF); display: inline-block; margin: 0 2px; }
.unterlage-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .unterlage-kopf h2 { margin: 0; font-size: 1rem; }
.hochladen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .hochladen input { flex: 1; min-width: 200px; }
.vergleich td.neu { font-weight: 600; } .vergleich tr.gleich td { color: var(--leise); }
/* Self-Service (5e) */
.pflicht-monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pflicht-monat h2 { font-size: 1rem; margin: 0 0 6px; } .pflicht-monat.aktuell { outline: 2px solid var(--primaer); }
.pflicht-monat li { flex-wrap: nowrap; align-items: flex-start; } .pflicht-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.team-raster th, .team-raster td { text-align: center; padding: 4px 3px; font-size: .8rem; } .team-raster td:first-child, .team-raster th:first-child { text-align: left; white-space: nowrap; }
.team-raster th.we { color: var(--leise); } .team-raster td.weg { background: #E0E7FF; font-weight: 700; }
.spalten-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.rueckgabe-zeile { display: flex; align-items: center; gap: 6px; margin: 2px 0; } .knopf.gruen { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.antrag-arten li a { display: flex; flex-direction: column; color: inherit; text-decoration: none; padding: 4px 0; }
.sterne { display: flex; gap: 12px; flex-wrap: wrap; } .sterne label { display: inline-flex; align-items: center; gap: 4px; }
ul.hinweise li { flex-wrap: nowrap; align-items: flex-start; } ul.hinweise li > .ampel { flex: 0 0 auto; margin-top: 6px; } ul.hinweise li > span:last-child { flex: 1; min-width: 0; }
/* Beteiligung (5f) */
.skala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .skala label { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 6px 2px; border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; }
.skala label small { font-size: .7rem; color: var(--leise); line-height: 1.15; } .skala input { margin: 0; } .skala label:has(input:checked) { border-color: var(--primaer); background: #F3F4FF; }
.balken-stapel { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #EEF0F3; max-width: 640px; }
.balken-stapel span { display: flex; align-items: center; justify-content: center; font-size: .72rem; color: #fff; }
.balken-stapel .s1 { background: #B91C1C; } .balken-stapel .s2 { background: #FCA5A5; color: #1F2937; } .balken-stapel .s3 { background: #D1D5DB; color: #1F2937; }
.balken-stapel .s4 { background: #93C5FD; color: #1F2937; } .balken-stapel .s5 { background: #1D4ED8; } .balken-stapel span + span { border-left: 2px solid #fff; }
.sprachwahl { display: inline-flex; gap: 4px; margin-left: 6px; } .sprachwahl .link { font-size: inherit; color: inherit; } .sprachwahl .link.aktiv { font-weight: 700; text-decoration: underline; }

/* Etappe 6a: Seitenleiste mit Reitern, Suche im Kopf */
.reiter-leiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; }
.reiter-leiste .reiter { margin: 0; overflow: visible; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .04); color: #C9CED6; font: inherit; font-size: .66rem; line-height: 1.15; cursor: pointer; text-align: center; min-height: 52px; }
.reiter-leiste .reiter:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.reiter-leiste .reiter.aktiv { background: var(--primaer); color: #fff; }
.reiter-leiste .reiter:focus-visible, .nav-eintrag:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.reiter-text { hyphens: manual; }
.reiter-zahl { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--rot); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 16px; }
.reiter-titel { font-size: .95rem; font-weight: 650; color: #fff; margin: 6px 10px 4px; }
.reiter-inhalt .nav-abschnitt:first-of-type { margin-top: 8px; }
.kopf-suche { position: relative; flex: 1 1 auto; max-width: 460px; margin-left: 12px; display: flex; align-items: center; }
.kopf-suche > .symbol { position: absolute; left: 10px; color: var(--leise); display: inline-flex; pointer-events: none; }
.kopf-suche input { width: 100%; height: 38px; padding: 0 34px 0 36px; border: 1px solid var(--linie); border-radius: 19px; background: var(--grau-hg);
  font: inherit; font-size: .9rem; color: var(--text); }
.kopf-suche input:focus { outline: none; background: var(--flaeche); border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(63, 62, 143, .12); }
.suche-taste { position: absolute; right: 10px; font-family: var(--mono); font-size: .72rem; color: var(--leise); border: 1px solid var(--linie);
  border-radius: 4px; padding: 0 5px; background: var(--flaeche); }
.kopf-suche input:focus ~ .suche-taste { display: none; }
.suche-treffer:empty { display: none; }
.suche-treffer { position: absolute; top: 44px; left: 0; right: 0; max-height: 70vh; overflow-y: auto; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(16, 24, 40, .16); padding: 6px; z-index: 40; }
.suche-gruppe { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); font-weight: 650; margin: 8px 8px 4px; }
.suche-eintrag { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; color: var(--text); }
.suche-eintrag:hover, .suche-eintrag:focus { background: var(--grau-hg); text-decoration: none; outline: none; }
.suche-eintrag .symbol { color: var(--leise); display: inline-flex; margin-top: 2px; }
.suche-eintrag strong { display: block; font-weight: 600; font-size: .9rem; }
.suche-eintrag small { display: block; font-size: .76rem; }
.suche-leer { padding: 10px; color: var(--leise); font-size: .88rem; }
.suche-alle { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 0; border-top: 1px solid var(--linie); background: none; color: var(--primaer);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; text-align: left; }
.suche-ergebnis li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.suche-ergebnis li:last-child { border-bottom: 0; }
.suche-ergebnis .symbol { display: inline-flex; vertical-align: -3px; color: var(--leise); }
.feld:target, .karte:target { animation: hervorheben 2.4s ease-out; border-radius: 8px; }
@keyframes hervorheben { 0%, 40% { box-shadow: 0 0 0 3px var(--primaer); background: var(--blau-hg); } 100% { box-shadow: none; background: transparent; } }
@media (max-width: 860px) {
  .kopf-suche { margin-left: 4px; max-width: none; }
  .suche-taste { display: none; }
  .kopf-suche input { padding-right: 12px; }
}
@media (max-width: 520px) {
  .marke .logo { height: 26px; }
  .kopf-suche input::placeholder { color: transparent; }
}
@media print { .kopf-suche { display: none !important; } }

/* 6b – Nachweise für die Aufsichtsbehörde */
.umbruch { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 760px) {
  .nachweis-teile thead { display: none; }
  .nachweis-teile tr { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); }
  .nachweis-teile td { border-bottom: 0; }
  .nachweis-teile td:nth-child(3) { grid-column: 2; padding-top: 0; font-size: .82rem; border-bottom: 1px solid var(--linie); }
  .nachweis-teile td:first-child { border-bottom: 1px solid var(--linie); grid-row: span 2; }
}

/* 6c – Wissensdatenbank */
.wissen-text { white-space: pre-line; line-height: 1.6; }
.wissen-frage textarea { min-height: 3.2em; resize: vertical; }
.wissen-antwort { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--hg); border-left: 3px solid var(--primaer); }
.wissen-antwort.gesundheit, .wissen-antwort.hinweisgeber, .wissen-antwort.limit { border-left-color: #E3A008; }
.wissen-antwort.nicht_gefunden { border-left-color: var(--schwach); }
.wissen-antwort p:last-child { margin-bottom: 0; }
.wissen-thema h3 { margin: 14px 0 4px; font-size: .95rem; color: var(--leise); }
.wissen-thema ul li { padding: 6px 0; }
.wissen-ansprech { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* 6d – Urlaubsplanung */
ol.phasen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: phase; }
ol.phasen li { counter-increment: phase; flex: 1 1 140px; padding: 8px 10px; border-radius: 8px; background: var(--hg); color: var(--leise); font-size: .84rem; border: 1px solid var(--linie); }
ol.phasen li::before { content: counter(phase) " "; font-weight: 700; margin-right: 4px; }
ol.phasen li.erledigt { background: var(--gruen-hg); color: var(--gruen); border-color: transparent; }
ol.phasen li.aktiv { background: var(--primaer); color: #fff; border-color: transparent; font-weight: 600; }
details.entscheiden summary { list-style: none; cursor: pointer; }
details.entscheiden summary::-webkit-details-marker { display: none; }
details.entscheiden[open] form { margin-top: 6px; min-width: 220px; }
.chance { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.chance.hoch { background: var(--gruen-hg); color: var(--gruen); } .chance.mittel { background: var(--gelb-hg); color: var(--gelb); }
.chance.niedrig, .chance.gesperrt { background: var(--rot-hg); color: var(--rot); }
.wochen { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; margin-top: 8px; }
.wochen span { text-align: center; padding: 6px 0; border-radius: 6px; font-size: .74rem; line-height: 1.2; }
.wochen .frei { background: var(--gruen-hg); color: var(--gruen); } .wochen .knapp { background: var(--gelb-hg); color: var(--gelb); }
.wochen .voll { background: var(--rot-hg); color: var(--rot); }
.urlaub-wunsch { border-left: 4px solid var(--linie); padding: 8px 12px; margin: 8px 0; border-radius: 6px; background: var(--hg); }
.urlaub-wunsch.genehmigt { border-left-color: var(--gruen); } .urlaub-wunsch.abgelehnt { border-left-color: var(--rot); }

/* 6f – Unfallauswertung */
.mini-saeulen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; min-height: 120px; }
.mini-saeulen > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.mini-balken { display: block; width: 70%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--primaer); }
.mini-zahl { font-size: .72rem; color: var(--leise); }
.mini-saeulen small { font-size: .7rem; color: var(--leise); }

/* Etappe 6g: Unterschriften und Schriftform */
.sig-vorschau { margin: 4px 0 8px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background:
  repeating-linear-gradient(0deg, #fff, #fff 27px, #EEF1F5 27px, #EEF1F5 28px); max-width: 360px; }
.sig-vorschau img { display: block; max-width: 100%; height: 72px; object-fit: contain; object-position: left center; }
.sig-vorschau figcaption { font-size: .8rem; color: var(--leise); border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 4px; }
.sf-vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; }
.sf-karte h2 { margin-bottom: 6px; }
.filterleiste select.auswahl { width: auto; }

/* Etappe 6h: Neu in dieser Version, Versionsverlauf, Updates */
.neu-dialog { max-width: 640px; max-height: calc(100vh - 32px); overflow-y: auto; }
.neu-dialog h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.neu-stern { color: var(--primaer); display: inline-flex; }
.neu-liste { list-style: none; padding: 0; margin: 10px 0 14px; }
.neu-liste li { padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: .92rem; line-height: 1.45; }
.neu-liste li:last-child { border-bottom: 0; }
.neu-liste .badge { margin-right: 6px; }
.versions-karte.aktuell { border-left: 4px solid var(--primaer); }
.versions-karte h2 small { font-weight: 400; font-size: .85rem; }
.update-lauf td { vertical-align: top; }
.pruef-liste { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.pruef-liste li { padding: 1px 0; }
.rueckkehr-karte { border-left: 4px solid #E8A317; }

/* Etappe 6i: Dienstwünsche nach Uhrzeit, Gold/Silber/Bronze, Live-Übersicht */
.dw-anspruch { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dw-anspruch > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dw-stufe { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78rem; font-weight: 600; background: #EEF0F3; color: #374151; }
.dw-stufe.dw-1, .dw-stufe.dw-garantiert { background: #FCEFC7; color: #8A5A00; }
.dw-stufe.dw-2, .dw-stufe.dw-wichtig { background: #E8EBEF; color: #4B5563; }
.dw-stufe.dw-3, .dw-stufe.dw-normal { background: #F3E2D3; color: #7C4A1E; }
.dw-lage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dw-tag { border: 1px solid var(--linie); border-radius: 8px; padding: 6px 8px; font-size: .8rem; background: var(--flaeche); }
.dw-tag.we { background: #F8F9FB; }
.dw-tag.eng { border-color: #E8A317; box-shadow: inset 3px 0 0 #E8A317; }
.dw-datum { color: var(--leise); margin-bottom: 2px; }
.dw-zahlen { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.dw-zahlen b { color: var(--text); }
.dw-angebote { border-left: 4px solid var(--primaer); }
.dw-zeit-reihe { display: flex; gap: 6px; } .dw-zeit-reihe > * { flex: 1; min-width: 0; }
[data-nur-art][hidden] { display: none !important; }

/* Etappe 6j – Route, Halte, Passagierliste */
.halt-karte { border: 1px solid var(--rand, #e4e7ec); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 12px; background: var(--flaeche, #fff); }
.halt-karte.halt-neu { border-style: dashed; }
.halt-karte legend { font-weight: 650; padding: 0 6px; font-size: .92rem; }
.halt-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 14px; }
.halt-raster .halt-reihenfolge { grid-column: span 1; } .halt-raster .halt-art { grid-column: span 2; } .halt-raster .halt-ort { grid-column: span 3; }
.halt-raster .halt-breit { grid-column: span 3; }
.halt-weg { margin-top: 8px; font-size: .84rem; color: var(--rot); }
@media (max-width: 760px) { .halt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .halt-raster .halt-art, .halt-raster .halt-ort, .halt-raster .halt-breit { grid-column: span 2; } }
.route-liste { list-style: none; margin: 0; padding: 0; position: relative; }
.route-liste > li { position: relative; padding: 0 0 12px 30px; }
.route-liste > li::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: -6px; width: 2px; background: var(--rand, #d0d5dd); }
.route-liste > li:last-child::before { display: none; }
.route-punkt { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--flaeche, #fff); border: 3px solid var(--primaer, #1d4ed8);
  font-size: 0; }
.route-liste .art-pause .route-punkt { border-color: var(--gelb, #b54708); }
.route-liste .art-ziel .route-punkt { background: var(--primaer, #1d4ed8); }
.route-abschnitt { font-size: .8rem; color: var(--leise); margin: 0 0 6px; }
.route-zeit { font-variant-numeric: tabular-nums; font-weight: 650; margin-right: 6px; }
.route-summe { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 12px; font-size: .9rem; }
.route-summe strong { font-variant-numeric: tabular-nums; }
.fg-liste td.fg-bord { white-space: nowrap; }
.fg-portal { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fg-portal li { display: flex; align-items: center; gap: 8px; }
.fg-portal form { flex: 1; margin: 0; }
.fg-knopf { width: 100%; display: grid; grid-template-columns: 30px 1fr; align-items: center; text-align: left; gap: 0 10px; padding: 10px 12px; min-height: 48px;
  border: 1px solid var(--rand, #d0d5dd); border-radius: 10px; background: var(--flaeche, #fff); color: inherit; font: inherit; cursor: pointer; }
.fg-knopf small { grid-column: 2; color: var(--leise); }
.fg-haken { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--rand, #98a2b3); display: grid; place-items: center; color: transparent; font-weight: 700; }
.fg-portal li.an-bord .fg-knopf { border-color: var(--gruen, #027a48); background: color-mix(in srgb, var(--gruen, #027a48) 8%, var(--flaeche, #fff)); }
.fg-portal li.an-bord .fg-haken { background: var(--gruen, #027a48); border-color: var(--gruen, #027a48); color: #fff; }
.fg-tel { white-space: nowrap; font-size: .85rem; }

/* Etappe 6.1 – Nachrichten im Postfach */
.faden { display: grid; gap: 10px; margin-bottom: 14px; }
.faden-eintrag { background: var(--flaeche, #fff); border: 1px solid var(--rand, #e4e7ec); border-radius: 12px; padding: 10px 14px; max-width: 760px; }
.faden-eintrag.eigen { margin-left: auto; background: color-mix(in srgb, var(--primaer, #6b6b00) 7%, var(--flaeche, #fff)); }
.faden-kopf { font-size: .82rem; color: var(--leise); margin-bottom: 4px; }
.faden-text { white-space: normal; overflow-wrap: anywhere; }
tr.fett td { font-weight: 650; }
.tafel-mt { margin-left: 4px; color: var(--leise); vertical-align: middle; } .tafel-mt:hover { color: var(--primaer); }

/* Stellvertretende Erfassung (6.1b) */
a.kachel-link { display: block; color: var(--text); text-decoration: none; border: 1px solid var(--linie); transition: border-color .15s, box-shadow .15s; }
a.kachel-link:hover { border-color: var(--primaer); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); text-decoration: none; }
a.kachel-link h2 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; }
.vertretung-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius);
  background: #FFF4D6; border: 1px solid #E8C35A; color: #5A4300; }
.vertretung-band form { margin: 0; }
.vertretung-band .knopf { padding: 4px 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vertretung-band { background: #3A3016; border-color: #8A6D1E; color: #F3DFA6; } }
:root[data-theme="dark"] .vertretung-band { background: #3A3016; border-color: #8A6D1E; color: #F3DFA6; }

/* Offene Dienste (6.1d) */
.dp-dienst.offen { background: repeating-linear-gradient(135deg, #FDE2E1 0 6px, #F8C9C6 6px 12px) !important; color: #8A1C14; border: 1px dashed #C0392B; font-weight: 700; }
.dp-dienst.offen.kurz { border-style: solid; box-shadow: 0 0 0 2px rgba(192, 57, 43, .25); }
.dp-offen-i { background: repeating-linear-gradient(135deg, #FDE2E1 0 4px, #F8C9C6 4px 8px) !important; color: #8A1C14; font-style: normal; }
.dp-ls { color: var(--tinte-zweit); font-size: .72rem; }
.pt-block.offen { background: repeating-linear-gradient(135deg, #FDE2E1 0 6px, #F8C9C6 6px 12px) !important; border: 1px dashed #C0392B !important; color: #8A1C14 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dp-dienst.offen, :root:not([data-theme="light"]) .pt-block.offen { background: repeating-linear-gradient(135deg, #4A1F1C 0 6px, #5C2622 6px 12px) !important; color: #FFB4AB !important; } }
:root[data-theme="dark"] .dp-dienst.offen, :root[data-theme="dark"] .pt-block.offen { background: repeating-linear-gradient(135deg, #4A1F1C 0 6px, #5C2622 6px 12px) !important; color: #FFB4AB !important; }

/* Lifestyle (6.1d) */
.lifestyle-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-items: stretch; }
.ls-option { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer; }
.ls-option input { margin: 0 0 4px; }
.ls-option.gewaehlt, .ls-option:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 2px rgba(63, 62, 143, .15); }
.lifestyle-wahl .knopf { align-self: end; }

/* Krankenkasse als Auswahl (6.1f) */
.kassen-text { margin-top: 6px; }

/* Briefausgang (6.1g) */
.sendung { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.sendung:last-child { border-bottom: 0; }
.sendung.fehler { background: rgba(192, 57, 43, .05); }
.sendung-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sendung .knopfreihe form.inline, .sendung details.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.auswahl.klein, .eingabe.klein { padding: 4px 8px; font-size: .85rem; width: auto; }

/* Präsentation zum Blättern (6.1h) */
.lb-folien { margin: 14px 0; }
.folien-band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border: 1px solid var(--linie); border-radius: var(--radius);
  background: #f3f4f6; outline-offset: 2px; -webkit-overflow-scrolling: touch; }
.folien-band .folie { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: flex; align-items: center; justify-content: center; }
.folien-band img { max-width: 100%; max-height: 72vh; height: auto; display: block; user-select: none; }
.folien-leiste { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.folien-stand { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .folien-band { background: #111827; } }
:root[data-theme="dark"] .folien-band { background: #111827; }
/* Etappe 6.2: Schichtbörse, Ersatzkette, Rückruf, Empfangsbestätigung, Fairness-Bericht */
.kette-box { border: 1px solid var(--linie, #E5E7EB); border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: var(--flaeche, #F9FAFB); }
.kette-box.aktiv { border-color: var(--blau); background: var(--blau-hg); }
.kette-schritt { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 6px; border-radius: 6px; background: #fff; border: 1px solid #E5E7EB; }
.kette-schritt.k-zusage { border-color: var(--gruen); color: var(--gruen); } .kette-schritt.k-absage, .kette-schritt.k-abgelaufen { color: #6B7280; }
.kette-schritt.k-offen { border-color: var(--blau); color: var(--blau); }
.kette-start summary { cursor: pointer; }
.anfrage-karte { border-left: 4px solid var(--blau); }
.boerse-hinweis { display: block; text-decoration: none; color: inherit; }
.boerse-karte h2 { margin-bottom: 4px; }
.rueckruf-zeile { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.fair-balken { position: relative; height: 12px; background: #EEF0F4; border-radius: 6px; min-width: 120px; }
.fair-balken .spanne { position: absolute; top: 3px; height: 6px; background: #B7C6E8; border-radius: 3px; }
.fair-balken .median { position: absolute; top: 0; width: 3px; height: 12px; background: var(--blau); border-radius: 2px; }
.fair-balken .anteil { position: absolute; left: 0; top: 0; height: 12px; background: var(--blau); border-radius: 6px; }
.fair-tabelle td.zahl, .fair-tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kette-schritt { background: transparent; } :root:not([data-theme="light"]) .fair-balken { background: #374151; } }
:root[data-theme="dark"] .kette-schritt { background: transparent; } :root[data-theme="dark"] .fair-balken { background: #374151; }
.fair-zelle { min-width: 150px; } .fair-zelle .zahl { font-weight: 600; font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------- Etappe 6.3: Tausch, Änderungsmitteilungen */
.zeile-hervor td { background: var(--gelb-hg); }
.tausch-pruef { margin: 2px 0; } .tausch-pruef small { display: block; color: var(--leise); }
.tausch-entscheid { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .tausch-entscheid .eingabe.klein { max-width: 190px; }
.tausch-angebot { border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; }
.tausch-angebot p { margin: 4px 0; } .tausch-kopf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tausch-angebot select.auswahl { max-width: 100%; flex: 1 1 220px; }
.badge.lila { background: #F1E9FB; color: #6B3FA0; }
.warn-text { color: var(--gelb); }
.auswahl-gruppe { border: 0; padding: 0; margin: 0 0 12px; } .auswahl-gruppe legend { font-weight: 600; margin-bottom: 6px; }
.wahl-karte { display: flex; gap: 8px; align-items: center; border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px; margin: 6px 0; cursor: pointer; }
.wahl-karte:has(input:checked) { border-color: var(--primaer); background: var(--blau-hg); }
.vorverlegt-banner { display: grid; gap: 2px; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--rot); color: #fff;
  text-decoration: none; box-shadow: 0 0 0 3px rgba(198, 40, 40, .25); animation: vv-puls 1.6s ease-in-out 3; }
.vorverlegt-banner:hover { text-decoration: none; color: #fff; }
.vorverlegt-banner .vv-titel { font-weight: 700; font-size: 1.05rem; display: flex; gap: 6px; align-items: center; }
.vorverlegt-banner .vv-zeit { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vorverlegt-banner .vv-aktion { font-size: .88rem; opacity: .92; }
@keyframes vv-puls { 0%, 100% { box-shadow: 0 0 0 3px rgba(198, 40, 40, .25); } 50% { box-shadow: 0 0 0 8px rgba(198, 40, 40, .12); } }
@media (prefers-reduced-motion: reduce) { .vorverlegt-banner { animation: none; } }
.vorverlegt-box { display: grid; gap: 2px; padding: 14px 16px; margin: 0 0 14px; border-radius: var(--radius); border: 2px solid var(--rot); background: var(--rot-hg); color: var(--rot); }
.vorverlegt-box .vv-gross { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mt-liste li.vorverlegt { border-left: 4px solid var(--rot); }
.kat-zeile { margin: 0 0 10px; }
.kat-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--grau-hg); color: var(--text); margin-right: 2px; }
.kat-badge.kat-vorverlegt { background: var(--rot); color: #fff; } .kat-badge.kat-zeit, .kat-badge.kat-tag { background: var(--gelb-hg); color: var(--gelb); }
.kat-badge.kat-fahrzeug { background: var(--blau-hg); color: var(--blau); } .kat-badge.kat-strecke { background: #E6F6F4; color: #0F766E; }
.kat-badge.kat-dienst { background: #F1E9FB; color: #6B3FA0; }
.anlass-wahl.drei { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rueckruf-bitte { border-left: 4px solid var(--blau); } .rueckruf-bitte.dringend { border-left-color: var(--rot); }
.rueckruf-anrufen { margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.rueckruf-antwort { align-items: center; } .inline-details { display: inline-flex; gap: 6px; align-items: center; } .inline-details[open] { flex-wrap: wrap; }
.inline-details > summary { list-style: none; } .inline-details > summary::-webkit-details-marker { display: none; }
.zeiten-karte small + small, .zeiten-karte div small:last-child:not(:first-child) { display: block; font-size: .72rem; color: var(--leise); }
.rueckmeldung-karte { border-left: 4px solid var(--akzent); }
.rm-tag { border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 10px; } .rm-tag legend { font-weight: 600; padding: 0 4px; }
.rm-tabelle .eingabe.klein { max-width: 110px; width: 100%; min-width: 0; padding: 6px 6px; }
.rm-tabelle th, .rm-tabelle td { padding-left: 6px; padding-right: 6px; } .rm-tabelle td:first-child { white-space: nowrap; }
.karte form .rm-tabelle, .karte .rm-tabelle { width: 100%; } .rm-rahmen { overflow-x: auto; } .rm-form { min-width: 0; }
/* Mein Dienst und Leitstelle (6.3f) */
.ueberfall-band { display: flex; gap: 8px; align-items: center; background: var(--rot); color: #fff; padding: 12px 16px; border-radius: var(--radius); margin: 0 0 12px; font-size: 1.05rem; }
.ueberfall-band:hover { color: #fff; text-decoration: none; } .ueberfall-band[hidden] { display: none; }
.md-uhr { font-variant-numeric: tabular-nums; font-weight: 700; }
.md-toast { position: sticky; top: 8px; z-index: 20; background: var(--gruen-hg); color: var(--gruen); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 10px; font-weight: 600; }
.md-toast.fehler { background: var(--rot-hg); color: var(--rot); }
.md-jetzt { border-left: 4px solid var(--blau); } .md-jetzt.md-phase-im { border-left-color: var(--gruen); } .md-jetzt h2 { margin: 6px 0; }
.md-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .md-fz { font-weight: 600; }
.md-zeiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 8px 0; }
.md-zeiten small { display: block; color: var(--leise); font-size: .75rem; } .md-zeiten strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.md-countdown { font-size: 1.05rem; } .md-countdown strong, .md-halt small { font-variant-numeric: tabular-nums; }
.md-melden .md-meldung { margin: 0 0 8px; } .md-meldung > summary { list-style: none; text-align: left; } .md-meldung > summary::-webkit-details-marker { display: none; }
.md-meldung form { display: grid; gap: 8px; padding: 8px 2px 4px; } .md-melden > a.knopf { margin-top: 2px; }
.md-notfall { border: 2px solid var(--rot-hg); }
.md-ueberfall-knopf { width: 100%; padding: 16px; font-size: 1.1rem; font-weight: 800; background: var(--rot); color: #fff; border-color: var(--rot); letter-spacing: .02em; }
.md-dialog { position: fixed; inset: 0; z-index: 60; background: rgba(17, 24, 39, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.md-dialog[hidden] { display: none; } .md-dialog-inhalt { max-width: 440px; width: 100%; display: grid; gap: 10px; }
.md-dialog-inhalt [data-ueberfall-frage], .md-dialog-inhalt [data-ueberfall-gesendet] { display: grid; gap: 10px; }
.md-dialog-inhalt [hidden] { display: none !important; }
.md-halten { position: relative; overflow: hidden; user-select: none; touch-action: none; min-height: 56px; }
.md-halten-balken { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .35); transition: width .05s linear; }
.md-halten span:last-child { position: relative; white-space: normal; line-height: 1.25; }
.md-halten { white-space: normal; height: auto; padding-top: 10px; padding-bottom: 10px; }
.md-halten-balken { background: rgba(198, 40, 40, .18); }
body.md-alarm-laut .md-dialog-inhalt { background: var(--rot); color: #fff; }
.ruf-karte { border-left: 4px solid var(--blau); } .ruf-karte.ruf-dringend { border-left-color: var(--gelb); }
.ruf-karte.ruf-ueberfall { border: 2px solid var(--rot); background: var(--rot-hg); } .ruf-karte.ruf-angenommen { opacity: .92; }
.ruf-kopf { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; } .ruf-aktionen .eingabe { flex: 1 1 260px; }
.stufe-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.stufe-gold { background: #FCEFC7; color: #8A6100; } .stufe-silber { background: #E7EAEE; color: #4B5563; } .stufe-bronze { background: #F6E3D3; color: #8A4B17; }
.vorrang-liste td.zahl { text-align: right; font-variant-numeric: tabular-nums; } .vorrang-liste tr.selbst td { font-weight: 600; background: var(--blau-hg); }

/* Hinweisgebersystem (Etappe 6.3h): öffentliche Seiten und Meldestelle */
body.hg-seite { background: var(--hg); min-height: 100vh; padding: 16px; }
.hg-karte { max-width: 760px; margin: 0 auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten); padding: 22px 24px; }
.hg-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--linie); }
.hg-symbol { font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blau-hg); flex: none; }
.hg-nav { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: .92rem; }
.hg-karte h1 { font-size: 1.4rem; margin: .2rem 0 .6rem; } .hg-karte h2 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; }
.hg-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.hg-weg { display: block; padding: 16px; border: 1px solid var(--linie); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--hg); }
.hg-weg strong { display: block; font-size: 1.05rem; } .hg-weg small { color: var(--leise); }
.hg-weg.primaer { background: var(--primaer); border-color: var(--primaer); color: #fff; } .hg-weg.primaer small { color: rgba(255, 255, 255, .85); }
.hg-weg:hover { filter: brightness(.97); }
.hg-liste { padding-left: 20px; line-height: 1.5; } .hg-liste li { margin: 4px 0; }
.hg-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hg-wahl .wahl { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 10px; cursor: pointer; }
.hg-code { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; }
.hg-code > div { border: 2px dashed var(--primaer); border-radius: 12px; padding: 12px 14px; }
.hg-code small { display: block; color: var(--leise); } .hg-code strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.35rem; letter-spacing: .06em; word-break: break-all; }
.hg-stand { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.hg-stand > div { background: var(--hg); border-radius: 10px; padding: 10px 12px; } .hg-stand small { display: block; color: var(--leise); }
.hg-kopfzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.hg-verlauf { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.hg-nachricht { max-width: 88%; padding: 10px 12px; border-radius: 12px; background: var(--hg); border: 1px solid var(--linie); }
.hg-nachricht.eigen { align-self: flex-end; background: var(--blau-hg); border-color: #C9DAF6; }
.hg-nachricht small { color: var(--leise); } .hg-nachricht p { margin: 4px 0 0; white-space: normal; }
.hg-meldung { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; } .hg-meldung summary { cursor: pointer; font-weight: 600; }
.hg-fuss { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--linie); font-size: .8rem; color: var(--leise); text-align: center; }
.hg-fristen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.hg-text { white-space: normal; line-height: 1.5; margin-bottom: 10px; }
.hg-dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; margin: 0; } .hg-dl dt { color: var(--leise); } .hg-dl dd { margin: 0; }
.hg-anlagen, .hg-vermerke { list-style: none; padding: 0; margin: 0 0 10px; } .hg-anlagen li, .hg-vermerke li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.hg-aktion textarea { width: 100%; margin-bottom: 8px; }
.hg-qr { width: 220px; height: 220px; display: block; margin: 6px 0 10px; }
@media (max-width: 640px) { .hg-karte { padding: 16px; } .hg-nav { margin-left: 0; } .hg-dl { grid-template-columns: 1fr; } .hg-nachricht { max-width: 100%; } }
@media print { body.hg-seite { background: #fff; padding: 0; } .hg-nav, .hg-fuss, .knopfreihe { display: none; } .hg-karte { border: 0; box-shadow: none; } }

/* ------------------------------------------------------------------ Abrechnung und Kasse (6.4) */
.ab-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ab-kopf h2 { margin: 0; }
.ab-schicht .ab-schnell, .ab-schnell { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ab-schnell .knopf { flex: 1 1 140px; justify-content: center; }
.ab-zahl { font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ab-gross { font-size: 1.6rem; font-weight: 700; }
.ab-liste { list-style: none; margin: 0; padding: 0; }
.ab-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.ab-liste li:last-child { border-bottom: 0; }
.ab-liste li > a { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; color: inherit; text-decoration: none; }
.ab-liste li > a:hover strong { text-decoration: underline; }
.ab-rechts { text-align: right; white-space: nowrap; }
.ab-fahrten-kurz { list-style: none; margin: 8px 0; padding: 0; }
.ab-fahrten-kurz li a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; margin-bottom: 6px; color: inherit; text-decoration: none; }
.ab-fahrten-kurz li a > span:nth-child(2) { flex: 1; }
.ab-fahrten-kurz li.geplant a { border-color: #E3A008; background: var(--gelb-hg); }
.ab-fahrten-kurz .zeit, .ab-fahrt .zeit { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.2em; }
.ab-fahrt { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.ab-fahrt.geplant { border-color: #E3A008; background: color-mix(in srgb, var(--gelb-hg) 60%, #fff); }
.ab-fahrt.aus { opacity: .65; }
.ab-fahrt-kopf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ab-fahrt-werte { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .9rem; color: var(--leise); }
.ab-fahrt-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ab-fahrt-knoepfe form { display: flex; gap: 6px; flex-wrap: wrap; }
.ab-bargeld { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.ab-bargeld small { display: block; color: var(--leise); font-size: .8rem; }
.ab-bargeld strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ab-rw { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: .92rem; }
.ab-rw td { padding: 6px 4px; border-bottom: 1px solid var(--linie); }
.ab-rw td.z { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ab-rw .ergebnis td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid var(--text); border-bottom: 0; }
.ab-gesamt { font-size: 1.1rem; margin: 8px 0; }
.ab-gesamt strong { font-size: 1.3rem; }
.ab-befunde { list-style: none; margin: 8px 0; padding: 0; }
.ab-befunde li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.ab-befunde li:last-child { border-bottom: 0; }
.ab-befunde .punkt { flex: 0 0 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--leise); }
.ab-befunde li.rot .punkt { background: var(--rot); } .ab-befunde li.gelb .punkt { background: #E3A008; } .ab-befunde li.info .punkt { background: var(--primaer); }
.ab-befunde li > div { flex: 1; min-width: 0; }
.ab-befunde p { margin: 0 0 4px; }
.ab-befunde textarea { width: 100%; }
.ab-achtung { border-left: 4px solid #E3A008; }
.ab-stopp { font-size: 1.02rem; border: 2px solid var(--rot); }
.ab-zz { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; margin: 6px 0; }
.ab-zz strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ab-zz-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.ab-arten { margin-bottom: 12px; }
.ab-fg { font-size: 1.05rem; }
.ab-suche { display: flex; gap: 8px; }
.ab-suche .eingabe { flex: 1; }
.ab-neu > summary { list-style: none; cursor: pointer; margin: 8px 0; display: block; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }
.ab-neu[open] > summary { background: var(--hg); }
.ab-neu form button[type=submit], .ab-neu form > .knopf.primaer { margin-top: 12px; }
.ab-neu > summary::-webkit-details-marker { display: none; }
.ab-verwerfen { text-align: center; margin: 8px 0 20px; }
.ab-stueckelung { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; }
.ab-stueckelung label { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.ab-stueckelung label span { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.ab-stueckelung .eingabe { padding: 6px; }
.ab-diff { font-size: 1.4rem; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.ab-diff.rot { color: var(--rot); } .ab-diff.gelb { color: #B45309; } .ab-diff.gruen { color: var(--gruen); }
.ab-sigs { display: flex; flex-wrap: wrap; gap: 16px; }
.ab-sigs figure { margin: 0; flex: 1 1 220px; }
.ab-sigs img { max-width: 100%; max-height: 110px; border-bottom: 1px solid var(--text); }
.ab-sigs figcaption { font-size: .8rem; color: var(--leise); }
.ab-woche td, .ab-woche th { white-space: nowrap; font-size: .82rem; padding: 6px 8px; }
.ab-vo { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.ab-vo:last-child { border-bottom: 0; }
.ab-fahrt-kurz { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.ab-feedback { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.ab-unfall { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fuss-feedback { font-weight: 600; }
.status-leiste.ab-sa li { font-size: .85rem; }
@media (max-width: 640px) {
  .ab-liste li { align-items: flex-start; }
  .ab-bargeld strong { font-size: 1.25rem; }
  .ab-fahrt-knoepfe .knopf { flex: 1 1 auto; }
}
.ab-belegnr { margin: .6rem 0 0; padding: .55rem .75rem; border: 1px dashed var(--linie); border-radius: 8px; font-size: .95rem; }
.ab-belegnr strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; font-size: 1.05rem; }
.ab-befunde li.rot:not(.sperrt) .punkt { background: transparent; border: 3px solid var(--rot); box-sizing: border-box; }
.ab-pruef-zahl { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.ab-fahrt-form .karte > .feld + .felder, .ab-fahrt-form .karte > .ab-art + .feld { margin-top: 12px; }
/* Adresssuche (6.5) */
.adress-feld { position: relative; }
.adress-feld > input { padding-right: 34px; }
.adress-stand { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: .95rem; pointer-events: none; }
.adress-stand.ok { color: var(--gruen, #1a7f37); } .adress-stand.offen { color: var(--leise); }
.adress-vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; list-style: none; margin: 0; padding: 4px 0; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 24, 40, .14); max-height: 320px; overflow-y: auto; }
.adress-vorschlaege li { padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.adress-vorschlaege li small { color: var(--leise); font-size: .75rem; }
.adress-vorschlaege li:hover, .adress-vorschlaege li.aktiv { background: var(--hg); }
.adress-vorschlaege li.hinweis-zeile { cursor: default; font-size: .72rem; color: var(--leise); border-top: 1px solid var(--linie); }
.ab-strecke { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; padding: 10px 12px; background: var(--hg); border-radius: 10px; }
.ab-strecke .km { font-weight: 700; font-variant-numeric: tabular-nums; }
.knopf.nav { display: inline-flex; align-items: center; gap: 6px; }
.ab-fahrt-weg { font-size: .88rem; margin: 2px 0 6px; overflow-wrap: anywhere; }
.ab-tx-summe { font-weight: 600; margin: 4px 0 10px; }
/* Startmaske der Schicht mit Halte-Knopf (6.5) */
.ab-start { padding-bottom: 8px; }
.ab-start-kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.ab-start-kopf h2 { margin: 0; }
.ab-start-kopf p { margin: 2px 0 0; }
.ab-start-symbol { flex: 0 0 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blau-hg); color: var(--primaer); }
.ab-start-form .ab-km-letzter { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 10px;
  background: var(--hg); border-radius: 10px; font-size: .9rem; }
.ab-start-form .ab-km-letzter strong { font-variant-numeric: tabular-nums; }
.ab-foto-knopf { display: flex !important; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px dashed var(--linie); border-radius: 12px;
  cursor: pointer; font-weight: 600; }
.ab-foto-knopf small { margin-left: auto; font-weight: 500; color: var(--leise); }
.ab-foto-eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }   /* das Feld bedient die Beschriftung darüber */
.feld:focus-within > .ab-foto-knopf { outline: 3px solid var(--blau); outline-offset: 2px; }
.ab-foto-knopf:has(+ .ab-foto-eingabe:invalid:not(:placeholder-shown)) small { color: var(--rot); }
.halteknopf { position: relative; display: block; width: 172px; height: 172px; margin: 18px auto 6px; padding: 0; border: 0; border-radius: 50%;
  background: var(--primaer); color: #fff; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 10px 26px rgba(16, 24, 40, .22); transition: transform .15s ease, box-shadow .15s ease; }
.halteknopf svg.halte-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.halteknopf .halte-ring circle { fill: none; stroke-width: 8; }
.halteknopf .spur { stroke: rgba(255, 255, 255, .25); }
.halteknopf .ring { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .05s linear; }
.halteknopf .halte-innen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 4px; }
.halteknopf strong { font-size: 1.15rem; }
.halteknopf small { font-size: .78rem; opacity: .9; }
.halteknopf.haelt { transform: scale(.96); box-shadow: 0 4px 14px rgba(16, 24, 40, .25); }
.halteknopf.fertig { background: var(--gruen); }
.halteknopf:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; }
.ab-halte-hilfe { text-align: center; }
.ab-frei { opacity: .95; }
.ab-fahrten-kurz li { position: relative; }
.ab-nav-mini { position: absolute; right: -4px; top: -10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche);
  border: 1px solid var(--linie); box-shadow: 0 2px 6px rgba(16, 24, 40, .12); }
@media (prefers-reduced-motion: reduce) { .halteknopf { transition: none; } }
.md-schaden-liste { list-style: none; margin: 6px 0 10px; padding: 0; }
.md-schaden-liste li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.md-schaden-liste li:last-child { border-bottom: 0; }
.md-schaden-liste li.behoben { opacity: .7; }
.md-schaden-liste p { margin: 6px 0 2px; }
.md-schaden-kopf { display: flex; gap: 6px; flex-wrap: wrap; }
.ls-balken { height: 8px; border-radius: 4px; background: var(--hg); overflow: hidden; margin: 4px 0 2px; }
.ls-balken span { display: block; height: 100%; background: var(--primaer); border-radius: 4px; }

/* Mitarbeiterportal: untere Leiste mit „Mehr“ (Etappe 6.5) */
.portal-mehr { display: none; }
@media (max-width: 860px) {
  .portal-leiste a, .portal-leiste button.pl-mehr { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem;
    color: var(--leise); padding: 4px 0; background: none; border: 0; font: inherit; font-size: .72rem; cursor: pointer; min-height: 48px; justify-content: center; }
  .portal-leiste a.aktiv, .portal-leiste button.pl-mehr.aktiv, .portal-leiste button.pl-mehr[aria-expanded="true"] { color: var(--primaer); font-weight: 650; }
  .portal-leiste a.aktiv::before, .portal-leiste button.pl-mehr.aktiv::before { content: ""; position: absolute; top: -6px; left: 28%; right: 28%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--primaer); }
  .portal-leiste span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .pl-zahl { position: absolute; top: 0; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--rot, #B91C1C);
    color: #fff; font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center; }
  .portal-mehr { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, 0); transition: background .18s; }
  .portal-mehr[hidden] { display: none; }
  .portal-mehr.offen { background: rgba(15, 23, 42, .45); }
  .pm-blatt { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; background: var(--flaeche);
    border-radius: 18px 18px 0 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .18s ease-out;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); }
  .portal-mehr.offen .pm-blatt { transform: none; }
  .pm-kopf { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 0 8px; background: var(--flaeche); z-index: 1; }
  .pm-griff { position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--linie); }
  .pm-zu { border: 0; background: var(--hg); width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem; line-height: 1; color: var(--text); cursor: pointer; }
  .pm-gruppe h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin: 14px 2px 8px; font-weight: 650; }
  .pm-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pm-kachel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px;
    border: 1px solid var(--linie); border-radius: 12px; color: var(--text); text-align: center; font-size: .8rem; line-height: 1.25; background: var(--flaeche); }
  .pm-kachel:hover { text-decoration: none; border-color: var(--primaer); }
  .pm-kachel svg { color: var(--primaer); }
  .pm-kachel.aktiv { border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 9%, var(--flaeche)); font-weight: 650; }
  .pm-kachel .pl-zahl { top: 6px; left: auto; right: 6px; }
  body.pm-offen { overflow: hidden; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .portal-mehr, .pm-blatt { transition: none; } }
@media (max-width: 860px) { .portal-tabs.portal-leiste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.ab-start-form .feld { position: relative; }
.halteknopf small { color: rgba(255, 255, 255, .88); }

/* Benachrichtigungswege (Etappe 6.5.1) */
.wege-wahl label.wahl { padding: 5px 12px; }
.wege-liste { list-style: none; margin: 0 0 8px; padding: 0; }
.wege-liste li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.wege-liste li:last-child { border-bottom: 0; }
.wege-chips .badge { margin-right: 2px; }
.wege-liste .wege-fehlt { color: var(--gelb); }
.wege-wahl { margin: 4px 0; }

/* GBU-Assistent (geführte Betriebsbefragung) */
.af-fortschritt { height: 6px; border-radius: 4px; background: var(--grau-hg); overflow: hidden; margin: 2px 0 10px; }
.af-fortschritt span { display: block; height: 100%; background: var(--primaer); border-radius: 4px; transition: width .2s; }
.af-schritte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.af-chip { font: inherit; font-size: .82rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--leise); cursor: pointer; }
.af-chip:hover { border-color: var(--primaer); color: var(--primaer); }
.af-chip.fertig { color: var(--gruen); border-color: #BFE3C8; background: var(--gruen-hg); }
.af-chip.fertig::before { content: "✓ "; }
.af-chip.aktuell { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.af-karte h2 { margin-top: 0; }
.af-frage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linie); }
.af-karte > p + .af-frage, .af-karte > h2 + .af-frage { border-top: 0; }
.af-frage.folge { margin-left: 18px; padding-left: 14px; border-left: 3px solid var(--blau-hg); border-top-style: dashed; }
.af-text { font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.af-text .badge { align-self: flex-start; font-weight: 600; }
.af-hilfe { font-weight: 400; }
.af-jn { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; background: var(--flaeche); }
.af-jn label { position: relative; padding: 7px 20px; cursor: pointer; font-weight: 650; min-width: 64px; text-align: center; user-select: none; }
.af-jn label + label { border-left: 1px solid var(--linie); }
.af-jn input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.af-jn label:has(input:checked) { background: var(--primaer); color: #fff; }
.af-jn label:has(input[value="nein"]:checked) { background: var(--dunkel); }
.af-jn label:focus-within { outline: 2px solid var(--primaer); outline-offset: -3px; }
.af-optionen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 10px; }
.af-optionen label { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; background: var(--flaeche); }
.af-optionen label:has(input:checked) { border-color: var(--primaer); background: var(--blau-hg); }
.af-optionen input { margin-top: 3px; }
.af-zahl { width: 110px; }
.af-fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.af-fuss .primaer { margin-left: auto; }
.af-feld { display: block; font-weight: 600; margin: 4px 0 6px; }
.af-rueckfragen { display: grid; gap: 10px; margin-bottom: 12px; }
.af-rueckfrage label { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.af-bestaetigen { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 10px; font-size: .9rem; }
.af-ablauf { margin: 14px 0 0; padding-left: 22px; } .af-ablauf li { margin-bottom: 4px; }
.af-vorschlag { padding: 12px 0; border-top: 1px solid var(--linie); }
.af-vorschlag:first-of-type { border-top: 0; }
.af-vorschlag-kopf { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.af-vorschlag-kopf .auswahl { max-width: 420px; }
.af-wahl { display: flex; gap: 8px; align-items: center; }
.af-gruende { margin: 6px 0 2px 26px; display: flex; flex-wrap: wrap; gap: 4px; }
.af-details { margin: 4px 0 0 26px; } .af-details summary { cursor: pointer; color: var(--primaer); font-size: .9rem; }
.af-punkte { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; } .af-punkte li { margin-bottom: 3px; }
.af-pflichten td:first-child { width: 28px; }
.af-abdeckung { list-style: none; margin: 0; padding: 0; }
.af-abdeckung li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--linie); }
.af-abdeckung li:first-child { border-top: 0; }
.af-abd-name { flex: 1; min-width: 0; }
.af-abd-wert { color: var(--leise); font-size: .88rem; text-align: right; }
.af-abdeckung li.rot .af-abd-wert strong { color: var(--rot); }
.gbu-abdeckung { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.gbu-abdeckung li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linie); font-size: .82rem; background: var(--flaeche); }
.gbu-ki { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gbu-ki .af-bestaetigen { margin: 0 0 4px; flex-basis: 100%; }
.fassung-aenderungen { margin: 0; padding-left: 18px; } .fassung-aenderungen li { margin-bottom: 4px; }
@media (max-width: 640px) {
  .af-frage { grid-template-columns: 1fr; }
  .af-frage.folge { margin-left: 6px; }
  .af-jn { justify-self: start; }
  .af-gruende, .af-details { margin-left: 0; }
}
.gbu-ki p { flex-basis: 100%; margin: 0 0 4px; }
.gbu-abd-kopf { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; justify-content: space-between; }
.gbu-abd-kopf h2 { margin-top: 0; } .gbu-abd-kopf p { margin: 0; max-width: 820px; }
.af-schon { margin: 10px 0 0; }
.af-schon .tabelle-rahmen { margin-top: 8px; }
.gbu-ki-karte { margin-top: 18px; } .gbu-ki-karte h2 { margin-top: 0; }
@media (max-width: 640px) {
  .af-schritte { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .af-chip { white-space: nowrap; flex: 0 0 auto; }
}
.gbu-umsetzung { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 10px; align-items: end; margin-top: 8px; padding: 8px 10px;
  border-radius: 8px; background: var(--grau-hg); }
.gbu-umsetzung label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--leise); font-weight: 600; }
.gbu-umsetzung .breit2 { grid-column: span 2; }
.gbu-umsetzung.ueberfaellig { background: var(--rot-hg); }
@media (max-width: 900px) { .gbu-umsetzung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 6.7: wiederkehrende Dienste „zu verplanen“ und Dienstplanwalze */
.rd-steuerung { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dienstplan tr.rd-kopf td { background: var(--gelb-hg); font-size: .78rem; text-align: center; }
.dienstplan tr.rd-kopf td.name { text-align: left; }
.dienstplan tr.rd-kopf td.ok { color: var(--gruen); }
.dienstplan tr.rd-zeile td { background: var(--flaeche); }
.dienstplan tr.rd-zeile td.name a { color: var(--text); }
.dienstplan tr.rd-zeile:last-of-type td { border-bottom: 2px solid var(--linie); }
.rd-zelle { text-align: center; }
.rd-zelle.kein { background: var(--grau-hg) !important; }
.dp-regel { display: inline-block; min-width: 30px; padding: 3px 5px; border-radius: 5px; font: inherit; font-weight: 700; font-size: .74rem; color: var(--gelb);
  background: var(--gelb-hg); border: 2px dashed var(--gelb); cursor: pointer; }
button.dp-regel:hover, button.dp-regel:focus-visible { filter: brightness(.96); outline: 2px solid var(--primaer); outline-offset: 1px; }
.rd-besetzt { font-size: .74rem; color: var(--leise); white-space: nowrap; }
.rd-besetzt.entwurf { font-style: italic; }
.rd-menue { width: 370px; max-width: calc(100vw - 16px); }
.rd-kandidaten { list-style: none; margin: 8px 0; padding: 0; max-height: 300px; overflow-y: auto; }
.rd-kandidaten li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--linie); }
.rd-kandidaten li small { flex-basis: 100%; font-size: .74rem; }
.rd-kandidaten li.ampel-rot button { opacity: .75; }
.rd-vorschau td.rd-stand { font-size: .78rem; text-align: center; }
.rd-vorschau td.zu { background: var(--gelb-hg); }
.rd-vorschau td.kein, .rd-vorschau td.ausfall { color: var(--schwach); }
.walze-raster td { padding: 3px; min-width: 120px; }
.walze-raster select.walze-wahl { width: 100%; font-size: .78rem; padding: 3px 4px; }
.walze-raster th { white-space: nowrap; }
.walze-vorschau td { text-align: center; font-size: .74rem; font-weight: 650; min-width: 30px; }
.walze-vorschau td.aus { background: var(--grau-hg); }
.kennzahlen-zeile { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; margin: 4px 0 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dp-regel { color: #F3DFA6; background: #3A3016; border-color: #C9A227; } }
:root[data-theme="dark"] .dp-regel { color: #F3DFA6; background: #3A3016; border-color: #C9A227; }
@media (max-width: 640px) { .walze-raster td { min-width: 92px; } .rd-steuerung { width: 100%; } }
.rd-zelle.vergangen { background: var(--grau-hg) !important; }
.passkey-anmeldung { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 14px; text-align: center; }
.pruefer-band { background: var(--blau-hg); color: var(--blau); text-align: center; font-weight: 650; font-size: .85rem; padding: 6px 12px; border-bottom: 1px solid var(--linie); }
.tabelle .balken { height: 6px; background: var(--grau-hg); border-radius: 4px; overflow: hidden; max-width: 260px; margin-top: 4px; }
.tabelle .balken span { display: block; height: 100%; background: var(--primaer); }
.af-wahl-reihe { display: flex; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ 6.8 Werkstatt und Fuhrpark: Symbolbild, Board, Verbrauch */
.symbolbild { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 8px; }
.sb-ansicht { margin: 0; background: var(--grau-hg); border: 1px solid var(--linie); border-radius: 10px; padding: 6px 8px 4px; grid-column: span 2; }
.sb-ansicht.sb-schmal { grid-column: span 1; }
.symbolbild.kompakt .sb-schmal .sb-svg { max-height: 120px; }        /* Lineva: Front, Heck, Dach und Innenraum flacher */
.sb-ansicht figcaption { font-size: .78rem; color: var(--leise); margin-bottom: 2px; }
.sb-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sb-waehlen .sb-svg { cursor: crosshair; }
.sb-svg:focus-visible, .sb-marker:focus-visible { outline: 3px solid var(--primaer); outline-offset: 2px; border-radius: 6px; }
.sb-koerper { fill: var(--flaeche); stroke: #667085; stroke-width: 2; }
.sb-glas { fill: #D6E4F5; stroke: #667085; stroke-width: 1.2; }
.sb-rad { fill: #344054; } .sb-nabe { fill: #98A2B3; }
.sb-licht { fill: #FDE68A; stroke: #B45309; stroke-width: 1; }
.sb-tuer { fill: none; stroke: #667085; stroke-width: 1.4; stroke-dasharray: 4 3; }
.sb-linie { stroke: #98A2B3; stroke-width: 1.4; fill: none; } .sb-linie-f { fill: none; stroke: #98A2B3; stroke-width: 1.4; }
.sb-sitz { fill: #E4E7EC; stroke: #98A2B3; stroke-width: 1; } .sb-sitz.sb-fahrer { fill: #CBD5E1; }
.sb-marker { cursor: pointer; }
.sb-marker circle { stroke: #fff; stroke-width: 2.5; }
.sb-marker text { fill: #fff; font: 700 11px var(--schrift); text-anchor: middle; pointer-events: none; }
.sb-marker:hover circle { stroke: var(--text); }
.sb-rot circle, .sb-nr.sb-rot, .sb-punkt.sb-rot { fill: #C62828; background: #C62828; }
.sb-gelb circle, .sb-nr.sb-gelb, .sb-punkt.sb-gelb { fill: #B45309; background: #B45309; }
.sb-hinweis circle, .sb-nr.sb-hinweis, .sb-punkt.sb-hinweis { fill: #475467; background: #475467; }   /* gemeldet, fahrbereit */
.sb-blau circle, .sb-nr.sb-blau, .sb-punkt.sb-blau { fill: #1F5FBF; background: #1F5FBF; }
.sb-gruen circle, .sb-nr.sb-gruen, .sb-punkt.sb-gruen { fill: #1A7F37; background: #1A7F37; }
.sb-grau circle, .sb-nr.sb-grau { fill: #667085; background: #667085; }
.sb-neu circle { fill: rgba(63, 62, 143, .18); stroke: var(--primaer); stroke-width: 3; stroke-dasharray: 5 3; }
.sb-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 0 0 6px; }
.sb-legende .sb-leg { display: inline-flex; align-items: center; white-space: nowrap; }
.sb-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.sb-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; color: #fff; font-size: .78rem; font-weight: 700; }
.sb-liste { display: grid; gap: 6px; }
.sb-eintrag { border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; background: var(--flaeche); transition: box-shadow .3s; }
.sb-eintrag summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sb-eintrag .sb-detail { margin-top: 6px; }
.sb-hervor { box-shadow: 0 0 0 3px var(--primaer); }
.sb-fotos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.sb-fotos a { position: relative; display: block; }
.sb-fotos img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); background: var(--grau-hg); }
.sb-fotos .badge { position: absolute; left: 4px; bottom: 4px; }
.sb-karte > summary { cursor: pointer; list-style: none; }
.box-leise { background: var(--grau-hg); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.wahl-spalte { display: grid; gap: 4px; }
.inline-form > .eingabe, .inline-form > .auswahl { width: auto; }
.tabelle.kopf-umbruch th { white-space: normal; vertical-align: bottom; }
.tabelle tr.gruppe th { background: var(--grau-hg); text-align: left; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--text); padding-top: 10px; }
.filterleiste > .felder { flex: 1 1 560px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px 14px; align-items: end; }
.filterleiste > .felder .schalter-feld { align-self: center; }
.tabelle td.kz, .tabelle td.zahl { white-space: nowrap; }
.ws-board { display: grid; grid-template-columns: repeat(6, minmax(148px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ws-spalte { background: var(--grau-hg); border-radius: 10px; padding: 8px; min-height: 80px; }
.ws-spalte h3 { font-size: .86rem; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
.ws-karte { display: grid; gap: 2px; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid #98A2B3; border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; color: var(--text); }
.ws-karte:hover { box-shadow: var(--schatten); }
.ws-karte.gesperrt { border-left-color: #C62828; }
.ws-neu .ws-karte { border-left-color: #D9480F; } .ws-freigabe .ws-karte { border-left-color: #B45309; } .ws-arbeit .ws-karte { border-left-color: #1F5FBF; }
.ws-fertig .ws-karte { border-left-color: #1A7F37; opacity: .85; }
.ws-text { font-size: .86rem; }
tr.storniert td { color: var(--schwach); text-decoration: line-through; } tr.storniert td:last-child, tr.storniert td:nth-last-child(2) { text-decoration: none; }
.verbrauch-diagramm { padding: 8px 4px 0; border-radius: 10px; margin-bottom: 8px; }
.verbrauch-diagramm .balken { fill: var(--serie-1); } .verbrauch-diagramm g:hover .balken { opacity: .8; }
.verbrauch-diagramm .basislinie { stroke: var(--basislinie); stroke-width: 1; }
.verbrauch-diagramm .soll-linie { stroke: var(--tinte-zweit); stroke-width: 1.2; stroke-dasharray: 5 4; }
.verbrauch-diagramm .beschriftung { font-size: 12px; }
.verbrauch-diagramm .wert { font-size: 12px; }
.verbrauch-diagramm .diagramm-svg { max-height: 240px; }
.kacheln.kpi a.kachel { color: inherit; } .kacheln.kpi a.kachel:hover { box-shadow: var(--schatten); }
.kacheln.kpi .kachel.rot { border-color: #F1B8B8; background: var(--rot-hg); } .kacheln.kpi .kachel.gelb { border-color: #F3DFA6; background: var(--gelb-hg); }
@media (max-width: 640px) { .ws-board { grid-template-columns: repeat(6, 78vw); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sb-koerper { fill: #1F2430; stroke: #98A2B3; }
  :root:not([data-theme="light"]) .sb-glas { fill: #233650; }
  :root:not([data-theme="light"]) .sb-sitz { fill: #2B3240; }
  :root:not([data-theme="light"]) .sb-hinweis circle, :root:not([data-theme="light"]) .sb-nr.sb-hinweis, :root:not([data-theme="light"]) .sb-punkt.sb-hinweis { fill: #7A8699; background: #7A8699; }
}
:root[data-theme="dark"] .sb-koerper { fill: #1F2430; stroke: #98A2B3; }
:root[data-theme="dark"] .sb-glas { fill: #233650; }
:root[data-theme="dark"] .sb-sitz { fill: #2B3240; }
:root[data-theme="dark"] .sb-hinweis circle, :root[data-theme="dark"] .sb-nr.sb-hinweis, :root[data-theme="dark"] .sb-punkt.sb-hinweis { fill: #7A8699; background: #7A8699; }

/* ------------------------------------------------------------------ 6.9 Fuhrpark-Auswertung: Filter, Monatsbalken, Unterzeilen */
.fuhrpark-filter { align-items: flex-end; }
.fuhrpark-filter .schnellwahl { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.af-chip.aktiv { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.tabelle tr.unterzeile td { border-top: 0; padding-top: 0; background: var(--grau-hg); }
.monatsbalken { margin: 4px 0 12px; }
.monatsbalken .legende .punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.serie-leistung { background: var(--serie-1); } .serie-leer { background: var(--serie-1); opacity: .32; }
.mb-reihe { display: flex; gap: 6px; align-items: flex-end; height: 160px; padding-top: 6px; border-bottom: 1px solid var(--basislinie); }
.mb-monat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.mb-monat small { font-size: .72rem; color: var(--tinte-zweit); margin-top: 4px; }
.mb-saeule { flex: 1; width: 100%; max-width: 44px; display: flex; align-items: flex-end; }
.mb-leer { display: flex; align-items: flex-end; width: 100%; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--serie-1) 32%, var(--flaeche)); overflow: hidden; }
.mb-leistung { display: block; width: 100%; background: var(--serie-1); }
.mb-monat:hover .mb-leer { outline: 2px solid var(--serie-1); outline-offset: 1px; }

/* ------------------------------------------------------------------ 7.0 Reisebüro: Sitzplan, Meine Tour */
.sitzplan { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; border: 1px solid var(--linie); border-radius: 18px 18px 10px 10px; background: var(--flaeche); max-width: 100%; overflow-x: auto; }
.sp-front { text-align: center; font-size: .75rem; color: var(--leise); border-bottom: 1px dashed var(--linie); padding-bottom: 4px; margin-bottom: 2px; }
.sp-reihe { display: flex; gap: 5px; }
.sp-sitz { width: 64px; min-height: 40px; border: 1px solid var(--linie); border-radius: 8px 8px 5px 5px; background: var(--flaeche); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: .72rem; line-height: 1.15; text-align: center; padding: 2px; overflow: hidden; }
.sp-sitz b { font-size: .8rem; } .sp-sitz small { color: inherit; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sp-gang { width: 18px; }
.sp-sitz.belegt { background: color-mix(in srgb, var(--primaer) 18%, var(--flaeche)); border-color: color-mix(in srgb, var(--primaer) 45%, var(--linie)); }
.sp-sitz.option { background: var(--gelb-hg); border-color: #F3DFA6; }
.sp-sitz.gesperrt { background: repeating-linear-gradient(45deg, var(--grau-hg), var(--grau-hg) 4px, transparent 4px, transparent 8px); color: var(--leise); }
.sp-sitz.da { background: var(--gruen-hg); border-color: #9BD3AE; }
.sp-sitz.fehlt { background: var(--rot-hg); border-color: #F1B8B8; }
.sp-sitz.spaeter { background: var(--blau-hg); border-color: #B7CCF0; }
.sp-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .74rem; color: var(--leise); margin-top: 6px; }
.sp-legende .sp-sitz { width: 16px; min-height: 12px; display: inline-block; border-radius: 3px; padding: 0; }
@media (max-width: 480px) { .sp-sitz { width: 48px; min-height: 36px; } .sp-sitz small { display: none; } .sp-gang { width: 12px; } }
.tour-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.tour-zahl { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tour-liste { list-style: none; margin: 0; padding: 0; }
.tour-liste li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--linie); }
.tour-liste li .tl-name { flex: 1; min-width: 0; } .tour-liste li .tl-name small { display: block; color: var(--leise); }
.tour-liste li.da .tl-name strong::after { content: " ✓"; color: #15803D; }
.tour-check { min-width: 92px; } .tour-liste li.da .tour-check { background: #15803D; border-color: #15803D; color: #fff; }
.tour-sticky { position: sticky; bottom: 64px; z-index: 5; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px; box-shadow: var(--schatten); }
.tour-abschnitt { border-left: 3px solid var(--primaer); padding: 2px 0 6px 10px; margin: 0 0 10px; }
.tour-abschnitt .ta-zeit { font-weight: 650; font-variant-numeric: tabular-nums; }
#tour-scan-bereich video { width: 100%; max-width: 420px; border-radius: 10px; }

/* ------------------------------------------------------------------ 7.1 Reisebüro: Sitzplan-Grafik, Route, Fahrgastseiten */
.sp-buero { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.sp-klick button.sp-sitz { cursor: pointer; font: inherit; font-size: .72rem; color: inherit; }
.sp-klick button.sp-sitz:hover { outline: 2px solid color-mix(in srgb, var(--primaer) 55%, transparent); outline-offset: 1px; }
.sp-klick button.sp-sitz:focus-visible { outline: 3px solid var(--primaer); outline-offset: 2px; }
.sp-sitz.gewaehlt { box-shadow: 0 0 0 3px var(--primaer); }
.sp-umsetzen .sp-sitz:not(.gesperrt) { border-style: dashed; }
.sp-sitz.gesperrt.g-defekt { background: repeating-linear-gradient(45deg, var(--rot-hg), var(--rot-hg) 4px, transparent 4px, transparent 8px); border-color: #F1B8B8; color: #B42318; }
.sp-sitz.gesperrt.g-reiseleitung, .sp-sitz.gesperrt.g-fahrer, .sp-sitz.gesperrt.g-gaeste { background: repeating-linear-gradient(45deg, var(--blau-hg), var(--blau-hg) 4px, transparent 4px, transparent 8px); border-color: #B7CCF0; color: #1E4FA3; }
.sp-sitz.gesperrt.g-rollstuhl { background: repeating-linear-gradient(45deg, var(--gelb-hg), var(--gelb-hg) 4px, transparent 4px, transparent 8px); border-color: #F3DFA6; color: #8A5A00; }
.sp-panel { flex: 1 1 280px; max-width: 460px; margin: 0; }
.sp-panel h3 { margin-top: 0; }
.rt-liste { list-style: none; margin: 0; padding: 0; }
.rt-liste > li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.rt-liste .rt-nr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: var(--primaer); color: #fff; }
.rt-liste .rt-nr.programm { background: #fff; color: var(--primaer); border: 2px solid var(--primaer); }
.rt-liste .rt-strecke { grid-column: 2 / 4; font-size: .8rem; color: var(--leise); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rt-liste .rt-strecke form { display: inline-flex; gap: 4px; align-items: center; }
.rt-liste .rt-strecke input { width: 70px; padding: 2px 6px; font-size: .8rem; }
.rt-summe { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: .95rem; margin: 4px 0 10px; }
.rt-summe strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.rt-skizze { width: 100%; max-width: 640px; height: auto; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.rt-skizze .rs-linie { fill: none; stroke: var(--primaer); stroke-width: 2; stroke-linejoin: round; }
.rt-skizze .rs-punkt { fill: var(--primaer); stroke: var(--flaeche); stroke-width: 2; }
.rt-skizze .rs-punkt.programm { fill: var(--flaeche); stroke: var(--primaer); stroke-width: 2.5; }
.rt-skizze text { font-size: 11px; fill: var(--text); paint-order: stroke; stroke: var(--flaeche); stroke-width: 3px; }
.rt-skizze .rs-nr { font-size: 9px; font-weight: 700; fill: #fff; stroke: none; text-anchor: middle; dominant-baseline: central; }
.rt-skizze .rs-nr.programm { fill: var(--primaer); }
.tour-meldung { border-left: 4px solid #B42318; background: var(--rot-hg); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.tour-meldung.erledigt { border-left-color: var(--linie); background: var(--grau-hg); opacity: .8; }
.badge-selbst { font-size: .68rem; }
.kalk-tabelle td.zahl, .kalk-tabelle th.zahl { white-space: nowrap; }
.kalk-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.kalk-felder .feld { margin: 0; } .kalk-felder label { display: block; font-size: .85rem; margin-bottom: 3px; }
.kalk-ergebnis .wert.plus { color: #15803D; } .kalk-ergebnis .wert.minus { color: #B42318; }
/* Fahrgastseiten (QR-Codes) – große Bedienelemente */
.rz-seite .hg-karte { max-width: 560px; }
.rz-gross { font-size: 1.1rem; padding: 12px 14px; min-height: 48px; }
button.rz-gross, a.rz-gross { width: 100%; justify-content: center; text-align: center; }
.rz-form .feld { flex-basis: 100%; }
.rz-ok { display: flex; gap: 12px; align-items: center; background: var(--gruen-hg); border: 1px solid #9BD3AE; border-radius: 12px; padding: 14px; margin: 8px 0 12px; font-size: 1.05rem; }
.rz-ok > span { font-size: 1.8rem; color: #15803D; font-weight: 700; }
.rz-notfall { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--grau-hg); }
.rz-notfall h2 { margin-top: 0; }
.rz-wahl { display: flex; flex-direction: column; gap: 8px; } .rz-wahl label { display: flex; gap: 8px; align-items: center; font-size: 1.02rem; padding: 6px 0; }
.rz-wahl input { width: 22px; height: 22px; flex: none; margin: 0; }
.rz-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 8px 0 14px; }
.rz-dl dt { color: var(--leise); font-size: .88rem; padding-top: 2px; } .rz-dl dd { margin: 0; }
.rz-ablauf { list-style: none; padding: 0; margin: 0; } .rz-ablauf li { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.rz-ablauf .rz-zeit { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; }
.rz-telefon { margin: 10px 0 16px; }
@media (max-width: 520px) { .rz-dl { grid-template-columns: 1fr; gap: 2px; } .rz-dl dd { margin-bottom: 8px; } }

/* ------------------------------------------------------------------ 7.2 Reisebüro: Sitzplan je Fahrzeug, Reiseverlauf live */
.sp-leer { width: 64px; min-height: 40px; }
.sp-sonder { width: 64px; min-height: 40px; border: 1px dashed var(--linie); border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; color: var(--leise); background: var(--grau-hg); }
.sp-sonder.sp-tuer { background: transparent; border-style: solid; border-color: #9BD3AE; color: #15803D; }
.sp-sonder.sp-wc { background: var(--blau-hg); } .sp-sonder.sp-treppe { background: var(--gelb-hg); } .sp-sonder.sp-tisch { background: #F3EEE6; }
.sp-trenner { font-size: .75rem; font-weight: 650; color: var(--leise); border-top: 1px dashed var(--linie); padding-top: 4px; margin-top: 4px; }
@media (max-width: 480px) { .sp-leer, .sp-sonder { width: 48px; min-height: 36px; } }
.spe-werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.spe-werkzeuge label { cursor: pointer; } .spe-werkzeuge input { margin-right: 4px; }
.spe-plan .sp-reihe { align-items: center; } .spe-plan button.sp-sitz, .spe-plan button.sp-gang, .spe-plan button.sp-leer, .spe-plan button.sp-sonder { cursor: pointer; font: inherit; font-size: .72rem; }
.spe-plan button.spe-feld { border: 1px dotted var(--linie); background: transparent; border-radius: 6px; min-height: 40px; }
.spe-plan button.sp-gang.spe-feld { background: repeating-linear-gradient(90deg, transparent, transparent 3px, var(--grau-hg) 3px, var(--grau-hg) 4px); }
.spe-reihe-knopf { margin-left: 4px; padding: 2px 7px; min-height: 0; }
.spe-trenner { display: flex; align-items: center; gap: 6px; } .spe-trenner-text { border: 0; background: none; font: inherit; font-weight: 650; color: var(--leise); cursor: pointer; text-decoration: underline dotted; }
.spe-nummer { margin: 6px 0; }
.rk { margin: 16px 0; }
.rk-karte { position: relative; height: 280px; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; background: #EEF1EA; touch-action: none; cursor: grab; user-select: none; }
.rk-karte.ohne-kacheln { background: linear-gradient(var(--linie) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--linie) 1px, transparent 1px) 0 0 / 32px 32px, #F7F8F5; }
.rk-kachel { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.rk-ueber { position: absolute; left: 0; top: 0; pointer-events: none; }
.rk-linie { fill: none; stroke: var(--primaer); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 7 5; opacity: .85; }
.rk-station circle { fill: var(--primaer); stroke: #fff; stroke-width: 2; } .rk-station.programm circle { fill: #fff; stroke: var(--primaer); stroke-width: 2.5; }
.rk-station.erledigt circle { fill: #9CA3AF; stroke: #fff; } .rk-station.naechste circle { stroke: #B45309; stroke-width: 3; }
.rk-station .rk-nr { font-size: 9px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; } .rk-station.programm .rk-nr { fill: var(--primaer); }
.rk-bus rect { fill: #B42318; stroke: #fff; stroke-width: 2; } .rk-bus.plan rect { fill: #fff; stroke: #B42318; stroke-dasharray: 3 2; }
.rk-bus text { font-size: 11px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; } .rk-bus.plan text { fill: #B42318; }
.rk-ich { fill: #1D4ED8; stroke: #fff; stroke-width: 2; } .rk-ich-hof { fill: rgba(29, 78, 216, .15); }
.rk-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.rk-box { border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: var(--flaeche); }
.rk-box.rk-eigen { border-color: #B7CCF0; background: var(--blau-hg); } .rk-box.rk-halt { border-color: #F3DFA6; background: var(--gelb-hg); }
.rk-text { font-weight: 600; }
.rk-stationen { list-style: none; padding: 0; margin: 0; } .rk-stationen li { padding: 4px 0; border-bottom: 1px solid var(--linie); }
.rk-stationen li.erledigt { color: var(--leise); text-decoration: line-through; } .rk-stationen li.naechste { font-weight: 700; }
.tour-teilen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* 7.2.2: Nummer direkt ändern (Reise, Fahrauftrag) und Tachostand-Korrektur in der Fahrzeugakte */
.nr-aendern { font-size: .8rem; font-weight: 500; margin-left: .4rem; white-space: nowrap; vertical-align: middle; }
tr.km-sprung td { background: var(--gelb-hg); }

/* 7.3: Schülerbeförderung (Touren) und Kalkulation */
.tp-farbe { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,.12); }
tr.tp-frei td { color: var(--leise); }
.tp-plan th, .tp-plan td { vertical-align: top; min-width: 112px; }
.tp-plan th.we, .tp-plan td.we { background: #F6F7F9; } .tp-plan th.heute { background: var(--primaer); color: #fff; } .tp-plan td.heute { box-shadow: inset 0 0 0 2px var(--primaer); }
.tp-plan td.vergangen { opacity: .65; }
.tp-plan td.tp-tour { min-width: 170px; position: sticky; left: 0; background: #fff; z-index: 1; }
.tp-rolle { display: flex; align-items: center; gap: 4px; margin: 2px 0; font-size: .82rem; white-space: nowrap; }
.tp-name.entwurf { font-style: italic; color: var(--leise); }
.tp-b { display: inline-block; font-size: .66rem; font-weight: 700; color: var(--blau); background: var(--blau-hg); border-radius: 4px; padding: 0 4px; }
.tp-offen { display: inline-block; font-size: .76rem; font-weight: 600; color: var(--rot); background: var(--rot-hg); border: 1px dashed #F2B8B5; border-radius: 6px; padding: 1px 6px; }
a.tp-offen:hover { text-decoration: none; filter: brightness(.97); }
.tp-weg { border: 0; background: none; color: var(--leise); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.tp-weg:hover { color: var(--rot); }
.tp-frei-text { font-size: .76rem; color: var(--leise); }
.tp-halte input.eingabe, .tp-halte select.auswahl { min-width: 0; width: 100%; }
.tp-halte td:first-child { width: 110px; } .tp-halte tr.tp-neu input { background: #FBFBFC; }
.tp-ein { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-halt h2 { font-size: 1rem; margin-bottom: 4px; }
.st-kind { border-top: 1px solid var(--linie); padding: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; scroll-margin-top: 80px; }
.st-kind.abgemeldet { opacity: .55; } .st-kind.st-fehlt .st-name strong { color: var(--rot); }
.st-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; } .st-knoepfe .knopf { min-height: 40px; }
.kalk .kalk-tab td { font-size: .86rem; } .kalk-tab tr.kalk-gruppe td { background: var(--grau-hg); font-weight: 650; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); }
.kalk-tab tr.kalk-summe td { font-weight: 700; border-top: 2px solid var(--linie); } .kalk-tab tr.kalk-summe.gross td { font-size: 1rem; background: var(--blau-hg); }
.kalk-balken { display: grid; grid-template-columns: 130px 1fr 56px; gap: 8px; align-items: center; margin: 4px 0; font-size: .84rem; }
.kalk-b-bahn { background: var(--grau-hg); border-radius: 4px; height: 10px; overflow: hidden; display: block; }
.kalk-b-bahn span { display: block; height: 100%; background: var(--primaer); border-radius: 4px; }
.kalk-b-wert { text-align: right; font-variant-numeric: tabular-nums; }
.kalk-prozente { display: flex; flex-wrap: wrap; gap: 8px 16px; } .kalk-prozente label { font-size: .86rem; display: flex; align-items: center; gap: 6px; }
.kalk-prozente input { width: 64px; }
@media (max-width: 700px) { .kalk-balken { grid-template-columns: 96px 1fr 48px; } }

/* 7.4 Ausstattung */
.plombe-feld { display: flex; gap: 6px; align-items: center; }
.plombe-feld .eingabe { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.plombe-scan { margin-top: 8px; border: 1px solid var(--linie); border-radius: 10px; padding: 8px; background: var(--grau-hg); }
.plombe-scan video { width: 100%; max-height: 260px; border-radius: 8px; background: #000; object-fit: cover; display: block; }
.plombe-scan p { margin: 6px 0; }
.aus-details { display: block; }
.aus-details > summary { list-style: none; display: inline-flex; }
.aus-details > summary::-webkit-details-marker { display: none; }
.aus-details[open] > summary { margin-bottom: 4px; }
.aus-details-karte > summary { cursor: pointer; }
.aus-liste { list-style: none; margin: 0; padding: 0; }
.aus-liste li { border-bottom: 1px solid var(--linie); }
.aus-liste li:last-child { border-bottom: 0; }
.aus-liste a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; color: inherit; text-decoration: none; }
.aus-liste a:hover strong { text-decoration: underline; }
.kachel .wert.klein { font-size: 1.1rem; }
/* 7.4 GBU: 5 × 5, mehrere Maßnahmen */
.risikomatrix.rm5 th { font-size: .66rem; line-height: 1.15; }
.risikomatrix.rm5 td { height: 34px; padding: 2px; }
.risikomatrix .rm-wert { display: block; font-size: .62rem; color: var(--leise); opacity: .8; line-height: 1; }
.gbu-weitere { margin: 8px 0 0 18px; padding-left: 10px; border-left: 3px solid var(--linie); }
.gbu-wnr { font-weight: 700; color: var(--leise); align-self: center; }
.gbu-neu-massnahme { margin: 8px 0 0 18px; }
.gbu-neu-massnahme > summary { list-style: none; display: inline-flex; }
.gbu-neu-massnahme > summary::-webkit-details-marker { display: none; }
.gbu-massnahme-lesen { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--linie); }
.gbu-massnahme-lesen:first-of-type { border-top: 0; padding-top: 0; }
.gbu-schnitt { line-height: 1.9; }
.tabelle small.kz, small.plombe-nr { white-space: nowrap; }

/* 7.5 Lagerprüfung, Kostenrechnung */
.lgk-tabelle th, .lgk-tabelle td { text-align: center; padding: 3px 4px; font-size: .78rem; min-width: 2.1em; }
.lgk-tabelle td.lgk-ja { background: var(--gruen-hg); color: var(--gruen); }
.lgk-tabelle td.lgk-nein { background: var(--rot-hg); color: var(--rot); }
.lgk-tabelle td.lgk-bed { background: var(--gelb-hg); color: var(--gelb); font-weight: 700; }
.vorschau-text { white-space: pre-wrap; font-size: .82rem; background: var(--flaeche-2, rgba(0,0,0,.03)); padding: 8px; border-radius: 6px; max-height: 320px; overflow: auto; }
.ampel-punkt { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .3em; vertical-align: baseline; }
.ampel-punkt.gruen { background: var(--gruen); } .ampel-punkt.gelb { background: var(--gelb); } .ampel-punkt.rot { background: var(--rot); } .ampel-punkt.grau { background: var(--leise); }
.kosten-tabelle td.zahl { white-space: nowrap; }
.kosten-tabelle td small.umbruch { white-space: normal; display: inline-block; max-width: 12em; line-height: 1.3; }
.kosten-tabelle tr.summe td { font-weight: 700; border-top: 2px solid var(--linie); }
.kosten-tabelle tr.zwischen td { font-weight: 600; background: var(--flaeche-2, rgba(0,0,0,.025)); }
.kosten-tabelle td.neg { color: var(--rot); }
.balken-db { display: inline-block; height: .55em; border-radius: 3px; background: var(--gruen); vertical-align: middle; }
.balken-db.neg { background: var(--rot); }
.tco-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
a.karte.kachel-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.karte.kachel-link:hover, a.karte.kachel-link:focus-visible { border-color: var(--akzent, #1F5FBF); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
a.karte.kachel-link h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
a.karte.kachel-link h2 svg { width: 20px; height: 20px; }
.filterleiste { align-items: end; }

/* 7.6 Druck: Etikettenbogen-Vorschau */
.druck-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .druck-raster { grid-template-columns: 1fr; } }
.bogen-rahmen { max-width: 340px; }
.bogen-vorschau { width: 100%; height: auto; display: block; }
.bogen-vorschau .bogen { fill: var(--flaeche, #fff); stroke: var(--linie, #d1d5db); stroke-width: .6; }
.bogen-vorschau .belegt { fill: var(--serie-1); fill-opacity: .55; stroke: var(--serie-1); stroke-width: .4; }
.bogen-vorschau .frei { fill: var(--linie, #d1d5db); fill-opacity: .7; stroke: none; }
.bogen-vorschau .leer { fill: none; stroke: var(--schwach); stroke-width: .4; stroke-dasharray: 1.5 1; }
.bogen-vorschau .nr { font-size: 4.5px; text-anchor: middle; fill: var(--text, #111827); }
.bogen-legende { display: inline-block; box-sizing: border-box; padding: 0; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-left: 6px; }
.bogen-legende.belegt { background: var(--serie-1); opacity: .7; } .bogen-legende.frei { background: var(--linie, #d1d5db); }
.bogen-legende.leer { border: 1px dashed var(--schwach); padding: 0; }
.format-wahl { display: inline-block; position: relative; vertical-align: middle; }
.format-wahl > summary { list-style: none; cursor: pointer; }
.format-wahl > summary::-webkit-details-marker { display: none; }
.format-menue { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 150px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; display: grid; }
.format-menue a { padding: 6px 10px; border-radius: 6px; color: var(--text); text-decoration: none; white-space: nowrap; font-size: .9rem; }
.format-menue a:hover, .format-menue a:focus { background: var(--hg); }
/* 7.6 Betriebsrat */
.br-karte h2 { display: flex; gap: 8px; align-items: center; }
.br-karte.br-offen { border-left: 4px solid var(--gelb, #d97706); }

/* 7.7 Fahrgastseiten */
.rz-versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rz-wetter ul li { display: flex; justify-content: space-between; gap: 8px; }
.rz-tagebuch article { margin: 10px 0; } .rz-foto { width: 100%; height: auto; border-radius: 8px; display: block; margin: 6px 0; }
.rz-sterne { border: 0; padding: 0; margin: 6px 0; } .rz-sterne legend { font-weight: 600; margin-bottom: 4px; }
.rz-sterne label { display: inline-flex; align-items: center; gap: 4px; margin: 2px 10px 2px 0; color: #B45309; }
.rz-sitzwahl { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; } .rz-reihe { display: flex; gap: 4px; }
.rz-sitz { width: 42px; height: 42px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; font-size: .8rem; line-height: 1; border: 1px solid var(--linie, #d1d5db); }
.rz-sitz.frei { background: #ECFDF5; border-color: #10B981; cursor: pointer; } .rz-sitz.frei small { font-size: .6rem; }
.rz-sitz.belegt { background: var(--linie, #e5e7eb); color: #9CA3AF; } .rz-sitz.mein { background: var(--serie-1, #2563EB); color: #fff; border-color: transparent; font-weight: 700; }
.rz-zelle { width: 42px; height: 42px; display: inline-block; } .rz-zelle.gang { width: 18px; }
.rz-trenner { font-size: .8rem; color: var(--leise); margin-top: 6px; }
.rz-reihe-felder { display: flex; gap: 6px; flex-wrap: wrap; } .rz-reihe-felder .eingabe { flex: 1 1 200px; }
.rz-person[hidden] { display: none; }

/* 7.9: Walze im Portal, Umläufe, Ringtausch, Sprachnachricht */
.walze-woche { margin: 10px 0 14px; } .walze-woche h3 { font-size: 1rem; margin: 0 0 6px; }
.walze-tage { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0; margin: 0; }
.walze-tage li { border: 1px solid var(--linie, #e5e7eb); border-radius: 8px; padding: 6px 4px; text-align: center; font-size: .85rem; display: flex; flex-direction: column; gap: 2px; }
.walze-tage li.aus { opacity: .5; } .walze-tage li span { color: var(--leise, #6b7280); font-size: .75rem; }
.walze-vorschau td.getauscht { outline: 2px dashed var(--serie-2, #059669); outline-offset: -3px; }
.umlauf-tag { margin: 12px 0 18px; } .umlauf-tag h3 { margin: 0 0 6px; font-size: 1rem; }
.ring-vorschlag { border: 1px solid var(--linie, #e5e7eb); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.sprache-aufnahme { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .sprache-aufnahme[hidden] { display: none; }
.sprache-aufnahme .laeuft { color: #B91C1C; font-weight: 700; } .sprache-player { width: 100%; max-width: 360px; height: 36px; }

/* 8.0 Plantafel: Filter, Tageskapazität, freie Zeitfenster, Vorschläge; Dienstplan: mehrere Dienste je Tag */
.tafel-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.tafel-filter .knopf.aktiv { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.tafel-filter input[type=search] { width: 180px; margin-left: 6px; }
.tafel-zeile.versteckt { display: none; }
.tafel-kap { position: relative; display: block; margin-top: 3px; height: 15px; border-radius: 8px; background: #EEF0F3; overflow: hidden; font-size: .68rem; line-height: 15px;
  padding: 0 6px; color: #374151; white-space: nowrap; }
.tafel-kap i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--gruen) 28%, #fff); z-index: 0; }
.tafel-kap.gelb i { background: color-mix(in srgb, #E3A008 35%, #fff); } .tafel-kap.rot i { background: color-mix(in srgb, var(--rot) 30%, #fff); }
.tafel-kap > span { position: relative; z-index: 1; } .tafel-kap b { font-weight: 650; }
.tafel-frei { position: absolute; top: 8px; bottom: 8px; border: 1.5px dashed color-mix(in srgb, var(--gruen) 60%, #fff); border-radius: 6px;
  background: color-mix(in srgb, var(--gruen) 5%, transparent); color: var(--gruen); font-size: .68rem; font-weight: 650; display: flex; align-items: center;
  justify-content: center; text-decoration: none; opacity: .7; z-index: 1; overflow: hidden; white-space: nowrap; }
.tafel-frei:hover { opacity: 1; background: color-mix(in srgb, var(--gruen) 15%, transparent); text-decoration: none; }
.tafel-dienst[draggable=true] { cursor: grab; }
.tafel-vorschlaege { margin-top: 14px; }
.tafel-vorschlaege .tv-zeile { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #EEF0F3; align-items: center; }
.tafel-vorschlaege .tv-personen { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 700px) { .tafel-vorschlaege .tv-zeile { grid-template-columns: 1fr; } }
.dp-menue .dp-vorhanden { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.dp-menue .dp-modus { display: flex; gap: 12px; font-size: .82rem; margin: 2px 0 6px; }

/* 8.1 Erledigte Einträge (Maßnahmen, Aufgaben) deutlich abheben */
.tabelle tr.st-erledigt td { background: var(--gruen-hg); color: #3F5246; }
.tabelle tr.st-erledigt td:first-child { box-shadow: inset 4px 0 0 var(--gruen); }
.tabelle tr.st-erledigt td:first-child a { text-decoration: line-through; text-decoration-color: rgba(22, 128, 61, .55); }
.tabelle tr.st-erledigt .badge.gruen::before { content: '✓ '; }

/* 8.2: RFID-/NFC-Karte im Stempel-Zugang */
.karte-zuordnen label { display: block; font-size: .85rem; color: var(--text-leise, #5b6474); margin-bottom: 4px; }
.karte-zeile { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.karte-zeile input { flex: 1 1 180px; min-width: 0; font: 600 1rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.karte-terminal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.karte-zeile input::placeholder { text-transform: none; font-weight: 400; letter-spacing: normal; font-family: inherit; }

/* 8.3: Exportdialog mit Filtern und Formatsymbolen */
.export-filter .feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.export-filter .feld span { font-size: .85rem; color: var(--text-leise, #5b6474); }
.export-formate { flex-direction: column; }
.export-formate .wahl { display: flex; align-items: center; gap: 10px; }
.format-symbol { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 22px; border-radius: 6px; font-size: .7rem; font-weight: 800;
                 letter-spacing: .04em; color: #fff; background: #1D6F42; }
.format-symbol.pdf { background: #B42318; } .format-symbol.csv { background: #475467; }
.tabelle tfoot tr.summe td { font-weight: 700; border-top: 2px solid var(--linie, #D0D5DD); background: var(--flaeche-leise, #F9FAFB); }

/* 8.3: Schrittweise Einführung */
.ef-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ef-raster { grid-template-columns: minmax(0, 1fr); } }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.karte-kopf h2 { margin: 0; }
.ef-gruppe { margin: 16px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-leise, #667085); }
.ef-liste { display: flex; flex-direction: column; border: 1px solid var(--linie, #EAECF0); border-radius: 12px; overflow: hidden; }
.ef-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--linie, #EAECF0); }
.ef-zeile:first-child { border-top: 0; }
.ef-zeile.aus { background: #FFFAEB; }
.ef-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ef-name small { color: var(--text-leise, #667085); font-size: .8rem; line-height: 1.3; }
.ef-datum { width: 150px; }
.segment { display: inline-flex; border: 1px solid var(--linie, #D0D5DD); border-radius: 10px; overflow: hidden; background: #fff; }
.segment label { position: relative; cursor: pointer; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; padding: 6px 12px; font-size: .85rem; white-space: nowrap; border-left: 1px solid var(--linie, #D0D5DD); }
.segment label:first-child span { border-left: 0; }
.segment input:checked + span { background: var(--primaer, #3F3E8F); color: #fff; font-weight: 600; }
.segment input:focus-visible + span { outline: 2px solid var(--primaer, #3F3E8F); outline-offset: -2px; }
@media (max-width: 720px) { .ef-zeile { grid-template-columns: minmax(0, 1fr); } }
/* 8.3: Druckmappe */
.dm-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.dm-raster h2 { font-size: 1rem; margin: 0 0 8px; }
.dm-raster .wahl { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.dm-form .feld { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dm-form .feld span { font-size: .85rem; color: var(--text-leise, #667085); }
.dm-tag { display: inline-block; min-width: 26px; text-align: center; padding: 1px 4px; margin: 0 2px 2px 0; border-radius: 6px; background: #EEF2FF; font-size: .78rem; }
.dm-tag.heute { background: var(--primaer, #3F3E8F); color: #fff; }
/* 8.3: Kassenbuch */
.kb-filter { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.kb-filter .feld { display: flex; flex-direction: column; gap: 4px; }
.kb-filter .feld > span, .kb-label { font-size: .8rem; color: var(--text-leise, #667085); }
.kb-zeitraum { display: flex; flex-direction: column; gap: 6px; }
.kb-daten { display: flex; align-items: center; gap: 8px; }
.kb-tabelle tr.kb-tag td { background: var(--flaeche-leise, #F9FAFB); border-top: 2px solid var(--linie, #EAECF0); }
.kb-tabelle tr.kb-storniert td { color: var(--text-leise, #98A2B3); }
.kb-tabelle tr.kb-storniert td:nth-child(4) { text-decoration: line-through; }
.badge.kb-einnahme, .badge.kb-einlage { background: #ECFDF3; color: #067647; }
.badge.kb-ausgabe, .badge.kb-bank { background: #FEF3F2; color: #B42318; }
.badge.kb-differenz { background: #FFFAEB; color: #B54708; }
.kb-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.kb-stueck { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.kb-stueck label { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--text-leise, #667085); }
.kb-stueck input { width: 100%; }
.kb-ergebnis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.kb-ergebnis div { background: var(--flaeche-leise, #F9FAFB); border: 1px solid var(--linie, #EAECF0); border-radius: 10px; padding: 8px 12px; }
.kb-ergebnis small { display: block; color: var(--text-leise, #667085); font-size: .78rem; }
.kb-ergebnis strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.kb-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.kb-weg { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linie, #D0D5DD); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.kb-weg:has(input:checked) { border-color: var(--primaer, #3F3E8F); background: #F5F5FF; }
.kb-weg span { display: flex; flex-direction: column; } .kb-weg small { color: var(--text-leise, #667085); }
.gruen-text { color: #067647; } .gelb-text { color: #B54708; }
.tabelle td.z, .tabelle th.z { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kb-tabelle td:nth-child(2) { white-space: nowrap; }
.ef-zeile:not(:has(input[value="ab"]:checked)) .ef-datum { visibility: hidden; }
.kacheln.kpi a.kachel { text-decoration: none; color: inherit; }
.kb-zahlarten { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }

/* 8.3: breite Kontentabellen kompakter, damit Status und Summen hineinpassen */
.tabelle.kompakt th { padding: 9px 8px; letter-spacing: 0; }
.tabelle.kompakt td { padding: 8px 8px; }
.tabelle.kompakt td .badge { white-space: normal; line-height: 1.25; }
.export-filter .feld .auswahl, .export-filter .feld .eingabe { margin: 0; }
.kb-schnell { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-filter .feld { min-width: 150px; } .kb-filter .kb-suche { flex: 1 1 200px; }
.kb-filter > .knopf { height: 40px; }
.kb-tabelle summary { white-space: nowrap; }
.kacheln.kpi.voll { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kb-filter .eingabe, .kb-filter .auswahl { height: 40px; box-sizing: border-box; }

/* 8.4: Auswahlfelder einheitlich – Ankreuz- und Optionsfelder als ausgerichtete Kacheln, Kästchen nie in voller Breite */
input[type=checkbox].eingabe, input[type=radio].eingabe, input.wahl-kasten, .mehrfach input[type=checkbox], .mehrfach input[type=radio] { width: auto; padding: 0; }
.feld-titel { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; color: #344054; }
.wahl-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 6px 8px; }
.feld .wahl-kacheln label, .wahl-kacheln label { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 8px 11px; border: 1px solid #D0D5DD; border-radius: 9px;
  background: #fff; font-weight: 450; font-size: .9rem; line-height: 1.3; color: var(--text); cursor: pointer; min-height: 38px; }
.wahl-kacheln label:hover { border-color: color-mix(in srgb, var(--primaer) 45%, #D0D5DD); }
.wahl-kacheln label:has(input:checked) { border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 8%, #fff); }
.wahl-kacheln input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--primaer); }
.wahl-kacheln label > span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.felder .feld.doppelt { grid-column: span 2; }
@media (max-width: 720px) { .felder .feld.doppelt { grid-column: 1 / -1; } }
.felder > .feld { min-width: 0; }
.eingabe, .auswahl { min-height: 40px; }
textarea.eingabe { min-height: 0; }
select.auswahl { text-overflow: ellipsis; }
.gbu-felder > label.doppelt { grid-column: span 2; } .gbu-felder > label.breit { grid-column: 1 / -1; }
.gbu-umsetzung > label.doppelt { grid-column: span 2; } .gbu-umsetzung > label.breit { grid-column: 1 / -1; }
.tabelle.eng th { white-space: normal; letter-spacing: 0; padding: 9px 8px; vertical-align: bottom; }
.tabelle.eng td { padding: 8px 8px; }
.dl-liste dt, .dl-liste dd { min-width: 0; } .dl-liste dd { overflow-wrap: break-word; }

/* 8.4: Gefahrstoff mit Reitern, Satz-Auswahl und Vorschlägen */
.badge.gross { font-size: .95rem; padding: 4px 12px; }
.gs-kopf { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.gs-pikto { display: flex; gap: 6px; min-height: 64px; align-items: center; }
.gs-pikto img { width: 64px; height: 64px; }
.gs-pikto:empty::before { content: 'Keine GHS-Piktogramme'; color: var(--leise); font-size: .85rem; }
.gs-kopf-text { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.gs-fakten { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-fakt { display: flex; flex-direction: column; padding: 6px 12px; border: 1px solid var(--linie); border-radius: 10px; background: #FAFBFC; min-width: 96px; }
.gs-fakt small { font-size: .74rem; color: var(--leise); } .gs-fakt strong { font-size: 1rem; }
.gs-fakt.rot { border-color: #F1B8B8; background: var(--rot-hg); } .gs-fakt.gelb { border-color: #F3DFA6; background: var(--gelb-hg); }
.gs-reiter { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 -1px; border-bottom: 1px solid var(--linie); }
.gs-reiter-knopf { border: 1px solid transparent; border-bottom: 0; background: none; padding: 10px 14px; font: inherit; font-weight: 600; font-size: .9rem; color: var(--leise);
  border-radius: 10px 10px 0 0; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.gs-reiter-knopf:hover { color: var(--text); background: #F5F6F8; }
.gs-reiter-knopf.aktiv { color: var(--text); background: var(--flaeche); border-color: var(--linie); position: relative; top: 1px; }
.gs-reiter-knopf .zahl { font-size: .72rem; background: var(--primaer); color: #fff; border-radius: 999px; padding: 1px 7px; }
.gs-panel { border-top-left-radius: 0; }
.gs-einstufung { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .gs-einstufung { grid-template-columns: 1fr; } }
.gs-gewaehlt > .feld { margin-bottom: 16px; }
.gs-signalwahl { display: flex; gap: 8px; flex-wrap: wrap; }
.gs-form .gs-sw { display: inline-flex; margin: 0; gap: 8px; align-items: center; padding: 8px 14px; border: 1px solid #D0D5DD; border-radius: 9px; cursor: pointer; font-weight: 600; background: #fff; }
.gs-sw input { width: 17px; height: 17px; accent-color: var(--primaer); }
.gs-sw.gefahr:has(input:checked) { background: var(--rot-hg); border-color: var(--rot); color: var(--rot); }
.gs-sw.achtung:has(input:checked) { background: var(--gelb-hg); border-color: #D9A400; color: #8A5A00; }
.gs-sw.kein:has(input:checked) { background: #F2F4F7; border-color: #98A2B3; }
.gs-ghs { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 6px; }
.gs-form .gs-ghs-kachel { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #D0D5DD; border-radius: 10px; cursor: pointer; background: #fff; font-size: .8rem; line-height: 1.25; }
.gs-ghs-kachel input { width: 16px; height: 16px; flex: none; accent-color: var(--primaer); }
.gs-ghs-kachel img { width: 40px; height: 40px; flex: none; opacity: .45; }
.gs-ghs-kachel:has(input:checked) { border-color: var(--rot); background: #FFF7F7; } .gs-ghs-kachel:has(input:checked) img { opacity: 1; }
.gs-ghs-kachel.vorschlag { border-style: dashed; border-color: var(--primaer); }
.gs-ghs-kachel span strong { display: block; font-size: .74rem; color: var(--leise); }
.gs-form ul.gs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gs-chips li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px 6px 10px; border: 1px solid var(--linie); border-left: 4px solid #98A2B3; border-radius: 8px; background: #fff; font-size: .88rem; line-height: 1.35; }
.gs-chips[data-gs-chips="h"] li { border-left-color: #E8792E; } .gs-chips[data-gs-chips="h"] li.gefahr { border-left-color: var(--rot); }
.gs-chips[data-gs-chips="p"] li { border-left-color: #1F5FBF; }
.gs-chips li b { flex: none; min-width: 64px; font-variant-numeric: tabular-nums; }
.gs-chips li span { flex: 1; min-width: 0; }
.gs-chips li button { flex: none; border: 0; background: none; font-size: 1.1rem; line-height: 1; color: var(--leise); cursor: pointer; padding: 0 4px; }
.gs-chips li button:hover { color: var(--rot); }
.gs-chips li.leer { border: 1px dashed var(--linie); color: var(--leise); }
.gs-codes { margin-top: 6px; font-size: .84rem; } .gs-codes summary { cursor: pointer; color: var(--leise); } .gs-codes input { margin-top: 6px; }
.gs-vorschlag { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: var(--blau-hg); color: var(--blau); font-size: .85rem; }
.gs-auswahl { position: sticky; top: 12px; border: 1px solid var(--linie); border-radius: 12px; padding: 10px; background: #FAFBFC; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 40px); }
.gs-auswahl-reiter { display: flex; gap: 4px; flex-wrap: wrap; }
.gs-auswahl-reiter button { flex: 1; border: 1px solid #D0D5DD; background: #fff; border-radius: 8px; padding: 7px 8px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.gs-auswahl-reiter button.aktiv { background: var(--primaer); color: #fff; border-color: var(--primaer); }
.gs-auswahl-reiter button small { font-weight: 400; opacity: .8; }
.gs-katalog { overflow-y: auto; min-height: 200px; max-height: 60vh; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; }
.gs-katalog h3 { margin: 8px 0 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); }
.gs-satz { display: grid; grid-template-columns: 18px 72px 1fr; gap: 6px; align-items: start; padding: 5px 6px; border-radius: 7px; cursor: pointer; font-size: .84rem; line-height: 1.3; }
.gs-satz:hover { background: #fff; } .gs-satz:has(input:checked) { background: color-mix(in srgb, var(--primaer) 10%, #fff); }
.gs-satz input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--primaer); }
.gs-satz b { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .gs-satz.kombi b { font-size: .76rem; }
.gs-gbu-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 6px; margin-top: 8px; }
.gs-gbu { display: grid; grid-template-columns: 18px auto 1fr auto; gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid #D0D5DD; border-radius: 10px; background: #fff; cursor: pointer; font-size: .88rem; line-height: 1.3; }
.gs-gbu input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--primaer); }
.gs-gbu:has(input:checked) { border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 7%, #fff); }
.gs-gbu-nr { font-weight: 700; white-space: nowrap; } .gs-gbu-titel { min-width: 0; }
.gs-ba-liste { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.gs-ba-liste li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gs-fuss { position: sticky; bottom: 0; background: color-mix(in srgb, var(--hg) 92%, transparent); padding: 10px 0; backdrop-filter: blur(4px); z-index: 5; }
.gs-schutz-hilfe { margin-bottom: 10px; align-items: center; }
.gs-form .gs-ghs-kachel span { font-weight: 500; color: var(--text); }
.gs-form .gs-ghs-kachel span, .gs-satz span, .gs-chips li span { overflow-wrap: anywhere; hyphens: auto; }

/* 8.4: Betriebsanweisung bearbeiten – Editor links, Aushang-Vorschau rechts */
.ba-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1150px) { .ba-raster { grid-template-columns: 1fr; } .ba-vorschau { position: static; } }
.ba-vorschau { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.ba-vorschau .ba-blatt { font-size: .86rem; } .ba-vorschau .ba-abschnitt ul li { margin-bottom: 2px; }
.ba-schnell { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.ba-schnell [data-ba-status].fehler { color: var(--rot); font-weight: 600; }
.knopf.ki { border-color: #B9B4F5; background: #F6F5FF; color: #4B3FC0; }
.knopf.ki:hover { background: #ECEAFF; } .knopf.ki::before { content: '✦ '; }
.ba-abschnitt-edit { border-left: 4px solid var(--ba-farbe-edit, #1F5FBF); }
.ba-abschnitt-edit.leer { border-left-color: #D0D5DD; }
.ba-abschnitt-edit.neu { animation: ba-neu 1.4s ease; }
@keyframes ba-neu { 0% { background: #F1F0FF; } 100% { background: var(--flaeche); } }
.ba-ab-kopf { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.ba-ab-kopf h2 { margin: 0; font-size: 1rem; display: flex; gap: 8px; align-items: center; }
.ba-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #EEF2F7; font-size: .8rem; }
.ba-ab-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.ba-ab-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; min-height: 26px; }
.ba-zeichen { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.ba-editor .ba-zeichen-kachel { display: flex; gap: 8px; align-items: center; margin: 0; padding: 5px 8px; border: 1px solid #D0D5DD; border-radius: 9px; background: #fff;
  font-weight: 450; font-size: .82rem; line-height: 1.25; color: var(--text); cursor: pointer; }
.ba-zeichen-kachel input { width: 16px; height: 16px; flex: none; accent-color: var(--primaer); }
.ba-zeichen-kachel img { width: 30px; height: 30px; flex: none; opacity: .5; }
.ba-zeichen-kachel:has(input:checked) { border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 7%, #fff); }
.ba-zeichen-kachel:has(input:checked) img { opacity: 1; }

/* 8.4: Gefährdungsbeurteilung – Schritte, Kennzahlen, Risikomatrix mit Ansichten, Gefährdungen als Karten */
.rot-text { color: var(--rot); }
.gbu-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.gbu-schritte { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.gbu-schritte li { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); min-width: 0; position: relative; }
.gbu-schritt-punkt { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: .82rem; background: #EEF2F7; color: var(--leise); }
.gbu-schritt-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gbu-schritt-text strong { font-size: .84rem; } .gbu-schritt-text small { font-size: .74rem; color: var(--leise); overflow-wrap: break-word; }
.gbu-schritte li.fertig .gbu-schritt-punkt { background: var(--gruen); color: #fff; }
.gbu-schritte li.teil .gbu-schritt-punkt { background: var(--gelb-hg); color: #8A5A00; box-shadow: inset 0 0 0 2px #E8B400; }
.gbu-schritte li.fertig { border-color: color-mix(in srgb, var(--gruen) 35%, var(--linie)); }
@media (max-width: 1250px) { .gbu-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .gbu-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gbu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.gbu-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; }
.gbu-kpi > small { font-size: .78rem; color: var(--leise); } .gbu-kpi > strong { font-size: 1.35rem; line-height: 1.2; } .gbu-kpi > strong .leise { font-size: .85rem; font-weight: 500; }
.gbu-kpi.rot { background: var(--rot-hg); border-color: #F1B8B8; } .gbu-kpi.gelb { background: var(--gelb-hg); border-color: #F3DFA6; }
.gbu-verlauf { display: flex; align-items: center; gap: 6px; } .gbu-verlauf i { color: var(--leise); font-style: normal; }
.gbu-balken { display: flex; height: 8px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.gbu-balken .fertig { background: var(--gruen); } .gbu-balken .arbeit { background: #7AA7E8; }
.rp { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.rp.gering { background: #DCF5E3; color: #146C2E; } .rp.mittel { background: #FFF1C2; color: #8A5A00; } .rp.hoch { background: #FDDCDC; color: #A61B1B; }
.rp.leer { background: #F2F4F7; color: var(--leise); font-weight: 500; }
.gbu-verlauf .rp { font-size: .95rem; min-width: 48px; }
.raster.gbu-oben { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .raster.gbu-oben { grid-template-columns: 1fr; } }
.rm-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rm-kopf h2 { margin: 0; }
.rm-modus { display: inline-flex; background: #EEF2F7; border-radius: 10px; padding: 3px; gap: 2px; }
.rm-modus button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--leise); cursor: pointer; }
.rm-modus button.aktiv { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.rm-gitter { display: grid; grid-template-columns: 22px minmax(70px, auto) repeat(var(--rm-n), minmax(0, 1fr)); gap: 5px; align-items: stretch; }
.rm-achse-y { grid-row: 1 / span var(--rm-n); display: flex; align-items: center; justify-content: center; }
.rm-achse-y span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .74rem; color: var(--leise); font-weight: 600; letter-spacing: .03em; }
.rm-label-y, .rm-label-x { display: flex; flex-direction: column; justify-content: center; font-size: .74rem; color: var(--leise); line-height: 1.2; }
.rm-label-y { align-items: flex-end; text-align: right; padding-right: 4px; } .rm-label-x { align-items: center; text-align: center; padding-top: 2px; }
.rm-label-y b, .rm-label-x b { color: var(--text); font-size: .82rem; }
.rm-achse-x { text-align: center; font-size: .74rem; color: var(--leise); font-weight: 600; letter-spacing: .03em; }
.rm-zelle { position: relative; border: 0; border-radius: 10px; min-height: 58px; font: inherit; cursor: default; display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease; }
.rm5 .rm-zelle, .rm-gitter[style*="--rm-n: 5"] .rm-zelle { min-height: 44px; }
.rm-zelle.gering { background: #E7F7EC; } .rm-zelle.mittel { background: #FFF5D6; } .rm-zelle.hoch { background: #FDE4E4; }
.rm-zelle.belegt.gering { background: #9BDDB0; } .rm-zelle.belegt.mittel { background: #FFD66B; } .rm-zelle.belegt.hoch { background: #F28B8B; }
.rm-zelle.belegt { cursor: pointer; } .rm-zelle.belegt:hover, .rm-zelle.gewaehlt { transform: scale(1.04); box-shadow: 0 0 0 3px var(--primaer); z-index: 1; }
.rm-zelle .rm-wert { position: absolute; top: 4px; left: 7px; font-size: .68rem; color: rgba(16, 24, 40, .45); font-weight: 600; }
.rm-zelle .rm-anzahl { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .9);
  font-weight: 750; font-size: .95rem; color: #1D2939; box-shadow: 0 1px 2px rgba(16, 24, 40, .18); }
.rm-legende { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 10px; }
.rm-l { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; padding: 2px 10px; border-radius: 999px; }
.rm-l.gering { background: #DCF5E3; color: #146C2E; } .rm-l.mittel { background: #FFF1C2; color: #8A5A00; } .rm-l.hoch { background: #FDDCDC; color: #A61B1B; }
.gbu-freigabe { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gbu-freigabe-zeile { display: flex; gap: 8px; width: 100%; } .gbu-freigabe-zeile .eingabe, .gbu-freigabe-zeile .auswahl { flex: 1; min-width: 0; }
.gbu-fehler { margin: 4px 0 0; padding-left: 18px; }
.gbu-fassungen { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.gbu-fassungen li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: #F8F9FB; font-size: .88rem; }
.gbu-fassungen li a { font-weight: 650; } .gbu-fassungen li span { color: var(--leise); }
.gbu-wer { margin: 10px 0 0; font-size: .88rem; }
.gbu-karten-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .gbu-karten-kopf h2 { margin: 0; }
.gbu-rahmen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 18px; margin-top: 10px; }
.gbu-rahmen-raster h3 { margin: 0 0 3px; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); }
.gbu-rahmen-raster p { margin: 0; font-size: .9rem; }
.gbu-grundlagen { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--linie); }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #F2F4F7; font-size: .76rem; color: #344054; }
.gbu-stoffe { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.gbu-stoffe li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gbu-stoff-pikto { display: inline-flex; gap: 2px; } .gbu-stoff-pikto img { width: 26px; height: 26px; }
.gbu-zuordnen { display: flex; gap: 8px; } .gbu-zuordnen .auswahl { flex: 1; min-width: 0; }
.gbu-loesen { margin-top: 8px; } .gbu-loesen summary { cursor: pointer; } .gbu-loesen form { margin-top: 6px; }
.gbu-liste-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px 0 10px; }
.gbu-liste-kopf h2 { margin: 0; font-size: 1.2rem; }
.gbu-filter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gbu-zellfilter { display: inline-flex; gap: 8px; align-items: center; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--blau-hg); color: var(--blau); font-size: .84rem; }
.gbu-gruppe > h2 { display: flex; gap: 8px; align-items: baseline; }
.gbu-gruppe .gbu-punkt { padding: 14px 0; }
.gbu-titel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-bottom: 10px; }
.gbu-nr { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: #EEF2F7; font-weight: 700; font-size: .86rem; }
.gbu-punkt.ja .gbu-nr { background: color-mix(in srgb, var(--primaer) 14%, #fff); }
.gbu-titel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gbu-titel-text strong { font-weight: 600; line-height: 1.35; }
.gbu-titel-text small { font-size: .78rem; }
.gbu-titel-status { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 380px; }
.gbu-punkt.offen .gbu-titel strong { background: none; color: inherit; padding: 0; }
.gbu-punkt.nein .gbu-titel-text strong { color: var(--leise); font-weight: 500; }
.gbu-bereich { display: flex; flex-direction: column; gap: 10px; margin-left: 40px; }
.gbu-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); }
.gbu-relevanz { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gbu-relevanz .gbu-label { margin-right: 4px; }
.seg { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border: 1px solid #D0D5DD; border-radius: 999px; font-size: .86rem; cursor: pointer; background: #fff; }
.seg input { width: 15px; height: 15px; accent-color: var(--primaer); margin: 0; }
.seg:has(input:checked) { border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 9%, #fff); font-weight: 600; }
.gbu-beschreibung { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gbu-beschreibung textarea::placeholder { color: #98A2B3; font-style: italic; }
.gbu-bewertung { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: #F8F9FB; }
.gbu-bewertung label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--leise); font-weight: 600; min-width: 190px; }
.gbu-bewertung .gbu-label { align-self: center; min-width: 90px; }
.gbu-bewertung .rp { align-self: center; margin-bottom: 6px; }
.gbu-massnahme { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.gbu-felder .breit3 { grid-column: span 3; }
.gbu-rest { display: flex; gap: 6px; align-items: center; font-size: .74rem; color: var(--leise); font-weight: 600; padding-bottom: 6px; }
.gbu-lesen { margin-left: 40px; font-size: .9rem; }
.gbu-lesen-raster { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 6px; }
.gbu-lesen-raster dt { color: var(--leise); font-size: .82rem; } .gbu-lesen-raster dd { margin: 0; }
.gbu-ml-kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.stop-chip { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: #1F5FBF; color: #fff; font-weight: 700; font-size: .78rem; }
.gbu-werkzeug { position: sticky; top: 0; z-index: 4; background: color-mix(in srgb, var(--hg) 94%, transparent); padding: 8px 0; backdrop-filter: blur(4px); }
@media (max-width: 900px) { .gbu-bereich, .gbu-lesen { margin-left: 0; } .gbu-titel { grid-template-columns: auto minmax(0, 1fr); } .gbu-titel-status { grid-column: 1 / -1; justify-content: flex-start; } }
.gbu-felder.gbu-beschreibung { align-items: start; } .gbu-beschreibung label { min-height: 100%; }
.gbu-beschreibung label textarea { flex: 1; }
.tabelle td select.auswahl, .tabelle td select.eingabe { width: auto; min-width: 100%; }
.formular-fuss, .knopfreihe { flex-wrap: wrap; }
/* 8.4: einzelne Schalter in Formularrastern auf Höhe der Eingabefelder */
.felder > .feld:has(> label.schalter-feld) { align-self: end; min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.felder > .feld:has(> label.schalter-feld) > label.schalter-feld { margin: 0; font-weight: 500; font-size: .9rem; color: var(--text); }
.ba-zeichen-kachel span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* 9.0 Einstellungen: Themen-Überblick, ein Bereich zur Zeit, Suche, Schalter, Vorgabe und Speicherleiste */
.es-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.es-nav { position: sticky; top: 76px; max-height: calc(100vh - 150px); overflow-y: auto; padding: 4px 6px 12px 0; }
.es-suche { display: flex; align-items: center; gap: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 7px 10px; margin-bottom: 10px; }
.es-suche:focus-within { border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(105, 94, 233, .15); }
.es-suche input { border: 0; outline: none; background: transparent; font: inherit; width: 100%; min-width: 0; }
.es-nav-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--text); font-size: .88rem; }
.es-nav-link small { margin-left: auto; color: var(--schwach); font-size: .74rem; }
.es-nav-link:hover { background: var(--grau-hg); text-decoration: none; }
.es-nav-link.aktiv { background: var(--indigo-hg, #EEF); color: var(--primaer); font-weight: 600; }
.es-nav-start { font-weight: 600; }
.es-nav-thema { display: flex; align-items: center; gap: 6px; margin: 14px 10px 4px; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.es-nur-geaendert { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--leise); margin: 6px 10px 0; cursor: pointer; }
.es-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primaer); flex: 0 0 7px; }
.es-inhalt { min-width: 0; padding-bottom: 80px; }
.es-themen { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.es-thema { margin: 0; padding: 16px 16px 10px; }
.es-thema-kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.es-thema-kopf h2 { margin: 0; font-size: 1.02rem; }
.es-thema-kopf small { color: var(--leise); }
.es-symbol { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--indigo-hg, #EEF); color: var(--primaer); flex: 0 0 38px; }
.es-thema ul { list-style: none; margin: 0; padding: 0; }
.es-thema li a { display: grid; grid-template-columns: auto auto 1fr; gap: 0 6px; align-items: center; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; color: var(--text); }
.es-thema li a:hover { background: var(--grau-hg); text-decoration: none; }
.es-thema li a strong { font-weight: 600; font-size: .9rem; }
.es-thema li a span:not(.es-punkt) { grid-column: 1 / -1; color: var(--leise); font-size: .8rem; line-height: 1.35; }
.es-zwischen { margin-top: 26px; }
.es-weitere { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.es-weiter { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; color: var(--text); }
.es-weiter:hover { text-decoration: none; border-color: var(--primaer); }
.es-weiter strong { display: block; font-size: .9rem; } .es-weiter small { display: block; color: var(--leise); font-size: .78rem; line-height: 1.35; }
.es-pfeil { margin-left: auto; color: var(--schwach); font-size: 1.3rem; }
.es-bereich { margin-bottom: 22px; }
.es-bereich-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.es-bereich-kopf h2 { margin: 0; font-size: 1.3rem; }
.es-bereich-kopf p { margin: 2px 0 0; color: var(--leise); }
.es-pfad { color: var(--leise); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.es-liste { padding: 0; overflow: hidden; }
.es-gruppe { margin: 0; padding: 14px 18px 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); border-top: 1px solid var(--linie); }
.es-liste > .es-gruppe:first-child { border-top: 0; }
.es-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: 8px 28px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--linie); position: relative; }
.es-liste > .es-zeile:first-child, .es-gruppe + .es-zeile { border-top: 0; }
.es-zeile.es-breit { grid-template-columns: 1fr; }
.es-zeile.geaendert::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primaer); }
.es-zeile.ungespeichert { background: #FFFBEB; }
.es-zeile.es-markiert { animation: es-blink 2.4s ease-out; }
@keyframes es-blink { 0%, 30% { background: var(--indigo-hg, #EEF); } 100% { background: transparent; } }
.es-label { font-weight: 600; color: var(--text); display: block; }
.es-hilfe { color: var(--leise); font-size: .82rem; line-height: 1.45; margin-top: 2px; max-width: 760px; }
.es-vorgabe { display: none; font-size: .78rem; color: var(--leise); margin-top: 4px; }
.es-zeile.geaendert .es-vorgabe { display: block; }
.es-wert { justify-self: end; width: 100%; display: flex; justify-content: flex-end; }
.es-breit .es-wert { justify-self: stretch; justify-content: flex-start; }
.es-wert .auswahl, .es-wert .eingabe { width: 100%; }
.es-wert .es-zahl { width: 130px; text-align: right; }
.es-wert textarea { width: 100%; }
.es-schalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.es-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.es-schalter span { width: 44px; height: 26px; border-radius: 13px; background: #CBD0DA; position: relative; transition: background .15s; flex: 0 0 44px; }
.es-schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.es-schalter input:checked + span { background: var(--primaer); }
.es-schalter input:checked + span::after { transform: translateX(18px); }
.es-schalter input:focus-visible + span { outline: 2px solid var(--primaer); outline-offset: 2px; }
.es-schalter em { font-style: normal; font-size: .82rem; color: var(--leise); width: 2em; }
.es-wege { display: flex; flex-wrap: wrap; gap: 8px; }
.es-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); cursor: pointer; font-size: .86rem; }
.es-chip:has(input:checked) { border-color: var(--primaer); background: var(--indigo-hg, #EEF); color: var(--primaer); font-weight: 500; }
.es-leiste { position: sticky; bottom: 0; grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 -4px 18px rgba(21, 37, 61, .08); margin-top: 10px; z-index: 5; }
.es-leiste [data-es-stand] { margin-right: auto; color: var(--leise); font-size: .88rem; }
.es-leiste.offen { border-color: #F3D27A; background: #FFFBEB; }
.es-leiste.offen [data-es-stand] { color: #8A5A00; font-weight: 600; }
.es-leiste.still { display: none; }
.es-treffer-leer { padding: 18px; color: var(--leise); }
.es-suchmodus .es-bereich-kopf p { display: none; }
@media (max-width: 860px) {
  .es-layout { grid-template-columns: 1fr; }
  .es-nav { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px; }
  .es-nav .es-suche { flex: 1 0 100%; }
  .es-nav-thema, .es-nav-link:not(.es-nav-start), .es-nur-geaendert { display: none; }
  .es-zeile { grid-template-columns: 1fr; }
  .es-wert { justify-content: flex-start; }
}

/* 9.0 Arbeitsschutz: Einrichten, AMS-Pro, Übersicht, Entwurf aus einem Satz, Maßnahmen-Board, Unterweisung & Vorsorge */
.ams-band { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; background: #F0EFFD; border: 1px solid #D9D6FA; color: var(--text); }
.ams-band > span:nth-child(2) { flex: 1 1 380px; font-size: .88rem; }
.ams-band-zeichen { color: var(--primaer); display: inline-flex; }
.ar-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.ar-option { margin: 0; padding: 18px; cursor: pointer; border: 2px solid var(--linie); transition: border-color .15s, box-shadow .15s; }
.ar-option.gewaehlt { border-color: var(--primaer); box-shadow: 0 0 0 4px rgba(105, 94, 233, .12); }
.ar-kopf-label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ar-kopf-label input { width: 18px; height: 18px; accent-color: var(--primaer); }
.ar-kopf { display: flex; align-items: center; gap: 12px; }
.ar-kopf strong { display: block; font-size: 1.05rem; } .ar-kopf small { display: block; color: var(--leise); }
.ar-zeichen { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.ar-zeichen.lv { background: var(--indigo-hg, #EEF); color: var(--primaer); } .ar-zeichen.ams { background: #E6F4FF; color: #1F5FBF; }
.ar-punkte { margin: 14px 0 0; padding-left: 20px; color: var(--text); font-size: .9rem; line-height: 1.55; }
.ar-punkte li::marker { color: var(--primaer); }
.ar-zusatz { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linie); cursor: default; }
.ar-zusatz-titel { font-weight: 600; margin-bottom: 8px; }
.ar-adresse { display: block; margin-top: 12px; font-weight: 600; font-size: .88rem; } .ar-adresse input { margin-top: 4px; width: 100%; font-weight: 400; }
.ar-wahl .formular-fuss { grid-column: 1 / -1; }
.ams-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin: 16px 0; align-items: start; }
.ams-raster > .karte { margin: 0; }
.ams-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 18px; margin: 6px 0 12px; border: 2px dashed #CFCBF7; border-radius: 14px; background: #FAFAFF; text-align: center; cursor: pointer; position: relative; }
.ams-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ams-zone.ziehen { border-color: var(--primaer); background: var(--indigo-hg, #EEF); }
.ams-zone.gefuellt { border-style: solid; border-color: var(--primaer); }
.ams-zone-symbol { color: var(--primaer); transform: scale(1.5); margin-bottom: 4px; }
.ams-zone small { color: var(--leise); }
.ams-zone-liste { font-size: .85rem; color: var(--primaer); font-weight: 600; }
.ams-schritte { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.55; } .ams-schritte li { margin-bottom: 6px; }
.ams-liste { list-style: none; margin: 0; padding: 0; }
.ams-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.ams-liste li:first-child { border-top: 0; }
.ams-liste form { margin: 0; }
.ams-typ { width: 46px; flex: 0 0 46px; text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 6px 0; border-radius: 8px; background: var(--grau-hg); color: var(--leise); }
.ams-typ.link { background: #E6F4FF; color: #1F5FBF; }
.ams-titel { flex: 1 1 260px; min-width: 0; } .ams-titel a, .ams-titel strong { font-weight: 600; } .ams-titel small { display: block; color: var(--leise); }
.ams-pruefen td { vertical-align: middle; } .ams-pruefen .eingabe, .ams-pruefen .auswahl { min-width: 120px; }
.ams-link-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linie); }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.karte-kopf h2 { margin: 0 0 6px; }
.as-ams-karte { padding: 18px; }
.as-ams-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .as-ams-kopf h2 { margin: 0; } .as-ams-kopf small { color: var(--leise); }
.as-ams-kopf .knopfreihe { margin-left: auto; }
.as-ams-zahlen { display: flex; gap: 18px; margin-top: 12px; font-size: .9rem; } .as-ams-zahlen .gelb { color: var(--gelb); } .as-ams-zahlen .rot { color: var(--rot); }
.as-satz { padding: 20px; background: linear-gradient(135deg, #F4F3FE 0%, #FFFFFF 70%); border-color: #DCD9FA; }
.as-satz-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; } .as-satz-kopf h2 { margin: 0; } .as-satz-kopf small { color: var(--leise); }
.as-funke { width: 42px; height: 42px; border-radius: 12px; background: var(--primaer); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; }
.as-satz-zeile { display: flex; gap: 10px; } .as-satz-zeile .eingabe { flex: 1; font-size: 1rem; padding: 12px 14px; }
.as-beispiele { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.as-beispiele a { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); color: var(--leise); }
.as-beispiele a:hover { border-color: var(--primaer); color: var(--primaer); text-decoration: none; }
.as-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0; }
.as-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text); }
.as-kpi:hover { border-color: var(--primaer); text-decoration: none; }
.as-kpi small { color: var(--leise); font-size: .78rem; } .as-kpi strong { font-family: var(--titel, inherit); font-size: 1.8rem; line-height: 1.1; color: var(--navy, var(--text)); }
.as-kpi strong span { font-size: 1rem; color: var(--schwach); } .as-kpi em { font-style: normal; font-size: .8rem; color: var(--leise); }
.as-kpi .rot, .mb-fuss .rot { color: var(--rot); } .as-kpi .gelb { color: var(--gelb); }
.as-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.as-raster > div > .karte, .as-raster > .karte { margin-top: 0; }
.as-luecke { padding: 12px 0; border-top: 1px solid var(--linie); } .as-luecke:first-of-type { border-top: 0; }
.as-luecke-titel { font-weight: 600; }
.as-luecke ul { list-style: none; margin: 6px 0 0; padding: 0; }
.as-luecke li { position: relative; padding: 2px 0 2px 16px; font-size: .86rem; }
.as-luecke li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #E3A008; }
.as-luecke li.rot::before { background: var(--rot); }
.as-luecke li a { color: var(--text); } .as-luecke li a:hover { color: var(--primaer); }
.as-fortschritt { display: inline-block; vertical-align: middle; width: 80px; height: 6px; border-radius: 3px; background: var(--grau-hg); margin-left: 8px; overflow: hidden; }
.as-fortschritt span { display: block; height: 100%; width: var(--wert); background: var(--primaer); }
.as-alles-gut { display: flex; gap: 14px; align-items: center; } .as-alles-gut h2 { margin: 0; }
.lv-erledigt-punkt { width: 16px; height: 16px; border-radius: 50%; background: var(--mint, #00D6A3); flex: 0 0 16px; box-shadow: 0 0 0 6px rgba(0, 214, 163, .15); }
.as-fristen li { padding: 3px 0; }
.as-zwischen { margin-top: 26px; }
.menue-knopf-mehr { position: relative; } .menue-knopf-mehr summary { list-style: none; } .menue-knopf-mehr summary::-webkit-details-marker { display: none; }
.menue-knopf-mehr .menue { z-index: 15; }
.as-verstanden { padding: 18px; }
.as-satz-zitat { font-family: var(--titel, inherit); font-size: 1.15rem; color: var(--navy, var(--text)); margin-bottom: 14px; }
.as-faktoren { margin-top: 8px; }
.as-punkt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; border-top: 1px solid var(--linie); cursor: pointer; }
.as-punkt:hover { background: #FAFAFF; }
.as-punkt input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--primaer); flex: 0 0 18px; }
.as-punkt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.as-punkt-text small { color: var(--leise); line-height: 1.45; } .as-punkt-text small b { color: var(--text); font-weight: 600; }
.as-treffer { font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--indigo-hg, #EEF); color: var(--primaer); }
.as-weitere summary { cursor: pointer; padding: 4px 0; }
.as-entwurf-fuss { position: sticky; bottom: 0; background: rgba(255, 255, 255, .96); padding: 12px 0; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.as-entwurf-fuss [data-as-stand] { margin-right: auto; }
.as-zuordnung { display: flex; flex-wrap: wrap; gap: 8px; } .as-zuordnung span { font-size: .82rem; padding: 4px 10px; border-radius: 8px; background: var(--grau-hg); }
.as-werte span { display: inline-block; margin: 0 10px 2px 0; font-size: .82rem; } .as-werte span.geaendert { background: #FFF6DB; border-radius: 4px; padding: 0 4px; }
.mb-zahlen { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; font-size: .9rem; color: var(--leise); }
.mb-zahlen strong { color: var(--text); font-size: 1.05rem; } .mb-zahlen .rot, .mb-zahlen .rot strong { color: var(--rot); } .mb-zahlen .gelb strong { color: var(--gelb); }
.mb-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.mb-filter .eingabe, .mb-filter .auswahl { width: auto; min-width: 180px; max-width: 340px; }
.mb-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.mb-spalte { background: #F1F1F7; border-radius: 14px; padding: 10px; min-height: 240px; transition: background .15s, box-shadow .15s; }
.mb-spalte.ziel { background: #E9E7FD; box-shadow: inset 0 0 0 2px var(--primaer); }
.mb-spalte h2 { font-family: inherit; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 2px 4px 10px; display: flex; justify-content: space-between; align-items: center; }
.mb-pruefen h2 { color: #8A5A00; } .mb-fertig h2 { color: #046B53; }
.mb-karten { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.mb-karte { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(21, 37, 61, .05); cursor: grab; }
.mb-karte.zieht { opacity: .5; } .mb-karte.ueberfaellig { border-left: 4px solid var(--rot); } .mb-karte.unwirksam { border-left: 4px solid var(--gelb); }
.mb-fertig .mb-karte { border-left: 4px solid var(--mint, #00D6A3); }
.mb-kopf { display: flex; align-items: center; gap: 6px; font-size: .78rem; } .mb-kopf a { font-weight: 600; margin-right: auto; }
.mb-stop { width: 20px; height: 20px; border-radius: 6px; background: var(--navy, #15253D); color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mb-rhythmus { font-size: .72rem; color: var(--primaer); font-weight: 600; }
.mb-text { margin: 6px 0; font-size: .88rem; line-height: 1.4; }
.mb-bezug { font-size: .76rem; color: var(--leise); margin-bottom: 6px; }
.mb-fuss { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--leise); }
.mb-frist.rot { color: var(--rot); font-weight: 600; } .mb-frist.gelb { color: var(--gelb); font-weight: 600; } .mb-frist.gruen { color: #046B53; } .mb-fuss b.gelb { color: var(--gelb); font-weight: 600; }
.mb-aktionen { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mb-leer { color: var(--schwach); font-size: .82rem; text-align: center; margin: 18px 0; }
.mb-meldung { position: fixed; right: 20px; bottom: 20px; background: var(--navy, #15253D); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); z-index: 30; max-width: 420px; }
.mb-meldung.fehler { background: var(--rot); }
.uv-reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.uv-reiter a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie); background: #fff; color: var(--text); font-size: .85rem; }
.uv-reiter a.aktiv { background: var(--primaer); border-color: var(--primaer); color: #fff; } .uv-reiter a:hover { text-decoration: none; border-color: var(--primaer); }
.uv-legende { display: flex; gap: 10px; align-items: center; font-size: .8rem; color: var(--leise); margin-bottom: 12px; flex-wrap: wrap; }
.uv { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 24px; padding: 0 6px; border-radius: 6px; font-size: .74rem; font-weight: 600; }
.uv-legende .uv { min-width: 14px; width: 14px; height: 14px; padding: 0; border-radius: 4px; }
.uv.gueltig { background: var(--mint-hg, #E3FBF4); color: #046B53; } .uv.bald { background: #FFF6DB; color: #8A5A00; }
.uv.faellig { background: #FDECEC; color: var(--rot); } .uv.fehlt { background: #F1F1F7; color: var(--schwach); border: 1px dashed #C9CCD6; }
.uv-tabelle th { white-space: normal; vertical-align: bottom; min-width: 96px; max-width: 150px; font-size: .76rem; text-transform: none; letter-spacing: 0; line-height: 1.3; } .uv-tabelle th small { display: block; color: var(--schwach); font-weight: 400; }
.uv-tabelle td { text-align: center; } .uv-tabelle td.uv-name { text-align: left; white-space: nowrap; font-weight: 500; }
.uv-quote { font-size: .88rem; color: var(--leise); } .uv-quote strong { color: var(--text); } .uv-quote .rot { color: var(--rot); }
.bn-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bn-text { white-space: pre-wrap; font-family: inherit; font-size: .86rem; line-height: 1.5; background: var(--grau-hg); border-radius: 10px; padding: 10px 12px; margin: 4px 0 0; }
.bn-text.neu { background: #F0EFFD; }
@media (max-width: 980px) { .ams-raster, .as-raster, .bn-vergleich { grid-template-columns: 1fr; } .mb-board { grid-template-columns: repeat(4, minmax(240px, 80vw)); } }
.ams-upload h2, .ams-anleitung h2 { margin-top: 0; }
.ams-pruefen input[name^="titel_"] { min-width: 220px; }

/* 9.1 Schnellkalkulation und Kalkulationsseite */
.sk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.sk-schritte > .karte { margin-top: 0; margin-bottom: 16px; }
.sk-schritt h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.sk-nr { width: 28px; height: 28px; border-radius: 50%; background: var(--primaer); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex: 0 0 28px; }
.sk-arten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sk-art { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 2px solid var(--linie); border-radius: 12px; cursor: pointer; color: var(--text); background: var(--flaeche); }
.sk-art:hover { border-color: #C9C4F7; text-decoration: none; }
.sk-art input { position: absolute; opacity: 0; }
.sk-art.gewaehlt, .sk-art:has(input:checked) { border-color: var(--primaer); background: var(--indigo-hg, #EEF); }
.sk-art:has(input:focus-visible) { outline: 2px solid var(--primaer); outline-offset: 2px; }
.sk-art-sym { color: var(--primaer); } .sk-art strong { font-size: .95rem; } .sk-art small { color: var(--leise); font-size: .78rem; line-height: 1.35; }
.sk-route { list-style: none; margin: 0 0 12px; padding: 0 0 0 4px; }
.sk-halt { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 4px 0 10px; }
.sk-halt::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: -6px; width: 2px; background: #D9D6FA; }
.sk-halt.zurueck::before, .sk-route.kompakt .sk-halt:last-child::before { display: none; }
.sk-punkt { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--primaer); background: #fff; flex: 0 0 14px; margin-top: 3px; z-index: 1; }
.sk-halt.start .sk-punkt { background: var(--primaer); } .sk-halt.ziel .sk-punkt { background: var(--mint, #00D6A3); border-color: var(--mint, #00D6A3); }
.sk-halt.zurueck .sk-punkt { border-style: dashed; }
.sk-halt-inhalt { flex: 1; min-width: 0; position: relative; }
.sk-halt-label { display: block; font-size: .78rem; color: var(--leise); font-weight: 600; margin-bottom: 3px; }
.sk-halt-inhalt .eingabe { width: 100%; }
.sk-halt [data-sk-weg] { margin-top: 22px; }
.sk-halt-neu { padding: 0 0 10px 28px; }
.sk-route.kompakt .sk-halt { grid-template-columns: 18px 1fr; padding-bottom: 8px; }
.sk-km { display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: end; }
.sk-km .feld { margin: 0; }
.sk-einheit { display: flex; align-items: center; gap: 6px; } .sk-einheit input { text-align: right; font-size: 1.05rem; font-weight: 600; } .sk-einheit span { color: var(--leise); }
.sk-strecke-info { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #F4F3FE; font-size: .88rem; }
.sk-strecke-info ul { list-style: none; margin: 8px 0 0; padding: 0; }
.sk-strecke-info li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px dashed #DCD9FA; }
.sk-strecke-info li.leer { color: var(--leise); } .sk-strecke-info li span { white-space: nowrap; color: var(--leise); }
.sk-strecke-info.fehler { background: #FDECEC; color: var(--rot); }
.knopf.laedt { opacity: .7; cursor: progress; }
.sk-klassen { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.sk-pp h3 { margin-top: 10px; }
.sk-preis { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; }
.sk-preis-karte { margin: 0; padding: 18px; border: 2px solid var(--primaer); transition: opacity .15s; }
.sk-preis-karte.laedt { opacity: .6; } .sk-preis-karte.fehler { border-color: var(--rot); }
.sk-preis-titel { color: var(--leise); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 600; }
.sk-preis-wert { font-family: var(--titel, inherit); font-size: 2.4rem; font-weight: 600; color: var(--navy, var(--text)); line-height: 1.15; }
.sk-euro { font-size: 1.4rem; color: var(--leise); }
.sk-preis-zusatz { color: var(--leise); font-size: .86rem; margin-bottom: 10px; }
.sk-zahlen { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--linie); font-size: .86rem; }
.sk-zahlen dt { color: var(--leise); } .sk-zahlen dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sk-hinweise { list-style: none; margin: 10px 0 6px; padding: 0; font-size: .8rem; }
.sk-hinweise li { padding: 6px 8px; border-radius: 8px; margin-bottom: 4px; background: #FFF6DB; color: #8A5A00; }
.sk-hinweise li.verstoss { background: #FDECEC; color: var(--rot); }
.sk-anlegen { width: 100%; }
.kalk-strecke .karte-kopf h2 { margin: 0; }
.kalk-km { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.kalk-km div { background: var(--grau-hg); border-radius: 10px; padding: 8px 10px; } .kalk-km small { display: block; color: var(--leise); font-size: .75rem; }
.kalk-km strong { font-size: 1.05rem; }
.kalk-gruppe > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.kalk-gruppe > summary::-webkit-details-marker { display: none; }
.kalk-gruppe > summary h2 { margin: 0; }
.kalk-gruppe > summary::after { content: "▾"; color: var(--leise); transition: transform .15s; }
.kalk-gruppe:not([open]) > summary::after { transform: rotate(-90deg); }
.kalk-gruppe[open] > summary { margin-bottom: 10px; }
.kalk-gruppe-info { margin-left: auto; font-size: .8rem; color: var(--leise); }
.kalk-vorschau { position: sticky; bottom: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--navy, #15253D); color: #fff; font-size: .9rem; z-index: 4; }
.kalk-vorschau span { opacity: .8; } .kalk-vorschau.fehler { background: var(--rot); }
@media (max-width: 1100px) { .sk-layout { grid-template-columns: 1fr; } .sk-preis { position: static; } .sk-km { grid-template-columns: 1fr 1fr; } .sk-km > .knopf { grid-column: 1 / -1; } }

/* 9.1 Freischaltung je Kunde */
.fs-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.fs-zahl { font-size: 1.05rem; } .fs-zahl strong { font-family: var(--titel, inherit); font-size: 1.8rem; color: var(--primaer); }
.fs-pakete { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fs-gruppe { margin: 22px 0 10px; }
.fs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.fs-bereich { margin: 0; padding: 14px 16px; border-left: 4px solid var(--primaer); transition: opacity .15s, border-color .15s; }
.fs-bereich.aus { border-left-color: #CBD0DA; opacity: .7; }
.fs-bereich-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.fs-bereich-kopf strong { display: block; } .fs-bereich-kopf small { display: block; color: var(--leise); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
.fs-funktionen { margin-top: 10px; font-size: .86rem; }
.fs-funktionen summary { cursor: pointer; color: var(--primaer); }
.fs-funktionen ul { list-style: none; margin: 8px 0 0; padding: 0; columns: 1; }
.fs-funktionen li { padding: 2px 0; } .fs-funktionen label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.fs-funktionen input { accent-color: var(--primaer); }

/* 9.1 Prüfobjekt: Prüfung finden */
.pk-assistent { padding: 16px 18px; background: linear-gradient(135deg, #F4F3FE 0%, #FFFFFF 70%); border-color: #DCD9FA; }
.pk-kopf { display: flex; gap: 12px; align-items: center; } .pk-kopf h2 { margin: 0; } .pk-kopf small { color: var(--leise); }
.pk-erkannt { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 6px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #DCD9FA; }
.pk-erkannt > div { flex: 1 1 320px; } .pk-erkannt small { display: block; } .pk-erkannt strong { display: block; } .pk-erkannt span { color: var(--leise); font-size: .85rem; }
.pk-hinweis { flex: 1 1 100%; }
.pk-hilfe { color: var(--primaer); }

.pk-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 14px; }
.pk-info > div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; font-size: .88rem; }
.pk-info small { display: block; color: var(--leise); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
/* 9.1: Neue Betriebsanweisung – erst wählen: Gefahrstoff oder Tätigkeit */
.bs-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 10px; }
.bs-kachel { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px 18px; border: 2px solid var(--linie); border-radius: 14px;
  background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--schatten); }
.bs-kachel:hover { border-color: #C9C4F7; }
.bs-kachel.gewaehlt { border-color: var(--primaer); background: var(--indigo-hg, #EEF); }
.bs-kachel:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; }
.bs-sym img { display: block; }
.bs-text { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.bs-text strong { font-size: 1.02rem; } .bs-text small { color: var(--leise); line-height: 1.4; }
.bs-tipp { margin: 0 0 16px; max-width: 900px; }
.bs-panel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.bs-panel-kopf h2 { margin: 0; } .bs-panel-kopf input { max-width: 280px; }
.bs-stoffe { list-style: none; margin: 0; padding: 0; }
.bs-stoff { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--linie); }
.bs-stoff.fehlt { background: linear-gradient(90deg, var(--gelb-hg, #FFF7E0) 0, transparent 60%); }
.bs-pikto { display: flex; gap: 3px; flex-wrap: wrap; }
.bs-stoff-text { display: flex; flex-direction: column; } .bs-stoff-text small { font-size: .8rem; }
.bs-stoff-ba { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bs-unter { font-size: .95rem; margin: 16px 0 8px; }
.bs-vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.bs-vorlage { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 12px; border: 1.5px solid var(--linie); border-radius: 10px;
  background: var(--flaeche); font: inherit; color: var(--text); cursor: pointer; }
.bs-vorlage:hover { border-color: #C9C4F7; } .bs-vorlage.gewaehlt { border-color: var(--primaer); background: var(--indigo-hg, #EEF); }
.bs-vorlage small { color: var(--leise); font-size: .78rem; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bs-chip { border: 1px solid var(--linie); cursor: pointer; font: inherit; font-size: .8rem; }
.bs-chip:hover { border-color: var(--primaer); }
.bs-hinweise { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bs-hinweis { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 10px; background: var(--blau-hg, #EAF2FF);
  font-size: .85rem; }
.bs-weitere { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ba-art-text { margin: -4px 0 10px; }
@media (max-width: 720px) { .bs-stoff { grid-template-columns: minmax(0, 1fr); } .bs-stoff-ba { justify-content: flex-start; } }
.bs-panel form.formular { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; max-width: none; }
.bs-panel form.formular > h2:first-child { margin-top: 0; }
.bs-panel .felder .bs-art-feld { grid-column: 1 / -1; }
/* 9.1: Freischaltung mit Nutzungsart; Mein Lineva */
.fs-zaehler { display: flex; gap: 22px; } .fs-zaehler div { display: flex; flex-direction: column; } .fs-zaehler strong { font-size: 1.6rem; color: var(--primaer); line-height: 1.1; }
.fs-nutzung { margin: 10px 0 2px; } .fs-nutzung label span { font-size: .8rem; padding: 4px 10px; }
.fs-bereich.fs-beratung { border-left-color: #2F80ED; } .fs-bereich.fs-aus { border-left-color: #CBD0DA; opacity: .72; }
.ml-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ml-kpi { margin: 0; display: flex; flex-direction: column; } .ml-kpi small { color: var(--leise); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.ml-kpi strong { font-size: 2rem; line-height: 1.1; color: var(--primaer); } .ml-kpi.beratung strong { color: #2F80ED; } .ml-kpi.frei strong { color: var(--leise); }
.ml-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ml-bereich { margin: 0; display: flex; flex-direction: column; gap: 4px; } .ml-bereich p { margin: 0 0 6px; flex: 1; }
.ml-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ml-bereich.ml-aus { background: var(--flaeche-2, #F7F8FA); } .ml-anfrage { margin: 0; }
/* ===================== 9.1: Managementsystem (IMS/QMS), Safety (SMS), Richtlinien ===================== */
.prozess-band { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.prozess-band a { display: flex; gap: 10px; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--blau-hg); color: #173F7A; text-decoration: none;
  border: 1px solid #C9DAF6; font-size: .86rem; }
.prozess-band a:hover { border-color: var(--blau); }
.prozess-band-nr { font-weight: 700; background: #fff; border-radius: 6px; padding: 1px 7px; font-size: .78rem; }
.prozess-band-pfeil { margin-left: auto; font-weight: 600; white-space: nowrap; }
.im-kopf { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 14px; margin-bottom: 4px; }
.im-ring-karte { display: flex; gap: 18px; align-items: center; color: inherit; text-decoration: none; margin: 0; }
.im-ring-karte h2 { margin: 0 0 4px; } .im-ring-karte p { margin: 0 0 8px; }
.im-ring { --wert: 0; flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--flaeche) 78%, transparent 79% 100%), conic-gradient(var(--primaer) calc(var(--wert) * 1%), #E6E8EF 0); }
.im-ring strong { font-size: 1.7rem; line-height: 1; color: var(--text); } .im-ring small { font-size: .8rem; color: var(--leise); }
.im-einfuehrung { margin: 0; } .im-einfuehrung.fertig { display: flex; flex-direction: column; justify-content: center; }
.im-stepper { list-style: none; display: flex; gap: 4px; padding: 0; margin: 6px 0 12px; overflow-x: auto; }
.im-stepper li { flex: 1 1 0; min-width: 68px; }
.im-stepper a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--leise); font-size: .72rem; text-align: center; line-height: 1.2; }
.im-stepper span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #EEF0F4; font-weight: 700; color: var(--leise); position: relative; }
.im-stepper li.fertig span { background: var(--gruen-hg); color: var(--gruen); } .im-stepper li.jetzt span { background: var(--primaer); color: #fff; box-shadow: 0 0 0 4px rgba(108, 92, 231, .18); }
.im-stepper li.jetzt a { color: var(--text); font-weight: 600; }
.im-naechster { display: flex; gap: 14px; align-items: center; justify-content: space-between; background: #F7F6FE; border-radius: 12px; padding: 10px 14px; }
.im-naechster p { margin: 2px 0 0; }
.im-landkarte { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.im-lane { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: stretch; border-radius: 14px; padding: 10px; }
.im-lane-fuehrung { background: #F1EFFD; } .im-lane-kern { background: #EAF5FF; } .im-lane-unterstuetzung { background: #F0F7EF; }
.im-lane-titel { margin: 0; font-size: .95rem; display: flex; align-items: center; font-weight: 700; color: var(--text); }
.im-landkarte.klein .im-lane { grid-template-columns: 140px minmax(0, 1fr); padding: 8px; } .im-landkarte.klein .im-lane-titel { font-size: .8rem; }
.im-lane-karten { display: flex; flex-wrap: wrap; gap: 8px; }
.im-lane-kern .im-lane-karten .im-pk.gross { position: relative; }
.im-pk { display: flex; flex-direction: column; gap: 2px; padding: 7px 11px; background: var(--flaeche); border-radius: 10px; border: 1px solid var(--linie); color: var(--text);
  text-decoration: none; font-size: .84rem; line-height: 1.25; min-width: 140px; }
.im-pk small { color: var(--leise); font-size: .7rem; } .im-pk:hover { border-color: var(--primaer); box-shadow: var(--schatten); }
.im-pk.gross { min-width: 220px; max-width: 300px; padding: 10px 13px; } .im-pk.gross strong { font-size: .95rem; }
.im-pk-kopf { display: flex; justify-content: space-between; gap: 6px; align-items: center; } .im-pk-fuss { color: var(--leise); font-size: .74rem; }
.im-pk.status-entwurf { border-style: dashed; } .im-pk.neu { justify-content: center; align-items: center; color: var(--primaer); border-style: dashed; background: transparent; font-weight: 600; }
.im-vorschlag-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.im-vorschlag { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--linie); border-radius: 10px; cursor: pointer; background: var(--flaeche); }
.im-vorschlag:has(input:checked) { border-color: var(--primaer); background: #F7F6FE; }
.im-vorschlag span { display: flex; flex-direction: column; gap: 2px; } .im-vorschlag em { font-style: normal; font-size: .78rem; color: var(--leise); }
.im-ki-satz summary { cursor: pointer; display: flex; gap: 10px; align-items: center; list-style: none; } .im-ki-satz summary::-webkit-details-marker { display: none; }
.im-ki-zeile { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin-top: 10px; align-items: center; } .im-ki-zeile [data-ki-stand] { grid-column: 1 / -1; }
.im-status-leiste { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; } .im-status-leiste form { margin-left: auto; }
.im-turtle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.im-turtle .karte { margin: 0 0 14px; } .im-turtle h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin: 0 0 6px; }
.im-t-mitte h3 + p { margin-top: 0; } .im-t-mitte h3:not(:first-child) { margin-top: 12px; }
.im-ablauf { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.im-ablauf li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EEF0F3; } .im-ablauf li:last-child { border-bottom: 0; }
.im-ablauf li > div { display: flex; flex-direction: column; gap: 2px; }
.im-schritt-nr { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--primaer); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.im-lineva-link { font-size: .78rem; font-weight: 600; }
.im-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .im-inline .eingabe { flex: 1 1 160px; min-width: 0; } .im-inline .eingabe.breit { flex: 3 1 260px; }
.im-schritte-editor .im-schritte { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.im-schritt { display: grid; grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; }
.im-schritt-knoepfe { display: flex; gap: 3px; }
.im-kz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.im-kz { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; background: var(--flaeche); border-left: 4px solid #CBD0DA; display: flex; flex-direction: column; gap: 4px; }
.im-kz.ampel-gruen { border-left-color: var(--gruen); } .im-kz.ampel-gelb { border-left-color: #E3A008; } .im-kz.ampel-rot { border-left-color: var(--rot); } .im-kz.ampel-blau { border-left-color: var(--blau); }
.im-kz-kopf small { color: var(--leise); font-size: .7rem; display: block; } .im-kz-kopf strong { font-size: .86rem; line-height: 1.25; }
.im-kz-wert b { font-size: 1.5rem; } .im-kz-wert span { color: var(--leise); font-size: .8rem; } .im-kz-wert em { font-style: normal; font-size: .72rem; margin-left: 6px; }
.trend-besser { color: var(--gruen); } .trend-schlechter { color: var(--rot); } .trend-gleich { color: var(--leise); }
.im-spark { width: 100%; height: 28px; } .im-spark polyline { fill: none; stroke: var(--primaer); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.im-kz-huelle { display: flex; flex-direction: column; gap: 4px; } .im-kz-aktion summary { cursor: pointer; font-size: .78rem; color: var(--primaer); }
.im-ziele { list-style: none; padding: 0; margin: 0; } .im-ziele li { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid #EEF0F3; }
.im-ziele a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.im-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; } .im-filter .eingabe { max-width: 260px; }
.im-chip { display: inline-block; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); text-decoration: none; font-size: .8rem; }
.im-chip.aktiv { background: var(--primaer); border-color: var(--primaer); color: #fff; } .im-chip:hover { border-color: var(--primaer); }
.im-matrix { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; }
.im-matrix td { height: 46px; border-radius: 6px; text-align: center; vertical-align: middle; font-size: .72rem; }
.im-matrix td a { display: inline-block; margin: 1px; padding: 1px 5px; background: rgba(255, 255, 255, .85); border-radius: 4px; color: var(--text); text-decoration: none; font-weight: 600; }
.im-matrix th { font-size: .72rem; color: var(--leise); font-weight: 600; } .im-matrix th small { display: block; font-weight: 400; font-size: .62rem; }
.im-matrix tbody th { width: 26px; }
.im-kontext { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .im-kontext .karte { margin: 0; }
.im-kontext-liste { list-style: none; padding: 0; margin: 0 0 6px; } .im-kontext-liste li { padding: 7px 0; border-bottom: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 2px; }
.im-kontext-liste a { color: inherit; text-decoration: none; } .im-kontext-liste small { font-size: .78rem; }
.im-jahr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.im-monat { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 6px; min-height: 92px; display: flex; flex-direction: column; gap: 4px; }
.im-monat small { color: var(--leise); font-weight: 700; text-transform: uppercase; font-size: .66rem; } .im-monat.jetzt { border-color: var(--primaer); box-shadow: 0 0 0 2px rgba(108, 92, 231, .15); }
.im-audit-chip { font-size: .7rem; padding: 3px 6px; border-radius: 6px; background: var(--blau-hg); color: var(--blau); text-decoration: none; line-height: 1.2; }
.im-audit-chip.st-abgeschlossen { background: var(--gruen-hg); color: var(--gruen); } .im-audit-chip.st-durchgefuehrt, .im-audit-chip.st-bericht { background: var(--gelb-hg); color: var(--gelb); }
.im-check { padding-left: 18px; margin: 0; } .im-check li { padding: 8px 0; border-bottom: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 6px; }
.segment.klein label span { font-size: .74rem; padding: 3px 8px; }
.im-fest { list-style: none; padding: 0; margin: 0 0 10px; } .im-fest li { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; background: #F7F8FA; } .im-fest p { margin: 4px 0; }
.im-fest .fs-haupt { background: var(--rot-hg); } .im-fest .fs-neben { background: var(--gelb-hg); } .im-fest .fs-positiv { background: var(--gruen-hg); }
.im-fest-neu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .im-fest-neu textarea, .im-fest-neu [name=nachweis], .im-fest-neu button, .im-fest-neu small { grid-column: 1 / -1; }
.im-kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.im-spalte { background: #F4F5F8; border-radius: 12px; padding: 8px; min-height: 120px; } .im-spalte h2 { font-size: .86rem; margin: 2px 4px 8px; }
.im-karte { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 10px 11px; color: inherit; text-decoration: none; border-left: 4px solid #CBD0DA; }
.im-karte.schwere-hoch { border-left-color: var(--rot); } .im-karte.schwere-mittel { border-left-color: #E3A008; } .im-karte strong { font-size: .88rem; line-height: 1.3; }
.im-vorschlag-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .im-vorschlag-zeile form { margin-left: auto; }
.im-phasen { list-style: none; display: flex; gap: 0; padding: 0; margin: 0 0 14px; counter-reset: ph; }
.im-phasen li { flex: 1; text-align: center; padding: 7px 4px; font-size: .78rem; color: var(--leise); background: #EEF0F4; position: relative; counter-increment: ph; }
.im-phasen li:first-child { border-radius: 10px 0 0 10px; } .im-phasen li:last-child { border-radius: 0 10px 10px 0; }
.im-phasen li.jetzt { background: var(--primaer); color: #fff; font-weight: 600; } .im-phasen li.jetzt ~ li { background: #F6F7F9; }
.im-warum { padding-left: 20px; margin: 0 0 10px; } .im-warum li { margin-bottom: 6px; }
.im-hinweis { background: #F7F6FE; border-color: #DCD7FB; }
.im-norm-kopf { display: flex; gap: 18px; align-items: center; } .im-norm-zahlen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .im-norm-zahlen p { flex-basis: 100%; margin: 4px 0 0; }
.im-norm-liste { list-style: none; padding: 0; margin: 0; } .im-norm-liste li { display: grid; grid-template-columns: 14px 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF0F3; }
.im-norm-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--rot); } .st-ok .im-norm-punkt { background: var(--gruen); } .st-teil .im-norm-punkt { background: #E3A008; }
.im-norm-kap { font-weight: 700; color: var(--leise); font-size: .8rem; } .im-norm-titel { display: flex; flex-direction: column; }
.im-politik-leiste { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: -6px 0 14px; }
.sms-balken { list-style: none; padding: 0; margin: 0; } .sms-balken li { display: grid; grid-template-columns: 180px 1fr; gap: 8px; align-items: center; font-size: .8rem; padding: 2px 0; }
.sms-balken-wert { display: block; height: 16px; width: calc(var(--n) * 18px + 22px); max-width: 100%; background: var(--blau-hg); color: var(--blau); border-radius: 4px; font-size: .7rem; padding-left: 6px; font-weight: 700; }
.sms-lehren { list-style: none; padding: 0; margin: 0; } .sms-lehren li { padding: 8px 10px; border-left: 4px solid var(--gruen); background: var(--gruen-hg); border-radius: 8px; margin-bottom: 8px; } .sms-lehren p { margin: 4px 0 0; }
/* Richtlinien */
.rl-liste { list-style: none; padding: 0; margin: 0; } .rl-liste li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF0F3; }
.rl-liste li > a { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.rl-nr { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 700; color: var(--primaer); background: #F1EFFD; padding: 3px 8px; border-radius: 6px; }
.rl-titel { display: flex; flex-direction: column; min-width: 0; } .rl-rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rl-kenntnis { display: flex; gap: 6px; align-items: center; } .rl-kenntnis .as-fortschritt { width: 70px; } .rl-kenntnis small { font-size: .72rem; color: var(--leise); }
.rl-arten { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.rl-nr-vorschau { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 1.1rem; color: var(--primaer); padding: 6px 0; }
.rl-vorlage.passt { border-color: var(--primaer); } .rl-vorlage:has(input:checked) { background: #F7F6FE; border-color: var(--primaer); box-shadow: 0 0 0 2px rgba(108, 92, 231, .15); }
.rl-vorlage input { position: absolute; opacity: 0; pointer-events: none; } .rl-vorlage { position: relative; }
.rl-editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.rl-vorschau-spalte { position: sticky; top: 76px; }
.rl-blatt { background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 26px 30px; box-shadow: 0 8px 30px rgba(17, 24, 39, .08); font-size: .88rem; line-height: 1.5; }
.rl-blatt-art { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primaer); font-weight: 700; } .rl-blatt h2 { margin: 2px 0 10px; font-size: 1.25rem; }
.rl-blatt h3 { font-size: .92rem; margin: 14px 0 4px; padding-bottom: 3px; border-bottom: 1px solid #EEF0F3; } .rl-blatt p { margin: 0 0 4px; }
.rl-kopf { width: 100%; border-collapse: collapse; font-size: .74rem; margin-bottom: 8px; } .rl-kopf th { background: #F3F4F6; color: var(--leise); text-align: left; font-weight: 500; padding: 4px 6px; width: 22%; }
.rl-kopf td { padding: 4px 6px; border-bottom: 1px solid #EEF0F3; }
.rl-abschnitte { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.rl-abschnitt { border: 1px solid var(--linie); border-radius: 10px; padding: 8px; background: #FBFBFD; display: flex; flex-direction: column; gap: 6px; }
.rl-abschnitt-kopf { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; align-items: center; } .rl-abschnitt-kopf > span:last-child { display: flex; gap: 3px; }
.rl-nr-punkt { width: 24px; height: 24px; border-radius: 50%; background: var(--primaer); color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.rl-ki { background: #F7F6FE; border-color: #DCD7FB; } .rl-ki textarea { margin: 6px 0; }
.rl-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; align-items: center; } .rl-checks .feld-titel { flex-basis: 100%; }
.rl-status { display: flex; flex-direction: column; gap: 8px; } .rl-status .im-phasen { margin: 0; max-width: 520px; }
.rl-ansicht { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.rl-verlauf { list-style: none; padding: 0; margin: 0; } .rl-verlauf li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EEF0F3; } .rl-verlauf li div { display: flex; flex-direction: column; gap: 2px; }
.rl-rev { flex: 0 0 auto; font-weight: 700; font-size: .78rem; background: var(--gruen-hg); color: var(--gruen); border-radius: 6px; padding: 2px 7px; height: fit-content; }
.rl-pruef { font-family: ui-monospace, monospace; font-size: .68rem; }
.rl-diff { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.5; max-height: 360px; overflow: auto; } .rl-diff.voll { max-height: none; }
.rl-d-neu { background: var(--gruen-hg); color: #135C2A; padding: 1px 6px; } .rl-d-weg { background: var(--rot-hg); color: #8A1C1C; padding: 1px 6px; text-decoration: line-through; } .rl-d-gleich { color: var(--leise); padding: 1px 6px; }
@media (max-width: 960px) { .im-kopf, .im-turtle, .rl-editor, .rl-ansicht { grid-template-columns: minmax(0, 1fr); } .rl-vorschau-spalte { position: static; }
  .im-jahr { grid-template-columns: repeat(4, minmax(0, 1fr)); } .im-lane { grid-template-columns: minmax(0, 1fr); } .im-ki-zeile { grid-template-columns: minmax(0, 1fr); }
  .im-schritt { grid-template-columns: 28px minmax(0, 1fr); } .im-schritt > :nth-child(n+3) { grid-column: 2; } .im-kanban { grid-template-columns: repeat(5, 240px); } }
.im-stepper em { font-style: normal; } .as-kpis.im-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* 9.1: Arbeitsmittel per QR, Begehung am Handy, Betriebsanweisung im Portal */
.am-kopf { border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; color: #fff; background: #047857; }
.am-kopf.am-ueberfaellig, .am-kopf.am-offen { background: #B45309; } .am-kopf.am-gesperrt { background: #B91C1C; }
.am-kopf h1 { color: #fff; margin: 2px 0 6px; font-size: 1.35rem; } .am-kopf small { color: #fff; opacity: .9; display: block; } .am-status { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.am-form { display: flex; flex-direction: column; gap: 8px; } .am-form h2 { margin: 0; }
.am-wahl, .bm-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.am-w input, .bm-w input { position: absolute; opacity: 0; } .am-w, .bm-w { position: relative; }
.am-w span, .bm-w span, button.bm-w { display: block; width: 100%; text-align: center; padding: 11px 8px; border-radius: 10px; border: 1.5px solid var(--linie); background: var(--flaeche);
  font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; color: var(--text); }
.am-w input:checked + span, .bm-w input:checked + span { border-color: var(--primaer); background: #F1EFFD; }
button.bm-w.an.bm-w-ok, .bm-w-ok input:checked + span { background: var(--gruen-hg); border-color: var(--gruen); color: var(--gruen); }
button.bm-w.an.bm-w-mangel, .bm-w-mangel input:checked + span { background: var(--gelb-hg); border-color: #E3A008; color: var(--gelb); }
button.bm-w.an.bm-w-erheblich, .bm-w-erheblich input:checked + span { background: var(--rot-hg); border-color: var(--rot); color: var(--rot); }
button.bm-w.an.bm-w-na, .bm-w-na input:checked + span { background: #EEF0F4; border-color: #9CA3AF; }
.bm { max-width: 760px; margin: 0 auto; } .bm-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .bm-kopf h1 { margin: 2px 0; }
.bm-fortschritt { display: flex; flex-direction: column; gap: 4px; min-width: 160px; } .bm-fortschritt .as-fortschritt { width: 100%; }
.bm-bereich { font-size: .95rem; margin: 18px 0 6px; color: var(--leise); text-transform: uppercase; letter-spacing: .05em; }
.bm-punkt { margin: 0 0 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-left: 4px solid #CBD0DA; }
.bm-punkt.b-ok { border-left-color: var(--gruen); } .bm-punkt.b-mangel { border-left-color: #E3A008; } .bm-punkt.b-erheblich { border-left-color: var(--rot); } .bm-punkt.b-na { border-left-color: #9CA3AF; }
.bm-frage { display: flex; gap: 10px; } .bm-frage > div { display: flex; flex-direction: column; gap: 2px; }
.bm-nr { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #EEF0F4; display: grid; place-items: center; font-weight: 700; font-size: .78rem; }
.bm-punkt.fertig .bm-nr { background: var(--primaer); color: #fff; }
.bm-mehr { display: flex; flex-direction: column; gap: 6px; } .bm-foto { align-self: flex-start; cursor: pointer; }
.bm-frei { display: flex; flex-direction: column; gap: 8px; } .bm-vorschlaege div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bm-qr { display: flex; gap: 14px; align-items: center; } .bm-qr img { width: 110px; height: 110px; }
@media (min-width: 700px) { .bm-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } .am-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pba { --ba: #1F5FBF; max-width: 760px; } .pba-kopf { background: var(--ba); color: #fff; border-radius: 14px 14px 0 0; padding: 14px 16px; }
.pba-kopf h1 { color: #fff; margin: 2px 0; font-size: 1.3rem; } .pba-kopf small { opacity: .9; }
.pba-abschnitt { border: 2px solid var(--ba); border-top: 0; background: var(--flaeche); padding: 0 0 8px; } .pba-abschnitt:last-of-type { border-radius: 0 0 14px 14px; margin-bottom: 12px; }
.pba-abschnitt h2 { background: var(--ba); color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin: 0; padding: 5px 12px; text-align: center; }
.pba-abschnitt ul { margin: 8px 0 0; padding: 0 14px 0 30px; } .pba-abschnitt li { margin-bottom: 4px; } .pba-pikto { display: flex; gap: 6px; padding: 8px 12px 0; flex-wrap: wrap; }
.sk-karte { margin: 0 0 10px; } .sk-karte-svg { width: 100%; height: auto; display: block; }
/* 9.1 Kalkulation: Vorlagen, Angebot-Band, Routenkarte */
.sk-vorlagen { padding: 14px 16px; border: 1px dashed var(--linie); background: var(--hg); }
.sk-vorlagen-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.sk-vorlagen-kopf h2 { margin: 0; font-size: 1rem; display: flex; gap: 6px; align-items: center; }
.sk-vorlagen-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-vorlage { display: inline-flex; align-items: stretch; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); overflow: hidden; }
.sk-vorlage-knopf { all: unset; cursor: pointer; padding: 8px 12px; display: grid; gap: 2px; max-width: 280px; }
.sk-vorlage-knopf small { color: var(--leise); font-size: .78rem; }
.sk-vorlage-knopf:hover, .sk-vorlage-knopf:focus-visible { background: var(--blau-hg); }
.sk-vorlage-knopf.gewaehlt { background: var(--blau-hg); box-shadow: inset 3px 0 0 var(--primaer); }
.sk-vorlage-weg { all: unset; cursor: pointer; padding: 0 10px; color: var(--leise); border-left: 1px solid var(--linie); display: flex; align-items: center; }
.sk-vorlage-weg:hover, .sk-vorlage-weg:focus-visible { color: var(--rot); background: var(--rot-hg); }
.sk-preis .sk-anlegen + .sk-anlegen { margin-top: 8px; }
.kalk-angebot-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 14px 18px; margin: 0 0 16px;
  border-radius: 14px; background: var(--gruen-hg); border: 1px solid var(--gruen); }
.kalk-angebot-band strong { color: var(--gruen); }
.kalk-karte-zeile { margin-top: 10px; }
.kalk-vorlage { margin-top: 10px; } .kalk-vorlage summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.kalk-vorlage-form { display: flex; gap: 8px; margin: 8px 0 4px; } .kalk-vorlage-form .eingabe { flex: 1; min-width: 0; }
.sk-karte-svg .rk-bg { fill: var(--hg); } .sk-karte-svg .rk-leer { stroke: var(--leise); } .sk-karte-svg .rk-legende { fill: var(--leise); }
.sk-karte-svg .rk-hof { fill: var(--text); } .sk-karte-svg .rk-name { fill: var(--text); stroke: var(--hg); } .sk-karte-svg .rk-hof-text { fill: var(--leise); }
.sk-karte-svg .rk-punkt { stroke: var(--flaeche); } .sk-karte-svg .rk-weg { stroke: var(--primaer); }
.sk-karte-svg { border: 1px solid var(--linie); border-radius: 12px; }
/* 9.1 Gesamtprüfung: Handy-Breite */
.sk-art { min-width: 0; } .sk-art strong { overflow-wrap: anywhere; hyphens: auto; }
.raster > * { min-width: 0; }
@media (max-width: 600px) {
  .segment { display: flex; flex-wrap: wrap; max-width: 100%; } .segment label { flex: 1 1 auto; text-align: center; }
  .rl-liste li > a { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rl-liste li { align-items: flex-start; }
  .kalk-angebot-band .knopfreihe { width: 100%; } .kalk-angebot-band .knopfreihe .knopf { flex: 1 1 auto; justify-content: center; }
  .sk-vorlage { width: 100%; } .sk-vorlage-knopf { max-width: none; flex: 1; }
}
/* 9.1.1 Plattform: Mandant verwalten */
.pm-gefahr { border-color: #F5B5B5; } .pm-gefahr h2 { color: #B91C1C; }
/* ================================================================== 9.2 Kapazitätsplanung (überarbeitet 9.2.1) */
.kp { --kp-lab: 230px; --kp-lane: 24px; --kp-indigo: #695EE9; --kp-teal: #0F766E; }
.kp.kp-kompakt { --kp-lane: 16px; }
.kp-kopf { margin-bottom: 10px; }
.kp-check { padding: 12px 16px; margin-bottom: 12px; }
.kp-check h2 { font-size: 1rem; margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.kp-check-felder { display: grid; grid-template-columns: 1.3fr 1.3fr .7fr 1.2fr auto; gap: 8px 10px; align-items: end; }
.kp-f { display: grid; gap: 3px; font-size: .78rem; color: var(--leise); } .kp-f .eingabe { min-width: 0; }
.kp-check-knopf { height: 40px; }
.kp-check-erg { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 12px; }
.kp-erg-kopf { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; margin-bottom: 10px; }
.kp-erg-kopf.ok { background: var(--gruen-hg); } .kp-erg-kopf.nein { background: var(--rot-hg); }
.kp-erg-kopf small { display: block; color: var(--leise); }
.kp-erg-sym { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex: none; }
.ok .kp-erg-sym { background: var(--gruen); } .nein .kp-erg-sym { background: var(--rot); }
.kp-erg-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } .kp-erg-raster h3 { font-size: .92rem; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.kp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.kp-chip-fz { border: 1px solid var(--linie); border-radius: 999px; padding: 2px 10px; font-size: .8rem; background: var(--flaeche); }
.kp-alt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.kp-alt-knopf { all: unset; cursor: pointer; border: 1px solid var(--linie); border-radius: 10px; padding: 5px 10px; font-size: .84rem; background: var(--flaeche); }
.kp-alt-knopf:hover, .kp-alt-knopf:focus-visible { border-color: var(--primaer); background: var(--blau-hg); }
.kp-alt-knopf small { color: var(--leise); margin-left: 4px; }
.kp-einst { padding: 14px 16px; margin-bottom: 12px; }
.kp-einst-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }
.kp-einst fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kp-einst legend { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin-bottom: 4px; width: 100%; }
.kp-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--linie); border-radius: 999px; padding: 4px 10px; font-size: .82rem; background: var(--flaeche); cursor: pointer; }
.kp-chip:has(input:checked) { border-color: var(--primaer); background: var(--blau-hg); }
/* Leiste: Ansicht, Zeitraum, Suche, Blättern */
.kp-leiste { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 4px 0 10px; }
.kp-seg label span { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; font-size: .86rem; }
.kp-seg input:checked + span { background: var(--primaer); color: #fff; }
.kp-suche { flex: 1 1 180px; max-width: 280px; } .kp-suche .eingabe { width: 100%; height: 36px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kp-nav { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.kp-zeitraum-titel { font-family: var(--titel, inherit); font-size: 1.05rem; margin-left: 6px; min-width: 9em; }
.kp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-bottom: 10px; }
.kp-kpi { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 9px 12px; display: grid; }
.kp-kpi[data-tag] { cursor: pointer; } .kp-kpi[data-tag]:hover, .kp-kpi[data-tag]:focus-visible { box-shadow: 0 0 0 2px var(--blau-hg); border-color: var(--primaer); }
.kp-kpi small { font-size: .74rem; color: var(--leise); } .kp-kpi strong { font-size: 1.4rem; line-height: 1.2; } .kp-kpi span { font-size: .76rem; color: var(--leise); }
.kp-kpi.rot { border-color: #F5B5B5; background: var(--rot-hg); } .kp-kpi.rot strong { color: var(--rot); }
.kp-kpi.gelb { border-color: #F3D58A; background: var(--gelb-hg); } .kp-kpi.gruen strong { color: var(--gruen); }
.kp-flaeche { padding: 0; overflow: hidden; position: relative; min-height: 120px; }
.kp-flaeche.laedt { opacity: .55; transition: opacity .2s; }
.kp-flaeche > p { padding: 16px; }
/* Raster (Zeitleiste und Fahrer) */
.kp-tl { overflow: auto; max-height: 74vh; position: relative; overscroll-behavior: contain; }
.kp-tl-innen { position: relative; }
.kp-tl-kopf { position: sticky; top: 0; z-index: 7; background: var(--flaeche); border-bottom: 1px solid var(--linie); box-shadow: 0 2px 4px rgba(21, 37, 61, .04); }
.kp-tl-zeile { display: flex; position: relative; z-index: 1; min-height: 36px; border-bottom: 1px solid var(--linie); }
.kp-tl-lab { position: sticky; left: 0; z-index: 4; flex: 0 0 var(--kp-lab); width: var(--kp-lab); box-sizing: border-box; background: var(--flaeche);
  border-right: 1px solid var(--linie); padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; overflow: hidden; }
.kp-tl-lab strong { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-tl-lab small { font-size: .72rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.kp-lab-a { color: inherit; text-decoration: none; padding-right: 22px; position: sticky; }
a.kp-lab-a strong { color: var(--primaer); }
.kp-lab-pfeil { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--schwach); font-size: 1.1rem; transition: transform .15s, color .15s; }
a.kp-lab-a:hover, a.kp-lab-a:focus-visible { background: var(--indigo-hg, #F0EFFD); outline: none; }
a.kp-lab-a:hover .kp-lab-pfeil, a.kp-lab-a:focus-visible .kp-lab-pfeil { color: var(--primaer); transform: translate(3px, -50%); }
a.kp-lab-a:hover strong { text-decoration: underline; }
.kp-lab-warn { color: var(--rot); font-size: .8rem; }
.kp-frei-zahl { font-weight: 600; color: var(--gruen); }
.kp-tl-spur { position: relative; flex: none; }
.kp-tl-monate { min-height: 26px; overflow: hidden; } .kp-tl-mon { position: absolute; top: 0; bottom: 0; padding: 5px 8px; font-size: .78rem; font-weight: 600; border-left: 1px solid var(--linie); white-space: nowrap; overflow: visible; }
.kp-tl-mon span { position: sticky; left: calc(var(--kp-lab) + 8px); display: inline-block; }
.kp-tl-mon.klick { cursor: pointer; } .kp-tl-mon.klick:hover { background: var(--blau-hg); color: var(--primaer); }
.kp-tl-tage { min-height: 32px; }
.kp-tl-tag { all: unset; position: absolute; top: 2px; bottom: 2px; display: grid; place-items: center; font-size: .72rem; cursor: pointer; line-height: 1.05; text-align: center; box-sizing: border-box; }
.kp-tl-tag small { display: block; font-size: .62rem; color: var(--leise); }
.kp-tl-tag.we, .kp-tl-tag.ft { color: var(--rot); } .kp-tl-tag.heute { background: var(--primaer); color: #fff; border-radius: 6px; } .kp-tl-tag.heute small { color: #fff; }
.kp-tl-tag.eng:not(.heute)::after { content: ""; position: absolute; top: 2px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--rot); }
.kp-tl-tag:hover, .kp-tl-tag:focus-visible { background: var(--blau-hg); border-radius: 6px; }
.kp-tl-bg { position: absolute; top: 0; bottom: 0; left: var(--kp-lab); pointer-events: none; z-index: 0; }
.kp-tl-we { position: absolute; top: 0; bottom: 0; background: rgba(105, 94, 233, .045); } .kp-tl-we.ft { background: rgba(220, 38, 38, .05); }
.kp-ohne-we .kp-tl-we { display: none; }
.kp-tl-ferien { position: absolute; top: 0; height: 4px; background: #FCD34D; opacity: .7; }
.kp-tl-heute { position: absolute; top: 0; bottom: 0; background: rgba(105, 94, 233, .08); border-left: 2px solid rgba(105, 94, 233, .55); box-sizing: border-box; }
.kp-tl-spalte { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 2; background: rgba(21, 37, 61, .045); outline: 1px solid rgba(105, 94, 233, .25); }
.kp-tl-abschnitt { all: unset; box-sizing: border-box; cursor: pointer; position: sticky; left: 0; z-index: 3; display: flex; gap: 8px; align-items: baseline; padding: 10px 12px 4px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--primaer); width: max-content; }
.kp-tl-abschnitt i { font-style: normal; display: inline-block; transition: transform .15s; } .kp-tl-abschnitt.zu i { transform: rotate(-90deg); }
.kp-tl-abschnitt:hover span, .kp-tl-abschnitt:focus-visible span { text-decoration: underline; }
.kp-tl-abschnitt small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--leise); }
.kp-tl-hinweis { position: sticky; left: 0; padding: 8px 12px; font-size: .8rem; color: var(--leise); width: max-content; }
.kp-tl-klick { cursor: cell; min-height: calc(var(--lanes, 1) * var(--kp-lane) + 14px); }
.kp-tl-zeile:hover > .kp-tl-lab:not(a) { background: var(--hg); }
.kp-tl-zeile:hover { background: rgba(105, 94, 233, .025); }
.kp-tl-ohne .kp-tl-lab strong { color: #9A5B00; }
.kp-kap { all: unset; position: absolute; top: 4px; bottom: 4px; display: grid; place-items: center; font-size: .74rem; font-weight: 700; cursor: pointer; border-radius: 5px;
  box-sizing: border-box; border: 1px solid var(--flaeche); }
.kp-kap.gruen { background: #D1FAE5; color: #047857; } .kp-kap.gelb { background: #FEF3C7; color: #92400E; } .kp-kap.rot { background: #FEE2E2; color: #B91C1C; }
.kp-kap.still { background: transparent; color: var(--leise); font-weight: 400; }
.kp-kap:hover, .kp-kap:focus-visible { outline: 2px solid var(--text); outline-offset: -1px; z-index: 2; }
.kp-tl-jahr .kp-kap { top: 6px; bottom: 6px; border-radius: 1px; border: 0; }
.kp-bal { all: unset; box-sizing: border-box; position: absolute; top: calc(6px + var(--l, 0) * var(--kp-lane)); height: calc(var(--kp-lane) - 3px); border-radius: 6px;
  font-size: .72rem; font-weight: 500; line-height: calc(var(--kp-lane) - 5px); padding: 0 6px; overflow: hidden; white-space: nowrap; cursor: pointer; color: #fff; z-index: 3;
  box-shadow: 0 1px 2px rgba(21, 37, 61, .12); }
.kp-bal span { overflow: hidden; text-overflow: ellipsis; display: block; }
.kp-bal:hover, .kp-bal:focus-visible { filter: brightness(1.05); outline: 2px solid var(--text); outline-offset: 1px; z-index: 4; }
.kp-tl-jahr .kp-bal { border-radius: 2px; padding: 0; box-shadow: none; }
.kp-teil { all: unset; box-sizing: border-box; position: absolute; bottom: 3px; height: 7px; border-radius: 3px; background: #CBD5E1; cursor: pointer; z-index: 2;
  font-size: .6rem; line-height: 7px; text-align: center; color: #334155; font-weight: 700; }
.kp-tl.mit-text .kp-teil { height: 9px; line-height: 9px; }
.kp-teil:hover, .kp-teil:focus-visible { background: #94A3B8; color: #fff; }
.kp-frist { all: unset; box-sizing: border-box; position: absolute; top: 1px; height: 13px; min-width: 8px; max-width: calc(var(--tb, 40px) - 4px); padding: 0 3px; border-radius: 4px;
  font-size: .58rem; font-weight: 700; line-height: 13px; text-align: center; cursor: pointer; z-index: 5; color: #fff; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-tl-jahr .kp-frist, .kp-tl-quartal .kp-frist { height: 8px; width: 8px; min-width: 0; padding: 0; border-radius: 50%; top: 2px; }
.kp-frist.s-offen { background: #F59E0B; } .kp-frist.s-ueberfaellig { background: #DC2626; } .kp-frist.s-geplant { background: #10B981; }
.kp-frist:hover, .kp-frist:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.kp-legende .kp-frist { position: static; display: inline-block; width: 10px; height: 10px; min-width: 0; padding: 0; border-radius: 50%; margin: 0 2px 0 6px; vertical-align: middle; }
/* Fahrpersonal je Tag */
.kp-ma-spur { min-height: 34px; }
.kp-ma-zelle { all: unset; box-sizing: border-box; position: absolute; top: 5px; bottom: 5px; border-radius: 5px; cursor: pointer; display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; z-index: 2; }
.kp-tl-jahr .kp-ma-zelle { border-radius: 1px; top: 7px; bottom: 7px; }
.kp-ma-zelle.m-frei { background: #ECFDF5; box-shadow: inset 0 0 0 1px #A7F3D0; }
.kp-ma-zelle.m-urlaub { background: #86EFAC; color: #14532D; } .kp-ma-zelle.m-abwesend { background: #CBD5E1; color: #1E293B; }
.kp-ma-zelle.m-schulung { background: #DDD6FE; color: #4C1D95; } .kp-ma-zelle.m-fahrt { background: var(--kp-indigo); color: #fff; }
.kp-ma-zelle.m-dienst { background: #7DD3FC; color: #075985; } .kp-ma-zelle.m-linie { background: #E2E8F0; color: #334155; }
.kp-ma-zelle.m-wunsch { background: #FEF3C7; color: #92400E; box-shadow: inset 0 0 0 1px #F59E0B; }
.kp-ma-zelle.vorl { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.65) 0 4px, transparent 4px 8px); }
.kp-ma-zelle:hover, .kp-ma-zelle:focus-visible { outline: 2px solid var(--text); outline-offset: 0; z-index: 3; }
.kp-tl-fahrer .kp-tl-zeile.kp-z-ma { min-height: 34px; }
.kp-ma-mini { display: inline-block; width: 12px; height: 10px; border-radius: 3px; }
.kp-ma-mini.m-frei { background: #ECFDF5; box-shadow: inset 0 0 0 1px #A7F3D0; }
/* Typfarben (Balken, Kalender, Legende) */
.t-zusage, .t-auftrag, .t-fahrt { background: var(--kp-indigo); color: #fff; }
.t-reise { background: var(--kp-teal); color: #fff; }
.t-reise_entwurf { background: repeating-linear-gradient(135deg, #CCEFEA 0 6px, #E6F7F4 6px 12px); color: #0F5E58; border: 1px solid #5EB8AE; }
.t-angebot { background: repeating-linear-gradient(135deg, #DCD8FB 0 6px, #EFEDFE 6px 12px); color: #3F35B5; border: 1px solid #A9A2F2; }
.t-anfrage { background: #F6F5FE; color: #4F46B5; border: 1px dashed #A9A2F2; }
.t-werkstatt { background: #FDE7C3; color: #8A4B00; border: 1px solid #F59E0B; }
.t-sperre { background: repeating-linear-gradient(135deg, #E2E8F0 0 6px, #F1F5F9 6px 12px); color: #334155; border: 1px solid #94A3B8; }
.t-gesperrt { background: repeating-linear-gradient(135deg, #FCA5A5 0 6px, #FEE2E2 6px 12px); color: #991B1B; border: 1px solid #EF4444; }
.t-linie { background: #CBD5E1; color: #334155; } .t-dienst { background: #BAE6FD; color: #075985; }
.t-urlaub { background: #86EFAC; color: #14532D; } .t-urlaub.vorl { background: repeating-linear-gradient(135deg, #BBF7D0 0 6px, #ECFDF5 6px 12px); border: 1px solid #4ADE80; }
.t-abwesend { background: #CBD5E1; color: #1E293B; } .t-abwesend.vorl { background: repeating-linear-gradient(135deg, #E2E8F0 0 6px, #F8FAFC 6px 12px); }
.t-schulung { background: #DDD6FE; color: #4C1D95; }
.t-wunsch { background: #FFFBEB; color: #92400E; border: 1px dotted #D97706; } .t-wunsch:not(.vorl) { background: #FEF3C7; }
/* Legende */
.kp-legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.kp-leg { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); }
.kp-leg > i { width: 18px; height: 10px; border-radius: 3px; display: inline-block; box-sizing: border-box; }
.kp-leg.aus { opacity: .45; text-decoration: line-through; } .kp-leg-info { cursor: default; flex-wrap: wrap; }
.kp-chip-typ { display: inline-block; font-size: .72rem; border-radius: 999px; padding: 1px 8px; font-weight: 600; }
/* kleine Zeichen statt Emoji */
.kp-sym-bus, .kp-sym-ma { display: inline-block; flex: none; margin-right: 3px; vertical-align: -1px; box-sizing: border-box; border: 1.6px solid currentColor; }
.kp-sym-bus { width: 11px; height: 9px; border-radius: 2px 2px 3px 3px; } .kp-sym-ma { width: 9px; height: 9px; border-radius: 50%; }
/* Kalender */
.kp-kal-wrap { padding: 10px; } .kp-kal-wrap.mehrere { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kp-kal-titel { font-size: .95rem; margin: 4px 4px 8px; }
.kp-kal-gitter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kp-kal-wt { font-size: .74rem; color: var(--leise); text-align: center; text-transform: uppercase; letter-spacing: .05em; } .kp-kal-wt.we { color: var(--rot); }
.kp-kal-tag { all: unset; box-sizing: border-box; cursor: pointer; min-height: 108px; border: 1px solid var(--linie); border-radius: 12px; padding: 6px 7px; display: flex;
  flex-direction: column; gap: 4px; background: var(--flaeche); position: relative; overflow: hidden; }
.kp-kal.kompakt .kp-kal-tag { min-height: 58px; }
.kp-kal-tag:hover, .kp-kal-tag:focus-visible { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--blau-hg); }
.kp-kal-tag.we { background: #FAFAFE; } .kp-kal-tag.vorbei { opacity: .55; }
.kp-kal-tag.heute { border: 2px solid var(--primaer); }
.kp-kal-tag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.kp-kal-tag.a-gruen::before { background: #34D399; } .kp-kal-tag.a-gelb::before { background: #FBBF24; } .kp-kal-tag.a-rot::before { background: #F87171; }
.kp-kal-tag.still::before { background: transparent; }
.kp-kal-nr { font-weight: 700; font-size: .9rem; display: flex; gap: 6px; align-items: baseline; } .kp-kal-nr small { font-size: .62rem; color: var(--rot); font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kp-kal-tag.we .kp-kal-nr, .kp-kal-tag.ft .kp-kal-nr { color: var(--rot); }
.kp-kal-pillen { display: flex; flex-wrap: wrap; gap: 4px; }
.kp-pill { display: inline-flex; gap: 2px; align-items: center; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.kp-pill small { font-weight: 400; opacity: .7; }
.kp-pill.gruen { background: #D1FAE5; color: #047857; } .kp-pill.gelb { background: #FEF3C7; color: #92400E; } .kp-pill.rot { background: #FEE2E2; color: #B91C1C; }
.kp-pill.gross { font-size: .9rem; padding: 6px 12px; gap: 5px; border-radius: 12px; font-weight: 500; } .kp-pill.gross strong { font-size: 1.05rem; }
.kp-kal-liste { display: grid; gap: 2px; min-width: 0; }
.kp-kal-b { font-size: .7rem; border-radius: 5px; padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-kal-frist { background: #fff; border: 1px solid var(--linie); color: var(--text); padding-left: 14px; position: relative; }
.kp-kal-frist::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #F59E0B; }
.kp-kal-frist.s-ueberfaellig::before { background: #DC2626; } .kp-kal-frist.s-geplant::before { background: #10B981; }
.kp-kal-mehr { font-size: .68rem; color: var(--leise); }
.kp-kal-punkte { display: flex; gap: 3px; } .kp-kal-punkte i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.kp-kal-punkte .kp-punkt-frist { background: #F59E0B; }
/* Jahr */
.kp-jahr { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 14px; }
.kp-mini { border: 1px solid var(--linie); border-radius: 12px; padding: 10px; background: var(--flaeche); }
.kp-mini-titel { all: unset; cursor: pointer; font-weight: 700; font-size: .9rem; margin-bottom: 6px; display: block; }
.kp-mini-titel:hover { color: var(--primaer); }
.kp-mini-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kp-mini-wt { font-size: .62rem; color: var(--leise); text-align: center; }
.kp-mini-tag { all: unset; cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; font-size: .66rem; border-radius: 5px; background: var(--hg); color: var(--text); }
.kp-mini-tag.a-gruen { background: #D1FAE5; color: #065F46; } .kp-mini-tag.a-gelb { background: #FDE68A; color: #78350F; } .kp-mini-tag.a-rot { background: #FCA5A5; color: #7F1D1D; }
.kp-mini-tag.vorbei { opacity: .45; } .kp-mini-tag.heute { outline: 2px solid var(--primaer); outline-offset: 1px; font-weight: 700; }
.kp-mini-tag:hover, .kp-mini-tag:focus-visible { outline: 2px solid var(--text); }
.kp-mini-fuss { display: block; margin-top: 6px; font-size: .72rem; color: var(--leise); } .kp-mini-fuss.rot { color: var(--rot); font-weight: 600; }
.kp-jahr-hinweis { padding: 0 14px 12px; }
/* Popover und Tagesdetails */
.kp-pop { position: fixed; z-index: 60; width: min(360px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow: auto; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(21, 37, 61, .18); padding: 12px 14px; display: grid; gap: 7px; font-size: .86rem; box-sizing: border-box; }
.kp-pop p { margin: 0; }
.kp-pop-kopf { display: flex; gap: 8px; align-items: center; } .kp-pop-kopf small { color: var(--leise); }
.kp-pop-zu { all: unset; cursor: pointer; margin-left: auto; padding: 0 4px; color: var(--leise); }
.kp-pop-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-pop-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .kp-pop-liste li { border-bottom: 1px solid var(--linie); padding-bottom: 4px; }
.kp-blocken { border: 1px solid var(--linie); border-radius: 10px; padding: 6px 10px; }
.kp-blocken summary { cursor: pointer; font-size: .82rem; color: var(--primaer); font-weight: 600; }
.kp-blocken[open] summary { margin-bottom: 6px; }
.kp-pop-form { display: grid; gap: 6px; } .kp-pop-form label { display: grid; gap: 2px; font-size: .74rem; color: var(--leise); }
.kp-pop-form .eingabe { min-width: 0; width: 100%; box-sizing: border-box; }
.kp-pop-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kp-drawer { position: fixed; z-index: 55; top: 70px; right: 14px; bottom: 14px; width: min(400px, calc(100vw - 28px)); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 16px; box-shadow: 0 16px 40px rgba(21, 37, 61, .2); display: flex; flex-direction: column; overflow: hidden; }
.kp-drawer-kopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.kp-drawer-inhalt { overflow: auto; padding: 12px 14px 18px; } .kp-drawer-inhalt h3 { font-size: .9rem; margin: 14px 0 6px; }
.kp-dr-kpis { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.kp-dr-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; font-size: .84rem; }
.kp-dr-liste li { padding-bottom: 5px; border-bottom: 1px solid var(--linie); }
/* Vollbild (Fullscreen-API, sonst im Fenster) */
.kp.kp-voll { position: fixed; inset: 0; z-index: 50; background: var(--hg); padding: 12px 16px; overflow: auto; display: flex; flex-direction: column; box-sizing: border-box; margin: 0; }
.kp.kp-voll > .kp-kopf p, .kp.kp-voll > p.leise { display: none; }
.kp.kp-voll .kp-kopf { margin-bottom: 6px; } .kp.kp-voll .kp-kopf h1 { font-size: 1.3rem; margin: 0; }
.kp.kp-voll .kp-check { margin-bottom: 8px; padding: 8px 14px; } .kp.kp-voll .kp-check h2 { display: none; }
.kp.kp-voll .kp-arbeit { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.kp.kp-voll .kp-flaeche { flex: 1; min-height: 240px; display: flex; flex-direction: column; } .kp.kp-voll .kp-tl { max-height: none; flex: 1; }
.kp.kp-voll .kp-drawer { top: 14px; }
html.kp-voll-offen { overflow: hidden; }
.kp:fullscreen { background: var(--hg); }
@media (max-width: 760px) {
  .kp { --kp-lab: 128px; --kp-lane: 22px; }
  .kp-check-felder { grid-template-columns: 1fr 1fr; } .kp-check-knopf { grid-column: 1 / -1; }
  .kp-erg-raster { grid-template-columns: 1fr; }
  .kp-suche { max-width: none; order: 5; flex-basis: 100%; }
  .kp-nav { margin-left: 0; width: 100%; } .kp-zeitraum-titel { min-width: 0; }
  .kp-kal-gitter { gap: 3px; } .kp-kal-tag { min-height: 64px; padding: 4px 3px 4px 6px; border-radius: 9px; }
  .kp-kal-liste { display: none; } .kp-pill { font-size: .66rem; padding: 0 4px; } .kp-pill small { display: none; }
  .kp-kal-nr small { display: none; }
  .kp-drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; }
  .kp-jahr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  .kp.kp-voll { padding: 8px; } .kp.kp-voll .kp-check { display: none; }
  .kp-kopf .knopfreihe .knopf span:not(.sr) { display: none; }
}
/* Fahrzeugakte: Verfügbarkeit (9.2.1) */
.fz-verf-liste { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; font-size: .88rem; }
.fz-verf-liste li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.fz-verf-neu { margin: 6px 0 10px; } .fz-verf-neu > summary { list-style: none; display: inline-flex; } .fz-verf-neu > summary::-webkit-details-marker { display: none; }
.fz-verf-neu[open] > summary { margin-bottom: 8px; }
.kp-ma-mini { width: 20px; height: 14px; font-style: normal; font-size: .56rem; font-weight: 700; display: inline-grid; place-items: center; }
.kp-ma-mini.m-urlaub { background: #86EFAC; color: #14532D; } .kp-ma-mini.m-abwesend { background: #CBD5E1; color: #1E293B; }
.kp-ma-mini.m-schulung { background: #DDD6FE; color: #4C1D95; } .kp-ma-mini.m-fahrt { background: var(--kp-indigo); color: #fff; }
.kp-ma-mini.m-dienst { background: #7DD3FC; color: #075985; } .kp-ma-mini.m-linie { background: #E2E8F0; color: #334155; }
.kp-ma-mini.m-wunsch { background: #FEF3C7; color: #92400E; box-shadow: inset 0 0 0 1px #F59E0B; }
.kp-ma-mini.vorl { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.65) 0 3px, transparent 3px 6px); }
/* 9.2.1 Kalkulation: Einsatzform, Fixkosten-Anteile, Übernachtung Fahrer/in */
.kalk-teile { margin-top: 3px; font-size: .78rem; } .kalk-teile summary { cursor: pointer; color: var(--primaer); }
.kalk-teile ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.kalk-teile li { display: flex; justify-content: space-between; gap: 12px; color: var(--leise); border-bottom: 1px dotted var(--linie); }
.kalk-ef-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 8px; }
.kalk-ef-karte { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; display: grid; gap: 5px; align-content: start; background: var(--flaeche); }
.kalk-ef-karte.guenstig { border-color: #6EE7B7; } .kalk-ef-karte.gewaehlt { border: 2px solid var(--primaer); box-shadow: 0 0 0 3px var(--blau-hg); }
.kalk-ef-karte strong { font-size: .86rem; line-height: 1.25; } .kalk-ef-preis { font-size: 1.25rem; font-weight: 700; } .kalk-ef-preis small { font-size: .74rem; font-weight: 400; color: var(--leise); }
.kalk-ef-karte > small { color: var(--leise); font-size: .76rem; line-height: 1.35; } .kalk-ef-karte .badge { justify-self: start; }
.sk-einsatz, .sk-fahrer { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px 4px; margin: 12px 0; }
.sk-einsatz legend, .sk-fahrer legend { font-size: .82rem; font-weight: 600; padding: 0 6px; }
.sk-einsatz-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 8px; }
.sk-ef { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; cursor: pointer; background: var(--flaeche); }
.sk-ef:has(input:checked) { border-color: var(--primaer); background: var(--blau-hg); }
.sk-ef span { display: grid; gap: 2px; } .sk-ef strong { font-size: .82rem; line-height: 1.25; } .sk-ef small { font-size: .74rem; color: var(--leise); } .sk-ef small.gruen { color: var(--gruen); font-weight: 600; }
.sk-fahrer .hilfe { margin-top: 0; }
/* 9.2.1: Ablauf Bus (Anfrage → Angebot → Zusage → Fahrauftrag → eingeplant → erledigt) und Verfügbarkeit in der Kalkulation */
.bus-ablauf { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 12px 16px 10px; margin: 0 0 12px; }
.bus-ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; counter-reset: ba; }
.bus-ablauf li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: .74rem; color: var(--leise); }
.bus-ablauf li::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--linie); z-index: 0; }
.bus-ablauf li:first-child::before { display: none; }
.bus-ablauf li.fertig::before, .bus-ablauf li.jetzt::before { background: var(--primaer); }
.ba-punkt { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .78rem;
  background: var(--flaeche); border: 2px solid var(--linie); color: var(--leise); box-sizing: border-box; }
.bus-ablauf li.fertig .ba-punkt { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.bus-ablauf li.jetzt .ba-punkt { border-color: var(--primaer); color: var(--primaer); box-shadow: 0 0 0 4px var(--blau-hg); }
.bus-ablauf li.jetzt .ba-text { color: var(--text); font-weight: 600; }
.ba-naechstes { margin: 10px 0 0; font-size: .84rem; border-top: 1px solid var(--linie); padding-top: 8px; }
.kalk-verf { display: flex; gap: 12px; align-items: center; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; border: 1px solid var(--linie); }
.kalk-verf.ok { background: var(--gruen-hg); border-color: #A7F3D0; } .kalk-verf.nein { background: var(--rot-hg); border-color: #F5B5B5; }
.kalk-verf > div { display: grid; gap: 1px; flex: 1; font-size: .86rem; } .kalk-verf span { font-size: .82rem; }
.kalk-verf-sym { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.kalk-verf.ok .kalk-verf-sym { background: var(--gruen); } .kalk-verf.nein .kalk-verf-sym { background: var(--rot); }
@media (max-width: 760px) {
  .bus-ablauf ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; } .bus-ablauf li:nth-child(4)::before { display: none; }
  .kalk-verf { flex-wrap: wrap; }
}
.sk-nacht { all: unset; cursor: pointer; align-self: center; white-space: nowrap; font-size: .76rem; padding: 4px 9px; border-radius: 999px; border: 1px dashed var(--linie); color: var(--leise); }
.sk-nacht:hover, .sk-nacht:focus-visible { border-color: var(--primaer); color: var(--primaer); }
.sk-nacht.an { border-style: solid; border-color: var(--primaer); background: var(--blau-hg); color: var(--primaer); font-weight: 600; }
.sk-halt.ziel .sk-nacht { margin-left: 8px; }
.sk-tage { margin: 8px 0; } .sk-tage ol { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.sk-tage li { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .84rem; border-bottom: 1px solid var(--linie); padding-bottom: 4px; }
.sk-tage li b { color: var(--primaer); } .sk-tage li span { margin-left: auto; color: var(--leise); }
.kalk-tage { font-size: .82rem; margin: 6px 0 8px; }
.sk-nacht[hidden] { display: none; }

/* 9.2.3: Betriebshof als Start und Ende, Kartenbild der Route */
.sk-halt.hof .sk-punkt { border-radius: 4px; border-color: #0F172A; background: #0F172A; }
.sk-halt.hof.ende .sk-punkt { background: #fff; border-style: dashed; }
.sk-halt.hof .sk-halt-label small { font-weight: 400; margin-left: 4px; }
.sk-halt.hof::before { background: repeating-linear-gradient(to bottom, #94A3B8 0 4px, transparent 4px 8px); }
.sk-halt.hof.ende::before, .sk-halt.zurueck + .sk-halt.hof.ende::before { display: none; }
.sk-halt.zurueck::before { display: block; background: repeating-linear-gradient(to bottom, #94A3B8 0 4px, transparent 4px 8px); }
.sk-route.kompakt .sk-halt.hof.ende::before { display: none; }
.sk-hof-std { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; margin-top: 6px; color: var(--text); }
.hinweis-zeile { font-size: .8rem; margin-top: 5px; padding: 4px 8px; border-radius: 6px; }
.hinweis-zeile.gelb { background: #FEF7E0; color: #8A5A00; }
.sk-hof-info { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; font-size: .84rem; }
.sk-hof-info.ok { background: #EAF8F1; color: #0F6B47; } .sk-hof-info.gelb { background: #FEF7E0; color: #8A5A00; }
.sk-hof-info.fehler { background: #FDECEC; color: var(--rot); }
.rk-bild { margin: 0; }
.rk-bild img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 320; object-fit: cover; border-radius: 12px; border: 1px solid var(--linie); background: var(--hg); }
.rk-bild figcaption { margin-top: 6px; display: grid; gap: 4px; font-size: .8rem; }
.rk-legende-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--leise); }
.rk-l { display: inline-flex; align-items: center; gap: 6px; }
.rk-l::before { content: ""; width: 22px; height: 0; border-top: 4px solid #1D4ED8; border-radius: 2px; }
.rk-l.zurueck::before { border-top: 3px dashed #7C3AED; } .rk-l.leer::before { border-top: 3px dashed #64748B; }
.rk-l.hof::before { display: none; } .rk-l.hof b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #0F172A; color: #fff; font-size: .68rem; }
.sk-strecke-info .rk-stationen, .rk-stationen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sk-strecke-info .rk-stationen li, .rk-stationen li { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 0; color: var(--text); }
.rk-nr { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: #1D4ED8; color: #fff; font-size: .7rem; padding: 0 4px; }
.rk-nr.start { background: #15803D; } .rk-nr.ziel { background: #B91C1C; }
.sk-karte.bild { margin-bottom: 12px; }

/* 9.2.3: Kostensätze mit Herkunft */
.ks-legende { font-size: .8rem; color: var(--leise); margin: -4px 0 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ks-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 20px; }
.ks-gruppe h3, .ks-klasse-inhalt h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); margin: 0 0 6px; }
.ks-liste { list-style: none; margin: 0; padding: 0; }
.ks-liste li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--linie); align-items: center; }
.ks-liste li:first-child { border-top: 0; }
.ks-name { font-size: .88rem; } .ks-wert { text-align: right; white-space: nowrap; } .ks-wert small { font-weight: 400; color: var(--leise); }
.ks-liste .badge { justify-self: start; }
.ks-ist { font-size: .78rem; color: var(--leise); text-align: right; } .ks-ist.abw { color: #8A5A00; font-weight: 600; }
.ks-klasse { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.ks-klasse summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.ks-kurz { font-size: .84rem; color: var(--leise); }
.ks-klasse-inhalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px 20px; margin-top: 12px; }
.ks-klasse-inhalt .ks-breit { grid-column: 1 / -1; } .ks-klasse-inhalt .ks-breit .ks-liste { columns: 2 300px; } .ks-klasse-inhalt .ks-breit .ks-liste li { break-inside: avoid; }
.ks-rechnung td { padding: 5px 6px; font-size: .86rem; } .ks-rechnung tr.summe td { font-weight: 700; border-top: 2px solid var(--linie); }
.ks-neu { margin-top: 12px; } .ks-neu summary { cursor: pointer; color: var(--primaer); font-weight: 600; font-size: .9rem; } .ks-neu form { margin-top: 10px; }
.ks-feld-info { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: .78rem; }
.ks-feld.richtwert .eingabe { border-color: #F2C94C; background: #FFFBEB; }
.ks-feld.uebernommen .eingabe { border-color: #34D399; background: #ECFDF5; }
.sk-stand a { white-space: nowrap; } .sk-richtwert { display: block; margin-top: 4px; color: #8A5A00; font-size: .78rem; }

/* 9.2.3: Kapazitätsplanung – Tagesansicht mit Stundenleiste */
.kp-tl-tagesansicht { --kp-lane: 28px; }
.kp-tl-tagesansicht .kp-tl-tage .kp-tl-lab { justify-content: center; }
.kp-tg-std { position: absolute; top: 4px; bottom: 4px; font-size: .72rem; color: var(--leise); padding-left: 4px; border-left: 1px solid var(--linie); box-sizing: border-box; }
.kp-tg-bg { background-image: repeating-linear-gradient(to right, var(--linie) 0 1px, transparent 1px var(--hw, 40px)); opacity: .7; }
.kp-tg-jetzt { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #DC2626; z-index: 6; }
.kp-tg-jetzt::before { content: ""; position: absolute; top: 0; left: -5px; width: 8px; height: 8px; border-radius: 50%; background: #DC2626; }
.kp-tg-klick { cursor: cell; min-height: calc(var(--lanes, 1) * var(--kp-lane) + 12px); }
.kp-tg-bal { font-size: .74rem; }
.kp-tg-bal span { position: relative; z-index: 1; } .kp-tg-bal b { font-weight: 700; margin-right: 4px; }
.kp-tg-bal.mit-kern { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 5px, transparent 5px 10px); }
.kp-tg-kern { position: absolute; top: 0; bottom: 0; background: rgba(15, 23, 42, .22); border-left: 2px solid rgba(255,255,255,.75); border-right: 2px solid rgba(255,255,255,.75); }
.kp-tg-bal.teil { opacity: .85; }
.kp-tg-bal.vorher { border-top-left-radius: 0; border-bottom-left-radius: 0; } .kp-tg-bal.nachher { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.kp-tg-kap { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 10px; font-size: .8rem; color: var(--leise); position: sticky; left: var(--kp-lab); }
.kp-tg-kapzeile .kp-tl-spur { width: auto !important; flex: 1; }
.kp-frist-chip { display: inline-block; font-size: .6rem; font-weight: 700; color: #fff; padding: 0 4px; border-radius: 4px; vertical-align: middle; line-height: 14px; }
.kp-frist-chip.s-offen { background: #F59E0B; } .kp-frist-chip.s-ueberfaellig { background: #DC2626; } .kp-frist-chip.s-geplant { background: #10B981; }
.sk-bindung { margin: 6px 0 0; font-size: .82rem; color: var(--text); background: #F4F3FE; border-radius: 8px; padding: 6px 10px; }

/* 9.3: Menü – Suche, Favoriten, zuletzt geöffnet, einklappbare Gruppen, Stern */
.nav-suche { position: relative; margin: 0 0 8px; }
.nav-suche .symbol { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .7; display: inline-flex; pointer-events: none; }
.nav-suche input { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; color: #fff;
  padding: 7px 10px 7px 32px; font: inherit; font-size: .86rem; }
.nav-suche input::placeholder { color: #98A2B3; } .nav-suche input:focus { outline: 2px solid var(--mint, #00D6A3); outline-offset: 0; background: rgba(255, 255, 255, .12); }
.nav-sucht .nav-schnell, .nav-sucht .reiter-inhalt { display: none; }
.nav-treffer { margin: 0 0 10px; }
.nav-treffer .nav-text small { display: block; font-size: .7rem; color: #98A2B3; margin-top: 1px; }
.nav-treffer .nav-eintrag.erster { background: rgba(255, 255, 255, .1); }
.nav-leer { font-size: .78rem; color: #98A2B3; margin: 6px 10px; }
.nav-schnell-gruppe { margin: 0 0 8px; padding: 0 0 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nav-schnell-kopf { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #98A2B3; margin: 4px 10px 4px; font-weight: 650; }
.nav-eintrag.nav-kurz { padding: 5px 10px; font-size: .86rem; }
.nav-abschnitt { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: calc(100% - 4px); cursor: pointer; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: #98A2B3; margin: 14px 2px 4px; padding: 3px 8px; border-radius: 6px; font-weight: 650; }
.nav-abschnitt:hover { color: #fff; background: rgba(255, 255, 255, .05); } .nav-abschnitt:focus-visible { outline: 2px solid #fff; }
.nav-abschnitt i { margin-left: auto; font-style: normal; transition: transform .15s; } .nav-abschnitt[aria-expanded="false"] i { transform: rotate(-90deg); }
.nav-anzahl { font-size: .66rem; letter-spacing: 0; opacity: .7; display: none; } .nav-abschnitt[aria-expanded="false"] .nav-anzahl { display: inline; }
.nav-zeile { position: relative; }
.nav-zeile .nav-eintrag { padding-right: 30px; } .nav-text { flex: 1; min-width: 0; }
.nav-stern { all: unset; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px;
  color: #98A2B3; font-size: .9rem; cursor: pointer; opacity: 0; transition: opacity .12s; }
.nav-zeile:hover .nav-stern, .nav-stern:focus-visible, .nav-stern.an { opacity: 1; }
.nav-stern.an { color: #FBBF24; } .nav-stern:hover { background: rgba(255, 255, 255, .12); color: #FDE68A; } .nav-stern:focus-visible { outline: 2px solid #fff; }
.nav-zeile .nav-eintrag.aktiv + .nav-stern { color: #fff; } .nav-zeile .nav-eintrag.aktiv + .nav-stern.an { color: #FDE68A; }
.nav-zeile .nav-zahl { margin-right: 2px; }
@media (hover: none) { .nav-stern { opacity: .55; } }

/* 9.3: Datenprüfung */
.dp-knopf { position: relative; display: inline-block; } .dp-knopf > summary { list-style: none; cursor: pointer; } .dp-knopf > summary::-webkit-details-marker { display: none; }
.dp-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(440px, 92vw); display: grid; gap: 8px; box-shadow: 0 12px 32px rgba(21, 37, 61, .18); text-align: left; }
.dp-wahl { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; cursor: pointer; }
.dp-wahl:has(input:checked) { border-color: var(--primaer); background: #F4F3FE; }
.dp-wahl span { display: grid; gap: 2px; } .dp-wahl small { color: var(--leise); font-size: .78rem; }
.dp-wahl.klein { display: inline-flex; padding: 5px 9px; margin: 4px 6px 4px 0; font-size: .86rem; }
.dp-sammel { border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 12px; display: grid; gap: 8px; }
.dp-offen { border-left: 4px solid var(--primaer); }
.dp-schnell { background: #F4F3FE; border: 0; } .dp-fuss .knopf.gross { font-size: 1rem; }
/* 9.3: Unterhaltung beenden */
.chat-beendet { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .chat-beenden summary { cursor: pointer; } .chat-beenden form { margin-top: 10px; }
.chat-beenden-zeile { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
/* 9.3: Push im offenen Fenster */
.push-toasts { position: fixed; right: 16px; top: 72px; z-index: 90; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.push-toast { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--dunkel, #15253D); color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  border-left: 4px solid var(--mint, #00D6A3); text-decoration: none; transition: opacity .35s, transform .35s; }
.push-toast span { font-size: .86rem; opacity: .9; } .push-toast.dringend { border-left-color: #F43F5E; } .push-toast.weg { opacity: 0; transform: translateY(-6px); }
a.push-toast:hover { text-decoration: none; filter: brightness(1.1); }
/* 9.4 Dienstplan: Wünsche und Urlaubsanträge klar sichtbar */
.dp-chip { display: inline-block; font-size: .66rem; font-weight: 750; line-height: 1.3; padding: 0 4px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; }
.dp-chip.offen { color: #8A5A00; background: #FFF3CD; border: 1px dashed #D4A017; }
.dp-chip.ok { color: #fff; background: var(--gruen); }
.dp-chip.nein { color: #6B7280; background: #F3F4F6; text-decoration: line-through; }
.dp-chip.antrag { color: #5B2C91; background: #F1E9FB; border: 1px dashed #8B5CF6; }
.dp-chip.stufe-gold { box-shadow: 0 0 0 1px #D4A017; } .dp-chip.stufe-silber { box-shadow: 0 0 0 1px #94A3B8; }
.dp-zelle .dp-chip { margin: 1px; }
.dp-zelle.lage-frei { background: repeating-linear-gradient(135deg, #E6F6EA 0 6px, #F3FBF5 6px 12px); }
.dp-zelle.lage-offen { background: repeating-linear-gradient(135deg, #FFF6DB 0 6px, #FFFBEF 6px 12px); }
.dp-zelle.lage-antrag { background: repeating-linear-gradient(135deg, #F1E9FB 0 6px, #F8F4FD 6px 12px); }
.dp-zelle.lage-konflikt { box-shadow: inset 0 0 0 2px var(--rot) !important; }
.dp-zelle.lage-konflikt .dp-dienst { outline: 2px solid var(--rot); outline-offset: 1px; }
.dp-lage-leiste { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0 0 10px; }
.dp-lage-karte { border-radius: 10px; padding: 7px 12px; font-size: .86rem; border: 1px solid var(--rand, #E5E7EB); background: var(--flaeche, #fff); }
.dp-lage-karte summary { cursor: pointer; font-weight: 650; list-style: none; } .dp-lage-karte summary::-webkit-details-marker { display: none; }
.dp-lage-karte summary::after { content: ' ▾'; color: var(--leise); } .dp-lage-karte[open] summary::after { content: ' ▴'; }
.dp-lage-karte.gelb { background: var(--gelb-hg); border-color: #F3DFA6; color: var(--gelb); }
.dp-lage-karte.lila { background: #F1E9FB; border-color: #D8C4F3; color: #5B2C91; }
.dp-lage-karte.rot { background: var(--rot-hg); border-color: #F1B8B8; color: var(--rot); }
.dp-lage-karte.gruen { background: var(--gruen-hg); border-color: #9BD3AE; color: var(--gruen); font-weight: 600; }
.dp-lage-karte.leise { color: var(--leise); }
.dp-lage-karte[open] { flex-basis: 100%; }
.dp-lage-liste { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 6px; color: var(--text, #1F2937); }
.dp-lage-liste li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; background: rgba(255, 255, 255, .7); border-radius: 8px; }
.dp-lage-liste li > span:nth-child(2) { flex: 1 1 260px; }
.dp-lage-knoepfe { display: inline-flex; gap: 6px; }
.dp-lage-legende { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .74rem; color: var(--leise); margin-left: auto; align-self: center; }
.dp-lage-legende .dp-chip { margin-left: 6px; }
.dp-suche { max-width: 200px; align-self: center; }
.dp-menue-lage { display: grid; gap: 6px; margin: 0 0 10px; }
.dp-menue-lage-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; padding: 6px 8px; border-radius: 8px; background: var(--gelb-hg); color: #5C4400; }
.dp-menue-lage-zeile span:nth-child(2) { flex: 1 1 180px; }
.dp-menue-lage-zeile.ok { background: var(--gruen-hg); color: #0F5323; } .dp-menue-lage-zeile.ok .dp-chip { color: #fff; background: var(--gruen); }
.dp-menue-lage-zeile.offen .dp-chip { color: #8A5A00; background: #FFF3CD; border: 1px dashed #D4A017; }
.dp-menue-lage-zeile.antrag { background: #F1E9FB; color: #4C1D95; } .dp-menue-lage-zeile.antrag .dp-chip { color: #5B2C91; background: #fff; border: 1px dashed #8B5CF6; }
.dp-menue-lage-zeile.nein { background: #F3F4F6; color: #4B5563; }
.dp-std small { display: block; font-size: .68rem; font-weight: 500; }
.dp-std-unter { color: var(--gelb); } .dp-std-ueber { color: var(--rot); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp-zelle.lage-frei { background: repeating-linear-gradient(135deg, #15301E 0 6px, #1A3824 6px 12px); }
  :root:not([data-theme="light"]) .dp-zelle.lage-offen { background: repeating-linear-gradient(135deg, #3A3016 0 6px, #42371A 6px 12px); }
  :root:not([data-theme="light"]) .dp-zelle.lage-antrag { background: repeating-linear-gradient(135deg, #2A1F3D 0 6px, #312447 6px 12px); }
  :root:not([data-theme="light"]) .dp-chip.offen, :root:not([data-theme="light"]) .dp-menue-lage-zeile.offen .dp-chip { color: #F3DFA6; background: #3A3016; }
  :root:not([data-theme="light"]) .dp-chip.antrag { color: #DDD0F7; background: #2A1F3D; }
  :root:not([data-theme="light"]) .dp-chip.nein { color: #9CA3AF; background: #1F2937; }
  :root:not([data-theme="light"]) .dp-lage-karte.lila, :root:not([data-theme="light"]) .dp-menue-lage-zeile.antrag { background: #2A1F3D; border-color: #4C3A75; color: #DDD0F7; }
  :root:not([data-theme="light"]) .dp-lage-liste li { background: rgba(0, 0, 0, .2); color: inherit; }
  :root:not([data-theme="light"]) .dp-menue-lage-zeile { color: #F3DFA6; } :root:not([data-theme="light"]) .dp-menue-lage-zeile.ok { color: #B7E4C4; }
}
@media (max-width: 640px) { .dp-lage-legende { margin-left: 0; } .dp-suche { max-width: none; flex: 1 1 100%; } }
.dp-weg { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.dp-schritt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linie, #E5E7EB); background: var(--flaeche, #fff); position: relative; }
.dp-schritt .nr { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: .85rem; background: #E5E7EB; color: #374151; }
.dp-schritt strong { display: block; font-size: .92rem; } .dp-schritt small { display: block; color: var(--leise); font-size: .78rem; line-height: 1.35; }
.dp-schritt.ok .nr { background: var(--gruen); color: #fff; } .dp-schritt.ok .nr::before { content: '✓'; } .dp-schritt.ok .nr { font-size: 0; } .dp-schritt.ok .nr::before { font-size: .85rem; }
.dp-schritt.offen { border-color: #F3DFA6; background: var(--gelb-hg); } .dp-schritt.offen .nr { background: #D4A017; color: #fff; } .dp-schritt.offen small { color: #6B5200; }
.dp-schritt.fehler { border-color: #F1B8B8; background: var(--rot-hg); } .dp-schritt.fehler .nr { background: var(--rot); color: #fff; } .dp-schritt.fehler small { color: var(--rot); }
.dp-schritt-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 1100px) { .dp-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dp-weg { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp-schritt.offen { background: #3A3016; border-color: #8A6D1E; } :root:not([data-theme="light"]) .dp-schritt.offen small { color: #F3DFA6; }
  :root:not([data-theme="light"]) .dp-schritt.fehler { background: #3B1A19; border-color: #7F2A27; } :root:not([data-theme="light"]) .dp-schritt.fehler small { color: #FFB4AB; }
  :root:not([data-theme="light"]) .dp-schritt .nr { background: #374151; color: #E5E7EB; }
}
/* 9.4 Touren: Karte und Strecke */
.tp-karte { margin: 0 0 12px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 12px; align-items: start; }
.tp-karte img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--linie, #E5E7EB); }
.tp-karte-liste { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; font-size: .84rem; }
.tp-karte-liste b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primaer); color: #fff; font-size: .7rem; margin-right: 4px; }
.tp-strecke { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: var(--blau-hg); }
.tp-geo { display: block; font-size: .7rem; color: var(--leise); margin-top: 2px; } .tp-geo.ok { color: var(--gruen); }
@media (max-width: 800px) { .tp-karte { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tp-strecke { background: #1A2740; } }
/* 9.5 Reisebüro: Verfügbarkeit aus der Kapazitätsplanung */
.reise-verfuegbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 14px; margin: 0 0 12px; border-radius: 10px; font-size: .9rem; border: 1px solid; }
.reise-verfuegbar > span:nth-child(2) { flex: 1 1 320px; }
.reise-verfuegbar .rv-zeichen { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; }
.reise-verfuegbar.gruen { background: var(--gruen-hg); border-color: #9BD3AE; } .reise-verfuegbar.gruen .rv-zeichen { background: var(--gruen); }
.reise-verfuegbar.gelb { background: var(--gelb-hg); border-color: #F3DFA6; } .reise-verfuegbar.gelb .rv-zeichen { background: #D4A017; }
.reise-verfuegbar.rot { background: var(--rot-hg); border-color: #F1B8B8; } .reise-verfuegbar.rot .rv-zeichen { background: var(--rot); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reise-verfuegbar.gruen { background: #15301E; border-color: #2F6B40; }
  :root:not([data-theme="light"]) .reise-verfuegbar.gelb { background: #3A3016; border-color: #8A6D1E; }
  :root:not([data-theme="light"]) .reise-verfuegbar.rot { background: #3B1A19; border-color: #7F2A27; }
}
.reise-schritte { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reise-schritte li { padding: 10px 12px; border-radius: 10px; background: var(--blau-hg); font-size: .86rem; display: flex; gap: 8px; align-items: flex-start; }
.reise-schritte b { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--primaer); color: #fff; display: grid; place-items: center; font-size: .75rem; }
.reise-optional > summary { cursor: pointer; list-style: none; } .reise-optional > summary::-webkit-details-marker { display: none; }
.reise-optional > summary h2 { margin: 0; } .reise-optional > summary h2::after { content: ' ▾'; color: var(--leise); } .reise-optional[open] > summary h2::after { content: ' ▴'; }
.reise-optional[open] > summary { margin-bottom: 12px; }
.reise-form-verfuegbar { margin: -4px 0 14px; }
@media (max-width: 800px) { .reise-schritte { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reise-schritte li { background: #1A2740; } }
.sk-verfuegbar { padding: 9px 12px; border-radius: 10px; font-size: .88rem; border: 1px solid var(--linie, #E5E7EB); }
.sk-verfuegbar.ok { background: var(--gruen-hg); border-color: #9BD3AE; } .sk-verfuegbar.eng { background: var(--gelb-hg); border-color: #F3DFA6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sk-verfuegbar.ok { background: #15301E; border-color: #2F6B40; } :root:not([data-theme="light"]) .sk-verfuegbar.eng { background: #3A3016; border-color: #8A6D1E; } }
/* 9.6 Richtlinien und Handbücher */
.hb-suche { display: flex; gap: 8px; margin: 0 0 14px; } .hb-suche input { flex: 1; font-size: 1rem; padding: 10px 14px; }
.hb-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0 0 16px; }
.hb-kachel { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border-radius: 14px; background: var(--flaeche, #fff); border: 1px solid var(--linie, #E5E7EB);
  border-top: 5px solid var(--hb, #3F3E8F); color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .12s, box-shadow .12s; }
.hb-kachel:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, .10); text-decoration: none; }
.hb-kachel strong { font-size: 1.15rem; } .hb-titel { color: var(--leise); font-size: .86rem; min-height: 2.4em; }
.hb-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: .8rem; color: #fff; background: var(--hb, #3F3E8F); border-radius: 6px; padding: 2px 8px; width: fit-content; }
.hb-nr.gross { font-size: 1.1rem; vertical-align: middle; }
.hb-zahlen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82rem; margin-top: 4px; }
.hb-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; margin: 10px 0 14px; } .hb-wahl label { font-size: .9rem; }
.hb-dienst { list-style: none; margin: 0; padding: 0; } .hb-dienst li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie, #EEF0F3); } .hb-dienst li div { display: flex; flex-direction: column; gap: 2px; }
.hb-kap-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--primaer); font-size: .9rem; }
.hb-unter { padding-left: 28px !important; } .hb-unter .rl-nr { background: #FFF6DB; color: #8A5A00; }
.hb-marke { display: inline-block; font-size: .66rem; font-weight: 750; border-radius: 4px; padding: 0 5px; vertical-align: middle; }
.hb-marke.neu { background: var(--gruen-hg); color: var(--gruen); } .hb-marke.geaendert { background: #FFF3CD; color: #8A5A00; } .hb-marke.weg { background: var(--rot-hg); color: var(--rot); }
.hb-nummern summary { cursor: pointer; list-style: none; } .hb-nummern summary h2 { margin: 0; font-size: 1rem; } .hb-nummern[open] summary { margin-bottom: 10px; }
.rl-abs { position: relative; } .rl-abs.rev-neu, .rl-abs.rev-geaendert { padding-left: 12px; margin-left: -14px; border-left: 3px solid #D4A017; } .rl-abs.rev-neu { border-left-color: var(--gruen); }
.rl-kurz-box, .rl-kurz-vorschau { background: #EEF4FF; border-left: 4px solid var(--primaer); border-radius: 8px; padding: 10px 14px; margin: 8px 0 12px; }
.rl-kurz-box div, .rl-kurz-vorschau div { margin-top: 4px; }
.rl-highlights { background: #FFFBEB; border: 1px solid #F3DFA6; border-radius: 8px; padding: 10px 14px; margin: 8px 0 12px; font-size: .86rem; }
.rl-highlights ul { margin: 6px 0 0; padding-left: 0; list-style: none; } .rl-highlights p { margin: 4px 0; }
.rl-stempel th { width: 14%; }
.rl-rollen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .rl-rollen span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: #F6F7FB; }
.rl-rollen small { color: var(--leise); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .rl-rollen em { font-style: normal; font-size: .74rem; color: var(--gruen); }
.rl-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rl-aktionen input.eingabe { max-width: 320px; }
.rl-ki-pruef { background: #F7F6FE; border-radius: 10px; padding: 8px 12px; } .rl-ki-pruef ul { margin: 6px 0 0; }
.rl-vorlagen-gruppe { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 14px 0 6px; }
.rl-freigabe { border-color: #DCD7FB; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 760px) { .rl-rollen { grid-template-columns: 1fr; } .hb-suche { flex-direction: column; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rl-kurz-box, :root:not([data-theme="light"]) .rl-kurz-vorschau { background: #1A2740; }
  :root:not([data-theme="light"]) .rl-highlights { background: #3A3016; border-color: #8A6D1E; }
  :root:not([data-theme="light"]) .rl-rollen span, :root:not([data-theme="light"]) .rl-ki-pruef { background: #1F2937; }
  :root:not([data-theme="light"]) .hb-unter .rl-nr { background: #3A3016; color: #F3DFA6; }
}
.hb-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; position: sticky; top: 64px; z-index: 5; background: var(--hg, #F6F7FB); padding: 6px 0; }
.hb-toc a { font-size: .82rem; padding: 4px 10px; border-radius: 999px; background: var(--flaeche, #fff); border: 1px solid var(--linie, #E5E7EB); color: inherit; text-decoration: none; }
.hb-toc a b { font-family: ui-monospace, monospace; color: var(--primaer); } .hb-toc a small { color: var(--leise); } .hb-toc a.leer { opacity: .6; }
.hb-toc a:hover { border-color: var(--primaer); }
.hb-kapitel { scroll-margin-top: 110px; } .hb-kapitel.leer { padding-top: 10px; padding-bottom: 10px; } .hb-kapitel.leer h2 { font-size: 1rem; color: var(--leise); }
.hb-kapitel.leer .rl-liste li { border: 0; padding: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hb-toc { background: transparent; } }

/* 9.7 Prozesse als Flussdiagramm */
.im-fluss .karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.im-fluss-bild { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; text-align: center; }
.im-fluss-bild svg { max-width: 100%; height: auto; min-width: 420px; }
.im-fluss-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 6px 0 0; }
.fl-l { display: inline-block; width: 18px; height: 11px; border: 1.6px solid; border-radius: 3px; vertical-align: -1px; margin-right: 2px; }
.fl-l.start { border-radius: 8px; background: #E0F2FE; border-color: #0284C7; } .fl-l.taet { background: #EEF2FF; border-color: #4F46E5; }
.fl-l.ent { width: 11px; transform: rotate(45deg); background: #FFF7E6; border-color: #D97706; margin: 0 5px 0 4px; } .fl-l.dok { background: #ECFDF5; border-color: #059669; border-radius: 2px 2px 6px 6px; }
.fl-l.wart { background: #F1F5F9; border-color: #64748B; } .fl-l.teil { background: #F5F3FF; border-color: #7C3AED; box-shadow: inset 3px 0 0 #fff, inset -3px 0 0 #fff; }
.im-fluss-vorschau { margin-top: 14px; border-top: 1px dashed var(--linie); padding-top: 10px; } .im-fluss-vorschau h3 { font-size: .92rem; margin: 0 0 6px; }
.im-art { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 0 6px; border-radius: 999px; background: #FEF3C7; color: #92400E; }
.im-ablauf li.art-entscheidung .im-schritt-nr { background: #D97706; border-radius: 6px; } .im-ablauf li.art-dokument .im-schritt-nr { background: #059669; }
.im-ablauf li.art-warten .im-schritt-nr { background: #64748B; } .im-ablauf li.art-teilprozess .im-schritt-nr { background: #7C3AED; }
.im-schritt { grid-template-columns: 28px minmax(156px, .9fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr) auto auto; }
.im-s-nein { display: none; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: #B45309; white-space: nowrap; } .im-s-nein .eingabe { width: 52px; }
.im-schritt.ist-entscheidung .im-s-nein { display: inline-flex; } .im-schritt.ist-entscheidung { background: #FFFBEB; border-radius: 10px; padding: 4px; }
@media (max-width: 760px) { .im-schritt { grid-template-columns: 28px minmax(0, 1fr); } .im-schritt > :nth-child(n+3) { grid-column: 2; } .im-fluss-bild svg { min-width: 0; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .im-fluss-bild svg { background: #F8FAFC; border-radius: 10px; } :root:not([data-theme="light"]) .im-schritt.ist-entscheidung { background: rgba(217,119,6,.12); } }
:root[data-theme="dark"] .im-fluss-bild svg { background: #F8FAFC; border-radius: 10px; } :root[data-theme="dark"] .im-schritt.ist-entscheidung { background: rgba(217,119,6,.12); }

/* 9.7 KI-Helfer in Formularen */
.ki-helfer { border: 1px solid #DCD8FB; background: linear-gradient(180deg, #FAF9FF, #F4F2FF); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.ki-helfer-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ki-helfer-vorschlag { margin-top: 10px; border-top: 1px dashed #CFC9F7; padding-top: 10px; }
.ki-helfer-liste { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 4px 12px; margin: 0 0 10px; }
.ki-helfer-liste dt { font-weight: 700; font-size: .82rem; color: #4B3FC0; } .ki-helfer-liste dd { margin: 0; white-space: pre-line; font-size: .9rem; }
.ki-helfer-liste dd.leise { grid-column: 1 / -1; }
.ki-fragen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .ki-frage { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
.ki-frage input { margin-top: 3px; }
.ki-gefuellt { box-shadow: 0 0 0 3px rgba(124, 58, 237, .28) !important; transition: box-shadow .4s; }
@media (max-width: 640px) { .ki-helfer-liste { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ki-helfer { background: rgba(124, 58, 237, .1); border-color: rgba(167, 139, 250, .35); } :root:not([data-theme="light"]) .ki-helfer-liste dt { color: #C4B5FD; } }
:root[data-theme="dark"] .ki-helfer { background: rgba(124, 58, 237, .1); border-color: rgba(167, 139, 250, .35); } :root[data-theme="dark"] .ki-helfer-liste dt { color: #C4B5FD; }

/* 9.7 Managementsystem: Was steht an? */
.im-agenda-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.im-agenda-liste a { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--linie); border-left: 4px solid #CBD0DA; background: var(--flaeche); color: inherit; text-decoration: none; }
.im-agenda-liste a:hover { border-color: var(--primaer); }
.im-agenda-liste .st-rot a { border-left-color: var(--rot); } .im-agenda-liste .st-gelb a { border-left-color: #E3A008; } .im-agenda-liste .st-blau a { border-left-color: var(--blau, #2563EB); }
.im-ag-was { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); }
.st-rot .im-ag-was { color: var(--rot); } .st-gelb .im-ag-was { color: #B45309; }
.im-ag-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .im-ag-datum { font-size: .8rem; color: var(--leise); } .im-ag-pfeil { color: var(--leise); }
.im-agenda-leer { margin: 0; color: var(--gruen); font-weight: 600; }
@media (max-width: 700px) { .im-agenda-liste a { grid-template-columns: minmax(0, 1fr) auto; } .im-ag-was { grid-column: 1 / -1; } .im-ag-pfeil { display: none; } }

.as-raster.im-risiko-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.im-risiko-liste td { vertical-align: top; } .nowrap { white-space: nowrap; }
@media (max-width: 1100px) { .as-raster.im-risiko-raster { grid-template-columns: minmax(0, 1fr); } }

/* 9.8 Lernen: Kurskatalog und „Neuer Kurs“ */
.ln-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; } .ln-filter .eingabe { width: auto; min-width: 170px; } .ln-filter input[type=search] { flex: 1 1 220px; }
.ln-katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.ln-kachel { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie);
  border-top: 4px solid #94A3B8; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.ln-kachel:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.ln-kachel.kat-arbeitsschutz { border-top-color: #F59E0B; } .ln-kachel.kat-datenschutz { border-top-color: #2563EB; } .ln-kachel.kat-belehrung { border-top-color: #64748B; }
.ln-kachel.kat-fahrdienst { border-top-color: #0D9488; } .ln-kachel.kat-compliance { border-top-color: #7C3AED; } .ln-kachel.st-archiv { opacity: .6; }
.ln-kachel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ln-kachel-kopf small { color: var(--leise); font-size: .74rem; }
.ln-kachel-titel { font-size: 1.02rem; line-height: 1.3; } .ln-kachel-art { font-size: .8rem; color: var(--leise); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ln-kachel-art svg { width: 14px; height: 14px; }
.ln-kachel-fortschritt { height: 6px; border-radius: 999px; background: #E2E8F0; overflow: hidden; margin-top: 4px; } .ln-kachel-fortschritt span { display: block; height: 100%; background: var(--gruen); border-radius: 999px; }
.ln-kachel-zahlen { display: flex; gap: 12px; font-size: .82rem; flex-wrap: wrap; } .ln-kachel-zahlen .offen b { color: #B45309; } .ln-kachel-zahlen .hinweis-text { color: var(--blau, #2563EB); font-weight: 600; }
.ln-kachel-hinweis { font-size: .78rem; font-weight: 600; color: #92400E; background: #FEF3C7; border-radius: 8px; padding: 2px 8px; align-self: flex-start; }
.ln-wege { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ln-weg { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); }
.ln-weg p { margin: 0; color: var(--text); font-size: .9rem; flex: 1; } .ln-weg .knopf { align-self: flex-start; } .ln-weg select { width: 100%; }
.ln-weg.ki { background: linear-gradient(180deg, #FAF9FF, #F3F1FF); border-color: #DCD8FB; } .ln-weg.empfohlen { box-shadow: 0 0 0 2px #A5B4FC inset; }
.ln-weg.aus { opacity: .75; }
.ln-weg-kopf { display: flex; gap: 12px; align-items: center; } .ln-weg-kopf h2 { margin: 0; font-size: 1.05rem; } .ln-weg-kopf small { color: var(--leise); font-size: .78rem; }
.ln-weg-symbol { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #EEF2FF; color: var(--primaer); }
.ln-weg.ki .ln-weg-symbol { background: #EDE9FE; color: #6D28D9; } .ln-weg-symbol svg { width: 20px; height: 20px; }
.ln-ohne-kurs li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ln-weg.ki { background: rgba(124, 58, 237, .1); border-color: rgba(167, 139, 250, .35); } }
:root[data-theme="dark"] .ln-weg.ki { background: rgba(124, 58, 237, .1); border-color: rgba(167, 139, 250, .35); }

/* 9.8 Portal Lernen: „Als Nächstes“, lange Knopftexte, Wissensfrage-Kopf */
.lern-weiter { display: flex; flex-direction: column; gap: 6px; padding: 16px; margin: 0 0 14px; border-radius: 16px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--primaer, #5B4FE0), #7C3AED); box-shadow: 0 8px 22px rgba(91, 79, 224, .25); }
.lern-weiter small { opacity: .85; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.lern-weiter strong { font-size: 1.15rem; line-height: 1.3; } .lern-weiter-was { font-size: .9rem; opacity: .95; }
.lern-weiter .fortschritt { background: rgba(255, 255, 255, .25); } .lern-weiter .fortschritt span { background: #fff; }
.lern-weiter .knopf { background: #fff; color: var(--primaer, #5B4FE0); border-color: #fff; margin-top: 6px; }
.knopf.breit { white-space: normal; text-align: center; justify-content: center; line-height: 1.3; }
.lb-marke { flex-wrap: wrap; } .lb-marke small { white-space: nowrap; }
.lern-weiter .fortschritt { max-width: none; }

.ln-ki-einfach { margin-left: 8px; vertical-align: 1px; } .ln-ki-vorschlag { margin: 8px 0; border: 1px solid #DCD8FB; background: #FAF9FF; border-radius: 12px; padding: 10px 12px; }
.ln-ki-text { white-space: pre-line; font-size: .92rem; margin-bottom: 8px; } .ln-ki-reihe { margin-top: 10px; align-items: center; }
.ln-kachel-art { display: block; } .ln-kachel-art svg { display: inline-block; vertical-align: -2px; margin-right: 2px; }
.lern-weiter, .lern-weiter:hover { color: #fff; text-decoration: none; align-items: stretch; }
.lern-weiter small, .lern-weiter strong, .lern-weiter .lern-weiter-was { color: #fff; }
.lern-weiter .fortschritt { width: 100%; align-self: stretch; margin: 4px 0 0; }
.lern-weiter .knopf.primaer { background: #fff; border-color: #fff; color: #4338CA; align-self: stretch; }

/* 9.9 Kassenbuch: Barausgabe mit Beleg */
.kb-ausgabe h2 small { font-weight: 400; font-size: .8rem; margin-left: 6px; }
.kb-ausgabe-raster { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.kb-foto { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; border: 2px dashed #C7D2FE; border-radius: 14px;
  background: #F8FAFF; cursor: pointer; overflow: hidden; text-align: center; padding: 10px; }
.kb-foto:hover { border-color: var(--primaer); } .kb-foto input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kb-foto-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--leise); font-size: .85rem; } .kb-foto-leer strong { color: var(--text); }
.kb-foto img { max-width: 100%; max-height: 300px; border-radius: 8px; }
.kb-ki { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.kb-beleg svg { vertical-align: -2px; color: var(--primaer); }
@media (max-width: 760px) { .kb-ausgabe-raster { grid-template-columns: minmax(0, 1fr); } .kb-foto { min-height: 140px; } }
.kb-felder { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }

/* 9.9 Sicherung: vier Säulen, externer Datenträger */
.sk-saeulen { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 4px 0 12px; }
.sk-saeulen li { border: 1px solid var(--linie); border-top: 4px solid #CBD0DA; border-radius: 10px; padding: 8px 10px; font-weight: 600; font-size: .88rem;
  display: flex; flex-direction: column; gap: 2px; background: var(--flaeche); }
.sk-saeulen li b { color: var(--leise); font-size: .75rem; } .sk-saeulen li small { font-weight: 400; color: var(--leise); font-size: .75rem; }
.sk-saeulen li.ok { border-top-color: var(--gruen); } .sk-saeulen li.faellig { border-top-color: #E3A008; }
.sk-extern h2 small { font-weight: 400; font-size: .8rem; margin-left: 6px; } .sk-pruefen { margin-top: 12px; } .sk-pruefen summary { cursor: pointer; font-weight: 600; }
@media (max-width: 700px) { .sk-saeulen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 10.0: Listen – weitere Filter als Ausklapp-Panel, gewählte Filter als Chips, zweizeilige Zellen */
.filterleiste:has(.filter-mehr) select { max-width: 210px; }
.filterleiste:has(.filter-mehr) input[type=search] { min-width: 220px; }
.filterleiste select.gewaehlt { border-color: var(--primaer); background: var(--blau-hg); }
.filter-mehr { position: relative; }
.filter-mehr > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.filter-mehr > summary::-webkit-details-marker { display: none; }
.filter-mehr > summary .zaehler { background: var(--primaer); }
.filter-mehr[open] > summary { border-color: var(--primaer); }
.filter-panel { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 280px; display: grid; gap: 10px; padding: 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); }
.filter-panel label { display: grid; gap: 4px; font-size: .82rem; color: var(--leise); }
.filter-panel select { width: 100%; }
.filter-weg { font-size: .88rem; color: var(--leise); text-decoration: underline; text-underline-offset: 2px; }
.filter-weg:hover { color: var(--primaer); }
.filter-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--blau-hg); color: var(--blau);
  font-size: .82rem; border: 1px solid transparent; }
.filter-chip:hover { border-color: var(--blau); }
.filter-chip span { font-size: 1rem; line-height: 1; margin-left: 2px; }
.tabelle td .zelle-neben { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; color: var(--leise);
  line-height: 1.35; margin-top: 1px; max-width: 46ch; }
.tabelle td .badge + .zelle-neben { margin-top: 3px; }
@media (max-width: 760px) { .filter-panel { position: static; box-shadow: none; margin-top: 8px; } }
.kein-zugriff { max-width: 640px; margin: 40px auto; text-align: center; padding: 32px 28px; }
.kein-zugriff .kz-symbol { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--grau-hg); color: var(--leise); }
.kein-zugriff h1 { margin: 0 0 6px; }
.kein-zugriff .knopfreihe { justify-content: center; margin-top: 18px; }
.knopf.laedt { pointer-events: none; opacity: .8; }
.knopf.laedt::before { content: ""; width: 13px; height: 13px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; vertical-align: -2px; animation: kreisen .8s linear infinite; }
@keyframes kreisen { to { transform: rotate(360deg); } }
/* 10.0: Portal am Handy – Postfach und Bestätigungen ohne Querscrollen */
.postfach-liste li { flex-wrap: wrap; }
.postfach-liste li > .hinweis, .postfach-liste li > form, .postfach-liste li > small { flex-basis: 100%; }
.bst-liste li { gap: 12px; }
.bst-liste li a, .bst-liste .bst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.bst-liste small .badge { align-self: flex-start; }
.bst-liste li a small { display: block; }
.bst-pfeil { color: var(--schwach); font-size: 1.5rem; line-height: 1; }
.leer.leer-smart { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 34px 20px; }
/* 10.0: lange Formulare – Sprungleiste und Speichern-Leiste bleibt sichtbar */
.form-sprung { position: sticky; top: 60px; z-index: 15; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 8px 10px;
  background: color-mix(in srgb, var(--hg) 92%, transparent); backdrop-filter: blur(6px); border-radius: 10px; }
.form-sprung a { padding: 4px 11px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); font-size: .84rem; }
.form-sprung a:hover { border-color: var(--primaer); color: var(--primaer); }
.form-sprung a.fehler { border-color: var(--rot); color: var(--rot); background: var(--rot-hg); }
.formular .karte.gruppe { scroll-margin-top: 120px; }
form.formular > .formular-fuss { position: sticky; bottom: 0; z-index: 14; margin: 14px -4px 0; padding: 12px 4px;
  background: linear-gradient(to top, var(--hg) 75%, transparent); }
@media (max-width: 760px) { .form-sprung { top: 56px; flex-wrap: nowrap; overflow-x: auto; } .form-sprung a { white-space: nowrap; } }
@media print { .form-sprung { display: none; } }
/* 10.0: Listen am Handy als Karten – jede Zeile eine Karte, Spaltenüberschrift als Beschriftung */
@media (max-width: 640px) {
  .tabelle-rahmen:has(> table.karten-mobil) { background: none; border: 0; box-shadow: none; overflow: visible; }
  table.karten-mobil, table.karten-mobil tbody, table.karten-mobil tr, table.karten-mobil td { display: block; width: 100%; }
  table.karten-mobil thead { display: none; }
  table.karten-mobil tr { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; box-shadow: var(--schatten); }
  table.karten-mobil td { border: 0 !important; padding: 3px 0 !important; display: grid; grid-template-columns: 38% 1fr; gap: 8px; text-align: left !important; }
  table.karten-mobil td::before { content: attr(data-label); color: var(--leise); font-size: .78rem; padding-top: 2px; }
  table.karten-mobil td:first-child { grid-template-columns: 1fr; font-size: 1rem; font-weight: 600; padding-bottom: 6px !important; }
  table.karten-mobil td:first-child::before { display: none; }
  table.karten-mobil td:empty, table.karten-mobil td[data-label=""]::before { display: none; }
  table.karten-mobil td .zelle-neben { grid-column: 2; max-width: none; }
  table.karten-mobil td:first-child .zelle-neben { grid-column: 1; font-weight: 400; }
}
table.karten-mobil td > .badge { justify-self: start; }
.prozess-band-nr { white-space: nowrap; }
@media (max-width: 640px) {
  .prozess-band a { font-size: .8rem; padding: 6px 10px; }
  .prozess-band a small, .prozess-band-pfeil { display: none; }
}
/* 10.0: „Offen in diesem Bereich“ über Listen */
.im-blick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 14px; font-size: .84rem; }
.im-blick-titel { color: var(--leise); display: inline-flex; align-items: center; gap: 5px; }
.im-blick a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 11px; border-radius: 999px; background: var(--flaeche);
  border: 1px solid var(--linie); color: var(--text); }
.im-blick a:hover { border-color: var(--primaer); color: var(--primaer); }
.im-blick a b { min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: var(--rot); color: #fff; font-size: .74rem; text-align: center; line-height: 1.5; }
@media print { .im-blick { display: none; } }
/* 10.0: Startseite – „Was steht an?“ und gebündelte Fristen */
.fr-anzahl { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--grau-hg); font-size: .76rem; font-weight: 700; color: var(--leise); }
.steht-an { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.steht-an a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; color: var(--text); }
.steht-an a:hover { border-color: var(--primaer); }
.steht-an .sa-symbol { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--blau-hg); color: var(--primaer); flex: none; }
.steht-an .sa-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.steht-an .sa-text small { color: var(--leise); font-size: .76rem; }
.steht-an b { min-width: 1.8em; padding: 1px 8px; border-radius: 999px; background: var(--rot); color: #fff; font-size: .8rem; text-align: center; }
.akte-erledigt { margin-top: 8px; }
.akte-erledigt > summary { cursor: pointer; color: var(--leise); font-size: .86rem; }
/* 10.0: Kennzahl-Kacheln am Handy zweispaltig und kompakt (weniger Scrollen) */
@media (max-width: 640px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kachel { padding: 10px 12px; }
  .kachel .wert { font-size: 1.3rem; }
  .kachel .titel, .kachel .zusatz { font-size: .74rem; line-height: 1.3; }
}
@media (max-width: 640px) {
  .filterleiste { gap: 8px; }
  .filterleiste > select, .filterleiste > .filter-mehr { flex: 1 1 calc(50% - 8px); min-width: 0; max-width: none !important; }
  .filterleiste > .filter-mehr > summary { width: 100%; justify-content: center; }
  .im-blick { gap: 6px; }
  .im-blick-titel { flex-basis: 100%; }
}
/* 10.0.1: Kalkulation – Bus zwischen Hin- und Rückfahrt frei */
.schalter-zeile { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.sk-frei { margin-top: 4px; }
/* 10.0.1: Beschäftigte löschen – Vorschau */
.loesch-liste { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 4px; }
.loesch-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 8px; background: var(--grau-hg); font-size: .9rem; }