:root{
  --bg:#f6f7f9; --flaeche:#fff; --rand:#dfe3e8; --text:#1f2933; --gedaempft:#6b7280;
  --primaer:#1d4e89; --primaer-hell:#e8eef6;
  --ok:#15803d; --warn:#b45309; --fehler:#b91c1c;
  --urlaub:#16a34a; --beantragt:#facc15; --brueckentag:#f97316; --schliesszeit:#c2410c;
  --sperre:#dc2626; --feiertag:#cbd5e1; --we:#eef1f4;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--primaer)}

.kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
  background:var(--primaer);color:#fff;padding:.6rem 1.25rem}
.kopf .marke{font-weight:700;letter-spacing:.2px}
.kopf nav{display:flex;flex-wrap:wrap;gap:.25rem;flex:1}
.kopf nav a{color:#dbe6f4;text-decoration:none;padding:.35rem .6rem;border-radius:4px;font-size:.92rem}
.kopf nav a:hover{background:rgba(255,255,255,.15);color:#fff}
.kopf .benutzer{display:flex;align-items:center;gap:.6rem;font-size:.88rem}
.kopf .benutzer a{color:#fff;text-decoration:none}
.kopf .rolle{background:rgba(255,255,255,.2);padding:.1rem .45rem;border-radius:10px;font-size:.75rem}

.inhalt{max-width:1500px;margin:1.25rem auto;padding:0 1.25rem}
.inhalt.schmal{max-width:430px;margin-top:8vh}
.fuss{max-width:1500px;margin:2rem auto;padding:1rem 1.25rem;color:var(--gedaempft);font-size:.8rem;
  border-top:1px solid var(--rand)}

h1{font-size:1.4rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:1.6rem 0 .6rem}
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:8px;padding:1rem 1.15rem;margin-bottom:1rem}
.reihe{display:flex;flex-wrap:wrap;gap:1rem}
.reihe>.karte{flex:1 1 280px}

.meldung{padding:.6rem .9rem;border-radius:6px;margin-bottom:.75rem;border:1px solid}
.m-ok{background:#ecfdf3;border-color:#a7f3d0;color:#166534}
.m-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.m-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.m-fehler{background:#fef2f2;border-color:#fecaca;color:#991b1b}

table{border-collapse:collapse;width:100%;background:var(--flaeche)}
th,td{border:1px solid var(--rand);padding:.4rem .55rem;text-align:left;vertical-align:top}
th{background:#f0f3f7;font-weight:600;font-size:.85rem}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.inaktiv td{opacity:.55}

label{display:block;font-size:.85rem;color:var(--gedaempft);margin:.7rem 0 .2rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:.45rem .55rem;border:1px solid var(--rand);border-radius:5px;background:#fff;font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primaer-hell);border-color:var(--primaer)}
.formzeile{display:flex;flex-wrap:wrap;gap:1rem}
.formzeile>div{flex:1 1 180px}
.pflicht{color:var(--fehler)}

button,.knopf{display:inline-block;background:var(--primaer);color:#fff;border:0;border-radius:5px;
  padding:.5rem .95rem;font:inherit;cursor:pointer;text-decoration:none;margin-top:.8rem}
button:hover,.knopf:hover{filter:brightness(1.1)}
button.sekundaer,.knopf.sekundaer{background:#e5e9ef;color:var(--text)}
button.gefahr{background:var(--fehler)}
button.klein,.knopf.klein{padding:.22rem .5rem;font-size:.8rem;margin:0}
form.inline{display:inline}

.kennzahlen{display:flex;flex-wrap:wrap;gap:.75rem;margin:.5rem 0 1rem}
.kennzahl{flex:1 1 150px;background:var(--flaeche);border:1px solid var(--rand);border-radius:8px;padding:.7rem .9rem}
.kennzahl .wert{font-size:1.55rem;font-weight:700;line-height:1.1}
.kennzahl .bez{font-size:.78rem;color:var(--gedaempft);text-transform:uppercase;letter-spacing:.4px}
.kennzahl.warnung{border-color:#fbbf24;background:#fffbeb}
.kennzahl.kritisch{border-color:#fca5a5;background:#fef2f2}

/* ---- Jahreskalender ---- */
.kal{border-collapse:separate;border-spacing:1px;width:auto;background:transparent;font-size:.7rem}
.kal th,.kal td{border:0;padding:0;text-align:center}
.kal th.mon{text-align:right;padding-right:.5rem;font-weight:600;background:transparent;font-size:.78rem;white-space:nowrap}
.kal th.tag{width:22px;color:var(--gedaempft);font-weight:500;background:transparent}
.kal td{width:22px;height:22px;background:var(--flaeche);border:1px solid var(--rand);
  border-radius:3px;position:relative;cursor:default}
.kal td.leer{background:transparent;border-color:transparent}
.kal td.k-we{background:var(--we);color:#9aa4b1}
.kal td.k-feiertag{background:var(--feiertag);color:#475569;font-weight:600}
.kal td.k-ferien{box-shadow:inset 0 3px 0 0 var(--ferienfarbe,#0ea5e9)}
.kal td.k-brueckentag{background:var(--brueckentag);color:#fff;font-weight:600}
.kal td.k-schliesszeit{background:var(--schliesszeit);color:#fff;font-weight:600}
.kal td.k-urlaub{background:var(--urlaub);color:#fff;font-weight:600}
.kal td.k-beantragt{background:var(--beantragt);color:#3f3000;font-weight:600}
.kal td.k-sperre{outline:2px solid var(--sperre);outline-offset:-2px}

.legende{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.8rem 0;font-size:.8rem;align-items:center}
.legende span{display:inline-flex;align-items:center;gap:.35rem}
.legende i{width:14px;height:14px;border-radius:3px;border:1px solid var(--rand);display:inline-block}

/* ---- Teamansicht ---- */
.team{font-size:.7rem;border-collapse:separate;border-spacing:1px}
.team td.name,.team th.name{text-align:left;white-space:nowrap;padding:.2rem .5rem;background:var(--flaeche);
  border:1px solid var(--rand);width:auto}
.team td{width:20px;height:20px}

.hinweis{font-size:.85rem;color:var(--gedaempft);margin:.35rem 0}
.badge{display:inline-block;padding:.1rem .45rem;border-radius:10px;font-size:.75rem;border:1px solid}
.b-beantragt{background:#fefce8;border-color:#fde047;color:#854d0e}
.b-genehmigt{background:#ecfdf3;border-color:#86efac;color:#166534}
.b-abgelehnt{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.b-storniert{background:#f3f4f6;border-color:#d1d5db;color:#4b5563}

@media (max-width:900px){
  .kopf{flex-direction:column;align-items:flex-start}
  .inhalt{padding:0 .75rem}
}
@media print{
  .kopf,.fuss,button,.knopf{display:none}
  body{background:#fff}
}