/* Zeiterfassung – Gestaltung nach Verwalter1 CI 1.0 */

:root {
  --anthrazit: #22262B;
  --orange:    #FF6B2C;
  --orange-600:#E85A18;
  --orange-700:#C64A11;
  --orange-100:#FFE9DE;
  --grau-900:#16181B; --grau-800:#22262B; --grau-700:#333941;
  --grau-600:#4A525C; --grau-500:#6B747E; --grau-400:#8A9199;
  --grau-300:#B4BAC0; --grau-200:#D7DBDF; --grau-100:#EDEFF1;
  --grau-50:#F7F8F9;  --weiss:#FFFFFF;
  --erfolg:#147350; --erfolg-bg:#E6F4EE;
  --warnung:#9A6300; --warnung-bg:#FFF3DC;
  --fehler:#C0362C; --fehler-bg:#FBEAE8;
  --radius:8px;
  --schrift: "Lato", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  color: var(--grau-800);
  background: var(--grau-50);
}

a { color: var(--orange-700); }
a:hover { color: var(--orange-600); }

/* ------------------------------------------------------------- Kopfzeile */
.kopf {
  background: var(--anthrazit);
  color: var(--weiss);
  padding: 0 22px;
}
.kopf-innen {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; gap: 22px; min-height: 58px;
  flex-wrap: wrap;
}
.marke { font-weight: 700; letter-spacing: .01em; }
.marke .eins { color: var(--orange); }
.kopf nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.kopf nav a {
  color: rgba(255,255,255,.82); text-decoration: none;
  padding: 7px 12px; border-radius: 6px; font-size: 14.5px;
}
.kopf nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.kopf nav a.aktiv { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }

.huelle { max-width: 1080px; margin: 0 auto; padding: 26px 22px 70px; }

/* ---------------------------------------------------------------- Karten */
.karte {
  background: var(--weiss);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.karte h2 {
  margin: 0 0 14px; font-size: 17px; font-weight: 600;
}
.karte h2 .neben { float: right; font-weight: 400; color: var(--grau-500); font-size: 14px; }

.hinweis { padding: 11px 15px; border-radius: 6px; margin-bottom: 16px; font-size: 14.5px; }
.hinweis.warnung { background: var(--warnung-bg); color: #5c4a1e; border-left: 3px solid var(--warnung); }
.hinweis.fehler  { background: var(--fehler-bg);  color: #7a221c; border-left: 3px solid var(--fehler); }
.hinweis.erfolg  { background: var(--erfolg-bg);  color: #0d4a34; border-left: 3px solid var(--erfolg); }

/* --------------------------------------------------------------- Stempel */
.stempel { display: flex; gap: 12px; flex-wrap: wrap; }
.stempel form { flex: 1 1 200px; }
.gross {
  width: 100%; border: 0; border-radius: var(--radius);
  padding: 20px 16px; font: inherit; font-size: 17px; font-weight: 600;
  cursor: pointer; color: var(--weiss); background: var(--anthrazit);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.gross:hover { background: var(--grau-700); }
.gross.start { background: var(--erfolg); }
.gross.start:hover { filter: brightness(1.08); }
.gross.pause { background: var(--orange); }
.gross.pause:hover { background: var(--orange-600); }
.gross.ende  { background: var(--grau-600); }
.gross.ende:hover { background: var(--grau-700); }
.gross small { font-weight: 400; font-size: 13px; opacity: .85; }
.gross:disabled { background: var(--grau-200); color: var(--grau-400); cursor: default; }

.uhr {
  font-size: 40px; font-weight: 300; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.uhr-zeile { display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-end; }
.kennzahl .wert { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kennzahl .bez { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--grau-500); }

.laeuft {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--orange-100); color: var(--orange-700);
  padding: 5px 12px; border-radius: 20px; font-size: 14px; font-weight: 600;
}
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

/* -------------------------------------------------------------- Formular */
label { display: block; font-size: 13px; font-weight: 600; color: var(--grau-600); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=email], input[type=date],
select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 15px;
  border: 1px solid var(--grau-300); border-radius: 6px; background: var(--weiss);
  color: var(--grau-800);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange);
}
.feldreihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.feld { flex: 1 1 190px; margin-bottom: 12px; }
.feld.breit { flex: 2 1 320px; }

button, .knopf {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px; padding: 9px 16px;
  background: var(--orange); color: var(--weiss); text-decoration: none;
  display: inline-block;
}
button:hover, .knopf:hover { background: var(--orange-600); color: var(--weiss); }
button.stumm, .knopf.stumm {
  background: var(--weiss); color: var(--grau-700); border-color: var(--grau-300);
}
button.stumm:hover, .knopf.stumm:hover { background: var(--grau-50); color: var(--grau-900); }
button.klein, .knopf.klein { padding: 5px 10px; font-size: 13px; font-weight: 500; }

/* -------------------------------------------------------------- Tabellen */
table.liste { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.liste th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--grau-500); font-weight: 600;
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--grau-200);
}
table.liste td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--grau-100); vertical-align: top; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste td.zahl, table.liste th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste tfoot td { font-weight: 700; border-top: 2px solid var(--grau-200); border-bottom: 0; padding-top: 10px; }
.leer { color: var(--grau-500); padding: 14px 0; }

.merkmal {
  display: inline-block; padding: 2px 9px; border-radius: 12px;
  font-size: 12.5px; font-weight: 600; background: var(--grau-100); color: var(--grau-700);
}
.merkmal.aus { background: var(--fehler-bg); color: var(--fehler); }
.merkmal.admin { background: var(--orange-100); color: var(--orange-700); }

/* ---------------------------------------------------------- Anmeldeseite */
.anmeldung {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--anthrazit); padding: 22px;
}
.anmeldung .karte { width: 100%; max-width: 380px; margin: 0; padding: 30px; }
.anmeldung .marke { font-size: 22px; margin-bottom: 4px; color: var(--anthrazit); }
.anmeldung .unter { color: var(--grau-500); font-size: 14px; margin-bottom: 20px; }
.anmeldung button { width: 100%; padding: 12px; margin-top: 6px; }

@media (max-width: 640px) {
  .huelle { padding: 18px 14px 50px; }
  .uhr { font-size: 32px; }
  .stempel form { flex: 1 1 100%; }
}

/* Dezimalstunden als leise Zweitangabe neben der Uhrzeitschreibweise */
.dez {
  color: var(--grau-500);
  font-size: .82em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kennzahl .dez { display: block; font-size: 12px; }
.uhr + .dez { font-size: 15px; margin-bottom: 2px; }