/* Zeiterfassung: Handy zuerst. Farben wie Auslagen/Messe-Kontakte: Lila #8764B8
   (Leiste), Blau #24398B, Orange #EF8F18. Start gruen, Stopp rot.
   Zyklus 2: --sek dunkler (#5F6673, 5,3:1 auf --grund, vorher 4,4:1), aktiver
   Navigationspunkt #5B3F86 (8,4:1 mit Weiss), Touch-Ziele mind. 44 px.
   Die Kontraste prueft tests/test_oberflaeche.py nach. */
:root {
  --lila: #8764B8; --navy: #24398B; --orange: #EF8F18;
  --text: #1F2937; --sek: #5F6673; --rand: #D9DCE3; --grund: #F4F5F8; --flaeche: #fff;
  --gefahr: #B42318; --gefahr-hell: #FEF3F2; --info-hell: #EEF1F9;
  --ok: #17796B; --ok-hell: #ECFDF3; --warn: #B45309; --fokus: #6B4A9E;
  --start: #15803D; --stopp: #C2410C;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text);
  font: 17px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--navy); }

.leiste { background: var(--lila); color: #fff; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 12px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 10; }
.leiste :focus-visible { outline-color: #fff; }
.leiste-marke { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.leiste-marke img { height: 28px; }
.leiste nav { display: flex; gap: 2px; width: 100%; flex-wrap: wrap; align-items: center; }
@media (min-width: 640px) { .leiste nav { width: auto; margin-left: auto; } }
.leiste nav a { color: #fff; text-decoration: none; padding: 8px 10px; border-radius: 8px;
  font-size: .92rem; min-height: 44px; display: inline-flex; align-items: center; }
.leiste nav a.aktiv { background: #5B3F86; }
.sprache { display: flex; gap: 4px; margin-left: auto; }
/* Am PC wie Auslagen: Sprachschalter direkt neben der Navigation (C11). */
.leiste nav + .sprache, .sprache + nav { margin-left: 0; }
.sprache button { font: inherit; font-size: .78rem; font-weight: 600; color: #fff; background: none;
  border: 1px solid rgba(255,255,255,.55); border-radius: 6px; min-width: 44px; min-height: 44px; cursor: pointer; }
/* Handy: Kopfleiste scrollt mit (nimmt sonst ein Drittel des Bildschirms),
   Navigation in einer Zeile (D1). */
@media (max-width: 639px) {
  .leiste { position: static; }
  .leiste nav { flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; gap: 0; }
  .leiste nav a { padding: 8px 7px; font-size: .88rem; white-space: nowrap; }
}
.sprache button.aktiv { background: #fff; color: var(--lila); border-color: #fff; }

main { max-width: 760px; margin: 0 auto; padding: 12px 12px 48px; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.karte.schmal { max-width: 440px; margin: 24px auto; }
h1 { font-size: 1.3rem; color: var(--navy); margin: 0 0 10px; }
h2 { font-size: 1rem; color: var(--navy); margin: 18px 0 8px; }
.karte h2:first-child { margin-top: 0; }
.sek { color: var(--sek); font-size: .85rem; margin: 6px 0; }
label, .feld { display: block; font-size: .9rem; color: var(--sek); margin: 8px 0; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: #fff;
  border: 2px solid var(--rand); border-radius: 10px; padding: 10px 12px; min-height: 48px; margin-top: 4px; }
input:focus, select:focus, textarea:focus { border-color: var(--lila); outline: none; }
textarea { resize: vertical; line-height: 1.5; }
.feld.fehler input, .feld.fehler select { border-color: var(--gefahr); }
.feldfehler { display: block; color: var(--gefahr); font-size: .85rem; margin-top: 4px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zwei form { margin: 0; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 0 16px; border-radius: 10px; border: 2px solid var(--navy); background: #fff; color: var(--navy);
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; }
.knopf.haupt { background: var(--navy); color: #fff; }
.knopf.breit { width: 100%; }
.knopf.gross { min-height: 58px; font-size: 1.1rem; }
.knopf.klein { min-height: 44px; padding: 0 12px; font-size: .9rem; }
.knopf.pfeil { min-width: 44px; font-size: 1.2rem; }
.knopf.link { border: 0; padding: 0 4px; min-height: 44px; background: none; text-decoration: underline; font-weight: 500; }
.knopf.gefahr { border-color: var(--gefahr); background: var(--gefahr); color: #fff; }
.knopf.gefahr-umriss { border-color: var(--gefahr); color: var(--gefahr); }
.knopf:disabled { opacity: .55; cursor: default; }
.formular .knopf.breit { margin-top: 10px; }
.zurueck-knopf, .oben-abstand { margin-top: 12px; }
form.inline { display: inline; margin: 0; }

.meldung { padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; background: var(--info-hell); }
.meldung.error { background: var(--gefahr-hell); color: var(--gefahr); }
.meldung.success { background: var(--ok-hell); color: var(--ok); }
.meldung.warning { background: #FEF3E2; color: #7A3E06; border-left: 6px solid var(--orange); }
.meldung.vergessen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* Startseite: ein grosser Umschaltknopf */
.stempel { text-align: center; padding: 16px 0 8px; }
.stempel-zustand { font-size: 1.05rem; color: var(--text); margin: 0 0 14px; min-height: 1.5em; }
.umschalter { width: min(68vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer;
  color: #fff; font: inherit; font-size: 2.2rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 8px 22px rgba(0,0,0,.18), inset 0 -6px 0 rgba(0,0,0,.15); }
.umschalter.start { background: var(--start); }
.umschalter.stopp { background: var(--stopp); }
/* Zyklus 3, U1: vergessen abzudrehen -- grosser Knopf als Link "Ende eintragen". */
a.umschalter { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
  padding: 0 24px; line-height: 1.15; }
.umschalter.ende { background: var(--navy); font-size: 1.7rem; }
.jetzt-stoppen { margin-top: 12px; }
.umschalter:active { transform: scale(.97); }
.umschalter:disabled { opacity: .7; }
.umschalter.wartet { cursor: progress; }
.laufzeit { font-size: 3rem; font-weight: 700; color: var(--navy); margin-top: 14px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.laufzeit.still { color: var(--text); }
.laufzeit.pause { color: var(--text); font-size: 2.4rem; }
.laufzeit-name { color: var(--sek); font-size: .85rem; margin: 2px 0 0; }
.heute-summe { color: var(--sek); margin: 4px 0 0; }
.heute-summe b { color: var(--text); font-variant-numeric: tabular-nums; }
.grund-leiste { margin: 10px 0; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 21px;
  border: 2px solid var(--rand); background: #fff; color: var(--text); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; }
.chip.an { background: var(--navy); border-color: var(--navy); color: #fff; }
details.notiz-block { margin: 14px 0; }
details > summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: 44px; display: flex; align-items: center; gap: .3em; }
.fuss-link { margin-top: 20px; text-align: center; font-size: .9rem; }
.fuss-link a, .notiz-ziel { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; }
.notiz-ziel { display: block; min-height: 0; }
.schnell-ergebnis.warnung { color: #7A3E06; }
.schnell-ergebnis.fehler { color: var(--gefahr); }
.schnell-ergebnis.start { color: var(--start); }
.schnell-ergebnis.stopp { color: var(--stopp); }

/* Tag */
.blaettern { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.blaettern .datumwahl { flex: 1; margin: 0; }
.blaettern input { margin: 0; min-height: 44px; }
.kennzahlen-klein { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; }
.kennzahlen-klein div { background: var(--grund); border-radius: 8px; padding: 6px 8px; }
.kennzahlen-klein b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.kennzahlen-klein span { font-size: .78rem; color: var(--sek); }
.minus { color: var(--gefahr); }
.plus { color: var(--ok); }
.zeitleiste { position: relative; height: 26px; background: var(--grund); border-radius: 6px; margin-top: 12px; overflow: hidden; }
.zl-band { position: absolute; top: 0; bottom: 0; background: #E8EBF2; }
.zl-stueck { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; }
.zl-stueck.arbeit { background: var(--navy); }
.zl-stueck.pause { background: var(--orange); top: 9px; bottom: 9px; }
.zeitleiste-achse { display: flex; justify-content: space-between; font-size: .72rem; color: var(--sek); }
.liste { display: flex; flex-direction: column; gap: 8px; }
.eintrag { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; background: #fff; border: 1px solid var(--rand);
  border-left: 6px solid var(--navy); border-radius: 12px; padding: 10px 12px; color: inherit; text-decoration: none; }
.eintrag.pause { border-left-color: var(--orange); }
.eintrag.luecke { border-left-color: #CBD5E1; border-style: dashed; border-left-style: solid; background: transparent; }
a.eintrag.luecke:hover, a.eintrag.luecke:active { border-color: var(--orange); }
.eintrag.offen { border-left-color: var(--start); }
.eintrag.abwesenheit { border-left-color: var(--lila); align-items: center; }
.eintrag.abwesenheit .knopf { margin-left: auto; }
a.eintrag:hover, a.eintrag:active { border-color: var(--navy); }
.eintrag-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.eintrag-art { font-weight: 600; }
.eintrag-notiz { flex-basis: 100%; color: var(--sek); font-size: .88rem; white-space: pre-line; }
.marken { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.marke { display: inline-flex; align-items: center; font-size: .76rem; padding: 2px 8px; border-radius: 10px; background: var(--grund); color: var(--text); }
.marke.leise { color: var(--sek); }
.marke.m-wochenende, .marke.m-feiertag { background: #EEF1F9; color: var(--navy); }
.marke.m-urlaub, .marke.m-krank { background: #F3EEFA; color: #5B3F86; }
.marke.m-ueber_10h { background: var(--gefahr-hell); color: var(--gefahr); }
.marke.m-ausserdienstlich { background: #FEF3E2; color: #92400E; }
.marke.m-pausenabzug { background: #E5E7EB; color: #374151; }
.leer-hinweis { padding: 8px 0; }
.schlicht { list-style: none; padding: 0; }
.schlicht li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--grund); }
.aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.aktionen form { margin: 0; }
.zurueck { text-decoration: none; font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.unter-titel { margin: -4px 0 8px; }
.unter-titel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.vorschlag { border-left: 6px solid var(--lila); }
.vorschlag p { margin-top: 0; }

/* Auswertung */
.filterzeile { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
@media (min-width: 560px) { .kacheln { grid-template-columns: repeat(4, 1fr); } }
.kachel { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; }
.kachel.haupt { border-top: 4px solid var(--lila); }
.kz-wert { font-size: 1.4rem; font-weight: 700; color: var(--navy); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kz-wert.minus { color: var(--gefahr); }
.kz-wert.plus { color: var(--ok); }
.kz-name { font-size: .8rem; color: var(--sek); }
.balken-karte { padding-bottom: 8px; }
.balken { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 160px; border-bottom: 1px solid var(--rand); }
.soll-linie { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--sek); pointer-events: none; }
.balken-spalte { flex: 1; height: 100%; min-height: 44px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-decoration: none; min-width: 0; }
.balken-warn { color: var(--gefahr); font-weight: 700; font-size: .8rem; line-height: 1; }
.balken-wert { width: 100%; max-width: 28px; background: var(--navy); border-radius: 3px 3px 0 0; min-height: 0; }
.balken-wert.frei { background: #9CA3AF; }
.balken-wert.m-ausser { background: var(--orange); }
.balken-wert.m-ueber { background: var(--gefahr); }
.balken-tag { font-size: .66rem; color: var(--sek); height: 14px; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.lg-eintrag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.lg.normal { background: var(--navy); } .lg.frei { background: #9CA3AF; } .lg.ausser { background: var(--orange); } .lg.ueber { background: var(--gefahr); }
.tabelle-rahmen { overflow-x: auto; background: #fff; border: 1px solid var(--rand); border-radius: 12px; }
.tabelle { border-collapse: collapse; width: 100%; font-size: .85rem; font-variant-numeric: tabular-nums; }
.tabelle th, .tabelle td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--grund); white-space: nowrap; }
.tabelle th:first-child, .tabelle td:first-child, .tabelle .marken-zelle, .tabelle th.marken-kopf { text-align: left; }
/* Erste Spalte bleibt beim waagrechten Scrollen stehen (C7). */
.tabelle th:first-child, .tabelle td:first-child { position: sticky; left: 0; z-index: 1; background: #fff;
  box-shadow: 1px 0 0 var(--rand); }
.tabelle td:first-child a { display: inline-flex; align-items: center; gap: .3em; min-height: 32px; }
.tabelle th { background: var(--grund); color: var(--navy); }
.tabelle tr.frei td { background: #FAFAFB; }
/* Zyklus 3, U4: kuenftige Tage ohne Soll und Saldo, ausgegraut. */
.tabelle tr.zukunft td, .tabelle tr.zukunft td a { color: var(--sek); }
.balken-spalte.zukunft { opacity: .45; }
.tabelle thead th:first-child { background: var(--grund); }
/* Unter 560 px: Tage als gestapelte Karten statt Tabelle (C7). */
.tage-karten { display: flex; flex-direction: column; gap: 8px; }
.tag-karte { display: flex; flex-direction: column; gap: 4px; min-height: 44px; justify-content: center; background: #fff;
  border: 1px solid var(--rand); border-left: 6px solid var(--navy); border-radius: 12px; padding: 8px 12px; color: inherit;
  text-decoration: none; font-variant-numeric: tabular-nums; }
.tag-karte.frei { border-left-color: #9CA3AF; }
/* Zyklus 3, U12: Wochenende/Feiertag/Abwesenheit ohne Arbeit einzeilig und grau. */
.tag-karte.leer { min-height: 44px; padding: 6px 12px; background: var(--grund); color: var(--sek); font-size: .9rem; }
.tag-karte .marken { margin: 0; }
@media (min-width: 560px) { .tage-karten { display: none; } }
@media (max-width: 559px) { .tabelle-rahmen { display: none; } }

/* Einstellungen, Hilfe */
.schluessel { display: block; word-break: break-all; background: #fff; padding: 8px; border-radius: 8px; margin: 6px 0; font-size: .9rem; }
.hilfe ol, .hilfe ul { padding-left: 1.3em; }
.hilfe li { margin: 4px 0; }
.hilfe code, .hilfe pre { background: var(--grund); border-radius: 6px; padding: 1px 5px; font-size: .88rem; word-break: break-all; white-space: pre-wrap; }
.hilfe pre { padding: 8px; }
.bestaetigen-was { font-size: 1.05rem; }
.anmelde-logo { display: block; margin: 4px auto 14px; border-radius: 20px; }
.abmelden { text-align: center; margin-top: 8px; }