/* Verwaltungsportal ARD Grenchen
   ---------------------------------------------------------------------
   Die Formsprache stammt von ardgrenchen.ch und ist dort begruendet:
   weisse Buehnen auf hellgrauem Grund, grosse weiche Radien, Haarlinien
   statt Kaesten, ein Blau fuer alles Farbige, Gelb nur fuer den Notruf.

   Was hier dazukommt, ist die Uebersetzung dieser Sprache in ein
   Arbeitswerkzeug. Eine Auftrittsseite darf atmen; ein Portal, in dem
   jemand zwischen zwei Einsaetzen einen Mangel meldet, muss dicht sein
   und trotzdem ruhig wirken. Deshalb sind Abstaende und Schriftgrade
   kleiner als draussen, die Radien bleiben.

   Die eine Erweiterung der Farbregel: Gelb bedeutet hier «eine Handlung
   steht aus». Abholbereites Material, ein unquittierter Rapport. Es ist
   damit nach wie vor eine Angabe und keine Dekoration, und es kommt
   nirgends sonst vor.
*/

/* ── Schriften ──────────────────────────────────────────────────────── */

/* Die Pfade sind bewusst relativ zur Datei. Laeuft das Portal unter
   einem Pfad wie «/verwaltungsportal/demo», setzt die Schicht davor ihn
   zwar in jedes href und src der Seite ein, nicht aber in ein url() im
   Stylesheet. Relativ gelesen stimmt er in beiden Faellen. */
@font-face {
  font-family: 'Archivo';
  src: url('schriften/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('schriften/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Azeret Mono';
  src: url('schriften/azeret-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ── Marken ─────────────────────────────────────────────────────────── */

:root {
  --grund: #f1f1ef;
  --buehne: #ffffff;

  --tinte: #16181a;
  --tinte-leise: #5a5f66;
  --tinte-haarlinie: #d8d8d3;
  --tinte-zart: #e6e6e1;

  --blau: #2c529d;
  --blau-tief: #1f3d73;
  --blau-hauch: #edf1f9;
  --gelb: #efea62;
  --gelb-tief: #4a4a2f;

  /* Die Belastung ist die einzige Stelle mit Grün und Rot. Gedeckt gehalten,
     damit sie neben dem Gelb der Handlung nicht lauter wird als diese: Gelb
     verlangt etwas, die Belastung berichtet nur. */
  --ruhig: #3f7a55;
  --ruhig-hauch: #eef5f0;
  --hoch: #b03a2b;
  --hoch-hauch: #fbefed;
  /* «Normal» ist der Normalfall und soll nichts behaupten. Ein eigener
     Name auf neutralem Grau, damit eine Belastungsflaeche nicht auf eine
     Linienfarbe zeigt und damit zwei Graustufen nicht fuer entgegengesetzte
     Aussagen stehen: «normal» hell, «ueberlastet» volle Tinte. */
  --last-normal: #d8d8d3;
  --ueberlastet: #16181a;
  --ueberlastet-hauch: #ebebe8;

  --r-buehne: 28px;
  --r-blatt: 18px;
  --r-feld: 10px;
  --r-pille: 999px;

  --teilung: 7px;
  --gruppe: 35px;
  --bahn: 1440px;

  --schwung: cubic-bezier(0.16, 1, 0.3, 1);

  /* Dauern nach der Spezifikation. Nichts dauert laenger als 600ms; was
     laenger braucht, bekommt eine Ladeanzeige statt einer Bewegung. */
  --zeit-farbe: 120ms;
  --zeit-mass: 180ms;
  --zeit-zeile: 220ms;
  --zeit-dialog: 260ms;
  --zeit-flug: 600ms;
  --schatten: 0 1px 2px rgba(22, 24, 26, 0.05);
  --schatten-hoch: 0 6px 24px -12px rgba(22, 24, 26, 0.22);

  color-scheme: light;
  accent-color: var(--blau);
}

/* Eigenes CSS schlaegt das eingebaute hidden. Gehoert an den Anfang:
   .karte setzt display:flex, und damit stand jedes zugeklappte Formular
   offen da. */
[hidden] {
  display: none !important;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--tinte);
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg, picture {
  display: block;
  max-width: 100%;
}

/* Verweisfarben laufen ueber zwei Marken, damit gefuellte Flaechen sie
   umsetzen koennen. Ohne das zieht a:hover die Schrift auf einer blauen
   Flaeche nach Blau-tief, und Blau-tief auf Blau traegt 1.4:1. */
a {
  color: var(--verweis, var(--blau));
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
  transition: color var(--zeit-farbe) ease-out;
}

a:hover {
  color: var(--verweis-an, var(--blau-tief));
  text-decoration: underline;
}

/* Jede Flaeche, die eigene Schrift traegt, vererbt sie an ihre Verweise. */
.pille--blau,
.zeichen--blau,
.zeichen--betrieb,
.zeichen--handlung,
.termin,
.meldung,
.filter [aria-current="true"],
.umschalter [aria-current="true"],
.reiter [aria-current="page"] {
  --verweis: currentColor;
  --verweis-an: currentColor;
}

/* ── Die Flaechen, die der Browser stellt ───────────────────────────── */

::selection {
  background: var(--blau);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Der Ring wird nie entfernt, auch nicht auf gefuellten Flaechen. Dort
   traegt er sich schlecht gegen Blau, deshalb bekommt er einen hellen
   Saum darunter. */
.pille--blau:focus-visible,
.umschalter [aria-current="true"]:focus-visible {
  outline-color: var(--tinte);
  box-shadow: 0 0 0 4px var(--blau-hauch);
}

/* Fokus innerhalb einer Zeile darf nicht ueber den Rand hinaus leuchten,
   sonst schneidet ihn die Tabelle ab. */
tbody :focus-visible,
.zeile :focus-visible {
  outline-offset: 1px;
}

@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: var(--blau) var(--grund);
    scrollbar-width: thin;
  }
}

input, textarea, select {
  caret-color: var(--blau);
}

/* Zahlen in Listen und Tabellen stehen untereinander. Ohne das tanzen
   Betraege und Einsatzzahlen, sobald eine Eins darunter ist. */
.zahl,
td,
.tabelle,
input[type='number'] {
  font-variant-numeric: tabular-nums;
}

/* ── Die Minutenteilung ─────────────────────────────────────────────── */

/* Das tragende Element der Marke: eine feine Strichskala aus zwei Ebenen.
   Draussen sitzt sie an der Oberkante jeder Buehne. Hier sitzt sie auf dem
   Kopf und auf dem Anmeldeblatt, nicht auf jeder Karte: bei vierzehn
   Karten auf einer Seite waere sie Tapete statt Zeichen. */
.skala {
  height: 11px;
  background-image:
    repeating-linear-gradient(90deg, #c6c6c0 0 1px, transparent 1px 70px),
    repeating-linear-gradient(90deg, var(--tinte-zart) 0 1px, transparent 1px 14px);
  background-size: 70px 11px, 14px 6px;
  background-repeat: repeat-x, repeat-x;
  background-position: top left, top left;
  flex: none;
}

/* ── Gerüst ─────────────────────────────────────────────────────────── */

.rumpf {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100vh;
}

.kopf {
  background: var(--buehne);
  border-radius: var(--r-buehne);
  box-shadow: var(--schatten);
  overflow: hidden;
  flex: none;
}

.kopf__band {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 11px 22px 13px;
}

.marke {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  flex: none;
}

.marke:hover {
  color: inherit;
}

.marke__stern {
  width: 26px;
  height: 26px;
  color: var(--blau);
}

.marke__stab {
  stroke: var(--buehne);
}

.marke__text {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.marke__kurz {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.marke__ort {
  font-size: 13.5px;
  color: var(--tinte-leise);
}

.navigation {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.navigation a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--r-pille);
  font-size: 13.5px;
  color: var(--tinte-leise);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--zeit-farbe) ease-out,
    color var(--zeit-farbe) ease-out;
}

.navigation a:hover {
  background: var(--grund);
  color: var(--tinte);
  text-decoration: none;
}

.navigation a[aria-current='page'] {
  background: var(--grund);
  color: var(--tinte);
  font-weight: 500;
}

/* Ein unquittierter Rapport oder ein betriebsrelevanter Mangel meldet sich
   im Menue. Der Punkt traegt eine Angabe, deshalb darf er farbig sein. */
.navigation a[data-offen]::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: var(--r-pille);
  background: var(--blau);
  vertical-align: 1px;
}

.navigation a[data-offen='handlung']::after {
  background: var(--gelb);
  outline: 1px solid rgba(22, 24, 26, 0.25);
}

.konto {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  text-decoration: none;
  color: inherit;
}

.konto__zeichen {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pille);
  background: var(--grund);
  border: 1px solid var(--tinte-haarlinie);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinte-leise);
  flex: none;
}

.konto__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.konto__name {
  font-size: 13px;
  font-weight: 500;
}

.konto__rolle {
  font-size: 12px;
  color: var(--tinte-leise);
}

/* ── Titelzeile ─────────────────────────────────────────────────────── */

.titelzeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding: 0 6px;
  flex: none;
}

.titelzeile__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.625rem);
  font-weight: 380;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.untertitel {
  font-size: 14px;
  color: var(--tinte-leise);
  max-width: 68ch;
}

.titelzeile__werkzeug {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Der Einstieg zum Schreiben steht beim Datum, bleibt aber eine eigene
   Gruppe. Ohne das teilten sich Pfeile, Datum und Schichtknoepfe auf dem
   Telefon dieselbe Breite, weil `.titelzeile__werkzeug` dort auf volle
   Breite geht und seine Pillen auf `flex: 1 1 auto` stehen: Aus «Tag» und
   «Nacht» wuerden zwei gleich breite Stummel neben einem gestauchten Datum.
   Als Gruppe rutschen sie zusammen in die naechste Zeile. */
.erfassen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--tinte-haarlinie);
}

@media (max-width: 720px) {
  .erfassen {
    flex: 1 1 100%;
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--tinte-zart);
  }

  /* Innerhalb der Gruppe darf die Pille wieder ihre eigene Breite haben;
     die Regel fuer volle Breite gilt der Zeile, nicht dieser Reihe. */
  .erfassen .pille {
    flex: 0 1 auto;
    width: auto;
  }
}

/* ── Karten ─────────────────────────────────────────────────────────── */

.karte {
  background: var(--buehne);
  border-radius: var(--r-blatt);
  box-shadow: var(--schatten);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}

.karte--dicht {
  padding: 16px 18px;
  gap: 8px;
}

.karte--tabelle {
  padding: 6px 22px 18px;
}

a.karte {
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: box-shadow var(--zeit-mass) var(--schwung),
    transform var(--zeit-mass) var(--schwung),
    border-color var(--zeit-farbe) ease-out;
}

a.karte:hover {
  border-color: var(--blau);
  box-shadow: 0 2px 8px rgba(22, 24, 26, 0.07);
  transform: translateY(-1px);
  text-decoration: none;
}

a.karte:active {
  transform: none;
}

.karte h2 {
  font-size: 18px;
  font-weight: 450;
  letter-spacing: -0.02em;
}

.karte--gross h2 {
  font-size: 20px;
  font-weight: 450;
  letter-spacing: -0.025em;
}

.karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Die Spezifikation nennt fuer Kleinlabels 10.5px. Hier steht 11px: ein
   halber Pixel ist keine gestalterische Aussage, aber er ist die Grenze,
   unter der funktionaler Text auf kleinen Bildschirmen abbaut — und dieses
   Portal wird im Fahrzeug bedient. Versalien und Laufweite bleiben. */
.etikett {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--tinte-leise);
  text-transform: uppercase;
}

.haarlinie {
  height: 1px;
  background: var(--tinte-haarlinie);
  border: 0;
  margin: 0;
}

.leise {
  color: var(--tinte-leise);
}

.klein {
  font-size: 12.5px;
  line-height: 1.55;
}

/* Die kleinen Nebenverweise: «alle» neben einer Kartenüberschrift, «Auch
   stillgelegte zeigen» unter einer Tabelle. Sie stehen neben Überschriften
   und unter Tabellen, also überall dort, wo sonst leise Schrift steht. Als
   blauer Link mit Unterstrich zogen sie mehr Aufmerksamkeit auf sich als
   die Überschrift daneben, obwohl sie das Nebensächliche sind.

   Leise Tinte statt Blau, und die Farbe wechselt beim Überfahren. Der
   Unterstrich kommt dann auch, damit unverändert erkennbar bleibt, dass
   hier etwas anklickbar ist. */
a.klein {
  color: var(--tinte-leise);
  text-decoration: none;
}

/* Farbe und Unterstrich hier ausdruecklich, nicht ueber die allgemeine
   a:hover-Regel weiter oben: Deren `text-decoration` wird von der Zeile
   darueber geschlagen, weil beide gleich spezifisch sind und diese spaeter
   steht. Wer das nicht weiss, sucht den fehlenden Unterstrich lange. */
a.klein:hover,
a.klein:focus-visible {
  color: var(--tinte);
  text-decoration: underline;
}

/* Verweise, die der Inhalt einer Zeile sind und nicht von ihr wegführen:
   das Datum in «Frühere Rapporte», die Telefonnummer in der Teamliste. Sie
   stehen dort, wo sonst Text steht, und sollen sich auch so lesen. Als
   blaue Links mit Unterstrich sah eine Liste aus Daten aus wie ein
   Inhaltsverzeichnis, und eine Spalte mit Telefonnummern wie ein Formular
   voller Fehler.

   Sie tragen deshalb Tinte wie der Text daneben. Der Unterstrich kommt beim
   Überfahren, und auf dem Telefon bleibt die Nummer ohnehin antippbar, denn
   dort ist jede Zeile gross genug. */
.liste__fuellung,
.zeile__name a,
.zeile__wert a {
  color: var(--tinte);
  text-decoration: none;
}

.zeile__wert a {
  color: var(--tinte-leise);
}

.liste__fuellung:hover,
.liste__fuellung:focus-visible,
.zeile__name a:hover,
.zeile__name a:focus-visible,
.zeile__wert a:hover,
.zeile__wert a:focus-visible {
  color: var(--tinte);
  text-decoration: underline;
}

.mittelklein {
  font-size: 13.5px;
  line-height: 1.55;
}

/* Die abgelesene Zahl: gross, leicht, mit Tabellenziffern. */
.ablesung {
  font-size: 30px;
  font-weight: 420;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.ablesung--gross {
  font-size: clamp(2rem, 4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

/* ── Raster ─────────────────────────────────────────────────────────── */

.raster {
  display: grid;
  gap: 15px;
  min-width: 0;
}

.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--haupt { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.raster--seite { grid-template-columns: minmax(0, 1fr) 320px; }
.raster--leiste { grid-template-columns: 250px minmax(0, 1fr); }
.raster--sperren { grid-template-columns: 360px minmax(0, 1fr); }
.raster--brief { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 290px; }

.raster--wachsend {
  flex: 1 1 auto;
  min-height: 0;
}

.spalte {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.spalte--zwei {
  grid-column: span 2;
}

.wachsend {
  flex: 1 1 auto;
}

.schieber {
  margin-top: auto;
}

/* ── Pillen und Schalter ────────────────────────────────────────────── */

.pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: var(--r-pille);
  border: 1px solid var(--tinte-haarlinie);
  background: transparent;
  color: var(--tinte);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--zeit-farbe) ease-out,
    color var(--zeit-farbe) ease-out,
    border-color var(--zeit-farbe) ease-out,
    transform var(--zeit-mass) var(--schwung);
}

.pille:hover {
  border-color: var(--blau);
  color: var(--blau);
  text-decoration: none;
}

/* Gedrueckt geht der Knopf einen Punkt nach unten. Das ist die ganze
   Rueckmeldung, die ein Knopf braucht. */
.pille:active {
  transform: translateY(1px);
}

.pille--blau {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

.pille--blau:hover {
  background: var(--blau-tief);
  border-color: var(--blau-tief);
  color: #fff;
}

.pille--kontur {
  border-color: var(--tinte);
}

.pille--still {
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  padding: 11px 18px;
  background: var(--buehne);
}

.pille--klein {
  padding: 9px 16px;
  min-height: 38px;
  font-size: 12px;
}

/* In einer Zeile mit Statuszeichen muss der Knopf als Knopf erkennbar sein.
   Beide sind Pillen; die Kontur in Tinte macht den Unterschied, ohne eine
   Farbe einzufuehren. */
.eintrag__werkzeug .pille,
.zeile__aktion .pille {
  border-color: var(--tinte);
}

.eintrag__werkzeug .pille:hover,
.zeile__aktion .pille:hover {
  border-color: var(--blau);
}

.pille[disabled],
.pille[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Filterreihe: der gewaehlte Filter ist gefuellt, die anderen stehen offen. */
.filter {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.filter a,
.filter button {
  padding: 10px 17px;
  border-radius: var(--r-pille);
  border: 1px solid var(--tinte-haarlinie);
  background: var(--buehne);
  color: var(--tinte);
  font-family: inherit;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s var(--schwung), color 0.18s var(--schwung),
    border-color 0.18s var(--schwung);
}

.filter a:hover,
.filter button:hover {
  border-color: var(--tinte);
  color: var(--tinte);
}

.filter [aria-current='true'] {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--buehne);
  font-weight: 500;
}

/* Der gelbe Filter ist der einzige farbige: er zaehlt, was zu tun ist. */
.filter [data-handlung='ja'] {
  background: var(--gelb);
  border-color: var(--tinte);
  color: var(--tinte);
  font-weight: 600;
}

.filter [data-handlung='ja']:hover {
  background: #e7e150;
  color: var(--tinte);
}

.filter__trenner {
  width: 1px;
  height: 26px;
  background: var(--tinte-haarlinie);
  margin: 0 5px;
}

/* Umschalter in einer Kapsel, etwa Woche/Monat/Liste. */
.umschalter {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pille);
  background: var(--buehne);
  border: 1px solid var(--tinte-haarlinie);
}

.umschalter a,
.umschalter button {
  padding: 8px 15px;
  border-radius: var(--r-pille);
  border: 0;
  background: transparent;
  color: var(--tinte-leise);
  font-family: inherit;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s var(--schwung), color 0.18s var(--schwung);
}

.umschalter a:hover,
.umschalter button:hover {
  color: var(--tinte);
}

.umschalter [aria-current='true'],
.umschalter [aria-pressed='true'] {
  background: var(--tinte);
  color: var(--buehne);
  font-weight: 600;
}

/* Reiter unter der Ueberschrift, etwa Bestellungen / Auswärts. */
.reiter {
  display: flex;
  gap: 4px;
}

.reiter a {
  padding: 9px 17px;
  border-radius: var(--r-pille);
  color: var(--tinte-leise);
  font-size: 13px;
  text-decoration: none;
  transition: background-color 0.18s var(--schwung), color 0.18s var(--schwung);
}

.reiter a:hover {
  color: var(--tinte);
}

.reiter a[aria-current='page'] {
  background: var(--tinte);
  color: var(--buehne);
  font-weight: 500;
}

.rund {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pille);
  border: 1px solid var(--tinte-haarlinie);
  background: var(--buehne);
  color: var(--tinte);
  font-family: inherit;
  font-size: 16px;
  display: grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
  flex: none;
  transition: border-color 0.18s var(--schwung), background-color 0.18s var(--schwung);
}

.rund:hover {
  border-color: var(--blau);
  color: var(--blau);
  text-decoration: none;
}

.rund:active {
  transform: translateY(1px);
}

/* ── Statuszeichen ──────────────────────────────────────────────────── */

/* Fuenf Zustaende, und jeder sagt etwas anderes:
   handlung  — jemand muss etwas tun                    (Gelb)
   aktiv     — laeuft gerade, informativ                (Blau)
   betrieb   — betriebsrelevant, nimmt ein Fahrzeug raus (Tinte)
   offen     — erfasst, nichts weiter                   (Umriss)
   fertig    — abgeschlossen                            (Grund) */
.zeichen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pille);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.zeichen--handlung {
  background: var(--gelb);
  color: var(--tinte);
}

.zeichen--aktiv {
  background: var(--blau-hauch);
  color: var(--blau-tief);
}

.zeichen--blau {
  background: var(--blau);
  color: #fff;
}

.zeichen--betrieb {
  background: var(--tinte);
  color: var(--buehne);
}

.zeichen--offen {
  border-color: var(--tinte-haarlinie);
  color: var(--tinte-leise);
}

.zeichen--fertig {
  background: var(--grund);
  color: var(--tinte-leise);
}

.punkt {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pille);
  flex: none;
}

.punkt--aktiv { background: var(--blau); }
.punkt--geplant { background: var(--gelb); outline: 1px solid var(--tinte); }
.punkt--abgelaufen { background: var(--tinte-haarlinie); }

/* ── Hinweisflächen ─────────────────────────────────────────────────── */

.hinweis {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--r-feld);
  background: var(--blau-hauch);
  color: var(--blau-tief);
  font-size: 12.5px;
  line-height: 1.55;
}

.hinweis svg {
  flex: none;
  margin-top: 1px;
}

.feldgruppe {
  padding: 13px 15px;
  background: var(--grund);
  border-radius: var(--r-feld);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Die Meldung nach einem Schritt. Sie faehrt einmal ein und bleibt dann
   stehen; das ist der eine bewegte Moment im Portal. */
.meldung {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 18px;
  border-radius: var(--r-blatt);
  background: var(--tinte);
  color: var(--buehne);
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: var(--schatten-hoch);
  animation: einfahren var(--zeit-dialog) var(--schwung) both;
}

.meldung--fehler {
  background: var(--blau-tief);
}

.meldung--hinweis {
  background: var(--gelb);
  color: var(--tinte);
}

.meldung__schliessen {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  opacity: 0.7;
}

.meldung__schliessen:hover {
  opacity: 1;
}

@keyframes einfahren {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Tabellen ───────────────────────────────────────────────────────── */

.tabelle {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.zeile {
  display: grid;
  gap: 13px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--tinte-haarlinie);
  min-width: 0;
}

.zeile--kopf {
  padding: 15px 0 11px;
  border-top: 0;
  border-bottom: 1px solid var(--tinte);
  align-items: end;
}

.zeile {
  transition: background-color var(--zeit-farbe) ease-out;
}

.zeile:not(.zeile--kopf):hover {
  background: var(--grund);
}

.zeile--still {
  color: var(--tinte-leise);
}

/* Nach einem Statuswechsel leuchtet die betroffene Zeile einmal auf. Sie
   steht danach oft an anderer Stelle in der Liste, und ohne dieses Signal
   sucht man sie. */
.zeile--frisch,
.eintrag--frisch,
.sperre--frisch {
  animation: aufleuchten var(--zeit-flug) var(--schwung) both;
}

@keyframes aufleuchten {
  0% {
    background-color: var(--blau-hauch);
  }
  100% {
    background-color: transparent;
  }
}

.zeile__name {
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.zeile__wert {
  font-size: 13px;
  color: var(--tinte-leise);
  min-width: 0;
  overflow-wrap: anywhere;
}

.zeile__aktion {
  justify-self: start;
}

/* Die Spaltenbreiten stehen beim Modul, weil sie zum Inhalt gehoeren. */
.spalten--idee {
  grid-template-columns:
    minmax(0, 2.6fr) 120px minmax(0, 1.2fr) 150px 130px;
}

/* Dieselbe Zeile in der Sitzungssicht, ohne Bereichsspalte: Dort steht der
   Bereich schon als Gruppentitel darueber. */
.spalten--traktandum {
  grid-template-columns:
    minmax(0, 2.8fr) minmax(0, 1.2fr) 150px 130px;
}

.spalten--traktandum .zeile__name,
.spalten--idee .zeile__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.spalten--posten {
  grid-template-columns:
    minmax(0, 2.2fr) minmax(0, 1.6fr) 135px 140px 185px;
}

/* Woher die Zeile stammt, steht klein hinter dem Namen: In der gemeinsamen
   Liste stehen Bestellung und Depot nebeneinander, und beim Quittieren ist
   der Unterschied wichtig. */
/* Die Einsatznummer steht klein hinter dem Namen: Sie beantwortet die
   Rueckfrage, woher ein Stueck stammt, ohne eine eigene Spalte zu belegen. */
.zeile__herkunft {
  display: inline-block;
  margin-left: 8px;
  font-variant: all-small-caps;
  letter-spacing: 0.04em;
}

/* ── Entscheid einer Idee ───────────────────────────────────────────── */

/* Klappt unter seiner Zeile auf statt in einem Dialogfenster: An der Sitzung
   wird eine Idee nach der anderen besprochen, und die Liste soll dabei
   sichtbar bleiben. Der eingerueckte Rand bindet das Formular an die Zeile
   darueber, damit bei fuenf offenen Ideen klar ist, zu welcher es gehoert. */
.entscheid {
  padding: 16px 0 20px 18px;
  margin-bottom: 4px;
  border-left: 1px solid var(--tinte);
}

.entscheid .formular {
  gap: 12px;
}

/* Was die Sitzung entschieden hat, steht beim Titel und nicht in einer
   eigenen Spalte: Es ist die Antwort auf die Idee, kein Merkmal von ihr. */
.zeile__entscheid {
  display: block;
  margin-top: 5px;
  padding-left: 11px;
  border-left: 2px solid var(--tinte-zart);
  color: var(--tinte-leise);
  max-width: 70ch;
}

@media (max-width: 720px) {
  .entscheid {
    padding-left: 12px;
  }
}

/* ── Eingeklappte Auswahl ───────────────────────────────────────────── */

.auswahl {
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-feld);
  background: var(--buehne);
  margin-top: 12px;
}

.auswahl > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}

.auswahl > summary::-webkit-details-marker {
  display: none;
}

/* Der Pfeil steht rechts und dreht sich beim Aufklappen. Selbst gezeichnet,
   weil das eingebaute Dreieck in jedem Browser anders aussitzt. */
.auswahl > summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tinte-leise);
  border-bottom: 2px solid var(--tinte-leise);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--zeit-mass) var(--schwung);
  flex: none;
}

.auswahl[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.auswahl > summary:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: -2px;
  border-radius: var(--r-feld);
}

/* Was gewählt ist, steht in der zugeklappten Zeile. Sonst müsste man
   aufklappen, um zu sehen, ob man schon gewählt hat. */
.auswahl__stand {
  font-size: 14px;
  color: var(--tinte);
  min-width: 0;
  overflow-wrap: anywhere;
}

.auswahl__stand:empty::before {
  content: attr(data-leer);
  color: var(--tinte-leise);
}

.auswahl__kasten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 14px;
}

.kaestchen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-pille);
  cursor: pointer;
  font-size: 14px;
  transition: border-color var(--zeit-farbe), background var(--zeit-farbe);
}

.kaestchen:hover {
  border-color: var(--tinte-leise);
}

.kaestchen:has(input:checked) {
  border-color: var(--tinte);
  background: var(--grund);
  font-weight: 500;
}

.kaestchen:has(input:focus-visible) {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}

.kaestchen input {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
}

@media (max-width: 720px) {
  .auswahl__kasten .kaestchen {
    flex: 1 1 100%;
  }
}

/* Die Schichten eines Tages in der Übersichtsreihe. Das Gesicht steht ohne
   Wort daneben: In der Zeile zählt der Blick, die Benennung steht im
   Rapport selbst. */
/* Die letzten Tage auf der Übersicht. Ein Block je Tag, darin ein Block je
   Schicht mit denselben drei Feldern, die auch der Rapport zeigt. Vorher war
   das eine schmale Reihe aus Belastungsgesichtern, und wer wissen wollte,
   was am Mittwoch übergeben wurde, musste den Rapport öffnen. */
.tagesblock {
  padding: 18px 0 6px;
  border-top: 1px solid var(--tinte-haarlinie);
}

.tagesblock:first-of-type {
  border-top: 0;
  padding-top: 6px;
}

.tagesblock__kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Das Datum ist eine Überschrift, die zufällig auch ein Verweis ist. Als
   blauer Link mit Unterstrich sähe die Karte aus wie ein Inhaltsverzeichnis,
   und fünf davon untereinander erschlagen alles andere. Sie trägt deshalb
   Tinte wie jede andere Überschrift und färbt sich erst beim Überfahren,
   über dieselben Variablen, mit denen auch die gefüllten Flächen oben ihre
   Verweise einfärben. */
.tagesblock__kopf {
  --verweis: var(--tinte);
  --verweis-an: var(--blau);
}

.tagesblock__kopf a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
}

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

/* Die senkrechte Linie ordnet die Schichten ihrem Tag zu, ohne dass es eine
   zweite Überschriftenebene braucht. */
.schichtblock {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 8px 0 14px 15px;
  border-left: 2px solid var(--tinte-zart);
  margin-left: 2px;
}

.schichtblock__kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.schichtblock .lastzeichen svg {
  width: 18px;
  height: 18px;
}

/* ── Belastung der Schicht ──────────────────────────────────────────── */

.lastwahl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1000px) {
  .lastwahl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Die ganze Kachel ist die Schaltfläche, nicht ein Knopf darin: Wer sie um
   sechs Uhr morgens mit Handschuhen trifft, soll nicht zielen müssen. */
.last {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-feld);
  background: var(--buehne);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--zeit-farbe), background var(--zeit-farbe);
}

.last input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.last__gesicht svg {
  width: 34px;
  height: 34px;
  color: var(--tinte-leise);
  transition: color var(--zeit-farbe);
}

.last__name {
  font-weight: 600;
  font-size: 14px;
}

.last__wort {
  font-size: 12px;
  color: var(--tinte-leise);
  line-height: 1.35;
}

.last:hover {
  border-color: var(--tinte-leise);
}

.last:has(input:focus-visible) {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}

.last--gewaehlt,
.last:has(input:checked) {
  border-color: var(--tinte);
  background: var(--grund);
}

/* Farbe erst bei der Wahl. Drei bunte Gesichter nebeneinander wären ein
   Ampelbild; ungewählt bleiben sie deshalb grau. */
.last--ruhig:has(input:checked) {
  border-color: var(--ruhig);
  background: var(--ruhig-hauch);
}

.last--ruhig:has(input:checked) .last__gesicht svg {
  color: var(--ruhig);
}

.last--hoch:has(input:checked) {
  border-color: var(--hoch);
  background: var(--hoch-hauch);
}

.last--hoch:has(input:checked) .last__gesicht svg {
  color: var(--hoch);
}

.last--ueberlastet:has(input:checked) {
  border-color: var(--ueberlastet);
  background: var(--ueberlastet-hauch);
}

.last--ueberlastet:has(input:checked) .last__gesicht svg {
  color: var(--ueberlastet);
}

/* «Normal» traegt leise Tinte, nicht volle: Volle Tinte gehoert seit der
   vierten Stufe «ueberlastet». Zwei Graustufen fuer entgegengesetzte
   Aussagen waeren eine Verwechslung, die niemand aufloesen kann. */
.last--normal:has(input:checked) .last__gesicht svg {
  color: var(--tinte-leise);
}

/* Im Rapport steht dieselbe Aussage als Zeile, nicht als Wahl. */
.lastzeichen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
}

.lastzeichen svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.lastzeichen.last--ruhig { color: var(--ruhig); }
.lastzeichen.last--hoch  { color: var(--hoch); }
.lastzeichen.last--normal { color: var(--tinte-leise); }
.lastzeichen.last--ueberlastet { color: var(--ueberlastet); font-weight: 600; }

@media (max-width: 720px) {
  .lastwahl {
    grid-template-columns: minmax(0, 1fr);
  }

  .last {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
  }

  .last__gesicht svg {
    width: 28px;
    height: 28px;
  }

  .last__wort {
    flex: 1 1 100%;
  }
}

.gruppentitel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 8px;
  flex-wrap: wrap;
}

.gruppentitel h2,
.gruppentitel h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.gruppentitel:first-child {
  padding-top: 14px;
}

/* ── Formulare ──────────────────────────────────────────────────────── */

.formular {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* Schnellwahl ueber einem Textfeld: die vier Gegenstaende, die fast immer
   liegen bleiben. Der gewaehlte traegt die volle Flaeche, damit im
   halben Blick erkennbar ist, was im Feld steht. */
.schnellwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.schnellwahl .pille {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.schnellwahl .pille[aria-pressed='true'] {
  background: var(--tinte);
  color: var(--buehne);
  border-color: var(--tinte);
}

input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='datetime-local'],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: var(--r-feld);
  border: 1px solid var(--tinte-haarlinie);
  background: var(--buehne);
  color: var(--tinte);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  transition: border-color 0.18s var(--schwung);
}

textarea {
  resize: vertical;
  min-height: 72px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #b9b9b2;
}

/* Am Feld ersetzt der Rahmen den Ring, damit die Eingabe nicht in einem
   zweiten Kasten sitzt. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 0 3px var(--blau-hauch);
}

input::placeholder,
textarea::placeholder {
  /* Aus der Tinte abgeleitet und nicht grau geraten: so traegt der
     Platzhalter 4.6:1 auf Weiss und bleibt trotzdem erkennbar leiser. */
  color: #71767d;
}

input[type='search'] {
  border-radius: var(--r-pille);
  padding-inline: 16px;
}

input[type='checkbox'],
input[type='radio'] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blau);
  flex: none;
  cursor: pointer;
}

.wahl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  cursor: pointer;
  min-height: 32px;
}

.wahl--oben {
  align-items: flex-start;
}

.wahl--oben input {
  margin-top: 2px;
}

.wahl label {
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
}

.wahl__farbe {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.abhaken {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 14px;
  background: var(--grund);
  border-radius: var(--r-feld);
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.18s var(--schwung);
}

.abhaken:hover {
  background: #e9e9e5;
}

.abhaken--fertig {
  color: var(--tinte-leise);
}

/* Die Durchstreichung zeichnet sich von links nach rechts, statt hart zu
   erscheinen: der Strich ist eine Linie hinter dem Text, deren Breite von
   null waechst. `text-decoration` kann das nicht. */
.abhaken--fertig .abhaken__text {
  position: relative;
}

.abhaken--fertig .abhaken__text::after {
  content: '';
  position: absolute;
  left: 0;
  top: 52%;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform-origin: left center;
  animation: streichen 200ms var(--schwung) both;
}

@keyframes streichen {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.formularreihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.formularreihe--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── Karte (Leaflet) ────────────────────────────────────────────────── */

.landkarte {
  border-radius: var(--r-blatt);
  overflow: hidden;
  background: #f6f6f4;
  min-height: 320px;
  flex: 1 1 auto;
  z-index: 0;
}

.landkarte--klein {
  min-height: 240px;
}

/* Leaflet bringt eigene Schrift und eigene Kaesten mit. Beides wird auf
   die Formsprache gezogen, sonst sitzt in der Ecke ein fremdes Werkzeug. */
.leaflet-container {
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  background: #f6f6f4;
}

/* Die Karte in die Farben der Seite holen.

   OpenStreetMap zeichnet kräftig: grüne Wälder, olivgrüne Felder, orange
   Strassen, rote Autobahnen, blaue Gewässer, rosa Bahnlinien. Neben dem
   zurückhaltenden Rest des Portals sah die Karte aus wie ein Fremdkörper,
   und die beiden Marker, auf die es ankommt, gingen zwischen all dem
   Farbigen unter.

   **Entsättigt, nicht entfärbt.** Ein `grayscale(1)` wäre einfacher, würde
   aber Wald, Wasser und Strasse auf reine Helligkeit zusammenfallen lassen;
   was gleich hell ist, wäre dann nicht mehr zu unterscheiden. Ein Rest von
   Sättigung hält Gewässer bläulich und Wald grünlich, gerade genug, um sie
   auseinanderzuhalten.

   Der Kontrast geht leicht hinauf und nicht hinunter: Die Beschriftung ist
   das Wertvollste an der Karte, und Strassennamen sollen dabei nicht
   verblassen. Die Sepia-Beimischung zieht das Papierweiss der Kacheln in
   Richtung `--grund`, damit die Karte auf derselben Fläche zu liegen
   scheint wie die Karten darum herum.

   Nur die Kacheln, nicht die Ebene darüber: Die Marker liegen als SVG im
   Overlay-Pane und behalten ihr volles Blau und Gelb. Genau darum geht es,
   sie sollen sich abheben. */
.landkarte .leaflet-tile {
  filter: saturate(0.14) contrast(1.12) brightness(1.01) sepia(0.12);
}

.leaflet-control-zoom a {
  border-radius: 10px !important;
  border: 1px solid var(--tinte-haarlinie) !important;
  color: var(--tinte) !important;
  background: var(--buehne) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
}

.leaflet-control-zoom a:hover {
  background: var(--grund) !important;
}

.leaflet-bar {
  border: 0 !important;
  box-shadow: var(--schatten) !important;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--r-feld);
  box-shadow: var(--schatten-hoch);
}

.leaflet-popup-content {
  margin: 13px 15px;
  font-size: 13px;
  line-height: 1.5;
}

.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.9) !important;
  font-size: 10px !important;
  color: var(--tinte-leise) !important;
}

.karten-legende {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 13px;
  border-top: 1px solid var(--tinte-haarlinie);
  margin-top: auto;
}

.karten-legende div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tinte-leise);
}

/* ── Kalender ───────────────────────────────────────────────────────── */

.woche {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--tinte-haarlinie);
  border-left: 1px solid var(--tinte-haarlinie);
  flex: 1 1 auto;
  min-height: 0;
}

/* Kein Stundenraster: Die Schichten laufen zwoelf Stunden, und eine Achse
   von 07 bis 19 Uhr schnitte die Nachtschicht mitten durch. Die Zeit steht
   deshalb am Termin selbst, und die Spalte ist der Tag. */
.woche__spalte {
  border-right: 1px solid var(--tinte-haarlinie);
  border-bottom: 1px solid var(--tinte-haarlinie);
  padding: 9px 7px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  min-height: 170px;
}

.woche__spalte--heute {
  background: var(--grund);
}

.woche__spalte--heute .etikett {
  color: var(--tinte);
}

.woche__leer {
  font-size: 12px;
  color: var(--tinte-haarlinie);
  margin-top: 2px;
}

.termin {
  border-radius: 8px;
  transition: opacity var(--zeit-farbe) ease-out;
  padding: 7px 9px;
  /* Der Wireframe nennt 11.5px. Hier steht 12px: ein halber Pixel ist keine
     gestalterische Aussage, aber die Grenze, unter der Text auf kleinen
     Bildschirmen abbaut. */
  font-size: 12px;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

.termin:hover {
  opacity: 0.9;
}

.termin__zeit {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.monat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--tinte-haarlinie);
  border-left: 1px solid var(--tinte-haarlinie);
  flex: 1 1 auto;
  min-height: 0;
}

.monat__feld {
  border-right: 1px solid var(--tinte-haarlinie);
  border-bottom: 1px solid var(--tinte-haarlinie);
  padding: 7px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.monat__feld--fremd {
  background: #fafaf8;
}

.monat__feld--fremd .monat__zahl {
  color: var(--tinte-haarlinie);
}

.monat__feld--heute {
  background: var(--grund);
}

.monat__zahl {
  font-size: 12px;
  font-weight: 500;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}

.monat__feld--heute .monat__zahl {
  color: var(--tinte);
  font-weight: 600;
}

/* ── Listen ─────────────────────────────────────────────────────────── */

.liste {
  display: flex;
  flex-direction: column;
}

.liste > * {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--tinte-haarlinie);
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.liste > a:hover {
  color: var(--blau);
}

.liste__fuellung {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.liste--gestapelt > * {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.eintrag {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--tinte-haarlinie);
  min-width: 0;
  flex-wrap: wrap;
}

.eintrag__balken {
  width: 4px;
  align-self: stretch;
  min-height: 34px;
  border-radius: var(--r-pille);
  background: var(--tinte-haarlinie);
  flex: none;
}

.eintrag__balken--betrieb {
  background: var(--tinte);
}

.eintrag__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 260px;
  min-width: 0;
}

.eintrag__titel {
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

.eintrag__fuss {
  font-size: 12px;
  color: var(--tinte-leise);
}

.eintrag__werkzeug {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  flex: none;
}

/* Sperrungskarte in der Seitenliste. */
.sperre {
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--tinte-haarlinie);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.sperre--aktiv {
  border-color: var(--blau);
}

/* Die Flaeche traegt nur die erste aktive Sperrung. Bekaeme sie jede, waere
   sie keine Hervorhebung mehr, sondern ein Hintergrund. */
.sperre--aktiv:first-of-type {
  background: var(--blau-hauch);
}

.sperre--aktiv:first-of-type .sperre__wert {
  color: var(--blau-tief);
}

.sperre--abgelaufen {
  border-style: dashed;
}

.sperre__kopf {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sperre__name {
  font-size: 14.5px;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sperre__wert {
  font-size: 12.5px;
  color: var(--tinte-leise);
}

/* ── Leere Zustände ─────────────────────────────────────────────────── */

/* Ein leeres Modul sagt, was fehlt und was als Naechstes zu tun ist.
   «Keine Daten» waere eine verpasste Gelegenheit. */
.leerstand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 34px 6px 30px;
  max-width: 60ch;
}

.leerstand__titel {
  font-size: 19px;
  font-weight: 450;
  letter-spacing: -0.02em;
}

.leerstand__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tinte-leise);
}

.leerstand--mitte {
  align-items: center;
  text-align: center;
  align-self: center;
  margin: auto 0;
}

/* ── Anmeldung ──────────────────────────────────────────────────────── */

/* Die Anmeldung hat ein eigenes Stylesheet: statisch/tor.css. Sie ist die
   einzige Seite mit einer Scrollbahn und einem Fahrzeugfeld, und ihre
   Regeln gehoeren nicht in jede andere Seite geladen.

   Hier stand frueher eine zweite Fassung davon. Sie kam nach tor.css an die
   Reihe und ueberstimmte sie: `place-items: center` auf `.tor` zentrierte
   die haftende Szene in der ganzen 1860 Pixel hohen Bahn statt im Fenster,
   und der Anmeldekasten sass beim Laden 542 Pixel zu tief. */

/* ── Fuss ───────────────────────────────────────────────────────────── */

.fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 8px 2px;
  font-size: 12px;
  color: var(--tinte-leise);
}

.fuss a {
  color: var(--tinte-leise);
}

/* ── Nur für Bildschirmleser ────────────────────────────────────────── */

.nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: absolute;
  left: 18px;
  top: -60px;
  z-index: 20;
  padding: 12px 20px;
  border-radius: var(--r-pille);
  background: var(--blau);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: top 0.2s var(--schwung);
}

.sprung:focus {
  top: 18px;
  color: #fff;
}

/* ── Schmalere Fenster ──────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .raster--brief {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  .raster--brief > :nth-child(2) {
    grid-column: 1 / -1;
  }

  .spalten--posten {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.3fr) 105px 125px 165px;
  }

  .spalten--idee {
    grid-template-columns: minmax(0, 2.2fr) 95px minmax(0, 1fr) 125px 115px;
  }

  .spalten--traktandum {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 125px 115px;
  }
}

@media (max-width: 1000px) {
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--haupt,
  .raster--seite,
  .raster--leiste,
  .raster--sperren,
  .raster--brief {
    grid-template-columns: minmax(0, 1fr);
  }

  .spalte--zwei {
    grid-column: auto;
  }

  .raster--brief > :nth-child(2) {
    grid-column: auto;
  }

  .navigation {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .navigation::-webkit-scrollbar {
    display: none;
  }

  .kopf__band {
    flex-wrap: wrap;
    gap: 12px;
  }

  .konto {
    margin-left: auto;
  }

  /* Die Woche wird auf schmalen Fenstern zur Tagesliste: ein Sieben-Spalten-
     Raster auf 390 Pixeln ist kein Kalender, sondern ein Rätsel. */
  .woche {
    display: flex;
    flex-direction: column;
    border-top: 0;
    border-left: 0;
  }

  .woche__spalte {
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--tinte-haarlinie);
    min-height: 0;
    padding: 12px 2px;
  }

  .woche__spalte:has(.woche__leer) {
    display: none;
  }

  .monat__feld {
    min-height: 62px;
    padding: 5px 4px;
  }

  .monat .termin {
    font-size: 10.5px;
    padding: 4px 6px;
  }
}

@media (max-width: 720px) {
  .rumpf {
    padding: 12px;
    gap: 13px;
  }

  .raster--3,
  .raster--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .karte {
    border-radius: 14px;
    padding: 16px 16px;
  }

  .karte--tabelle {
    padding: 4px 16px 14px;
  }

  .kopf {
    border-radius: 20px;
  }

  .titelzeile {
    align-items: flex-start;
    padding: 0 2px;
  }

  .titelzeile__werkzeug {
    width: 100%;
  }

  .titelzeile__werkzeug .pille {
    flex: 1 1 auto;
  }

  /* Die Tabellen werden zu Bloecken. Jede Zelle bekommt ihre Beschriftung
     aus dem data-Attribut, damit die Spalte nicht verlorengeht. */
  .zeile--kopf {
    display: none;
  }

  .zeile {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px;
    padding: 14px 0;
  }

  .zeile > * {
    display: flex;
    gap: 8px;
  }

  .zeile > [data-spalte]::before {
    content: attr(data-spalte);
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    flex: none;
    min-width: 92px;
    padding-top: 2px;
  }

  .zeile__name {
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 3px;
  }

  .zeile__name::before {
    display: none;
  }

  .zeile__aktion,
  .zeile .pille {
    margin-top: 6px;
    width: 100%;
  }

  /* Eine Pille, die breiter ist als das Fenster, schiebt die ganze Seite
     auf und macht sie waagrecht scrollbar. `nowrap` ist fuer kurze
     Aufschriften gedacht; auf Telefonbreite wiegt der Umbruch schwerer als
     die eine Zeile. Betrifft nur Knopfreihen, nicht Pillen in Tabellen. */
  .titelzeile__werkzeug .pille {
    white-space: normal;
    text-align: center;
  }

  .formularreihe,
  .formularreihe--drei {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter {
    gap: 7px;
  }

  .filter__trenner {
    display: none;
  }

  .fuss {
    justify-content: flex-start;
  }
}

/* ── Drucken ────────────────────────────────────────────────────────── */

/* Der Rapport wird ausgedruckt und im Ordner abgelegt. Gedruckt gehoeren
   der Inhalt und die Quittierungen, nicht die Navigation und keine
   Schaltflaechen, die auf Papier nichts tun. */
@media print {
  .kopf,
  .navigation,
  .titelzeile__werkzeug,
  .meldung,
  .fuss,
  .pille,
  .filter,
  .umschalter,
  form button,
  .nicht-drucken {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .rumpf {
    padding: 0;
    max-width: none;
  }

  .karte {
    box-shadow: none;
    border: 1px solid var(--tinte-haarlinie);
    break-inside: avoid;
  }

  .raster--haupt,
  .raster--seite {
    grid-template-columns: minmax(0, 1fr);
  }

  a[href]::after {
    content: '';
  }
}

/* ── Telefonleiste ──────────────────────────────────────────────────── */

/* Auf dem Telefon wandert die Navigation an den unteren Rand: dort ist sie
   mit dem Daumen erreichbar, und im Fahrzeug wird einhaendig bedient. Vier
   Ziele stehen fest, der fuenfte Punkt oeffnet den Rest. */
.telefonleiste {
  display: none;
}

@media (max-width: 720px) {
  .telefonleiste {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--buehne);
    border-top: 1px solid var(--tinte-haarlinie);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 12px -8px rgba(22, 24, 26, 0.25);
  }

  .telefonleiste a,
  .telefonleiste button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 8px 2px;
    border: 0;
    background: transparent;
    color: var(--tinte-leise);
    font-family: inherit;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
  }

  .telefonleiste a[aria-current='page'] {
    color: var(--blau);
    font-weight: 600;
  }

  .telefonleiste svg {
    width: 21px;
    height: 21px;
  }

  /* Der Punkt am Symbol sagt: hier wartet etwas. */
  .telefonleiste a[data-offen] svg {
    overflow: visible;
  }

  .telefonleiste__zaehler {
    position: absolute;
    transform: translate(9px, -13px);
    min-width: 7px;
    height: 7px;
    border-radius: var(--r-pille);
    background: var(--gelb);
    outline: 1px solid var(--tinte);
  }

  /* Die obere Navigation entfaellt, sie waere doppelt. */
  .navigation {
    display: none;
  }

  /* Platz fuer die Leiste, sonst verdeckt sie die letzte Zeile. */
  .rumpf {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .telefonmehr {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    z-index: 31;
    background: var(--buehne);
    border-radius: var(--r-blatt);
    box-shadow: 0 20px 40px rgba(22, 24, 26, 0.16);
    padding: 8px;
    display: flex;
    flex-direction: column;
    animation: einfahren var(--zeit-dialog) var(--schwung) both;
  }

  .telefonmehr[hidden] {
    display: none;
  }

  .telefonmehr a {
    padding: 14px 16px;
    border-radius: var(--r-feld);
    color: var(--tinte);
    font-size: 14.5px;
    text-decoration: none;
  }

  .telefonmehr a:hover,
  .telefonmehr a[aria-current='page'] {
    background: var(--grund);
  }
}

/* ── Dialog ─────────────────────────────────────────────────────────── */

/* Das Erfassen einer Sperrung laeuft im Dialog ueber der Karte, so steht es
   in der Spezifikation: man sieht beim Eintragen, wo man eintraegt. */
dialog.blatt {
  width: min(720px, calc(100vw - 24px));
  max-height: min(1000px, calc(100vh - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--r-buehne);
  background: var(--buehne);
  color: var(--tinte);
  box-shadow: 0 1px 2px rgba(22, 24, 26, 0.05),
    0 20px 40px rgba(22, 24, 26, 0.06);
  overflow: hidden;
}

dialog.blatt::backdrop {
  background: rgba(22, 24, 26, 0.28);
}

dialog.blatt[open] {
  animation: dialog-auf var(--zeit-dialog) var(--schwung) both;
}

dialog.blatt[open]::backdrop {
  animation: grund-auf var(--zeit-dialog) ease-out both;
}

@keyframes dialog-auf {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}

@keyframes grund-auf {
  from {
    opacity: 0;
  }
}

.blatt__kopf {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--tinte-haarlinie);
}

.blatt__kopf h2 {
  font-size: 22px;
  font-weight: 420;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.blatt__rumpf {
  padding: 20px 26px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.blatt__fuss {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px 20px;
  border-top: 1px solid var(--tinte-haarlinie);
}

@media (max-width: 720px) {
  dialog.blatt {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .blatt__kopf {
    padding: 18px 16px 14px;
  }

  .blatt__rumpf {
    padding: 16px;
  }

  .blatt__fuss {
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Die Minikarte der Übersicht: links die Karte, rechts die Einträge. Auf
   schmalen Fenstern stapeln sie, sonst bliebe für die Strassennamen nichts
   übrig. */
.raster--minikarte {
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
}

.landkarte--mini {
  min-height: 150px;
  height: 150px;
}

@media (max-width: 900px) {
  .raster--minikarte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Spalten der Einstellungen. */
/* Die Aktionsspalte fasst «Bearbeiten» und «Löschen» nebeneinander: 121
   plus 99 plus 6 Pixel Abstand. Gestapelt waere jede Zeile doppelt so hoch. */
.spalten--person {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) 150px 125px 232px;
}

/* Fünf Spalten brauchen Platz. Neben der Tabelle steht eine 320 Pixel
   breite Seitenspalte, und die festen Spalten belegen weitere 560. Unterhalb
   von rund 1230 Pixeln Fensterbreite bleiben für Name und Funktion damit
   weniger als 300: «Transportsanitäter» bricht dreifach um, der Name auf 67
   Pixel, und die Überschriften überlappen einander.

   Diese Tabelle wird deshalb deutlich früher zu Blöcken als die übrigen,
   nicht erst bei 720 Pixeln. Gemessen, nicht geschätzt: Bei 1430 bekommt
   der Name 257 Pixel, bei 1100 noch 67. */
@media (max-width: 1230px) {
  .zeile--kopf.spalten--person {
    display: none;
  }

  .zeile.spalten--person {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px;
    padding: 14px 0;
  }

  .zeile.spalten--person > * {
    display: flex;
    gap: 8px;
  }

  .zeile.spalten--person > [data-spalte]::before {
    content: attr(data-spalte);
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    flex: none;
    min-width: 92px;
    padding-top: 2px;
  }
}

.spalten--ics {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 150px 120px 250px;
}

/* In den Einstellungen stehen mehrere Knöpfe je Zeile nebeneinander. */
.spalten--ics .zeile__aktion,
.spalten--person .zeile__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Ein Mehrfach-Auswahlfeld braucht sichtbare Zeilen statt einer Feldhöhe. */
select[multiple] {
  min-height: 0;
  padding: 6px 4px;
}

select[multiple] option {
  padding: 5px 9px;
  border-radius: 6px;
}

/* Fuer die Leitung fuehrt der Kontoblock in die Einstellungen. */
a.konto {
  text-decoration: none;
  border-radius: var(--r-pille);
  padding: 3px;
  margin: -3px;
  transition: background-color var(--zeit-farbe) ease-out;
}

a.konto:hover {
  background: var(--grund);
  text-decoration: none;
}

a.konto:hover .konto__zeichen {
  border-color: var(--blau);
  color: var(--blau);
}

/* ── Farbwahl ───────────────────────────────────────────────────────── */

/* Der Farbwähler des Browsers ist ein Feld wie jedes andere, sieht aber ab
   Werk nicht so aus. Er bekommt die Masse und den Radius der übrigen
   Felder; die Fläche darin gehört der gewählten Farbe. */
input[type='color'] {
  width: 56px;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-feld);
  background: var(--buehne);
  cursor: pointer;
  flex: none;
}

input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

input[type='color']::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
}

.farbwahl {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

.farbwahl__proben {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.farbprobe {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--tinte-haarlinie);
  cursor: pointer;
  padding: 0;
  transition: transform var(--zeit-mass) var(--schwung);
}

.farbprobe:hover {
  transform: scale(1.12);
}

/* Bezeichnung und Farbe eines Abonnements, in einer Zeile unter dem
   Eintrag. */
.farbzeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.farbzeile input[type='text'] {
  width: min(200px, 100%);
  min-height: 38px;
  padding: 7px 11px;
  font-size: 13px;
}

.farbzeile input[type='color'] {
  width: 46px;
  height: 38px;
  min-height: 38px;
}

/* ── Gefüllte Zustände beim Überfahren ──────────────────────────────── */

/* Ein aktiver Filter, Umschalter oder Reiter steht auf Tinte. Die
   Hover-Regeln daneben setzen die Schrift auf Tinte, und die ist
   spezifischer: `.filter a:hover` (Klasse + Pseudoklasse + Element) schlägt
   `.filter [aria-current]` (Klasse + Attribut). Ergebnis war Tinte auf
   Tinte, also unsichtbar — gefunden vom Detektor mit 1.0:1.

   Diese Regeln stehen am Ende und sind spezifischer als beide. */
.filter a[aria-current='true']:hover,
.filter button[aria-current='true']:hover,
.umschalter a[aria-current='true']:hover,
.umschalter button[aria-current='true']:hover,
.reiter a[aria-current='page']:hover {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--buehne);
}

/* Der gelbe Filter trägt Tinte, auch beim Überfahren. */
.filter a[data-handlung='ja']:hover,
.filter button[data-handlung='ja']:hover {
  color: var(--tinte);
}

/* ── Tagesämtli ─────────────────────────────────────────────────────── */

/* Der Tagesstand steht über der Liste, weil er während der Schicht die
   einzige Zahl ist, die zählt: sind wir durch. */
.tagesstand {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.tagesstand__zahl {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
}

.tagesstand__zahl strong {
  font-size: 30px;
  font-weight: 420;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tagesstand__zahl span {
  font-size: 13.5px;
  color: var(--tinte-leise);
}

/* Die Bahn trägt dieselbe Minutenskala wie die Zeitachsen im Portal: Der
   Fortschritt liest sich dadurch als Strecke und nicht als Prozentzahl. */
.tagesstand__bahn {
  flex: 1 1 200px;
  height: 10px;
  min-width: 140px;
  border-radius: var(--r-pille);
  background:
    repeating-linear-gradient(90deg,
      var(--tinte-zart) 0 1px, transparent 1px 10px),
    var(--grund);
  overflow: hidden;
}

/* Bewegt wird die Skalierung, nicht die Breite: `width` laesst den Browser
   bei jedem Einzelbild neu rechnen, `transform` nicht. */
.tagesstand__bahn > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blau);
  border-radius: var(--r-pille);
  transform-origin: left center;
  transition: transform var(--zeit-zeile) var(--schwung);
}

.tagesstand__rand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: none;
}

/* Eine Ämtlizeile. Die ganze Zeile ist der Knopf: Die Liste wird auf dem
   Telefon in der Fahrzeughalle abgearbeitet, oft im Stehen, und ein 24
   Pixel breites Kästchen trifft man dort nicht. */
.amt {
  border-top: 1px solid var(--tinte-haarlinie);
}

.amt:first-of-type {
  border-top: 0;
}

.amt__zeile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 13px 10px 13px 6px;
  margin: 0 -10px 0 -6px;
  border: 0;
  border-radius: var(--r-feld);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--zeit-farbe) ease-out;
}

.amt__zeile:hover {
  background: var(--grund);
}

.amt__kasten {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 2px solid var(--tinte-haarlinie);
  border-radius: 8px;
  background: var(--buehne);
  color: transparent;
  transition: background-color var(--zeit-farbe) ease-out,
              border-color var(--zeit-farbe) ease-out,
              color var(--zeit-farbe) ease-out;
}

.amt__kasten svg {
  width: 16px;
  height: 16px;
}

.amt__zeile:hover .amt__kasten {
  border-color: var(--blau);
}

.amt__zeile--fertig .amt__kasten {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

.amt__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.amt__titel {
  font-size: 14.5px;
  line-height: 1.4;
}

.amt__zeile--fertig .amt__titel {
  color: var(--tinte-leise);
  text-decoration: line-through;
  text-decoration-color: var(--tinte-haarlinie);
}

.amt__fuss {
  font-size: 12px;
  line-height: 1.45;
  color: var(--tinte-leise);
}

.amt__aufwand {
  flex: none;
  margin-top: 2px;
}

/* Der Titel über den Pendenzen. Gelb heisst im ganzen Portal «jemand muss
   etwas tun», und hier trifft es zu. */
.gruppentitel--handlung {
  border-bottom: 2px solid var(--gelb);
  margin-bottom: 4px;
}

.karte__vorwort {
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 6px;
  max-width: 62ch;
}

/* Die Aktionsspalte ist so breit, dass «Ändern» und «Von der Liste»
   nebeneinander stehen (91 + 136 + 6 Pixel Abstand). Gestapelt waere
   jede der 52 Zeilen doppelt so hoch. */
.spalten--aemtli {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 200px) 245px;
}

.spalten--aemtli .zeile__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.spalten--aemtli .zeile__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zeile__zusatz {
  flex-basis: 100%;
  margin-top: 1px;
}

/* Die Ordnungszahlen eines monatlichen Rhythmus: mehrere Kästchen, die
   zusammen einen Satz ergeben («erster und dritter Dienstag»). */
.kaestchen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kaestchen__feld {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-pille);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--zeit-farbe) ease-out,
              background-color var(--zeit-farbe) ease-out;
}

.kaestchen__feld:hover {
  border-color: var(--blau);
}

.kaestchen__feld:has(input:checked) {
  background: var(--blau-hauch);
  border-color: var(--blau);
  color: var(--blau-tief);
}

.kaestchen__feld input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}

.knopfreihe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Auf dem Telefon steht die Aufwandsmarke unter dem Text statt daneben:
   Neben einem 322 Pixel breiten Titel drückt sie ihn sonst auf drei Zeilen.
   Die Textspalte füllt genau die erste Zeile (Kästchen 26 + Abstand 14),
   die Marke rutscht dadurch auf die zweite und bleibt dort links bündig
   mit dem Titel. */
@media (max-width: 720px) {
  .amt__zeile {
    flex-wrap: wrap;
  }

  .amt__text {
    flex: 1 1 calc(100% - 40px);
  }

  .amt__aufwand {
    order: 3;
    margin: 6px 0 0 40px;
  }
}

/* Der Tagestitel in den Pendenzen. Leiser als ein Bereichstitel: Er ordnet
   nur, er ist keine eigene Rubrik. */
.gruppentitel--tag h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--tinte-leise);
}

.gruppentitel--tag {
  padding: 18px 0 4px;
  gap: 8px;
}

/* Auf der Übersicht stehen die vier Kennzahlen bei Telefonbreite in zwei
   Spalten, eine Karte ist dann 164 Pixel breit. Die Kennzeichen darin dürfen
   dort umbrechen: «auf nächster Fahrt mitnehmen» braucht 220 Pixel, konnte
   als Pille nicht umbrechen und schob die Karte auf, die Karte das Raster
   und das Raster die ganze Seite. Ergebnis war ein waagrechter Scrollbalken
   auf der meistbesuchten Seite, 430 gegen 370 Pixel.

   Gesucht wurde der Fehler zuerst bei der Leaflet-Karte, deren Kacheln im
   Messwert weit über den Rand ragen. Sie tun das nur scheinbar: Leaflet
   schneidet sie selbst weg, und `getBoundingClientRect` meldet die
   ungeklippte Lage. Wer waagrechten Überlauf sucht, vergleicht `scrollWidth`
   mit `clientWidth`, nicht Rechtecke.

   Eng begrenzt auf dieses Raster: In Tabellen und Filtern ist die
   Umbruchsperre richtig, dort steht neben der Pille genug Platz. */
@media (max-width: 720px) {
  .raster--4 .zeichen {
    white-space: normal;
  }
}

/* Die Vorschau vor dem Übernehmen einer Teamtabelle. */
.spalten--uebernahme {
  grid-template-columns: minmax(0, 1.1fr) minmax(130px, 175px) 120px minmax(0, 1.3fr);
}

/* Marke und Erklärung stehen in derselben Zelle. Ohne Umbruch fliesst der
   Satz um die Pille herum und beginnt auf halber Höhe. */
.spalten--uebernahme .zeile__wert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

/* Das Dateifeld trägt in jedem Browser einen eigenen Knopf, der sich kaum
   gestalten lässt. Angeglichen wird deshalb nur, was allen gemeinsam ist:
   Rahmen, Radius und Abstand wie bei den übrigen Feldern. */
input[type='file'] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-feld);
  background: var(--buehne);
  font: inherit;
  font-size: 13.5px;
  color: var(--tinte);
  cursor: pointer;
}

input[type='file']:hover {
  border-color: var(--blau);
}

input[type='file']::file-selector-button {
  margin-right: 10px;
  padding: 5px 12px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-pille);
  background: var(--grund);
  font: inherit;
  font-size: 12.5px;
  color: var(--tinte);
  cursor: pointer;
}

/* Das Törtchen vor einem Geburtstag. Es steht in der Zeile, nicht daneben,
   und läuft in der Schriftfarbe mit: Ein Geburtstag in der Monatsansicht hat
   knapp zwei Zentimeter Platz, und ein zweifarbiges Symbol würde dort zu
   einem Fleck. */
.torte {
  display: inline-flex;
  vertical-align: -0.16em;
  flex: none;
}

.torte svg {
  width: 1.05em;
  height: 1.05em;
}

/* ── Auswertung der Belastung ───────────────────────────────────────── */

/* Der Balken zeigt, woraus die Rapporte eines Zeitraums bestehen. Die
   Anteile der Abschnitte sind Zählungen, keine Hochrechnung; ob daneben
   eine Prozentzahl stehen darf, entscheidet auswertung.py. */
.lastbalken {
  display: flex;
  height: 12px;
  margin-top: 12px;
  border-radius: var(--r-pille);
  overflow: hidden;
  background: var(--grund);
}

.lastbalken__teil {
  display: block;
  min-width: 3px;
}

.lastbalken__teil--ruhig       { background: var(--ruhig); }
.lastbalken__teil--normal      { background: var(--last-normal); }
.lastbalken__teil--hoch        { background: var(--hoch); }
.lastbalken__teil--ueberlastet { background: var(--ueberlastet); }

/* Ohne eine einzige Angabe bleibt die Bahn leer statt zu verschwinden: Eine
   fehlende Leiste liesse sich als «alles ruhig» lesen. */
.lastbalken__teil--leer {
  background: repeating-linear-gradient(90deg,
    var(--tinte-zart) 0 1px, transparent 1px 8px);
}

.lastzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 11px;
  font-size: 12.5px;
}

.lastzahlen__teil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.lastpunkt {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pille);
  flex: none;
}

/* Die Konturlinie ist kein Zierrat: «Normal» traegt ein neutrales Hellgrau,
   und das misst auf weisser Karte 1.43:1. Ein Punkt bei diesem Wert ist kein
   Punkt, sondern eine Behauptung.

   Die Kontur traegt leise Tinte und nicht die Haarlinienfarbe: Letztere ist
   dieselbe Farbe wie die Fuellung von «Normal», Kontur und Fuellung waeren
   also deckungsgleich und der Punkt bliebe unsichtbar — genau der, fuer den
   die Kontur da ist. Volle Tinte verschoebe den Fehler nur, sie ist mit
   «ueberlastet» identisch. Leise Tinte misst 6.43:1 gegen die weisse Karte
   und 4.5:1 gegen «Normal» und traegt damit ueber alle vier Stufen. */
.lastpunkt {
  outline: 1px solid var(--tinte-leise);
  outline-offset: -1px;
}

.lastpunkt--ruhig       { background: var(--ruhig); }
.lastpunkt--normal      { background: var(--last-normal); }
.lastpunkt--hoch        { background: var(--hoch); }
.lastpunkt--ueberlastet { background: var(--ueberlastet); }

.lastzeile {
  padding: 14px 0;
  border-top: 1px solid var(--tinte-haarlinie);
}

.lastzeile:first-of-type {
  border-top: 0;
}

.lastzeile--schmal {
  padding: 9px 0;
}

.lastzeile--schmal .lastbalken {
  height: 8px;
  margin-top: 7px;
}

.lastzeile__kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* Die Monate nebeneinander. Senkrecht gestapelt, weil die Frage «nimmt es
   zu» eine Frage an die Reihenfolge ist und nicht an die Einzelwerte. */
.monatsreihe {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.monatsreihe__spalte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 46px;
  flex: 1 1 0;
}

.monatsreihe__balken {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  height: 84px;
  border-radius: var(--r-feld);
  overflow: hidden;
  background: var(--grund);
}

.monatsreihe__balken .lastbalken__teil {
  width: 100%;
  min-height: 3px;
  min-width: 0;
}

/* Die Schichten am Anschlag tragen den Balken ihrer Stufe, damit eine
   überlastete Schicht neben einer nur anstrengenden auffällt. */
.eintrag__balken--hoch        { background: var(--hoch); }
.eintrag__balken--ueberlastet { background: var(--ueberlastet); }

.zeichen--ueberlastet {
  background: var(--ueberlastet);
  color: var(--buehne);
}