/* Willkomm Urlaub — Büro-Ansicht (Desktop). Ergänzt app.css. */
body.buero{background:var(--bg)}
body.buero .app{display:none}

.btop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(160deg,var(--gruen),var(--gruen-tief));color:#fff;padding:14px 22px}
.btop img{height:40px;width:auto;display:block}
.btop h1{margin:0;font-size:18px;font-weight:800}
.btop .bsub{font-size:12.5px;opacity:.9;margin-top:2px}
.btop .sp{flex:1}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:none;background:rgba(255,255,255,.15);color:#fff;font:inherit;font-weight:700;font-size:13px;
  padding:9px 14px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:7px}
.tab:hover{background:rgba(255,255,255,.24)}
.tab.aktiv{background:#fff;color:var(--gruen)}
.zaehler{background:var(--gelb);color:#3a2c00;border-radius:99px;font-size:11px;font-weight:900;padding:1px 7px}
.zaehler[hidden]{display:none}

main{max-width:1180px;margin:0 auto;padding:20px 20px 60px}
.tabview{display:none} .tabview.aktiv{display:block}
.bsect{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--telegrau);font-weight:800;margin:0 0 12px}
.hint{font-size:12.5px;color:var(--ink-soft);line-height:1.65;margin:0 0 14px;max-width:760px}
.hint code{background:var(--panel);padding:1px 5px;border-radius:5px}
.spalten{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
@media (max-width:900px){ .spalten{grid-template-columns:1fr} }
.karten{display:flex;flex-direction:column;gap:12px}
.zeile{display:flex;gap:10px;flex-wrap:wrap}
.planleiste{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.planleiste .sp{flex:1}
.planmonat{font-weight:800;font-size:14px;min-width:150px;text-align:center}

/* ---- Antragskarte ---- */
.antrag{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.antrag.rs{border-left:5px solid var(--gelb)}
.antrag .kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.antrag .name{font-size:17px;font-weight:800}
.antrag .art{font-size:12px;font-weight:700;color:var(--telegrau)}
.antrag .zeitraum{margin-top:6px;font-size:14.5px;font-weight:700;line-height:1.5}
.antrag .fakten{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.fakt{font-size:12px;font-weight:700;background:var(--panel);border-radius:99px;padding:5px 11px;color:var(--ink-soft)}
.fakt.gut{background:var(--ok-bg);color:var(--gruen)}
.fakt.warn{background:var(--wait-bg);color:var(--wait)}
.fakt.stop{background:var(--stop-bg);color:var(--stop)}
.antrag .warnblock{margin-top:12px;background:var(--wait-bg);color:var(--wait);border-radius:12px;
  padding:11px 14px;font-size:13px;line-height:1.55;font-weight:600}
.antrag .bem{margin-top:10px;font-size:13px;color:var(--ink-soft);line-height:1.55}
.antrag .aktionen{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.btn.gelb{background:var(--gelb);color:#3a2c00}
.btn.rot{background:transparent;color:var(--stop);border:1.5px solid var(--stop-bg)}
.btn.klein{flex:0 0 auto;font-size:13px;padding:10px 16px;border-radius:11px}

/* ---- Mini-Kalender in der Antragskarte ----
   Blau ist die CI-Sekundärfarbe „Lichtblau" (RAL 5012). Der exakte Hex-Wert steht
   in der CI-Richtlinie noch aus, deshalb hier aus dem belegten CMYK-Wert
   75/30/0/10 gerechnet: #39A1E6. Für die Balkenfläche eine Stufe dunkler, sonst
   trägt die weiße Tagesziffer nicht. 🔴 Nachziehen, sobald der echte Wert vorliegt. */
:root{ --lichtblau:#39A1E6; --lichtblau-tief:#1B6FA8; --lichtblau-zart:#e6f2fb }
@media (prefers-color-scheme:dark){ :root{ --lichtblau-zart:#152834 } }

.mk-reihe{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 4px}
.mk{flex:0 0 auto}
.mk-kopf{font-size:11.5px;font-weight:800;color:var(--ink-soft);margin-bottom:5px;text-align:center}
.mk-gitter{display:grid;grid-template-columns:repeat(7,20px);gap:2px}
.mk-wt{font-size:9.5px;font-weight:700;color:var(--telegrau);text-align:center;padding-bottom:2px}
.mk-leer{height:20px}
.mk-tag{height:20px;display:grid;place-items:center;font-size:10.5px;font-weight:600;
  color:var(--ink-soft);border-radius:4px;position:relative}
.mk-tag.we{background:var(--panel);color:var(--telegrau)}
.mk-tag.ft::after{content:"";position:absolute;top:2px;right:2px;width:4px;height:4px;
  border-radius:50%;background:var(--gelb)}
/* Der beantragte Zeitraum als durchgehender Balken — an den Rändern gerundet,
   in der Mitte eckig, damit die Woche wie ein Band wirkt. */
.mk-tag.drin{background:var(--lichtblau-tief);color:#fff;font-weight:800;border-radius:0}
.mk-tag.drin.we{background:var(--lichtblau);color:#0a2c44}
.mk-tag.drin.start{border-radius:5px 0 0 5px}
.mk-tag.drin.ende{border-radius:0 5px 5px 0}
.mk-tag.drin.start.ende{border-radius:5px}
.mk-ft{font-size:11.5px;color:var(--ink-soft);margin:2px 0 4px}

/* ---- schmale Liste rechts ---- */
.karten.schmal .antrag{padding:12px 14px;box-shadow:none}
.karten.schmal .name{font-size:14.5px}
.karten.schmal .zeitraum{font-size:13px;margin-top:3px;font-weight:600;color:var(--ink-soft)}

/* ---- Mitarbeiterzeile ---- */
.person{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:14px 16px}
.person .oben{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.person .pname{font-size:15.5px;font-weight:800;flex:1;min-width:160px}
.person.inaktiv .pname{color:var(--telegrau);text-decoration:line-through}
.person .konten{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:flex-end}
.person .konten label{display:block;font-size:11px;font-weight:700;color:var(--telegrau);margin-bottom:4px}
.person .konten input{width:88px;font-size:14px;padding:8px 10px}
.person .konten input.breit{width:220px}
.person .rest{margin-left:auto;text-align:right;font-size:12px;color:var(--ink-soft);line-height:1.6}
.person .rest b{font-size:19px;color:var(--gruen);display:block}
.linkzeile{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.linkzeile input{flex:1;min-width:220px;font-size:12px;font-family:ui-monospace,Consolas,monospace;padding:8px 10px}

/* ---- Plan ---- */
.plan{overflow-x:auto;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:4px}
.plan table{border-collapse:collapse;width:100%;font-size:12px}
.plan th,.plan td{border:1px solid var(--hair);padding:0;text-align:center}
.plan th.nm{text-align:left;padding:8px 10px;font-weight:700;white-space:nowrap;position:sticky;left:0;background:var(--card);z-index:1}
.plan th.tg{width:26px;font-weight:700;color:var(--ink-soft);padding:6px 0;font-size:11px}
.plan th.tg.frei{background:var(--panel);color:var(--telegrau)}
.plan td.z{height:30px;width:26px}
.plan td.z.frei{background:var(--panel)}
.plan td.z.gen{background:var(--gruen)}
.plan td.z.vor{background:var(--gelb)}

.anmelden input{max-width:100%}
.anmelden .karte{box-shadow:var(--shadow)}