/* Blitz · Tourenplanung für Meemken & Sandmann
   Fortfuehrung der Designsprache aus der Prozess-Attrappe. Zwei bewusste
   Korrekturen: die Grundschrift ist groesser (Buerorechner, kein Handy), und
   das gedaempfte Grau ist dunkler, weil das alte #6b7280 auf dem warmen
   Hintergrund nur 4,1:1 erreichte und damit unter dem Lesbarkeitsminimum lag. */

:root {
  --bg: #f7f6f3;
  --flaeche: #ffffff;
  --leiste: #fbfaf8;
  --ink: #1f2328;
  --gedaempft: #5a6270;
  --linie: #e3e0d8;
  --linie-stark: #cdc8bc;

  --gruen: #2f6f4f;
  --gruen-tief: #245740;
  --gruen-hell: #eaf3ee;
  --rot: #b3261e;
  --rot-hell: #fbeae8;
  --orange: #8a6100;
  --orange-hell: #fdf3e0;

  /* Die Schrift der Wortmarke, aus dem Markenblatt. Sie gilt nur fuer den Namen
     Blitz, nirgends sonst: eine zweite Schrift im Fliesstext macht die Seite
     unruhig. Avenir Next liegt auf jedem Mac, Trebuchet faengt Windows ab. */
  --schrift-marke: "Avenir Next", "Futura", "Trebuchet MS", system-ui, sans-serif;

  --r-klein: 8px;
  --r: 12px;
  --schatten: 0 1px 2px rgba(31, 35, 40, .05);
  --schatten-hoch: 0 8px 24px rgba(31, 35, 40, .10);

  --z-leiste: 100;
  --z-overlay: 400;

  --tempo: 180ms;
  --kurve: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

/* Ein verstecktes Element bleibt versteckt, auch wenn weiter unten eine Regel
   ihm ein `display` gibt. Ohne das stand die Depotangabe weiter da, obwohl das
   Attribut gesetzt war. */
[hidden] { display: none !important; }

html { font-size: 17px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gruen-tief); }

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

/* ------------------------------------------------------------------ Kopf */

/* Kopf und Schrittleiste bleiben gemeinsam stehen. Eine Gesamtdatei bringt ueber
   hundert Stopps auf die Planen-Seite; wer unten steht, hatte sonst keinen Weg
   zurueck ausser scrollen. */
.kopfzone {
  position: sticky;
  top: 0;
  z-index: var(--z-leiste);
  background: var(--flaeche);

  /* Drei Spalten: ganz links das Zeichen der Software, daneben der Datei-Upload
     ueber die ganze Hoehe, rechts der geoeffnete Liefertag mit seinen Schritten.
     Die Spaltengrenze zwischen Upload und Liefertag traegt die Aussage, dass es
     zwei verschiedene Ebenen sind. */
  display: grid;
  /* Vier Spalten seit dem 02.08.: Marke, Dateienuebersicht, Fuhrpark, Liefertag.
     Der Fuhrpark stand vorher als stiller Knopf rechts, gehoert aber zur selben
     Ebene wie die Dateienuebersicht. */
  grid-template-columns: auto auto auto 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--linie);
}

/* Zeichen und Name stehen still da und tun nichts: sie sagen nur, welches
   Programm hier laeuft. Kein Link, denn der Weg zur Startseite liegt direkt
   daneben, und zwei Wege zum selben Ort nebeneinander liest man als zwei
   verschiedene Ziele.

   Die Marke liegt auf der Flaeche der Kopfzone, nicht in einer eigenen Zelle.
   Vorher trug sie denselben gedaempften Ton wie der Datei-Upload daneben und
   stiess ohne Abstand an dessen gruenen Balken: damit las sie sich als erster
   Reiter einer Reihe und nicht als Absender der ganzen Seite. So halten es die
   Kopfzeilen, von denen man es kennt (Stripe, Linear, Vercel, GitHub): die
   Marke steht frei, mit Luft nach rechts, und erst dahinter beginnt das
   Bedienbare. Der Schutzraum ist reichlicher als das Minimum aus dem
   Markenblatt (eine Markenhoehe geteilt durch vier), weil rechts keine Leere
   folgt, sondern sofort eine gefaerbte Flaeche.

   Links steht sie auf 1.6rem, derselben Kante wie die Ueberschrift im Inhalt
   darunter. Diese Kante laeuft ueber die ganze Seite durch. */
.kopfzone .marke {
  display: flex;
  align-items: center;
  gap: .42rem;
  /* Links 1.35rem statt 1.6rem: die Zeichenflaeche beginnt bei x=7 von 48, ihr
     erster Punkt liegt also gut 4 px innerhalb des Rahmens. Gemessen sitzt das
     Zeichen damit auf derselben Kante wie die Ueberschrift darunter, nicht
     rechnerisch daneben. */
  padding: .7rem 1.7rem .7rem 1.35rem;
  background: var(--flaeche);
  /* Seit dem 02.08. ein Link auf die Begruessung. Er sieht aus wie vorher: eine
     unterstrichene Wortmarke waere ein Bedienelement, und das ist sie nicht,
     sie ist der Absender der Seite. */
  text-decoration: none;
}
.kopfzone .marke:hover .wortmarke { color: var(--gruen-tief); }
.kopfzone .marke svg { display: block; width: 36px; height: 36px; }
/* Der Name traegt kein Grau: er ist keine Nebenangabe, sondern die Antwort auf
   die Frage, in welchem Programm man gerade steht. Eigene Schrift und eigenes
   Groessenverhaeltnis zum Zeichen: so steht im Markenblatt, und so ist der Name
   von der Beschriftung daneben zu unterscheiden, die dieselbe Systemschrift
   traegt wie der Rest der Seite. */
/* Ohne Kopfzone davor, denn der Name steht auch auf der Anmeldeseite, und dort
   gibt es keine. Nur die Groesse haengt am Ort: sie richtet sich nach dem
   Zeichen daneben, und das ist oben groesser als auf der Anmeldung. */
.wortmarke {
  font-family: var(--schrift-marke);
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--ink);
}
.kopfzone .wortmarke { font-size: 1.45rem; }

.kopfzone .bereich {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  /* Beidseitig begrenzt, seit die Marke daneben auf der freien Flaeche liegt:
     ohne die linke Kante verlaeuft die Zelle nach links ins Nichts, denn ihr
     gedaempfter Ton unterscheidet sich vom Weiss nur um vier Prozent. */
  border-left: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  color: var(--ink);
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  background: var(--leiste);
}
.kopfzone .bereich svg { color: var(--gruen); flex: 0 0 auto; }
/* Name oben, Zweck darunter. Nebeneinander machte die Spalte so breit, dass
   fuer den Liefertag daneben kaum Platz blieb. */
.kopfzone .bereich-text { display: flex; flex-direction: column; line-height: 1.25; }
.kopfzone .bereich-text .klein { font-weight: 500; }
.kopfzone .bereich:hover { background: var(--gruen-hell); color: var(--gruen-tief); }
/* Auf der Uploadseite selbst: man ist hier. Die linke Kante faerbt mit, sonst
   steht eine graue Linie unmittelbar neben dem gruenen Balken und die Zelle hat
   zwei Anfaenge. */
.kopfzone .bereich.an {
  background: var(--gruen-hell);
  color: var(--gruen-tief);
  border-left-color: var(--gruen);
  box-shadow: inset 3px 0 0 var(--gruen);
}

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

/* Sobald der Inhalt darunter durchlaeuft, hebt sich die Zone leicht ab. Nur ein
   Schatten, keine Hoehenaenderung: eine Leiste, die beim Scrollen schrumpft,
   verschiebt den Inhalt darunter, und die Verschiebung aendert die
   Scrollposition, die den Schrumpfvorgang ausgeloest hat. */
.kopfzone.kompakt { box-shadow: 0 2px 10px rgba(22, 24, 28, .07); }

.kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.6rem;
  flex: 1;
}

/* Der geoeffnete Verladetag. Sobald mehrere Tage im System sind, ist die
   gefaehrlichste Anzeige eine Tabelle ohne sichtbaren Tagesbezug. Seit der
   Schritt "Datei" weg ist, traegt die Marke auch den Dateinamen: er war sonst
   nirgends mehr zu sehen. */
.tagesmarke {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 0;
  line-height: 1.3;
}
.tagesmarke b { font-size: 1rem; font-weight: 650; color: var(--ink); }
.tagesmarke .datei {
  font-size: .87rem;
  font-weight: 400;
  color: var(--gedaempft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kopf .rechts { margin-left: auto; display: flex; gap: .55rem; align-items: center; }

/* --------------------------------------------------------------- Schritte */

.schritte {
  display: flex;
  gap: 0;
  padding: 0 1.6rem;
  background: var(--leiste);
  border-top: 1px solid var(--linie);
  overflow-x: auto;
}

.schritt {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.1rem .7rem 0;
  color: var(--gedaempft);
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
/* Die Linie zwischen zwei Schritten. Sie traegt die Aussage, die das Haekchen
   allein nicht macht: ohne Datei keine Planung, ohne Planung kein Ergebnis.
   Gepunktet, solange der Schritt davor offen ist, durchgezogen und gruen,
   sobald er erledigt ist. */
.schritt + .schritt { padding-left: 2.6rem; position: relative; }
.schritt + .schritt::before {
  content: "";
  position: absolute;
  left: .35rem;
  right: calc(100% - 2.25rem);
  top: 50%;
  border-top: 2px dotted var(--linie-stark);
}
/* Nur nach einem erledigten Schritt. Der Schritt, auf dem man gerade steht, ist
   noch nicht abgeschlossen: von dort aus bleibt die Linie gepunktet. */
.schritt.fertig + .schritt::before { border-top: 2px solid var(--gruen); }
.schritt .ziffer {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  font-size: .85rem;
  font-weight: 650;
  background: var(--flaeche);
}
.schritt.an { color: var(--gruen-tief); font-weight: 600; }
.schritt.an .ziffer { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.schritt.fertig .ziffer { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen-tief); }
a.schritt:hover { color: var(--ink); }

/* --------------------------------------------------------------- Struktur */

/* Der Inhalt laeuft ueber die volle Breite. Vorher standen 1360 px fest, und auf
   einem breiten Bildschirm hoerte alles bei etwa drei Vierteln auf: links ein
   Rand, rechts Leere. Genau deshalb wurden auch die Knoepfe oben rechts
   uebersehen, sie standen weit ausserhalb des Arbeitsbereichs.

   Fliesstext bleibt trotzdem schmal, siehe `.unter`. Eine Zeile ueber die volle
   Breite eines 34-Zoll-Schirms liest niemand gern. */
.inhalt { padding: 1.6rem 1.6rem 5rem; }
.schmal { max-width: 760px; }
/* Zwei Karten nebeneinander, aber nicht über einen 34-Zoll-Schirm gezogen. */
.mittel { max-width: 1040px; }

/* Die Wege der offenen Seite, direkt ueber dem Inhalt statt oben rechts am
   Bildschirmrand. Der Grund steht in grund.html: zwischen dem, woran gearbeitet
   wird, und der obersten Zeile liegen auf einem breiten Schirm 800 Pixel Leere,
   und was dort steht, sieht niemand.

   Links der Rueckweg, rechts der naechste Schritt. Dieselbe Ordnung auf jeder
   Seite, damit man nicht suchen muss: was einmal links stand, steht immer
   links. */
.handlungsleiste {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.handlungsleiste .weiter { margin-left: auto; display: flex; gap: .55rem; align-items: center; }
.handlungsleiste .zurueck { display: flex; gap: .55rem; align-items: center; }

/* Der Rueckweg traegt einen Pfeil und einen Rahmen. Grau und rahmenlos sah er
   aus wie eine Fusszeile, die nach oben gerutscht ist. */
.handlungsleiste .zurueck .knopf::before {
  content: "←";
  font-size: 1.05em;
  line-height: 1;
}

/* Von Tour zu Tour blaettern. Diese Knoepfe tragen ihren Pfeil selbst, denn
   rechts zeigt er nach rechts: mit dem automatischen Rueckweg-Pfeil stuende
   links „←← Tour 51“.

   Gedaempft, weil sie nicht der Weg dieser Seite sind, sondern der Weg zur
   naechsten. Der Rueckweg „Alle Touren“ bleibt der kraeftige daneben. */
.handlungsleiste .zurueck .knopf.blaettern::before { content: none; }
.handlungsleiste .blaettern {
  color: var(--gedaempft);
  font-variant-numeric: tabular-nums;
}
.handlungsleiste .blaettern:hover { color: var(--ink); }

h1 { font-size: 1.55rem; margin: 0 0 .3rem; letter-spacing: -.012em; text-wrap: balance; }
h2 { font-size: 1.2rem; margin: 0 0 .3rem; letter-spacing: -.008em; }
h3 { font-size: 1.02rem; margin: 0 0 .3rem; }

.unter { color: var(--gedaempft); margin: 0 0 1.1rem; max-width: 68ch; }
.klein { font-size: .9rem; color: var(--gedaempft); }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--schatten);
}

/* Gleich hohe Karten nebeneinander: sonst steht neben der kurzen Karte eine
   grosse leere Flaeche, die wie ein Fehler aussieht. */
.reihe { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: stretch; }
.reihe > * { flex: 1 1 320px; margin-bottom: 0; }
.reihe { margin-bottom: 1.1rem; }

/* --------------------------------------------------------------- Bedienung */

button, .knopf {
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  color: var(--ink);
  padding: .5rem 1rem;
  border-radius: var(--r-klein);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
button:hover, .knopf:hover { background: #f4f2ee; border-color: #b8b2a4; }
button:active, .knopf:active { transform: translateY(1px); }
button[disabled], .knopf[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

button.haupt, .knopf.haupt {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
  font-weight: 600;
}
button.haupt:hover, .knopf.haupt:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); }

button.still, .knopf.still { border-color: transparent; background: transparent; color: var(--gedaempft); }
button.still:hover, .knopf.still:hover { background: #efedE8; color: var(--ink); }

/* Derselbe Knopf, nur noch nicht bereit: gruen umrandet statt gefuellt. Er
   bleibt anklickbar, denn die Fuellung sagt "hier fehlt noch etwas" und nicht
   "das ist verboten". Daneben steht, was fehlt. */
button.offen, .knopf.offen {
  background: transparent;
  border-color: var(--gruen);
  color: var(--gruen-tief);
  font-weight: 600;
}
button.offen:hover, .knopf.offen:hover { background: var(--gruen-hell); border-color: var(--gruen-tief); }

button.gefahr:hover { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); }

.gross { padding: .7rem 1.4rem; font-size: 1.03rem; }

/* --------------------------------------------------------------- Tabellen */

table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--linie); }
th {
  color: var(--gedaempft);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  border-bottom-color: var(--linie-stark);
}
td.z, th.z { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.klickbar { cursor: pointer; transition: background var(--tempo) var(--kurve); }
tbody tr.klickbar:hover { background: var(--gruen-hell); }
.tabelle-rahmen { overflow-x: auto; }

.gut { color: var(--gruen); font-weight: 600; }
.schlecht { color: var(--rot); font-weight: 600; }

/* --------------------------------------------------------------- Hinweise */

.hinweis {
  border: 1px solid var(--linie);
  background: var(--leiste);
  border-radius: var(--r-klein);
  padding: .8rem 1rem;
  margin-bottom: .6rem;
  font-size: .96rem;
}
.hinweis b { display: block; margin-bottom: .1rem; }
.hinweis.stop { background: var(--rot-hell); border-color: rgba(179, 38, 30, .3); }
.hinweis.stop b { color: var(--rot); }
.hinweis.warn { background: var(--orange-hell); border-color: rgba(138, 97, 0, .3); }
.hinweis.warn b { color: var(--orange); }
.hinweis.info { background: var(--gruen-hell); border-color: rgba(47, 111, 79, .25); }
.hinweis.info b { color: var(--gruen-tief); }

/* Hinweise nebeneinander statt untereinander: zwoelf volle Textbreiten
   schieben sonst das Eigentliche unter den Bildschirmrand. */
.hinweisfeld {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  margin-top: 1rem;
}
.hinweisfeld .hinweis { margin-bottom: 0; }

details > summary {
  cursor: pointer;
  list-style: none;
  padding: .2rem 0;
}
details > summary::-webkit-details-marker { display: none; }
.auslese { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.auslese strong { font-size: 1.2rem; letter-spacing: -.008em; }
.auslese::before {
  content: "›";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gedaempft);
  transition: transform var(--tempo) var(--kurve);
  display: inline-block;
}
details[open] .auslese::before { transform: rotate(90deg); }

.pille {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid;
}
.p-gut { background: var(--gruen-hell); border-color: rgba(47,111,79,.3); color: var(--gruen-tief); }
.p-warn { background: var(--orange-hell); border-color: rgba(138,97,0,.3); color: var(--orange); }
.p-stop { background: var(--rot-hell); border-color: rgba(179,38,30,.3); color: var(--rot); }
.p-still { background: var(--bg); border-color: var(--linie-stark); color: var(--gedaempft); }

/* Hier stand `.ergaenzt`, der orange Kasten fuer vom Programm ergaenzte
   Angaben. Am 02.08. ist sein letzter Verwender gefallen: die Marke
   „angenommen“ am Ergebnis. Was Blitz ergaenzt hat, steht jetzt ausschliesslich
   in der Planung, an der markierten Zeile und damit dort, wo man es aendern
   kann. Orange bedeutet im Programm weiterhin „hier ist etwas zu pruefen“,
   getragen von `.hinweis.warn`, `.pille.p-warn` und `select.fehlt`. */

/* ---------------------------------------------------------------- Bilanz */

.bilanz { display: flex; flex-wrap: wrap; gap: 2.4rem; align-items: flex-end; }
.bilanz .posten .wert {
  font-size: 2rem;
  font-weight: 660;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.bilanz .posten .beschriftung { color: var(--gedaempft); font-size: .9rem; }
.bilanz .posten.heraus .wert { color: var(--gruen); font-size: 2.6rem; }

/* Der Weg zurück in die Einstellungen dieser Tour, im freien Platz rechts in
   der Kachel. Er steht bei den Zahlen, wegen derer man etwas ändern will, und
   nicht mehr am Bildschirmrand. Mittig statt unten bündig: neben Zahlen mit
   Beschriftung darunter säße ein Knopf auf der Grundlinie schief. */
.bilanz .tourdetails { margin-left: auto; align-self: center; }

/* -------------------------------------------------------------- Fortschritt */

.balken {
  height: 10px;
  background: #e9e6df;
  border-radius: 999px;
  overflow: hidden;
  margin: 1rem 0 .6rem;
}
/* Skaliert statt die Breite zu animieren: das kostet kein Neu-Layout. Die
   runden Enden kommen vom Elternteil, der ohnehin beschneidet. */
.balken div {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gruen);
  transition: transform 400ms var(--kurve);
}

.puls { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
        background: var(--gruen); margin-right: .5rem; animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------------------------------------------------------------- Formular */

input[type=file], input[type=number], input[type=text], input[type=time],
input[type=email], input[type=password], textarea, select {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-klein);
  background: var(--flaeche);
  color: var(--ink);
  max-width: 100%;
}
textarea { resize: vertical; }

/* Kundenblatt: beschriftetes Feld, Beschriftung im Stil der Steuerleiste. */
.feld { display: block; margin-bottom: .9rem; }
.feld > span {
  display: block;
  margin-bottom: .2rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  color: var(--gedaempft);
}
.feld input[type=text], .feld textarea { width: 100%; }
.feld input[type=email], .feld input[type=password] { width: 100%; }

/* ------------------------------------------------------------- Anmeldung */

/* Die Anmeldeseite hat keine Kopfzone, also traegt sie ihre Mitte selbst. */
.anmeldeseite { display: grid; place-items: center; min-height: 100vh; }
.anmeldung { width: min(26rem, calc(100vw - 2.4rem)); padding: 1.6rem 0 4rem; }
.anmeldung .marke { display: flex; align-items: center; gap: .42rem; margin-bottom: 1rem; }
.anmeldung .marke svg { width: 34px; height: 34px; }
/* Dasselbe Verhaeltnis von Zeichen zu Name wie oben in der Kopfzone. */
.anmeldung .wortmarke { font-size: 1.37rem; }
.anmeldung .karte { margin: 0; }
.anmeldung h1 { margin-top: 0; }
.anmeldung button { width: 100%; }

/* Kopfzeile: wer angemeldet ist, und der Weg hinaus. Der Name ist Text, kein
   Knopf, denn er fuehrt nirgendwohin. */
.kopf .zugang { display: flex; align-items: center; gap: .55rem; }

/* Eine Zeile, die nicht umbricht: Feld plus Knopf daneben. Nicht `.reihe`,
   denn die blaeht jedes Kind auf 320 px auf und schoebe den Knopf um. */
.zeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.zeile > input[type=text] { flex: 1 1 12rem; }

.ablage {
  border: 2px dashed var(--linie-stark);
  border-radius: var(--r);
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--leiste);
  transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}
.ablage.drueber { border-color: var(--gruen); background: var(--gruen-hell); }

.tagesliste { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tagesliste button {
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .9rem 1rem;
  width: 100%;
  text-align: left;
}
.tagesliste button strong { font-size: 1.05rem; }

/* ------------------------------------------------------------- Planen */

.tourblock {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  margin-bottom: 1.1rem;
  box-shadow: var(--schatten);
  overflow: hidden;

  /* Ein Sprung auf #tour59 landete sonst unter der Kopfzone und der Tourleiste,
     also genau hinter den beiden Leisten, die stehenbleiben. */
  scroll-margin-top: calc(var(--h-kopfzone, 6.6rem) + 4.2rem);
}

/* Wer aus dem Ergebnis auf eine bestimmte Tour springt, soll sehen, wo er
   gelandet ist. Der Rahmen bleibt, bis anderswo hingeklickt wird. */
.tourblock:target { border-color: var(--gruen); box-shadow: 0 0 0 2px var(--gruen-hell); }

/* Sprungmarken zu den Touren. Nur bei einer Gesamtdatei sichtbar, sonst waere
   es eine Leiste mit einem einzigen Griff. */
.tourwahl {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;

  /* Bleibt beim Scrollen unter der Kopfzone stehen. Sonst muss man von Tour 59
     ganz nach oben scrollen, nur um zu Tour 51 zu springen. Die Hoehe der
     Kopfzone kommt aus `--h-kopfzone`, gesetzt von grund.html. */
  position: sticky;
  top: var(--h-kopfzone, 6.6rem);
  z-index: calc(var(--z-leiste) - 1);

  /* Über den Rand des Inhalts hinaus, damit beim Durchscrollen darunter nichts
     seitlich vorbeiläuft. Das Padding des Inhalts wird nur dann aufgehoben,
     wenn die Leiste wirklich oben steht: ueber ihr koennen Hinweise zur Datei
     liegen. */
  margin: 0 -1.6rem 1.2rem;
  padding: .7rem 1.6rem;
  background: var(--bg);
  border-bottom: 1px solid var(--linie);
}
/* Der negative obere Rand ist seit dem 01.08. weg: über der Tourleiste steht
   jetzt immer die Handlungsleiste, die Tourleiste ist also nie mehr das erste
   Element im Inhalt. */

/* Hinweise zur Datei als Ganzes, zugeklappt ueber der Planung. */
details.dateibefunde { padding: .9rem 1.2rem; }
details.dateibefunde[open] { padding-bottom: 1.2rem; }
details.dateibefunde .auslese { display: flex; align-items: baseline; gap: .6rem; }
.tourwahl a {
  display: inline-block;
  min-width: 2.6rem;
  padding: .35rem .6rem;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.tourwahl a:hover { background: #f4f2ee; }
/* Alle Griffe sehen gleich aus. Der Zustand stand hier einmal mit in der
   Farbe, in drei Abstufungen: das machte aus einer Leiste ein Muster, das
   niemand liest. Hervorgehoben wird nur die Tour, auf der man gerade steht,
   und die Ausgeblendeten sind durchgestrichen. */

/* Die Tour, in der man gerade steht. Ohne diese Marke weiss man bei elf Touren
   nach zwei Sekunden Scrollen nicht mehr, wo man ist. */
.tourwahl a.hier {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
}
.tourwahl a.hier:hover { background: var(--gruen-tief); }

.tourkopf {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  padding: 1rem 1.3rem .5rem;
}
.tourkopf h2 { margin: 0; }
/* Der Knopf für den Einzellauf sitzt rechts am Tourkopf, damit er da ist, wo
   die Tour anfängt, und nicht erst am Ende ihrer Stoppliste. */
.tourkopf .nur-diese { margin-left: auto; align-self: center; }

.steuerung {
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: .3rem 1.3rem 1rem;
  border-bottom: 1px solid var(--linie);
}
.steuerung label { display: flex; flex-direction: column; gap: .2rem; }
.steuerung label > span,
.steuerung .vorschlag > span,
.steuerung .ab > span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 650;
  color: var(--gedaempft);
}
.steuerung .ab { display: flex; flex-direction: column; gap: .2rem; }
.steuerung .ab strong { font-size: 1rem; padding: .5rem 0; }

/* Auftragsliste: die eigentliche Arbeitsfläche, deshalb dicht und ruhig. */
table.auftraege { font-size: .95rem; }
/* Zeilenmarkierung beim Ueberfahren. Ueber die volle Bildschirmbreite verliert
   das Auge sonst die Zeile auf dem Weg vom Kunden zum Zeitfenster. */
table.auftraege tbody tr:hover td { background: var(--leiste); }
table.auftraege tbody tr.zubeachten:hover td { background: var(--orange-hell); }
table.auftraege th { padding: .5rem 1.3rem; }
table.auftraege td { padding: .35rem 1.3rem; }
table.auftraege th + th, table.auftraege td + td { padding-left: .5rem; }
table.auftraege td:last-child, table.auftraege th:last-child { padding-right: 1.3rem; }
table.auftraege .nr { font-variant-numeric: tabular-nums; color: var(--gedaempft); }
/* Der Rahmen steht dauerhaft. Am 01.08. war er zwischenzeitlich weg und kam
   erst beim Ueberfahren, weil zweiundzwanzig Kaestchen mit Uhrsymbol das
   Unruhigste an der Tabelle waren. Dennis hat das am selben Abend zurueckgeholt:
   ein Feld, das erst unter dem Zeiger als Feld zu erkennen ist, sieht bis dahin
   aus wie eine Zahl zum Lesen, und dann probiert niemand, die Zeit zu aendern.
   Unter dem Zeiger und im Fokus wird der Rahmen nur kraeftiger. */
table.auftraege input[type=time] {
  width: 6.4rem;
  padding: .25rem .4rem;
  font-variant-numeric: tabular-nums;
}
/* `:not(.gesetzt)`, damit eine von Hand eingetragene Zeit ihren gruenen Rahmen
   auch unter dem Zeiger behaelt. Sonst verliert genau die Zeile ihre Marke,
   auf die man gerade zeigt. */
table.auftraege tbody tr:hover input[type=time]:not(.gesetzt),
table.auftraege input[type=time]:not(.gesetzt):focus,
table.auftraege input[type=time]:not(.gesetzt):hover { border-color: var(--gedaempft); }
table.auftraege input.gesetzt {
  border-color: var(--gruen);
  background: var(--gruen-hell);
  font-weight: 600;
}
tr.zubeachten > td { background: var(--orange-hell); }
tr.zubeachten + tr.anmerkung > td { background: var(--orange-hell); }
tr.anmerkung td {
  padding-top: 0;
  padding-bottom: .5rem;
  font-size: .88rem;
  color: var(--orange);
  border-bottom: 1px solid var(--linie);
}

/* Ein Befund, auf den jemand geantwortet hat. Er bleibt stehen, denn er traegt
   die Fahrernotiz, und die ist beim naechsten Oeffnen genauso nuetzlich wie
   beim ersten. Was aufhoert, ist die Aufforderung: kein Orange mehr, keine
   Handlung mehr offen. */
tr.anmerkung.still td { color: var(--gedaempft); }

/* ----------------------------------------------------------- Begruessung */

/* Der Standort in Gehlenberg traegt die Begruessung. Kein Schmuckbild: es ist
   das Haus, in dem Heiner sitzt, und es sagt in einem Blick, wessen Programm
   das hier ist.

   Ein Verlauf ueber die halbe Breite war der erste Versuch und der falsche:
   er verschluckte genau die Wand mit dem Firmenzeichen, also das, wofuer das
   Bild ueberhaupt dasteht. Jetzt liegt nur ein leichter Schleier auf dem
   ganzen Foto, und der Text traegt seine eigene Flaeche. Dieselbe weisse
   Kachel wie ueberall sonst in Blitz, damit die Seite nicht aus dem System
   faellt. */
.inhalt.werkbild {
  /* Der Abstand steht hier und nicht als Rand an der Kachel: ein Rand des
     ersten Kindes faellt mit dem Rand des Elternteils zusammen und schiebt das
     Bild nach unten. Oben stand dann ein grauer Streifen. */
  padding: 3.6rem 1.6rem 0;
  min-height: calc(100vh - var(--h-kopfzone, 4rem));
  background-image:
    linear-gradient(rgba(247, 246, 243, .1), rgba(247, 246, 243, .26)),
    url("/static/werk-gehlenberg.webp");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}

/* Eine Frage und eine Antwort, sonst nichts. Nicht senkrecht zentriert: der
   Blick faengt oben an, und eine Seite mit einem Satz in der Mitte wirkt wie
   ein Fehler, nicht wie ein Anfang. */
.begruessung {
  margin: 0;
  max-width: 34rem;
  padding: 2.2rem 2.4rem 2.4rem;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten-hoch);
  /* Hinter der Kachel wird das Foto weich. Ohne das liest sich die Backsteinwand
     durch die Flaeche hindurch und die Ueberschrift steht auf Unruhe. */
  backdrop-filter: blur(3px);
}
/* `balance` verteilt die Zeilen gleichmaessig, statt die erste bis zum Rand zu
   fuellen. Ohne das brach der Satz nach „was“ um. */
.begruessung h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

/* Auf schmalen Schirmen bleibt alles, wie es ist: die Kachel traegt den Text
   ohnehin selbst, das Bild braucht dort keinen dichteren Schleier. Nur der
   Abstand nach oben wird kleiner, sonst steht die Kachel auf halber Hoehe. */
@media (max-width: 760px) {
  .inhalt.werkbild { padding: 2rem 1rem 0; }
  .begruessung { padding: 1.8rem 1.6rem 2rem; }
}

/* Ein neues Fahrzeug: die Felder in einer Reihe, die umbricht. Untereinander
   waere die Kachel so hoch wie die Tabelle darueber, und das Anlegen ist der
   seltenere Vorgang. Der Knopf steht am Ende der Reihe auf derselben
   Grundlinie wie die Felder, nicht darunter. */
.neuesfahrzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem;
}
.neuesfahrzeug .feld { margin-bottom: 0; }
.neuesfahrzeug input[type=text] { width: 11rem; }
.neuesfahrzeug input[type=number] { width: 7rem; }
.neuesfahrzeug input[type=checkbox] { margin-bottom: .55rem; }

/* Der Erledigt-Knopf im Befund. Er muss ein Knopf sein: „still“ verschwand auf
   der orangen Flaeche zu einem grauen Wort, und ein Wort klickt niemand an.
   Er bleibt in derselben Zeile wie der Text, damit er nicht darunter
   herausrutscht und dort verloren steht. */
tr.anmerkung .erledigen {
  margin-left: .5rem;
  vertical-align: baseline;
  white-space: nowrap;
  background: var(--flaeche);
  color: var(--orange);
  border-color: rgba(138, 97, 0, .4);
}
tr.anmerkung .erledigen:hover { background: #fff; border-color: var(--orange); }
tr.anmerkung.still .erledigen { color: var(--gedaempft); border-color: var(--linie-stark); }

/* Der Haken hinter dem bis-Feld: „die angenommene Zeit passt so“. Er aendert
   an der Rechnung nichts, 06:00 bis 18:00 gilt vorher wie nachher. Er
   beantwortet nur die Frage, ob jemand hingesehen hat, und raeumt damit das
   Orange von der Zeile.

   Umrandet solange offen, gefuellt sobald quittiert: dieselbe Sprache wie am
   Knopf „Tour planen“, damit man sie nicht zweimal lernen muss. */
td.bisfeld { white-space: nowrap; }
button.haken {
  padding: .12rem .34rem;
  margin-left: .3rem;
  font-size: .8rem;
  line-height: 1.2;
  vertical-align: middle;
  color: var(--gruen);
  border-color: rgba(47, 111, 79, .45);
}
button.haken:hover { background: var(--gruen-hell); border-color: var(--gruen); }
button.haken.an {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
}
button.haken.an:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); }

/* Die Aktionsleiste bleibt am unteren Rand stehen, damit der Knopf bei langen
   Listen nicht erst erscrollt werden muss. */
.leiste {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .9rem 1.3rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten-hoch);
}
.leiste .wachsen { flex: 1; }
.leiste label { display: flex; align-items: center; gap: .5rem; }

/* --------------------------------------------------------- Übertragen */

.uebertragen { font-size: 1.05rem; }
.uebertragen table { font-size: 1.1rem; }
.uebertragen td { padding: .5rem .8rem; }
.uebertragen .platz-gross {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 2.5rem;
}
.uebertragen .kundennr {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.uebertragen input[type=checkbox] { width: 1.2rem; height: 1.2rem; }
.uebertragen tr:has(input:checked) td { opacity: .4; text-decoration: line-through; }

@media print {
  .kopf, .schritte, .leiste, .handlungsleiste, .knopf, button { display: none !important; }
  .karte, .tourblock { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------- Karte */

.kartenflaeche { height: 62vh; min-height: 380px; border-radius: var(--r); overflow: hidden;
                 border: 1px solid var(--linie); }
.tour-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .tour-raster { grid-template-columns: 1fr; } }

/* Umschalter zwischen optimierter und heutiger Reihenfolge. Zwei Knöpfe
   nebeneinander statt eines Hakens: es sind zwei Ansichten desselben Tages,
   und man soll auf einen Blick sehen, welche gerade gilt. */
.umschalter { display: inline-flex; border: 1px solid var(--linie-stark);
              border-radius: var(--r-klein); overflow: hidden; }
.umschalter button {
  border: none; border-radius: 0; background: var(--flaeche);
  color: var(--gedaempft); font-size: .92rem; font-weight: 600;
  padding: .45rem 1rem;
}
.umschalter button + button { border-left: 1px solid var(--linie-stark); }
.umschalter button:hover { background: #f4f2ee; color: var(--ink); }
.umschalter button.an { background: var(--gruen); color: #fff; }
.umschalter button.an:hover { background: var(--gruen-tief); }
.umschalter button:active { transform: none; }

.stoppliste { max-height: 62vh; overflow-y: auto; }
/* In der heutigen Reihenfolge sind die Nummern grau, passend zur grauen
   Linie auf der Karte. Sonst sähe die Liste aus wie ein Vorschlag. */
.stopp .platz.heute { background: var(--gedaempft); }
.stopp { display: flex; gap: .7rem; padding: .6rem .2rem; border-bottom: 1px solid var(--linie); }
.stopp:last-child { border-bottom: none; }
.stopp .platz {
  flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--gruen); color: #fff; font-size: .82rem; font-weight: 650;
}
.stopp.spaet .platz { background: var(--rot); }

/* Der Stopp, dessen Punkt auf der Karte gerade offen ist. Die Verbindung
   zwischen Liste und Karte muss in beide Richtungen sichtbar sein, sonst sucht
   man den angeklickten Kunden auf der Karte und findet ihn nicht. */
.stopp.gewaehlt { background: var(--gruen-hell); border-radius: var(--r-klein); }
.stopp.gewaehlt .platz { background: var(--gruen); }
.stopp:hover { background: var(--leiste); border-radius: var(--r-klein); }
.stopp .wer { font-weight: 550; }

.nrT { background: none; border: none; box-shadow: none; color: #fff; font-weight: 700; font-size: 11px; }

/* ------------------------------------------------------------------- Leer */

.leer { text-align: center; padding: 3rem 1.5rem; }
.leer h2 { margin-bottom: .4rem; }

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

/* Mehrere Lieferungen an eine Adresse sind ein Halt. Die weiteren Kunden
   stehen unter dem ersten, eingerueckt und leicht abgesetzt: es ist eine
   Anfahrt, aber es sind zwei Papiere. */
.stopp .wer.mit { font-weight: 500; color: var(--gedaempft); }
tr.mitstopp td { border-top: none; }
tr.mitstopp .platz-gross { opacity: .35; }

/* --------------------------------------------- Ausgesetzt und nicht geplant */

/* Aussetzen ist kein Loeschen. Der Kunde bleibt sichtbar, denn in CSB laeuft
   er ganz normal weiter, und wer aus der Liste verschwindet faellt still
   durchs Raster. */
table.auftraege tr.ausgesetzt td { opacity: .5; }
table.auftraege tr.ausgesetzt td:nth-child(3),
table.auftraege tr.ausgesetzt td:nth-child(4) { text-decoration: line-through; }
table.auftraege tr.anmerkung.ausgesetzt td { opacity: 1; background: var(--leiste); }
table.auftraege tr.ausgesetzt:hover td { opacity: .75; }
table.auftraege td.aktion { white-space: nowrap; }

/* Elf Knoepfe fuer einen Handgriff, der selten vorkommt. Sie bleiben im
   Platz stehen, damit beim Ueberfahren nichts springt, und erscheinen unter
   dem Zeiger oder sobald die Tastatur sie erreicht. Der Rueckweg an einer
   ausgeblendeten Zeile ist immer sichtbar: sonst findet ihn niemand. */
table.auftraege tr:not(.ausgesetzt) td.aktion button {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--tempo) var(--kurve);
}
table.auftraege tbody tr:hover td.aktion button,
table.auftraege td.aktion button:focus-visible {
  visibility: visible;
  opacity: 1;
}

button.winzig { font-size: .82rem; padding: .2rem .6rem; }

/* Eine Tour, die heute nicht geplant wird. Zugeklappt auf ihren Kopf, aber
   nicht weg: sonst waere sie nicht mehr zurueckzuholen. */
.tourblock.nicht-geplant { background: var(--leiste); }
.tourblock.nicht-geplant .tourkopf h2 { color: var(--gedaempft); }

/* Was fehlt, wird dort markiert, wo es abgestellt wird: am Feld selbst,
   im selben Orange wie eine Zeile, an der etwas zu pruefen ist. Der Text
   stand einmal mitten im Tourkopf und war eine Zeile mehr zum Lesen. */
.steuerung select.fehlt {
  background: var(--orange-hell);
  border-color: rgba(138, 97, 0, .45);
  color: var(--orange);
  font-weight: 600;
}

/* Was einer Tour noch fehlt, hinter einem kleinen (i). Offen im Kopf waere die
   Aufzaehlung an elf Touren untereinander eine Textwand, die niemand liest.

   Gebaut mit details und summary, also ohne Skript: das Aufklappen ist ein
   Browserverhalten, funktioniert auf dem Handy und kann nicht kaputtgehen. */
.fehltkasten { position: relative; display: inline-block; }
.fehltkasten > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 1px solid rgba(138, 97, 0, .45);
  background: var(--orange-hell);
  color: var(--orange);
  font: 700 .82rem/1 Georgia, serif;
  cursor: pointer;
  user-select: none;
}
.fehltkasten > summary::-webkit-details-marker { display: none; }
.fehltkasten > summary:hover { border-color: var(--orange); }
.fehltkasten[open] > summary { background: var(--orange); color: #fff; }

.fehltklappe {
  position: absolute;
  z-index: var(--z-overlay);
  top: calc(100% + .45rem);
  right: 0;
  /* Breit genug, dass „Tour 51: Fahrzeug nicht ausgewählt“ in eine Zeile
     passt: eine Liste, in der jeder Eintrag umbricht, liest sich wie doppelt
     so viele. Und hoch begrenzt, denn bei elf unfertigen Touren liefe sie
     sonst oben aus dem Fenster. */
  min-width: 23rem;
  max-width: 30rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: .7rem .85rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  box-shadow: var(--schatten-hoch);
  text-align: left;
  font-weight: 400;
}
/* Am Gesamtknopf unten links steht der Kasten sonst halb ausserhalb des
   Fensters: dort ist rechts der Rand und nicht die Mitte. */
.fehltklappe.links { right: auto; left: 0; bottom: calc(100% + .45rem); top: auto; }
.fehltklappe strong { display: block; margin-bottom: .35rem; font-size: .92rem; }
.fehltklappe ul { margin: 0; padding-left: 1.1rem; }
.fehltklappe li { font-size: .88rem; line-height: 1.5; color: var(--gedaempft); }

/* Ein Wagen, der an diesem Tag schon eine andere Tour faehrt. Zurueckgenommen,
   aber nicht gesperrt: wer ihn hier trotzdem waehlt, hat die Doppelvergabe
   danach an beiden Touren stehen und kann entscheiden, welche ihn behaelt.
   Blitz weiss das nicht.

   Die Farbe ist ein Zusatz, keine Auskunft: Optionen in einem nativen
   Auswahlfeld nehmen sie nicht ueberall an, in Safari im geschlossenen Feld
   gar nicht. Was der Wagen faehrt, steht deshalb als Text in der Zeile. */
.steuerung select option.vergeben { color: var(--orange); }

/* Die Adressmaske am Kundenblatt: der Hauptweg, also gross und oben. */
.adressmaske input[type=text] { font-size: 1.05rem; padding: .6rem .7rem; }
.adressmaske .zeile { gap: .5rem; }

/* Vier Felder statt einem, in der gewohnten Adressform: Straße mit Hausnummer,
   darunter PLZ mit Ort. Ein Raster und keine umbrechende Reihe, denn die
   Kachel ist schmal, und was umbricht, landet an wechselnden Stellen.

   Hausnummer und PLZ bleiben schmal. Sie sind kurz, und ein breites Feld für
   „60“ lädt dazu ein, den Kommentar wieder mit hineinzuschreiben, der hier
   gerade herausgeholt wurde. */
.adressmaske .beschriftung {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: .35rem;
}
/* Gemessen wird die **Kachel**, nicht das Fenster. Ein Medienabfrage auf die
   Fensterbreite ging hier daneben: das Fenster ist 1440 breit, die Kachel im
   zweispaltigen Raster aber nur gut 400, und die vier Felder standen in einer
   Zeile mit je vier sichtbaren Zeichen. */
.adressmaske { container-type: inline-size; }

.adressfelder {
  display: grid;
  /* PLZ vorn, Ort dahinter: die Reihenfolge, in der eine deutsche Adresse
     geschrieben wird. Andersherum stolpert man bei jedem Ausfüllen. */
  grid-template-columns: 5rem minmax(0, 1fr) 6rem;
  grid-template-areas:
    "strasse strasse hausnummer"
    "plz     ort     suchen";
  gap: .5rem;
  align-items: end;
}
.adressfelder label { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.adressfelder label:has(#strasse)    { grid-area: strasse; }
.adressfelder label:has(#hausnummer) { grid-area: hausnummer; }
.adressfelder label:has(#plz)        { grid-area: plz; }
.adressfelder label:has(#ort)        { grid-area: ort; }
.adressfelder #suchen { grid-area: suchen; }
.adressfelder input { width: 100%; }

/* Ist die Kachel selbst breit genug, steht die Adresse in einer Zeile. */
@container (min-width: 46rem) {
  .adressfelder {
    grid-template-columns: minmax(0, 1fr) 4.5rem 5rem minmax(0, 1fr) auto;
    grid-template-areas: "strasse hausnummer plz ort suchen";
  }
}

/* Was OpenStreetMap verstanden hat. Ab einem Kilometer Abstand zur CSB-Adresse
   ist es vermutlich der gleichnamige Ort woanders, und dann faellt die Zeile
   auf, statt nur dazustehen. */
.treffer {
  margin: .3rem 0 .2rem;
  font-size: .95rem;
  color: var(--gruen-tief);
}
.treffer.weit { color: var(--orange); font-weight: 600; }

/* Der Wagen, den Blitz ausgerechnet hat. Bewusst kein Feld und keine Farbe:
   er steht neben der Wahl, nicht in ihr. Sobald gewaehlt ist, verschwindet er,
   sonst stuenden Wahl und Vorschlag nebeneinander zur selben Frage. */
.vorschlag { display: flex; flex-direction: column; gap: .2rem; }
.vorschlag .wagen {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .5rem 0;
}
.vorschlag strong { font-weight: 650; }

/* Die beiden Wege an einer Tour stehen nebeneinander: planen oder ausblenden. */
.tourknoepfe {
  margin-left: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Wann diese Tour zuletzt gerechnet wurde. Als schlichter Text, nicht als
   Pille: eine Umrandung mehr ist ein Muster mehr. */
.gerechnet-am { color: var(--gruen-tief); font-weight: 600; }

/* Ein Hinweis, der nicht überlesen werden darf. Nur einer im Programm trägt
   das: die frühere Rechnung einer Tour. Wer sie für die geltende hält, tippt
   eine Reihenfolge nach CSB, die nicht mehr gilt. Derselbe gelbe Kasten wie
   sonst, nur mit voller Umrandung und etwas mehr Luft.

   Nicht `.balken` nennen: die Klasse gibt es schon, sie ist der
   Fortschrittsbalken mit `height: 10px; overflow: hidden`. Der Hinweis war
   damit 38 statt 115 Pixel hoch, und sein Text lief aus dem Kasten heraus. */
.hinweis.wichtig {
  border: 2px solid var(--orange);
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  font-size: 1rem;
}
.hinweis.wichtig a { color: var(--orange); font-weight: 600; }

/* Die Fassungen einer Tour: die geltende steht oben in den Zahlen, hier steht
   nur, wie oft gerechnet wurde. Keine Zeitleiste, kein Auswahlfeld: es gibt
   nichts zu wählen, die neueste gilt.

   Das Menü sitzt seit dem 02.08. neben dem Tournamen und nicht mehr als graue
   Zeile darunter. Es ist der Weg zu den früheren Rechnungen und sieht deshalb
   aus wie ein Weg: derselbe weiße Knopf mit runden Ecken wie „Alle Touren“
   darüber. Vorher stand es unter den Angaben zur Tour, wo niemand einen Weg
   vermutet. */
.tourzeile {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.tourzeile h1 { margin: 0; }

details.fassungen { position: relative; }
details.fassungen > summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-klein);
  background: var(--flaeche);
  color: var(--gedaempft);
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
}
details.fassungen > summary:hover { background: #f4f2ee; color: var(--ink); }
details.fassungen > summary::after {
  content: "▾";
  font-size: .8em;
  transition: transform var(--tempo) var(--kurve);
}
details.fassungen[open] > summary::after { transform: rotate(180deg); }

/* Aufgeklappt legt sich die Liste über den Inhalt, statt ihn nach unten zu
   schieben: die Zahlen darunter sind der Grund, aus dem man hier nachsieht,
   und sie sollen dabei stehen bleiben. */
.fassungsklappe {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  z-index: var(--z-leiste);
  min-width: 22rem;
  max-width: min(34rem, 90vw);
  padding: .7rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  box-shadow: var(--schatten-hoch);
}
.fassungsliste {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--linie);
  font-size: .95rem;
  color: var(--gedaempft);
}
.fassungsliste li { padding: .25rem 0; }
.fassungsliste li.jetzt { color: var(--ink); font-weight: 600; }
.fassungsliste .wann { font-variant-numeric: tabular-nums; }
.fassungsliste a.wann { color: var(--gruen-tief); font-weight: 600; }

/* Wo der Tag steht: "9 Touren · 6 gerechnet · 2 offen". Im Planen-Schritt sitzt
   die Zeile rechts in der Tourleiste, denn beide beantworten dieselbe Frage.
   Ueber der Ergebnistabelle steht sie fuer sich, dort gibt es keine Leiste. */
.standzeile {
  margin: 0 0 1rem;
  color: var(--gedaempft);
  font-size: .95rem;
}
.tourwahl .standzeile { margin: 0 0 0 auto; text-align: right; }
.tourwahl .standzeile a {
  display: inline;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gruen-tief);
  font-weight: 600;
}
.tourwahl .standzeile a:hover { background: none; text-decoration: underline; }
.standzeile a { color: var(--gruen-tief); font-weight: 600; }

/* Eine Tour, die es in der Planung gibt, aber noch in keiner Rechnung. Sie
   gehoert in die Liste: sonst sieht es aus, als gaebe es sie nicht. */
tr.ohne-rechnung td { background: var(--leiste); }

/* ------------------------------------------------------- Optimierungsart */

/* Die abgesperrte Karte im Schritt „Optimierungsart“. Ein Band über der
   Oberkante, wie an einer Baustelle: es sagt auf einen Blick, dass es diesen
   Weg gibt und dass er heute nicht begehbar ist. Der Zustand steht damit an
   einer Stelle; der Knopf darunter ist schlicht abgeschaltet und wiederholt
   das Wort „Baustelle“ nicht. */
/* Zwei Namen, zwei Knöpfe, sonst nichts. Der Titel braucht deshalb Luft nach
   unten, sonst klebt der Knopf an ihm. */
.artwahl h2 { margin-bottom: 1.1rem; }
/* `flex-start`, damit der Knopf so breit ist wie sein Text. Ohne das zieht die
   Spalte ihn über die ganze Karte, und ein abgeschalteter Knopf über die volle
   Breite sieht aus wie ein leeres Eingabefeld. */
.artwahl .karte { display: flex; flex-direction: column; align-items: flex-start; }
.artwahl form { margin-top: auto; }
.artwahl .baustelle .klein {
  color: var(--orange);
  font-weight: 600;
  margin: -.8rem 0 1.1rem;
}

.karte.baustelle { position: relative; }
.karte.baustelle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  border-radius: var(--r) var(--r) 0 0;
  background: repeating-linear-gradient(135deg,
    var(--orange) 0 10px, var(--orange-hell) 10px 20px);
}