/* Aufbau, Tabellen, Formulare. Enthält keinen einzigen Farbwert — nur var(--…) aus marke.css.
   Ein zweiter Kunde tauscht marke.css aus, dieser Datei sieht man den Wechsel nicht an. */

/* Roboto ist eine variable Schrift: eine Datei deckt die Schnitte 400 (normal) und 500
   (Überschriften, aktive Navigation) ab. Der Bereich im font-weight sagt dem Browser, dass er
   innerhalb dieser Spanne die Achse der Datei nutzen soll, statt einen Schnitt nachzuahmen. */
@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/roboto-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Lokal ausgeliefert (kein Google-Aufruf) — solange die Dateien in wwwroot/fonts fehlen, greift
     der Rückfall auf die Systemschrift des Mac; das @font-face oben löst dann einfach nie auf. */
  --schrift: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --schrift-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
}

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

.text-leise {
  font-size: 13px;
  color: var(--text-leise);
}

/* Nur für Dinge, die man Zeichen für Zeichen vergleicht: Personalnummern, Artikelnummern,
   Fassungsnummern, Kennzeichen, Hash-Anfänge. Nie als Stilmittel, nie für Beschriftungen. */
.kennung {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--marke-dunkel);
}

/* Sichtbarer Tastaturfokus überall — keine Ausnahme. */
:focus-visible {
  outline: 2px solid var(--marke-dunkel);
  outline-offset: 2px;
}

/* Die Ausnahme, die keine ist: Blazor setzt nach jedem Seitenwechsel den Fokus auf die Überschrift
   (FocusOnNavigate, tabindex="-1"), damit Vorlesesoftware den neuen Titel ansagt. Das ist kein
   Tastaturfokus, auf den jemand zusteuert — ein Rahmen um die Überschrift sähe nur nach Fehler aus. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Die Knopfform hängt an den Klassen, nicht nur am Element: Ein Link, der wie ein Knopf aussehen
   soll ("Neu anlegen" führt auf eine eigene Seite), bekommt sonst nur die Farbe und behält die
   Unterstreichung. */
button,
.schaltflaeche,
.schaltflaeche-hervorgehoben {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  background: var(--flaeche-abgesetzt);
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  padding: 0.5em 1em;
  cursor: pointer;
}

button:hover,
.schaltflaeche:hover,
.schaltflaeche-hervorgehoben:hover {
  border-color: var(--marke-dunkel);
}

.schaltflaeche-hervorgehoben {
  background: var(--marke);
  color: var(--text);
  border-color: var(--marke-dunkel);
}

/* Der Rahmen ist hier schon dunkel, der Hover-Hinweis der übrigen Knöpfe griffe also ins Leere. */
.schaltflaeche-hervorgehoben:hover {
  background: color-mix(in srgb, var(--marke) 82%, var(--marke-dunkel));
}

/* Gerüst: Kopfband über voller Breite, darunter Seitenleiste (fest) und Arbeitsfläche (Rest). */
.buero {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.kopfband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.5rem 1.25rem;
  background: var(--marke);
  color: var(--text);
}

.kopfband-marke {
  display: flex;
  align-items: center;
}

/* Die Bildmarke kommt als Hintergrund aus marke.css (--logo-auf-marke, --logo-auf-flaeche): So
   bleibt die Wahl der Datei — SVG oder PNG, hell oder dunkel — beim Kunden und nicht im Kern. */
.logo {
  display: block;
  background: center / contain no-repeat;
}

.logo-auf-marke {
  width: var(--logo-groesse-kopfband);
  height: var(--logo-groesse-kopfband);
  background-image: var(--logo-auf-marke);
}

.logo-auf-flaeche {
  width: var(--logo-groesse-flaeche);
  height: var(--logo-groesse-flaeche);
  background-image: var(--logo-auf-flaeche);
}

.kopfband .angemeldet {
  color: var(--text);
}

.buero-inhalt {
  display: flex;
  flex: 1;
  min-height: 0;
}

.seitenleiste {
  flex: 0 0 220px;
  width: 220px;
  background: var(--flaeche-abgesetzt);
  padding: 1em 0;
}

.arbeitsflaeche {
  flex: 1;
  min-width: 0;
  padding: 1.5em 2em;
}

/* Höchstbreite des Inhalts: Auf einem breiten Bildschirm (2000 px und mehr) liefen Seitenkopf,
   Tabellen und Schaltflächen sonst bis an den rechten Rand, weit weg von dem, worauf sie sich
   beziehen. Links bündig, nicht zentriert — die Seitenleiste bleibt der feste Anker. */
.arbeitsflaeche-inhalt {
  max-width: 80rem;
}

/* Anmelde-/Fehlerseiten (KeinZugang, NichtErlaubt, Fehler): helle Seite, ein schmaler Streifen in
   Markengrün oben als Klammer zum Büro, darunter Bildmarke und Nachricht in einer Lesespalte. */
.anonym {
  min-height: 100%;
  border-top: 6px solid var(--marke);
}

.anonym-inhalt {
  max-width: 34rem;
  margin: 0 auto;
  padding: 12vh 1.5rem 3rem;
}

.anonym-inhalt .logo {
  margin-bottom: 2.5rem;
}

.anonym-inhalt h1 {
  margin-bottom: 0.4em;
}

/* Navigation */
.navigation ul {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}

.navigation-abgesetzt {
  border-top: 1px solid var(--flaeche);
  padding-top: 1em;
}

.navigation a {
  display: block;
  padding: 0.5em 1.25em;
  color: var(--text);
  text-decoration: none;
}

.navigation a:hover {
  background: var(--flaeche);
}

.navigation a.aktiv {
  background: var(--marke);
  color: var(--text);
  font-weight: 500;
}

/* Tabellen: dicht, weil Datenpflege Lesearbeit ist. Zahlen bleiben untereinander stehen. */
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: left;
  padding: 0.4em 0.75em;
  line-height: 1.3;
}

tbody tr:nth-child(even) {
  background: var(--flaeche-abgesetzt);
}

th {
  font-weight: 500;
  border-bottom: 1px solid var(--text-leise);
}

/* Zustände sind an der Zeile selbst ablesbar — nie nur an der Farbe (immer auch Text/Symbol). */
.zustand-konflikt {
  color: var(--warnung);
}

.zustand-abgelehnt,
.zustand-gesperrt {
  color: var(--fehler);
}

/* Rechtsbündige Zahlenspalten (Entfernung, Preis) — bleiben durch font-variant-numeric auf table
   ohnehin schon untereinander stehen, .rechts richtet zusätzlich die Spalte selbst aus. */
.rechts {
  text-align: right;
}

/* Stammdatenlisten (MasterDataTable): Suchfeld, Tabelle, Archiv-Abschnitt. */
.liste .listenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1em;
}

.liste .suche {
  font: inherit;
  padding: 0.4em 0.75em;
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  min-width: 16em;
}

.liste .leer {
  color: var(--text-leise);
}

/* Filterleiste über der Tabelle (MasterDataTable.Filters): Umschalter, der gewählte trägt die
   Markenfarbe wie der hervorgehobene Knopf; die Anzahl steht leise dahinter. */
.liste .filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: -0.25em 0 1em;
}

.liste .filterleiste .filter {
  padding: 0.3em 0.8em;
  border-radius: 999px;
  font-weight: 400;
}

.liste .filterleiste .filter[aria-pressed="true"] {
  background: var(--marke);
  border-color: var(--marke-dunkel);
  font-weight: 500;
}

.liste .filterleiste .anzahl {
  color: var(--text-leise);
  margin-left: 0.25em;
}

.liste .filterleiste .filter[aria-pressed="true"] .anzahl {
  color: var(--text);
}

/* Trefferstelle der Suche (SearchHighlight): ein blasser Hauch der Markenfarbe hinter dem Text, die
   Schriftfarbe bleibt, wie sie ist — so bleibt auch ein Verweis in der ersten Spalte als Verweis lesbar. */
.liste mark.treffer {
  background: color-mix(in srgb, var(--marke) 35%, transparent);
  color: inherit;
  border-radius: 2px;
}

.liste .hinweis {
  color: var(--text-leise);
  font-size: 13px;
  margin: -0.5em 0 1em;
}

/* Nur die erste Spalte einer Zeile ist ein Verweis (echtes <a>, sichtbarer Linktext) — bewusst keine
   über die ganze Zeile gelegte, unsichtbare Verknüpfung mehr: die verhinderte das Markieren und
   Kopieren von Zellentext, etwa einer Personalnummer (Nachbesserung aus der Prüfung von Task 6). */
.liste td:first-child a {
  color: var(--marke-dunkel);
  text-decoration: none;
}

.liste td:first-child a:hover {
  text-decoration: underline;
}

.liste .archiv {
  margin-top: 1.5em;
}

.liste .archiv summary {
  cursor: pointer;
  color: var(--text-leise);
  padding: 0.5em 0;
}

.liste .archiv tbody tr.archiviert {
  color: var(--text-leise);
}

/* Zustand wird auch benannt, nicht nur blass dargestellt (Plan, Gestaltungsabschnitt). */
.abzeichen-archiviert {
  font-size: 13px;
  color: var(--text-leise);
  border: 1px solid var(--text-leise);
  border-radius: 3px;
  padding: 0.1em 0.5em;
}

.letzte-aenderungen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.letzte-aenderungen li {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  padding: 0.35em 0;
}

/* Fehlertexte: der Fehlercode steht im title-Attribut des einzelnen Eintrags, nicht im Fließtext. */
ul.fehler {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  color: var(--fehler);
}

ul.fehler li {
  padding: 0.35em 0;
}

/* Seitenkopf einer Liste oder eines Bearbeitungsformulars. Der Rückverweis steht über dem Titel
   statt klein daneben: So muss er sich keine Grundlinie mit einer 30-px-Überschrift teilen, und er
   ist groß genug, um ihn zu treffen. Die Schaltflächen rechts sitzen auf der Höhe des Titels. */
.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1.5rem;
}

.seitenkopf h1 {
  margin: 0;
}

.seitenkopf-titel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.seitenkopf-rueckverweis {
  font-size: 14px;
  text-decoration: none;
}

.seitenkopf-rueckverweis:hover {
  text-decoration: underline;
}

.seitenkopf-schaltflaechen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* Fassungsnummer im Kopf (Gestaltungsplan: die Bearbeitungsseite zeigt sie dort, nicht nur im
   Streifen weiter unten) — als ruhige Beschriftung vor den Knöpfen, nicht als halber Knopf. */
.seitenkopf-fassung {
  margin-right: 0.6rem;
  font-size: 13px;
  color: var(--text-leise);
}

/* Bearbeitungsseite (MasterDataEditor, Task 7): Formular links, Fassungsstreifen rechts — als
   eigene Seite, nicht als Überlagerung (Gestaltungsplan). Das Formular hat eine feste Höchstbreite,
   der Streifen steht mit festem Abstand direkt daneben statt am rechten Bildschirmrand; die ganze
   Bearbeitung ist so breit wie beides zusammen, damit auch die Knöpfe im Kopf über dem Streifen
   enden. Bricht auf schmalen Fenstern untereinander. */
.bearbeitung {
  max-width: 64rem;
}

.bearbeitungsseite {
  display: grid;
  grid-template-columns: minmax(0, 38rem) minmax(15rem, 22rem);
  justify-content: space-between;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 62em) {
  .bearbeitungsseite {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fassungsstreifen {
  padding-left: 1.5rem;
  border-left: 1px solid var(--flaeche-abgesetzt);
}

.fassungsstreifen h2 {
  font-size: 18px;
  margin: 0 0 1rem;
}

.formular .feld {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin-bottom: 1em;
  max-width: 28em;
}

.formular .feld-gruppe {
  flex-direction: row;
  gap: 1em;
  max-width: none;
}

.formular .feld-gruppe > div {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

/* Ein Knopf in einer Feldspalte (z.B. „Profil eintragen", „Aufnehmen") nimmt seine eigene Breite,
   statt als einziges Element auf die volle Breite gezogen zu werden. */
.formular .feld > button {
  align-self: flex-start;
}

.formular label {
  font-size: 13px;
  color: var(--text-leise);
}

.formular select {
  min-width: 12em;
}

/* Eingabefelder außerhalb eines Formulars (z.B. der Sperrgrund in der Mac-Übersicht) bekommen
   dieselbe Form wie im Formular, statt als nackte Browser-Vorgabe dazustehen. */
input[type="text"],
input[type="date"],
input[type="number"],
input[type="search"] {
  font: inherit;
  padding: 0.4em 0.6em;
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  background: var(--flaeche);
  color: var(--text);
}

.formular input,
.formular select {
  font: inherit;
  padding: 0.4em 0.6em;
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  background: var(--flaeche);
  color: var(--text);
}

.formular input:disabled,
.formular select:disabled {
  background: var(--flaeche-abgesetzt);
  color: var(--text-leise);
}

.hinweis-gespeichert {
  color: var(--marke-dunkel);
}

/* Rückfrage vor dem Archivieren (Plan: "fragt einmal nach") — abgesetzt, aber ohne eigene Farbe:
   Archivieren ist keine Warnung, sondern ein normaler, wenn auch endgültiger Arbeitsschritt. */
.archiv-rueckfrage {
  background: var(--flaeche-abgesetzt);
  border-radius: 4px;
  padding: 1em;
  margin-bottom: 1em;
}

/* Ein Konflikt ist eine Lage, keine Warnfarbe für die ganze Seite — nur der Hinweistext selbst
   sticht in --warnung hervor, die daneben gezeigte Fassung bleibt sachlich wie das übrige Formular. */
.konflikt {
  border: 1px solid var(--warnung);
  border-radius: 4px;
  padding: 1em;
  margin-bottom: 1.5em;
}

.konflikt-hinweis {
  color: var(--warnung);
  font-weight: 500;
}

.konflikt-aktionen {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
  margin-top: 1em;
}

.konflikt-aktionen p {
  margin: 0.5em 0 0;
  max-width: 24em;
}

/* Fassungsstreifen (VersionTrail): senkrechte Spur mit gefülltem Punkt für die aktuelle Fassung,
   offenen für die früheren — das eine besondere Element dieser Oberfläche (Gestaltungsplan). */
.fassungsstreifen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fassungsstreifen-eintrag {
  display: flex;
  gap: 0.75em;
  position: relative;
  padding-bottom: 1.25em;
}

/* Die Linie zwischen den Punkten — an jedem Eintrag außer dem letzten, damit sie nicht über den
   letzten Punkt hinausragt. */
.fassungsstreifen-eintrag:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1em;
  bottom: 0;
  width: 2px;
  background: var(--flaeche-abgesetzt);
}

.fassungsstreifen-punkt {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 0.3em;
  border-radius: 50%;
  border: 2px solid var(--marke-dunkel);
  background: var(--flaeche);
  z-index: 1;
}

.fassungsstreifen-punkt-aktuell {
  background: var(--marke-dunkel);
}

.fassungsstreifen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  margin: 0 0 0.25em;
}

.abzeichen-archiviert-streifen {
  font-size: 13px;
  color: var(--warnung);
  border: 1px solid var(--warnung);
  border-radius: 3px;
  padding: 0.1em 0.5em;
}

/* Die einzige Bewegung der ganzen Oberfläche: eine neu gespeicherte Fassung blendet im Streifen kurz
   auf, als Bestätigung, dass das Speichern angekommen ist — respektiert prefers-reduced-motion über
   die allgemeine Regel weiter unten. */
.fassungsstreifen-neu {
  animation: fassung-aufblenden 700ms ease-out;
}

@keyframes fassung-aufblenden {
  from {
    background: var(--flaeche-abgesetzt);
  }
  to {
    background: transparent;
  }
}

/* Zeitlich gültige Zuordnungen (Task 8): Vergütungsprofile eines Mitarbeiters, Besetzung eines
   Trupps. Die Zeitscheibe, die heute gilt, ist abgesetzt — aber nicht nur farblich: Daneben steht
   ausgeschrieben "gilt heute". */
.zeitscheiben-block,
.formular .zeitscheiben-block {
  max-width: none;
  border-top: 1px solid var(--flaeche-abgesetzt);
  padding-top: 1em;
  margin-top: 1.5em;
}

.zeitscheiben-block h2 {
  font-size: 16px;
  margin: 0 0 0.25em;
}

.zeitscheiben {
  list-style: none;
  margin: 0.75em 0;
  padding: 0;
}

/* Jede Zeitscheibe auf festen Spalten — Zeitraum, Wert, „gilt heute" —, damit die Zeilen
   untereinander stehen, statt je nach Länge des Namens anders umzubrechen. Eine Handlung (etwa
   „Herausnehmen zum …") bekommt eine eigene Zeile unter dem Wert, statt die Spalten zu sprengen. */
.zeitscheibe {
  display: grid;
  grid-template-columns: 13.5em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4em 1em;
  padding: 0.45em 0.75em;
  border-left: 3px solid var(--flaeche-abgesetzt);
}

.zeitscheibe + .zeitscheibe {
  margin-top: 2px;
}

.zeitscheibe-wert {
  grid-column: 2;
}

.zeitscheibe-gilt {
  border-left-color: var(--marke-dunkel);
  background: var(--flaeche-abgesetzt);
}

.zeitscheibe-zeitraum {
  grid-column: 1;
  font-size: 13px;
  color: var(--text-leise);
}

.zeitscheibe-heute {
  grid-column: 3;
  font-size: 13px;
  color: var(--marke-dunkel);
}

.zeitscheibe-aktionen {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.hinweis-leer {
  color: var(--text-leise);
}

/* Eine Ansage, die kein Fehler ist: ein rückwirkendes Datum, eine fehlende Entfernung. Dieselbe
   Farbe wie ein Konflikthinweis, nicht die Fehlerfarbe — abgewiesen wird erst beim Speichern. */
.hinweis-warnung {
  color: var(--warnung);
}

/* Die Entfernung an der Baustelle: beide Wege sichtbar nebeneinander (Task 8). Ein fieldset, damit
   die Gruppe auch für Vorlesesoftware eine Gruppe ist und die Legende sie benennt. */
.entfernung {
  max-width: none;
  border: 1px solid var(--flaeche-abgesetzt);
  border-radius: 4px;
  padding: 0.75em 1em;
}

.entfernung legend {
  font-size: 13px;
  color: var(--text-leise);
  padding: 0 0.4em;
}

.entfernung-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin: 0.5em 0 1em;
}

.entfernung-wege label {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* Mächtig und selten: der abweichende Regelsatz einer Baustelle, eingeklappt. */
.regelsatz-abweichung {
  max-width: none;
}

.regelsatz-abweichung summary {
  cursor: pointer;
  padding: 0.4em 0;
}

/* Für Beschriftungen, die jedes Feld braucht, aber nicht jede Zeile zeigen soll (z.B. das
   Enddatum in jeder Zeile der Truppbesetzung) — sichtbar für Vorlesesoftware, nicht auf dem Schirm.
   Kein display:none: das nähme sie auch der Vorlesesoftware. */
.verborgen-beschriftung {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keine Bewegung außer dort, wo sich wirklich etwas ändert (z.B. eine neu gespeicherte Fassung
   im Fassungsstreifen) — und auch die respektiert diese Einstellung. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Die zweite Frage kurz vor dem Speichern (Task 10). Kein abgedunkelter Bildschirm und kein
   schwebendes Fenster: Der Kasten steht im Fluss der Seite, direkt über dem Formular, damit
   sichtbar bleibt, woran gearbeitet wird. Der Rahmen in --warnung sagt, dass hier etwas hängt —
   die Schrift bleibt sachlich, es ist ja kein Fehler. */
.bestaetigung {
  border: 1px solid var(--warnung);
  border-radius: 4px;
  padding: 1em;
  margin-bottom: 1em;
  max-width: 44em;
}

.bestaetigung h2 {
  margin-top: 0;
}

.bestaetigung-frage {
  margin-bottom: 0.5em;
}

/* Die Änderungen einzeln, nicht als Fließtext: Wer bestätigt, soll sie zählen können. */
.bestaetigung-aenderungen {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.bestaetigung-aktionen {
  display: flex;
  gap: 0.75em;
  margin-top: 1em;
}

/* Startseite (Start.razor). Zwei Aufgaben, zwei Tonlagen: „Zu erledigen" darf auffallen — in
   --warnung, der Farbe für Ansagen, die kein Fehler sind —, alles darunter bleibt ruhig und
   erklärt nur. Das eine Bild ist die Entfernungsleiste; Karten, Schatten und Verläufe gibt es
   bewusst nicht. */
.startseite {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.startseite h2 {
  font-size: 18px;
  margin: 0 0 0.75rem;
}

.start-kopf h1 {
  margin: 0;
}

.start-kopf p {
  margin: 0.2em 0 0;
}

/* Kopf eines Abschnitts: Titel links, die eine erklärende Zahl rechts auf derselben Grundlinie. */
.start-abschnittkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.25rem;
}

.start-abschnittkopf h2 {
  margin: 0;
}

.start-abschnittkopf p {
  margin: 0;
}

/* Zu erledigen: je Lücke eine Zeile mit der Anzahl groß davor und den betroffenen Datensätzen als
   Verweise dahinter — die Zahl sagt, wie viel, die Namen sagen, wo. */
.aufgaben {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.aufgabe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--warnung);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--warnung) 6%, var(--flaeche));
}

.aufgabe-zahl {
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  min-width: 1.2ch;
  color: var(--warnung);
  font-variant-numeric: tabular-nums;
}

.aufgabe-titel {
  margin: 0;
  font-weight: 500;
}

.aufgabe-folge {
  margin: 0.15em 0 0.6em;
  font-size: 13px;
  color: var(--text-leise);
}

.aufgabe-ziele {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 1em;
}

.aufgabe-ziele a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--marke-dunkel) 35%, transparent);
  text-underline-offset: 0.2em;
}

.aufgabe-ziele a:hover {
  text-decoration-color: var(--marke-dunkel);
}

.aufgabe-ziele .aufgabe-weitere {
  color: var(--text-leise);
}

/* Nichts zu tun: ein ruhiger Satz statt eines leeren Kastens. */
.aufgaben-erledigt {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  padding: 0.85rem 1.25rem;
  border-left: 4px solid var(--marke);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--marke) 12%, var(--flaeche));
}

.aufgaben-erledigt-zeichen {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--marke);
  color: var(--text);
  font-weight: 500;
}

/* Betrieb auf einen Blick: links die Besetzung, rechts Baustellen und Bestand. */
.start-betrieb {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 68em) {
  .start-betrieb {
    grid-template-columns: minmax(0, 1fr);
  }
}

.start-spalte {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Tagesbesetzung: ein Trupp je Zeile, Stärke rechtsbündig, die Menschen darunter im Fließtext —
   der Vorarbeiter vorn und kräftiger. */
.tagesbesetzung {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trupp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1em 1em;
  padding: 0.6em 0;
  border-top: 1px solid var(--flaeche-abgesetzt);
}

.trupp-name {
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

a.trupp-name:hover {
  text-decoration: underline;
}

.trupp-staerke {
  font-weight: 500;
  color: var(--marke-dunkel);
  font-variant-numeric: tabular-nums;
}

.trupp-menschen {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  color: var(--text-leise);
}

.mensch + .mensch::before {
  content: ", ";
}

.mensch-vorarbeiter {
  color: var(--text);
  font-weight: 500;
}

.trupp-ohne-vorarbeiter {
  margin-left: 0.75em;
  font-size: 13px;
  color: var(--warnung);
}

.trupp-ohne {
  border-top-style: dashed;
  border-top-color: var(--text-leise);
}

.trupp-ohne .trupp-name,
.trupp-ohne .trupp-staerke {
  color: var(--text-leise);
}

/* Entfernungsleiste: Name, Bahn mit Balken, Kilometer — und quer darüber die Schwelle als
   gestrichelte Linie (--schwelle, gesetzt von EntfernungsLeiste.razor). */
.entfernungsleiste-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.25em;
  margin: 0 0 0.75em;
  font-size: 13px;
}

.legende-nah::before,
.legende-weit::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.4em;
  border-radius: 2px;
  vertical-align: -0.05em;
  background: color-mix(in srgb, var(--text-leise) 35%, var(--flaeche));
}

.legende-weit::before {
  background: var(--marke);
}

.entfernungsleiste-zeilen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leiste-zeile,
.entfernungsleiste-achse {
  display: grid;
  grid-template-columns: minmax(7rem, 13rem) minmax(4rem, 1fr) 7em;
  align-items: center;
  gap: 0.75em;
}

.leiste-zeile {
  padding: 0.2em 0;
  font-size: 14px;
}

.leiste-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  text-decoration: none;
}

.leiste-name:hover {
  text-decoration: underline;
}

.leiste-bahn {
  position: relative;
  height: 10px;
}

.entfernungsleiste-mit-schwelle .leiste-bahn::after {
  content: "";
  position: absolute;
  left: var(--schwelle);
  top: -5px;
  bottom: -5px;
  border-left: 2px dashed var(--marke-dunkel);
}

.leiste-balken {
  display: block;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--text-leise) 35%, var(--flaeche));
}

.leiste-weit .leiste-balken {
  background: var(--marke);
}

.leiste-km {
  text-align: right;
  white-space: nowrap;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.leiste-weit .leiste-km {
  color: var(--text);
  font-weight: 500;
}

.leiste-ohne .leiste-bahn {
  height: 0;
  border-top: 2px dotted var(--warnung);
}

.leiste-ohne .leiste-km {
  font-size: 13px;
  color: var(--warnung);
}

.entfernungsleiste-achse {
  margin: 0.35em 0 0;
  font-size: 12px;
  color: var(--text-leise);
}

.achse-bahn {
  position: relative;
  height: 1.3em;
}

.achse-null {
  position: absolute;
  left: 0;
}

.achse-schwelle {
  position: absolute;
  left: var(--schwelle);
  transform: translateX(-50%);
  color: var(--marke-dunkel);
  font-weight: 500;
  white-space: nowrap;
}

/* Geräte und Kunden: vier Zahlen nebeneinander, jede führt auf ihre Liste. */
.bestand {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}

.bestand > div {
  padding-top: 0.5em;
  border-top: 1px solid var(--flaeche-abgesetzt);
}

.bestand dt {
  font-size: 13px;
}

.bestand dt a {
  color: var(--text-leise);
}

.bestand dd {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Zuletzt geändert: Art, Name, Zeitpunkt — als Zeilen mit gleicher Spaltenkante. */
.zuletzt {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 24rem;
  column-gap: 2.5rem;
}

.zuletzt li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 1em;
  align-items: baseline;
  padding: 0.45em 0;
  border-top: 1px solid var(--flaeche-abgesetzt);
}

.zuletzt-art,
.zuletzt-wann {
  font-size: 13px;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.zuletzt a {
  text-decoration: none;
}

.zuletzt a:hover {
  text-decoration: underline;
}