:root {
  --bg: #f3f4f7; --karte: #ffffff; --text: #1b1f2a; --leise: #667085; --linie: #e3e6ec;
  --marke: #14213d; --akzent: #2f6fdb; --offen: #c2410c; --offen-bg: #fff3e8;
  --gut: #15803d; --gut-bg: #e8f6ee; --warn: #b42318; --warn-bg: #fdecea; --heute: #eef4ff;
  --frei-bg: #f1f0fb; --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1218; --karte: #181c25; --text: #e7e9ee; --leise: #98a2b3; --linie: #2a303c;
    --marke: #0b1220; --akzent: #6ea0ff; --offen: #fb923c; --offen-bg: #2b1d12;
    --gut: #4ade80; --gut-bg: #12261a; --warn: #f87171; --warn-bg: #2c1515; --heute: #16213a;
    --frei-bg: #1f1c33;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
button, input, select, textarea { font: inherit; color: inherit; }
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--marke); color: #fff;
}
.logo { height: 32px; width: auto; max-width: 104px; padding: 3px 5px; border-radius: 6px; background: #fff; object-fit: contain; }
.titel { display: flex; flex-direction: column; line-height: 1.15; flex: 1; }
.titel span { font-size: 12px; opacity: .75; }
#wer { font-size: 13px; opacity: .9; text-align: right; }
main { max-width: 760px; margin: 0 auto; padding: 12px 16px 24px; }
h2 { font-size: 18px; margin: 18px 0 8px; }
h3 { font-size: 15px; margin: 14px 0 6px; color: var(--leise); font-weight: 600; }
.leer { color: var(--leise); text-align: center; padding: 24px 0; }
.klein { font-size: 13px; color: var(--leise); }

/* Navigation unten */
nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex;
  background: var(--karte); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
nav a {
  flex: 1; text-align: center; padding: 10px 2px 8px; font-size: 12px; color: var(--leise);
  text-decoration: none; position: relative;
}
nav a b { display: block; font-size: 19px; line-height: 1.1; font-weight: 400; }
nav a.an { color: var(--akzent); font-weight: 600; }
nav a .zahl {
  position: absolute; top: 4px; left: calc(50% + 8px); background: var(--offen); color: #fff;
  border-radius: 9px; font-size: 11px; padding: 0 5px; min-width: 18px; line-height: 18px;
}

/* Karten */
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 12px; margin: 10px 0;
}
.karte.heute { background: var(--heute); border-color: var(--akzent); }
.karte.feiertag .tag-kopf b::after { content: " · Feiertag"; color: var(--offen); font-weight: 500; }
.tag-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tag-kopf b { font-size: 15px; }
.tag-kopf .ft { font-size: 12px; color: var(--offen); }

.woche-kopf { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.woche-kopf .mitte { flex: 1; text-align: center; }
.woche-kopf .mitte b { display: block; }
.woche-kopf .mitte span { font-size: 13px; color: var(--leise); }

/* Schicht-Zeilen */
.schicht {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; margin: 6px 0;
  border-radius: 9px; border-left: 5px solid var(--leise); background: var(--bg);
}
.schicht.klickbar { cursor: pointer; }
.schicht.mein { outline: 2px solid var(--akzent); outline-offset: -2px; }
.schicht.offen { background: var(--offen-bg); border-left-color: var(--offen); }
.schicht .zeit { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 92px; }
.schicht .info { flex: 1; min-width: 0; }
.schicht .info .wer { font-weight: 600; }
.schicht .info .was { font-size: 12px; color: var(--leise); }
.schicht .knopf { flex: none; }

.abw {
  display: inline-block; font-size: 13px; padding: 3px 9px; margin: 2px 4px 2px 0; border-radius: 999px;
  background: var(--frei-bg);
}
.abw.beantragt { border: 1px dashed var(--leise); background: transparent; }

.marke {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--offen-bg); color: var(--offen); margin-left: 4px; vertical-align: 1px;
}
.marke.gut { background: var(--gut-bg); color: var(--gut); }
.marke.warn { background: var(--warn-bg); color: var(--warn); }
.marke.grau { background: var(--bg); color: var(--leise); }

/* Knöpfe */
.btn {
  border: 1px solid var(--linie); background: var(--karte); border-radius: 9px; padding: 7px 12px;
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.btn.gut { background: var(--gut); border-color: var(--gut); color: #fff; }
.btn.warn { color: var(--warn); border-color: var(--warn); }
.btn.klein { padding: 4px 9px; font-size: 13px; }
.btn.breit { width: 100%; padding: 11px; }
.btn[disabled] { opacity: .5; }
.reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reihe.rechts { justify-content: flex-end; }

/* Formulare */
label { display: block; font-size: 13px; color: var(--leise); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%; padding: 10px; border: 1px solid var(--linie); border-radius: 9px; background: var(--karte);
}
input[type=checkbox] { width: auto; margin-right: 6px; }
input[type=color] { padding: 2px; height: 40px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drei { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; color: var(--text); font-size: 15px; }

/* Anmeldung */
.login { max-width: 380px; margin: 40px auto; }
.login .fehler { color: var(--warn); min-height: 1.4em; margin-top: 8px; }

/* Listen */
.zeile { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linie); }
.zeile:first-child { border-top: 0; }
.zeile .rest { flex: 1; min-width: 0; }
.punkt { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* Stunden */
.balken { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin-top: 6px; }
.balken i { display: block; height: 100%; background: var(--gut); }
.balken.ueber i { background: var(--warn); }
.stundenzahl { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--linie); }
th { color: var(--leise); font-weight: 600; font-size: 12px; border-top: 0; }
td.z, th.z { text-align: right; font-variant-numeric: tabular-nums; }
tr.ueber td { color: var(--warn); font-weight: 600; }

/* Dialog */
dialog {
  border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 24px));
  background: var(--karte); color: var(--text); max-height: calc(100vh - 40px);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
#dlginhalt { padding: 16px; }
#dlginhalt h2 { margin-top: 0; }
.pin { font-size: 34px; letter-spacing: 6px; font-weight: 700; text-align: center; padding: 12px; }
.link { word-break: break-all; font-size: 13px; background: var(--bg); padding: 8px; border-radius: 8px; }
.hinweise { background: var(--warn-bg); color: var(--warn); border-radius: 9px; padding: 8px 10px; font-size: 14px; }
.hinweise div + div { margin-top: 4px; }

#toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 20; background: #1b1f2a; color: #fff; padding: 10px 16px; border-radius: 10px;
  max-width: calc(100vw - 32px); font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
#toast.fehler { background: #b42318; }
.reihe .rest { flex: 1; }
.stapel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.stapel p { margin: 0 0 8px; }
.check input[disabled] + * , .check:has(input[disabled]) { opacity: .6; }
[hidden] { display: none !important; }

/* ---------- Kalender wie Apple (21.10.2026) ---------- */
:root { --rot: #ff3b30; --raster: #e6e8ec; }
@media (prefers-color-scheme: dark) { :root { --rot: #ff453a; --raster: #262b35; } }
main:has(.kal), main:has(.monat) { max-width: 1200px; }
.segment { display: flex; background: var(--linie); border-radius: 9px; padding: 2px; margin: 4px auto 10px; max-width: 360px; }
.segment button { flex: 1; border: 0; background: transparent; padding: 6px 0; border-radius: 7px; font-size: 14px; cursor: pointer; }
.segment button.an { background: var(--karte); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.kleiste { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ktitel { flex: 1; min-width: 160px; }
.ktitel b { display: block; font-size: 24px; letter-spacing: -.3px; }
.ktitel span { font-size: 13px; color: var(--leise); }
.knav { display: flex; gap: 6px; }
.knav .btn { min-width: 38px; }

.kal { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.kal-kopf, .kal-ganz, .kal-body { display: grid; }
.kal-kopf { border-bottom: 1px solid var(--linie); }
.kal-tagkopf { border: 0; background: transparent; padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.kal-tagkopf .wt { font-size: 11px; color: var(--leise); text-transform: uppercase; letter-spacing: .4px; }
.kal-tagkopf .nr { font-size: 20px; width: 34px; height: 34px; line-height: 34px; border-radius: 50%; text-align: center; }
.kal-tagkopf.heute .wt { color: var(--rot); }
.kal-tagkopf.heute .nr { background: var(--rot); color: #fff; font-weight: 600; }
.kal-ganz { border-bottom: 1px solid var(--linie); min-height: 30px; }
.kal-gl { font-size: 10px; color: var(--leise); padding: 6px 4px 0 0; text-align: right; }
.kal-ganzzelle { border-left: 1px solid var(--raster); padding: 3px 2px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kchip {
  display: block; font-size: 11px; line-height: 1.5; padding: 0 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--f, #888) 22%, var(--karte)); color: color-mix(in srgb, var(--f, #888) 70%, var(--text));
}
.kchip.beantragt { background: transparent; border: 1px dashed var(--f, #888); }
.kchip.feiertag { --f: var(--rot); }
.kal-scroll { max-height: calc(100vh - 290px); min-height: 360px; overflow-y: auto; position: relative; }
.kal-zeiten { position: relative; }
.kal-zeiten span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 10px; color: var(--leise); font-variant-numeric: tabular-nums; }
.kal-spalte {
  position: relative; border-left: 1px solid var(--raster); cursor: default;
  background-image: linear-gradient(to bottom, var(--raster) 1px, transparent 1px);
}
.kal-spalte.feiertag, .kal-spalte:nth-child(7), .kal-spalte:nth-child(8) { background-color: color-mix(in srgb, var(--bg) 60%, var(--karte)); }
.eintag .kal-spalte { background-color: var(--karte); }
.kblock {
  position: absolute; border-radius: 5px; padding: 3px 6px; overflow: hidden; cursor: pointer; font-size: 12px; line-height: 1.25;
  background: color-mix(in srgb, var(--f) 20%, var(--karte)); border-left: 3px solid var(--f);
  color: color-mix(in srgb, var(--f) 65%, var(--text));
}
.kblock:hover { background: color-mix(in srgb, var(--f) 30%, var(--karte)); }
.kblock.mein { box-shadow: inset 0 0 0 1.5px var(--f); }
.kblock.offen { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--f) 18%, var(--karte)) 0 6px, color-mix(in srgb, var(--f) 8%, var(--karte)) 6px 12px); }
.kb-wer { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-zeit, .kb-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.kblock.kurz .kb-titel { display: none; }
.eintag .kblock { font-size: 14px; padding: 5px 9px; }
.kal-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--rot); z-index: 2; pointer-events: none; }
.kal-jetzt::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rot); }

/* iPhone-Wochenleiste über der Tagesansicht */
.wleiste { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; }
.wtag { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; cursor: pointer; }
.wtag .wt { font-size: 11px; color: var(--leise); }
.wtag .nr { font-size: 18px; width: 34px; height: 34px; line-height: 34px; border-radius: 50%; text-align: center; }
.wtag.heute .nr { color: var(--rot); font-weight: 600; }
.wtag.an .nr { background: var(--text); color: var(--karte); font-weight: 600; }
.wtag.an.heute .nr { background: var(--rot); color: #fff; }
.wtag .punkte { display: flex; gap: 3px; height: 6px; }
.wtag .punkte i, .legende i, .mpunkte i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.p-mein { background: var(--akzent); }
.p-offen { background: var(--offen); }

/* Monat */
.monat { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.mkopf, .mgitter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mkopf div { font-size: 11px; color: var(--leise); text-align: right; padding: 6px 8px; text-transform: uppercase; }
.mzelle {
  border: 0; border-top: 1px solid var(--raster); border-left: 1px solid var(--raster); background: transparent;
  min-height: 108px; padding: 4px; display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; min-width: 0;
}
.mzelle:nth-child(7n+1) { border-left: 0; }
.mzelle:nth-child(7n), .mzelle:nth-child(7n-1), .mzelle.feiertag { background: color-mix(in srgb, var(--bg) 60%, var(--karte)); }
.mzelle .nr { align-self: flex-end; font-size: 13px; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; }
.mzelle.fremd .nr { color: var(--leise); opacity: .6; }
.mzelle.heute .nr { background: var(--rot); color: #fff; font-weight: 600; }
.mchip {
  font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; border-radius: 3px;
  color: color-mix(in srgb, var(--f) 70%, var(--text));
}
.mchip::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--f); margin-right: 4px; vertical-align: 1px; }
.mchip.mein { background: color-mix(in srgb, var(--f) 18%, var(--karte)); }
.mft { font-size: 10px; color: var(--rot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpunkte { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
@media (max-width: 700px) {
  .mzelle { min-height: 58px; align-items: center; }
  .mzelle .nr { align-self: center; }
  .ktitel b { font-size: 21px; }
  .kal-scroll { max-height: calc(100vh - 330px); }
}
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--leise); margin: 10px 2px; }
.legende span { display: inline-flex; align-items: center; gap: 5px; }
.kal-scroll { scrollbar-width: none; }
.kal-scroll::-webkit-scrollbar { display: none; }

/* Urlaubssperre / viel los (21.10.2026) */
:root { --sperre: #d92d20; --viel: #dc8b00; }
.kchip.sperrchip.sperre { --f: var(--sperre); font-weight: 600; }
.kchip.sperrchip.viel { --f: var(--viel); font-weight: 600; }
.kal-spalte.sperre { background-color: color-mix(in srgb, var(--sperre) 6%, var(--karte)); }
.kal-spalte.viel { background-color: color-mix(in srgb, var(--viel) 7%, var(--karte)); }
.kal-tagkopf.sperre .nr, .wtag.sperre .nr { box-shadow: inset 0 -3px 0 var(--sperre); }
.kal-tagkopf.viel .nr, .wtag.viel .nr { box-shadow: inset 0 -3px 0 var(--viel); }
.mzelle.sperre { background: color-mix(in srgb, var(--sperre) 7%, var(--karte)); }
.mzelle.viel { background: color-mix(in srgb, var(--viel) 8%, var(--karte)); }
.mzelle .sperrchip { font-size: 10px; }
.p-sperre { background: var(--sperre); }
.p-viel { background: var(--viel); }
.punkt.p-sperre, .punkt.p-viel { display: inline-block; }
.pruefung { border-radius: 9px; padding: 8px 10px; margin-top: 10px; font-size: 14px; }
.pruefung.sperre { background: color-mix(in srgb, var(--sperre) 12%, var(--karte)); color: var(--sperre); }
.pruefung.viel { background: color-mix(in srgb, var(--viel) 14%, var(--karte)); color: color-mix(in srgb, var(--viel) 70%, var(--text)); }
.pruefung .klein { color: inherit; opacity: .85; margin-top: 4px; }
.zwei > *, .drei > * { min-width: 0; }
input[type=date], input[type=time] { min-width: 0; max-width: 100%; }

/* Soll-Besetzung (21.10.2026) */
.bes {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 16px; padding: 0 5px; border-radius: 8px;
  background: var(--sperre); color: #fff; font-variant-numeric: tabular-nums;
}
.kal-tagkopf .bes { margin-top: 2px; }
.p-luecke { background: var(--sperre); }
.mkopfzeile { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.mkopfzeile .nr { margin-left: auto; }
.zeile .bes { font-size: 12px; line-height: 20px; padding: 0 7px; }
.sollraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 10px 0 4px; }
.sollraster label { margin: 0; text-align: center; }
.sollraster span { display: block; font-size: 12px; margin-bottom: 2px; }
.sollraster input { text-align: center; padding: 8px 2px; }
@media (max-width: 700px) { .mkopfzeile { justify-content: center; gap: 2px; flex-direction: column; } .mkopfzeile .nr { margin: 0; } .mzelle .bes { font-size: 9px; padding: 0 3px; } }

/* Aufgaben, Tickets, Fotos (21.10.2026) */
dialog { overflow: auto; }
.rot { color: var(--sperre); }
.azeile { display: flex; gap: 12px; align-items: flex-start; padding: 10px 2px; border-top: 1px solid var(--linie); cursor: pointer; }
.karte > .azeile:first-child, details > .azeile:first-of-type { border-top: 0; }
.acheck { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--leise); display: grid; place-items: center; font-weight: 700; font-size: 14px; margin-top: 1px; }
.azeile.fertig .acheck { background: var(--gut); border-color: var(--gut); color: #fff; }
.azeile.uebersprungen .acheck { border-color: var(--leise); color: var(--leise); }
.azeile.fertig .atitel, .azeile.uebersprungen .atitel { color: var(--leise); text-decoration: line-through; }
.azeile.zuspaet .acheck { border-color: var(--sperre); }
.alog { color: var(--gut); }
.uebersprungen .alog { color: var(--leise); }
details.bedarf summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); cursor: zoom-in; background: var(--bg); }
.thumbwrap { position: relative; }
.thumbweg { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #1b1f2a; color: #fff; cursor: pointer; line-height: 22px; padding: 0; }
.fotogross { width: 100%; max-height: 75vh; object-fit: contain; border-radius: 8px; background: #000; }
.fotofeld { margin-top: 10px; }
.zeile.klickbar { cursor: pointer; }
.zeile.inaktiv { opacity: .5; }
.mehrlink { color: inherit; text-decoration: none; }
.mehrsym { width: 28px; text-align: center; font-size: 20px; }
.wtwahl { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wtwahl .check { margin: 0; font-size: 14px; }
.prio { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; }
.prio.p1 { background: #d92d20; } .prio.p2 { background: #f79009; } .prio.p3 { background: #2f6fdb; } .prio.p4 { background: #98a2b3; }
.prio-hilfe { border-left: 3px solid var(--leise); padding-left: 8px; }
.prio-hilfe.p1 { border-color: #d92d20; color: #d92d20; } .prio-hilfe.p2 { border-color: #f79009; }
.tstatus { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--leise); }
.tstatus.neu { background: color-mix(in srgb, #2f6fdb 15%, var(--karte)); color: #2f6fdb; }
.tstatus.in_arbeit { background: color-mix(in srgb, #f79009 15%, var(--karte)); color: #b54708; }
.tstatus.wartet { background: color-mix(in srgb, #9b51e0 15%, var(--karte)); color: #7a3cc2; }
.tstatus.erledigt { background: var(--gut-bg); color: var(--gut); }
.tbeschr { white-space: pre-wrap; }
.verlauf { border-left: 2px solid var(--linie); padding-left: 10px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.veintrag.status div, .veintrag.zuweisung div { color: var(--leise); font-style: italic; }
.tknoepfe { margin-top: 10px; }
textarea { resize: vertical; }
nav a { min-width: 0; }

/* ---------- Firmen: Termine, Adressbuch, Wartung (28.10.2026) ---------- */
:root { --firma: #0e7490; }
@media (prefers-color-scheme: dark) { :root { --firma: #22d3ee; } }
.kchip.tchip { --f: var(--firma); cursor: pointer; font-weight: 600; }
.kchip.tchip.erledigt { opacity: .6; }
.kchip.tchip.nicht_gekommen, .kchip.tchip.teilweise { --f: var(--warn); }
.p-firma { background: var(--firma); }
.mfirma { font-size: 9px; color: var(--firma); line-height: 1; }
.tdatum { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 44px; line-height: 1.15; }
.tstatus.geplant { background: color-mix(in srgb, var(--firma) 15%, var(--karte)); color: var(--firma); }
.tstatus.teilweise, .tstatus.nicht_gekommen { background: var(--warn-bg); color: var(--warn); }
.tstatus.abgesagt { text-decoration: line-through; }
.fakten { display: grid; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.fakten > div { display: flex; flex-direction: column; }
.fakten a { color: var(--akzent); font-weight: 600; }
a.tel { display: inline-block; margin: 2px 0; padding: 4px 10px; border-radius: 999px; background: var(--heute); color: var(--akzent);
  text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.kontakt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.grau { color: var(--leise); }
.stand { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; min-width: 88px; text-align: center; }
.stand.ueberfaellig, .stand.kein_nachweis { background: var(--warn-bg); color: var(--warn); }
.stand.bald { background: color-mix(in srgb, #f79009 18%, var(--karte)); color: #b54708; }
.stand.geplant { background: color-mix(in srgb, var(--firma) 15%, var(--karte)); color: var(--firma); }
.stand.ok { background: var(--gut-bg); color: var(--gut); }
@media (max-width: 700px) { .stand { min-width: 0; } .kontakt a.tel { font-size: 13px; padding: 3px 8px; } }

/* ---------- Etagenpläne (28.10.2026) ---------- */
.ebenen { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.ebchip { flex: none; border: 1px solid var(--linie); background: var(--karte); border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; position: relative; }
.ebchip.an { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.ebchip .zahl { margin-left: 6px; background: #d92d20; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.plan { position: relative; margin: 4px 0 8px; }
.planzoom { position: absolute; right: 8px; top: 8px; z-index: 3; display: flex; gap: 4px; }
.planzoom .btn { min-width: 34px; background: var(--karte); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.planhuelle { overflow: auto; max-height: 68vh; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch; }
.planhuelle.waehlen { max-height: 52vh; cursor: crosshair; }
.planinnen { position: relative; min-width: 100%; }
.planbild { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; border: 2px solid #fff; border-radius: 999px; padding: 1px 6px;
  font-size: 11px; font-weight: 700; color: #fff; background: #2f6fdb; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; line-height: 1.4; }
.pin.p1 { background: #d92d20; } .pin.p2 { background: #f79009; } .pin.p3 { background: #2f6fdb; } .pin.p4 { background: #98a2b3; }
.pin.fokus { outline: 3px solid #fde047; z-index: 4; transform: translate(-50%, -50%) scale(1.25); }
.pin.marke { background: none; border: 0; box-shadow: none; font-size: 26px; padding: 0; transform: translate(-50%, -90%); pointer-events: none; }
.planwahl select { margin-bottom: 6px; }
.planinfo { margin: 2px 0 6px; font-weight: 600; }