/**
 * Sidebar-Geruest des Cockpits (Planning-Zentrale-Cockpit-2026-09-01, F4/F15;
 * Symbolschiene seit Planning-CockpitNavigation-2026-09-26, Entwurf A): eine
 * schmale Icon-Schiene, die beim Zeigen/Fokussieren auf 15rem aufklappt und
 * sich per Feststell-Knopf dauerhaft offen halten laesst (Vorbild: Salonika
 * selbst, `app-salonika/src/app/geruest.js`, urspruenglich aus
 * `BVV-Homepage/app-cockpit`). Ergaenzt stil.css, ersetzt darin nichts.
 *
 * Farben und Schrift kommen seit 24.09.2026 aus dem Stil "Werkstatt" in
 * ../stil.css (--akzent = Signalfarbe Tuerkis, nur Flaeche/Kante, nie Text;
 * --akzent-text fuer farbige Beschriftung) — hier nur noch das Layout.
 */
.cockpit {
  display: grid;
  grid-template-columns: 4rem 1fr;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}
.cockpit[data-schiene="fest"] { grid-template-columns: 15rem 1fr; }

.seitenleiste {
  border-right: 1px solid var(--linie);
  background: var(--seite);
  padding: .6rem .4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  width: 4rem;
  overflow: hidden;
  transition: width .16s ease;
}
.cockpit[data-schiene="fest"] .seitenleiste { width: 15rem; }

/* Aufklappen beim Zeigen/Fokussieren — nur oberhalb der Schublade-Breite
   (siehe Media Query unten), sonst wuerde `:focus-within` (z.B. beim Tippen
   im Benutzerknopf) auf dem Tablet unerwuenscht eine schwebende Schiene
   ueber den Inhalt legen. */
@media (min-width: 55.01rem) {
  @media (hover: hover) {
    .cockpit:not([data-schiene="fest"]) .seitenleiste:hover {
      position: absolute; inset: 0 auto 0 0; width: 15rem; z-index: 20;
      box-shadow: 0 18px 48px color-mix(in srgb, #000 20%, transparent);
    }
  }
  .cockpit:not([data-schiene="fest"]) .seitenleiste:focus-within {
    position: absolute; inset: 0 auto 0 0; width: 15rem; z-index: 20;
    box-shadow: 0 18px 48px color-mix(in srgb, #000 20%, transparent);
  }
}

/* Beschriftung, Blocknamen, Tags — nur sichtbar, wenn die Schiene offen
   (aufgeklappt oder festgestellt) ist. Ausgeblendet statt entfernt, damit
   beim Aufklappen nichts neu eingehaengt werden muss. */
.seitenleiste__nurOffen { opacity: 0; transition: opacity .1s ease; white-space: nowrap; }
.cockpit[data-schiene="fest"] .seitenleiste__nurOffen { opacity: 1; }
@media (min-width: 55.01rem) {
  @media (hover: hover) {
    .cockpit:not([data-schiene="fest"]) .seitenleiste:hover .seitenleiste__nurOffen { opacity: 1; }
  }
  .cockpit:not([data-schiene="fest"]) .seitenleiste:focus-within .seitenleiste__nurOffen { opacity: 1; }
}

.seitenleiste__kopf { display: flex; align-items: center; gap: .2rem; min-height: 2.3rem; flex: none; }
.marke {
  display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit;
  border-radius: 7px; padding: .15rem; min-width: 0;
}
.marke:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.marke[aria-current="page"] .marke__zeichen { box-shadow: 0 0 0 2px var(--akzent); }
.marke__zeichen {
  position: relative; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 8px;
  background: var(--akzent); color: var(--tief); font-family: var(--anzeige); font-size: 1rem;
  display: grid; place-items: center;
}
.marke__text { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; min-width: 0; }
.marke__text b { font-family: var(--anzeige); font-weight: 400; font-size: 1rem; letter-spacing: -0.01em; }
.marke__text span { font-size: .74rem; color: var(--still); }
/* Kleiner Punkt auf der Marke statt der frueheren Textzeile daneben — bleibt
   auch bei geschlossener Schiene sichtbar (kein `nurOffen`), weil er auf
   "Stört jetzt" hinweist (renderHandlungsbedarf()), nicht auf das weichere
   "Steht an". */
.zaehler--stip {
  position: absolute; top: -.25rem; right: -.25rem; min-width: 1rem; height: 1rem; padding: 0 .2rem;
  border-radius: 999px; background: var(--schlecht); color: #fff; font-size: .62rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
/* Ohne das hier gewinnt diese Klassenregel gegen die Browser-eigene
   `[hidden] { display: none }` (gleiche Spezifitaet, spaeter im Stylesheet)
   — der Punkt bliebe trotz `hidden`-Attribut immer sichtbar. */
.zaehler--stip[hidden] { display: none; }
.seitenleiste__feststellen {
  margin-left: auto; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: none; background: none; color: var(--still); cursor: pointer;
  display: grid; place-items: center;
}
.seitenleiste__feststellen:hover { background: var(--karte); color: var(--text); }
.seitenleiste__feststellen[aria-pressed="true"] { color: var(--akzent-text); background: var(--karte); }

.seitenleiste__nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.block { display: flex; flex-direction: column; gap: .15rem; }
.block + .block { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--linie); }
.block__titel {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--still); padding: 0 .55rem; margin: 0 0 .3rem;
}
.block__punkt {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .5rem; border-radius: 8px; text-decoration: none;
  color: var(--text); font-size: .88rem; background: none;
  width: 100%; text-align: left; cursor: pointer; font: inherit; white-space: nowrap;
}
.block__punkt:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); }
/* Aktive Seite: gefuellte Tuerkis-Kachel statt der frueheren Signalkante —
   jetzt, wo das Symbol ein echtes Liniensymbol ist (statt eines Unicode-
   Zeichens wie zuvor ▦/⚙), traegt es die Farbe selbst mit (Entwurf A). */
.block__punkt[aria-current="page"] {
  background: var(--akzent); color: var(--tief); font-weight: 650;
}
.block__punkt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.symbol { width: 1.2rem; height: 1.2rem; flex: none; position: relative; }
.symbol svg { display: block; width: 100%; height: 100%; }
/* Kleiner Punkt auf dem Symbol (z.B. neue Kontaktanfragen) — bleibt wie der
   Punkt auf der Marke auch bei geschlossener Schiene sichtbar, die volle
   Zahl daneben (`.block__punkt .zaehler`) nur wenn offen. */
.symbol__stip {
  position: absolute; top: -.15rem; right: -.15rem; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--schlecht); border: 1.5px solid var(--seite);
}
.block__punkt[aria-current="page"] .symbol__stip { border-color: var(--akzent); }
.block__punkt .zaehler {
  flex: none; background: var(--schlecht); color: #fff;
  font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 0 .4rem;
}
/* Punkte, deren Bauphase noch nicht erreicht ist (SIDEBAR-Eintrag mit
   `stufe`) — bisher optisch gleichwertig mit echten Seiten, das sah nach
   kaputt statt nach Fahrplan aus. */
.block__punkt.gedimmt { color: var(--still); }
.block__punkt.gedimmt:hover { color: var(--text); }
.block__punkt .stufe-tag {
  flex: none; font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .02em; color: var(--still); background: color-mix(in srgb, var(--still) 18%, transparent);
  border-radius: 4px; padding: .05rem .35rem;
}

.seitenleiste__fuss {
  flex: none; padding-top: .6rem; border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: .3rem;
}
.seitenleiste__tipp {
  margin: 0; padding: 0 .5rem;
  font-size: .74rem; color: var(--still); font-family: var(--mono);
}
.seitenleiste__fuss kbd {
  font: inherit; font-size: .68rem; padding: .05rem .32rem; border-radius: 4px;
  background: var(--karte); border: 1px solid var(--linie); color: var(--text);
}

/* Benutzerknopf am Fuss der Seitenleiste (uebernommen aus BVV-Homepage/
   app-cockpit, dort dunkel — hier in den Werkstatt-Tokens): Avatar mit
   Initialen, Name, Pfeil; klappt nach oben ein Menue mit Rolle und Abmelden
   auf, weil unterhalb kein Platz mehr ist. `#benutzerBereich` traegt das
   Menue darunter — die urspruengliche Huellklasse `.benutzer` aus dem
   BVV-Vorbild wurde in dieser vereinfachten Kopie nie angesetzt, darum
   direkt an der ID. */
#benutzerBereich { position: relative; }
.benutzer__knopf {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  border: none; background: none; border-radius: 8px; padding: .4rem .3rem;
  cursor: pointer; font: inherit; text-align: left;
}
.benutzer__knopf:hover, .benutzer__knopf[aria-expanded="true"] { background: var(--karte); }
.benutzer__name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .85rem; color: var(--text);
}
.benutzer__pfeil { flex-shrink: 0; color: var(--still); font-size: .7rem; }

.avatar {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
  background: color-mix(in srgb, var(--akzent) 22%, transparent); color: var(--akzent-text);
}

.menue {
  position: absolute; left: 0; right: 0; bottom: calc(100% + .4rem);
  background: var(--karte); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: 0 12px 30px color-mix(in srgb, #000 18%, transparent);
  padding: .4rem; z-index: 40;
}
.menue__kopf {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .5rem .6rem; margin-bottom: .3rem; border-bottom: 1px solid var(--linie);
}
.menue__name { font-weight: 600; font-size: .88rem; }
.menue__rolle { font-size: .76rem; color: var(--still); }
.menue__eintrag {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  border: none; background: none; font: inherit; font-size: .85rem; color: var(--text);
  padding: .5rem .5rem; border-radius: 6px; cursor: pointer; text-align: left;
}
.menue__eintrag:hover { background: var(--seite); }

.inhalt { padding: 1.75rem 2rem 4rem; max-width: 62rem; }

.platzhalter {
  color: var(--still); padding: 3rem 1rem; text-align: center; border: 1px dashed var(--linie); border-radius: 10px;
}

/* Kommandopalette */
.palette-hintergrund {
  position: fixed; inset: 0; background: color-mix(in srgb, #000 45%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 50;
}
/* Ohne das hier gewinnt diese Klassenregel gegen die Browser-eigene
   `[hidden] { display: none }` (gleiche Spezifitaet, spaeter im Stylesheet)
   — das Overlay bliebe trotz `hidden`-Attribut immer sichtbar. */
.palette-hintergrund[hidden] { display: none; }
.palette {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 10px;
  width: min(34rem, 92vw); box-shadow: 0 12px 40px color-mix(in srgb, #000 25%, transparent);
  overflow: hidden;
}
.palette input {
  border: none; border-bottom: 1px solid var(--linie); border-radius: 0;
  font-family: var(--mono); font-size: .98rem; padding: .9rem 1rem;
}
.palette input:focus { outline: none; }
.palette ul { list-style: none; margin: 0; padding: .4rem; max-height: 18rem; overflow-y: auto; }
.palette li button {
  background: none; border: none; width: 100%; text-align: left; color: var(--text);
  padding: .55rem .6rem; border-radius: 6px; font: inherit; cursor: pointer;
}
.palette li button:hover, .palette li button[data-aktiv="1"] { background: var(--grund); }
.palette .leer { padding: 1rem; }

/* Kontaktanfragen — je Zeile Absender, Zeitpunkt, Nachricht, Aktionen. */
.anfrage { padding: 1rem 0; border-top: 1px solid var(--linie); }
.anfrage:first-child { padding-top: 0; border-top: none; }
.anfrage__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.anfrage__nachricht { white-space: pre-wrap; margin: 0 0 .7rem; }
.anfrage__knoepfe { display: flex; gap: .5rem; }
.anfrage__knoepfe .knopf-mailto {
  display: inline-flex; align-items: center; padding: .34rem .7rem; border-radius: 7px;
  font-size: .84rem; font-weight: 560; background: var(--akzent); color: var(--tief); text-decoration: none;
}
.anfrage__knoepfe .knopf-mailto:hover { filter: brightness(1.08); }
.anfrage__knoepfe button { width: auto; padding: .34rem .7rem; font-size: .84rem; }

/* Icon-only Zeilenaktion, wo der Bezug eindeutig ist (z.B. "Bearbeiten"
   direkt neben/unter dem betroffenen Feld) — Stift-Glyph statt Text wie
   "xyz bearbeiten" (Konvention aus BVV-Homepage/app-cockpit: .knopf--glyph),
   hier flach: kein Rahmen, keine Flaeche, nur bei Hover eine dezente Flaeche. */
.knopf-glyph {
  width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 50%;
  border: none; background: none; color: var(--still);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; line-height: 1; flex-shrink: 0; cursor: pointer;
}
.knopf-glyph:hover:not(:disabled) { background: var(--seite); color: var(--text); }

/* Schild "In welchem Cockpit bin ich?" — fest oben rechts, nimmt keinen Platz weg.
   Test-Umgebungen in der Warnfarbe, damit sie nie mit der Produktion verwechselt werden. */
.umgebungsschild {
  position: fixed; top: .6rem; right: .9rem; z-index: 40; padding: .2rem .7rem; border-radius: 999px;
  border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--karte)); color: var(--warn);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; cursor: help;
}
.umgebungsschild[hidden] { display: none; }
.umgebungsschild--teststapel { border-color: var(--still); background: var(--karte); color: var(--still); }

/* Ring-Brett (Cockpit-Umbau 06.10.2026): ein Schritt unter dem anderen — links
   der Schritt (Ring mit Name, Erklaerung, Regel), rechts die Salons darin und
   die Versionen, die dort angekommen sind. Rahmen immer 1px in --linie
   (Design-Katalog: nie dem Browser-Standard ueberlassen), Knoepfe
   nebeneinander mit gap. Beim Ziehen leuchtet nur die Zeile, die die Karte
   annehmen darf. */
.ring-brett { display: flex; flex-direction: column; align-items: stretch; gap: .15rem; }
.ring-pfeil { align-self: flex-start; margin-left: 1.1rem; color: var(--still); font-size: 1.1rem; line-height: 1.2; }
.ring-spalte {
  display: grid; grid-template-columns: minmax(11rem, 17rem) 1fr; gap: .75rem 1.25rem; align-items: start;
  border: 1px solid var(--linie); border-radius: 10px; padding: .8rem .95rem; background: var(--seite);
}
.ring-spalte--neu { background: transparent; border-style: dashed; }
.ring-spalte--leer { opacity: .65; }
.ring-spalte__kopf h3 { margin: 0 0 .15rem; font-family: var(--anzeige); font-weight: 400; font-size: 1rem; }
.ring-spalte__kopf p { margin: 0; font-size: .8rem; color: var(--still); overflow-wrap: anywhere; }
.ring-spalte__kopf p + p { margin-top: .25rem; }
.ring-spalte__erklaerung { font-style: italic; }
.ring-spalte__regel { font-weight: 560; }
.ring-spalte__knopf { width: auto; margin-top: .5rem; padding: .3rem .6rem; font-size: .8rem; }
.ring-spalte__inhalt { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.ring-salons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ring-salon {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .8rem; font-size: .86rem;
  border: 1px solid var(--linie); border-radius: 7px; padding: .35rem .65rem; background: var(--karte);
}
.ring-salon__name { font-weight: 560; }
.ring-spalte__karten { display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.ring-spalte__leer { margin: 0; font-size: .82rem; color: var(--still); }
.ring-brett--ziehen .ring-spalte:not(.ring-spalte--ziel) { opacity: .45; }
.ring-spalte--ziel { border-color: var(--akzent); border-style: dashed; background: color-mix(in srgb, var(--akzent) 10%, var(--seite)); }
.ring-spalte--ueber { border-style: solid; background: color-mix(in srgb, var(--akzent) 22%, var(--seite)); }
@media (max-width: 40rem) {
  .ring-spalte { grid-template-columns: 1fr; }
  .ring-karte { width: 100%; }
}

.ring-karte {
  width: 15.5rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px;
  padding: .6rem .7rem; display: flex; flex-direction: column; gap: .3rem; cursor: pointer;
}
.ring-karte:hover, .ring-karte:focus-visible { border-color: var(--akzent); outline: none; }
.ring-karte--ziehbar { cursor: grab; border-left: 3px solid var(--akzent); }
.ring-karte--gezogen { opacity: .5; }
.ring-karte__kopf { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.ring-karte__fortschritt { font-size: .78rem; color: var(--still); }
.ring-karte__wartet { font-size: .78rem; color: var(--warn); }
.ring-karte__fertig { font-size: .78rem; color: var(--gut); font-weight: 560; }
.ring-karte__knopf { width: auto; align-self: flex-start; padding: .28rem .6rem; font-size: .82rem; }

/* Versionsliste: die ganze Zeile oeffnet den Fahrplan. */
.zeile-klickbar { cursor: pointer; }
.zeile-klickbar:hover td, .zeile-klickbar:focus-visible td { background: var(--seite); }
.zeile-klickbar:focus-visible { outline: none; }

/* Fahrplan einer Version (Dialog): senkrechte Zeitleiste, je Schritt ein
   Punkt in der Ampelfarbe, darunter die Salons mit dem, was getan wurde. */
.dialog--breit { width: min(44rem, 94vw); max-height: 90vh; overflow-y: auto; }
.fahrplan__stand-zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; color: var(--still); }
.fahrplan__ueberschrift { margin: 0 0 .7rem; font-family: var(--anzeige); font-weight: 400; font-size: .95rem; }
.fahrplan { list-style: none; margin: 0; padding: 0; }
.fahrplan__schritt { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 .8rem; position: relative; padding-bottom: 1rem; }
.fahrplan__schritt::before { content: ""; position: absolute; left: .72rem; top: 1.55rem; bottom: .1rem; width: 1px; background: var(--linie); }
.fahrplan__schritt:last-child { padding-bottom: 0; }
.fahrplan__schritt:last-child::before { display: none; }
.fahrplan__punkt {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--linie); background: var(--karte);
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--still);
}
.fahrplan__schritt--gruen .fahrplan__punkt { background: var(--gut); border-color: var(--gut); color: #fff; }
.fahrplan__schritt--laeuft .fahrplan__punkt, .fahrplan__schritt--teilweise .fahrplan__punkt {
  border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--karte));
}
.fahrplan__schritt--rot .fahrplan__punkt { background: var(--schlecht); border-color: var(--schlecht); color: #fff; }
.fahrplan__schritt--bereit .fahrplan__punkt { border-color: var(--akzent); color: var(--akzent-text); background: color-mix(in srgb, var(--akzent) 16%, var(--karte)); }
.fahrplan__schritt--wartet .fahrplan__punkt { border-color: var(--warn); color: var(--warn); }
.fahrplan__schritt--offen .fahrplan__punkt, .fahrplan__schritt--leer .fahrplan__punkt { color: var(--still); }
.fahrplan__schritt--offen, .fahrplan__schritt--leer { opacity: .75; }
.fahrplan__titel { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.fahrplan__stand { font-size: .78rem; color: var(--still); }
.fahrplan__hinweis { font-size: .86rem; color: var(--still); }
.fahrplan__meta { display: block; font-size: .78rem; color: var(--still); }
.fahrplan__salons { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.fahrplan__salon { border: 1px solid var(--linie); border-radius: 7px; padding: .4rem .6rem; font-size: .86rem; background: var(--karte); }
.fahrplan__salonname { font-weight: 560; margin-right: .5rem; }
.fahrplan__fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.fahrplan__aktion { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fahrplan__aktion button, .fahrplan__nebenknoepfe button { width: auto; padding: .5rem .9rem; }
.fahrplan__aktionstext { margin: 0; font-size: .86rem; color: var(--still); }
.fahrplan__aktionstext--wartet { color: var(--warn); }
.fahrplan__nebenknoepfe { display: flex; gap: .5rem; }

/* Rueckwege je Salon: nur die, die es gibt, mit Abstand zueinander. */
.salon-rueckwege { display: flex; gap: .4rem; flex-wrap: wrap; }
.salon-rueckwege button { width: auto; padding: .34rem .62rem; font-size: .84rem; }

/* Salon-Liste (Cockpit-Umbau 26.09.2026, Nutzerkorrektur an der Seite
   "Salons": die Tabelle wirkte "schraeg", weil jede Zeile alle Knoepfe auf
   einmal zeigte. Jetzt eine anklickbare Zeile je Salon (natives <details>/
   <summary> — kein eigener Auf-/Zuklapp-Zustand noetig), das Menue steht
   erst nach dem Anklicken darunter. Start/Anhalten bleibt in der Kopfzeile,
   aber als Glyph-Knopf statt Text (derselbe Wunsch), der Klick darauf klappt
   die Zeile bewusst NICHT zusaetzlich auf (siehe app.js). */
.salon-liste__kopf {
  display: flex; align-items: center; gap: .8rem; padding: 0 .3rem .4rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--still); font-weight: 600;
}
.salon-liste__kopf span:first-child { width: 1.8rem; flex-shrink: 0; }
.salon-zeile { border-top: 1px solid var(--linie); }
.salon-zeile:first-child { border-top: none; }
.salon-zeile > summary {
  display: flex; align-items: center; gap: .8rem; padding: .65rem .3rem;
  cursor: pointer; list-style: none;
}
.salon-zeile > summary::-webkit-details-marker { display: none; }
.salon-zeile > summary::marker { content: ""; }
.salon-zeile > summary:hover { background: var(--seite); }
.salon-zeile__name { flex: 1 1 12rem; min-width: 0; }
.salon-zeile__sub { display: block; color: var(--still); font-size: .84rem; }
.salon-zeile__info { flex: 1 1 8rem; min-width: 0; font-size: .9rem; }
.salon-zeile__pfeil { flex-shrink: 0; color: var(--still); transition: transform .15s; }
.salon-zeile[open] > summary .salon-zeile__pfeil { transform: rotate(90deg); }
.salon-zeile__inhalt { padding: 0 .3rem 1.1rem calc(1.8rem + .8rem); }
.salon-zeile__knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.salon-zeile__knoepfe button { width: auto; padding: .34rem .62rem; font-size: .84rem; }
/* Start/Anhalten: der Knopf traegt selbst den Zustand (Farbe), eine
   eigene Statuspunkt-Anzeige daneben braucht es deshalb nicht mehr. */
.knopf-glyph--status { font-size: 1.05rem; }
.knopf-glyph--status.laeuft { color: var(--gut); background: color-mix(in srgb, var(--gut) 16%, transparent); }
.knopf-glyph--status.aus:hover:not(:disabled) { color: var(--gut); }
@media (max-width: 46rem) {
  .salon-liste__kopf { display: none; }
  .salon-zeile > summary { flex-wrap: wrap; }
  .salon-zeile__info { flex: 1 1 45%; }
}

/* Handlungsbedarf-Zeilen ("Stoert jetzt" / "Steht an") — ein Punkt zeigt
   die Dringlichkeit, bevor der Text gelesen ist. */
.hb-liste { list-style: none; margin: 0; padding: 0; }
.hb-liste li { display: flex; align-items: baseline; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--linie); }
.hb-liste li:first-child { border-top: none; padding-top: 0; }
.hb-liste__punkt { width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; background: var(--schlecht); }
.hb-liste--ruhig .hb-liste__punkt { background: var(--still); }

@media (max-width: 55rem) {
  /* Unterhalb der Schublade-Breite bleibt die Schiene, was sie vor Entwurf A
     schon war: eine breite, statische Zeile mit Beschriftung — kein Aufklappen
     auf Zeigen/Fokus (siehe die `min-width: 55.01rem`-Bloecke oben), das waere
     am Tablet unbedienbar. */
  .cockpit, .cockpit[data-schiene="fest"] { grid-template-columns: 1fr; }
  .seitenleiste, .cockpit[data-schiene="fest"] .seitenleiste {
    position: static; width: auto; box-shadow: none;
    flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--linie);
  }
  .seitenleiste__nurOffen { opacity: 1; }
  .seitenleiste__feststellen { display: none; }
  .seitenleiste__nav { overflow: visible; }
  .block__titel { display: none; }
  .block { flex-direction: row; flex-wrap: wrap; }
  .seitenleiste__fuss { display: none; }
  .inhalt { padding: 1.25rem 1rem 3rem; }
}