/* Zeiterfassung - Oberflaeche. Bewusst schlank, ohne Framework. */
:root{
  --bg:#f4f5f7; --karte:#fff; --rand:#e2e5ea; --text:#1d2430; --grau:#6b7280;
  --blau:#2563eb; --blau-d:#1d4ed8; --gruen:#0f9d58; --rot:#d93025; --gelb:#f9ab00;
  --radius:10px; --schatten:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
}
*{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(--blau);text-decoration:none}
a:hover{text-decoration:underline}

/* Kopf */
.kopf{background:#fff;border-bottom:1px solid var(--rand);position:sticky;top:0;z-index:10}
.kopf-inhalt{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:24px;min-height:56px;flex-wrap:wrap}
.marke{font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.marke .punkt{width:9px;height:9px;border-radius:50%;background:var(--gruen)}
.kopf nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.kopf nav a{padding:6px 10px;border-radius:6px;color:var(--grau);font-size:14px}
.kopf nav a:hover{background:#f0f2f5;text-decoration:none}
.kopf nav a.aktiv{background:#e8effd;color:var(--blau-d);font-weight:600}
.kopf .trenner{width:1px;background:var(--rand);margin:6px 6px}
.benutzer{display:flex;gap:12px;align-items:center;font-size:14px}
.benutzer .abmelden{color:var(--grau)}

main{max-width:1180px;margin:24px auto 60px;padding:0 20px}
footer{max-width:1180px;margin:0 auto 40px;padding:0 20px;color:var(--grau);font-size:12.5px}

/* Karten & Raster */
.karte{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);
  padding:20px;box-shadow:var(--schatten);margin-bottom:18px}
.karte h2{margin:0 0 14px;font-size:16px;font-weight:600}
.karte h3{margin:18px 0 8px;font-size:14px;font-weight:600;color:var(--grau)}
.raster{display:grid;gap:18px}
.raster.k2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.raster.k3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.raster.k4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* Kennzahlen */
.kennzahl{background:#fff;border:1px solid var(--rand);border-radius:var(--radius);padding:16px 18px}
.kennzahl .titel{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--grau)}
.kennzahl .wert{font-size:26px;font-weight:650;margin-top:4px;font-variant-numeric:tabular-nums}
.kennzahl .zusatz{font-size:12.5px;color:var(--grau);margin-top:2px}
.plus{color:var(--gruen)} .minus{color:var(--rot)} .neutral{color:var(--text)}

/* Stempeluhr */
.uhr{text-align:center;padding:28px 20px}
.uhr .zeit{font-size:52px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.uhr .datum{color:var(--grau);margin-bottom:6px}
.uhr .lage{display:inline-block;margin:10px 0 18px;padding:5px 14px;border-radius:999px;font-size:13px;font-weight:600}
.lage.arbeitet{background:#e6f4ea;color:#137333}
.lage.pause{background:#fef7e0;color:#a06800}
.lage.abwesend{background:#f1f3f4;color:#5f6368}
.knopfreihe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Knoepfe */
button,.knopf{font:inherit;cursor:pointer;border:1px solid var(--rand);background:#fff;color:var(--text);
  padding:9px 16px;border-radius:8px;font-weight:550}
button:hover,.knopf:hover{background:#f7f8fa;text-decoration:none}
.gross{padding:14px 30px;font-size:16px}
.primaer{background:var(--blau);border-color:var(--blau);color:#fff}
.primaer:hover{background:var(--blau-d)}
.erfolg{background:var(--gruen);border-color:var(--gruen);color:#fff}
.erfolg:hover{filter:brightness(.94)}
.gefahr{background:#fff;border-color:#f3c2be;color:var(--rot)}
.gefahr:hover{background:#fdf1f0}
.klein{padding:4px 9px;font-size:12.5px;border-radius:6px}

/* Tabellen */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--grau);font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--rand);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid #f0f1f4;vertical-align:middle}
tbody tr:hover{background:#fafbfc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.wochenende td{background:#fafafa;color:var(--grau)}
tr.heute td{background:#f0f6ff}
tr.summe td{font-weight:650;border-top:2px solid var(--rand);background:#fbfcfd}

/* Etiketten */
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.tag.arbeit{background:#eef1f5;color:#495260}
.tag.urlaub{background:#e3f0ff;color:#1a56b3}
.tag.krank{background:#fdeceb;color:#b3261e}
.tag.feiertag{background:#f3e8fd;color:#6b21a8}
.tag.zeitausgleich{background:#e6f4ea;color:#137333}
.tag.offen{background:#f1f3f4;color:#5f6368}
.tag.eingereicht{background:#fef7e0;color:#a06800}
.tag.freigegeben{background:#e6f4ea;color:#137333}
.tag.abgelehnt{background:#fdeceb;color:#b3261e}
.tag.beantragt{background:#fef7e0;color:#a06800}
.tag.genehmigt{background:#e6f4ea;color:#137333}

/* Meldungen und Hinweise */
.meldung{padding:11px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;border:1px solid}
.meldung.ok{background:#e6f4ea;border-color:#b7dfc4;color:#137333}
.meldung.fehler{background:#fdeceb;border-color:#f5c6c3;color:#b3261e}
.hinweis{font-size:12.5px;padding:7px 11px;border-radius:6px;margin-top:6px;border-left:3px solid}
.hinweis.verstoss{background:#fdeceb;border-color:var(--rot);color:#8c1d18}
.hinweis.warnung{background:#fef7e0;border-color:var(--gelb);color:#7a5200}
.hinweis.info{background:#eef2f7;border-color:#9aa5b4;color:#42505f}

/* Formulare */
label{display:block;font-size:13px;font-weight:550;margin-bottom:4px;color:#3c4653}
input,select,textarea{font:inherit;width:100%;padding:8px 10px;border:1px solid #cfd4dc;
  border-radius:7px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid #bcd2fb;border-color:var(--blau)}
.feld{margin-bottom:14px}
.feldreihe{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.zeile-ein{display:flex;gap:8px;align-items:center}
.zeile-ein input[type=checkbox]{width:auto}
fieldset{border:1px solid var(--rand);border-radius:8px;padding:14px;margin:0 0 16px}
legend{font-size:13px;font-weight:600;padding:0 6px;color:var(--grau)}

/* Login */
.login-huelle{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login{width:100%;max-width:380px;background:#fff;border:1px solid var(--rand);
  border-radius:14px;padding:32px;box-shadow:var(--schatten)}
.login h1{font-size:19px;margin:0 0 4px}
.login p.sub{color:var(--grau);font-size:13.5px;margin:0 0 22px}
.login .dsgvo{font-size:11.5px;color:var(--grau);margin-top:18px;line-height:1.45}

.werkzeugleiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.werkzeugleiste .fueller{flex:1}
.stumm{color:var(--grau)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
details summary{cursor:pointer;font-size:14px;font-weight:550;padding:4px 0}
@media print{.kopf,footer,.knopfreihe,.werkzeugleiste{display:none}body{background:#fff}.karte{box-shadow:none;border:0}}

/* Wochenraster fuer die Soll-Arbeitszeit je Wochentag */
.wochenraster{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-bottom:4px}
.wochenraster .tagfeld label{font-size:11.5px;text-align:center;color:var(--grau);margin-bottom:3px}
.wochenraster .tagfeld input{padding:7px 4px;text-align:center;font-variant-numeric:tabular-nums}
.wochenraster .tagfeld.frei label{color:#9aa5b4}
.wochenraster .tagfeld.frei input{color:var(--grau);background:#f4f5f7}
.wochenraster .summe output{display:block;padding:7px 4px;text-align:center;font-weight:650;
  font-variant-numeric:tabular-nums;background:#eef2f7;border:1px solid var(--rand);border-radius:7px}
.wochenraster .summe output.zuviel{background:#fdeceb;border-color:#f5c6c3;color:var(--rot)}
.vorlagen{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px}
@media(max-width:560px){.wochenraster{grid-template-columns:repeat(4,minmax(0,1fr))}}