/* Personalakte — Oberflaeche im Design des Werkstatt-Monitors.
 *
 * Uebernommen aus werkstatt-monitor/frontend/tailwind.config.js:
 *   primary  = Tuerkis  #55bdc7 / #3aa8b3 / #2d8a94
 *   surface  = Zinc-Skala #fafafa … #09090b
 *   Schrift  = Inter (hier LOKAL eingebunden, nicht ueber Google-CDN —
 *              sonst ginge bei jedem Aufruf die IP der Mitarbeiter an Google)
 *   Radien   = 1rem fuer Karten, 0.875rem fuer Knoepfe und Abzeichen
 */
@import url("/static/schrift/inter.css");

:root {
  color-scheme: light;   /* helle Darstellung, auch bei dunklem System */
  /* primary */
  --p50:#eefbfc;  --p100:#d5f3f6; --p200:#afe8ed; --p300:#85d2db;
  --p400:#55bdc7; --p500:#3aa8b3; --p600:#2d8a94; --p700:#236f77;
  --p900:#164a50; --p950:#0c2e33;
  /* surface (zinc) */
  --s50:#fafafa;  --s100:#f4f4f5; --s200:#e4e4e7; --s300:#d4d4d8;
  --s400:#a1a1aa; --s500:#71717a; --s600:#52525b; --s700:#3f3f46;
  --s800:#27272a; --s900:#18181b; --s950:#09090b;

  --grund:#fbfbfc; --flaeche:#ffffff; --flaeche2:var(--s100);
  --schrift:var(--s900); --schrift-weich:var(--s600); --schrift-fein:var(--s500);
  --linie:var(--s200);
  --akzent:var(--p600); --akzent-weich:var(--p50); --akzent-linie:var(--p400);
  --gut:#059669;  --gut-weich:#ecfdf5;  --gut-rand:rgba(5,150,105,.2);
  --warn:#d97706; --warn-weich:#fffbeb; --warn-rand:rgba(217,119,6,.2);
  --schlecht:#dc2626; --schlecht-weich:#fef2f2; --schlecht-rand:rgba(220,38,38,.2);

  --rund:1rem; --rund-klein:.875rem; --rund-mini:.375rem;
  --schatten:0 1px 2px 0 rgb(0 0 0 / .05);
  --schatten-hoch:0 4px 12px -2px rgb(0 0 0 / .08);
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--grund); color:var(--schrift);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
[hidden]{display:none !important}

/* ---------- Anmeldung ---------- */
.mitte{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.karte-anmeldung{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten-hoch);
  padding:40px 36px; max-width:400px; width:100%; text-align:center;
}
.logo{height:30px; width:auto; margin:0 auto 22px; display:block}
.marke{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--schrift-fein); font-weight:600; margin:0 0 10px;
}
.karte-anmeldung h1{font-size:24px; font-weight:700; margin:0 0 8px; letter-spacing:-.02em}
.unter{color:var(--schrift-weich); margin:0 0 26px; font-size:14px}
.fein{color:var(--schrift-fein); font-size:13px; margin:14px 0 0}

/* ---------- Kopf ---------- */
.kopf{
  background:var(--flaeche); border-bottom:1px solid var(--linie);
  position:sticky; top:0; z-index:5;
}
.kopf-innen{
  max-width:900px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.kopf .logo{height:26px; margin:0}
.kopf-rechts{display:flex; align-items:center; gap:12px}
.wer{font-size:14px; color:var(--schrift-weich); font-weight:500}

.inhalt{max-width:900px; margin:0 auto; padding:28px 24px 80px}
section{margin-bottom:36px}
h2{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--schrift-fein); font-weight:600; margin:0 0 14px;
}
.jahr{color:var(--akzent); letter-spacing:0}

/* ---------- Karten / Kacheln ---------- */
.kacheln{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.kachel{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten);
  padding:20px; display:flex; flex-direction:column; gap:4px;
}
.kachel.betont{border-color:var(--akzent-linie); background:var(--akzent-weich)}
.etikett{
  font-size:11px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--schrift-fein); order:1;
}
.zahl{
  font-size:26px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; order:2; line-height:1.15;
}
.kachel.betont .zahl{color:var(--akzent)}

/* ---------- Formular ---------- */
.formular{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten);
  padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.feld{display:flex; flex-direction:column; gap:6px}
.feld.weit{grid-column:1 / -1}
label{font-size:13px; color:var(--schrift-weich); font-weight:500}
input[type=date], input[type=text], select{
  font:inherit; font-size:14px; padding:9px 12px; border-radius:var(--rund-klein);
  border:1px solid var(--linie); background:var(--flaeche); color:var(--schrift);
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus{
  outline:none; border-color:var(--p400);
  box-shadow:0 0 0 3px var(--akzent-weich);
}
.haken{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:20px}
.haken label{display:flex; align-items:center; gap:8px; font-weight:400; color:var(--schrift)}
.haken input{accent-color:var(--p500)}

/* ---------- Knoepfe ---------- */
.knopf{
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  border-radius:var(--rund-klein); border:1px solid transparent;
  background:var(--p600); color:#fff; padding:10px 18px;
  transition:background .15s, opacity .15s;
}
.knopf:hover:not(:disabled){background:var(--p700)}
.knopf:disabled{opacity:.5; cursor:default}
.knopf.gross{grid-column:1 / -1; padding:11px; font-size:15px}
.knopf.schmal{
  padding:6px 12px; font-size:13px; background:transparent;
  color:var(--schrift-weich); border-color:var(--linie);
}
.knopf.schmal:hover:not(:disabled){background:var(--flaeche2)}
.knopf.gut{background:var(--gut)}
.knopf.gut:hover:not(:disabled){filter:brightness(.92)}
.knopf.schlecht{background:transparent; color:var(--schlecht); border-color:var(--schlecht-rand)}
.knopf.schlecht:hover:not(:disabled){background:var(--schlecht-weich)}
.knopfzeile{display:flex; gap:10px; margin-top:12px}
:focus-visible{outline:2px solid var(--p400); outline-offset:2px}

/* ---------- Rueckmeldung ---------- */
.rueckmeldung{
  margin-top:14px; padding:14px 18px; border-radius:var(--rund-klein); font-size:14px;
}
.rueckmeldung.gut{background:var(--gut-weich); color:var(--gut); box-shadow:inset 0 0 0 1px var(--gut-rand)}
.rueckmeldung.schlecht{background:var(--schlecht-weich); color:var(--schlecht); box-shadow:inset 0 0 0 1px var(--schlecht-rand)}
.rueckmeldung ul{margin:8px 0 0; padding-left:20px}
.rueckmeldung li{margin-bottom:4px}

/* ---------- Liste ---------- */
.liste{display:flex; flex-direction:column; gap:10px}
.eintrag{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); box-shadow:var(--schatten); padding:16px 18px;
}
.eintrag-kopf{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.eintrag-fuss{font-size:13px; color:var(--schrift-fein); margin-top:4px}
.status{
  font-size:11px; font-weight:500; padding:3px 9px;
  border-radius:var(--rund-mini); white-space:nowrap;
}
.s-genehmigt{background:var(--gut-weich); color:var(--gut); box-shadow:inset 0 0 0 1px var(--gut-rand)}
.s-abgelehnt,.s-storniert{background:var(--schlecht-weich); color:var(--schlecht); box-shadow:inset 0 0 0 1px var(--schlecht-rand)}
.s-wartet_vertretung,.s-wartet_freigabe{background:var(--warn-weich); color:var(--warn); box-shadow:inset 0 0 0 1px var(--warn-rand)}
.s-entwurf{background:var(--flaeche2); color:var(--schrift-fein)}

@media (max-width:560px){
  .formular{grid-template-columns:1fr}
  .inhalt{padding:20px 16px 60px}
  .kopf-innen{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ---------- Tabelle (Belegschaftsübersicht) ---------- */
.tabellenrahmen{
  overflow-x:auto; border:1px solid var(--linie); border-radius:var(--rund);
  background:var(--flaeche); box-shadow:var(--schatten);
}
.tabelle{border-collapse:collapse; width:100%; font-size:14px; min-width:640px}
.tabelle th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--schrift-fein);
  padding:11px 14px; border-bottom:1px solid var(--linie); white-space:nowrap;
}
.tabelle td{padding:11px 14px; border-bottom:1px solid var(--linie)}
.tabelle tbody tr:last-child td{border-bottom:none}
.tabelle tbody tr:hover{background:var(--flaeche2)}
.zahlspalte{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.zahlspalte.minus{color:var(--schlecht); font-weight:600}

/* ---------- Verwaltung ---------- */
.hinweistext{font-size:13px; color:var(--schrift-weich); margin:0 0 14px; max-width:62ch}
.ausklapp{
  margin-top:16px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); padding:16px 20px;
}
.ausklapp summary{
  cursor:pointer; font-size:14px; font-weight:600; color:var(--akzent);
  list-style:none; user-select:none;
}
.ausklapp summary::-webkit-details-marker{display:none}
.ausklapp summary::before{content:"+ "; font-weight:700}
.ausklapp[open] summary::before{content:"− "}
.ausklapp[open] summary{margin-bottom:14px}
.ausklapp .formular{box-shadow:none; padding:0; border:none; background:transparent}
.wahl{
  font:inherit; font-size:13px; padding:6px 10px; border-radius:var(--rund-klein);
  border:1px solid var(--linie); background:var(--flaeche); color:var(--schrift);
  max-width:220px; width:100%;
}
.wahl:focus{outline:none; border-color:var(--p400); box-shadow:0 0 0 3px var(--akzent-weich)}
.merker{font-size:12px; color:var(--gut); white-space:nowrap; opacity:0; transition:opacity .2s}
.merker.an{opacity:1}
.inaktiv td{opacity:.5}

/* ---------- Reiter ---------- */
.reiter{
  max-width:900px; margin:0 auto; padding:0 24px; display:flex; gap:2px;
  overflow-x:auto; scrollbar-width:none;
}
.reiter::-webkit-scrollbar{display:none}
.reiter-knopf{
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--schrift-fein); padding:10px 14px; white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.reiter-knopf:hover{color:var(--schrift)}
.reiter-knopf.aktiv{color:var(--akzent); border-bottom-color:var(--akzent)}
.tafel{display:none}
.tafel.aktiv{display:block}

/* ---------- Heute ---------- */
.kachel.eng{border-color:var(--warn); background:var(--warn-weich)}
.kachel.eng .zahl{color:var(--warn)}
.unterzeile{font-size:11px; color:var(--schrift-fein); order:3}

/* ---------- Wochenraster ---------- */
.wochenraster{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.wochentag{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund-klein); padding:10px; min-height:96px;
  display:flex; flex-direction:column; gap:4px;
}
.wochentag.heute{border-color:var(--akzent-linie); background:var(--akzent-weich)}
.wochentag.eng{border-color:var(--warn)}
.wt-kopf{font-size:12px; font-weight:600; color:var(--schrift-fein); margin-bottom:2px}
.wochentag.heute .wt-kopf{color:var(--akzent)}
.wt-person{
  font-size:12px; background:var(--flaeche2); border-radius:var(--rund-mini);
  padding:3px 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wt-warnung{font-size:11px; color:var(--warn); font-weight:600}
.wt-leer{font-size:12px; color:var(--schrift-fein)}

/* ---------- Jahresband (tagesgenau) ---------- */
.filterleiste{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:space-between; margin-bottom:14px;
}
.jahrwahl{display:flex; gap:2px; background:var(--flaeche2);
  border-radius:var(--rund-klein); padding:3px}
.jahrknopf{
  font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  border:none; background:transparent; color:var(--schrift-weich);
  padding:6px 13px; border-radius:calc(var(--rund-klein) - 3px);
  font-variant-numeric:tabular-nums; transition:background .15s, color .15s;
}
.jahrknopf:hover{color:var(--schrift)}
.jahrknopf.aktiv{background:var(--flaeche); color:var(--akzent); font-weight:600;
  box-shadow:var(--schatten)}
.filtergruppe{display:flex; gap:8px; flex-wrap:wrap}
.filtergruppe .wahl{max-width:none; width:auto}

.legende{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px; font-size:12px;
  color:var(--schrift-weich)}
.legende span{display:flex; align-items:center; gap:6px}
.legende i.feld{width:13px; height:13px; border-radius:3px; display:inline-block}

.jahrrahmen{
  overflow-x:auto; border:1px solid var(--linie); border-radius:var(--rund);
  background:var(--flaeche); padding:14px 16px;
}
.jahrband{min-width:760px}
.jb-zeile{display:flex; align-items:center; gap:10px; height:22px}
.jb-name{
  width:148px; flex:0 0 148px; font-size:12px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:var(--schrift);
}
.jb-spur{
  position:relative; flex:1; height:14px; border-radius:3px;
  background:var(--flaeche2);
  /* Monatsraster als feine Linien im Hintergrund */
  background-image:repeating-linear-gradient(to right,
    var(--linie) 0 1px, transparent 1px calc(100% / 12));
  background-size:calc(100% / 12) 100%;
}
.jb-kopf{height:26px; margin-bottom:4px}
.jb-kopf .jb-name{font-size:13px; font-weight:700; color:var(--schrift)}
.jb-kopf .jb-spur{background:transparent; background-image:none; height:18px}
.jb-monat{
  position:absolute; top:0; font-size:10px; color:var(--schrift-fein);
  text-align:center; letter-spacing:.04em; border-left:1px solid var(--linie);
  line-height:18px; overflow:hidden;
}
.jb-abteilung{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--schrift-fein); padding:14px 0 5px; margin-bottom:2px;
  border-bottom:1px solid var(--linie);
}
.jb-balken{
  position:absolute; top:0; bottom:0; border-radius:3px; min-width:2px;
  transition:filter .12s;
}
.jb-balken:hover{filter:brightness(1.12); z-index:2; box-shadow:0 0 0 2px var(--flaeche)}
.jb-balken.urlaub, .legende .feld.urlaub{background:var(--p400)}
.jb-balken.schulung, .legende .feld.schulung{background:#a78bfa}
.jb-balken.krank, .legende .feld.krank{background:var(--schlecht)}
.jb-balken.sonstige, .legende .feld.sonstige{background:var(--s400)}
.jb-balken.offen, .legende .feld.offen{
  background:repeating-linear-gradient(45deg,var(--p300) 0 3px,var(--p100) 3px 6px);
}
.jb-heute{
  position:absolute; top:-2px; bottom:-2px; width:2px;
  background:var(--warn); z-index:1; border-radius:1px;
}

/* ---------- Stammblatt ---------- */
.huelle{
  position:fixed; inset:0; background:rgb(0 0 0 / .45);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:20;
}
.blatt{
  background:var(--flaeche); border-radius:var(--rund); box-shadow:var(--schatten-hoch);
  max-width:680px; width:100%; max-height:88vh; display:flex; flex-direction:column;
}
.blatt-kopf{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:20px 24px; border-bottom:1px solid var(--linie);
}
.blatt-kopf h3{margin:0; font-size:17px; font-weight:700}
.blatt-inhalt{
  padding:20px 24px; overflow-y:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.blatt-inhalt .feld.weit{grid-column:1 / -1}
.blatt-fuss{
  display:flex; justify-content:flex-end; align-items:center; gap:14px;
  padding:16px 24px; border-top:1px solid var(--linie);
}
.merker.fehler{color:var(--schlecht)}
.namenknopf{
  font:inherit; font-size:14px; background:none; border:none; padding:0;
  color:var(--akzent); cursor:pointer; text-align:left; font-weight:500;
}
.namenknopf:hover{text-decoration:underline}
.zahlfeld{width:64px; text-align:right; font-variant-numeric:tabular-nums;
  padding:5px 8px; font-size:13px; border-radius:var(--rund-mini);
  border:1px solid var(--linie); background:var(--flaeche); color:var(--schrift)}

@media (max-width:700px){
  .wochenraster{grid-template-columns:repeat(2,1fr)}
  .blatt-inhalt{grid-template-columns:1fr}
}

/* ---------- Typ-Schalter ---------- */
.schalter{display:flex; gap:6px; flex-wrap:wrap}
.typknopf{
  font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--linie); background:var(--flaeche);
  color:var(--schrift-fein); padding:6px 13px; border-radius:var(--rund-klein);
  transition:all .15s;
}
.typknopf i.feld{width:11px; height:11px; border-radius:3px; display:inline-block;
  opacity:.35; transition:opacity .15s}
.typknopf.an{color:var(--schrift); border-color:var(--s300); background:var(--flaeche)}
.typknopf.an i.feld{opacity:1}
.typknopf:not(.an){background:var(--flaeche2); text-decoration:line-through;
  text-decoration-color:var(--s400)}
.typknopf:hover{border-color:var(--p400)}

/* ---------- Hinweiswolke ---------- */
.wolke{
  position:fixed; z-index:40; pointer-events:none;
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund-klein); box-shadow:var(--schatten-hoch);
  padding:12px 15px; max-width:330px; font-size:13px; line-height:1.5;
}
.wolke-kopf{display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:5px}
.wolke-kopf strong{font-size:14px}
.wolke-zeitraum{color:var(--schrift-weich); margin-bottom:9px;
  padding-bottom:9px; border-bottom:1px solid var(--linie)}
.wolke-liste{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0}
.wolke-liste dt{color:var(--schrift-fein); font-size:12px; white-space:nowrap}
.wolke-liste dd{margin:0; font-size:12px}
.wolke-fein{margin:0; color:var(--schrift-fein); font-size:12px}