/* BR-App – Oberfläche
   Optik angelehnt an br-dienstleistungs-gmbh.de: Rot #DD3030, Schwarz, Grau #666,
   Raleway für Überschriften, roter Balken als Signet. Struktur modern: App-Shell, Karten, klare Hierarchie.
   Schriften liegen lokal (keine Google-Server → DSGVO). */

@font-face { font-family: "Raleway"; font-weight: 500; font-display: swap; src: url("../fonts/raleway-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-weight: 500; font-display: swap; src: url("../fonts/raleway-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-weight: 600; font-display: swap; src: url("../fonts/raleway-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Raleway"; font-weight: 600; font-display: swap; src: url("../fonts/raleway-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Raleway"; font-weight: 700; font-display: swap; src: url("../fonts/raleway-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Raleway"; font-weight: 700; font-display: swap; src: url("../fonts/raleway-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Raleway"; font-weight: 800; font-display: swap; src: url("../fonts/raleway-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2190-2199, U+2212; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2190-2199, U+2212; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2190-2199, U+2212; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root {
  --rot: #DD3030;
  --rot-dunkel: #B8262A;
  --rot-hell: #FBEAEA;
  --schwarz: #141414;
  --tinte: #1F1F1F;
  --grau: #666666;
  --grau-2: #8C8C8C;
  --linie: #E7E5E2;
  --flaeche: #F6F5F3;
  --karte: #FFFFFF;
  --gruen: #1F8A5B;
  --gruen-hell: #E6F4EC;
  --gelb: #B7791F;
  --gelb-hell: #FDF3E1;
  --blau: #2EA3F2;
  --radius: 12px;
  --schatten: 0 1px 2px rgba(20,20,20,.04), 0 4px 16px rgba(20,20,20,.04);
  --seite: 264px;
  --ueberschrift: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--text); font-size: 14.5px; line-height: 1.5; color: var(--tinte); background: var(--flaeche); }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--ueberschrift); font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--schwarz); }
h1 { font-size: 26px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; }
.gedaempft { color: var(--grau); }
.klein { font-size: 12.5px; }
.fett { font-weight: 600; }
.rot { color: var(--rot); }
.nowrap { white-space: nowrap; }
.versteckt { display: none !important; }
.inhalt svg, .kopfleiste svg { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* ---------- App-Shell ---------- */
.shell { display: grid; grid-template-columns: var(--seite) 1fr; min-height: 100vh; background: linear-gradient(to right, var(--schwarz) var(--seite), transparent var(--seite)); }
.seitenleiste { background: var(--schwarz); color: #D9D9D9; padding: 22px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.marke { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; text-decoration: none; color: #fff; }
.marke svg { width: 44px; height: 38px; color: #fff; flex: none; }
.marke b { font-family: var(--ueberschrift); font-size: 17px; font-weight: 700; display: block; letter-spacing: .01em; }
.marke small { display: block; font-size: 11.5px; color: #9A9A9A; letter-spacing: .08em; text-transform: uppercase; }
.nav-titel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7A7A7A; padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: #D0D0D0; font-weight: 500; position: relative; }
.nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav a:hover { background: #222; color: #fff; }
.nav a.aktiv { background: #242424; color: #fff; }
.nav a.aktiv::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--rot); }
.nav .zahl { margin-left: auto; background: var(--rot); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }
.seitenleiste .unten { margin-top: auto; border-top: 1px solid #2A2A2A; padding-top: 14px; display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--rot); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.avatar.grau { background: #E9E7E4; color: var(--tinte); }
.seitenleiste .unten .wer { font-size: 13px; line-height: 1.3; min-width: 0; }
.seitenleiste .unten .wer small { color: #8A8A8A; display: block; }
.seitenleiste .unten form { margin-left: auto; }
.icon-knopf { background: none; border: 0; color: #9A9A9A; cursor: pointer; padding: 6px; border-radius: 6px; }
.icon-knopf:hover { color: #fff; background: #242424; }

.haupt { min-width: 0; }
.kopfleiste { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 30px 36px 18px; flex-wrap: wrap; }
.kopfleiste .titel::before { content: ""; display: block; width: 48px; height: 4px; background: var(--rot); border-radius: 2px; margin-bottom: 12px; }
.kopfleiste .unterzeile { color: var(--grau); margin-top: 4px; }
.kopfleiste .aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.inhalt { padding: 0 36px 48px; }
.umgebung { background: var(--gelb); color: #fff; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 3px; text-transform: uppercase; }
.brotkrumen { font-size: 13px; color: var(--grau); margin-bottom: 6px; }
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { color: var(--rot); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linie); background: var(--karte); color: var(--tinte); padding: 9px 15px; border-radius: 9px; font: 600 13.5px var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.knopf svg { width: 16px; height: 16px; }
.knopf:hover { border-color: #CFCBC6; background: #FBFAF9; }
.knopf.primaer { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.primaer:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf.dunkel { background: var(--schwarz); border-color: var(--schwarz); color: #fff; }
.knopf.leise { border-color: transparent; background: transparent; color: var(--grau); }
.knopf.leise:hover { color: var(--tinte); background: #EFEDEA; }
.knopf.gefahr { color: var(--rot); }
.knopf.klein { padding: 6px 11px; font-size: 12.5px; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Karten / Raster ---------- */
.raster { display: grid; gap: 18px; }
.raster.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.haupt-seite { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); min-width: 0; }
.karte > .kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--linie); }
.karte > .kopf p { margin: 2px 0 0; color: var(--grau); font-size: 12.5px; }
.karte > .koerper { padding: 18px 20px; }
.karte > .koerper.eng { padding: 0; }
.karte + .karte { margin-top: 18px; }
.raster > .karte { margin-top: 0; }

.kennzahl { padding: 18px 20px; position: relative; overflow: hidden; text-decoration: none; display: block; }
.kennzahl .wert { font-family: var(--ueberschrift); font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--schwarz); font-variant-numeric: tabular-nums; }
.kennzahl .bez { color: var(--grau); font-size: 13px; margin-top: 4px; }
.kennzahl .symbol { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--flaeche); color: var(--grau); }
.kennzahl .symbol svg { width: 18px; height: 18px; }
.kennzahl.akzent { background: var(--schwarz); border-color: var(--schwarz); }
.kennzahl.akzent .wert { color: #fff; }
.kennzahl.akzent .bez { color: #A8A8A8; }
.kennzahl.akzent .symbol { background: var(--rot); color: #fff; }
a.kennzahl:hover { border-color: #CFCBC6; }

/* ---------- Tabellen ---------- */
.tabelle-huelle { overflow-x: auto; }
table.daten { width: 100%; border-collapse: collapse; }
table.daten th { text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--grau-2); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--linie); background: #FBFAF9; white-space: nowrap; }
table.daten td { padding: 11px 14px; border-bottom: 1px solid #F0EEEB; vertical-align: middle; }
table.daten tr:last-child td { border-bottom: 0; }
table.daten tbody tr:hover { background: #FCFBFA; }
table.daten tr.klickbar { cursor: pointer; }
.person { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.person .avatar { width: 32px; height: 32px; font-size: 12px; }
.person b { font-weight: 600; display: block; }
.person small { color: var(--grau); font-size: 12px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #EFEDEA; color: var(--grau); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ohne-punkt::before { display: none; }
.badge.aktiv, .badge.genehmigt { background: var(--gruen-hell); color: var(--gruen); }
.badge.vorgemerkt { background: var(--gelb-hell); color: var(--gelb); }
.badge.abgelehnt { background: var(--rot-hell); color: var(--rot); }
.badge.storniert, .badge.ausgeschieden { background: #EFEDEA; color: var(--grau-2); }
.badge.bereich { background: #F2F1EF; color: var(--tinte); }
.badge.bereich::before { background: var(--farbe, var(--rot)); }
.chip-rot { background: var(--rot); color: #fff; }

/* ---------- Formulare ---------- */
label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=password], input[type=search], select, textarea {
  width: 100%; font: 400 14px var(--text); color: var(--tinte); background: #fff; border: 1px solid #DAD7D2; border-radius: 9px; padding: 9px 11px; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(221,48,48,.14); }
input[type=checkbox], input[type=radio] { accent-color: var(--rot); width: 16px; height: 16px; }
.feld { margin-bottom: 16px; }
.feld .hilfe { font-size: 12px; color: var(--grau); margin-top: 5px; }
.feld .fehler, .fehlerliste { color: var(--rot); font-size: 12.5px; margin-top: 5px; }
.feld.hat-fehler input, .feld.hat-fehler select { border-color: var(--rot); }
.feld.checkbox { display: flex; align-items: center; gap: 10px; }
.feld.checkbox label { margin: 0; order: 2; font-weight: 500; }
.feldraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 18px; }
.feldraster .breit { grid-column: 1 / -1; }
.formular-gruppe { padding: 20px 22px 6px; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.formular-gruppe:last-of-type { border-bottom: 0; }
.formular-gruppe h3 { font-size: 14px; }
.formular-gruppe .erl { color: var(--grau); font-size: 12.5px; margin-top: 4px; }
.formular-fuss { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--linie); background: #FBFAF9; border-radius: 0 0 var(--radius) var(--radius); }
ul.checkbox-liste, div.checkbox-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-liste label, #id_bereiche label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; border: 1px solid var(--linie); border-radius: 8px; padding: 7px 11px; margin: 0; cursor: pointer; }
#id_bereiche { display: flex; flex-wrap: wrap; gap: 8px; }
#id_bereiche > div { display: contents; }
.filterleiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.filterleiste input[type=search] { max-width: 280px; }
.filterleiste select { width: auto; }
.segment { display: inline-flex; background: #EFEDEA; border-radius: 9px; padding: 3px; }
.segment a { text-decoration: none; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--grau); }
.segment a.aktiv { background: #fff; color: var(--tinte); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- Meldungen ---------- */
.meldungen { display: grid; gap: 8px; margin-bottom: 18px; }
.meldung { display: block; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--grau); font-size: 13.5px; }
.meldung.success { border-left-color: var(--gruen); }
.meldung.warning { border-left-color: var(--gelb); background: #FFFCF6; }
.meldung.error { border-left-color: var(--rot); background: #FFF8F8; }
.meldung.info { border-left-color: var(--blau); }

/* ---------- Detailseite ---------- */
.profil { display: flex; gap: 18px; align-items: center; }
.profil .avatar { width: 64px; height: 64px; font-size: 22px; font-family: var(--ueberschrift); }
.definition { display: grid; grid-template-columns: 170px 1fr; gap: 9px 16px; margin: 0; font-size: 14px; }
.definition dt { color: var(--grau); }
.definition dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.zeitachse { list-style: none; margin: 0; padding: 0; }
.zeitachse li { position: relative; padding: 0 0 16px 22px; }
.zeitachse li::before { content: ""; position: absolute; left: 5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #D5D2CD; }
.zeitachse li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 1px; background: var(--linie); }
.zeitachse li:last-child::after { display: none; }
.zeitachse li.jetzt::before { background: var(--rot); box-shadow: 0 0 0 4px var(--rot-hell); }
.zeitachse .wann { font-size: 12px; color: var(--grau); }

/* Urlaubskonto */
.konto { display: grid; gap: 0; }
.konto .zeile { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--linie); font-variant-numeric: tabular-nums; }
.konto .zeile span:first-child { color: var(--grau); }
.konto .summe { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; }
.konto .summe b { font-family: var(--ueberschrift); font-size: 32px; font-weight: 800; color: var(--rot); }
.ring { --anteil: 0; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(var(--rot) calc(var(--anteil) * 1%), #EFEDEA 0); display: grid; place-items: center; }
.ring > div { width: 104px; height: 104px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; }
.ring b { font-family: var(--ueberschrift); font-size: 28px; font-weight: 800; display: block; line-height: 1; }
.ring small { color: var(--grau); font-size: 11.5px; }
.monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 12px; }
.monate span { height: 26px; border-radius: 5px; background: #EFEDEA; font-size: 10.5px; display: grid; place-items: center; color: var(--grau-2); }
.monate span.an { background: var(--schwarz); color: #fff; }

/* Balken */
.balken { display: grid; gap: 10px; }
.balken .z { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.balken .spur { height: 10px; background: #EFEDEA; border-radius: 99px; overflow: hidden; }
.balken .spur i { display: block; height: 100%; background: var(--schwarz); border-radius: 99px; }
.balken .z:first-child .spur i { background: var(--rot); }

.liste-schlicht { list-style: none; margin: 0; padding: 0; }
.liste-schlicht li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid #F0EEEB; }
.liste-schlicht li:last-child { border-bottom: 0; }
.leer { padding: 26px 20px; text-align: center; color: var(--grau); }
.leer svg { width: 30px; height: 30px; color: #C9C5BF; display: block; margin: 0 auto 8px; }

/* Befunde */
.befund { display: flex; gap: 12px; align-items: flex-start; padding: 12px 20px; border-bottom: 1px solid #F0EEEB; text-decoration: none; }
.befund:last-child { border-bottom: 0; }
.befund .punkt { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--gelb); }
.befund.fehler .punkt { background: var(--rot); }
.befund.info .punkt { background: var(--blau); }
.befund .anz { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Monatsplan ---------- */
.plan-huelle { overflow-x: auto; }
table.plan { border-collapse: separate; border-spacing: 0; font-size: 12px; width: 100%; min-width: 980px; table-layout: fixed; }
table.plan col.c-name { width: 210px; } table.plan col.c-rest { width: 70px; }
table.plan th, table.plan td { padding: 0; text-align: center; }
table.plan thead th { position: sticky; top: 0; background: #fff; z-index: 2; font-weight: 600; color: var(--grau); padding: 8px 0 6px; border-bottom: 1px solid var(--linie); }
table.plan thead th .wt { display: block; font-size: 10px; color: var(--grau-2); font-weight: 500; }
table.plan thead th.we { color: #B5B1AB; }
table.plan thead th.ft { color: var(--rot); }
table.plan thead th.heute { color: #fff; }
table.plan thead th.heute span.tag { background: var(--rot); border-radius: 6px; padding: 1px 5px; }
table.plan .name { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 6px 12px 6px 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--linie); }
table.plan .name a { text-decoration: none; font-weight: 600; }
table.plan .name small { display: block; color: var(--grau); font-weight: 400; }
table.plan .rest { position: sticky; right: 0; background: #fff; padding: 0 8px; border-left: 1px solid var(--linie); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.plan tbody td { border-bottom: 1px solid #F3F1EE; height: 38px; }
table.plan td.z { position: relative; }
table.plan td.z > i { position: absolute; inset: 7px 1px; border-radius: 4px; display: block; }
td.z.wochenende > i { background: #F5F4F2; }
td.z.feiertag > i { background: repeating-linear-gradient(135deg, #F3F2F0 0 4px, #E9E7E4 4px 5px); }
td.z.aus > i { background: repeating-linear-gradient(45deg, #FAFAF9 0 3px, #F1F0EE 3px 4px); }
td.z.bu > i { background: #3A3A3A; }
td.z.genehmigt > i { background: var(--rot); }
td.z.vorgemerkt > i { background: repeating-linear-gradient(135deg, var(--rot) 0 3px, #F6C9C9 3px 7px); }
td.z.sonder > i { background: var(--blau); }
td.z.unbezahlt > i { background: #B9B5AF; }
td.z a { position: absolute; inset: 0; }
td.z.heute { background: #FFF6F6; }
.legende { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--grau); padding: 12px 16px; border-top: 1px solid var(--linie); }
.legende span { display: inline-flex; align-items: center; gap: 7px; }
.legende i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }

/* Zeiträume im Erfassungsformular */
.zeitraum-zeile { display: grid; grid-template-columns: 1fr 1fr 1.2fr 80px 40px; gap: 10px; align-items: end; padding: 12px 0; border-bottom: 1px dashed var(--linie); }
.zeitraum-zeile .tage { font-family: var(--ueberschrift); font-weight: 800; font-size: 20px; text-align: center; padding-bottom: 6px; }
.zeitraum-zeile label { font-size: 12px; color: var(--grau); }
.vorschau { background: var(--schwarz); color: #fff; border-radius: var(--radius); padding: 22px; position: sticky; top: 20px; }
.vorschau h3 { color: #fff; }
.vorschau .zeile { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #2B2B2B; font-variant-numeric: tabular-nums; }
.vorschau .zeile span:first-child { color: #A5A5A5; }
.vorschau .gross { font-family: var(--ueberschrift); font-weight: 800; font-size: 40px; color: #fff; line-height: 1; }
.vorschau .gross.negativ { color: #FF8A8A; }

/* Drop-Zone */
.ablage { border: 2px dashed #D5D1CB; border-radius: var(--radius); padding: 38px 20px; text-align: center; background: #FCFBFA; transition: border-color .15s, background .15s; cursor: pointer; display: block; }
.ablage.drueber { border-color: var(--rot); background: var(--rot-hell); }
.ablage svg { width: 38px; height: 38px; color: var(--rot); }
.ablage b { display: block; font-family: var(--ueberschrift); font-size: 17px; margin: 8px 0 4px; }
.ablage input { display: none; }
.dateiliste { margin-top: 12px; font-size: 13px; color: var(--grau); }

/* Schritte */
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.schritte div { padding: 16px 18px; border-right: 1px solid var(--linie); position: relative; }
.schritte div:last-child { border-right: 0; }
.schritte div::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--schwarz); color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; margin-bottom: 8px; }
.schritte div.fertig::before { background: var(--gruen); content: "✓"; }
.schritte div.jetzt::before { background: var(--rot); }
.schritte b { display: block; font-size: 13.5px; }
.schritte span { color: var(--grau); font-size: 12.5px; }

/* Entscheidung */
.entscheidung { display: inline-flex; border: 1px solid var(--linie); border-radius: 9px; overflow: hidden; }
.entscheidung input { display: none; }
.entscheidung label { margin: 0; padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-weight: 600; color: var(--grau); }
.entscheidung label + input + label { border-left: 1px solid var(--linie); }
.entscheidung input:checked + label.ja { background: var(--gruen); color: #fff; }
.entscheidung input:checked + label.nein { background: var(--rot); color: #fff; }
.entscheidung input:checked + label.offen { background: var(--gelb-hell); color: var(--gelb); }
details.aktion summary { list-style: none; cursor: pointer; }
details.aktion summary::-webkit-details-marker { display: none; }
details.aktion[open] { background: #FBFAF9; }
.aktion-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; padding: 10px 0 2px; }
.aktion-form input { width: auto; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.anmeldung .bild { background: radial-gradient(1200px 500px at 20% 110%, rgba(221,48,48,.55), transparent 60%), linear-gradient(160deg, #1C1C1C, #0B0B0B); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.anmeldung .bild::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border: 40px solid rgba(255,255,255,.04); border-radius: 50%; }
.anmeldung .bild svg { width: 84px; height: 74px; color: #fff; }
.anmeldung .bild h1 { color: #fff; font-size: 40px; line-height: 1.15; max-width: 460px; }
.anmeldung .bild h1::before { content: ""; display: block; width: 64px; height: 5px; background: var(--rot); margin-bottom: 22px; border-radius: 3px; }
.anmeldung .bild p { color: #B5B5B5; max-width: 440px; }
.anmeldung .formular { display: grid; place-items: center; padding: 40px; background: #fff; }
.anmeldung form { width: 100%; max-width: 360px; }

/* Responsiv */
@media (max-width: 1200px) {
  .raster.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster.haupt-seite { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; background: none; }
  .seitenleiste { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; }
  .seitenleiste .nav-titel, .seitenleiste .unten .wer { display: none; }
  .marke { padding: 0 8px 0 0; }
  .nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .nav a.aktiv::before { display: none; }
  .seitenleiste .unten { margin: 0 0 0 auto; border: 0; padding: 0; }
  .kopfleiste, .inhalt { padding-left: 16px; padding-right: 16px; }
  .raster.k3, .raster.k2 { grid-template-columns: 1fr; }
  .formular-gruppe { grid-template-columns: 1fr; gap: 6px; }
  .anmeldung { grid-template-columns: 1fr; }
  .anmeldung .bild { padding: 32px; min-height: 260px; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .zeitraum-zeile { grid-template-columns: 1fr 1fr; }
  .definition { grid-template-columns: 1fr; gap: 2px; }
  .definition dd { margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .raster.k4 { grid-template-columns: 1fr 1fr; }
  .nav a span.txt { display: none; }
}
@media print {
  .seitenleiste, .kopfleiste .aktionen, .filterleiste, .legende { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}

/* ---------- Ampeln (Unterweisung, Vorsorge, Flurförder) ---------- */
.ampel { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; }
.ampel i, .punkt-a { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: #D5D2CD; }
.ampel.rot i, .punkt-a.rot { background: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); }
.ampel.gelb i, .punkt-a.gelb { background: #E0A100; box-shadow: 0 0 0 3px var(--gelb-hell); }
.ampel.gruen i, .punkt-a.gruen { background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-hell); }
.ampel.grau i, .punkt-a.grau { background: #D5D2CD; }
.ampel.rot { color: var(--rot); } .ampel.gelb { color: var(--gelb); } .ampel.gruen { color: var(--gruen); } .ampel.grau { color: var(--grau-2); }
.statuskacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.statuskachel { border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; background: #fff; text-decoration: none; display: block; }
.statuskachel small { display: block; color: var(--grau); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.statuskachel.rot { border-color: #F2B8B8; background: #FFF8F8; }
.statuskachel.gelb { border-color: #F1D9A8; background: #FFFCF4; }
.statuskachel.gruen { border-color: #BFE3CF; background: #F7FCF9; }
table.matrix td.m, table.matrix th.m { text-align: center; }
table.matrix td.m .punkt-a { margin: 0 auto; }
table.matrix td.m small { display: block; font-size: 10.5px; color: var(--grau); margin-top: 3px; white-space: nowrap; }
table.matrix select { width: auto; min-width: 110px; padding: 6px 8px; font-size: 13px; }
table.matrix select.pflicht { border-color: var(--rot); background: var(--rot-hell); font-weight: 600; }
table.matrix select.angebot { border-color: #E0A100; background: var(--gelb-hell); }
table.matrix select.wunsch { border-color: var(--blau); background: #EEF7FE; }
.auswahlliste { max-height: 520px; overflow-y: auto; border-top: 1px solid var(--linie); }
.auswahlliste label { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 9px 20px; border-bottom: 1px solid #F0EEEB; font-weight: 500; margin: 0; cursor: pointer; }
.auswahlliste label:hover { background: #FCFBFA; }
.auswahlliste label small { color: var(--grau); font-weight: 400; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 18px; overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; font-weight: 600; font-size: 13.5px; color: var(--grau); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; }
.tabs a:hover { color: var(--tinte); }
.tabs a.aktiv { color: var(--schwarz); border-bottom-color: var(--rot); }
.tabs a .punkt-a { width: 8px; height: 8px; box-shadow: none; }

/* Profil mit Foto */
.profilkopf { display: grid; grid-template-columns: 132px 1fr; gap: 24px; align-items: start; }
.foto { width: 132px; height: 160px; border-radius: 12px; background: #EFEDEA center/cover no-repeat; display: grid; place-items: center; font-family: var(--ueberschrift); font-size: 36px; font-weight: 800; color: #B5B1AB; position: relative; overflow: hidden; }
.foto form { position: absolute; inset: auto 0 0 0; background: rgba(20,20,20,.65); opacity: 0; transition: opacity .15s; }
.foto:hover form { opacity: 1; }
.foto label { color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; padding: 7px; margin: 0; cursor: pointer; font-family: var(--text); }
.foto input { display: none; }
.avatar.bild { background-size: cover; background-position: center; color: transparent; }

/* Personalakte */
.ordnerraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ordner { border: 1px solid var(--linie); border-radius: 12px; padding: 16px; text-decoration: none; background: #fff; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; }
.ordner:hover { border-color: #CFCBC6; transform: translateY(-1px); }
.ordner.aktiv { border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); }
.ordner .mappe { width: 44px; height: 34px; border-radius: 4px 8px 8px 8px; background: #F2D48A; position: relative; }
.ordner .mappe::before { content: ""; position: absolute; left: 0; top: -6px; width: 18px; height: 8px; background: #E9C46A; border-radius: 4px 4px 0 0; }
.ordner.ohne .mappe { background: #ECEAE6; } .ordner.ohne .mappe::before { background: #E0DDD8; }
.ordner b { font-size: 13.5px; } .ordner small { color: var(--grau); }
.dateizeile { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid #F0EEEB; }
.dateizeile:last-child { border-bottom: 0; }
.dateityp { width: 38px; height: 46px; border-radius: 6px; background: var(--rot); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: end center; padding-bottom: 6px; letter-spacing: .04em; }
.dateityp.docx { background: #2B579A; } .dateityp.xlsm, .dateityp.xlsx { background: #217346; } .dateityp.jpg, .dateityp.png { background: #8C8C8C; }
.dateizeile code { font-size: 11.5px; color: var(--grau); background: #F4F3F1; padding: 2px 6px; border-radius: 5px; word-break: break-all; }

/* Objekt-Dashboard */
.objektraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.objektkarte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); display: flex; flex-direction: column; text-decoration: none; }
.objektkarte .bild { height: 150px; background: linear-gradient(135deg, #2A2A2A, #111) center/cover no-repeat; position: relative; }
.objektkarte .bild .platzhalter { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.18); }
.objektkarte .bild .platzhalter svg { width: 70px; height: 70px; }
.objektkarte .bild .belegt { position: absolute; left: 14px; bottom: 12px; background: rgba(20,20,20,.75); color: #fff; font-weight: 700; font-size: 12.5px; padding: 5px 10px; border-radius: 99px; backdrop-filter: blur(4px); }
.objektkarte .inhalt-k { padding: 16px 18px; display: grid; gap: 12px; }
.objektkarte h3 { font-size: 17px; }
.objektkarte .adr { color: var(--grau); font-size: 13px; margin-top: 2px; }
.objektkarte .werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.objektkarte .werte div { background: var(--flaeche); border-radius: 8px; padding: 8px 10px; }
.objektkarte .werte small { display: block; color: var(--grau); font-size: 11px; }
.objektkarte .werte b { font-variant-numeric: tabular-nums; }
.belegbalken { height: 8px; background: #EFEDEA; border-radius: 99px; overflow: hidden; }
.belegbalken i { display: block; height: 100%; background: var(--rot); }
.vermieter { border-top: 1px dashed var(--linie); padding-top: 10px; font-size: 13px; display: grid; gap: 3px; }
.vermieter a { text-decoration: none; color: var(--tinte); display: inline-flex; gap: 6px; align-items: center; }
.vermieter a:hover { color: var(--rot); }
.hinweisliste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hinweisliste li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.hinweisliste li .punkt-a { margin-top: 4px; }
@media (max-width: 900px) {
  .statuskacheln { grid-template-columns: 1fr 1fr; }
  .profilkopf { grid-template-columns: 1fr; }
}
.statuskacheln { grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); }
.statuskachel .ampel { white-space: normal; align-items: flex-start; line-height: 1.35; }
.statuskachel .ampel i { margin-top: 4px; }

/* ---------- Schichtplanung (Lastenheft 13) ---------- */
.schicht-kopf { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.schicht-kopf .links, .schicht-kopf .rechts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kw-titel { font-family: var(--ueberschrift); font-weight: 800; font-size: 18px; }
.kw-titel small { font-family: var(--text); font-weight: 500; font-size: 13px; color: var(--grau); margin-left: 6px; }
.umschalter { display: inline-flex; background: #EFEDEA; border-radius: 9px; padding: 3px; }
.umschalter button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font: 600 13px var(--text); color: var(--grau); cursor: pointer; }
.umschalter button.aktiv { background: #fff; color: var(--tinte); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.wochenraster-huelle { overflow-x: auto; }
table.wochenraster { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1060px; table-layout: fixed; }
table.wochenraster col.c-art { width: 168px; }
table.wochenraster th { font-size: 12px; font-weight: 600; color: var(--grau); padding: 9px 6px 7px; border-bottom: 1px solid var(--linie); background: #FBFAF9; text-align: center; position: sticky; top: 0; z-index: 2; }
table.wochenraster th .wt { display: block; font-family: var(--ueberschrift); font-size: 15px; color: var(--schwarz); font-weight: 800; }
table.wochenraster th.we .wt { color: #A9A49D; }
table.wochenraster th.ft .wt, table.wochenraster th.ft { color: var(--rot); }
table.wochenraster th.heute { background: var(--rot-hell); }
table.wochenraster th small { display: block; font-weight: 500; font-size: 11px; color: var(--rot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.wochenraster td { vertical-align: top; border-bottom: 1px solid #F0EEEB; border-left: 1px solid #F3F1EE; padding: 6px; min-height: 64px; }
table.wochenraster td.art { position: sticky; left: 0; background: #fff; z-index: 1; border-left: 0; padding: 10px 12px 10px 16px; }
table.wochenraster td.art b { display: block; font-size: 13.5px; }
table.wochenraster td.art small { color: var(--grau); font-size: 12px; }
table.wochenraster td.art .balken-farbe { position: absolute; left: 0; top: 8px; bottom: 8px; width: 5px; border-radius: 0 4px 4px 0; }
table.wochenraster tr.sonder td { background: #FCFBFA; }
table.wochenraster tr.sonder td.art b { color: var(--grau); font-weight: 600; }
table.wochenraster td.ablage-ziel.drueber { background: var(--rot-hell); box-shadow: inset 0 0 0 2px var(--rot); }
table.wochenraster td.laeuft-nicht { background: repeating-linear-gradient(135deg, #FFFFFF 0 6px, #F7F6F4 6px 7px); }
.zelle-inhalt { display: flex; flex-direction: column; gap: 4px; min-height: 52px; }
.ist { font-size: 11px; color: var(--grau-2); text-align: right; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ist b { color: var(--tinte); }

.chip { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E2DFDA; border-radius: 7px; padding: 4px 7px; font-size: 12.5px; line-height: 1.25; cursor: grab; user-select: none; position: relative; min-width: 0; }
.chip:hover { border-color: #BDB8B1; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.chip.zieht { opacity: .4; }
.chip .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 500; }
.chip .ampeln { display: inline-flex; gap: 3px; flex: none; }
.chip .ampeln i { width: 7px; height: 7px; border-radius: 50%; background: #D5D2CD; display: block; }
.chip .ampeln i.rot { background: var(--rot); } .chip .ampeln i.gelb { background: #E0A100; } .chip .ampeln i.gruen { background: var(--gruen); }
.chip .mk { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--grau); flex: none; white-space: nowrap; }
.chip.abw { border-style: dashed; border-color: #9C968E; }
.chip.gast { background: #F2F8FE; border-color: #B8DDF8; }
.chip.beantragt { background: repeating-linear-gradient(135deg, #FFF 0 5px, #FBE3E3 5px 9px); border-color: #F2B8B8; }
.chip.urlaub { background: var(--rot-hell); border-color: #F2B8B8; }
.chip.warn-rot { box-shadow: inset 3px 0 0 var(--rot); }
.chip.stumm { cursor: pointer; color: var(--grau); }

.tafel { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 16px; }
.tafel .spalte { border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.tafel .spalte > header { padding: 11px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #F4F3F1; }
.tafel .spalte > header b { font-family: var(--ueberschrift); font-size: 15px; }
.tafel .spalte > header span { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.25); }
.tafel .platz { padding: 8px 12px; border-top: 1px solid #F0EEEB; }
.tafel .platz > small { display: flex; justify-content: space-between; color: var(--grau); font-size: 11.5px; font-weight: 600; margin-bottom: 5px; }
.tafel .ablage-ziel { min-height: 34px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.tafel .ablage-ziel.drueber { background: var(--rot-hell); box-shadow: inset 0 0 0 2px var(--rot); }
.tafel .gruppe-ziel { flex: 1; }
.tafel .spalte.ohne > header { background: #fff; border-bottom: 1px dashed var(--linie); }

.bereichsziele { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linie); background: #FBFAF9; align-items: center; }
.bereichsziele .ablage-ziel { border: 1.5px dashed #CFCBC6; border-radius: 9px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--grau); display: inline-flex; gap: 7px; align-items: center; }
.bereichsziele .ablage-ziel i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bereichsziele .ablage-ziel.drueber { border-color: var(--rot); background: var(--rot-hell); color: var(--rot); }

dialog.dialog { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.dialog::backdrop { background: rgba(20,20,20,.45); }
dialog.dialog .d-kopf { padding: 18px 22px 12px; border-bottom: 1px solid var(--linie); }
dialog.dialog .d-kopf h3 { font-size: 17px; }
dialog.dialog .d-kopf p { margin: 4px 0 0; color: var(--grau); font-size: 13px; }
dialog.dialog .d-koerper { padding: 16px 22px; display: grid; gap: 12px; max-height: 60vh; overflow-y: auto; }
dialog.dialog .d-fuss { padding: 14px 22px; border-top: 1px solid var(--linie); display: flex; gap: 8px; justify-content: flex-end; background: #FBFAF9; flex-wrap: wrap; }
dialog.dialog .wahl { display: grid; gap: 6px; }
dialog.dialog .wahl label { display: flex; gap: 9px; align-items: center; font-weight: 500; margin: 0; border: 1px solid var(--linie); border-radius: 9px; padding: 9px 11px; cursor: pointer; }
dialog.dialog .wahl label:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
dialog.dialog .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.warnliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.warnliste li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--gelb-hell); }
.warnliste li.rot { background: #FFF1F1; }
.warnliste li .punkt-a { margin-top: 4px; }
.warnliste li.ok { background: var(--gruen-hell); }
.tagesliste { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tagesliste div { border: 1px solid var(--linie); border-radius: 7px; text-align: center; padding: 5px 2px; font-size: 11px; color: var(--grau); }
.tagesliste div b { display: block; font-size: 13px; color: var(--tinte); }

/* Monatsraster */
table.splan { border-collapse: separate; border-spacing: 0; font-size: 12px; width: 100%; min-width: 1000px; table-layout: fixed; }
table.splan col.c-name { width: 210px; }
table.splan th, table.splan td { padding: 0; text-align: center; }
table.splan thead th { position: sticky; top: 0; background: #fff; z-index: 2; font-weight: 600; color: var(--grau); padding: 8px 0 6px; border-bottom: 1px solid var(--linie); }
table.splan thead th .wt { display: block; font-size: 10px; color: var(--grau-2); font-weight: 500; }
table.splan thead th.we { color: #B5B1AB; } table.splan thead th.ft { color: var(--rot); }
table.splan thead th.heute span.tag { background: var(--rot); color: #fff; border-radius: 6px; padding: 1px 5px; }
table.splan .name { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 5px 10px 5px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--linie); }
table.splan .name a { text-decoration: none; font-weight: 600; }
table.splan .name .ampeln { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: 1px; }
table.splan .name .ampeln i { width: 7px; height: 7px; border-radius: 50%; display: block; background: #D5D2CD; }
table.splan .name .ampeln i.rot { background: var(--rot); } table.splan .name .ampeln i.gelb { background: #E0A100; } table.splan .name .ampeln i.gruen { background: var(--gruen); }
table.splan tr.abschnitt td { background: #F4F3F1; text-align: left; padding: 7px 16px; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); position: sticky; left: 0; }
table.splan tbody td { border-bottom: 1px solid #F3F1EE; height: 30px; }
table.splan td.we { background: #FAF9F7; }
table.splan td.s > span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; margin: 3px 1px; height: 22px; border-radius: 4px; font-weight: 700; font-size: 11px; position: relative; }
table.splan td.s.urlaub > span { background: var(--rot); color: #fff; }
table.splan td.s.abwesend > span { background: #7A756E; color: #fff; }
table.splan td.s.bu > span { background: #3A3A3A; color: #fff; }
table.splan td.s.feiertag > span { background: repeating-linear-gradient(135deg, #F3F2F0 0 4px, #E4E1DD 4px 5px); color: var(--rot); }
table.splan td.s.aus > span, table.splan td.s.gast_leer > span { background: repeating-linear-gradient(45deg, #FAFAF9 0 3px, #F1F0EE 3px 4px); }
table.splan td.s.ohne_gruppe > span::after { content: "·"; color: #C9C5BF; }
table.splan td.s.weg > span { background: #fff !important; color: var(--tinte) !important; box-shadow: inset 0 0 0 2px var(--rahmen, #999); }
table.splan td.s.weg > span::before { content: "→"; font-size: 9px; margin-right: 1px; font-weight: 400; }
table.splan td.s.beantragt > span { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.0) 0 3px, rgba(221,48,48,.45) 3px 5px) !important; }
table.splan td.s.beantragt.frei > span, table.splan td.s.beantragt.ohne_gruppe > span { background: repeating-linear-gradient(135deg, #fff 0 3px, #F6C9C9 3px 6px); }
table.splan td.s.geaendert > span { outline: 2px solid var(--gelb); outline-offset: -1px; }
table.splan tr.summe td { background: #FBFAF9; font-size: 11px; color: var(--grau); height: 24px; font-variant-numeric: tabular-nums; }
table.splan tr.summe td.name { font-weight: 600; }
table.splan tr.summe:first-of-type td { border-top: 2px solid var(--linie); }
.plan-kompakt table.splan tbody td { height: 24px; }
.plan-kompakt table.splan td.s > span { height: 18px; margin: 2px 1px; font-size: 10px; }
.freigabe-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.freigabe-leiste .badge { font-size: 12.5px; }
.hinweiszeile { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: #FFF6F6; border: 1px solid #F2B8B8; color: var(--rot-dunkel); font-weight: 600; text-decoration: none; margin-bottom: 18px; }
.hinweiszeile svg { width: 18px; height: 18px; }
.hinweiszeile span { margin-left: auto; font-weight: 500; font-size: 12.5px; color: var(--grau); }

/* Baukasten */
.bk-tabelle input[type=text], .bk-tabelle input[type=time] { padding: 6px 8px; font-size: 13px; }
.bk-tabelle input[type=time] { width: 96px; }
.bk-tabelle input.kz { width: 58px; text-transform: uppercase; }
.bk-tabelle input[type=color] { width: 38px; height: 32px; padding: 2px; border: 1px solid #DAD7D2; border-radius: 7px; background: #fff; }
.tage-wahl { display: inline-flex; gap: 3px; }
.tage-wahl label { margin: 0; font-size: 11px; font-weight: 600; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 6px; cursor: pointer; color: var(--grau-2); }
.tage-wahl input { display: none; }
.tage-wahl label:has(input:checked) { background: var(--schwarz); border-color: var(--schwarz); color: #fff; }
.vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.vorlage { border: 1px solid var(--linie); border-radius: 12px; padding: 16px; display: grid; gap: 10px; background: #fff; }
.vorlage b { font-family: var(--ueberschrift); font-size: 15px; }
.vorlage p { margin: 0; color: var(--grau); font-size: 13px; }
.vorlage .aktion-form input { width: 150px; }
table.muster td, table.muster th { text-align: center; }
table.muster select { width: auto; min-width: 120px; padding: 6px 8px; font-size: 13px; }
table.muster tr.aus { display: none; }
.farbpunkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.vorschau-muster td span { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; }
.schritte-bk { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.schritte-bk a { text-decoration: none; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--linie); background: #fff; font-weight: 600; font-size: 13px; color: var(--grau); }
.schritte-bk a b { color: var(--rot); margin-right: 4px; }
@media print {
  .schicht-kopf .rechts, .freigabe-leiste form, .bereichsziele { display: none !important; }
}

/* Themenwahl (Unterweisung durchführen) */
.themenwahl { display: grid; gap: 6px; }
.themenzeile { display: grid; grid-template-columns: 1fr 112px; gap: 8px; align-items: center; border: 1px solid var(--linie); border-radius: 10px; padding: 6px 8px; }
.themenzeile label { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 500; cursor: pointer; }
.themenzeile label span { display: grid; line-height: 1.25; }
.themenzeile label small { color: var(--grau); font-size: 11.5px; font-weight: 400; }
.themenzeile select { padding: 5px 6px; font-size: 12.5px; }
.themenzeile:has(input:checked) { border-color: var(--rot); background: #FFF6F6; }
.ampel em { font-style: normal; }
.schnellwahl { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.schnellwahl .knopf { padding: 3px 8px; font-size: 12px; }
.ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: -6px 0 18px; }
.ablauf > div { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; }
.ablauf b { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--schwarz); color: #fff; display: grid; place-items: center; font-size: 12px; }
.ablauf span { display: grid; font-weight: 600; font-size: 13.5px; }
.ablauf small { color: var(--grau); font-weight: 400; font-size: 12px; }
.matrix th.m small { display: block; font-weight: 500; font-size: 10.5px; color: var(--grau); text-transform: none; letter-spacing: 0; white-space: normal; max-width: 86px; margin: 2px auto 0; line-height: 1.15; }
.posten-tabelle td { vertical-align: middle; }
.posten-tabelle input[type=date] { max-width: 160px; }
.personblock { border-top: 1px solid var(--linie); }
.personblock:first-child { border-top: 0; }
.personkopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px 4px; flex-wrap: wrap; }
.vs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 10px 54px; }
.vs-chips label { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--linie); border-radius: 999px; padding: 3px 10px 3px 6px; font-size: 12.5px; font-weight: 500; margin: 0; cursor: pointer; background: #fff; }
.vs-chips label:has(input:checked) { border-color: var(--rot); background: #FFF6F6; }
.vs-chips .punkt-a { width: 8px; height: 8px; }
.platzhalter { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px 14px; margin-top: 10px; }
.platzhalter > div { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--grau); }
.platzhalter code { background: #F3F1EE; padding: 1px 6px; border-radius: 6px; color: var(--tinte); font-size: 12px; }
.platzhalter .drin code { background: #EAF6EE; }
.platzhalter em { font-style: normal; color: var(--gruen); font-size: 11px; }
.posten-tabelle { table-layout: fixed; width: 100%; }
.posten-tabelle th:nth-child(1) { width: 36%; } .posten-tabelle th:nth-child(2) { width: 20%; }
.posten-tabelle th:nth-child(3) { width: 16%; } .posten-tabelle th:nth-child(4) { width: 28%; }
.posten-tabelle select { width: 100%; }
/* Listen & Ausdrucke */
.vorlagenleiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.vorlagenleiste a { padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); text-decoration: none; font-weight: 600; font-size: 13px; color: var(--tinte); }
.vorlagenleiste a:hover, .vorlagenleiste a.aktiv { border-color: var(--rot); background: #FFF6F6; }
.listen-raster { grid-template-columns: 340px 1fr; align-items: start; }
@media (max-width: 1000px) { .listen-raster { grid-template-columns: 1fr; } }
.chipwahl { display: flex; flex-wrap: wrap; gap: 5px; }
.chipwahl label { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--linie); border-radius: 999px; padding: 3px 9px 3px 6px; font-size: 12.5px; font-weight: 500; margin: 0; cursor: pointer; background: #fff; }
.chipwahl label:has(input:checked) { border-color: var(--rot); background: #FFF6F6; }
h3.zwischen { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); margin: 18px 0 8px; border-top: 1px solid var(--linie); padding-top: 14px; }
tr.gruppenzeile td { background: #F3F1EE; font-weight: 700; font-family: var(--ueberschrift); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 10px; background: var(--tinte, #1F1F1F); color: #fff; font: 500 14px var(--text); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.toast.gelb { background: #FFF4D6; color: #5C4300; border: 1px solid #E8C766; }
.toast.rot { background: #FDE8E8; color: #8A1C1C; border: 1px solid #E5A3A3; }
.toast[hidden] { display: none; }