/* Baucockpit Petersen — Oberfläche */
:root {
  --papier: #f4f2ee;
  --flaeche: #ffffff;
  --tinte: #1c1a17;
  --grau: #5c574f;
  --linie: #e2ded7;
  --linie-stark: #c9c3b9;
  --rot: #d8121b;          /* Ziegelrot aus dem Logo */
  --rot-dunkel: #b30d15;
  --gruen-logo: #3b8f34;
  --akut: #c62828;  --akut-hell: #fdecea;  --akut-rand: #f3b9b3;
  --bald: #8a5a00;  --bald-hell: #fff3d6;  --bald-rand: #f0d18a;
  --plan: #2e7d32;  --plan-hell: #e8f3e9;  --plan-rand: #b9dcbc;
  --ruhig: #5c574f; --ruhig-hell: #eeece7;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(28,26,23,.06), 0 4px 14px rgba(28,26,23,.05);
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--schrift); color: var(--tinte); background: var(--papier); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 15px; }
.klein { font-size: 13px; color: var(--grau); }
.leise { color: var(--grau); }
.ausgeblendet { display: none !important; }
svg.ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; }

/* ---------- Anmeldung ---------- */
.zutritt { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.zutritt-karte { width: min(420px, 100%); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 32px; box-shadow: var(--schatten); text-align: center; }
.zutritt-karte img { height: 46px; margin-bottom: 18px; }
.zutritt-karte h1 { font-size: 22px; margin-bottom: 4px; }
.zutritt-karte p { margin: 0 0 22px; color: var(--grau); }
.zutritt-karte input { width: 100%; text-align: center; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; padding: 12px; border: 1.5px solid var(--linie-stark); border-radius: 10px; background: #fff; }
.zutritt-karte input:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(216,18,27,.15); }
.zutritt-karte .fehler { color: var(--akut); margin-top: 10px; min-height: 20px; font-size: 14px; }

/* ---------- Rahmen ---------- */
.rahmen { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.seite { background: var(--flaeche); border-right: 1px solid var(--linie); padding: 18px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; }
.marke { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.marke img { height: 30px; width: auto; }
.marke b { display: block; font-size: 14px; line-height: 1.15; }
.marke span { font-size: 12px; color: var(--grau); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--tinte); font-weight: 500; }
.nav a:hover { background: var(--papier); }
.nav a.aktiv { background: var(--tinte); color: #fff; }
.nav a .zahl { margin-left: auto; font-size: 12px; font-weight: 650; background: var(--akut); color: #fff; border-radius: 999px; padding: 1px 7px; }
.nav a.aktiv .zahl { background: #fff; color: var(--akut); }
.nav-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); padding: 14px 10px 4px; font-weight: 650; }
.nav .bv-link { font-weight: 450; font-size: 14px; }
.nav .punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.seite .unten { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--linie); font-size: 13px; }
.seite .unten b { display: block; }
.seite .unten button { background: none; border: 0; color: var(--grau); padding: 4px 0; text-decoration: underline; }
.inhalt { padding: 26px 32px 60px; max-width: 1400px; width: 100%; min-width: 0; }
.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.kopf .datum { color: var(--grau); }
.kopf .rechts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Knöpfe, Felder ---------- */
.knopf { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--linie-stark); background: var(--flaeche); font-weight: 550; font-size: 14px; white-space: nowrap; }
.knopf:hover { border-color: var(--tinte); }
.knopf.haupt { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.haupt:hover { background: var(--rot-dunkel); }
.knopf.dunkel { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.knopf.klein { padding: 4px 9px; font-size: 13px; }
.knopf.leise { border-color: transparent; background: transparent; color: var(--grau); }
.knopf.leise:hover { background: var(--papier); color: var(--tinte); }
.knopf:disabled { opacity: .5; cursor: default; }
.feld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--grau); }
.feld input, .feld select, .feld textarea { padding: 8px 10px; border: 1px solid var(--linie-stark); border-radius: 8px; background: #fff; color: var(--tinte); font-size: 14px; min-width: 0; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); }
select.inline, input.inline { padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 13px; color: var(--tinte); max-width: 100%; }
select.inline:hover, input.inline:hover { border-color: var(--linie-stark); background: #fff; }
select.inline:focus, input.inline:focus { outline: none; border-color: var(--tinte); background: #fff; }
.formzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* ---------- Kacheln, Karten ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten); }
.kachel .wert { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kachel .titel { font-size: 13px; color: var(--grau); margin-bottom: 6px; }
.kachel.akut .wert { color: var(--akut); }
.kachel.bald .wert { color: var(--bald); }
.kachel.plan .wert { color: var(--plan); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.karte .karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linie); }
.karte .karte-koerper { padding: 14px 18px; }
.spalten { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.stapel { display: flex; flex-direction: column; gap: 14px; }

/* Bauvorhaben-Karte */
.bv-karte { display: grid; grid-template-columns: 6px 1fr; overflow: hidden; }
.bv-karte .streifen { background: var(--ruhig); }
.bv-karte.akut .streifen { background: var(--akut); }
.bv-karte.bald .streifen { background: #e0a100; }
.bv-karte.plan .streifen { background: var(--plan); }
.bv-karte .innen { padding: 16px 18px; }
.bv-karte .oben { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.bv-karte h3 { font-size: 17px; overflow-wrap: anywhere; }
.bv-karte h3 a { text-decoration: none; }
.bv-karte h3 a:hover { text-decoration: underline; }
.bv-karte .meta { color: var(--grau); font-size: 13px; margin-top: 2px; }
.baubeginn { text-align: right; }
.baubeginn b { display: block; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.baubeginn span { font-size: 12px; color: var(--grau); }
.baubeginn.akut b { color: var(--akut); }
.zaehler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid transparent; }
.chip.akut { background: var(--akut-hell); color: var(--akut); border-color: var(--akut-rand); }
.chip.bald { background: var(--bald-hell); color: var(--bald); border-color: var(--bald-rand); }
.chip.plan { background: var(--plan-hell); color: var(--plan); border-color: var(--plan-rand); }
.chip.ruhig { background: var(--ruhig-hell); color: var(--ruhig); }
.chip.muster { background: #eef1f6; color: #3d4a63; border-color: #cbd3e1; }
.balken { height: 6px; background: var(--ruhig-hell); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.balken i { display: block; height: 100%; background: var(--plan); }
.top-punkte { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.top-punkte li { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; }
.top-punkte .frist { margin-left: auto; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.frist.akut { color: var(--akut); } .frist.bald { color: var(--bald); } .frist.plan { color: var(--plan); } .frist.ruhig { color: var(--grau); font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--linie-stark); position: relative; top: -1px; }
.dot.akut { background: var(--akut); } .dot.bald { background: #e0a100; } .dot.plan { background: var(--plan); } .dot.ruhig { background: var(--linie-stark); }

/* Listen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.liste li:last-child { border-bottom: 0; }
.liste .text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.liste .text small { display: block; color: var(--grau); font-size: 12.5px; }
.liste .rechts { margin-left: auto; white-space: nowrap; text-align: right; font-size: 13px; }
.liste .leer { color: var(--grau); font-style: italic; padding: 8px 0; }
.abhaken { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--linie-stark); background: #fff; display: inline-grid; place-items: center; flex: none; margin-top: 1px; }
.abhaken.an { background: var(--plan); border-color: var(--plan); color: #fff; }
.abhaken svg { width: 13px; height: 13px; }
.durch { text-decoration: line-through; color: var(--grau); }
.person-marke { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--papier); border: 1px solid var(--linie); color: var(--tinte); white-space: nowrap; }
.person-marke i { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--tinte); }

/* ---------- Akte ---------- */
.akte-kopf { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 16px; box-shadow: var(--schatten); }
.akte-kopf .zeile1 { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.akte-kopf h1 { font-size: 22px; }
.stammdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin-top: 14px; }
.stammdaten .feld input, .stammdaten .feld select { padding: 6px 8px; font-size: 14px; }
.meilensteine { display: flex; gap: 0; overflow-x: auto; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.ms { flex: 1; min-width: 118px; padding: 0 8px; border-left: 2px solid var(--linie); position: relative; }
.ms:first-child { border-left: 0; padding-left: 0; }
.ms .name { font-size: 11.5px; color: var(--grau); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.ms input { border: 0; background: transparent; padding: 2px 0; font-size: 14px; font-weight: 600; width: 100%; color: var(--tinte); }
.ms input:focus { outline: none; background: var(--papier); }
.ms .rel { font-size: 12px; color: var(--grau); }
.ms.vorbei .name { color: var(--plan); }
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 14px; overflow-x: auto; }
.reiter a { padding: 10px 14px; text-decoration: none; color: var(--grau); font-weight: 550; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; }
.reiter a.aktiv { color: var(--tinte); border-color: var(--rot); }
.reiter a .zahl { font-size: 11.5px; background: var(--akut); color: #fff; border-radius: 999px; padding: 0 6px; margin-left: 5px; font-weight: 650; }

details.stamm > summary { display: none; }
@media (max-width: 900px) { details.stamm > summary { display: list-item; cursor: pointer; margin-top: 12px; font-weight: 600; color: var(--grau); font-size: 14px; } .meilensteine { flex-wrap: wrap; } .ms { min-width: 45%; margin-bottom: 10px; } }

/* Checkliste */
.werkzeug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.werkzeug .suche { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--linie-stark); border-radius: 8px; background: #fff; }
.werkzeug .filter { display: flex; gap: 4px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 3px; }
.werkzeug .filter button { border: 0; background: transparent; padding: 5px 10px; border-radius: 6px; font-size: 13px; font-weight: 550; color: var(--grau); }
.werkzeug .filter button.aktiv { background: var(--tinte); color: #fff; }
.phase { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--schatten); }
.phase-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; user-select: none; }
.phase-kopf h3 { flex: 1; }
.phase-kopf .fortschritt { font-size: 13px; color: var(--grau); }
.phase-kopf .pfeil { transition: transform .15s; }
.phase.zu .pfeil { transform: rotate(-90deg); }
.phase.zu .tabelle { display: none; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); padding: 6px 10px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: #faf9f7; font-weight: 650; }
.tabelle td { padding: 7px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; font-size: 14px; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr.fertig td { color: var(--grau); }
.tabelle tr.fertig td.aufgabe { text-decoration: line-through; }
.tabelle td.nr { color: var(--grau); font-size: 12.5px; width: 44px; font-variant-numeric: tabular-nums; }
.tabelle td.ampel { width: 26px; padding-right: 0; }
.tabelle td.aufgabe { min-width: 260px; }
.tabelle td.aufgabe small { display: block; color: var(--grau); font-size: 12px; }
.tabelle td.frist-z { white-space: nowrap; }
.tabelle td.frist-z button { border: 0; background: none; padding: 0; text-align: left; font-weight: 600; font-size: 13px; }
.tabelle td.frist-z button small { display: block; font-weight: 450; color: var(--grau); font-size: 11.5px; }
.tabelle td.aktionen { white-space: nowrap; text-align: right; }
.tabelle td.aktionen .knopf { margin-left: 4px; }
.tabelle input.datum { width: 128px; }
.tabelle input.text { width: 100%; min-width: 120px; }
.tabelle input.zahl { width: 96px; text-align: right; }
.tabelle td .ja { color: var(--plan); font-weight: 650; }
.tabelle-scroll { overflow-x: auto; }
.status-select { border-radius: 6px; padding: 4px 6px; border: 1px solid transparent; font-size: 13px; font-weight: 600; background: var(--ruhig-hell); color: var(--tinte); }
.status-select.s-erledigt, .status-select.s-geprüft { background: var(--plan-hell); color: var(--plan); }
.status-select.s-bestellt { background: #e6f0fb; color: #1f4f8a; }
.status-select.s-angefragt, .status-select.s-in { background: var(--bald-hell); color: var(--bald); }
.status-select.s-nicht { background: transparent; color: var(--grau); }

/* ---------- Dialog ---------- */
.dialog-hintergrund { position: fixed; inset: 0; background: rgba(28,26,23,.45); display: grid; place-items: center; padding: 20px; z-index: 50; }
.dialog { width: min(560px, 100%); background: var(--flaeche); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 90vh; overflow: auto; }
.dialog .dialog-kopf { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--linie); }
.dialog .dialog-koerper { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.dialog .dialog-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--linie); }
.wahl { display: flex; flex-direction: column; gap: 8px; }
.wahl label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; flex-wrap: wrap; }
.wahl label.an { border-color: var(--tinte); background: var(--papier); }
.wahl label input[type=radio] { margin: 0; }
.wahl label input[type=number] { width: 64px; padding: 4px 6px; border: 1px solid var(--linie-stark); border-radius: 6px; }
.wahl label select, .wahl label input[type=date] { padding: 4px 6px; border: 1px solid var(--linie-stark); border-radius: 6px; background: #fff; }
.hinweis { background: var(--papier); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--grau); }
.meldung { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: var(--schatten); z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none; }
.meldung.an { opacity: 1; }

/* ---------- Gruppen (Aufgaben/Termine) ---------- */
.gruppe { margin-bottom: 18px; }
.gruppe h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); }
.gruppe h3.akut { color: var(--akut); }
.termin-tag { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.termin-tag .tag { text-align: center; }
.termin-tag .tag b { display: block; font-size: 22px; line-height: 1; }
.termin-tag .tag span { font-size: 12px; color: var(--grau); text-transform: uppercase; }
.termin-tag.heute .tag b { color: var(--rot); }
.termin { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.termin .zeit { font-weight: 650; width: 52px; flex: none; font-variant-numeric: tabular-nums; }
.termin .t-text small { display: block; color: var(--grau); font-size: 12.5px; }
.termin .t-personen { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Personen ---------- */
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.person-karte { padding: 16px; }
.person-karte .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--tinte); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.person-karte .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .1em; background: var(--papier); padding: 6px 10px; border-radius: 6px; display: inline-block; margin-top: 8px; }
.person-karte.inaktiv { opacity: .55; }

/* ---------- Bildschirm (Kiosk) ---------- */
body.kiosk { background: #14120f; color: #f4f2ee; }
.kiosk-rahmen { padding: 32px 40px; min-height: 100vh; display: grid; grid-template-rows: auto 1fr; gap: 26px; }
.kiosk-kopf { display: flex; justify-content: space-between; align-items: center; }
.kiosk-kopf .uhr { font-size: 44px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kiosk-kopf .datum { font-size: 18px; color: #b9b3a8; }
.kiosk-kopf .kiosk-marke { display: flex; align-items: center; gap: 12px; }
.kiosk-kopf img { height: 34px; }
.kiosk-kopf .kiosk-marke b { display: block; font-size: 16px; }
.kiosk-kopf .kiosk-marke span { font-size: 13px; color: #b9b3a8; }
.kiosk-koerper { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start; }
.kiosk-bv { display: flex; flex-direction: column; gap: 16px; }
.kiosk-karte { background: #1f1c18; border-radius: 16px; padding: 22px 26px 22px 30px; box-shadow: inset 8px 0 0 #4a463f; }
.kiosk-karte.akut { box-shadow: inset 8px 0 0 #ff5a4e; }
.kiosk-karte.bald { box-shadow: inset 8px 0 0 #ffc043; }
.kiosk-karte.plan { box-shadow: inset 8px 0 0 #58d27a; }
.kiosk-karte .kk-oben { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kiosk-karte h2 { font-size: 26px; overflow-wrap: anywhere; }
.kiosk-karte .kk-bb { font-size: 20px; color: #b9b3a8; white-space: nowrap; }
.kiosk-karte .kk-bb b { color: #fff; font-size: 26px; }
.kiosk-karte .kk-bb.akut b { color: #ff7a70; }
.kiosk-karte .kk-zaehler { display: flex; gap: 22px; margin-top: 12px; font-size: 17px; color: #b9b3a8; }
.kiosk-karte .kk-zaehler b { font-size: 24px; color: #fff; margin-right: 4px; }
.kiosk-karte .kk-zaehler .akut b { color: #ff7a70; }
.kiosk-karte .kk-zaehler .bald b { color: #ffc043; }
.kiosk-karte ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 18px; }
.kiosk-karte ul li { display: flex; gap: 12px; align-items: baseline; }
.kiosk-karte ul li .frist { margin-left: auto; white-space: nowrap; font-size: 16px; }
.kiosk-karte ul li .frist.akut { color: #ff7a70; } .kiosk-karte ul li .frist.bald { color: #ffc043; }
.kiosk-seite { display: flex; flex-direction: column; gap: 20px; }
.kiosk-block { background: #1f1c18; border-radius: 16px; padding: 20px 24px; }
.kiosk-block h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #b9b3a8; margin-bottom: 12px; }
.kiosk-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 18px; }
.kiosk-block ul li { display: flex; gap: 12px; align-items: baseline; }
.kiosk-block ul li .rechts { margin-left: auto; white-space: nowrap; color: #b9b3a8; font-size: 16px; }
.kiosk-block .wer { display: inline-block; background: #2e2a25; padding: 1px 9px; border-radius: 999px; font-size: 14px; color: #e6e1d8; }
.kiosk-block .zeit { font-weight: 700; width: 64px; flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kiosk .dot { width: 11px; height: 11px; top: 0; }
.kiosk .dot.bald { background: #ffc043; } .kiosk .dot.akut { background: #ff5a4e; } .kiosk .dot.plan { background: #58d27a; }
.kiosk-fuss { position: fixed; bottom: 12px; right: 20px; font-size: 13px; color: #6f6a62; }
.kiosk-fuss a { color: #b9b3a8; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; }
  .seite { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linie); padding: 12px 14px; }
  .seite .nav-bv, .seite .unten { display: none; }
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .seite { min-width: 0; max-width: 100vw; overflow: hidden; }
  .nav { display: flex; gap: 4px; overflow-x: auto; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .nav a { padding: 7px 10px; font-size: 13.5px; white-space: nowrap; }
  .nav-titel { display: none; }
  .marke { padding-bottom: 10px; }
  .inhalt { padding: 16px 14px 40px; }
  .spalten { grid-template-columns: 1fr; }
  .bv-karte .oben { flex-direction: column; }
  .baubeginn { text-align: left; }
  .top-punkte li { flex-wrap: wrap; }
  .top-punkte .frist { margin-left: 16px; }
  .liste li { flex-wrap: wrap; }
  .liste .rechts { margin-left: 30px; text-align: left; }
  .kacheln { grid-template-columns: 1fr 1fr; }
  .kachel .wert { font-size: 24px; }
  .kiosk-koerper { grid-template-columns: 1fr; }
  .kiosk-karte h2 { font-size: 20px; }
  .kiosk-karte .kk-oben { flex-direction: column; gap: 4px; }
  .kiosk-karte ul li, .kiosk-block ul li { flex-wrap: wrap; font-size: 16px; }
  .kiosk-karte ul li .frist, .kiosk-block ul li .rechts { margin-left: 23px; }
  .kiosk-kopf img { height: 28px; }
  .kiosk-rahmen { padding: 18px; }
  .kiosk-kopf .uhr { font-size: 30px; }
}