/* 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 bleiben in der Hausschrift — eine zweite Schriftart mitten in einer
   Zeile faellt mehr auf als der Gewinn an Ausrichtung. Gleiche Ziffernbreite
   gibt es auch so: `tabular-nums` stellt Exo 2 auf feste Laufweite um. */
.zahl, input[type="number"], td.zahl, th.zahl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 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); }

/* Breiter als die uebliche Lesespalte: Hier stehen Tabellen und Zeilen mit
   sechs Feldern, keine Fliesstexte. `max-width` ist eine Obergrenze — auf dem
   Telefon greift sie nicht, dort fliesst alles ohnehin ueber die volle
   Breite. */
main { max-width: 1280px; margin: 0 auto; padding: 20px 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 ──────────────────────────────────────────────────────────── */
/* Wie die Anmeldung in expenses: heller Grund, weisse Karte, weicher
   Schatten. Wer beides benutzt, soll nicht zweimal etwas anderes sehen —
   dasselbe Login, dieselbe Handschrift. Die Werte stammen von dort
   (`reisekosten/templates/login.html`) und sind hier auf die Farbnamen
   dieser Datei zurueckgefuehrt. */
body.anmeldeseite {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: #F0F4F8;
}
.anmeldekarte {
  background: #fff; border: 1px solid #D8E1EC; border-radius: 10px;
  padding: 44px 40px; width: 100%; max-width: 400px;
  box-shadow: 0 4px 24px rgba(17, 48, 110, .08);
}
.anmeldekarte img { height: 28px; margin-bottom: 6px; }
/* Der Name des Werkzeugs steht klein und gesperrt ueber der Ueberschrift —
   die Ueberschrift selbst sagt, was zu tun ist. */
.anmeldekarte .werkzeugname {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--blau-700); font-weight: 500; margin-bottom: 28px;
}
.anmeldekarte h1 { font-size: 20px; margin-bottom: 24px; }
.anmeldekarte .unterzeile { margin-bottom: 22px; }
.anmeldekarte input { background: #F7F9FC; }
/* Beschriftungen wie drueben: normale Schreibweise, kein Sperrsatz. Auf der
   Anmeldekarte stehen zwei Felder — da traegt Versalschrift nichts bei. */
.anmeldekarte .feld {
  text-transform: none; letter-spacing: 0; font-size: 12px;
  color: #5A6D7E; font-weight: 500; margin-bottom: 6px;
}
/* Der zweite Faktor: sechs Ziffern gross und gesperrt, mittig. Man tippt sie
   ab, waehrend man auf das Telefon schaut — dabei hilft jede Ziffer, die man
   ohne Suchen wiederfindet. Wie in expenses. */
.anmeldekarte input.code {
  font-size: 22px; letter-spacing: 8px; text-align: center; padding: 14px 12px;
}
.anmeldekarte .werzeile { color: #5A6D7E; font-size: 13px; margin-bottom: 22px; }
.anmeldekarte .werzeile strong { color: var(--blau-900); font-weight: 600; }
.anmeldekarte .zurueck {
  display: block; text-align: center; margin-top: 14px; font-size: 12px;
}
.anmeldekarte .zurueck a { color: var(--blau-900); text-decoration: none; }
.anmeldekarte .fuss { margin-top: 16px; }
.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 */
/* Bis 1199 px: Bemerkung in einer zweiten Reihe. Ab 1200 px passt alles
   nebeneinander — bei fuenf Tagen spart das die halbe Bildschirmhoehe. */
.tzeile {
  display: grid;
  grid-template-columns: 152px 100px 100px 84px 1fr 1fr 34px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
/* Schmaler Bildschirm: Bemerkung in Reihe 2, „✕" bleibt oben rechts. Ohne
   feste Platzierung ruecken beide sonst in eine dritte Reihe. */
.tzeile .tbemerkung { grid-column: 1 / -1; grid-row: 2; }
.tzeile .knopf-weg { grid-column: 7; grid-row: 1; }
.kopf-bemerkung-spalte { display: none; }
.kopf-bemerkung-reihe { grid-column: 1 / -1; grid-row: 2; }

@media (min-width: 1000px) {
  .tzeile {
    /* Zeitfelder brauchen Raum fuer „08:00" **und** das Uhr-Symbol des
       Browsers — zu schmal, und die Uhrzeit wird abgeschnitten. Die
       Bemerkung gibt den Platz her; 200 Zeichen liest ohnehin niemand am
       Stueck in einer Tabellenzeile. */
    /* Gemessen in Exo 2, 15 px: „20.08.2026" braucht 77 px Text, mit
       Innenabstand und Kalendersymbol rund 125 px; „08:00" 40 px, mit
       Uhrsymbol rund 85 px; die Dauer zeigt hoechstens „8:00" (31 px). */
    grid-template-columns: 152px 108px 108px 84px minmax(140px, 1fr)
                           minmax(120px, 0.8fr) minmax(130px, 0.7fr) 30px;
  }
  /* Alles in einer Reihe — bei fuenf Tagen spart das die halbe Bildschirmhoehe. */
  .tzeile .tbemerkung, .tzeile .knopf-weg { grid-column: auto; grid-row: auto; }
  .kopf-bemerkung-spalte { display: block; }
  .kopf-bemerkung-reihe { display: none; }
  #tagzeilen .tzeile {
    padding-bottom: 0; margin-bottom: 8px; border-bottom: none;
  }
}
/* 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); }
@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; }
  /* Gestapelt: feste Reihen wuerden hier Luecken reissen. */
  .tzeile .tbemerkung, .tzeile .knopf-weg { grid-row: auto; }
  .tzeile .knopf-weg { grid-column: 3; }
  /* 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; }
}

/* ── Monatsstand in der Vorschau ─────────────────────────────────────────── */
.monatsstand { margin-top: 6px; }
.monatsstand th, .monatsstand td { padding: 6px 10px; }
/* Ueber der Monatsgrenze: Die Zahl steht rot da, statt dass die Buchung erst
   beim Absenden abgelehnt wird. */
.monatsstand td.ueber { color: var(--rot); font-weight: 700; }

/* ── Projektsuche ────────────────────────────────────────────────────────── */
.projektwahl { position: relative; display: block; }
.projektwahl select.versteckt { display: none; }
/* `overflow: hidden` an der Karte haelt die abgerundeten Ecken sauber —
   schneidet aber die Trefferliste ab, sobald sie ueber den Kartenrand
   hinausreicht. Fuer Karten mit Projektsuche deshalb offen, und die Rundung
   uebernimmt der Kartenkopf selbst. */
.karte:has(.projektwahl) { overflow: visible; }
.karte:has(.projektwahl) .karte-kopf { border-radius: 10px 10px 0 0; }

.treffer {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; border: 1px solid var(--rand); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(17,48,110,.14);
  max-height: 260px; overflow-y: auto;
}
.treffer-zeile { padding: 7px 10px; font-size: 14px; cursor: pointer; }
.treffer-zeile:hover, .treffer-zeile.aktiv { background: var(--blau-050); }
.treffer-zeile.leer { color: var(--text-leise); cursor: default; }
.treffer-zeile.leer:hover { background: none; }

/* ── Bereichswahl ────────────────────────────────────────────────────────── */
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.kachel {
  display: flex; flex-direction: column; gap: 8px; padding: 24px 22px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.kachel:hover {
  border-color: var(--blau-900); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(17,48,110,.12);
}
.kachel .symbol { font-size: 30px; color: var(--blau-900); line-height: 1; }
.kachel .name { font-size: 17px; font-weight: 600; color: var(--blau-900); }
.kachel .was { font-size: 13px; color: var(--text-leise); }