/* AccelNexus — Kästchen, Optionsknöpfe, Schalter und Ablagefeld im App-Stil
   (NF2, Nutzungs-Fund U17; Entscheidung Vahid 15.10.2026: Umschalt-Knöpfe
   nach Grundsatz 10 „Edles Dunkel“). Bauteil: frontend/js/kern/auswahlfeld.js.

   EINE Regel je Bauteil für die ganze App, beide Themen (html.edel; die
   Werte kommen aus den Token — keine feste Farbe, keine Schriftgröße als
   Zahl). Handy-Maße (≥ 48 px, Schrift --fs-ui) stehen in nachtglas-handy.css.
   Vorrang-Muster (bauteile.md §22 n): zweimal :not(#nx-vorrang) an html und
   body — so gewinnt das Bauteil gegen die Sammel-Regeln der Seiten
   (`label { display: block }`, `.modal-body label`, `#page-x label`), ohne
   !important.

     .ax-wahl        Pille 14 px aus Glas, ganz klickbar, Zeile ≥ 40 px;
                     gehakt: Tönung 18 % + Rand + Schein in --m, Schrift fett,
                     Zeichen in --m; Fokus: 2-px-Ring in --m
     .ax-kaestchen   Zeichen = Haken          (Auswahl in Listen, Filtern)
     .ax-schalter    Zeichen = Haken, role="switch"  (An/Aus-Einstellung)
     .ax-option      Zeichen = Ring, gewählt mit Punkt (Optionsknöpfe)
     .ax-nur         ohne Text: runder 24-px-Knopf (Auswahl-Spalte)
     .ax-ablage      Ablagefeld: gestrichelte Glasfläche mit Symbol, Satz und
                     erlaubten Typen; nach der Wahl Name · Größe · ✕; Fehler
                     als rote Schrift darunter */

/* Das echte Feld bleibt im DOM — für Tastatur, Formular und Vorleseprogramm
   —, ist aber unsichtbar (nie display:none, sonst wäre es nicht fokussierbar). */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-eingabe {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  background: none;
  box-shadow: none;
  outline: none;
}

/* Versteckt ist versteckt — die Pille setzt display, [hidden] muss gewinnen. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) :is(.ax-wahl, .ax-ablage, .ax-gruppe)[hidden] { display: none; }

/* ---- Kästchen, Schalter, Optionsknopf: die Pille ---- */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  min-height: 40px;
  /* Abstand nach außen legt die Seite über --ax-abstand fest (Rechnung,
     Buchungsseite, Zurücksetzen) — das Vorrang-Muster ließe sonst keine
     Seiten-Regel durch. */
  margin: var(--ax-abstand, 0);
  padding: 6px 14px;
  box-sizing: border-box;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-knopf);
  background: var(--glas);
  color: var(--glas-text);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glas-kante);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl .ax-text { min-width: 0; overflow-wrap: anywhere; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-zeichen {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background: var(--glas-leise);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Optionsknopf: Ring, gewählt mit Punkt. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-option .ax-zeichen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-option:has(> .ax-eingabe:checked) .ax-zeichen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black' stroke='none'/%3E%3C/svg%3E");
}

/* Gehakt / gewählt / an: wie der aktive Umschalt-Knopf. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl:has(> .ax-eingabe:checked) {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-color: var(--m);
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--leucht-glas-weite, 12px) color-mix(in srgb, var(--m) var(--leucht-glas, 22%), transparent);
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl:has(> .ax-eingabe:checked) .ax-zeichen { background: var(--m); }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl:has(> .ax-eingabe:focus-visible) {
  outline: 2px solid var(--m);
  outline-offset: 2px;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl:has(> .ax-eingabe:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}
@media (hover: hover) {
  html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl:hover:not(:has(> .ax-eingabe:disabled)) { border-color: var(--m); }
}

/* Ohne Text (Auswahl-Spalte einer Tabelle): runder 24-px-Knopf. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl.ax-nur {
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  gap: 0;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl.ax-nur .ax-zeichen { flex-basis: 16px; width: 16px; height: 16px; opacity: 0.45; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl.ax-nur:has(> .ax-eingabe:checked) .ax-zeichen { opacity: 1; }

/* Gruppe von Optionsknöpfen (und Kästchen-Listen): nebeneinander, umbrechend. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0;
}

/* Im Formular (K.formular): das Kästchen steht linksbündig unter seinen
   Nachbarn, nicht über die ganze Breite gezogen. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .form-feld > .ax-wahl { align-self: flex-start; margin-top: 4px; }

/* ---- Ablagefeld ---- */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
  margin: 8px 0;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-flaeche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 1px dashed var(--glas-rand);
  border-radius: var(--r-knopf);
  background: var(--glas);
  color: var(--glas-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glas-kante);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-symbol {
  /* Symbole als Maske (Tabler „upload“, „paperclip“, „x“ wie js/icons.js):
     das Bauteil zeichnet sie selbst, kein icons.js nötig (Lehre NS4.1 f). */
  display: block;
  width: 24px;
  height: 24px;
  background: var(--m);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M7 9l5 -5l5 5'/%3E%3Cpath d='M12 4l0 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M7 9l5 -5l5 5'/%3E%3Cpath d='M12 4l0 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-satz { font-weight: 700; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-hinweis { color: var(--glas-leise); font-size: var(--fs-small); }
@media (hover: hover) {
  html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-flaeche:hover { border-color: var(--m); }
}
/* Datei schwebt über der Fläche (Ziehen & Ablegen) bzw. über dem Knopf. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage.ax-ablage-ueber .ax-ablage-flaeche {
  border-style: solid;
  border-color: var(--m);
  background: color-mix(in srgb, var(--m) 12%, transparent);
  box-shadow: inset 0 1px 0 var(--glas-kante),
              0 0 var(--leucht-glas-weite, 12px) color-mix(in srgb, var(--m) var(--leucht-glas, 22%), transparent);
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) [data-ax-ablage-knopf].ax-ablage-ueber {
  outline: 2px dashed var(--m);
  outline-offset: 3px;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage:has(> .ax-eingabe:focus-visible) :is(.ax-ablage-flaeche, .ax-ablage-datei),
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) label:has(+ .ax-eingabe:focus-visible),
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) label:has(> .ax-eingabe[type="file"]:focus-visible) {
  outline: 2px solid var(--m);
  outline-offset: 2px;
}
/* Mit Datei: die Fläche weicht der Zeile Name · Größe · ✕. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage.ax-ablage-voll .ax-ablage-flaeche { display: none; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-datei {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 6px 4px 14px;
  box-sizing: border-box;
  border: 1px solid var(--m);
  border-radius: var(--r-knopf);
  background: color-mix(in srgb, var(--m) 9%, transparent);
  color: var(--glas-text);
  font-size: var(--fs-body);
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-datei[hidden] { display: none; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-dateisymbol {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: var(--m);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-groesse { flex: 0 0 auto; color: var(--glas-leise); }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--glas-rand);
  border-radius: 50%;
  background: var(--glas);
  color: var(--glas-text);
  cursor: pointer;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-weg::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) {
  html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-weg:hover { border-color: var(--m); color: var(--m); }
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-weg:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
/* Falscher Typ / zu groß (eigene Klasse, Lehre NS4.1 e) und ein Feldfehler
   des Servers (AccelFeldfehler setzt aria-invalid am Feld). */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-fehler {
  margin: 0;
  color: var(--rot-nacht);
  font-size: var(--fs-body);
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-fehler[hidden] { display: none; }
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) :is(.ax-ablage.ax-ablage-ungueltig, .ax-ablage:has(> .ax-eingabe[aria-invalid="true"])) .ax-ablage-flaeche {
  border-color: var(--rot-nacht);
}

@media (prefers-reduced-motion: reduce) {
  html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-wahl,
  html.edel:not(#nx-vorrang) body:not(#nx-vorrang) .ax-ablage-flaeche { transition: none; animation: none; }
}

/* =====================================================================
   NS4.10 Baustein 4 — Glas-Auswahlfeld überall im Büro (Fund SC50 der
   Sichtung C: Filter „Alle“ der Angebote, „Kategorie“ im Posteingang und
   weitere zeigten die Browser-Optik). Jedes Auswahlfeld des Büros trägt die
   Klasse .glas-feld (der Formular-Kern setzt sie selbst, jede andere Stelle
   im Markup — Wächter selftest_ns410.py A1, Bestandsliste
   docs/AUSWAHL-BESTAND-NS4.10.md). Geschlossen: Feldgrund, 1 px Glasrand,
   eigener Pfeil in der Modulfarbe, kein Browser-Pfeil; Fokus und offen
   Rand + Schein in --m. Offen klappt das Glasblatt des Kerns auf
   (AccelKern.glasAuswahl, ND2.2a); am Touch-Gerät bleibt die Liste des
   Browsers (ND2.2a). Dieselben Werte wie das Auswahlfeld im Fenster
   (css/fenster.css, NS4.6 B5). Beide Themen, nur Token. */
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) select.glas-feld {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;      /* Höhe wie die Felder daneben (im Fenster 40 px, fenster.css) */
  background:
    linear-gradient(45deg, transparent 50%, var(--m, var(--glas-leise)) 50%) calc(100% - 19px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--m, var(--glas-leise)) 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
    var(--feld-grund);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-feld);
  color: var(--glas-text);
  cursor: pointer;
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) select.glas-feld:focus,
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) select.glas-feld[aria-expanded="true"] {
  outline: none;
  border-color: var(--m, var(--glas-rand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m, var(--glas-leise)) var(--leucht-fokus, 30%), transparent);
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) select.glas-feld.feld-fehler {
  border-color: var(--rot-nacht);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot-nacht) 18%, transparent);
}
html.edel:not(#nx-vorrang) body:not(#nx-vorrang) select.glas-feld:disabled { cursor: not-allowed; opacity: .6; }

/* =====================================================================
   NS4.11 Baustein 1 — die Datei-Wahl im Büro (Fund SC46 der Sichtung C:
   ein von Hand erfasster Beleg konnte kein Foto bekommen). AccelDateiwahl
   (js/helpers.js) nach dem Muster von AccelHandyDatei: eigene Glas-Knöpfe
   „Foto“ und „Datei“ (nie ein nacktes Datei-Feld, SC23), darunter die
   Vorschau-Kacheln der Bild-Ansicht (dieselben .bv-* Regeln oben) mit
   einem Kreuz zum Entfernen, und die Standzeile für den Fehler bei der
   Auswahl (.hd-fehler, css/bildansicht.css — dort steht auch die Optik der
   Kacheln). Das Datei-Feld selbst ist unsichtbar (.ax-eingabe oben) — der
   Knopf klickt es an. Diese Regeln stehen hier und nicht in
   bildansicht.css: die ist eingefroren (Wächter mehrerer Etappen), und ein
   Formular-Bauteil gehört ohnehin zu den Auswahlfeldern. */
html.edel .dz-wahl { display: flex; flex-direction: column; gap: 8px; position: relative; }
html.edel .dz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
html.edel .dz-kacheln:empty { display: none; }
html.edel .dz-kacheln { display: flex; flex-wrap: wrap; gap: 8px; }
html.edel .dz-kachel-huelle { position: relative; display: inline-flex; max-width: 100%; }
html.edel .dz-kachel-huelle .bv-galerie { margin-top: 0; max-width: 100%; }
/* Die Vorschau im Formular bleibt klein — sie zeigt, WELCHES Bild
   gewählt ist, und schiebt die Knopfzeile nicht aus dem Fenster. Die
   Akte zeigt das Bild groß (bis 320px, bildansicht.css). */
html.edel .dz-kachel-huelle .bv-galerie.gross.eins .bv-kachel { height: auto; max-height: 180px; }
html.edel .dz-kachel-huelle .bv-galerie.gross.eins .bv-kachel img { max-height: 180px; max-width: 220px; }
/* NS4.13 B12 (SC73): das X liegt ÜBER dem Bild — darum eine deckende
   Glas-Fläche wie ein Fenster (--glas-fenster, dunkel bzw. hell je Thema)
   mit Kontur in Textfarbe und Schatten, damit es auf hellen und dunklen
   Fotos steht (das Token --grund-tief gibt es nicht: die Fläche war
   durchsichtig, das weiße Kreuz auf einem hellen Foto unsichtbar). Nur Token
   (Wächter selftest_nf2.py A6). Die Kachel fällt nie unter 96 px zusammen,
   auch wenn ein Bild nicht lädt — das X bleibt an ihr. */
html.edel .dz-kachel-huelle .bv-kachel { min-width: 96px; min-height: 96px; }
html.edel .dz-weg {
  position: absolute; top: 4px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-height: 0; padding: 0;
  border: 1px solid color-mix(in srgb, var(--glas-text) 40%, transparent); border-radius: 50%;
  background: var(--glas-fenster);
  box-shadow: 0 1px 6px var(--glas-fenster-schatten);
  color: var(--glas-text); cursor: pointer;
}
html.edel .dz-weg svg { width: 16px; height: 16px; }
html.edel .dz-weg:hover { border-color: var(--rot-nacht); color: var(--rot-nacht); }
html.edel .dz-weg:focus-visible { outline: 2px solid var(--m); outline-offset: 1px; }
html.edel .dz-stand[hidden] { display: none; }
html.edel .dz-stand { margin: 0; }
/* Am Handy (und in schmalen Fenstern) volle Breite — Knöpfe ≥ 48 px (R-Q). */
@media (max-width: 600px) {
  html.edel .dz-knoepfe { flex-direction: column; }
  html.edel .dz-knoepfe .dz-knopf { width: 100%; min-height: 48px; justify-content: center; }
}