/* SFB Lab Suite – Grundlayout. Farben aus dem SFB-Logo. */

:root {
  --sfb-blau: #094fa3;
  --sfb-blau-dunkel: #073d7e;
  --sfb-grau: #bfc0c4;
  --flaeche: #f4f5f7;
  --rahmen: #c9ccd2;
  --text: #1c1f24;
  --text-leise: #5b6270;
  --fehler: #b42318;
  --fehler-flaeche: #fdecea;

  --abstand: 1rem;          /* Grundraster: alle Abstände sind Vielfache davon */
  --radius: 6px;
  --feldhoehe: 2.5rem;
  --beschriftung: 9rem;     /* feste Spalte für Beschriftungen → Felder stehen in einer Flucht */
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }
body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
}

/* Kopfzeile */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand);
  height: 4rem;
  padding: 0 calc(var(--abstand) * 1.5);
  background: #fff;
  border-bottom: 3px solid var(--sfb-blau);
}
.kopf__marke { display: flex; align-items: center; gap: calc(var(--abstand) * 0.75); text-decoration: none; color: var(--text); }
.kopf__logo { height: 2.25rem; width: auto; display: block; }
.kopf__name { font-weight: 600; font-size: 1.125rem; }
.kopf__text { display: flex; flex-direction: column; line-height: 1.2; }
.kopf__version { font-size: 0.75rem; color: var(--text-leise); white-space: nowrap; }
.kopf__konto { display: flex; align-items: center; gap: var(--abstand); color: var(--text-leise); }
.kopf__konto form { margin: 0; }
.kopf__name-link { color: var(--text-leise); text-decoration: none; }
.kopf__name-link:hover { color: var(--sfb-blau); }

/* Inhalt */
.inhalt { max-width: 64rem; margin: 0 auto; padding: calc(var(--abstand) * 2) calc(var(--abstand) * 1.5); }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 var(--abstand); }

.karte {
  background: #fff;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: calc(var(--abstand) * 1.5);
}

.hinweis {
  background: #fff;
  border-left: 4px solid var(--sfb-blau);
  border-radius: var(--radius);
  padding: calc(var(--abstand) * 0.75) var(--abstand);
  margin: 0 0 var(--abstand);
}
.hinweis--fehler { border-left-color: var(--fehler); background: var(--fehler-flaeche); color: var(--fehler); }

/* Formulare: Beschriftung links in fester Spalte, Felder in einer Flucht, Knopf unter den Feldern */
.formular {
  display: grid;
  grid-template-columns: var(--beschriftung) minmax(0, 1fr);
  gap: var(--abstand) var(--abstand);
  align-items: center;
}
.formular label { font-weight: 500; }
.formular .formular__aktionen { grid-column: 2; display: flex; gap: var(--abstand); flex-wrap: wrap; }
.formular__zeile { display: contents; }
.formular__zeile[hidden] { display: none; }
.formular__hilfe { font-size: 0.8125rem; color: var(--text-leise); font-weight: 400; margin-top: 0.25rem; }
.formular__tastatur { grid-column: 2; margin: 0; }
.feld-mit-knopf { display: flex; gap: calc(var(--abstand) * 0.5); }
.feld-mit-knopf select, .feld-mit-knopf input { flex: 1 1 auto; min-width: 0; }
.feld-mit-knopf .knopf { flex: 0 0 auto; }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: calc(var(--abstand) * 0.5); }
.auswahl.auswahl--zeile { flex-direction: row; flex-wrap: wrap; gap: calc(var(--abstand) * 0.5) calc(var(--abstand) * 1.5); min-height: var(--feldhoehe); align-items: center; }
.pruefumfang { display: flex; flex-direction: column; gap: var(--abstand); }
.pruefblock { margin: 0; padding: calc(var(--abstand) * 0.75) var(--abstand); border: 1px solid var(--rahmen); border-radius: var(--radius); background: #fff; }
.pruefblock[hidden] { display: none; }
.pruefblock legend { padding: 0 0.375rem; font-weight: 600; }
.pruefblock__titel { font-size: 0.8125rem; font-weight: 600; color: var(--text-leise); text-transform: uppercase; letter-spacing: 0.03em; margin: calc(var(--abstand) * 0.5) 0 0.25rem; }
.pruefblock__titel:first-of-type { margin-top: 0; }
.pruefumfang__leer[hidden] { display: none; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="time"],
input[type="search"], select, textarea {
  width: 100%;
  height: var(--feldhoehe);
  padding: 0 calc(var(--abstand) * 0.75);
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
}
textarea { height: auto; min-height: 6rem; padding: calc(var(--abstand) * 0.5) calc(var(--abstand) * 0.75); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sfb-blau); outline-offset: 1px; border-color: var(--sfb-blau); }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--feldhoehe);
  padding: 0 calc(var(--abstand) * 1.25);
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--sfb-blau);
  border: 1px solid var(--sfb-blau);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.knopf:hover { background: var(--sfb-blau-dunkel); border-color: var(--sfb-blau-dunkel); }
.knopf:focus-visible { outline: 2px solid var(--sfb-blau); outline-offset: 2px; }
.knopf--leise { color: var(--sfb-blau); background: #fff; }
.knopf--leise:hover { color: #fff; }
.knopf--breit { width: 100%; }

h2 { font-size: 1.25rem; line-height: 1.3; margin: calc(var(--abstand) * 1.5) 0 calc(var(--abstand) * 0.75); }
.karte + h2 { margin-top: calc(var(--abstand) * 2); }

/* Tabellen: Zellen auf dem Abstandsraster, Kopf hervorgehoben */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { padding: calc(var(--abstand) * 0.5) calc(var(--abstand) * 0.75); text-align: left; vertical-align: top; border-bottom: 1px solid var(--rahmen); }
.tabelle th { font-weight: 600; color: var(--text-leise); white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: none; }

/* Navigation in der Kopfzeile */
.nav { display: flex; gap: calc(var(--abstand) * 0.25); margin: 0 auto 0 calc(var(--abstand) * 2); }
.nav a { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 var(--abstand); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--flaeche); }
.nav a.nav--aktiv { color: var(--sfb-blau); box-shadow: inset 0 -3px 0 var(--sfb-blau); border-radius: 0; }

/* Seitenkopf mit Aktionen, Filterzeile, Spalten */
.zeile { display: flex; align-items: center; gap: calc(var(--abstand) * 0.5); flex-wrap: wrap; }
.zeile--kopf { justify-content: space-between; margin-bottom: var(--abstand); }
.zeile--kopf h1 { margin: 0; }
.zeile form { margin: 0; }
.filter { display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto auto; gap: calc(var(--abstand) * 0.5); align-items: center; margin-bottom: var(--abstand); }
.filter select { width: auto; }
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand); }
.karte--tabelle { padding: 0; overflow-x: auto; }
.karte--tabelle .leise { padding: calc(var(--abstand) * 0.5) var(--abstand); }
.tabelle--kompakt th, .tabelle--kompakt td { padding: calc(var(--abstand) * 0.375) calc(var(--abstand) * 0.5); white-space: nowrap; }
.tabelle--kv th { width: 9rem; color: var(--text-leise); font-weight: 500; }
.liste { margin: 0; padding-left: 1.25rem; }
.marke { display: inline-block; padding: 0 0.375rem; border-radius: var(--radius); background: var(--sfb-grau); font-size: 0.75rem; font-weight: 600; }
.formular__fehler { color: var(--fehler); font-size: 0.875rem; margin-top: 0.25rem; }
.auswahl--spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.25rem calc(var(--abstand) * 0.75); }
.auswahl--spalten li, .auswahl--spalten ul { list-style: none; margin: 0; padding: 0; }
.auswahl--spalten label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.auswahl--spalten input { margin: 0; }
.formular select[multiple] { height: 8rem; }

/* Statusmarken */
.status { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.8125rem; font-weight: 600; background: var(--flaeche); color: var(--text-leise); vertical-align: middle; }
.status--entnommen, .status--offen, .status--vorschau { background: #fff4e5; color: #8a4b00; }
.status--im_labor, .status--in_pruefung, .status--in_pruefung { background: #e8f0fb; color: var(--sfb-blau); }
.status--geprueft, .status--erledigt, .status--uebernommen { background: #e6f4ea; color: #1e6b36; }
.status--freigegeben { background: var(--sfb-blau); color: #fff; }
.status--archiviert, .status--entfallen, .status--abgebrochen { background: var(--sfb-grau); color: #333; }

/* Surface Go (10 Zoll, ca. 1000 px breit mit Tastatur): zweispaltig bleibt, Filter stapelt */
@media (max-width: 64rem) {
  .filter { grid-template-columns: 1fr 1fr; }
  .filter input[type="search"] { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
  .spalten { grid-template-columns: 1fr; }
  /* Kopfzeile auf Handy/schmalem Tablet: Marke und Konto oben, Navigation darunter über die volle Breite (E-023) */
  .kopf { flex-wrap: wrap; height: auto; padding: calc(var(--abstand) * 0.5) var(--abstand); row-gap: 0; }
  .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .kopf__konto > span, .kopf__name-link { display: none; }
  .inhalt { padding: var(--abstand); }
  .zeile--kopf { flex-wrap: wrap; }
}

/* Glocke in der Kopfzeile (K-HIN-010) */
.glocke { position: relative; display: inline-flex; align-items: center; height: 2.5rem; padding: 0 calc(var(--abstand) * 0.5); text-decoration: none; color: var(--text-leise); font-size: 1.25rem; }
.glocke--aktiv { color: var(--sfb-blau); }
.glocke__zahl { position: absolute; top: 0.25rem; right: 0; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 0.5625rem; background: var(--fehler); color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1.125rem; text-align: center; }
.leise { color: var(--text-leise); margin: var(--abstand) 0 0; }
.leise ul { margin: calc(var(--abstand) * 0.5) 0 0; padding-left: 1.25rem; }
.tabelle form { margin: 0; }

/* Freigabe: Stufenanzeige und Auswahl */
.stufe { display: inline-block; padding: 0.125rem calc(var(--abstand) * 0.5); border: 1px solid var(--rahmen); border-radius: var(--radius); }
.stufe--aktiv { border-color: var(--sfb-blau); color: var(--sfb-blau); font-weight: 600; }
.auswahl { display: flex; flex-direction: column; gap: calc(var(--abstand) * 0.5); }
.auswahl__option { display: flex; align-items: center; gap: calc(var(--abstand) * 0.5); font-weight: 400; }
.auswahl__option input { margin: 0; }

/* Fehlerseiten */
.fehlerseite { max-width: 36rem; margin: calc(var(--abstand) * 3) auto; text-align: center; }
.fehlerseite__code { font-size: 3rem; font-weight: 700; color: var(--sfb-grau); margin: 0; line-height: 1; }
.fehlerseite .zeile { justify-content: center; margin-top: var(--abstand); }
.fehlerseite code { background: var(--flaeche); padding: 0.125rem 0.375rem; border-radius: var(--radius); }

/* Anmeldeseite */
.anmeldung { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--abstand); }
.anmeldung__karte { width: 100%; max-width: 26rem; }
.anmeldung__logo { display: block; width: 12rem; height: auto; margin: 0 auto calc(var(--abstand) * 1.5); }
.anmeldung h1 { text-align: center; font-size: 1.375rem; margin-bottom: calc(var(--abstand) * 1.5); }
.anmeldung__version { text-align: center; font-size: 0.75rem; color: var(--text-leise); margin: calc(var(--abstand) * 1.5) 0 0; }
.anmeldung .formular { --beschriftung: 7.5rem; }

/* Startseite */
.start__logo { display: block; width: 16rem; max-width: 100%; height: auto; margin: 0 auto calc(var(--abstand) * 1.5); }
.start__titel { text-align: center; }

/* Schmale Bildschirme: Beschriftung über dem Feld */
@media (max-width: 36rem) {
  .formular { grid-template-columns: minmax(0, 1fr); gap: calc(var(--abstand) * 0.5); }
  .formular label { margin-top: calc(var(--abstand) * 0.5); }
  .formular .formular__aktionen { grid-column: 1; margin-top: var(--abstand); }
  .formular__tastatur { grid-column: 1; }
  .feld-mit-knopf { flex-wrap: wrap; }
  .kopf__name { display: none; }
}

/* Safari/WebKit (E-023): Auswahlfelder sonst mit eigener Höhe und Optik; Pfeil als Hintergrund, überall gleich */
select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6270' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; min-height: var(--feldhoehe); }
input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: var(--sfb-blau); }
@media (max-width: 36rem) {
  .filter { grid-template-columns: 1fr; }
  .feld-paar { grid-template-columns: minmax(0, 1fr) 7rem; }
  .knopf { white-space: nowrap; }
  h1 { font-size: 1.5rem; }
  .kopf__logo { height: 1.75rem; }
  .kopf__marke { gap: 0.5rem; }
  .kopf__version { font-size: 0.6875rem; }
  .kopf__konto { gap: 0.25rem; }
  .kopf__konto .knopf { height: 2.25rem; padding: 0 0.75rem; }
  .glocke { padding: 0 0.25rem; }
}

/* ENTWURF-Seiten (15.10.2026): Siebung erfassen */
.entwurf-band { margin: 0 0 var(--abstand); padding: calc(var(--abstand) * 0.5) var(--abstand); border-radius: var(--radius);
  background: #fff4e5; color: #8a4b00; font-weight: 600; font-size: 0.875rem; }
.leise-inline { color: var(--text-leise); font-weight: 400; font-size: 0.875rem; }
.stark { font-weight: 700; }
.rechts { text-align: right; }
.t-gelb { color: #c27c00; } .t-rot { color: var(--fehler); }
.feld-paar--gleich { grid-template-columns: 1fr 1fr; }
.siebung .karte { margin-bottom: var(--abstand); }
/* Seiten mit breiten Tabellen oder Siebung nutzen die Bildschirmbreite (bis 120rem), Formularseiten bleiben schmal */
.inhalt:has(form.siebung), .inhalt:has(.karte--tabelle) { max-width: 120rem; }
.siebung__haupt { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--abstand); align-items: start; }
.siebtabelle th, .siebtabelle td { vertical-align: middle; }
.siebtabelle tbody th { white-space: nowrap; }
.siebtabelle input { width: 5.5rem; height: 2rem; padding: 0 0.5rem; text-align: right; }
.siebtabelle tr[data-sieb="schale"] th, .siebtabelle tr[data-sieb="schale"] td { border-top: 2px solid var(--rahmen); }
.ampel { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: transparent; }
.ampel--gruen { background: #1e6b36; } .ampel--gelb { background: #c27c00; } .ampel--rot { background: var(--fehler); }
.sieblinie svg { width: 100%; height: auto; display: block; }
@media (max-width: 72rem) { .siebung__haupt { grid-template-columns: minmax(0, 1fr); } }

/* Probenahme je Werk (Entwurf 15.10.2026) */
.werkwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: var(--abstand); }
.werkwahl h2 { margin-top: 0; }
.probenahme-tabelle td { vertical-align: middle; }
.probenahme-tabelle select { width: auto; min-width: 8rem; height: 2rem; }
.probenahme-tabelle tr.aus td { opacity: 0.5; }
.probenahme-tabelle tr.aus td:first-child { opacity: 1; }
input.schmal { width: 6rem; height: 2rem; }
.filter--eins { grid-template-columns: minmax(12rem, 28rem); }

/* Prüfplan Werk × KW (Entwurf 15.10.2026) */
.filter--plan { grid-template-columns: minmax(14rem, 28rem) 12rem 1fr; }
.plan-legende { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; font-size: 0.875rem; color: var(--text-leise); }
.plan-legende .plan { margin-right: 0.25rem; }
.plantabelle th, .plantabelle td { padding: 0.375rem 0.25rem; text-align: center; vertical-align: middle; }
.plantabelle .plan-material { text-align: left; white-space: nowrap; padding-left: 0.75rem; position: sticky; left: 0; background: #fff; }
.plan-kw { font-size: 0.8125rem; color: var(--text-leise); min-width: 2rem; }
.plan-kw--jetzt { color: var(--sfb-blau); box-shadow: inset 0 -3px 0 var(--sfb-blau); }
.plan-zelle { white-space: nowrap; }
.plan { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 4px; vertical-align: middle; margin: 0 1px; }
.plan--fertig { background: #1e6b36; }
.plan--arbeit { background: #8db4e6; }
.plan--rot { background: var(--fehler); }
.plan--faellig { background: #fff; border: 2px solid #c27c00; }
.plan--fehlt { background: repeating-linear-gradient(45deg, #fdecea, #fdecea 3px, #f3b6b0 3px, #f3b6b0 6px); border: 1px solid #e08a82; }
a.plan:hover { outline: 2px solid var(--sfb-blau); outline-offset: 1px; }
.plan-monat { text-align: left !important; white-space: nowrap; padding-left: 0.75rem !important; }
.monat { display: inline-block; font-size: 0.75rem; padding: 0 0.375rem; margin-right: 0.25rem; border-radius: 1rem; background: #fdecea; color: var(--fehler); }
.monat--ok { background: #e6f4ea; color: #1e6b36; }
@media (max-width: 64rem) { .filter--plan { grid-template-columns: 1fr 1fr; } .plan-legende { grid-column: 1 / -1; } }

/* Arbeitsplatz (Startseite, Oberfläche 4) */
.inhalt:has(.kacheln) { max-width: 120rem; }
.start__kopf { align-items: baseline; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--abstand); margin-bottom: calc(var(--abstand) * 1.5); }
.kachel { display: flex; flex-direction: column; border-top: 4px solid var(--sfb-blau); padding: var(--abstand); }
.kachel--warnung { border-top-color: #c27c00; } .kachel--fehler { border-top-color: var(--fehler); } .kachel--ok { border-top-color: #1e6b36; }
.kachel__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand); }
.kachel__kopf h2 { margin: 0; font-size: 1rem; }
.kachel__zahl { font-size: 1.75rem; font-weight: 700; color: var(--sfb-blau); line-height: 1; }
.kachel--fehler .kachel__zahl { color: var(--fehler); } .kachel--warnung .kachel__zahl { color: #8a4b00; } .kachel--ok .kachel__zahl { color: #1e6b36; }
.kachel__liste { list-style: none; margin: calc(var(--abstand) * 0.75) 0 0; padding: 0; flex: 1; }
.kachel__liste li { display: grid; grid-template-columns: 1fr auto; column-gap: 0.5rem; padding: 0.375rem 0; border-bottom: 1px solid var(--flaeche); font-size: 0.9375rem; }
.kachel__liste li:last-child { border-bottom: none; }
.kachel__unter { grid-column: 1; font-size: 0.8125rem; color: var(--text-leise); }
.kachel__zusatz { grid-column: 2; grid-row: 1; font-size: 0.8125rem; color: var(--text-leise); white-space: nowrap; }
.kachel__link { margin-top: calc(var(--abstand) * 0.5); font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--sfb-blau); }
.kachel .leise { margin-top: calc(var(--abstand) * 0.75); }
.start__logo-klein { height: 2.75rem; width: auto; margin-right: var(--abstand); }
.start__titel { margin: 0; }

/* Statistik je Material (Oberfläche 5) */
.statistik-filter { display: flex; flex-wrap: wrap; gap: var(--abstand); align-items: flex-end; margin-bottom: var(--abstand); }
.statistik-filter > label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 500; min-width: 10rem; }
.statistik-filter > label:first-child { min-width: 22rem; }
.statistik-siebe { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 0.375rem 0.75rem; margin: 0; }
.statistik-siebe legend { font-size: 0.8125rem; color: var(--text-leise); padding: 0 0.25rem; }
.statistik-kenn th, .statistik-kenn td { background: var(--flaeche); font-weight: 600; }
.wert-rot { color: var(--fehler); font-weight: 700; background: #fdecea; }
.wert-gelb { background: #fff4e5; }

/* Kundenakte (Oberfläche 6) */
.filter--kunden { grid-template-columns: minmax(12rem, 1fr) auto auto; }
.akte { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr); gap: var(--abstand); align-items: start; }
.akte .karte { margin-bottom: var(--abstand); }
.akte h2 { margin-top: 0; font-size: 1.0625rem; }
.akte__kopf { display: flex; justify-content: space-between; align-items: baseline; padding: calc(var(--abstand) * 0.75) var(--abstand) 0; }
.akte__kopf a { font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.akte__leer { padding: 0 var(--abstand) var(--abstand); }
.person { padding: 0.5rem 0; border-bottom: 1px solid var(--flaeche); }
.person:last-child { border-bottom: none; }
tr.inaktiv td { color: var(--text-leise); }
@media (max-width: 64rem) { .akte { grid-template-columns: minmax(0, 1fr); } }

/* Zeiterfassung Woche (Oberfläche 7) */
.inhalt:has(.wochenraster) { max-width: 120rem; }
.zeit-oben { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--abstand); margin-bottom: var(--abstand); }
.timer { display: flex; gap: var(--abstand); align-items: center; padding: calc(var(--abstand) * 0.75) var(--abstand); }
.timer select { max-width: 28rem; }
.timer--laeuft { border-left: 4px solid #1e6b36; background: #f2faf4; }
.summen { display: flex; gap: calc(var(--abstand) * 2); align-items: center; padding: calc(var(--abstand) * 0.75) calc(var(--abstand) * 1.5); }
.summen div { display: flex; flex-direction: column; } .summen strong { font-size: 1.375rem; }
.t-gruen { color: #1e6b36; }
.zeit-neu { display: grid; grid-template-columns: 8rem 7rem 7rem 5rem minmax(12rem, 1fr) minmax(8rem, 1fr) auto; gap: calc(var(--abstand) * 0.5);
  align-items: center; padding: calc(var(--abstand) * 0.75) var(--abstand); margin-bottom: var(--abstand); }
.wochenraster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, 0.6fr)); gap: calc(var(--abstand) * 0.5); margin-bottom: var(--abstand); }
.tag { padding: calc(var(--abstand) * 0.75); min-height: 9rem; }
.tag--heute { border-color: var(--sfb-blau); box-shadow: inset 0 3px 0 var(--sfb-blau); }
.tag--we { background: #fafbfc; }
.tag__kopf { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; margin-bottom: 0.5rem; }
.tag__summe { margin-left: auto; font-weight: 700; }
.tag__leer { margin: 0; }
.zeitblock { position: relative; border-left: 4px solid var(--sfb-blau); background: var(--flaeche); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.375rem 1.5rem 0.375rem 0.5rem; margin-bottom: 0.375rem; font-size: 0.9375rem; }
.zeitblock form { position: absolute; top: 0.125rem; right: 0.25rem; margin: 0; }
.zeitblock__weg { border: none; background: none; color: var(--text-leise); font-size: 1.125rem; cursor: pointer; line-height: 1; }
.zeitblock__weg:hover { color: var(--fehler); }
.farbpunkt { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; vertical-align: middle; }
@media (max-width: 72rem) { .wochenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zeit-neu { grid-template-columns: 1fr 1fr; } .zeit-oben { grid-template-columns: 1fr; } }

/* Handy-Breite: lange Auswahltexte dürfen die Seite nicht verbreitern (geprüft 15.10.2026 bei 375 px) */
.zeit-neu > *, .timer > *, .statistik-filter > * { min-width: 0; }
.timer { flex-wrap: wrap; } .timer select { flex: 1 1 14rem; }
.summen { flex-wrap: wrap; }
@media (max-width: 36rem) {
  .statistik-filter > label, .statistik-filter > label:first-child { min-width: 0; flex: 1 1 100%; }
  .wochenraster { grid-template-columns: minmax(0, 1fr); }
  .zeit-neu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zeit-neu select[name="projekt"], .zeit-neu input[name="notiz"], .zeit-neu button { grid-column: 1 / -1; }
}
.zeit-projekte td { white-space: normal; }
.zeit-projekte td.rechts { white-space: nowrap; }

/* Kacheln: Einträge einzeilig, lange Bezeichnungen mit … */
.kachel__liste li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kachel__liste li { grid-template-columns: minmax(0, 1fr) auto; }