/* Stechuhr: Zeiterfassung für Mein Schreinerwerk.
   Designsprache (#46): flache Farbflächen und Plakat-Typografie statt
   Karten, Rahmen und Leuchteffekten. Gelbgrün/Anthrazit nach Firmen-CI,
   auf Gelbgrün immer dunkle Schrift. Signatur: schräg geschnittene
   Flächenkanten (Gehrung) und der mechanisch tickende Punkt der Uhr. */

:root {
  --grund: #181a13;
  --furche: #1b1e15;       /* Brettfugen im Hintergrund */
  --brett: #22251c;
  --brett-hell: #2b2f23;
  --linie: #3b4130;
  --text: #f2f4ea;
  --text-leise: #9aa285;
  --akzent: #b3dc18;
  --akzent-tief: #b3dc18;  /* Akzent als SCHRIFT auf Grundfläche (hell: dunkler) */
  --akzent-text: #212a04;
  --akzent-leise: rgba(33, 42, 4, .62);
  --anthrazit: #181a13;    /* bleibt in beiden Modi dunkel (Flächen auf Gelbgrün) */
  --start: #b3dc18;
  --pause: #d9a51f;
  --pause-tief: #d9a51f;   /* Bernstein als SCHRIFT (hell: dunkler) */
  --stopp: #d95f4c;
  --radius: 6px;
  --gehrung: 16px; /* Versatz der schrägen Schnittkanten */
  color-scheme: dark;
}

/* Heller Modus: warmes Papier/Birke statt Anthrazit, CI-Flächen unverändert */
html[data-theme="hell"] {
  --grund: #f2f2ea;
  --furche: #ececdf;
  --brett: #ffffff;
  --brett-hell: #e7e9da;
  --linie: #c6cab2;
  --text: #20241a;
  --text-leise: #6c7457;
  --akzent-tief: #6b840e;
  --pause-tief: #8a6410;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --grund: #f2f2ea;
    --furche: #ececdf;
    --brett: #ffffff;
    --brett-hell: #e7e9da;
    --linie: #c6cab2;
    --text: #20241a;
    --text-leise: #6c7457;
    --akzent-tief: #6b840e;
    --pause-tief: #8a6410;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss IMMER gewinnen, auch gegen display:flex-Regeln
   (Autoren-CSS überschreibt sonst das User-Agent-Stylesheet). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 17px;
  color: var(--text);
  /* gehobelte Bretter: feine horizontale Bahnen, bewusst ohne Lichtschein */
  background:
    repeating-linear-gradient(180deg,
      var(--grund) 0px, var(--grund) 46px,
      var(--furche) 46px, var(--furche) 47px),
    var(--grund);
}

/* ---------- Fehlerbanner ---------- */

.fehler {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 18px;
  background: var(--stopp);
  color: #2a0d06;
  font-weight: 600;
}

/* ---------- Anmeldung: Vollfläche statt Karte ---------- */

.login { min-height: 100vh; display: flex; flex-direction: column; }

.login-kopf {
  position: relative;
  background: var(--akzent);
  color: var(--akzent-text);
  padding: clamp(48px, 12vh, 110px) 24px 44px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gehrung) * 2), 0 100%);
}

.login-kopf > * { max-width: 640px; margin-left: auto; margin-right: auto; }

.login-firma {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.login-titel {
  margin: 0;
  font-family: "Staatliches", sans-serif;
  font-weight: 400;
  font-size: clamp(72px, 19vw, 132px);
  line-height: .94;
  letter-spacing: 2px;
}

/* zweifarbiger Schriftzug im Stil des Firmenlogos (STECH|UHR):
   zweiter Teil als Kontur, fällt ohne text-stroke auf Dunkelton zurück */
.login-titel .logo-zwei { color: #566a0c; }

@supports (-webkit-text-stroke: 2px black) {
  .login-titel .logo-zwei {
    color: transparent;
    -webkit-text-stroke: 3px var(--akzent-text);
  }
}

.login-sub {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--akzent-leise);
}

.login-form {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 34px 24px 48px;
  display: flex;
  flex-direction: column;
}

.login-form label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-leise);
  margin: 18px 0 2px;
}

/* Formular ohne Kastenrahmen: nur eine Schreiblinie */
.login-form input {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--linie);
  border-radius: 0;
  color: var(--text);
  caret-color: var(--akzent);
  font-size: 19px;
  padding: 10px 2px 12px;
  font-family: inherit;
}

.login-form input:focus {
  outline: none;
  border-bottom-color: var(--akzent);
}

.login-form .btn { margin-top: 34px; }

.login-hinweis {
  margin: 18px 0 0;
  color: var(--text-leise);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Marke im Kopf der Hauptansicht ---------- */

.marke-klein { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* flache Raute als Firmenzeichen statt Uhren-Piktogramm */
.marke-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: var(--akzent);
  transform: rotate(45deg);
}

.marke-icon::before, .marke-icon::after { content: none; }

.marke-name {
  font-family: "Staatliches", sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--akzent-tief);
}

.marke-name .logo-zwei { color: var(--text); }

/* ---------- Kopf ---------- */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}

.kopf-rechts { display: flex; align-items: center; gap: 14px; }

/* Angemeldeter Nutzer als Teil des Schriftzugs: STECHUHR | MARKUS */
.wer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Staatliches", sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wer::before {
  content: "";
  flex: none;
  width: 2px;
  height: 22px;
  background: var(--linie);
}

.wer:empty { display: none; }

.btn-leise {
  background: var(--brett);
  border: 0;
  color: var(--text-leise);
  border-radius: var(--radius);
  padding: 8px 13px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.btn-leise:hover { color: var(--text); background: var(--brett-hell); }

/* ---------- Darstellungs-Schalter (hell/dunkel/system) ---------- */

/* auf der Gelbgrün-Fläche des Logins */
.theme-knopf-login {
  position: absolute;
  top: 14px;
  right: 16px;
  margin: 0;
  border: 0;
  background: rgba(24, 26, 19, .12);
  color: var(--akzent-text);
  border-radius: var(--radius);
  padding: 8px 13px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.theme-knopf-login:hover { background: rgba(24, 26, 19, .2); }

/* ---------- Timer-Flächen ---------- */

/* Läuft: volle Gelbgrün-Fläche, unmissverständlich, ohne Leuchten */
.timer-karte {
  margin: 14px 0 6px;
  padding: 24px 20px calc(22px + var(--gehrung));
  background: var(--akzent);
  color: var(--akzent-text);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gehrung)), 0 100%);
  text-align: center;
}

/* Pause: ruhige dunkle Fläche, Bernstein nur in der Typografie */
.pause-karte {
  background: var(--brett);
  color: var(--text);
}

.timer-status {
  font-family: "Staatliches", sans-serif;
  letter-spacing: 4px;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pause-status { color: var(--pause-tief); }

/* mechanisches Ticken statt Puls-Ring */
.puls {
  width: 11px;
  height: 11px;
  background: currentColor;
  animation: ticken 1s steps(1) infinite;
}

@keyframes ticken {
  0%   { opacity: 1; }
  50%  { opacity: .25; }
  100% { opacity: 1; }
}

.timer-uhr {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: clamp(56px, 16vw, 86px);
  line-height: 1.05;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}

.timer-projekt {
  font-family: "Staatliches", sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.timer-nr {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--akzent);
  background: var(--anthrazit);
  padding: 3px 14px;
  margin-top: 8px;
  letter-spacing: 1px;
}

.timer-detail {
  color: var(--akzent-leise);
  font-size: 15px;
  margin-top: 8px;
  font-family: "IBM Plex Mono", monospace;
}

.pause-karte .timer-detail { color: var(--text-leise); }

.timer-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

/* ---------- Buttons: flache Flächen ---------- */

.btn {
  font-family: "Staatliches", sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  border: none;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  padding: 0 18px;
  transition: filter .1s ease, transform .06s ease;
}

.btn:hover { filter: brightness(1.07); }
.btn:active { filter: brightness(.92); transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: wait; }

.btn-gross { min-height: 74px; }

.btn-start { background: var(--start); color: var(--akzent-text); }
.btn-pause { background: var(--pause); color: #241a02; }
.btn-stopp { background: var(--stopp); color: #2a0d06; }

/* auf der Gelbgrün-Fläche wird Pause zur dunklen Fläche (in beiden Modi) */
.timer-karte:not(.pause-karte) .btn-pause { background: var(--anthrazit); color: #f2f4ea; }

/* ---------- Tätigkeit + Filter ---------- */

.taetigkeit-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 0;
}

.zeilen-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-leise);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  background: var(--brett-hell);
  border: 0;
  color: var(--text-leise);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

.chip:hover { color: var(--text); }

.chip.aktiv {
  background: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

.status-chips { padding: 10px 18px 0; }

/* ---------- Suche + Liste ---------- */

.such-zeile { padding: 16px 18px 0; }

.such-wrap { position: relative; }

#suche {
  width: 100%;
  background: var(--brett);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 19px;
  padding: 16px 58px 16px 16px;
  font-family: inherit;
}

#suche:focus { outline: 2px solid var(--akzent); }

/* natives Chrome-X ausblenden, wir haben ein eigenes */
#suche::-webkit-search-cancel-button { -webkit-appearance: none; }

.such-x {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: var(--brett-hell);
  color: var(--text-leise);
  font-size: 18px;
  cursor: pointer;
}

.such-x:hover { background: var(--linie); color: var(--text); }

.hinweis-start {
  padding: 14px 18px 4px;
  color: var(--text-leise);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.projekte {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 18px 18px;
  display: grid;
  gap: 8px;
}

.projekt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--brett);
  border: 0;
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text);
  font-family: inherit;
}

/* Nur der Play-Knopf startet die Zeit, die Kachel selbst ist passiv */
.projekt-start {
  flex: none;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--radius);
  background: var(--start);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--akzent-text);
  font-size: 20px;
  padding: 0 0 0 3px;
  cursor: pointer;
  transition: filter .1s ease, transform .06s ease;
}

.projekt-start:hover { filter: brightness(1.1); }
.projekt-start:active { transform: scale(.94); }
.projekt-start:disabled { opacity: .55; cursor: wait; }

.projekt-mitte { flex: 1; min-width: 0; }

.projekt-name {
  font-weight: 600;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.projekt-kunde { color: var(--text-leise); font-size: 14px; margin-top: 2px; }

.projekt-rechts { flex: none; text-align: right; }

/* Auftragsnummer als Blickfang */
.projekt-nr {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .5px;
  color: var(--akzent-tief);
}

.projekt-status {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-leise);
  background: var(--brett-hell);
  border-radius: 3px;
  padding: 3px 9px;
}

.abschnitt {
  padding: 14px 0 2px;
  color: var(--text-leise);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* kleine Raute als Abschnittsmarke, wie im Kopf */
.abschnitt::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--akzent);
  transform: rotate(45deg);
}

.leer { padding: 30px 18px; text-align: center; color: var(--text-leise); }

/* ---------- Fuß ---------- */

.fuss { padding: 6px 18px 28px; text-align: center; }

.fuss a { color: var(--text-leise); font-size: 13px; }
.fuss a:hover { color: var(--akzent-tief); }

/* ---------- Breite Bildschirme ---------- */

@media (min-width: 720px) {
  #main { max-width: 700px; margin: 0 auto; }
  .timer-uhr { font-size: 92px; }
}