:root {
  /* Petrol als Marke (ÖPNV-Ton), warmes Amber als Akzent — sparsam. */
  --akzent: #0f6b6b; --akzent-dunkel: #0b5252; --akzent-hell: #e3f1f0;
  --amber: #f5b942; --amber-tinte: #7a5200;
  --text: #1c1c1c; --grau: #63625f; --linie: #d8d6d2; --flaeche: #fcfcfb;
  --warn: #b23b00; --warn-hell: #fdeee6; --ok: #1c7a3d;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: var(--text);
       font-size: 15px; line-height: 1.45; background: var(--flaeche); }
/* Die Kopfzeile und die Auswahlleisten darunter bleiben beim Scrollen stehen
   (Bernd-Dieter, Runde 14): in langen Fahrplaenen und Dienstlisten waren die
   Umschalter sonst nur ganz oben erreichbar. Wie hoch die Kopfzeile gerade
   ist, setzt menue.js als --kopf-hoehe. */
header { display: flex; align-items: center; gap: 1.5rem; padding: .5rem 1.2rem;
         background: var(--akzent); color: #fff;
         position: sticky; top: 0; z-index: 960; }
.vorgaben-menue, .grid-schalter {
         position: sticky; top: var(--kopf-hoehe, 3rem); z-index: 8;
         background: var(--flaeche); padding: .3rem 0;
         box-shadow: 0 1px 0 var(--linie); }
header .brand { color: #fff; font-weight: 700; text-decoration: none;
                font-size: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; }
header .logo { height: 26px; width: 26px; }
header nav { display: flex; gap: 1.1rem; flex: 1; align-items: center; }
header nav a { color: #fff; text-decoration: none; opacity: .92; }
header nav a:hover { opacity: 1; text-decoration: underline; }
header nav .nav-rechts { margin-left: auto; }
/* Im-/Export ist ein Ziel wie Dienste/Linien/Vorgaben und bekommt denselben
   Rahmen — ohne ihn sah es wie Fliesstext in der Kopfzeile aus. */
header nav a.nav-knopf { padding: .1rem .6rem; opacity: 1;
                         border: 1px solid rgba(255,255,255,.55);
                         border-radius: 6px; }
header nav a.nav-knopf:hover { background: rgba(255,255,255,.2);
                               text-decoration: none; }
header nav a.nav-knopf.aktiv { background: #fff; color: var(--akzent-dunkel);
                               font-weight: 700; }
main { padding: 1rem 1.2rem 2rem; max-width: 1200px; }
/* Die Diensteuebersicht ist eine Zahlentabelle, kein Fliesstext: sie darf die
   ganze Fensterbreite nutzen. Sonst stuenden die Kopfzeilen auf einem breiten
   Schirm senkrecht, obwohl daneben Platz frei ist (Runde 14, Punkt 6). */
main:has(#dienste-tabelle), main:has(#umlaeufe-tabelle) { max-width: none; }
footer { padding: .6rem 1.2rem; color: var(--grau); font-size: .8rem;
         border-top: 1px solid var(--linie); }
h1 { font-size: 1.4rem; margin: .4rem 0 .8rem; }
h2 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; color: var(--akzent-dunkel); }
a { color: var(--akzent-dunkel); }
.hint { color: var(--grau); font-size: .85rem; font-weight: 400; }
.titelzeile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* Mengenregeln (Runde 19): gelten fuer die Zahl der Dienste, nicht fuer einen
   einzelnen — deshalb nicht in der Spalte „Prüfung". Seit dem 1.10.2026 unter
   der Tabelle statt im Kopf: der bleibt beim Scrollen stehen und soll niedrig
   sein (Bernd-Dieter). */
.mengenregeln { font-size: .85rem; margin: .4rem 0; }
.mengenregeln.warn-wert { color: var(--warn); }
/* Verkehrstage je Zuschlag: viele kurze Haken nebeneinander. */
.tage-wahl { white-space: normal; }
.tage-wahl label { display: inline-block; margin-right: .6rem;
                   font-size: .85rem; }
.titelzeile h1 { margin-right: auto; }
/* Knoepfe: siehe „Ein Knopf-System“ weiter unten. */

table { margin: .4rem 0; }
th, td { padding: .25rem .55rem;
         text-align: left; vertical-align: top; white-space: nowrap; }
/* Der Tabellenkopf sieht ueberall so aus wie im Linienfahrplan: weiss mit
   gruenem Rahmen statt gruener Flaeche (Bernd-Dieter, Runde 17 — ihm gefiel
   die Gestaltung der Linientabellen, sie gilt jetzt fuer alle). */
thead th { background: #fff; box-shadow: inset 0 -1px var(--akzent); }
thead { outline: 2px solid var(--akzent); }
/* Die Kopfzeile bleibt beim Blaettern stehen — ueberall, nicht nur in den
   grossen Tabellen (Bernd-Dieter, 3.10.2026: „zahlreiche Tabellen, deren
   Kopfzeile beim Blaettern verschwindet").
   Zwei Dinge gehoeren dazu: Firefox haelt sticky-Zellen nur fest, wenn die
   Rahmen nicht zusammengelegt sind (deshalb `separate` und die Linien an den
   Zellen), und eine Tabelle in einem blaetterbaren Kasten klebt an dessen
   oberem Rand statt unter der Seitenkopfzeile. Ein Kasten mit einer Tabelle
   bekommt dafuer eine Hoechsthoehe — ohne sie blaettert nur die Seite, und
   die Kopfzeile waere im Kasten gefangen.
   Das Dritte ist der Grund, warum die Typenliste trotz `sticky` keine
   Kopfzeile zeigte (Bernd-Dieter, 3.10.2026): sie klebte richtig, aber genau
   hinter der Bereichsleiste der Vorgaben, die an derselben Stelle steht und
   hoeher liegt. Die Hoehe dieser Leiste misst menue.js als --leiste-hoehe. */
table { border-collapse: separate; border-spacing: 0; }
th, td { border: 0; border-bottom: 1px solid var(--linie); }
thead th { position: sticky; z-index: 6;
           top: calc(var(--kopf-hoehe, 3rem) + var(--leiste-hoehe, 0px)); }
/* In einem blaetterbaren Kasten klebt die Kopfzeile an dessen Rand. Die
   Kaesten haben alle eine Hoechsthoehe (arten-box, dienst-box,
   fahrplan-box) — ohne sie gaebe es keine senkrechte Blaetterflaeche, und
   die Kopfzeile waere darin gefangen. */
.scrollbar table thead th { top: 0; }
thead tr:last-child th { box-shadow: inset 0 -2px var(--akzent); }
tbody tr:hover td { background: #f6f5f3; }
td.leer { color: var(--grau); }
td.halt { white-space: normal; min-width: 14rem; }
.fahrplan td, .fahrplan th { font-variant-numeric: tabular-nums; }
.scrollbar { overflow-x: auto; }
/* Erklaertexte statt Zahlen: hier muss umgebrochen werden, sonst wird die
   Tabelle breiter als das Fenster (Hilfe). */
table.fliesstext { width: 100%; table-layout: fixed; }
table.fliesstext th, table.fliesstext td { white-space: normal; }
table.fliesstext td:first-child, table.fliesstext th:first-child { width: 17rem; }

/* Gedreht wird eine Huelle im Inneren der Zelle, nicht die Zelle selbst:
   Firefox setzt writing-mode auf Tabellenzellen nicht um, dort passierte
   deshalb gar nichts (Bernd-Dieter, Runde 12). spalten.js legt die Huelle
   an, sobald eine Tabelle einen Dreh-Schalter hat. */
/* Gedreht wird entweder die ganze Tabelle (Klasse an der Tabelle) oder einzelne
   Kopfzellen (Klasse an der Zelle) — wie fein, steht seit Runde 19 in den
   Vorgaben (Bernd-Dieter: „für jede Überschrift einzeln / für jede
   Überschriftenzeile / für jede Tabelle einheitlich"). */
table.kopf-hochkant thead th,
table thead th.hochkant { vertical-align: bottom; padding: .4rem .2rem; }
/* Gedrehte Beschriftungen brechen um, statt die Kopfzeile hochzutreiben
   (Bernd-Dieter, 29.09.2026: „die Kopfzeilen sind nicht höhenoptimiert").
   Aus „Pausen unbezahlt" werden zwei nebeneinanderliegende Zeilen — die
   Spalte wird dadurch kaum breiter, die Zeile aber halb so hoch. */
table.kopf-hochkant thead th > .dreh,
table thead th.hochkant > .dreh { display: inline-block;
                                       writing-mode: vertical-rl;
                                       transform: rotate(180deg);
                                       white-space: normal;
                                       max-height: 5.5rem; }
/* Beim Ueberfahren zeigt ein Faehnchen die Beschriftung waagerecht (hilfe.js)
   — die Zelle selbst bleibt gedreht, damit sich die Spaltenbreite nicht
   aendert. Fuer die Tastatur bleibt es beim Aufklappen: dort passiert es
   selten genug, und ein Faehnchen ohne Zeiger haette keinen Ort. */
table.kopf-hochkant thead th:focus-within > .dreh,
table thead th.hochkant:focus-within > .dreh {
    writing-mode: horizontal-tb; transform: none; max-height: none; }
/* Statt zu drehen umbrechen (Bernd-Dieter, Runde 20): die Beschriftung bleibt
   waagerecht, macht die Spalte aber nicht mehr breit. Die Breite setzt
   spalten.js an der Huelle — sie ergibt sich aus der Spalte selbst. */
/* min-width: min-content ist der Schutz gegen Buchstabensalat: die Huelle wird
   nie schmaler als ihr laengstes Wort, umgebrochen wird nur an Leerzeichen und
   Bindestrichen. Aus „Pausen unbezahlt" werden so zwei Zeilen, aus „km" bleibt
   „km" — und aus 5503-2 wird 5503- / 2. */
/* Getrennt wird ausschliesslich hier (Bernd-Dieter, 28.09.2026): „Nur bei
   waagerecht mit Zeilenumbruch duerfen Woerter getrennt und Nummern (nicht
   Zeiten oder Zahlen mit Inhalt) ueber zwei Zeilen gehen." Nummern duerfen
   mitten in der Ziffernfolge brechen — welche Zeichenfolge eine Nummer ist,
   entscheidet spalten.js. In jeder anderen Textrichtung bleibt es beim
   Umbruch an Leerzeichen.

   `hyphens: manual` statt `auto` (Bernd-Dieter, 2.10.2026): mit `auto`
   trennte Chrome nach seinen eigenen deutschen Mustern, und seine Regel
   „Nacht-zuschlag" aus der Trennungstabelle blieb wirkungslos. Jetzt
   entscheidet allein die Tabelle — sie setzt weiche Trennstriche, und nur
   die greifen. */
table thead th.umbruch { white-space: normal; }
table thead th.umbruch > .dreh { display: inline-block; white-space: normal;
                                 overflow-wrap: normal;
                                 hyphens: manual;
                                 min-width: min-content; }
table thead th.umbruch .nummer { word-break: break-all; }
tr.passt td { background: #f0f7f1; }
tr.abweichend td:first-child { border-left: 3px solid var(--amber); }

.badge { display: inline-block; padding: 0 .45rem; border-radius: 8px;
         font-size: .78rem; background: #eeedeb; color: var(--grau); }
.badge.warn { background: var(--warn-hell); color: var(--warn); }
.badge.ok { background: #e6f4ea; color: var(--ok); }
/* Gelb: nur Arbeits- oder Schichtzeit ueberschritten — durch Teilen des
   Dienstes zu beheben (Bernd-Dieter, Runde 17). */
.badge.gelb { background: #fdf0d5; color: var(--amber-tinte); }
a.badge.gefahr { background: var(--warn); color: #fff; text-decoration: none;
                 margin-right: .2rem; }
a.badge.gefahr:hover { text-decoration: underline; }

.kennzahlen { display: flex; gap: .7rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
/* Normalschrift statt groesserer Zahl: dann ist jede Kachel einzeilig und
   der Kopf des Dienstes bleibt flach (Bernd-Dieter, 30.09.2026). */
.kennzahlen .kachel .wert { display: inline; font-size: 1rem; }
.kennzahlen { margin: .3rem 0 .5rem; gap: .5rem; }
.kachel { border: 1px solid var(--linie); border-radius: 6px; padding: .5rem .9rem;
          font-size: .8rem; color: var(--grau); background: #fff; }
.kachel .wert { display: block; font-size: 1.25rem; font-weight: 700;
                color: var(--text); font-variant-numeric: tabular-nums; }
.kachel.warn .wert { color: var(--warn); }

.flash { padding: .5rem .8rem; border-radius: 4px; margin: .4rem 0; }
.flash.error { background: var(--warn-hell); color: var(--warn); }
.flash.ok { background: #e6f4ea; color: var(--ok); }
/* Die Folgenanzeige ist kein Fehler, sondern der Hinweis auf das, was eine
   Aenderung nach sich zieht — deshalb der ruhigere Ton und der Knopf
   „gesehen" am Ende des Satzes. */
.flash.folge { background: var(--akzent-hell); color: var(--text);
               border: 1px solid var(--akzent); }
.flash.folge button { margin-left: .6rem; }

/* Erledigt-Meldungen blenden sich ein und verschwinden von selbst
   (Bernd-Dieter, Runde 20: „Vorgaben gespeichert bleibt stehen und ist damit
   kontraproduktiv"). Sie stehen ueber der Seite, damit nichts verrutscht;
   Fehlermeldungen bleiben dagegen im Text stehen — die muss man lesen. */
.einblendung { position: fixed; right: 1rem;
               top: calc(var(--kopf-hoehe, 3rem) + .5rem); z-index: 60;
               display: flex; flex-direction: column; gap: .4rem;
               max-width: 24rem; }
.einblendung .flash { box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
                      transition: opacity .35s ease; cursor: pointer; }
.einblendung .flash.geht { opacity: 0; }
@media print { .einblendung { display: none; } }

form.inline-form { display: inline-flex; gap: .4rem; align-items: center;
                   flex-wrap: wrap; margin: .2rem 0; }
input, select { font: inherit; padding: .25rem .45rem;
                border: 1px solid #a9a7a2; border-radius: 4px; }
/* Gemeinsame Hoehe fuer alles, was in einer Zeile nebeneinander steht.
   Kaestchen und Schieber bleiben aussen vor, sie haben eigene Masse. */
select, input:not([type=checkbox]):not([type=radio]):not([type=range]) {
    min-height: 2rem; }

/* --- Ein Knopf-System -----------------------------------------------------
   <button> und <a class="btn"> sahen frueher unterschiedlich aus (Hoehe,
   Schriftgrad, Radius). Nebeneinander — etwa „Bearbeitungsstand speichern“
   (Formular) neben „Planung“ (Verweis) — fiel das sofort auf. Deshalb eine
   Grundform fuer beide; Betonung laeuft ueber Farbe und Fettung, nie ueber
   die Groesse. */
button, .btn { display: inline-flex; align-items: center; justify-content: center;
               gap: .3rem; font: inherit; line-height: 1.2; min-height: 2rem;
               padding: .25rem .8rem; vertical-align: middle;
               border: 1px solid var(--akzent); border-radius: 6px;
               background: var(--akzent); color: #fff; text-decoration: none;
               cursor: pointer; }
button:hover, .btn:hover { background: var(--akzent-dunkel); color: #fff;
                           border-color: var(--akzent-dunkel); }
button.klein, .btn.klein { min-height: 1.5rem; padding: .05rem .5rem;
                           font-size: .82rem; border-radius: 4px; }
button.gefahr, .btn.gefahr { background: #fff; color: var(--warn); border-color: var(--warn); }
button.gefahr:hover, .btn.gefahr:hover { background: var(--warn-hell); color: var(--warn); }
/* Nebenweg (abbrechen, zurueck): gleiche Groesse, zurueckgenommene Farbe. */
button.stil-still, .btn.stil-still { background: #fff; color: var(--akzent-dunkel);
                                     border-color: var(--linie); }
button.stil-still:hover, .btn.stil-still:hover { background: var(--akzent-hell);
                                                 color: var(--akzent-dunkel);
                                                 border-color: var(--akzent); }
.btn-gross { font-weight: 600; box-shadow: 0 2px 8px rgba(15, 107, 107, .3); }
label { display: inline-flex; gap: .35rem; align-items: center; }

/* Formularzeilen mit mehreren Feldern (Konto anlegen und bearbeiten): die
   Beschriftung steht klein ueber dem Feld, die Felder stehen unten buendig und
   gleich breit. Nebeneinander in einer Zeile klebten Beschriftung und Feld
   aneinander, und jede Zeile begann an einer anderen Stelle. */
.feldreihe { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
             align-items: flex-end; margin: 0 0 1.1rem; }
.feldreihe label { display: inline-flex; flex-direction: column;
                   align-items: flex-start; gap: .15rem;
                   font-size: .82rem; color: var(--grau); }
.feldreihe input, .feldreihe select { font-size: 1rem; color: var(--text);
                                      width: 15rem; }
.feldreihe input.lang { width: 22rem; }
.feldreihe select { width: auto; min-width: 9rem; }
.feldreihe .hint { align-self: center; }
/* Der Hinweis unter einer Reihe gehoert zu ihr und nicht zur naechsten. */
.feldreihe + .feldhinweis { margin: -.9rem 0 1.1rem; }

.regeln fieldset { border: 1px solid var(--linie); border-radius: 6px;
                   margin: .5rem 0; display: flex; gap: .9rem; flex-wrap: wrap; }
/* Eingabefelder so breit wie ihr Inhalt (Bernd-Dieter, 3.10.2026: „die zu
   breiten Eingabefelder gibt es immer noch an vielen Stellen").
   `size` allein reicht nicht: der Browser rechnet daraus je nach Schrift
   fast das Doppelte (gemessen: size=4 ergab 94 px). `ch` ist die Breite der
   Null in der laufenden Schrift — damit ist ein Feld fuer vier Zeichen auch
   vier Zeichen breit, in jedem Browser. Zwei Zeichen kommen fuer Rand und
   Schreibmarke dazu. */
.regeln input { width: 9ch; padding: .15rem .35rem; }
.regeln input[type="checkbox"], .regeln input[type="radio"],
.regeln input[type="file"] { width: auto; }
.regeln input[size="2"] { width: 4ch; }
.regeln input[size="3"] { width: 5ch; }
.regeln input[size="4"] { width: 6ch; }
.regeln input[size="5"] { width: 7ch; }
.regeln input[size="7"] { width: 9ch; }
.regeln input[size="10"] { width: 12ch; }
.regeln input[size="14"] { width: 16ch; }
.regeln input[size="16"] { width: 18ch; }
.regeln input[size="18"] { width: 20ch; }
.regeln input[size="20"] { width: 22ch; }
.regeln input[size="22"] { width: 24ch; }
.regeln input[size="24"] { width: 26ch; }
.regeln input[size="26"] { width: 28ch; }
.regeln input[size="30"] { width: 32ch; }
.regeln label { font-size: .85rem; }
/* Auswahlpunkte untereinander: nebeneinander ist bei langen Saetzen nicht
   mehr zu erkennen, welcher Punkt zu welchem Knopf gehoert. */
.regeln fieldset.untereinander { display: block; }
.regeln fieldset.untereinander label { display: block; margin: .25rem 0; }
.regeln fieldset.untereinander label input[type="radio"],
.regeln fieldset.untereinander label input[type="checkbox"] { width: auto;
                       margin-right: .4rem; }
/* Innerhalb einer Zeile bleiben die Beschriftungen nebeneinander — sonst
   stuenden Haken, Dauer und Häufigkeit einer Tätigkeit untereinander. */
.regeln fieldset.untereinander .inline-form label { display: inline-flex;
                       margin: 0; }

/* Nachfrage vor einem Abruf aus dem Netz (Runde 20): kein Alarm, aber
   deutlich genug, dass man es vor dem Klick liest. */
.netz-frage { border: 1px solid var(--akzent); border-left-width: 4px;
              border-radius: 6px; background: var(--akzent-hell);
              padding: .5rem .9rem; margin: .6rem 0; max-width: 46rem; }
.netz-frage p { margin: .3rem 0; }

/* Eine Zuschlagsart ist ein eigener Kasten mit mehreren Zeilen (Runde 20):
   Name und Kürzel, die Wahl der Eingabeform und darunter die Zeiten. In der
   Flex-Reihe der übrigen Regel-Kästen liefe das ineinander. */
.regeln fieldset.zuschlag { display: block; }
.regeln fieldset.zuschlag input { width: auto; }
.regeln fieldset.zuschlag label { display: inline-flex; }
table.zuschlagzeiten td { border: 0; padding: .1rem .4rem .1rem 0; }
table.zuschlagzeiten td:first-child { min-width: 14rem; }
/* Die Vorgaben je Dienstart (2.10.2026): elf Spalten, deshalb schmale
   Zahlenfelder und nur der Name breit. Passt die Tabelle nicht ins Fenster,
   wird sie waagerecht geblättert — gedreht wird hier nichts. */
/* Die 14 rem der ersten Spalte gelten fuer die Zuschlagszeiten, nicht fuer
   die Tabellen mit vielen Spalten: dort war das Kuerzel dreimal so breit wie
   sein Inhalt (Bernd-Dieter, 3.10.2026). Jede Spalte ist so breit wie das,
   was darin steht. */
table.arten { table-layout: auto; width: auto; }
table.arten td:first-child { min-width: 0; }
/* Spalten mit nur einem Kaestchen oder einem Knopf nehmen keinen Platz
   mehr, als sie brauchen. */
table.arten td.mitte, table.arten th.schmal { width: 1%; white-space: nowrap; }
table.arten td, table.arten th { padding-right: .7rem; }
/* Eingegeben wird im Menue hinter der Zelle (Bernd-Dieter, 2.10.2026): in der
   Tabelle steht nur der Wert und ein Pfeil. Die Eingabefelder sind so breit
   wie ihr Inhalt und nicht breiter — „Eingabewerte sollen nicht groesser sein
   als andere Werte". */
.regeln table.arten input:not([type="checkbox"]),
.regeln table.taetigkeiten input:not([type="checkbox"]) {
    padding: .1rem .3rem; }
.regeln table.arten select { max-width: 11rem; padding: .1rem .25rem; }
td.vorgabe { white-space: nowrap; }
details.zellmenue { display: inline-block; }
details.zellmenue > summary { cursor: pointer; list-style: none;
    padding: .1rem .2rem; border-radius: 3px; }
details.zellmenue > summary::-webkit-details-marker { display: none; }
/* Der Pfeil steht hinter dem Wert und ist der einzige Hinweis auf die
   Eingabe; die Zelle selbst bleibt Text. */
details.zellmenue > summary::after { content: " \25be"; color: var(--grau); }
/* Kein Einfaerben beim Anklicken: in der Typenliste konkurrierte es mit der
   Farbe des Fahrzeugtyps (Bernd-Dieter, 3.10.2026). */
/* Der Kasten steht in der Zelle und nicht darueber: der blaetterbare Rahmen
   würde ein schwebendes Menue abschneiden. */
/* Der Kasten steht in der Zeile und schiebt sie auf, statt zu schweben: ein
   schwebendes Menue schnitte der blaetterbare Rahmen ab. */
.zellpanel { white-space: normal; display: block; margin: .2rem 0 .1rem;
    padding: .3rem .4rem; border: 1px solid var(--linie);
    border-radius: 4px; background: var(--flaeche);
    min-width: 12rem; max-width: 26rem; }
.zellpanel strong { display: block; font-weight: 600; font-size: .85rem; }
/* Beschriftung und Feld bleiben zusammen in einer Zeile, Fliesstext darunter
   bricht um — sonst zieht ein langer Hinweis die Spalte auf. */
.zellpanel > label { display: block; margin-top: .3rem; font-size: .85rem;
    color: var(--grau); white-space: nowrap; }
.zellpanel > p { margin: .3rem 0 0; }
/* Zeilen mit zwei Feldern („mindestens n und einer je m") duerfen umbrechen
   — sonst zieht die Zeile den Kasten ueber den Rand hinaus. */
.zellpanel > label.breit { white-space: normal; }
/* Uebernommene Werte unterscheiden sich in der Farbe, nicht in der Groesse
   (Bernd-Dieter, 2.10.2026: „das Wort unzulaessig ist groesser als die
   anderen Eintraege") — .hint setzt sonst auch die Schriftgroesse herab. */
.zellwert { font-variant-numeric: tabular-nums; font-size: 1rem; }
/* Blaettern mit fester Ueberschrift (Bernd-Dieter, 2.10.2026). */
.arten-box { overflow: auto; max-height: 60vh; }
table.arten th { vertical-align: bottom; white-space: normal;
                 max-width: 7rem; font-size: .85rem; }
/* Die Einheit in einer eigenen Zeile: sonst hält sie die Überschrift breit
   (Bernd-Dieter, 2.10.2026: „kein Umbruch vor Std"). */
table.arten th .einheit { display: block; font-weight: 400;
                          color: var(--grau); }
table.arten tr.neue-art td { border-bottom: 0; }

/* Die Eingabemaske eines Fahrzeugtyps (Bernd-Dieter, 3.10.2026): links die
   Bezeichnung, rechts die Eingabe — gleich, ob Haken, Zahl oder Auswahl.
   Vorher stand der Haken vorn und die Zahl hinten, und das irritierte. */
/* Alle Zeilen teilen sich ein Raster, nicht jede ihr eigenes: nur so stehen
   die Bezeichnungen links strikt untereinander und die Eingaben rechts auf
   derselben Kante (Bernd-Dieter, 3.10.2026). Die zweite Spalte ist so breit
   wie die breiteste Eingabe. */
.fz-maske { display: grid; grid-template-columns: 1fr max-content;
            align-items: center; gap: .3rem .8rem;
            margin: .2rem 0 .5rem; max-width: 34rem; }
.fz-maske > strong { grid-column: 1 / -1; }
/* Die Zeile selbst erzeugt keinen Kasten — ihre beiden Teile sind Felder des
   Rasters darueber.
   Der zweite Selektor ist noetig, nicht schmueckend: die Tabelle steht in
   einem `fieldset.untereinander`, und dessen Regel `label { display: block }`
   ist spezifischer als `.fz-zeile`. Deshalb stand nur die Zeile der
   Stehplaetze (ein span) im Raster, alle anderen liefen als Fliesstext —
   genau sein Befund „nicht strikt linksbuendig, ausser bei den
   Stehplaetzen" (3.10.2026). */
.fz-zeile,
.regeln fieldset.untereinander label.fz-zeile {
            display: contents; margin: 0; }
.fz-zeile > :last-child { justify-self: end; max-width: 100%; }
.regeln .fz-zeile input:not([type="checkbox"]) { width: 5ch; }
.regeln .fz-zeile select { max-width: 14rem; }
/* Die weiteren Eigenschaften stehen gleich offen daneben, durch eine Linie
   abgesetzt (Bernd-Dieter, 3.10.2026). */
/* Breit genug, dass keine Bezeichnung umbricht — „Sitzplätze (Min)" und
   „Fahrradanhänger möglich" standen sonst zweizeilig (3.10.2026). */
.zellpanel.zweispaltig { display: grid;
    grid-template-columns: max-content max-content;
    gap: 0 1.4rem; max-width: none; min-width: 32rem; }
.zellpanel.zweispaltig .fz-weitere { border-left: 1px solid var(--linie);
    padding-left: 1.2rem; }
.zellpanel.zweispaltig strong { display: block; margin-bottom: .2rem; }
/* Die Anforderungen einer Fahrt stehen im Kopf des Fahrplans (Bernd-Dieter,
   3.10.2026). Der Kasten haengt unter der Zelle und nach rechts: er liegt in
   einem waagerecht blaetterbaren Rahmen, und nur nach rechts und unten laesst
   sich zu ihm hin blaettern. Rot heisst „das eingesetzte Fahrzeug erfuellt
   das nicht" — verboten ist es nicht. */
/* Nicht eindeutig umgerechnet (Bernd-Dieter, 3.10.2026): „gelb gefaerbte
   Zahlen sind nicht eindeutig ermittelt und sollten ueberprueft werden". */
td.unsicher { background: #fdf3cf; }
/* Die erste Spalte der Linientabelle: nicht auf Inhaltsbreite geschrumpft
   („zu schmal", Bernd-Dieter, 4.10.2026) und nicht so breit wie die
   Zuschlagstabelle — die Beschriftung „alle Linien ohne eigene Vorgabe"
   passt in eine Zeile. */
table.arten th.linienspalte { width: 1%; min-width: 17rem;
                              white-space: nowrap; }
/* In der Sammelzeile ist die Bezeichnung selbst der Knopf (Bernd-Dieter,
   4.10.2026: „durch Anklicken der Bezeichnung und nicht durch einen
   Extraeintrag"). Zwei davon untereinander, damit sie nicht in die
   Auswahlspalten hineinragen. */
table.arten th.linienspalte button { display: block; width: 100%;
                                     text-align: left; margin: .1rem 0; }
/* Geerbtes steht blasser als Eigenes — dieselbe Unterscheidung wie in der
   Vorgabentabelle der Dienstarten (Bernd-Dieter, 2.10.2026). */
th.anf-zelle { font-weight: 400; }
th.anf-zelle .geerbt { color: var(--grau); }
th.anf-zelle.anf-verstoss { background: var(--warn-hell); }
th.anf-zelle.anf-verstoss a, .hilfe-text.verstoss { color: var(--warn); }
/* Das Menue haengt unter seiner Zelle und schiebt die Zeile nicht auf; es
   darf ueber den Rest der Seite stehen. */
td.menuezelle { position: relative; }
td.menuezelle .zellpanel { position: absolute; top: 100%; right: 0;
    z-index: 40; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }

/* Bauarten: die Tabelle am Anfang von „Fahrzeuge" und die kleine unter
   Ansicht: Fahrzeuge (Bernd-Dieter, 1.10.2026). Schmal halten — es sind nur
   ein Haken, ein Name und zwei kurze Felder. */
table.bauarten { margin: .3rem 0 .6rem; }
table.bauarten td, table.bauarten th { padding: .15rem .55rem .15rem 0; }
/* Der Name einer Bauart braucht mehr als die 4,2 rem der Zahlenfelder; die
   Zahlenspalten bleiben so schmal wie ihre Überschrift (3.10.2026). */
.regeln table.bauarten input { padding: .1rem .3rem; }
.regeln table.bauarten input[type="checkbox"],
.regeln table.bauarten input[inputmode="numeric"],
.regeln table.bauarten input.kurzfeld { width: auto; }
.regeln .bauart-neu input { width: 26ch; }
.regeln .bauart-neu input.kurzfeld { width: 7ch; }
[hidden] { display: none !important; }

.nav-badge { background: var(--amber); color: var(--amber-tinte); border-radius: 9px;
             padding: 0 .5rem; font-size: .75rem; font-weight: 700; }

/* Kontomenue oben rechts: eigenes Konto, Verwaltung, Abmelden. */
details.kontomenue { position: relative; }
details.kontomenue > summary { list-style: none; cursor: pointer;
                               display: inline-flex; align-items: center; gap: .4rem;
                               padding: .15rem .6rem; border-radius: 6px;
                               border: 1px solid rgba(255,255,255,.55); }
details.kontomenue > summary::-webkit-details-marker { display: none; }
details.kontomenue > summary:hover,
details.kontomenue[open] > summary { background: rgba(255,255,255,.2); }
/* Die eigene Textfarbe ist Pflicht: das Panel haengt in der Kopfzeile, und die
   faerbt allen Text weiss. Im weissen Klappmenue standen die Beschriftungen
   der Hilfe-Kaestchen dadurch weiss auf weiss — Bernd-Dieter sah „zwei
   Auswahlfelder ohne Text" (Runde 18). Die Verweise hatten schon eine eigene
   Farbe, deshalb fiel es nur bei der Hilfe auf. */
.kontomenue-panel { position: absolute; right: 0; top: calc(100% + .4rem);
                    z-index: 950; min-width: 14rem; background: #fff;
                    color: var(--text);
                    border: 1px solid var(--linie); border-radius: 8px;
                    box-shadow: 0 6px 18px rgba(0,0,0,.18);
                    display: flex; flex-direction: column; padding: .3rem 0; }
.kontomenue-panel .hint { padding: .25rem .9rem .4rem; }
.menue-trenner { border-top: 1px solid var(--linie); margin: .3rem 0; }
header nav .kontomenue-panel a { color: var(--akzent-dunkel); opacity: 1;
                                 padding: .4rem .9rem; }
header nav .kontomenue-panel a:hover { background: var(--akzent-hell);
                                       text-decoration: none; }

/* Ohne das steht die Anmeldekarte in der Mitte von main (max 1200px) und
   damit auf breiten Schirmen sichtbar links der Bildmitte. */
main:has(.login-buehne) { max-width: none; }
.login-buehne { min-height: calc(100vh - 140px); display: flex;
                align-items: flex-start; justify-content: center;
                padding-top: 7vh;
                background:
                  radial-gradient(600px 300px at 20% 10%, var(--akzent-hell), transparent),
                  radial-gradient(500px 260px at 85% 90%, #fdf3dd, transparent); }
.login-karte { width: min(22rem, 92vw); background: #fff; border: 1px solid var(--linie);
               border-radius: 12px; padding: 2rem 2.2rem 1.8rem; text-align: center;
               box-shadow: 0 10px 34px rgba(15, 107, 107, .16); }
.login-karte .login-logo { width: 64px; height: 64px; }
.login-karte h1 { margin: .5rem 0 0; font-size: 1.5rem; color: var(--akzent-dunkel); }
.login-karte .login-sub { margin: .1rem 0 1.3rem; color: var(--grau); font-size: .9rem; }
.login-karte form { display: flex; flex-direction: column; gap: .85rem; text-align: left; }
.login-karte label { display: flex; flex-direction: column; align-items: stretch;
                     gap: .25rem; font-size: .86rem; color: var(--grau); font-weight: 600; }
.login-karte input { padding: .5rem .6rem; border-radius: 6px; font-size: 1rem; }
.login-karte input:focus { outline: 2px solid var(--akzent); border-color: var(--akzent); }
.login-karte button { padding: .55rem; font-size: 1rem; border-radius: 6px; margin-top: .3rem; }

ul.linien { columns: 3; list-style: none; padding: 0; }
ul.linien li { margin-bottom: .25rem; }
.aktionen details { display: inline-block; }
.aktionen summary { cursor: pointer; color: var(--akzent-dunkel); font-size: .85rem; }

/* --- Zeitstrahl -------------------------------------------------------------- */
.legende { display: flex; gap: .9rem; flex-wrap: wrap; margin: .4rem 0 .6rem;
           font-size: .85rem; color: var(--grau); }
.legende .chip { display: inline-flex; align-items: center; gap: .35rem; }
.legende i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.legende .befund-chip { background: #fff; border: 2px solid var(--warn); }
.ts-grid { stroke: #eceae6; stroke-width: 1; }
.ts-achse { stroke: var(--linie); stroke-width: 1; }
.ts-tick { font-size: 11px; fill: var(--grau); text-anchor: middle;
           font-variant-numeric: tabular-nums; }
.ts-dienst { font-size: 12px; font-weight: 700; fill: var(--text); }
.ts-bar { stroke: var(--flaeche); stroke-width: 2; cursor: pointer; }
.ts-bar:hover { filter: brightness(.85); }
.ts-befund { stroke: var(--warn); stroke-width: 2.5; }
#ts-lage-linie { stroke: var(--amber-tinte); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ts-bus { fill: var(--amber); stroke: var(--amber-tinte); stroke-width: 2; }
.ts-bus-steht { fill: #fff; }
.ts-tooltip { position: fixed; z-index: 50; background: #fff; color: var(--text);
              border: 1px solid var(--linie); border-radius: 6px;
              box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: .4rem .6rem;
              font-size: .82rem; pointer-events: none; max-width: 320px;
              white-space: normal; }
.lage-steuer { display: flex; align-items: center; gap: .8rem; margin: .6rem 0 .1rem; }
.lage-slider { display: block; accent-color: var(--akzent); margin: 0; padding: 0; }
.ts-uhr { font-variant-numeric: tabular-nums; font-weight: 700; margin-left: .4rem; }
.lage-liste { list-style: none; padding: 0; margin: .3rem 0; font-size: .88rem; }
.lage-liste li { padding: .12rem 0; }

/* --- Produkttour -------------------------------------------------------------- */
#tour-spot { position: fixed; z-index: 1000; border-radius: 8px; display: none;
             border: 2px solid var(--amber);
             box-shadow: 0 0 0 9999px rgba(10, 40, 40, .55); pointer-events: none;
             transition: all .25s ease; }
#tour-bubble { position: fixed; z-index: 1001; max-width: 360px; background: #fff;
               border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.3);
               padding: .9rem 1rem .8rem; font-size: .92rem; display: none; }
#tour-bubble h4 { margin: 0 0 .4rem; color: var(--akzent-dunkel); }
#tour-bubble .tour-body { margin-bottom: .8rem; }
#tour-bubble .tour-foot { display: flex; align-items: center; gap: .5rem; }
#tour-bubble .tour-prog { font-size: .8rem; color: var(--grau); margin-right: auto; }
#tour-bubble .tour-btn { border-radius: 4px; padding: .35rem .8rem; font-size: .88rem; }
#tour-bubble .tour-back { background: #eeedeb; color: var(--text); border-color: #eeedeb; }
#tour-bubble .tour-x { position: absolute; top: .35rem; right: .5rem; background: none;
                       border: none; color: #b5b3ae; font-size: 1.1rem; cursor: pointer;
                       min-height: 0; padding: 0 .2rem; }
#tour-bubble .tour-x:hover { color: var(--grau); }

@media print {
  .no-print { display: none !important; }
  header, footer { display: none; }
  main { max-width: none; padding: 0; }
  body { font-size: 11px; background: #fff; }
  th, td { padding: .1rem .35rem; }
  a { color: inherit; text-decoration: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Hilfe (Runde 17) ---------------------------------------------------------
   Die Erlaeuterungen stehen weiter im Markup, aber verborgen; sichtbar werden
   sie ueber „Hilfe für diese Seite anzeigen". `revert` statt eines festen
   Werts, weil dieselbe Klasse an Absaetzen und an Textstellen mitten im Satz
   haengt — block hier, inline dort. */
.hilfe-text { display: none; }
body.hilfe-seite .hilfe-text { display: revert; color: var(--grau);
                               font-size: .85rem; }
body.hilfe-seite p.hilfe-text { background: var(--akzent-hell);
                                border-left: 3px solid var(--akzent);
                                padding: .35rem .6rem; border-radius: 4px; }
.hilfe-blase { position: fixed; z-index: 1100; background: #fff;
               color: var(--text); border: 1px solid var(--akzent);
               border-radius: 6px; padding: .35rem .6rem; font-size: .85rem;
               box-shadow: 0 6px 18px rgba(0,0,0,.2); pointer-events: none;
               max-width: 26rem; white-space: normal; display: none; }
.hilfemenue .kontomenue-panel label { padding: .35rem .9rem; font-size: .9rem; }
.hilfemenue .kontomenue-panel button { margin: .3rem .9rem .2rem; }
/* Kuerzel-Feld neben dem Merkmalsnamen (Vorgaben — Ansicht: Fahrzeuge). */
.kurzfeld { width: 4rem; }

/* --- Fahrwege / Umlauf-Operationen / Hilfe ------------------------------------ */
tr.zeile-luecke td { background: repeating-linear-gradient(45deg, #fdf6ec 0 8px, #fff 8px 16px); }
.ts-panel { margin-top: 1rem; border: 1px solid var(--linie); border-radius: 8px;
            padding: .6rem 1rem; background: #fff;
            box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ts-panel h2 { margin-top: .2rem; }

/* --- Fahrweg-Spalten im Grid (Toggle), Standzeit, Planung ---------------------- */
.grid-schalter { display: flex; gap: 1.4rem; margin: .2rem 0 .4rem; }
.fw-col { display: none; background: #f2f8f7; }
body:has(#fw-an:checked) .fw-col { display: table-cell; }
.fw-edit { background: var(--akzent-hell); }
.fw-edit input { width: 2.6rem; }
/* Zelleninhalt, kein Knopf im Sinne der Grundform: min-height wuerde jede
   Zeile des Fahrplan-Grids aufblaehen. */
button.fw-quelle { cursor: pointer; background: none; border: 0; padding: 0 .2rem;
                   font: inherit; color: inherit; width: 100%; min-height: 0; }
button.fw-quelle.sel, input.fw-feld.sel { background: var(--akzent-hell);
                       outline: 2px solid var(--akzent); }
/* Ziehen wie in der Tabellenkalkulation (Bernd-Dieter, Runde 19): waehrend des
   Ziehens zeigt ein gestrichelter Rahmen, wo die Werte landen. */
input.fw-feld.ziel { outline: 2px dashed var(--warn); background: #fff6e5; }
body.fw-zieht { cursor: grabbing; user-select: none; }
/* Markieren durch Ueberfahren (Runde 20): waehrenddessen soll der Browser
   keinen Text markieren, sonst liegt eine blaue Textauswahl darueber. */
body.fw-wischt { user-select: none; }
.fw-editkasten { border: 1px solid var(--akzent); border-radius: 6px;
                 padding: .6rem .8rem; margin: .6rem 0; }
.fw-editkasten p { margin: .3rem 0; }
/* Selten gebrauchte Option unter dem Fahrweg-Editor (Runde 18): zugeklappt,
   damit sie die Bearbeitung nicht zustellt. */
.fw-option { border: 1px solid var(--linie); border-radius: 6px;
             padding: .3rem .8rem; margin: -.3rem 0 .6rem; background: #fff; }
.fw-option > summary { cursor: pointer; color: var(--akzent-dunkel);
                       font-size: .9rem; }
.fw-option p { margin: .3rem 0; }
tr.zeile-standzeit td { color: var(--grau); background: #fafaf8; }
tr.zeile-befund td { padding: 0 .2rem; border-top: 0; }
tr.zeile-befund .flash { margin: .15rem 0; }

/* --- Fahrplan-Grid: fixierte Kopfzeilen und linke Spalten ---------------------- */
/* Wie in der Mappe: alles oberhalb der ersten Haltestellenzeile und links der
   ersten Fahrtspalte bleibt stehen. Die Abstaende (top/left) rechnet grid.js,
   weil Zeilenhoehen und Spaltenbreiten vom Inhalt abhaengen. Statt Raendern
   box-shadow: bei border-collapse verschwinden Rahmen unter sticky-Zellen. */
.fahrplan-box { overflow: auto; max-height: 78vh; }
/* Weiss mit gruenem Rahmen steht seit Runde 17 global bei thead; hier kommt
   nur dazu, was der scrollbare Kasten braucht — und dieselbe Gestaltung fuer
   die Leerzellen (td) der Fahrweg-Spalten. */
.fahrplan-box thead th, .fahrplan-box thead td { position: sticky; z-index: 3;
                         background: #fff;
                         box-shadow: inset 0 -1px var(--akzent); }
.fahrplan thead tr:last-child th, .fahrplan thead tr:last-child td {
                         box-shadow: inset 0 -2px var(--akzent); }
.fahrplan td.fix-x, .fahrplan th.fix-x { position: sticky; z-index: 2; background: #fff; }
.fahrplan thead th.fix-x, .fahrplan thead td.fix-x { z-index: 4;
                         background: #fff; }
.fahrplan td.fix-x.fw-col { background: #f2f8f7; }
.fahrplan td.fix-x.fw-edit { background: var(--akzent-hell); }
.fahrplan tbody tr:hover td.fix-x { background: #f6f5f3; }
.fahrplan .fix-rand { box-shadow: inset -2px 0 var(--linie); }
.fahrplan thead th.fix-rand, .fahrplan thead td.fix-rand {
              box-shadow: inset -2px 0 var(--linie), inset 0 -1px var(--akzent); }
@media print { .fahrplan-box { max-height: none; overflow: visible; }
               .fahrplan td, .fahrplan th { position: static !important; } }

/* Schmale Fahrweg-Spalten: statt des Wortes „Vorlage“ nur ein Knopf.
   Keine feste Breite per CSS: zusammen mit position:sticky bringt sie Chrome
   beim Zeichnen zum Stillstand (gemessen in Runde 13). Dass der Block beim
   Blaettern gleich breit bleibt, regelt grid.js ueber die Spaltenzahl. */
.fahrplan th.fw-col, .fahrplan td.fw-col { padding: .25rem .3rem; text-align: center; }

/* Trennlinie zwischen Fahrwegen und Fahrten: liegt ueber dem Grid, steht an
   der rechten Kante des fixierten Blocks (Position rechnet grid.js). */
.fahrplan-rahmen { position: relative; }
.fw-trenner { position: absolute; top: 0; width: 7px; margin-left: -3px;
              cursor: col-resize; z-index: 6; background: transparent;
              border-left: 2px solid var(--akzent); opacity: .35;
              touch-action: none; }
.fw-trenner:hover, .fw-trenner:focus { opacity: 1; outline: none; }
/* Wert und Weg in einem: die Zelle „Dienst" ist der Knopf, der zum Wechseln
   fuehrt (Bernd-Dieter, Runde 17). Sie darf deshalb nicht wie ein Knopf
   aussehen — sonst waere jede Kopfzeile eine Knopfleiste. */
/* Ein Strich fuer alle anklickbaren Werte, nicht mal gepunktet und mal
   durchgezogen (Bernd-Dieter, Runde 19: „einheitlich"). Der Strich selbst
   bleibt — er ist das einzige Zeichen dafuer, dass hinter dem Wert ein Weg
   steckt. */
button.zellknopf { background: none; border: 0; padding: 0 .15rem; font: inherit;
                   color: var(--akzent-dunkel); min-height: 0; cursor: pointer;
                   text-decoration: underline; }
button.zellknopf:hover { background: var(--akzent-hell);
                         color: var(--akzent-dunkel); }
.fahrplan thead a:not(.fw-knopf) { text-decoration: underline; }

/* Mehrere Linien in einem Fenster: Reiter ueber der Tabelle. */
/* Reiter, Haken und Blaetterhinweis in einer Zeile (Runde 19). Der
   Blaetterhinweis darf umbrechen, die Reiter nicht — deshalb schrumpft nur er. */
.linien-leiste { align-items: center; flex-wrap: wrap; gap: .9rem; }
.linien-leiste .linien-reiter { margin: 0; }
.linien-leiste .linien-reiter a.wechsel { margin-left: .3rem; }
.linien-leiste #fix-hinweis { flex: 1 1 8rem; white-space: normal; }
.linien-reiter { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .5rem; }
.linien-reiter a { padding: .1rem .6rem; border: 1px solid var(--linie);
                   border-radius: 6px; background: #fff; text-decoration: none;
                   color: var(--akzent-dunkel); }
.linien-reiter a.aktiv { background: var(--akzent); border-color: var(--akzent);
                         color: #fff; font-weight: 700; }
.linien-reiter a.wechsel { margin-left: auto; color: var(--grau); }

a.fw-knopf { display: inline-block; text-decoration: none; line-height: 1.1;
             border: 1px solid var(--akzent); border-radius: 4px;
             padding: 0 .25rem; background: #fff; color: var(--akzent-dunkel); }
a.fw-knopf:hover { background: var(--akzent); color: #fff; }

/* --- Ansichten (Dienste/Linien/Regeln) und eigene Fenster ---------------------- */
.ansichten { display: inline-flex; gap: .35rem; }
.ans-paar { display: inline-flex; align-items: stretch; border: 1px solid rgba(255,255,255,.55);
            border-radius: 6px; overflow: hidden; }
header nav a.ans { padding: .1rem .6rem; text-decoration: none; opacity: 1; }
/* Liniennummer im Fenster zum Ansehen (Runde 19) — eine Angabe, kein Knopf. */
header .ans-linie { font-weight: 700; padding: .1rem .5rem; }
header nav a.ans.aktiv { background: #fff; color: var(--akzent-dunkel); font-weight: 700; }
.ans-weitere { background: transparent; color: #fff; min-height: 0;
               border: 1px solid rgba(255,255,255,.55); border-radius: 6px;
               padding: .1rem .6rem; font-size: .9rem; }
.ans-weitere:hover { background: rgba(255,255,255,.25); color: #fff;
                     border-color: rgba(255,255,255,.55); }
#fp-balken { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem;
             z-index: 900; background: #fff; border: 1px solid var(--akzent);
             border-radius: 8px; padding: .5rem .9rem; font-size: .9rem;
             box-shadow: 0 6px 22px rgba(0,0,0,.2); }

/* Spaltenweise lesen (Wunsch Bernd-Dieter): Mehrspalten-Satz fuellt Spalte
   fuer Spalte, ein Grid wuerde zeilenweise fuellen. */
ul.linien-liste { list-style: none; padding: 0; margin: 0;
                  columns: 22rem; column-gap: .5rem; }
ul.linien-liste li { border: 1px solid var(--linie); border-radius: 6px;
                     background: #fff; padding: .4rem .7rem;
                     margin: 0 0 .5rem; break-inside: avoid; }
ul.linien-liste .halte { font-size: .85rem; color: var(--grau); white-space: normal; }
.linien-haken { margin-right: .2rem; }
fieldset.rahmenlos { border: 0; margin: 0; padding: 0; display: block; }

/* --- Verschieben-Flow (Zwei-Klick + Zielwahl im Zustand) ----------------------- */
tr.zeile-markiert td { background: var(--akzent-hell); }
.move-kasten { background: var(--akzent-hell); border-left: 3px solid var(--akzent);
               padding: .5rem .8rem; border-radius: 4px; margin: .5rem 0;
               display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
button.ziel-ok { background: var(--ok); border-color: var(--ok); }
button.ziel-rot { background: var(--warn); border-color: var(--warn); }
button.ziel-gelb { background: var(--amber); border-color: #c99416;
                   color: var(--amber-tinte); font-weight: 700; }
button.ziel-gelb:hover { background: #e0a52d; border-color: #a97f13;
                         color: var(--amber-tinte); }
button.ziel-rot[disabled] { background: var(--warn-hell); color: var(--warn);
                            cursor: not-allowed; }

/* Berechnete Zeilen ausserhalb des Arbeitsmodus: Ruestzeit, Pause, Teilung. */
tr.zeile-zusatz td { color: var(--grau); background: #f7f9f8; font-style: italic; }
tr.zusatz-teilung td { background: #fdf6ec; }

/* Kuerzel der Auswahlspalten im Klartext, unter der Diensteuebersicht. */
.kuerzel-legende { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem;
                   font-size: .85rem; color: var(--grau); margin: .3rem 0; }
/* „Dienst später suchen": soll ins Auge fallen, ohne groesser zu sein als die
   Nachbarknoepfe (Knopf-System aus Runde 11 — Betonung ueber Farbe). */
button.blau, .btn.blau { background: #1745d8; border-color: #1745d8; color: #fff;
                         font-weight: 700; }
button.blau:hover, .btn.blau:hover { background: #0e2f9c; border-color: #0e2f9c;
                                     color: #fff; }

/* --- Diensteuebersicht: fixierter Kopfbereich (Runde 15) ---------------------- */
/* Titel, Kennzahlen und Knoepfe stehen in einer Zeile; der Block bleibt beim
   Scrollen stehen, der Tabellenkopf haengt mit --dienste-oben darunter
   (gemessen von dienste.js). */
.dienste-kopf { position: sticky; top: var(--kopf-hoehe, 3rem); z-index: 30;
                background: var(--flaeche); padding: .2rem 0 .3rem;
                box-shadow: 0 1px 0 var(--linie); }
.dienste-kopf h1 { margin: .1rem 0; font-size: 1.2rem; }
.dienste-kopf h2 { margin: .1rem 0; }
.dienste-kopf .move-kasten { margin: .3rem 0 .2rem; }
.kennzahlen-zeile { display: inline-flex; gap: .9rem; flex-wrap: wrap;
                    font-size: .85rem; color: var(--grau); }
.kennzahlen-zeile strong { color: var(--text); font-size: 1rem;
                           font-variant-numeric: tabular-nums; }
.kennzahlen-zeile .warn-wert strong { color: var(--warn); }
/* Firefox haelt sticky-Zellen in Tabellen mit border-collapse: collapse nicht
   fest (Bernd-Dieter arbeitet damit, 29.09.2026) — deshalb hier getrennte
   Rahmen und die Linien an den Zellen selbst. */
#dienste-tabelle, #umlaeufe-tabelle, table.fix-kopf {
        border-collapse: separate; border-spacing: 0; }
#dienste-tabelle td, #dienste-tabelle th,
#umlaeufe-tabelle td, #umlaeufe-tabelle th,
table.fix-kopf td, table.fix-kopf th { border: 0;
        border-bottom: 1px solid var(--linie); }
#dienste-tabelle thead th, #umlaeufe-tabelle thead th,
table.fix-kopf thead th {
        position: sticky; z-index: 20; background: var(--flaeche);
        vertical-align: bottom;
        box-shadow: inset 0 -1px 0 var(--linie); }
#dienste-tabelle thead th, #umlaeufe-tabelle thead th {
        top: calc(var(--kopf-hoehe, 3rem) + var(--dienste-oben, 0px)); }
/* Der einzelne Dienst hat keinen eigenen Kopfbereich — dort haengt die
   Kopfzeile direkt unter der Seitenkopfzeile. */
/* Im eigenen Kasten klebt die Kopfzeile an dessen oberem Rand — so wie im
   Linienfahrplan, wo es auch in Firefox funktioniert (Bernd-Dieter,
   30.09.2026). */
.dienst-box { overflow: auto; max-height: 72vh; }
.dienst-box table.fix-kopf thead th,
.arten-box table.fix-kopf thead th { top: 0;
        box-shadow: inset 0 -2px var(--akzent); }

/* Fahrzeugarten: Marke in Tabellen, Farben in zwei Staerken. Dieselbe Farbe
   darf mehrfach vergeben werden — sie sortiert, sie benennt nicht. */
/* Die Farbe der Fahrzeugart fuellt die ganze Zelle — Zeilenhoehe und
   Spaltenbreite (Bernd-Dieter, Runde 16). Deshalb steht sie an td/th und
   nicht an einer Marke darin. */
.fz-marke { display: inline-block; border-radius: 6px; padding: 0 .4rem;
            white-space: nowrap; }
td.fz-blau, td.fz-violett, td.fz-tuerkis, td.fz-braun, td.fz-magenta,
td.fz-oliv, td.fz-grau, th.fz-blau, th.fz-violett, th.fz-tuerkis,
th.fz-braun, th.fz-magenta, th.fz-oliv, th.fz-grau { border-radius: 0; }
tbody tr:hover td.fz-blau, tbody tr:hover td.fz-violett,
tbody tr:hover td.fz-tuerkis, tbody tr:hover td.fz-braun,
tbody tr:hover td.fz-magenta, tbody tr:hover td.fz-oliv,
tbody tr:hover td.fz-grau { filter: brightness(.97); }
td.leer.kraeftig { color: inherit; }
.fz-probe { border-radius: 6px; padding: 0 .5rem; }
/* Keine Ampelfarben in dieser Palette: Gruen, Gelb und Rot gehoeren der
   Spalte Pruefung, und dieselben Toene an zwei Stellen lesen sich wie eine
   Aussage ueber den Dienst (Bernd-Dieter, Runde 20). */
.fz-blau.dezent { background: #e5ecfb; } .fz-blau.kraeftig { background: #1745d8; color: #fff; }
.fz-violett.dezent { background: #efe6f7; } .fz-violett.kraeftig { background: #6a35a3; color: #fff; }
.fz-tuerkis.dezent { background: #e0f2f1; } .fz-tuerkis.kraeftig { background: #0f6b6b; color: #fff; }
.fz-braun.dezent { background: #efe5da; } .fz-braun.kraeftig { background: #7a5230; color: #fff; }
.fz-magenta.dezent { background: #f8e4f0; } .fz-magenta.kraeftig { background: #a32a76; color: #fff; }
.fz-oliv.dezent { background: #eaeedb; } .fz-oliv.kraeftig { background: #5e6b23; color: #fff; }
.fz-grau.dezent { background: #ebeae7; } .fz-grau.kraeftig { background: #4a4946; color: #fff; }

/* Vorgaben — Fahrzeuge: eine Karte je Fahrzeugart. */
.fz-karte { border: 1px solid var(--linie); border-radius: 8px; background: #fff;
            padding: .6rem .9rem; margin: .7rem 0 .2rem; }
.fz-karte .inline-form { margin: .25rem 0; }
/* Ohne das erben alle Felder die 4,2 rem der Zahlenfelder aus .regeln — der
   Name einer Fahrzeugart passt dort nicht hinein. */
.fz-karte input { width: auto; }
.fz-karte input[inputmode="numeric"] { width: 4rem; }
fieldset.fz-gruppe { border: 1px solid var(--linie); border-radius: 6px;
                     margin: .4rem 0; padding: .3rem .7rem .5rem;
                     display: flex; gap: .9rem; flex-wrap: wrap; }
fieldset.fz-gruppe legend { font-size: .8rem; color: var(--grau); }
.wahlliste { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .2rem 0 .5rem; }
.wahlliste label { font-size: .85rem; }

/* Merkmale der Fahrzeugarten: Haken zum Erfassen, Name als Klappmenue mit
   Umbenennen und Loeschen (Runde 16). */
.merkmal-gruppe { margin: .3rem 0 .7rem; }
.merkmal { display: inline-flex; align-items: center; gap: .15rem; }
.merkmal-menue { position: relative; display: inline-block; }
.merkmal-menue > summary { list-style: none; cursor: pointer; font-size: .85rem;
                           border-bottom: 1px dotted var(--grau); }
.merkmal-menue > summary::-webkit-details-marker { display: none; }
.merkmal-menue[open] > summary { font-weight: 700; }
/* Ohne Breitenangabe erben die Felder die 4,2 rem der Zahlenfelder aus
   .regeln — ein Merkmalsname passt da nicht hinein. */
.merkmal-panel input[name="name"], .merkmal-gruppe input[name="name"] {
                 width: 13rem; }
.merkmal-panel { position: absolute; left: 0; top: 1.5rem; z-index: 40;
                 background: #fff; border: 1px solid var(--linie);
                 border-radius: 8px; padding: .4rem .6rem; min-width: 18rem;
                 box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* Abfrage beim Verlassen einer Vorgaben-Seite mit ungespeicherten Eingaben. */
.abfrage { position: fixed; left: 50%; top: 20%; transform: translateX(-50%);
           z-index: 1200; background: #fff; border: 1px solid var(--akzent);
           border-radius: 8px; padding: .9rem 1.1rem;
           box-shadow: 0 10px 34px rgba(0,0,0,.28); max-width: 26rem; }
.abfrage p { margin: 0 0 .6rem; }

/* Wert und Knopf in einer Kopfzeile („Dienst/ausschneiden“). */
.kopf-paar { display: inline-flex; align-items: center; gap: .25rem; }

/* Kopfzeilen-Wahl unter Vorgaben — Ansicht: eine Zeile je Kopfzeile, eine
   Spalte je Ausgabeweg. Ohne die Breitenangabe erbten die Kaestchen die
   4,2 rem der Zahlenfelder aus .regeln. */
table.kopfwahl { margin: .4rem 0; }
table.kopfwahl th { font-weight: 600; }
table.kopfwahl thead th { text-align: center; }
table.kopfwahl thead th:first-child, table.kopfwahl tbody th { text-align: left; }
table.kopfwahl td { text-align: center; }
table.kopfwahl input[type=checkbox] { width: auto; min-height: 0; }

/* Ausgabewege auf der Seite Im-/Export: Knopf zuerst, darunter der Text in
   einer Schriftgroesse, das Ganze eingerahmt (Bernd-Dieter, Runde 14). */
.ausgabe-kasten { border: 1px solid var(--linie); border-radius: 6px;
                  background: #fff; padding: .8rem 1rem; margin: .9rem 0;
                  max-width: 48rem; }
.ausgabe-kasten p { margin: .5rem 0; font-size: 1rem; }
.ausgabe-kasten p:first-child { margin-top: 0; }

/* --- Vorgaben: Menue und Untermenues ------------------------------------------ */
.vorgaben-menue { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .8rem; }
.vorgaben-menue a { padding: .15rem .6rem; border: 1px solid var(--linie);
                    border-radius: 6px; background: #fff; text-decoration: none;
                    color: var(--akzent-dunkel); }
.vorgaben-menue a.aktiv { background: var(--akzent); border-color: var(--akzent);
                          color: #fff; font-weight: 700; }
ul.vorgaben-liste { list-style: none; padding: 0; margin: 0;
                    display: grid; gap: .6rem;
                    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
ul.vorgaben-liste li { border: 1px solid var(--linie); border-radius: 6px;
                       background: #fff; padding: .5rem .8rem; }
ul.vorgaben-liste a { font-weight: 700; }

/* --- Erlaeuterung der Dienstarten (29.09.2026) --------------------------------
   Steht in den Dienstplanregeln und ist immer sichtbar — anders als die
   Hilfetexte: hier gibt es zu den meisten Arten nichts einzutragen, und genau
   das soll dort erklaert sein (Bernd-Dieter). */
dl.erlaeuterung { margin: .2rem 0 .4rem; }
dl.erlaeuterung dt { font-weight: 600; margin-top: .35rem; }
dl.erlaeuterung dd { margin: 0 0 .1rem 1.2rem; color: var(--grau);
                     font-size: .9rem; }

/* --- Ziel-Spalte beim Verschieben (29.09.2026) --------------------------------
   Die Einfuegeknoepfe stehen am Ende der Zeile. Ist die Tabelle breiter als
   das Fenster, waeren sie weggescrollt — deshalb kleben sie am rechten Rand.
   Passt alles ins Fenster, aendert sticky nichts. */
#dienste-tabelle th.ziel, #dienste-tabelle td.ziel,
#umlaeufe-tabelle th.ziel, #umlaeufe-tabelle td.ziel {
        position: sticky; right: 0; background: var(--flaeche);
        box-shadow: -1px 0 0 var(--linie); }
#dienste-tabelle td.ziel, #umlaeufe-tabelle td.ziel { z-index: 10; }
#dienste-tabelle thead th.ziel,
#umlaeufe-tabelle thead th.ziel { z-index: 25; }
@media print { #dienste-tabelle th.ziel, #dienste-tabelle td.ziel,
        #umlaeufe-tabelle th.ziel, #umlaeufe-tabelle td.ziel {
        position: static; box-shadow: none; } }

/* Auswahl zum Ausschneiden: ein Kreuz am Zeilenende (29.09.2026). */
label.auswahl { display: inline-block; padding: 0 .3rem; cursor: pointer; }
label.auswahl input { width: auto; min-height: 0; }

/* Kopfzeilen: waagerechte Beschriftungen stehen unten, nicht oben
   (Bernd-Dieter, 29.09.2026). Gedrehte tun das ohnehin. */
table thead th { vertical-align: bottom; }
h1.schlank { margin: .1rem 0 .3rem; font-size: 1.2rem; }

/* Tätigkeiten am Fahrzeug als Tabelle (29.09.2026): eine Zeile je Tätigkeit
   mit gleichen Spalten statt einer langen Reihe von Feldern. */
table.taetigkeiten td { vertical-align: top; padding: .25rem .5rem .25rem 0; }
table.taetigkeiten label { display: block; }
table.taetigkeiten td:first-child label { font-weight: normal; }
td.mitte, th.mitte { text-align: center; }
td.nowrap { white-space: nowrap; }

/* Überschrift und Dienstart des einzelnen Dienstes in einer Zeile
   (Bernd-Dieter, 1.10.2026) — zwei Zeilen waren eine zu viel. */
.dienst-zeile { display: flex; align-items: baseline; gap: .8rem;
                flex-wrap: wrap; }
.dienst-zeile h1 { margin: .1rem 0; }
.kennzahlen .kachel .wert { margin-left: .4rem; font-weight: 600; }