/* Syrcon-CI: Pantone 2757 (#11306E) und Abstufungen, Exo 2 als Hausschrift.
   Bewusst eine eigene, kleine Datei statt der grossen aus dem Projekt-
   controlling: Dieses Werkzeug hat drei Seiten, und eine mitgeschleppte
   Stilvorlage waere eine zweite Wahrheit, die irgendwann auseinanderlaeuft. */

:root {
  --blau-900: #11306E;
  --blau-700: #2A4689;
  --blau-300: #86A9D9;
  --blau-050: #E7F0F9;
  --text:     #1B2333;
  --text-leise: #5A6B85;
  --rand:     #DDE6F1;
  --flaeche:  #FFFFFF;
  --grund:    #F4F7FB;
  --gruen:    #1F7A4D;
  --gelb:     #B6791B;
  --rot:      #C0392B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--grund);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

/* Zahlen in der System-Grotesk: Exo 2 setzt Ziffern proportional, dadurch
   verspringen Stundenwerte untereinander. */
.zahl, input[type="number"], td.zahl, th.zahl {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Rahmen ─────────────────────────────────────────────────────────────── */
header.kopf {
  background: var(--blau-900);
  color: #fff;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
header.kopf .titel { display: flex; align-items: center; gap: 14px; }
header.kopf img { height: 26px; }
header.kopf .name { font-weight: 600; font-size: 17px; letter-spacing: .2px; }
header.kopf .wer { font-size: 13px; color: var(--blau-300); }
header.kopf form { display: inline; }
header.kopf .navlink { color: var(--blau-300); text-decoration: none; }
header.kopf .navlink:hover { color: #fff; text-decoration: underline; }
@media (max-width: 620px) {
  header.kopf { flex-wrap: wrap; }
  header.kopf nav { order: 3; width: 100%; }
}
header.kopf button.abmelden {
  background: none; border: 1px solid rgba(255,255,255,.35); color: #fff;
  border-radius: 6px; padding: 5px 12px; font: inherit; font-size: 13px;
  cursor: pointer;
}
header.kopf button.abmelden:hover { background: rgba(255,255,255,.12); }

main { max-width: 940px; margin: 0 auto; padding: 24px 20px 60px; }

h1 { font-size: 22px; color: var(--blau-900); margin-bottom: 4px; }
.unterzeile { color: var(--text-leise); font-size: 13px; margin-bottom: 20px; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 10px; margin-bottom: 18px; overflow: hidden;
}
.karte-kopf {
  background: var(--blau-050); border-bottom: 1px solid var(--rand);
  padding: 10px 16px; font-weight: 600; font-size: 14px; color: var(--blau-900);
}
.karte-inhalt { padding: 16px; }
.karte-aktion {
  padding: 14px 16px; border-top: 1px solid var(--rand);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}

/* ── Formular ───────────────────────────────────────────────────────────── */
label.feld {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-leise);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px;
}
/* Datum und Uhrzeit gehoeren mit in diese Liste: Ohne sie nimmt der Browser
   seine eigene Schrift und seine eigene Hoehe — in einer Zeile neben einem
   Auswahlfeld faellt beides sofort auf. */
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
  font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--rand); border-radius: 6px; padding: 7px 10px;
  width: 100%;
  /* Gleiche Hoehe fuer alle Felder — Auswahlfelder sind sonst hoeher als
     Eingabefelder, und nebeneinander sieht das nach Versehen aus. */
  min-height: 38px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blau-300);
  box-shadow: 0 0 0 3px var(--blau-050);
}
.reihe { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.reihe > div { flex: 1; min-width: 150px; }

/* Monatswahl als Kästchenband */
.monate { display: flex; flex-wrap: wrap; gap: 6px; }
.monate label {
  border: 1px solid var(--rand); border-radius: 6px; padding: 6px 11px;
  font-size: 13px; cursor: pointer; background: #fff; user-select: none;
}
.monate input { display: none; }
.monate input:checked + span { color: #fff; }
.monate label:has(input:checked) {
  background: var(--blau-900); border-color: var(--blau-900); color: #fff;
}

/* Zeilen: Projekt | Tätigkeit | Stunden | Entfernen */
.zeile {
  display: grid; grid-template-columns: 1fr 1fr 110px 38px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
@media (max-width: 780px) {
  .zeile { grid-template-columns: 1fr 110px 38px; }
  .zeile select:first-child { grid-column: 1 / -1; }
}

/* ── Schaltflächen ──────────────────────────────────────────────────────── */
.knopf {
  display: inline-block; font: inherit; font-size: 14px; font-weight: 500;
  border-radius: 6px; padding: 8px 16px; cursor: pointer; border: 1px solid transparent;
  text-decoration: none;
}
.knopf-primaer { background: var(--blau-900); color: #fff; }
.knopf-primaer:hover { background: var(--blau-700); }
.knopf-zweit { background: #fff; color: var(--blau-900); border-color: var(--rand); }
.knopf-zweit:hover { background: var(--blau-050); }
.knopf-klein { padding: 5px 10px; font-size: 13px; }
.knopf-weg {
  background: none; border: none; color: var(--rot); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px;
}

/* ── Meldungen ──────────────────────────────────────────────────────────── */
.meldung {
  border-radius: 8px; padding: 11px 14px; margin-bottom: 14px; font-size: 14px;
  border: 1px solid;
}
.meldung-erfolg  { background: #EDF7F1; border-color: #BFE3CE; color: var(--gruen); }
.meldung-fehler  { background: #FDF1F0; border-color: #F3C9C4; color: var(--rot); }
.meldung-hinweis { background: var(--blau-050); border-color: var(--blau-300); color: var(--blau-900); }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--rand); text-align: left; }
th {
  background: var(--blau-050); color: var(--blau-900); font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
td.rechts, th.rechts { text-align: right; }
tr.summe td { font-weight: 700; background: var(--blau-050); border-bottom: none; }

.marke {
  display: inline-block; border-radius: 999px; padding: 2px 9px;
  font-size: 12px; font-weight: 600;
}
.marke-blau { background: var(--blau-050); color: var(--blau-900); }
.marke-gelb { background: #FDF6E7; color: var(--gelb); }

/* ── Anmeldung ──────────────────────────────────────────────────────────── */
body.anmeldeseite {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--blau-900);
}
.anmeldekarte {
  background: #fff; border-radius: 12px; padding: 34px; width: 100%;
  max-width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.anmeldekarte img { height: 30px; margin-bottom: 18px; }
.anmeldekarte h1 { font-size: 19px; margin-bottom: 3px; }
.anmeldekarte .unterzeile { margin-bottom: 22px; }
.anmeldekarte .feldblock { margin-bottom: 14px; }
.anmeldekarte .knopf { width: 100%; text-align: center; }

.fuss { color: var(--text-leise); font-size: 12px; text-align: center; margin-top: 26px; }

/* ── Zwei Wege durch die Maske ───────────────────────────────────────────── */
.artwahl { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.artwahl label {
  flex: 1; min-width: 260px; display: flex; gap: 10px; align-items: flex-start;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; font-size: 14px;
}
.artwahl label:has(input:checked) {
  border-color: var(--blau-900); background: var(--blau-050);
}
.artwahl input { width: auto; margin-top: 3px; }
.artwahl .klein { color: var(--text-leise); font-size: 12.5px; }

/* Datum | von | bis | Projekt | Tätigkeit | Entfernen */
.tzeile {
  display: grid; grid-template-columns: 150px 110px 110px 1fr 1fr 38px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
/* Zwei Reihen je Tag brauchen eine Grenze — sonst laesst sich nicht sehen,
   welche Bemerkung zu welchen Zeiten gehoert. */
#tagzeilen .tzeile {
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rand);
}
#tagzeilen .tzeile:last-child { border-bottom: none; }
.tzeile .zeitfeld {
  display: flex; align-items: center; gap: 6px;
  /* Schriftgroesse und Farbe gehoeren an die Beschriftung, **nicht** an das
     Label als Ganzes: Das Zeitfeld darin erbt sonst die kleinere Schrift und
     steht neben dem Datumsfeld sichtbar anders da. */
  min-height: 38px;
}
.tzeile .zeitfeld input { width: 100%; }
/* Die Kopfzeile sagt schon „von" und „bis" — im Feld waere es doppelt und
   machte die Zeitfelder schmaler als die Auswahlfelder daneben. */
.tzeile .zeitfeld span { display: none; font-size: 12px; color: var(--text-leise); }
/* Die Bemerkung gehoert zur Zeile, nicht daneben: eigene Reihe ueber die
   volle Breite, direkt unter den Zeiten desselben Tages. */
.tzeile .tbemerkung { grid-column: 1 / -1; }
@media (max-width: 900px) {
  /* Auf dem Handy untereinander: Sechs Spalten waeren dort nicht zu treffen. */
  .tzeile { grid-template-columns: 1fr 1fr 38px; }
  .tzeile input[type="date"], .tzeile .tbemerkung { grid-column: 1 / -1; }
  /* Ohne Kopfzeile waeren zwei gleich aussehende Zeitfelder nicht zu
     unterscheiden — hier gehoert die Beschriftung wieder ans Feld. */
  .tzeile .zeitfeld span { display: inline; }
  .tzeile select { grid-column: 1 / -1; }
  .tzeile > div:first-child, .tzeile.kopf { display: none; }
}