:root{
  --tinte:#122029;
  --tinte-70:rgba(18,32,41,.70);
  --tinte-45:rgba(18,32,41,.45);
  --tinte-12:rgba(18,32,41,.12);
  --amber:#c8880f;
  --papier:#f5f4f1;
  --flaeche:#ffffff;
  --gruen:#2f6b4f;
  --rot:#9a3324;
  --radius:3px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papier);
  color:var(--tinte);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.45;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--tinte);text-decoration:none}
main{max-width:1080px;margin:0 auto;padding:18px 16px 56px}

/* Kopf */
.kopf{
  background:var(--tinte);color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 16px 0;
  position:sticky;top:0;z-index:20;
}
.marke{color:#fff;font-weight:600;letter-spacing:.01em;display:block;padding-bottom:8px}
.marke span{color:var(--amber);font-weight:400;margin-left:8px;font-size:.85em}
.kopf nav{display:flex;gap:2px;overflow-x:auto}
.kopf nav a{
  color:rgba(255,255,255,.72);padding:9px 13px;font-size:.9rem;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.kopf nav a.aktiv{color:#fff;border-bottom-color:var(--amber)}

/* Meldungen */
.meldung{padding:10px 12px;border-left:3px solid var(--amber);background:var(--flaeche);margin:0 0 14px}
.meldung.fehler{border-left-color:var(--rot)}
.meldung.ok{border-left-color:var(--gruen)}

/* Stempeluhr */
.uhr{background:var(--tinte);color:#fff;padding:26px 20px 22px;border-radius:var(--radius)}
.uhr .lage{font-size:.8rem;color:rgba(255,255,255,.6);font-family:"IBM Plex Mono",monospace}
.uhr .zaehler{
  font-family:"IBM Plex Mono",monospace;font-size:3.6rem;font-weight:500;
  line-height:1;margin:10px 0 4px;font-variant-numeric:tabular-nums;
}
.uhr .zaehler.ruht{color:rgba(255,255,255,.45)}
.uhr .unterzeile{font-size:.9rem;color:rgba(255,255,255,.7)}
.uhr .unterzeile b{color:var(--amber);font-weight:500}
.knoepfe{display:flex;gap:10px;margin-top:20px}
.knoepfe button{
  flex:1;padding:17px 10px;border:0;border-radius:var(--radius);
  font-family:inherit;font-size:1.02rem;font-weight:600;cursor:pointer;
}
button.los{background:var(--amber);color:#fff}
button.pause{background:rgba(255,255,255,.14);color:#fff}
button.stopp{background:#fff;color:var(--tinte)}
button:disabled{opacity:.35;cursor:not-allowed}
.geo{margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.55);font-family:"IBM Plex Mono",monospace}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.kachel{background:var(--flaeche);padding:14px 16px;border-radius:var(--radius);border:1px solid var(--tinte-12)}
.kachel .wert{font-family:"IBM Plex Mono",monospace;font-size:1.7rem;font-weight:500;font-variant-numeric:tabular-nums}
.kachel .bez{font-size:.82rem;color:var(--tinte-70);margin-top:2px}
.plus{color:var(--gruen)} .minus{color:var(--rot)}

/* Tabellen */
.tabellenrahmen{overflow-x:auto;background:var(--flaeche);border:1px solid var(--tinte-12);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th{
  text-align:left;font-weight:600;font-size:.76rem;color:var(--tinte-70);
  padding:9px 8px;border-bottom:1px solid var(--tinte-12);background:#fbfaf8;
  position:sticky;top:0;white-space:nowrap;
}
td{padding:7px 8px;border-bottom:1px solid rgba(18,32,41,.06);white-space:nowrap}
td.zahl,th.zahl{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
td.text{white-space:normal;min-width:150px;color:var(--tinte-70)}
tr.frei td{background:#f1efec;color:var(--tinte-45)}
tr.heute td{box-shadow:inset 3px 0 0 var(--amber)}
tr.woche td{background:#f6f3ec;font-weight:600;font-size:.83rem}
tr.summe td{background:var(--tinte);color:#fff;font-weight:600}
tr.summe td.zahl{color:#fff}
.marker{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--amber);font-weight:600}
.art{font-size:.78rem;padding:1px 6px;border-radius:2px;background:var(--tinte-12);color:var(--tinte-70)}
.art.Urlaub{background:#e4efe6;color:var(--gruen)}
.art.Krank{background:#f4e2de;color:var(--rot)}
.art.Feiertag{background:#eee9dd;color:#7a6318}
.art.Homeoffice{background:#e6ecf1;color:#274b63}

/* Blätterleiste */
.blaettern{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.blaettern h1{font-size:1.35rem;margin:0;font-weight:600}
.blaettern .pfeil{padding:6px 12px;background:var(--flaeche);border:1px solid var(--tinte-12);border-radius:var(--radius)}
.blaettern .rechts{margin-left:auto;display:flex;gap:8px}

/* Formulare */
form.karte{background:var(--flaeche);border:1px solid var(--tinte-12);border-radius:var(--radius);padding:18px;margin-bottom:18px;max-width:560px}
form.karte h2{margin:0 0 14px;font-size:1.05rem}
label{display:block;font-size:.82rem;color:var(--tinte-70);margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=time],input[type=number],input[type=date],select,textarea{
  width:100%;padding:11px 12px;font-family:inherit;font-size:1rem;
  border:1px solid var(--tinte-12);border-radius:var(--radius);background:#fff;color:var(--tinte);
}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:1px}
.zeile{display:flex;gap:12px}
.zeile>div{flex:1}
.wochentage{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.wochentage label{display:flex;align-items:center;gap:5px;margin:0;font-size:.9rem;color:var(--tinte)}
.wochentage input{width:auto}
button.senden{margin-top:18px;padding:13px 22px;background:var(--tinte);color:#fff;border:0;border-radius:var(--radius);font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer}
button.zweit{background:transparent;color:var(--tinte);border:1px solid var(--tinte-12)}
.hinweis{font-size:.8rem;color:var(--tinte-45);margin-top:6px}
.stempelliste{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--tinte-70);line-height:1.7}
.anmeldung{max-width:400px;margin:8vh auto 0}
.anmeldung h1{font-size:1.5rem;margin:0 0 4px}
.anmeldung p.unter{color:var(--tinte-70);margin:0 0 18px;font-size:.9rem}
@media (max-width:600px){
  .uhr .zaehler{font-size:3rem}
  main{padding:14px 12px 40px}
  td,th{padding:6px 6px}
  table{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}