/* Freiwerk Zeiterfassung – Corporate Design
   Palette lt. CI: #30383b Dunkelgrau (Basis) · #293f5a Dunkelblau (Hauptakzent)
   #b54846 Ziegelrot (CTA) · #c78f57 Goldocker (Hover/Sekundär)
   #aac0b0 Türkisgrau (Panels) · #f1ede6 Cremeweiß (Hintergrund) */
:root{
  --bg:#f1ede6;--card:#ffffff;--ink:#30383b;--muted:#7a8084;--line:#e4dfd6;
  --base:#30383b;--accent:#293f5a;--cta:#b54846;--gold:#c78f57;
  --sage:#aac0b0;--sage-bg:#e9efe9;--gold-bg:#f6ead9;--red-bg:#f7e2e1;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px}
main{max-width:1080px;margin:0 auto;padding:24px 16px 60px}
h1{font-size:1.45rem;font-weight:700;margin:.6em 0}
h2{font-size:1rem;font-weight:600;margin:.2em 0 .8em}

/* Navigation + CI-Streifen */
nav{background:var(--base);color:#fff;display:flex;align-items:center;gap:18px;padding:12px 20px;flex-wrap:wrap}
nav .brand{font-weight:700;font-size:1.25rem;line-height:1;letter-spacing:-.02em}
nav .brand sup{font-size:.5em;font-weight:400}
nav .brand .sub{display:block;font-weight:400;font-size:.5rem;letter-spacing:.38em;color:var(--sage);margin-top:3px}
nav .links{display:flex;gap:2px;flex-wrap:wrap;flex:1}
nav a{color:#d8dcde;text-decoration:none;padding:7px 12px;border-radius:8px;font-size:.92em}
nav a:hover{background:rgba(255,255,255,.1);color:var(--gold)}
nav .who{opacity:.8;margin-right:8px;font-size:.88em}
.badge{background:var(--cta);color:#fff;border-radius:10px;padding:1px 7px;font-size:.75em}
.stripe{height:6px;background:linear-gradient(to right,
  #30383b 0 16.66%,#293f5a 16.66% 33.33%,#b54846 33.33% 50%,
  #c78f57 50% 66.66%,#aac0b0 66.66% 83.33%,#e6e0d5 83.33% 100%)}

/* Login-Wortmarke */
.loginlogo{text-align:center;margin:48px auto 0;font-weight:700;font-size:2.2rem;letter-spacing:-.02em;color:var(--base)}
.loginlogo sup{font-size:.4em;font-weight:400}
.loginlogo span{display:block;font-weight:400;font-size:.72rem;letter-spacing:.5em;color:var(--muted);margin-top:2px}

/* Karten (Agency-OS-Look: ruhige Flächen, runde Ecken, weiche Schatten) */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;
  margin-bottom:20px;box-shadow:0 2px 10px rgba(48,56,59,.06)}
.card.narrow{max-width:420px;margin:24px auto}
.card.center{text-align:center}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px}
.flash.ok{background:var(--sage-bg);color:#3d6650;border:1px solid #cbdcce}
.flash.err{background:var(--red-bg);color:#8f2317;border:1px solid #ecc7c3}

/* Formulare */
label{display:block;margin-bottom:12px;font-size:.88em;color:var(--muted)}
label input,label select{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font-size:1rem;font-family:inherit;color:var(--ink);background:#fff}
label input:focus,label select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
label.check{display:flex;align-items:center;gap:8px}
label.check input{width:auto;display:inline}

/* Buttons: Blau = Aktion, Rot = CTA, Gold = Hover */
button,.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:9px;
  padding:9px 18px;font-size:.93rem;font-family:inherit;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background .15s}
button:hover,.btn:hover{background:var(--gold)}
button.primary{background:var(--cta)}
button.primary:hover{background:var(--gold)}
button.ghost,.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
button.ghost:hover,.btn.ghost:hover{background:var(--bg);color:var(--gold)}
.sm{padding:4px 10px;font-size:.85rem}
form.inline{display:inline}

/* Stempeluhr */
.stamp{font-size:1.45rem;font-weight:600;padding:22px 60px;border-radius:16px;margin:16px 0}
.stamp.in{background:var(--accent)}
.stamp.out{background:var(--cta)}
.stamp:hover{background:var(--gold)}
.today{color:var(--muted)}
.status{font-size:1.08rem}
.stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.stats div{background:var(--bg);border-radius:12px;padding:12px 22px;text-align:center}
.stats span{display:block;font-size:.76em;color:var(--muted)}
.stats strong{font-size:1.25em;color:var(--accent)}

/* Tabellen */
table{width:100%;border-collapse:collapse;font-size:.92em}
th{text-align:left;color:var(--muted);font-weight:600;font-size:.82em;letter-spacing:.03em;
  text-transform:uppercase;border-bottom:2px solid var(--line);padding:8px}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.we td{background:#f7f5f0;color:var(--muted)}
tr.hol td{background:var(--gold-bg)}
tr.hl td{background:#e9edf3}
tr.sum td{font-weight:700;border-top:2px solid var(--base)}
tr.inactive td{opacity:.5}
.neg{color:var(--cta);font-variant-numeric:tabular-nums;font-weight:600}
.pos{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}
.warn{background:var(--gold-bg);color:#8a5c22;padding:2px 8px;border-radius:6px;font-size:.85em}

/* Status-Tags */
.tag{padding:3px 11px;border-radius:12px;font-size:.82em;font-weight:500}
.tag.offen{background:var(--gold-bg);color:#8a5c22}
.tag.genehmigt{background:var(--sage-bg);color:#3d6650}
.tag.abgelehnt{background:var(--red-bg);color:#8f2317}

.monthnav{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.monthnav strong{font-size:1.08em;min-width:160px;text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px;align-items:end}
.grid button{margin-bottom:12px}
fieldset{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;margin:0 0 14px;padding:10px 14px}
legend{font-size:.82em;color:var(--muted);padding:0 6px;text-transform:uppercase;letter-spacing:.03em}
.hours{display:flex;gap:10px;flex-wrap:wrap}
.hours label{margin:0}
.hours input{width:64px}
details.card summary{cursor:pointer;color:var(--accent);font-weight:500}
details.card form{margin-top:12px;max-width:320px}
.hint{color:var(--muted);font-size:.85em}
footer{text-align:center;color:var(--muted);font-size:.8em;padding:22px}
footer strong{color:var(--base)}
@media(max-width:700px){
  table{display:block;overflow-x:auto;white-space:nowrap}
  .stamp{width:100%;padding:20px}
  .loginlogo{margin-top:24px}
}

/* Hinweis: vergessener Gehen-Stempel */
.gracecard{border-left:5px solid var(--gold);background:#fdfaf4}
.gracecard h2{color:#8a5c22}

/* Admin sieht Mitarbeiter-Ansicht */
.impersonate{background:var(--gold-bg);color:#8a5c22;padding:10px 20px;display:flex;gap:14px;align-items:center;justify-content:center;font-size:.9em;flex-wrap:wrap}