/* Mein Zeitkonto — schlank auf tokens.css aufgesetzt, mobil zuerst. */
* { box-sizing: border-box; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif;
  background: var(--seite, #f2f6f9); color: var(--text, #0d1418); }

header { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 1rem;
  background: var(--flaeche, #fff); border-bottom: 1px solid var(--rand, #d4dde4);
  position: sticky; top: 0; z-index: 5; }
header h1 { font-size: 1.05rem; margin: 0; flex: 1; }
.logo-bild { height: 1.8rem; display: block; }

main { max-width: 720px; margin: 0.9rem auto 5.5rem; padding: 0 0.8rem; }
.karte { background: var(--flaeche, #fff); border: 1px solid var(--rand, #d4dde4);
  border-radius: 14px; padding: 1rem; margin-bottom: 0.9rem;
  box-shadow: 0 2px 10px rgba(13, 40, 60, 0.06); }
.karte h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.hinweis { color: var(--text-gedimmt, #5c6b76); font-size: 0.85rem; }
.versteckt { display: none !important; }

input, button, label { font: inherit; }
input { padding: 0.6rem 0.7rem; border: 1px solid var(--rand, #d4dde4);
  border-radius: 10px; min-height: 44px; font-size: 16px; }
.formzeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.5rem 0; }
.formzeile label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem;
  color: var(--text-gedimmt, #5c6b76); }
.knopf { min-height: 44px; padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rand, #d4dde4); background: var(--flaeche, #fff); }
.knopf.primaer { background: var(--hk-blau, #1275bb); border-color: var(--hk-blau, #1275bb);
  color: #fff; font-weight: 600; }
.knopf.klein { min-height: 34px; padding: 0.25rem 0.7rem; font-size: 0.82rem; }
.datei-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem;
  border: 1px dashed var(--hk-blau, #1275bb); border-radius: 10px; cursor: pointer;
  color: var(--hk-blau, #1275bb); font-weight: 600; }

.saldo-reihe { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.saldo { flex: 1 1 40%; border: 1px solid var(--rand, #d4dde4); border-radius: 12px;
  padding: 0.8rem; text-align: center; }
.saldo .wert { font-size: 1.9rem; font-weight: 700; }
.saldo.plus .wert { color: var(--gruen, #2e9e5b); }
.saldo.minus .wert { color: var(--rot, #d9534f); }
.saldo .label { font-size: 0.78rem; color: var(--text-gedimmt, #5c6b76); }

.zeile { display: flex; justify-content: space-between; gap: 0.6rem; align-items: center;
  padding: 0.45rem 0; border-bottom: 1px solid var(--rand-hell, #e8eef3);
  font-size: 0.88rem; flex-wrap: wrap; }
.zeile:last-child { border-bottom: none; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th { text-align: left; color: var(--text-gedimmt, #5c6b76); font-size: 0.72rem;
  text-transform: uppercase; padding: 0.3rem 0.4rem; }
td { padding: 0.35rem 0.4rem; border-top: 1px solid var(--rand-hell, #e8eef3); }
td.gruen { color: var(--gruen, #2e9e5b); font-weight: 600; }
td.rot { color: var(--rot, #d9534f); font-weight: 600; }

.schicht-chip { display: inline-block; margin: 0.15rem 0.2rem 0.15rem 0; padding: 0.3rem 0.6rem;
  border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--rand, #d4dde4); }
.schicht-chip.s-F { background: #eaf4fb; }
.schicht-chip.s-S { background: #fdf3e0; }
.schicht-chip.s-N { background: #ece9f7; }

#toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px); background: #0d1418; color: #fff;
  padding: 0.6rem 1.1rem; border-radius: 999px; font-size: 0.9rem; opacity: 0;
  transition: all 200ms ease; pointer-events: none; z-index: 30; max-width: 92vw; }
#toast.sichtbar { opacity: 1; transform: translateX(-50%); }

/* D4: Ein Zeitraum ohne Arbeitstag ist kein Urlaub. Der Satz steht schon beim Auswaehlen
   da, nicht erst als Fehlermeldung nach dem Klick. */
.urlaub-keiner { color: var(--rot, #d9534f); font-weight: 600; }

/* D6: Herkunft der Stunden in der Tageszeile und die Erledigt-Liste der Entscheiderin. */
.nt-frei { color: var(--gruen, #2e9e5b); font-size: 0.92em; }
.nt-offen { color: var(--gelb, #d99a00); font-size: 0.92em; }
.erledigt { margin-top: 0.8rem; border-top: 1px solid var(--rand, #d8e0e6); padding-top: 0.5rem; }
.erledigt summary { cursor: pointer; font-weight: 600; }

/* D8: Der Nachtragsgrund als Schnellauswahl. Gemessen war hier ein freies Textfeld —
   ein Tipp statt 25 Anschlaege, und der Grund steht trotzdem lesbar in der Zeile. */
.grund-wahl { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
.grund-knopf {
  padding: 0.4rem 0.75rem; border-radius: 999px; cursor: pointer; font: inherit;
  /* 44 px: Diese App laeuft am Terminal in der Halle — mit Handschuh und Spaenen an
     den Fingern. Im Browser gemessen waren es 38 px. */
  font-size: 0.95em; min-height: 2.75rem;
  background: var(--flaeche-hell, #eef3f7); border: 1px solid var(--rand, #d8e0e6);
  color: inherit;
}
.grund-knopf.an {
  border-color: var(--hk-blau, #1275bb); color: var(--hk-blau, #1275bb);
  background: rgba(18, 117, 187, 0.10); font-weight: 600;
}
html.dunkel .grund-knopf.an { background: rgba(127, 196, 238, 0.16); }
/* Nur bei „Sonstiges" ist das Textfeld Pflicht — dann sagt es das auch. */
#nt-grund.pflicht { border-color: var(--gelb, #d99a00); }