/* 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;
  /* Umbrechen statt ueberlaufen. Mit vier Reitern passte die Zeile auf jedes
     Telefon; mit dem fuenften («Fahrzeugcheck») nicht mehr, und sie schob die
     ganze Seite waagrecht auf 492 Pixel. Ein Einstellungsbereich, den man
     wegscrollen muss, um ihn zu sehen, ist keiner. */
  flex-wrap: wrap;
  row-gap: 6px;
}

.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;
}

/* Die abgeschlossenen Checks eines Tages, unter seinen Schichten. Dieselbe
   Leiste links wie ein Schichtblock: Sie gehoeren zum Tag, nicht zu einer
   Schicht, und stehen deshalb auf gleicher Hoehe daneben. */
.tageschecks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 12px 15px;
  border-left: 2px solid var(--tinte-zart);
  margin-left: 2px;
}

.tageschecks__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.5px;
  line-height: 1.45;
}

.tageschecks__liste a {
  color: inherit;
}

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

/* Die Strassenvorschläge stehen im Fluss unter dem Feld, nicht darüber: Im
   Dialog würde der scrollende Rumpf eine schwebende Liste abschneiden. */
.strassenwahl {
  list-style: none;
  margin: 2px 0 0;
  padding: 4px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: 12px;
  background: var(--buehne);
}

.strassenwahl[hidden] {
  display: none;
}

.strassenwahl__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.strassenwahl__zeile:hover,
.strassenwahl__zeile--an {
  background: var(--tinte-haarlinie);
}

/* ── 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));
  max-height: min(1000px, calc(100dvh - 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);
}

/* Kopf und Fuss bleiben stehen, gescrollt wird nur der Rumpf. Dafür muss die
   Höhengrenze des Dialogs durch das Formular bis zum Rumpf durchreichen. */
dialog.blatt[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-auf var(--zeit-dialog) var(--schwung) both;
}

dialog.blatt > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

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 {
  flex: 1 1 auto;
  min-height: 0;
  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: 100dvh;
    height: 100dvh;
    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;
}

/* ── Mehrere Aemtli auf einmal ──────────────────────────────────────── */

/* Die Leitung raeumt nach einem Wochenende einundzwanzig Pendenzen ab. Zeile
   fuer Zeile hiesse einundzwanzig Neuaufbauten der Seite, und jeder davon
   springt an eine andere Stelle. Deshalb dieser Modus — und deshalb ist er
   ein eigener Zustand und nicht der Normalfall: Wer eine Schicht arbeitet,
   hakt ab, was er getan hat, und dafuer ist die antippbare Zeile richtig. */
.amt--wahl {
  display: block;
  position: relative;
  cursor: pointer;
}

/* Das echte Kaestchen liegt unsichtbar unter dem gezeichneten. Nicht
   `display: none`: Damit fiele es aus der Tabulatorreihe, und die Liste
   waere mit der Tastatur nicht mehr zu bedienen. */
.amt__kreuz {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

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

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

/* Die gewaehlte Zeile bekommt einen Hauch Flaeche. Der Haken allein genuegt
   nicht: Auf einer Liste mit dreissig Zeilen liest man sonst die eigene
   Auswahl muehsam zusammen. */
.amt__kreuz:checked + .amt__zeile {
  background: var(--blau-hauch);
}

/* Der Ring gehoert an die Zeile und nicht an das versteckte Kaestchen,
   sonst leuchtet beim Tabben nichts auf. */
.amt__kreuz:focus-visible + .amt__zeile {
  outline: 2px solid var(--blau);
  outline-offset: -2px;
}

/* Ein bereits erledigtes Aemtli bleibt waehlbar, damit sich auch ein
   ganzer Stapel zuruecknehmen laesst. Es traegt weiter die
   Durchstreichung; die Flaeche sagt, dass es gemeint ist. */

/* Der Griff fuer eine ganze Gruppe. Versteckt, bis das Skript ihn
   verdrahtet hat: Ein Kaestchen, das sich nicht anfassen laesst, waere
   schlimmer als keines. Siehe aemtli-wahl.js. */
.gruppenwahl {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tinte-leise);
  cursor: pointer;
  white-space: nowrap;
}

.stapelwahl--bereit .gruppenwahl {
  display: inline-flex;
}

.gruppenwahl input {
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
}

/* Die Leiste klebt am unteren Rand. Die Liste eines Montags ist laenger als
   der Bildschirm, und ein Knopf am Fuss der Seite zwaenge dazu, nach jedem
   Kreuz bis ans Ende zu scrollen. */
.stapelleiste {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 12px 14px 12px 20px;
  border-radius: var(--r-pille);
  border: 1px solid var(--tinte-zart);
  background: var(--buehne);
  /* Der Schatten faellt nach oben. `--schatten-hoch` wirft nach unten und
     waere hier unsichtbar: Die Leiste liegt auf einer weissen Karte, und
     ohne Kante liest man die Zeile, die gerade halb dahinter verschwindet,
     als abgeschnitten statt als ueberdeckt. */
  box-shadow: 0 -6px 20px -10px rgba(22, 24, 26, 0.28);
}

.stapelleiste__stand {
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-leise);
}

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

@media (max-width: 720px) {
  .stapelleiste {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border-radius: var(--r-blatt);
    /* Ueber der Telefonleiste und nicht dahinter. Die liegt fest am
       unteren Rand und traegt z-index 30; eine Leiste auf `bottom: 12px`
       verschwaende hier vollstaendig darunter. Dieselben 66 Pixel wie bei
       `.telefonmehr`, plus derselbe Abstand wie am grossen Bildschirm. */
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .stapelleiste__knoepfe {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Der schreibende Knopf ueber die ganze Breite und zuunterst: Er ist der
     Zweck der Leiste, und am Telefon liegt unten der Daumen. */
  .stapelleiste__knoepfe .pille--blau {
    grid-column: 1 / -1;
    order: 3;
  }
}

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

/* ── Fahrzeugcheck ──────────────────────────────────────────────────── */

/* Ein Pruefobjekt in der Uebersicht. Ganze Zeile als Verweis, wie die
   Aemtlizeile ein Knopf ist: Wer die Halle abgeht, hat das Telefon in einer
   Hand und trifft keine Wortbreite. */
.pruefobjekt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 10px 14px 6px;
  margin: 0 -10px 0 -6px;
  border-top: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-feld);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--zeit-farbe) ease-out;
}

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

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

/* Derselbe Kasten wie an der Aemtlizeile, damit ein Haken im ganzen Portal
   dasselbe aussieht. Gefuellt heisst hier: heute schon geprueft. */
.pruefobjekt__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;
}

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

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

/* Gelb heisst im ganzen Portal «jemand muss jetzt etwas tun». Ein Fahrzeug
   im Dienst, das heute niemand angesehen hat, ist genau das. */
.pruefobjekt__kasten--offen {
  border-color: var(--gelb-tief);
  background: var(--gelb);
}

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

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

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

/* Die Wahl des Umfangs. Zwei Kacheln nebeneinander, wie die Belastung vier
   nebeneinander stellt und aus demselben Grund: Die ganze Kachel ist die
   Schaltflaeche, wer sie um sechs Uhr morgens mit Handschuhen trifft, soll
   nicht zielen muessen. */
.umfangwahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.umfang {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  padding: 18px 18px 16px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-blatt);
  background: var(--buehne);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--zeit-farbe) ease-out,
    background-color var(--zeit-farbe) ease-out,
    transform var(--zeit-mass) var(--schwung);
}

/* Jede Kachel steckt in ihrem eigenen Formular. Ohne das hier waeren die
   beiden verschieden hoch, sobald eine Beschreibung umbricht. */
.umfangwahl > form {
  display: flex;
}

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

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

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

/* Was faellig ist, traegt die Kontur in Tinte und nicht Gelb: Gelb steht im
   Portal fuer eine Handlung, die jemand schuldet. Hier schuldet niemand
   etwas — hier waehlt man gerade aus, was man tut. */
.umfang--faellig {
  border-color: var(--tinte);
}

/* Eine Kontrolle, die schon laeuft. Blau wie alles, was im Portal gerade
   in Arbeit ist; wer die Kachel antippt, macht dort weiter, wo er war. */
.umfang--laeuft {
  border-color: var(--blau);
  background: var(--blau-hauch);
}

.umfang--laeuft .umfang__stand {
  color: var(--blau);
}

/* Im Umschalter der Stand der anderen Kontrolle, falls sie angefangen ist. */
.umschalter__stand {
  margin-left: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.umfang__name {
  font-size: 16px;
  line-height: 1.25;
}

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

.umfang__stand {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* Ein Fach: die Zeile zum Antippen und darunter der eingeklappte Inhalt. */
.fach {
  border-top: 1px solid var(--tinte-haarlinie);
}

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

.fach__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;
}

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

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

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

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

/* Eine Abweichung ist keine erledigte Zeile. Sie traegt den gelben Kasten,
   weil jemand etwas tun muss, und sie bleibt in voller Tinte lesbar. */
.fach__zeile--abweichung .amt__kasten {
  background: var(--gelb);
  border-color: var(--gelb-tief);
  color: var(--gelb-tief);
}

.fach__zeile--abweichung .amt__fuss {
  color: var(--gelb-tief);
}

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

/* Der Aufklapper unter der Zeile. Er traegt die Inventarliste und den Weg
   fuer eine Abweichung: Wer eine meldet, hat gerade hineingesehen. */
.fach__mehr {
  margin: 0 0 8px 40px;
}

/* Die offene Inventarliste beim Inventarcheck. Buendig mit dem Namen des
   Fachs und nicht mit dem Kasten: Sie gehoert zum Fach, sie ist kein
   eigener Punkt. */
.fach__liste {
  margin: -6px 0 2px 40px;
}

.fach__liste .inventar {
  margin: 0;
}

.fach__mehr > summary {
  font-size: 12px;
  color: var(--tinte-leise);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}

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

.fach__mehr > summary::before {
  content: "+ ";
}

.fach__mehr[open] > summary::before {
  content: "− ";
}

.fach__mehr > summary:hover {
  color: var(--blau);
}

/* Die Inventarliste. Sie wird nie abgehakt, nur gelesen: Sie ist die
   Vorlage, gegen die verglichen wird. Deshalb steht sie leise. */
.inventar {
  list-style: none;
  margin: 6px 0 10px;
  padding: 10px 14px;
  background: var(--grund);
  border-radius: var(--r-feld);
  font-size: 12.5px;
  line-height: 1.5;
}

.inventar > li {
  display: flex;
  gap: 10px;
  padding: 2px 0;
}

.inventar__anzahl {
  flex: none;
  min-width: 1.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-leise);
}

.inventar__text {
  min-width: 0;
}

/* Was in einer Position steckt, etwa die sieben Schluessel in der
   Schluesselmappe. Eine Stufe tiefer und ohne eigene Flaeche: sonst stuenden
   Kaesten in Kaesten. */
.inventar--darin {
  margin: 3px 0 4px;
  padding: 0 0 0 4px;
  background: transparent;
  border-left: 1px solid var(--tinte-haarlinie);
  border-radius: 0;
}

.abweichung {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.abweichung .feld {
  flex: 1 1 260px;
  min-width: 0;
}

.umfangschalter button {
  border: 0;
  background: transparent;
  padding: 2px 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tinte-haarlinie);
}

.umfangschalter button:hover {
  color: var(--blau);
}

.abschluss {
  gap: 14px;
}

.abschluss__knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.abschluss form:last-child button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tinte-haarlinie);
}

@media (max-width: 720px) {
  /* Zwei Kacheln nebeneinander werden auf Telefonbreite zwei Stummel. */
  .umfangwahl {
    grid-template-columns: minmax(0, 1fr);
  }

  .fach__mehr,
  .fach__liste {
    margin-left: 0;
  }

  .fach__zeile {
    flex-wrap: wrap;
  }

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

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

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

/* Ein Umfang, den es noch nicht gibt. Keine Schaltfläche, sondern ein Satz:
   Er verspricht nichts, was ein Klick nicht halten könnte. */
.umfang--leer {
  border-style: dashed;
  cursor: default;
  color: var(--tinte-leise);
}

/* Ein Punkt der Tageskontrolle, der eine Zahl will. Antippen genuegt hier
   nicht: Ein Haken auf «O2 10L Fahrzeug in Bar» wuerfe die Zahl weg, und
   genau sie ist der Nachweis. */
.messen {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 10px 11px 6px;
  margin: 0 -10px 0 -6px;
}

.messen .amt__kasten {
  flex: none;
}

.messen__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 200px;
  cursor: pointer;
}

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

.messen__eingabe input {
  width: 5.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.messen__einheit {
  font-size: 12.5px;
  color: var(--tinte-leise);
  min-width: 2.2em;
}

/* Gesetzt heisst hier: Es steht ein Wert da. Der Haken sagt nicht, dass alles
   gut ist — das sagt die Zahl daneben. */
.amt__kasten--gesetzt {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

/* Unter der Vorgabe. Gelb, weil jemand etwas tun muss: Die Flasche gehoert
   gewechselt. Die Zahl bleibt lesbar stehen, sie ist der Grund. */
.messen--zuwenig .amt__kasten {
  background: var(--gelb);
  border-color: var(--gelb-tief);
  color: var(--gelb-tief);
}

.messen--zuwenig .amt__fuss {
  color: var(--gelb-tief);
}

.messen--zuwenig .messen__eingabe input {
  border-color: var(--gelb-tief);
}

/* Der Fuss einer Zeile: Verweis auf die Detailliste und der Aufklapper. */
.fach__fuss {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 8px 40px;
}

/* Der Aufklapper nimmt die Zeile fuer sich. Als Flexkind schrumpfte er auf
   seinen Inhalt, und die siebenundvierzig Medikamente standen in einer
   Spalte von dreihundert Pixeln neben tausend leeren. */
.fach__mehr {
  margin: 0;
  flex: 1 1 100%;
  min-width: 0;
}

/* Die Liste selbst bleibt lesbar breit. Eine Zeile mit drei Woertern, die
   ueber tausendvierhundert Pixel laeuft, liest sich schlechter als eine
   kurze: Das Auge verliert beim Ruecksprung die Zeile. */
.fach__mehr .inventar {
  max-width: 78ch;
}

@media (max-width: 720px) {
  /* Auf dem Telefon steht das Feld unter dem Namen statt daneben: Neben einem
     langen Punktnamen bliebe ihm sonst eine Spalte von zwei Zeichen. */
  .messen__text {
    flex: 1 1 calc(100% - 40px);
  }

  .messen__eingabe {
    margin-left: 40px;
  }

  .fach__fuss {
    margin-left: 0;
  }
}

/* Eine Zeile in der Pflege der Pruefpunkte. Nicht antippbar wie im Dienst:
   Hier wird geaendert, nicht abgehakt, und ein Fehlgriff kostet eine Liste. */
.pruefzeile {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 2px;
  border-top: 1px solid var(--tinte-haarlinie);
  font-size: 13.5px;
}

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

.pruefzeile__name {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: inherit;
  text-decoration: none;
}

a.pruefzeile__name:hover {
  color: var(--blau);
  text-decoration: none;
}

.pruefzeile__zahlen {
  flex: 0 1 auto;
  font-size: 12px;
}

/* Stillgelegt heisst nicht geloescht: An dem Punkt haengen Eintraege
   abgeschlossener Laeufe. Er steht leiser da und bleibt lesbar. */
.pruefzeile--still .pruefzeile__name {
  color: var(--tinte-leise);
  text-decoration: line-through;
  text-decoration-color: var(--tinte-haarlinie);
}

/* ── Reihenfolge ziehen ─────────────────────────────────────────────
   Die Liste ist der Bezugsrahmen fuer offsetTop: ordnen.js misst jede
   Zeile an ihr, und ohne `position` waere das die naechste Karte. */
.ordnen {
  position: relative;
}

/* Der Griff. Sechs Punkte, leise, bis man ihn sucht: Er ist ein Werkzeug
   am Rand der Zeile, nicht ihr Inhalt. */
.griff {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 30px;
  margin: -6px 0 -6px -4px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tinte-haarlinie);
  cursor: grab;
  touch-action: none;
  transition: color var(--zeit-farbe) ease-out,
    background-color var(--zeit-farbe) ease-out;
}

.griff svg {
  width: 10px;
  height: 15px;
}

.pruefzeile:hover > .griff,
.position:hover > .griff,
.griff:focus-visible {
  color: var(--tinte-leise);
}

.griff:hover {
  color: var(--tinte);
  background: var(--grund);
}

.griff:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 1px;
}

/* In einer Positionszeile stehen die Felder 38 Pixel hoch; der Griff steht
   auf ihrer Mitte und nicht an der Oberkante. */
.position > .griff {
  height: 38px;
  margin: 0 -2px 0 -4px;
  padding: 0;
}

/* In der Fachzeile steht der Griff auf der Mitte des Namens. */
.pruefzeile > .griff {
  align-self: center;
}

/* Die Zeile, die gerade gezogen wird. Sie hebt sich ab, damit man sieht,
   was man in der Hand hat, und traegt eine Flaeche, damit die Nachbarn,
   die unter ihr durchgleiten, nicht durchscheinen. */
.wird-gezogen {
  position: relative;
  z-index: 3;
  background: var(--buehne);
  border-radius: var(--r-feld);
  box-shadow: 0 10px 28px -10px rgba(22, 24, 26, 0.28),
    0 1px 3px rgba(22, 24, 26, 0.08);
}

.wird-gezogen > .griff {
  color: var(--blau);
  cursor: grabbing;
}

/* Waehrend des Ziehens markiert der Browser sonst jedes Wort, ueber das
   der Zeiger faehrt. */
html.zieht,
html.zieht * {
  user-select: none;
  cursor: grabbing !important;
}

/* Was das Ziehen zurueckmeldet, neben dem Titel der Liste. Leise, solange
   es nur ein Hinweis ist; blau fuer einen Augenblick, wenn gespeichert
   wurde; rot, wenn nicht. */
.ordnen__stand {
  margin-left: auto;
  transition: color var(--zeit-mass) ease-out;
}

.ordnen__stand--frisch {
  color: var(--blau);
}

.ordnen__stand--fehler,
.ordnen__stand--fehler.ordnen__stand--frisch {
  color: var(--hoch);
}

/* Einen Bereich umbenennen: das Feld sitzt, wo die Ueberschrift sass. */
.bereichform {
  gap: 8px;
}

.bereichform input[type='text'] {
  flex: 0 1 280px;
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 7px 11px;
  font-size: 14px;
}

.bereich__aendern {
  margin-left: 4px;
}

/* Ein Fach aendern, in seiner eigenen Zeile. Eine Flaeche im Hauch der
   Auswahlfarbe, damit klar ist, welche Zeile gerade offen ist. */
.fachform {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 12px;
  align-items: end;
  margin: 4px 0 6px;
  padding: 14px 14px 12px;
  border-radius: var(--r-feld);
  background: var(--buehne);
  border: 1px solid var(--blau);
}

.fachform .formularreihe {
  grid-column: 1 / -1;
}

.fachform__knoepfe {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Das Inventar eines Fahrzeugs, unter dessen Tagescheck. Eingerueckt und
   ohne Trennlinie: Es gehoert zum Wagen darueber und ist keine neue Zeile
   der Liste. */
.pruefzeile--unter {
  border-top: 0;
  padding-top: 0;
  padding-left: 22px;
}

/* Eine Zahl von drei Stellen braucht keine Feldbreite von halber Karte. */
.feld--schmal {
  max-width: 220px;
}

.pruefzeile--gewaehlt {
  background: var(--blau-hauch);
  border-radius: var(--r-feld);
}

.pruefzeile > form:not(.fachform) button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tinte-haarlinie);
}

.pruefzeile > form:not(.fachform) button:hover {
  color: var(--blau);
}

.verweiswahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.spalte {
  display: flex;
  flex-direction: column;
  gap: var(--teilung);
  min-width: 0;
}

/* Die Detailliste eines Fachs in den Einstellungen. Eingeklappt, weil das
   WB 31 achtunddreissig Faecher hat und niemand sie alle gleichzeitig
   aendert. */
.positionen {
  flex: 1 1 100%;
  margin: 2px 0 6px;
}

.positionen > summary {
  font-size: 12px;
  color: var(--tinte-leise);
  cursor: pointer;
  padding: 3px 0;
  list-style: none;
}

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

.positionen > summary::before { content: "+ "; }
.positionen[open] > summary::before { content: "− "; }
.positionen > summary:hover { color: var(--blau); }

.position {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid var(--tinte-zart);
}

/* Die Breiten muessen den Typ-Selektor bei Zeile 1600 schlagen, der jedem
   Feld `width: 100%` gibt. Deshalb steht der Typ hier mit dabei. */
.position input[type='number'].position__anzahl {
  flex: none;
  width: 4.5em;
  min-height: 38px;
  padding: 7px 9px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.position input[type='text'].position__text {
  flex: 2 1 180px;
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 7px 11px;
  font-size: 13px;
}

/* Der Inhalt einer Position, eine Unterposition je Zeile. Ein Textfeld und
   keine Tabelle: Die sieben Schluessel der Schluesselmappe tippt man am
   Stueck ab, nicht Zeile fuer Zeile in sieben Formularen. */
.position textarea.position__inhalt {
  flex: 3 1 220px;
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
}

.position button {
  flex: none;
  border: 0;
  background: transparent;
  padding: 9px 0 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tinte-haarlinie);
}

.position button:hover { color: var(--blau); }

.position--neu {
  border-top: 1px solid var(--tinte-haarlinie);
}

@media (max-width: 720px) {
  .position__text,
  .position__inhalt {
    flex: 1 1 100%;
  }
}

/* `.fach__verweis` ist entfallen: Der Verweis von einem Punkt auf ein anderes
   Pruefobjekt hiess «Detailliste» und fuehrte auf dessen Startseite. Die
   Regel steht hier nicht mehr; die Spalte in der Datenbank bleibt. */

/* Die Freigabe eines Moduls. Sie steht ganz oben in seinen Einstellungen,
   weil sie die erste Frage beantwortet: Gibt es das hier fuer das Team
   ueberhaupt? */
.freigabe {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

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

.freigabe__text .klein {
  max-width: 72ch;
}

@media (max-width: 720px) {
  .freigabe form,
  .freigabe .pille {
    width: 100%;
  }
}

/* Das Zeichen sitzt in der Zeile der Überschrift und nicht darüber. */
.freigabe__text strong {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-weight: 500;
}

/* Eine Mail, die nicht hinausging. Rot und nicht gelb: Gelb heisst im
   Portal «jemand muss etwas tun», rot heisst «hier ging etwas schief». */
.warnung-text {
  color: var(--hoch);
}

/* ── Rundgang ─────────────────────────────────────────────────────────
   Der Knopf im Menue sitzt neben der Uebersicht, weil der Rundgang dort
   beginnt. Blau und mit Kompass, damit er sich von den Bereichen abhebt:
   Er ist kein Ort, an den man geht, sondern eine Fuehrung durch alle. */
.navigation a.navigation__rundgang {
  gap: 6px;
  color: var(--blau);
}

.navigation a.navigation__rundgang svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.navigation a.navigation__rundgang:hover {
  background: var(--blau-hauch);
  color: var(--blau-tief);
}

/* Die Schicht ueber der Seite. Sie faengt die Klicks, damit niemand
   waehrend der Erklaerung aus Versehen etwas abhakt. */
.rundgang {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.rundgang[hidden] {
  display: none;
}

/* Das Licht: ein Ausschnitt im abgedunkelten Rest. Der Schatten ist der
   Vorhang, das Loch darin das hervorgehobene Stueck der Seite. */
.rundgang__licht {
  position: fixed;
  border-radius: var(--r-blatt);
  box-shadow: 0 0 0 200vmax rgba(22, 24, 26, 0.62);
  pointer-events: none;
  transition: top var(--zeit-dialog) var(--schwung),
    left var(--zeit-dialog) var(--schwung),
    width var(--zeit-dialog) var(--schwung),
    height var(--zeit-dialog) var(--schwung);
}

/* Ohne Ziel liegt der Vorhang ueber allem, und die Karte steht in der Mitte. */
.rundgang--ohne-ziel .rundgang__licht {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.rundgang__karte {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 16px 20px 18px;
  border-radius: var(--r-blatt);
  background: var(--buehne);
  box-shadow: 0 18px 50px -18px rgba(22, 24, 26, 0.45),
    0 2px 6px rgba(22, 24, 26, 0.12);
  outline: none;
  transition: top var(--zeit-dialog) var(--schwung),
    left var(--zeit-dialog) var(--schwung);
}

.rundgang__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rundgang__stand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}

.rundgang__zu {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  border: 0;
  border-radius: var(--r-pille);
  background: transparent;
  color: var(--tinte-leise);
  cursor: pointer;
}

.rundgang__zu:hover {
  background: var(--grund);
  color: var(--tinte);
}

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

.rundgang__bahn {
  height: 3px;
  margin: 10px 0 14px;
  border-radius: var(--r-pille);
  background: var(--tinte-zart);
  overflow: hidden;
}

.rundgang__bahn span {
  display: block;
  height: 100%;
  background: var(--blau);
  transform-origin: left;
  transition: transform var(--zeit-dialog) var(--schwung);
}

.rundgang__titel {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
  text-wrap: balance;
}

.rundgang__text p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinte);
  max-width: 60ch;
}

.rundgang__text p + p {
  margin-top: 8px;
}

.rundgang__knoepfe {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.rundgang__knoepfe .pille[disabled] {
  visibility: hidden;
}

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

/* Auf dem Telefon ein Blatt am unteren Rand: Das Ziel steht darueber und
   bleibt sichtbar, und die Knoepfe liegen unter dem Daumen. */
@media (max-width: 720px) {
  .rundgang:not(.rundgang--ohne-ziel) .rundgang__karte {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    max-height: 48vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rundgang__licht,
  .rundgang__karte,
  .rundgang__bahn span {
    transition: none;
  }
}

/* Der Haken auf einem Erfassen-Knopf: Fuer diese Schicht steht schon ein
   Rapport, der Knopf ergaenzt ihn. */
.erfassen__haken {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* Der QR-Code eines Pruefobjekts in den Einstellungen. Pixelgenau
   vergroessert, damit die Module scharf bleiben und kein Telefon an
   weichgezeichneten Kanten scheitert. */
.qrkarte {
  align-items: flex-start;
}

.qrkarte__bild {
  width: 164px;
  height: 164px;
  image-rendering: pixelated;
  border-radius: var(--r-feld);
  border: 1px solid var(--tinte-zart);
}

.qrkarte__adresse {
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}


/* ── Projekte ───────────────────────────────────────────────────────
   Vision, Leitziele, Fahrplan, Tagebuch, Umfragen. Blau traegt alles,
   was sich bewegt; Gelb steht nur dort, wo das Team etwas tun soll, eine
   offene Umfrage. Gruen und Rot gehoeren der Belastung und kommen hier
   nicht vor. */



/* ── Vision ─────────────────────────────────────────────────────────── */

.vision {
  display: grid;
  gap: 26px;
  padding: 30px 32px 26px;
  border-radius: var(--r-buehne);
}

.vision__satz {
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  font-weight: 360;
  letter-spacing: -0.03em;
  line-height: 1.16;
  max-width: 40ch;
  text-wrap: balance;
}

.vision__satz em {
  font-style: normal;
  color: var(--blau);
}

.vision__fuss {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.leitziele {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--tinte);
}

.leitziel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px 4px 0;
}

.leitziel + .leitziel {
  padding-left: 18px;
  border-left: 1px solid var(--tinte-haarlinie);
}

.leitziel__name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.leitziel__text {
  font-size: 12.5px;
  color: var(--tinte-leise);
  max-width: 32ch;
}

.leitziel__stand {
  display: flex;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
  align-items: center;
}

/* Ein Kaestchen je Projekt unter dem Leitziel, gefuellt nach Phase.
   Keine Prozentzahl: Wie weit ein Projekt ist, laesst sich nicht messen,
   nur in welcher Phase es steht. */
.leitziel__projekt {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--blau);
}
.leitziel__projekt--planung { background: linear-gradient(to top, var(--blau) 33%, transparent 33%); }
.leitziel__projekt--umsetzung { background: linear-gradient(to top, var(--blau) 66%, transparent 66%); }
.leitziel__projekt--fertig { background: var(--blau); }
.leitziel__projekt--idee { border-style: dashed; border-color: var(--tinte-leise); }

/* ── Fahrplan ───────────────────────────────────────────────────────── */

.fahrplan {
  --namen: 210px;
  overflow: visible;
  scrollbar-width: thin;
  scrollbar-color: var(--tinte-haarlinie) transparent;
  margin: 0 -4px;
  padding: 0 4px;
}

.fahrplan__innen {
  min-width: 700px;
  position: relative;
  padding-top: 26px;
}

.fahrplan__kopf,
.fahrplan__zeile {
  display: grid;
  grid-template-columns: var(--namen) minmax(0, 1fr);
  align-items: center;
}

.fahrplan__monate {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-bottom: 1px solid var(--tinte);
}

.fahrplan__monate span {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding: 0 0 8px 6px;
  border-left: 1px solid var(--tinte-zart);
}

.fahrplan__monate span.jahr { color: var(--tinte); border-left-color: var(--tinte-haarlinie); }

.fahrplan__zeile {
  min-height: 52px;
  border-bottom: 1px solid var(--tinte-zart);
}

.fahrplan__zeile:last-child { border-bottom: 0; }

.fahrplan__name {
  display: grid;
  gap: 1px;
  padding-right: 16px;
  min-width: 0;
  text-decoration: none;
  color: var(--tinte);
}

.fahrplan__name strong {
  font-weight: 480;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

a.fahrplan__name:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.fahrplan__bahn {
  position: relative;
  height: 52px;
  background-image: repeating-linear-gradient(
    to right, var(--tinte-zart) 0 1px, transparent 1px calc(100% / 12));
}

.balken {
  position: absolute;
  top: 50%;
  height: 12px;
  transform: translateY(-50%);
  border-radius: var(--r-pille);
  background: var(--blau-hauch);
  box-shadow: inset 0 0 0 1px rgba(44, 82, 157, 0.28);
}

/* Der vergangene Teil des Balkens ist satter. Er sagt nicht «zu 40 %
   erledigt», sondern nur: diese Zeit ist vorbei. */
.balken__vorbei {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: rgba(44, 82, 157, 0.22);
}

.balken--geplant {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--tinte-leise);
}

.balken--fertig {
  background: var(--tinte-zart);
  box-shadow: none;
}

.marke-ms {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--buehne);
  border: 2px solid var(--blau);
  cursor: default;
}

.marke-ms--erreicht { background: var(--blau); }
.marke-ms--fertig { background: var(--tinte-leise); border-color: var(--tinte-leise); }
.marke-ms--team {
  width: 18px;
  height: 18px;
  background: var(--gelb);
  border: 1.5px solid var(--tinte);
}

/* Der Meilenstein verraet seinen Namen beim Zeigen. Auf dem Telefon steht
   er ohnehin in der Liste darunter. */
.marke-ms::after {
  content: attr(data-titel);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--tinte);
  color: var(--buehne);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--zeit-mass) var(--schwung), transform var(--zeit-mass) var(--schwung);
  z-index: 3;
}

.marke-ms:hover::after,
.marke-ms:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.marke-ms:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

.fahrplan__heute {
  position: absolute;
  top: 10px;
  bottom: 0;
  left: calc(var(--namen) + (100% - var(--namen)) * var(--heute));
  width: 0;
  border-left: 1px solid var(--tinte);
  pointer-events: none;
  z-index: 2;
}

.fahrplan__heute span {
  position: absolute;
  top: -12px;
  left: 0;
  transform: translateX(-50%);
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tinte);
  color: var(--buehne);
  padding: 2px 7px;
  border-radius: var(--r-pille);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--tinte-leise);
}

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

.legende .marke-ms {
  position: static;
  transform: none;
  display: inline-block;
}

/* ── Phase ──────────────────────────────────────────────────────────── */

.phase {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}

.phase__stufen { display: inline-flex; gap: 3px; }

.phase__stufen i {
  width: 16px;
  height: 6px;
  border-radius: var(--r-pille);
  background: var(--tinte-zart);
}

.phase__stufen i.an { background: var(--blau); }
.phase--fertig .phase__stufen i.an { background: var(--tinte-leise); }

/* ── Projektliste ───────────────────────────────────────────────────── */

.spalten--projekt {
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.1fr) 170px minmax(0, 1fr) 110px;
}

.spalten--projekt .zeile__name { display: grid; gap: 3px; }

.spalten--projekt .zeile__name a { font-weight: 480; }

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

.naechst b { font-weight: 500; color: var(--tinte); }

.frisch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--blau-tief);
}

.frisch::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blau);
}

/* ── Was sich bewegt ────────────────────────────────────────────────── */

.bewegung { display: grid; }

.regung {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--tinte-haarlinie);
}

.regung__wann {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinte-leise);
  padding-top: 2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.regung__wann--neu { color: var(--blau); }

.regung__inhalt { display: grid; gap: 4px; min-width: 0; }

.regung__projekt {
  font-size: 13px;
  font-weight: 500;
  color: var(--tinte);
  text-decoration: none;
}

.regung__projekt:hover { text-decoration: underline; text-underline-offset: 3px; }

.regung__text { font-size: 13.5px; line-height: 1.5; }

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

/* ── Gefragt: eine Bitte ans Team ───────────────────────────────────── */

.gefragt {
  background: var(--gelb);
  color: var(--tinte);
  border-radius: var(--r-blatt);
  padding: 18px 20px;
  display: grid;
  gap: 10px;
}

.gefragt h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }

.gefragt p { font-size: 13.5px; max-width: 52ch; }

.gefragt__fuss {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gefragt .pille { background: var(--tinte); color: var(--buehne); border-color: var(--tinte); }
.gefragt .pille:hover { background: var(--blau-tief); border-color: var(--blau-tief); }

.antworten { display: inline-flex; gap: 3px; align-items: center; }
.antworten i { width: 7px; height: 14px; border-radius: 2px; background: rgba(22, 24, 26, 0.18); }
.antworten i.ja { background: var(--tinte); }

/* ── Detail: Phasenbahn ─────────────────────────────────────────────── */

.phasenbahn {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  counter-reset: stufe;
}

.stufe {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 26px 16px 2px 0;
}

.stufe::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tinte-zart);
}

.stufe::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--buehne);
  border: 2px solid var(--tinte-haarlinie);
}

.stufe--vorbei::before { background: var(--blau); }
.stufe--vorbei::after { background: var(--blau); border-color: var(--blau); }

.stufe--jetzt::before { background: linear-gradient(to right, var(--blau) 40%, var(--tinte-zart) 40%); }
.stufe--jetzt::after {
  border-color: var(--blau);
  box-shadow: 0 0 0 5px var(--blau-hauch);
}

.stufe__name { font-size: 15px; font-weight: 500; }
.stufe--kommt .stufe__name { color: var(--tinte-leise); font-weight: 420; }
.stufe__wann { font-size: 12.5px; color: var(--tinte-leise); }

/* ── Detail: Tagebuch ───────────────────────────────────────────────── */

.tagebuch { display: grid; }

.notiz {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--tinte-haarlinie);
}

.notiz__wann { display: grid; gap: 2px; align-content: start; }
.notiz__tag { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.notiz__jahr { font-size: 12px; color: var(--tinte-leise); }

.notiz__inhalt { display: grid; gap: 8px; min-width: 0; }
.notiz__titel { font-size: 15.5px; font-weight: 480; letter-spacing: -0.01em; }
.notiz__text { font-size: 14px; line-height: 1.6; max-width: 66ch; }
.notiz__text ul { display: grid; gap: 4px; margin-top: 6px; }
.notiz__text li { padding-left: 16px; position: relative; }
.notiz__text li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--tinte-leise);
}
.notiz__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinte-leise); }

.anhang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-feld);
  font-size: 13px;
  color: var(--tinte);
  text-decoration: none;
  width: fit-content;
  transition: border-color var(--zeit-farbe);
}
.anhang:hover { border-color: var(--blau); }
.anhang svg { color: var(--blau); }

/* ── Detail: Steckbrief, Meilensteine ───────────────────────────────── */

.steckbrief { display: grid; gap: 0; }
.steckbrief div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--tinte-zart);
  font-size: 13.5px;
}
.steckbrief dt { color: var(--tinte-leise); font-size: 12.5px; padding-top: 1px; }
.steckbrief dd a { color: var(--tinte); }

.meilensteine { display: grid; }
.meilenstein {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--tinte-zart);
  font-size: 13.5px;
}
.meilenstein__zeichen {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--blau);
  display: grid;
  place-items: center;
}
.meilenstein--erreicht .meilenstein__zeichen { background: var(--blau); }
.meilenstein--erreicht .meilenstein__zeichen svg { color: #fff; }
.meilenstein--team .meilenstein__zeichen { background: var(--gelb); border-color: var(--tinte); border-width: 1.5px; }
.meilenstein--erreicht .meilenstein__name { color: var(--tinte-leise); }
.meilenstein__wann { font-size: 12.5px; color: var(--tinte-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .fahrplan { overflow-x: auto; }
}

@media (max-width: 1000px) {
  .leitziele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leitziel:nth-child(3) { padding-left: 0; border-left: 0; }
  .leitziel:nth-child(n + 3) { border-top: 1px solid var(--tinte-haarlinie); }
  .spalten--projekt { grid-template-columns: minmax(0, 2fr) 160px minmax(0, 1fr); }
  .spalten--projekt > :nth-child(2),
  .spalten--projekt > :nth-child(5) { display: none; }
}

@media (max-width: 720px) {
  .vision { padding: 22px 20px 18px; border-radius: var(--r-blatt); }
  .leitziele { grid-template-columns: minmax(0, 1fr); }
  .leitziel, .leitziel + .leitziel { padding: 12px 0 8px; border-left: 0; }
  .leitziel + .leitziel { border-top: 1px solid var(--tinte-haarlinie); }
  .fahrplan { --namen: 150px; }
  .spalten--projekt { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .spalten--projekt.zeile--kopf { display: none; }
  .spalten--projekt > :nth-child(4) { display: none; }
  .phasenbahn { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .notiz { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .notiz__wann { display: flex; gap: 6px; align-items: baseline; }
}

/* Scrollt der Fahrplan seitlich, bleiben die Namen stehen. */
@media (max-width: 1180px) {
  .fahrplan__name,
  .fahrplan__kopf > span:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    align-self: stretch;
    align-content: center;
    background: var(--buehne);
    box-shadow: 1px 0 0 var(--tinte-haarlinie);
    padding-left: 2px;
  }
}

/* ── Umfrage ────────────────────────────────────────────────────────── */

.umfrage { display: grid; gap: 14px; }

.wahlen { display: grid; gap: 8px; }

.wahlkarte {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-feld);
  background: var(--buehne);
  cursor: pointer;
  transition: border-color var(--zeit-farbe), background-color var(--zeit-farbe);
}

.wahlkarte:hover { border-color: var(--blau); }
.wahlkarte:has(input:checked) { border-color: var(--blau); background: var(--blau-hauch); box-shadow: inset 0 0 0 1px var(--blau); }
.wahlkarte input { margin: 3px 0 0; width: 17px; height: 17px; }
.wahlkarte strong { font-weight: 500; font-size: 14.5px; }
.wahlkarte span { grid-column: 2; font-size: 13px; color: var(--tinte-leise); }

.ergebnis { display: grid; gap: 10px; }

.ergebnis__zeile {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: center;
  font-size: 13.5px;
}

.ergebnis__bahn { height: 10px; border-radius: var(--r-pille); background: var(--tinte-zart); overflow: hidden; }
.ergebnis__bahn i { display: block; height: 100%; border-radius: inherit; background: var(--blau); }
.ergebnis__zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinte-leise); }

/* ── Ideen zum Projekt ──────────────────────────────────────────────── */

.projektideen { display: grid; }

.projektidee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--tinte-haarlinie);
}

.projektidee__text { font-size: 14px; }
.projektidee__wer { font-size: 12px; color: var(--tinte-leise); }
.projektidee__antwort {
  grid-column: 1 / -1;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--r-feld);
  background: var(--grund);
}
.projektidee__antwort b { font-weight: 500; }

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

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

/* ── Vision an Ort bearbeiten ───────────────────────────────────────── */

.vision__anzeige { display: grid; gap: 26px; }

.vision__werkzeug { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.vision--bearbeiten { box-shadow: var(--schatten), inset 0 0 0 1.5px var(--blau); }

.vision__form { display: grid; gap: 18px; }

.vision__eingabe {
  font: inherit;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 360;
  letter-spacing: -0.025em;
  line-height: 1.25;
  min-height: 5.5em;
}

.leitziele--form .leitziel { gap: 8px; }
.leitziele--form input { font-weight: 500; }
.leitziele--form textarea { font-size: 13px; resize: vertical; }

/* ── Projekte: Ergaenzungen fuer den Betrieb ─────────────────────────── */

.karte .vision__titel { font-size: 11px; letter-spacing: 0.14em; }

.gefragt__frist {
  background: var(--tinte);
  color: var(--gelb);
  width: fit-content;
}

.fahrplan__ohne {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

.legende__balken {
  position: static;
  transform: none;
  display: inline-block;
  width: 26px;
}

.haken-zeile {
  display: flex;
  gap: 9px;
  align-items: center;
  cursor: pointer;
}

.umfrage-felder {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-feld);
  background: var(--grund);
}

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

.wahlen { border: 0; margin: 0; padding: 0; }
.wahlen legend { margin-bottom: 8px; padding: 0; }

.bemerkungen {
  display: grid;
  gap: 8px;
  padding: 4px 14px 14px;
  font-size: 13.5px;
}
.bemerkungen li {
  padding: 8px 12px;
  border-radius: var(--r-feld);
  background: var(--grund);
}

.projektidee__werkzeug,
.verwalten__aktion {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.projektidee__werkzeug { grid-column: 1 / -1; }
.projektidee__werkzeug form { display: contents; }
.projektidee__antwortform { grid-column: 1 / -1; }

.verweisknopf {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--tinte-leise);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.verweisknopf:hover { color: var(--tinte); }
.notiz__loeschen { margin-left: auto; }

.meilensteinzeile {
  grid-template-columns: minmax(0, 1fr) 160px 90px;
  align-items: center;
}
.meilensteinzeile__stand { white-space: nowrap; }

.spalten--verwalten {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) 130px 210px;
}
.spalten--verwalten .zeile__name { display: grid; gap: 2px; }

@media (max-width: 720px) {
  .wahlzeile,
  .meilensteinzeile { grid-template-columns: minmax(0, 1fr); }
  .spalten--verwalten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .spalten--verwalten.zeile--kopf { display: none; }
}

/* Mit «Projekte» ist das Menue der Leitung um einen Punkt laenger. Auf
   mittleren Breiten ruecken die Punkte deshalb etwas zusammen, statt auf
   eine zweite Zeile zu brechen. Die Trefferflaeche bleibt 44 Pixel hoch. */
@media (max-width: 1560px) {
  .navigation a { padding: 0 10px; }
  .kopf__band { gap: 14px; }
}

/* Die Umfrage auf der Uebersicht: dieselbe gelbe Flaeche, knapp. */
.gefragt--knapp {
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--r-feld);
  text-decoration: none;
  transition: background-color var(--zeit-farbe);
}
.gefragt--knapp:hover { filter: brightness(0.96); }
.gefragt--knapp b { font-weight: 600; }
.projektidee > .zeichen { justify-self: start; }

/* ── Kennung ändern (Einstellungen · Konten) ───────────────────────── */

.kennung-aendern { margin-top: 3px; }
.kennung-aendern > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
  color: var(--blau);
  list-style: none;
}
.kennung-aendern > summary::-webkit-details-marker { display: none; }
.kennung-aendern > summary:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
  border-radius: 4px;
}
.kennung-aendern[open] > summary { color: var(--tinte-leise); }

/* ── Rucksack wählen (Stammliste nach dem Scannen) ─────────────────── */

.rucksackwahl { margin: 0; }
.rucksackwahl + .rucksackwahl .pruefobjekt { border-top: 1px solid var(--tinte-haarlinie); }
.rucksackwahl:first-of-type .pruefobjekt { border-top: 0; }
.rucksackwahl__knopf {
  width: calc(100% + 16px);
  min-height: 56px;
  background: none;
  border: 0;
  border-top: 1px solid var(--tinte-haarlinie);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.rucksackwahl__knopf:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}
.rucksackwahl__knopf .pruefobjekt__text { flex: 1 1 auto; }

/* Einen Eintrag im laufenden Check zurücknehmen. */
.fach__zurueck { margin: 0 0 4px; }
.fach__zurueck button {
  min-height: 32px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--blau);
  cursor: pointer;
  text-decoration: underline;
}
/* ── Kommentare an Mängeln ─────────────────────────────────────────── */

.kommentare {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--tinte-zart);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kommentar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
}
.kommentar__kopf {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--tinte-leise);
}
.kommentar__text {
  font-size: 13.5px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  min-width: 0;
}
.kommentar__weg { margin: 0; }
.kommentar__weg button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.kommentar-neu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
  color: var(--blau);
  list-style: none;
}
.kommentar-neu > summary::-webkit-details-marker { display: none; }
.kommentar-neu > summary:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
  border-radius: 4px;
}
.kommentar-neu__formular {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: 4px;
  max-width: 520px;
}
.kommentar-neu__formular textarea { width: 100%; }

/* Die Fahrzeugskizze. Die Punkte liegen in Prozent über der Zeichnung und
   behalten ihre Grösse, damit sie sich auf dem Telefon treffen lassen. */
.skizze {
  position: relative;
  margin: 0 22px 18px;
  color: var(--tinte);
  cursor: crosshair;
}

.skizze svg {
  display: block;
  width: 100%;
  height: auto;
}

.skizze__punkt,
.skizze__neu {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
}

.skizze__punkt {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #16181a;
  background: #efea62;
  border: 2px solid #16181a;
  cursor: pointer;
}

.skizze__punkt--quittiert {
  color: #ffffff;
  background: #2c529d;
  border-color: #ffffff;
}

.skizze__neu {
  border: 3px dashed #2c529d;
  background: rgba(44, 82, 157, 0.15);
  pointer-events: none;
}

.skizze__neu[hidden],
.skizze__formular[hidden] {
  display: none;
}

.skizze__formular {
  margin: 0 22px 18px;
}

.skizze__knoepfe {
  display: flex;
  gap: 10px;
}

@media (max-width: 720px) {
  .skizze,
  .skizze__formular {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* Die Vorschau des Fotos, bevor die Meldung hinausgeht. */
.mangel-vorschau {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.mangel-vorschau[hidden] {
  display: none;
}

.mangel-vorschau img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}