/* PIA: langer Wortlaut und Vorschau passen auch auf schmale Leitungsgeräte. */
.pia-chat p, .pia-vorschau pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.pia-vorschau pre { max-height: 36rem; overflow: auto; font-size: .85rem; }

/* =============================================================================================
   Cyber Breach – Spielleitung (Smartphone zuerst; Tablet und Laptop erweitert)
   Stil: docs/STIL.md §4.6 – dunkles Glas auf Kohle, Markenverlauf für „an/primär“, Inter, große Rundungen.
   Baut auf /app/shared/ui.css (lädt stil/stil.css) auf. Farben nur über Tokens, Schatten nur über --schatten-*/--glut-*,
   Bewegung nur über --weich/--feder. Höchstens eine Glasfläche mit Unschärfe (Kopfleiste) + Dialog.
   ============================================================================================= */

/* ---------- Grund ---------- */
body.l-seite { min-height: 100dvh; background: var(--f0); font-size: 14px; line-height: 1.45; }
body.l-seite.mit-simband { padding-top: 28px; }
.l-tapete { z-index: 0; background: var(--f0); }
.l-tapete .tp-kohle { opacity: .9; }
.hell .l-tapete .tp-kohle { opacity: .06; }
.hell .l-tapete .l-buehne { opacity: .12; }
@media (prefers-color-scheme: light) {
  .thema-auto:not(.dunkel) body.l-seite:not(.dunkel):not(.hell) .tp-kohle { opacity: .06; }
  .thema-auto:not(.dunkel) body.l-seite:not(.dunkel):not(.hell) .l-buehne { opacity: .12; }
}
.l-buehne { inset: 0 !important;
  background:
    radial-gradient(90rem 60rem at 20% -10%, rgba(123,67,151,.28), transparent 60%),
    radial-gradient(70rem 50rem at 85% 110%, rgba(220,36,48,.22), transparent 60%);
  opacity: .5; }
#app, .l-anmeldung { position: relative; z-index: 1; }
a { color: var(--ma-text); }
mark { background: var(--bad-flaeche); color: var(--bad-text); border-radius: 4px; padding: 0 2px; }
.l-sym { display: inline-flex; width: 18px; height: 18px; flex: none; align-items: center; justify-content: center; }
.l-sym svg { width: 100%; height: 100%; }
.l-sym-klein { width: 13px; height: 13px; vertical-align: -2px; }
.knopf .l-sym { width: 18px; height: 18px; }
.l-link { color: var(--ma-text); font-weight: 600; }

/* ---------- Anmeldung ---------- */
.l-anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.l-anmelde-karte {
  width: min(400px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 34px 30px 30px;
  border-radius: var(--r-3xl); background: var(--glas-dialog); border: 1px solid var(--rand); box-shadow: var(--schatten-dialog);
  animation: pop .45s var(--feder);
}
.l-anmelde-zeichen { width: 64px; height: 64px; align-self: center; filter: drop-shadow(0 10px 24px rgba(220,36,48,.35)); }
.l-anmelde-kopf { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.l-anmelde-titel { font: 700 30px/1.15 var(--ui); letter-spacing: -.02em; margin: 2px 0 0; }
.l-anmelde-text { margin: 0; color: var(--t2); font-size: 14px; }
.l-anmelde-feld > label { text-align: center; }
.l-anmelde-fehler { text-align: center; margin: -6px 0 0; }
.l-ruetteln { animation: ruetteln .4s; }

/* ---------- Kopfleiste mit Insel (Glas, klebt oben) ---------- */
.l-kopf {
  position: sticky; top: 0; z-index: 40;
  background: var(--glas1); border-bottom: 1px solid var(--glas1-rand);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
body.mit-simband .l-kopf { top: 28px; }
.l-kopf-zeile { position: relative; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 20px; }
.l-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--t1); min-width: 0; }
.l-marke .marke-zeichen { height: 34px; }
.l-marke-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.l-marke-text .kicker { font-size: 10.5px; }
.l-kopf-titel { font: 700 17px/1.15 var(--ui); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(34vw, 420px); }
.l-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.l-abmelden { gap: 8px; }
/* Insel: mittig in der Kopfzeile */
.l-insel { top: 50%; transform: translate(-50%, -50%); }
.l-insel.offen { width: 340px; }
.l-insel:not(.offen) { opacity: 0; pointer-events: none; }   /* ohne laufenden Vorgang keine leere Insel */
.l-insel .txt { font-size: 12.5px; }
.l-insel .txt b { font-size: 11px; }
.l-insel .l-insel-sym { width: 18px; height: 18px; color: var(--mc); }
.l-insel .l-insel-sym.warn { color: var(--warn); }
.l-insel .zeit { font-size: 16px; }

.l-nav-zeile { display: flex; align-items: center; gap: 12px; padding: 2px 20px 12px; flex-wrap: wrap; }
.l-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.l-nav::-webkit-scrollbar { display: none; }
.l-reiter {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; flex: none;
  font: 600 14px/1 var(--ui); color: var(--t2); text-decoration: none; white-space: nowrap;
  background: var(--f1); border: 1px solid var(--rand);
  transition: background .25s var(--weich), color .25s, transform .15s var(--feder);
}
.l-reiter .l-sym { width: 16px; height: 16px; }
.l-reiter:hover { color: var(--t1); }
.l-reiter:active { transform: scale(.96); }
.l-reiter.aktiv { background: var(--verlauf); color: #fff; border-color: transparent; box-shadow: var(--glut-pille); }
.l-kopf-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin-left: auto; min-width: 0; }
.l-kopf-abschnitt { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--t3); flex: none; }
.punkt.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.punkt.bad { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.l-reiter.aktiv .punkt { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }

/* ---------- Grundlayout ---------- */
.l-haupt { max-width: 1360px; margin: 0 auto; padding: 24px 20px 110px; }
.l-ansicht { min-width: 0; }
.l-seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 2px; }
.l-seitenkopf-text { min-width: 0; flex: 1 1 420px; }
.l-seitentitel { font: 700 26px/1.2 var(--ui); letter-spacing: -.02em; margin: 6px 0 4px; }
.l-einleitung { margin: 0; font-size: 14px; line-height: 1.55; color: var(--t2); max-width: 820px; }
.l-seitenkopf-rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.l-karte { background: var(--glas); border-color: var(--rand); padding: 20px; box-shadow: var(--schatten-karte); }
.l-karte.kante { padding-left: 24px; }
.l-karte.gefahr { background: radial-gradient(120% 90% at 0% 0%, rgba(220,36,48,.22), transparent 60%), var(--glas); }
.l-karten-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.l-karten-kopf > .titel { margin: 0; flex: 1 1 auto; }
.l-karten-titel { font-size: 17px; margin-bottom: 12px; }
.l-karten-kopf .l-karten-titel { margin-bottom: 0; }
.l-karten-text { margin: 0 0 12px; }
.l-titel-mit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.l-aktionen { gap: 10px; }
.l-umbruch { word-break: break-all; }
.l-suchzeile { gap: 10px; }
.suchfeld.l-suche { max-width: 440px; flex: 1 1 240px; }
.l-tabelle-rahmen { overflow-x: auto; max-width: 100%; }
.tabelle td, .tabelle th { vertical-align: middle; }
.tabelle tbody tr { transition: background .15s; }
.tabelle tbody tr:hover { background: rgba(255,255,255,.025); }
.fenster.breit { width: min(860px, 100%); }
.l-seite select {
  min-height: 44px; max-width: 100%; border-radius: 14px; border: 1px solid var(--rand); background-color: var(--f1); color: var(--t1);
  padding: 0 38px 0 14px; font: 500 14px/1.2 var(--ui); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.l-seite select:focus { outline: none; border-color: var(--ma-text); box-shadow: 0 0 0 4px rgba(185,138,224,.22); }
.l-seite select option { background: var(--f1v); color: var(--t1); }
.l-seite .feld select { min-height: 52px; border-radius: var(--r-m); font-size: 16px; }
input[type=color] { width: 44px; height: 44px; padding: 3px; border-radius: 13px; border: 1px solid var(--rand); background: var(--f1); cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 10px; }
input[type=range] { accent-color: var(--mb); width: 100%; min-height: 44px; cursor: pointer; }
/* Fingergröße: Chips der Leitung (Sprungleisten, Proben, Filter) mindestens 44 px hoch */
.l-seite .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; }
.eingabe { width: auto; }
.kontrolle { width: 26px; height: 26px; }

/* Plaketten (ergänzend zu ui.css) */
.plakette-angepasst, .plakette-bestaetigt {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 9px; white-space: nowrap; vertical-align: middle;
  font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.plakette-bestaetigt { color: var(--ok-text); background: var(--ok-flaeche); }
.plakette-bestaetigt::before { content: "✓"; }
.plakette-angepasst { color: #fff; background: var(--verlauf); }
.plakette-angepasst::before { content: "✎"; }
.plakette-ohne-wirkung { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px dashed currentColor;
  font: 600 11px/1.3 var(--ui); color: var(--t2); margin-right: 6px; }
.l-pillen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.l-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--t2); }
.l-legende > span { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Hinweise mit Direktsprung ---------- */
.l-hinweis { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 14px 16px 14px 19px; }
.l-hinweis.bad { background: linear-gradient(90deg, var(--bad-flaeche), transparent 70%), var(--f1); border-color: rgba(255,95,82,.28); }
.l-hinweis.warn { background: linear-gradient(90deg, var(--warn-flaeche), transparent 70%), var(--f1); border-color: rgba(255,176,32,.25); }
.l-hinweis.info::before { background: var(--info); }
.l-hinweis-sym { width: 22px; height: 22px; color: var(--t2); }
.l-hinweis-sym.bad { color: var(--bad-text); } .l-hinweis-sym.warn { color: var(--warn-text); }
.l-hinweis-sym.info { color: var(--info-text); } .l-hinweis-sym.ok { color: var(--ok-text); }
.l-hinweis-text { min-width: 0; }
.l-hinweis-text b { margin: 0; font-size: 14.5px; }
.l-hinweis-text p { margin: 3px 0 0; font-size: 13px; }
.l-hinweis-knopf { gap: 6px; white-space: nowrap; }
.l-hinweis-knopf .l-sym { width: 15px; height: 15px; }
.l-aufleuchten { animation: l-aufleuchten 1.1s var(--weich) 2; border-radius: var(--r-xl); }
@keyframes l-aufleuchten { 0%, 100% { box-shadow: 0 0 0 0 rgba(185,138,224,0); } 40% { box-shadow: 0 0 0 3px var(--ma-text), 0 0 32px -4px rgba(220,36,48,.55); } }

/* ---------- Toasts (höchstens drei, mit Symbol) ---------- */
.l-toasts { z-index: 97; bottom: max(20px, env(safe-area-inset-bottom)); }
.l-seite > .overlay { z-index: 100; }
.l-toasts .toast::before { display: none; }
.l-toast-sym { width: 20px; height: 20px; color: var(--info-text); }
.toast.erfolg .l-toast-sym { color: var(--ok-text); }
.toast.warnung .l-toast-sym { color: var(--warn-text); }
.toast.fehler .l-toast-sym { color: var(--bad-text); }

/* ---------- Dialog ---------- */
.l-fenster { padding: 24px 24px 22px; }
.l-fenster .fenster-kopf { align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.l-fenster-sym { width: 44px; height: 44px; border-radius: 50%; padding: 11px; background: var(--info-flaeche); color: var(--info-text); }
.l-fenster-sym.bad { background: var(--bad-flaeche); color: var(--bad-text); }
.l-fenster-titel { flex: 1; min-width: 0; }
.l-fenster-titel .titel { font-size: 21px; margin: 4px 0 0; line-height: 1.25; }
.l-fenster .schliessen { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
.l-fenster .schliessen .l-sym { width: 18px; height: 18px; }
.l-fenster-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--t2); }
.l-fenster-inhalt { gap: 14px; }
.l-fenster .fenster-fuss { margin-top: 22px; }
.l-haken { padding: 8px 0; }

/* ---------- Vorbereitung: Seitenleiste im Einstellungsstil ---------- */
.l-vb { display: grid; grid-template-columns: 1fr; gap: 20px; }
.l-unternav { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.l-unternav::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) {
  .l-unternav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 36px; }
}
.l-unternav-gruppe { display: contents; }
.l-unternav-titel { display: none; }
.l-unternav-liste { display: flex; gap: 8px; }
.l-unternav-eintrag {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border-radius: 22px; flex: none;
  background: var(--f1); border: 1px solid var(--rand); color: var(--t2); text-decoration: none; font: 600 14px/1 var(--ui);
  transition: background .25s var(--weich), color .2s, transform .15s var(--feder);
}
.l-unternav-eintrag .symbolkachel.klein { width: 30px; height: 30px; border-radius: 10px; }
.l-unternav-eintrag .symbolkachel.klein svg { width: 16px; height: 16px; }
.l-unternav-eintrag:active { transform: scale(.97); }
.l-unternav-eintrag.aktiv { background: var(--verlauf); color: #fff; border-color: transparent; box-shadow: var(--glut-pille); }
.l-unternav-pfeil { display: none; }
.l-unternav-text { white-space: nowrap; }
.l-vb-rechts { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.l-vb-inhalt { min-width: 0; }
.l-vb-inhalt > .spalte { gap: 18px; }
@media (min-width: 1100px) {
  .l-vb { grid-template-columns: 248px minmax(0, 1fr); align-items: start; gap: 24px; }
  .l-unternav { flex-direction: column; gap: 6px; position: sticky; top: 144px; overflow: visible; }
  body.mit-simband .l-unternav { top: 172px; }
  .l-unternav-gruppe { display: block; }
  .l-unternav-titel { display: block; padding: 10px 10px 8px; }
  .l-unternav-liste { flex-direction: column; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--glas); border: 1px solid var(--rand); }
  .l-unternav-eintrag { height: auto; min-height: 50px; padding: 9px 12px; border-radius: 0; border: 0; border-bottom: 1px solid var(--rand); background: none; color: var(--t1); font: 520 14.5px/1.2 var(--ui); gap: 12px; }
  .l-unternav-eintrag:last-child { border-bottom: 0; }
  .l-unternav-eintrag:hover { background: var(--f1); }
  .l-unternav-eintrag.aktiv { background: var(--verlauf); box-shadow: none; }
  .l-unternav-eintrag .symbolkachel.klein { width: 32px; height: 32px; }
  .l-unternav-text { flex: 1; }
  .l-unternav-pfeil { display: inline-flex; width: 15px; height: 15px; opacity: .45; }
  .l-unternav-eintrag.aktiv .l-unternav-pfeil { opacity: .9; }
}
.l-speicherleiste {
  position: sticky; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px 18px;
  border-radius: var(--r-xl); background: var(--glas-dialog); border: 1px solid rgba(255,176,32,.35); box-shadow: var(--schatten-dialog);
  animation: aufsteigen .35s var(--weich);
}
.l-speicher-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.l-speicher-zeile > span { flex: 1 1 200px; color: var(--warn-text); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.l-speicher-zeile > span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.l-formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.l-formular .feld.breit { grid-column: 1 / -1; }
/* E23: Kennzahlen – berechnete Lösegeldforderung (Vorschau des Entwurfs) */
.l-forderung { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--rand); background: var(--f1); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.l-forderung .gruppe-titel { padding: 0; }
.l-forderung p { margin: 0; }
.l-forderung-werte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.l-forderung-euro { font: 300 32px/1.1 var(--ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.l-forderung-btc { font: 500 15px/1.2 var(--mono); color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* E27: Kurszeile (aktuell / offline / Schätzwert) und Umsatzvorschlag von Mistral */
.l-kurs-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.l-kurs-zeile #btc-kurs-zeile { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; flex: 1 1 220px; }
.l-kennzahlen-mistral { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; min-width: 0; }
.l-kennzahlen-mistral p { margin: 0; overflow-wrap: anywhere; }
.l-kennzahlen-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.l-kennzahlen-vorschlag { padding: 12px 14px; border-radius: var(--r-m); border: 1px dashed var(--rand); background: var(--f1); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.l-kennzahlen-vorschlag .reihe { display: flex; flex-wrap: wrap; gap: 8px; }
#umsatz-herkunft { margin: 6px 0 0; overflow-wrap: anywhere; }
.l-zeile-formular { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 560px) { .l-zeile-formular { grid-template-columns: 1fr; } }

.l-domain-gross { font: 600 24px/1.3 var(--mono); margin-bottom: 12px; word-break: break-all; }
.l-vorschlag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--f1); }
.l-vorschlag.gewaehlt { border-color: var(--ok); background: var(--ok-flaeche); }
.l-vorschlag-domain { font-size: 17px; word-break: break-all; }
.l-mailvorschau { border: 1px solid var(--rand); background: var(--f0); border-radius: var(--r-m); padding: 14px 16px; }
.l-mail-kopf { display: flex; flex-direction: column; gap: 7px; font-size: 14px; word-break: break-all; }
.l-pruefung { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.l-pruef { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; background: var(--f1); color: var(--t1); }
.l-pruef > .l-sym { width: 18px; height: 18px; margin-top: 1px; }
.l-pruef.ok { background: var(--ok-flaeche); color: var(--ok-text); }
.l-pruef.warn { background: var(--warn-flaeche); color: var(--warn-text); }
.l-pruef.bad { background: var(--bad-flaeche); color: var(--bad-text); }
.l-pruef.info { background: var(--info-flaeche); color: var(--info-text); }

.l-unit-zeile { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.l-unit-zeile .eingabe { width: 100%; min-height: 48px; font-size: 15px; }
.l-unit-kennung { color: var(--t3); }
.l-schalter-klein { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.l-methoden { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.l-methode { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--rand); border-radius: var(--r-l); background: var(--f1); cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s; }
.l-methode .kontrolle { margin-top: 1px; }
.l-methode.gewaehlt { border-color: var(--ma-text); background: rgba(123,67,151,.16); box-shadow: 0 0 0 1px var(--ma-text) inset; }
.l-hinweisliste { margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--t2); }
.l-radio { min-height: 48px; padding: 0 14px 0 0; align-items: center; }
.l-radio input { margin: 0; }

.l-gruppe { border: 1px solid var(--rand); border-radius: var(--r-xl); background: var(--glas); overflow: hidden; }
.l-gruppe > summary { cursor: pointer; padding: 14px 18px; min-height: 54px; display: flex; align-items: center; gap: 12px; list-style: none; }
.l-gruppe > summary::-webkit-details-marker { display: none; }
.l-gruppe > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--t3); border-bottom: 2px solid var(--t3); transform: rotate(-45deg); transition: transform .25s var(--weich); flex: none; }
.l-gruppe[open] > summary::before { transform: rotate(45deg); }
.l-gruppe > summary .titel { margin: 0; font-size: 15.5px; }
.l-gruppe > p { padding: 0 18px; }
.l-vorgaben-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.karte .l-vorgaben-raster { padding: 0; }
.l-vorgabe { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--f1); min-width: 0; }
.l-vorgabe-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; }
.l-vorgabe-label { font-weight: 620; font-size: 14px; }
.l-vorgabe-wert { display: flex; gap: 8px; align-items: center; }
.l-vorgabe-wert input[type=text], .l-vorgabe-wert input[type=number], .l-vorgabe-wert textarea, .l-vorgabe-wert select {
  flex: 1; min-width: 0; min-height: 44px; padding: 9px 12px; border-radius: 13px; border: 1px solid var(--rand); background-color: var(--f0); color: var(--t1); font: 400 15px/1.3 var(--ui);
}
.l-vorgabe-wert select { padding-right: 38px; }
.l-vorgabe-wert input:focus, .l-vorgabe-wert textarea:focus { outline: none; border-color: var(--ma-text); box-shadow: 0 0 0 4px rgba(185,138,224,.22); }
.l-vorgabe-wert input:disabled, .l-vorgabe-wert select:disabled, .l-vorgabe-wert textarea:disabled { opacity: .5; }
.l-vorgabe-wert textarea.mono { font: 400 13px/1.4 var(--mono); }
.l-vorgabe-schluessel { font-size: 11px; word-break: break-all; }
.l-gruppe-ohne-wirkung { border-style: dashed; }
.l-ohne-wirkung-grund, .l-wirkt-anderswo { line-height: 1.45; }
.l-wirkt-anderswo { color: var(--info-text); }

.l-abschnitt-karte.inaktiv, .l-vc-unit.inaktiv, .l-unit.inaktiv { opacity: .6; }
.l-abschnitt-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.l-abschnitt-titel { font-size: 16.5px; margin: 0; flex: 1 1 auto; }
.l-sequenz { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.l-sequenz-eintrag { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--rand); border-radius: 14px; background: var(--f1); flex-wrap: wrap; }
.l-sequenz-eintrag.fehlt { border-color: rgba(255,95,82,.45); background: var(--bad-flaeche); }
.l-sequenz-knoepfe { display: flex; gap: 6px; }
.l-sequenz-knoepfe .knopf { min-width: 44px; padding: 0 12px; }
.l-sequenz-leer { padding: 4px 0; }
.l-medium-info { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.l-medium-text { flex: 1 1 100%; }
.l-abschnitt-fuss { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.l-vorschau-medium { width: 100%; border-radius: var(--r-m); }
.l-vorschau-seite { width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--rand); border-radius: var(--r-m); background: #000; }

.l-pegel-block { display: flex; flex-direction: column; gap: 6px; }
.l-pegel { display: grid; grid-template-columns: 160px 1fr minmax(64px, max-content); gap: 14px; align-items: center; padding-left: 24px; min-height: 50px; }
.l-pegel.master { padding-left: 0; font-weight: 700; border-bottom: 1px solid var(--rand); padding-bottom: 8px; }
.l-pegel-wert { text-align: right; font: 250 22px/1 var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 6ch; } /* „100 %“ passt auch mit FreeType-Metriken (Linux/Android), 5ch war 2 px zu knapp */
@media (max-width: 560px) { .l-pegel { grid-template-columns: 1fr minmax(64px, max-content); } .l-pegel label { grid-column: 1 / -1; } }

.l-geraete-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.l-geraet { border: 1px solid var(--rand); border-radius: var(--r-l); padding: 14px; background: var(--f1); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.l-geraet-kopf { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.l-qr { align-self: flex-start; }
.l-einlass { margin-top: 12px; }
.l-einlass > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--t2); font-weight: 600; }

/* Vorabcheck */
.l-vc-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; align-items: start; }
.l-vc-unit.bereit { border-color: rgba(61,220,132,.3); }
.l-vc-unit.korrektur { border-color: rgba(255,95,82,.35); }
.l-vc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.l-vc-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 14px; background: var(--f1); }
.l-vc-chip .l-vc-sym { grid-row: 1 / 3; width: 20px; height: 20px; color: var(--t2); }
.l-vc-chip.ok .l-vc-sym { color: var(--ok-text); } .l-vc-chip.bad .l-vc-sym { color: var(--bad-text); } .l-vc-chip.info .l-vc-sym { color: var(--info-text); }
.l-vc-chip .pille { justify-self: start; }
.l-vc-block { margin-top: 12px; }
.l-vc-block .gruppe-titel { padding: 0 0 6px; }
.l-befunde { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.l-befunde-allgemein { padding-left: 0; gap: 10px; }
.l-befund.bad { color: var(--bad-text); } .l-befund.warn { color: var(--warn-text); } .l-befund.info { color: var(--info-text); }
.l-handgriffe { margin: 0; padding: 0; list-style: none; counter-reset: griff; display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
.l-handgriffe li { counter-increment: griff; display: flex; gap: 10px; align-items: flex-start; }
.l-handgriffe li::before { content: counter(griff); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verlauf); color: #fff; font: 700 12px/1 var(--ui); margin-top: -1px; }

/* ---------- Licht ---------- */
.l-licht-karte { overflow: hidden; }
.l-sprungleiste { padding: 2px 0 4px; }
.l-licht-vorschau { min-width: 0; }
.l-licht-was { flex: 1 1 240px; min-width: 0; font-size: 13px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-licht-probe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.l-licht-tabelle select { min-height: 40px; font-size: 13.5px; max-width: 260px; }
.l-licht-tabelle td { padding-top: 8px; padding-bottom: 8px; }
.l-licht-tabelle tr.inaktiv td { opacity: .55; }
.l-tabelle-trenner td { padding-top: 18px; border-bottom: 0; }
.l-tabelle-trenner .gruppe-titel { padding: 0; }
.l-licht-muster { display: inline-block; width: 28px; height: 28px; border-radius: 9px; flex: none; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 4px 14px -6px rgba(0,0,0,.8); vertical-align: middle; }
.l-licht-wirkt-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 6px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--t1); text-align: left; cursor: pointer; font: 560 13.5px/1.25 var(--ui); }
.l-licht-wirkt-knopf:hover { background: var(--f1); border-color: var(--rand); }
.l-licht-knoepfe { text-align: right; white-space: nowrap; }
.l-licht-test { gap: 8px; }
.l-licht-test select { min-height: 40px; }
.l-licht-filter { padding-bottom: 12px; }
.l-szenen { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; margin: 4px 0 14px; }
.l-szene { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--rand); border-radius: var(--r-l); background: var(--f1); min-width: 0;
  transition: border-color .2s, box-shadow .2s; }
.l-szene.gezeigt { border-color: var(--ma-text); box-shadow: 0 0 0 1px var(--ma-text) inset, 0 0 24px -8px rgba(220,36,48,.55); }
.l-szene-kopf { display: flex; align-items: center; gap: 12px; }
.l-szene-kopf .l-licht-muster { width: 40px; height: 40px; border-radius: 12px; }
.l-szene-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.l-szene-name strong { font: 620 14.5px/1.3 var(--ui); overflow: hidden; text-overflow: ellipsis; }
.l-szene-art { flex: none; font: 600 11px/1 var(--ui); color: var(--t3); padding: 5px 9px; border-radius: 999px; background: var(--f1); border: 1px solid var(--rand); }
.l-szene-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.l-feld-klein { gap: 5px; min-width: 0; }
.l-feld-klein .beschriftung { font-size: 11.5px; }
.l-feld-klein select, .l-feld-klein input { min-height: 40px !important; padding: 8px 12px !important; font-size: 14px !important; border-radius: 12px !important; }
.l-feld-klein select { padding-right: 36px !important; }
.l-feld-klein input.fehler { border-color: var(--bad); }
.l-feld-programm { flex: 1 1 170px; }
.l-farben { display: flex; gap: 10px; }
.l-farbe { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--t3); cursor: pointer; }
.l-farbe input[type=color] { width: 40px; height: 40px; border-radius: 12px; }
.l-szene-hell { display: grid; grid-template-columns: auto minmax(0, 1fr) max-content; gap: 10px; align-items: center; } /* Wertspalte so breit wie .l-hell-wert (min-width 6ch); mit fest 52px ragte der Wert 10 px über die Zeile */
.l-hell-wert { text-align: right; font: 250 17px/1 var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 6ch; }
.l-szene-info { margin: 0; }
.l-szene-mehr > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px; color: var(--t2); font: 600 13px/1 var(--ui); list-style: none; }
.l-szene-mehr > summary::-webkit-details-marker { display: none; }
.l-szene-mehr > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--t3); border-bottom: 2px solid var(--t3); transform: rotate(-45deg); transition: transform .25s var(--weich); }
.l-szene-mehr[open] > summary::before { transform: rotate(45deg); }
.l-szene-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 8px; }
.l-szene-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.l-licht-neu { gap: 10px; }
.l-licht-neu .eingabe { min-height: 44px; font-size: 15px; padding: 10px 14px; max-width: 280px; }
.l-strom-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.l-strom { border: 1px solid var(--rand); border-radius: var(--r-l); background: var(--f1); padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.l-strom-kopf { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.l-strom .werte > dt, .l-strom .werte > dd { padding: 8px 4px; }
.l-strom .pille { align-self: flex-start; margin-left: 4px; }

/* ---------- Live ---------- */
.l-rundenleiste { display: flex; flex-direction: column; gap: 18px; }
.l-runde-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.l-runde-links { gap: 12px; min-width: 0; }
.l-runde-titel { font: 700 26px/1.15 var(--ui); letter-spacing: -.02em; margin: 0; }
.l-runde-kopf { display: flex; flex-direction: column; gap: 4px; }
.l-runde-zeile { gap: 10px; }
.l-abschnitt-info { gap: 10px; }
.l-abschnitt-zeile { display: flex; align-items: center; gap: 14px; }
.l-abschnitt-nr { font: 250 34px/1 var(--ui); color: var(--t3); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.l-abschnitt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.l-abschnitt-name { font: 700 20px/1.2 var(--ui); letter-spacing: -.01em; }
.l-sequenz-status { display: flex; flex-direction: column; gap: 8px; max-width: 680px; }
.l-sequenz-status .wellen i { background: var(--mc); }
.l-spielzeit { min-width: 250px; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--r-l); background: var(--f1); border: 1px solid var(--rand); }
.l-spielzeit-wert { line-height: 1; }
.l-spielzeit.ueber .l-spielzeit-wert { color: var(--warn-text); }
.l-spielzeit .fortschritt { margin: 4px 0 2px; }
.l-fortschritt-zeile { gap: 10px; }
.l-pause { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.l-banner-titel { font: 700 19px/1.25 var(--ui); }
.l-pause .reihe { gap: 12px; }
.l-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 760px) { .l-units { grid-template-columns: 1fr; } }
.l-unit { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.l-unit.alarm { border-color: rgba(255,95,82,.5); box-shadow: 0 0 0 1px rgba(255,95,82,.35) inset, var(--schatten-karte); }
.l-unit.fertig:not(.alarm) { border-color: rgba(61,220,132,.28); }
.l-unit-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.l-unit-links { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.l-unit-name { display: flex; align-items: center; gap: 9px; font: 700 20px/1.15 var(--ui); letter-spacing: -.01em; }
.l-unit-team { margin-top: 5px; }
.l-unit-punkte { flex: 0 0 auto; max-width: 50%; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.l-punkte-gross { font-size: 40px; }
.l-laufend { color: var(--bad-text); }
.l-unit-balken { height: 4px; }
.l-unit-chips { gap: 6px; }
.l-alarme { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.l-alarm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; font-size: 14px;
  background: var(--warn-flaeche); border: 1px solid rgba(255,176,32,.2); }
.l-alarm.bad { background: var(--bad-flaeche); border-color: rgba(255,95,82,.28); }
.l-alarm.info { background: var(--info-flaeche); border-color: rgba(90,185,255,.25); }
.l-alarm-sym { width: 18px; height: 18px; color: var(--warn-text); }
.l-alarm.bad .l-alarm-sym { color: var(--bad-text); } .l-alarm.info .l-alarm-sym { color: var(--info-text); }
.l-alarm > .knopf { grid-column: 2; justify-self: start; }
.l-unit-spieler { display: flex; flex-wrap: wrap; gap: 6px; }
.l-spieler-chip { max-width: 100%; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--f1); border: 1px solid var(--rand); }
.l-spieler-name { min-width: 0; overflow-wrap: anywhere; }
.l-spieler-chip .zahl { flex-shrink: 0; color: var(--t2); font-weight: 600; }
.l-aufgaben > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--t2); font-size: 14px; font-weight: 600; }
.l-aufgaben-tabelle td { padding: 7px 6px; font-size: 13px; height: 40px; }
.l-aufgaben-tabelle tr.aktuell td { background: rgba(123,67,151,.18); }
.l-eingriffe { border-top: 1px solid var(--rand); padding-top: 12px; gap: 8px; }
.l-loesungen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0 0 10px; }
.l-loesung { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--f1); border: 1px solid var(--rand); word-break: break-word; }
.l-loesung .gruppe-titel { padding: 0; }
.l-loesung-wert { font-size: 14.5px; color: var(--t1); }
.l-loesung-muster { grid-row: span 2; }
.l-muster-zeile { display: flex; gap: 14px; align-items: center; }
.l-muster { flex: none; background: var(--f0); border-radius: 14px; border: 1px solid var(--rand); }
.l-muster circle { fill: rgba(255,255,255,.3); }
.l-muster circle.an { fill: #fff; }
.l-muster .l-muster-start { fill: none; stroke: var(--mc); stroke-width: 2; }
.l-muster-linie { fill: none; stroke: var(--ma-text); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.l-codes-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--t2); font-weight: 600; }
.l-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 8px; }
.l-codes span { padding: 6px; background: var(--f1); border-radius: 10px; text-align: center; }
.l-code { font-size: 17px; font-weight: 700; letter-spacing: .08em; }
.l-treffer { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--ma-text); border-radius: var(--r-l); background: rgba(123,67,151,.1); }
.l-einmalcode { font: 250 52px/1 var(--ui); letter-spacing: .16em; padding: 18px 26px; border-radius: var(--r-xl); background: var(--f0); border: 1px solid var(--ma-text); font-variant-numeric: tabular-nums; }
.l-protokoll-kopf { justify-content: space-between; margin-bottom: 12px; }
.l-segment { display: inline-flex; gap: 4px; padding: 4px; border-radius: 22px; background: var(--f1); border: 1px solid var(--rand); flex-wrap: wrap; }
.l-segment-knopf { min-width: 44px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 18px; background: none; color: var(--t2); font: 600 13.5px/1 var(--ui); cursor: pointer; transition: background .25s var(--weich), color .2s; }
.l-segment-knopf.aktiv { background: var(--verlauf); color: #fff; box-shadow: var(--glut-pille); }
.l-protokoll-tabelle td { font-size: 13px; }
.l-daten { max-width: 440px; word-break: break-all; color: var(--t2); }
.l-minus { color: var(--bad-text); }
.l-plus { color: var(--ok-text); }
#protokoll .l-tabelle-rahmen { max-height: min(60vh, 560px); overflow: auto; border-radius: var(--r-m); border: 1px solid var(--rand); }
#protokoll thead th { position: sticky; top: 0; background: var(--f1v); z-index: 1; }

/* ---------- Betrieb ---------- */
#betrieb { display: flex; flex-direction: column; gap: 18px; }
.l-betrieb-raster { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 1100px) { .l-betrieb-raster { grid-template-columns: 1fr 1fr; } }
.l-kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.l-kennzahl { padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--f1); min-width: 0; }
.l-kennzahl .gruppe-titel { padding: 0 0 6px; display: flex; align-items: center; gap: 7px; }
.l-kennzahl .punkt-led { width: 8px; height: 8px; }
.l-kennzahl-wert { font-weight: 600; font-size: 14.5px; word-break: break-word; }
.l-lease { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.l-warnkarte { border-color: rgba(255,95,82,.45); box-shadow: 0 0 0 1px rgba(255,95,82,.25) inset, var(--schatten-karte); }
.l-erklaerung { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.l-erklaerung li { position: relative; padding-left: 18px; line-height: 1.5; }
.l-erklaerung li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--verlauf); }
.l-fehler { color: var(--bad-text); max-width: 260px; }

/* ---------- Simulator ---------- */
#simulator { gap: 18px; }
.l-sim-band { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--r-l); background: var(--info-flaeche); border: 1px solid rgba(90,185,255,.3); color: var(--t1); font-size: 14px; }
.l-sim-band-sym { color: var(--info-text); margin-top: 1px; }
.l-sim-units { align-self: flex-start; }
.l-sim-units > button { cursor: pointer; }
.l-sim-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 760px) { .l-sim-raster { grid-template-columns: 1fr; } }
.l-sim-unbekannt { border-color: rgba(255,176,32,.45); background: linear-gradient(90deg, var(--warn-flaeche), transparent 70%), var(--glas); }
.l-sim-licht .lv-leiste { display: none; }
/* Patchfeld: Kohle-Raster, helle Leitungen, Anschlussnummern in Orange (STIL §4.5) */
.l-patch-svg { width: 100%; max-width: 440px; display: block; margin: 0 auto; touch-action: manipulation; user-select: none; }
.l-sim-patch svg { border-radius: var(--r-l); border: 1px solid var(--rand);
  background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 34px 34px, #07060D; }
.l-kabel { fill: none; stroke: #F5F3F7; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,255,255,.25)); }
.l-kabel.ungueltig { stroke: var(--bad); stroke-dasharray: 10 8; filter: drop-shadow(0 0 6px rgba(255,95,82,.45)); }
.l-buchse { cursor: pointer; outline: none; }
.l-buchse circle { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.35); stroke-width: 2.5; transition: fill .2s, stroke .2s; }
.l-buchse text { fill: var(--mc); font: 700 20px var(--anz); pointer-events: none; }
.l-buchse.belegt circle { fill: rgba(255,255,255,.14); stroke: #F5F3F7; }
.l-buchse.gewaehlt circle { fill: var(--mb); stroke: #fff; }
.l-buchse.gewaehlt text { fill: #fff; }
.l-buchse:focus-visible circle { stroke: var(--ma-text); stroke-width: 5; }
.l-patch-label { fill: var(--t3); font: 12px var(--mono); }
.l-kippschalter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.l-kipp { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 124px; padding: 12px 4px; border-radius: var(--r-m); border: 1px solid var(--rand); background: var(--f1); color: var(--t1); cursor: pointer; font: inherit;
  transition: transform .15s var(--feder), border-color .2s; }
.l-kipp:active { transform: scale(.95); }
.l-kipp-name { font: 700 17px var(--anz); }
.l-kipp-hebel { width: 24px; height: 48px; border-radius: 12px; background: var(--f2); border: 1px solid var(--rand); position: relative; }
.l-kipp-hebel::after { content: ""; position: absolute; left: 2px; width: 18px; height: 20px; border-radius: 9px; background: #fff; bottom: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .28s var(--feder); }
.l-kipp.an .l-kipp-hebel { background: var(--ok-verlauf); border-color: transparent; }
.l-kipp.an .l-kipp-hebel::after { transform: translateY(-22px); }
.l-kipp.haupt { border-color: var(--ma-text); }
.l-kipp-stand { font: 700 12px var(--mono); color: var(--t2); }
.l-kipp.an .l-kipp-stand { color: var(--ok-text); }
.l-sim-adapter .l-karten-kopf { margin-bottom: 0; }
.l-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.l-slot { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-m);
  border: 1px solid color-mix(in srgb, var(--slot) 60%, transparent); background: color-mix(in srgb, var(--slot) 18%, transparent); }
.l-slot-farbe { font-weight: 700; color: var(--t1); display: flex; align-items: center; gap: 8px; }
.l-slot-farbe::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--slot); box-shadow: 0 0 10px var(--slot); }
.l-slot select { width: 100%; }
.l-tasten-anzeige { font: 250 36px/1 var(--ui); text-align: center; letter-spacing: .3em; padding: 16px 10px; margin-bottom: 12px; border-radius: var(--r-m); background: var(--f0); border: 1px solid var(--rand); font-variant-numeric: tabular-nums; }
.l-sim-tasten { max-width: 100%; margin-bottom: 12px; }
.l-sim-tasten button { min-height: 60px; font-size: 26px; }
.l-sim-tasten button.ok, .l-sim-tasten button.leise { font-size: 14px; }
/* BIOS-Tasten: vier Tastenkappen wie die echten Taster */
.l-bios-tasten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .l-sim-bios .l-bios-tasten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.l-bios-taste { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; min-height: 124px; border-radius: var(--r-l);
  background: var(--f1); border: 1px solid var(--rand); color: var(--t1); cursor: pointer; text-align: center; transition: transform .15s var(--feder), border-color .2s; }
.l-bios-taste:active { transform: scale(.95); }
.l-bios-taste .tastenkappe { width: 64px; height: 50px; border-radius: 14px; }
.l-bios-taste .tastenkappe svg { width: 26px; height: 26px; }
.l-bios-kurz { font: 650 15px/1.2 var(--ui); }
.l-bios-taste .klein { font-size: 12px; line-height: 1.3; }
.l-bios-letzte { margin: 12px 0 0; }
.l-sim-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; word-break: break-all; }
.l-sim-verlauf li { padding: 6px 10px; border-radius: 10px; background: var(--f1); }
.l-sim-verlauf li.bad { color: var(--bad-text); background: var(--bad-flaeche); }

/* ---------- Schmale Breiten ---------- */
@media (max-width: 1100px) {
  /* Insel im Fluss zwischen Marke und Knöpfen, damit nichts überlappt */
  .l-marke { flex: 1 1 0; }
  .l-kopf-rechts { flex: 1 1 0; justify-content: flex-end; margin-left: 0; }
  .l-insel { position: relative; left: auto; top: auto; transform: none; flex: none; }
  .l-insel.offen { width: clamp(230px, 36vw, 300px); }
  .l-kopf-titel { max-width: 100%; }
  .l-verbindung .verbindung { font-size: 0; gap: 0; }
}
@media (max-width: 900px) {
  .l-runde-raster { grid-template-columns: 1fr; }
  .l-spielzeit { min-width: 0; }
}
@media (max-width: 760px) {
  .l-kopf-zeile { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .l-insel { position: relative; left: auto; top: auto; transform: none; order: 3; margin: 0 auto; }
  .l-insel:not(.offen) { display: none; }
  .l-nav-zeile { padding: 0 16px 12px; }
  .l-haupt { padding: 18px 16px 110px; }
  .l-karte { padding: 16px; }
  .l-karte.kante { padding-left: 20px; }
  .l-unit-zeile { grid-template-columns: 1fr auto; }
  .l-unit-zeile .l-unit-kennung { grid-column: 1 / -1; }
  .l-hinweis { grid-template-columns: auto minmax(0, 1fr); }
  .l-hinweis-knopf { grid-column: 2; justify-self: start; }
  .l-bios-tasten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-szene-raster { grid-template-columns: 1fr; }
  .l-kippschalter { gap: 6px; }
}

/* NFC-07: Kartenliste zum Beschreiben der Tags (druckbar) */
.l-karten-tabelle td { vertical-align: top; }
.l-qr-klein { padding: 6px; }
.l-qr-klein svg { width: 96px; height: 96px; }
@media (max-width: 560px) { .l-karten-qr-spalte { display: none; } }
@media print {
  body.l-seite, body { background: #fff !important; color: #000 !important; padding-top: 0 !important; }
  .l-tapete, .l-kopf, .l-unternav, .l-speicherleiste, .band-simulation, .toasts, .l-nicht-drucken, .l-seitenkopf { display: none !important; }
  .l-vb { display: block !important; }
  .karte, .l-karte { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; }
  .text-dim, .text-faint, .mono { color: #222 !important; }
  .l-karten-qr-spalte { display: table-cell !important; }
}
@media (prefers-reduced-motion: reduce) {
  .l-aufleuchten { animation: none; box-shadow: 0 0 0 3px var(--ma-text); }
}

/* Korbi E24: automatische Hinweise ans Case je Unit (Liste mit Zeit, Stufe, Quelle; Schicken, Aussetzen) */
.l-hinweise { border-top: 1px solid var(--rand); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.l-hinweise-kopf { gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.l-hinweise-sym { width: 18px; height: 18px; color: #e0b43c; }
.l-hinweis-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow: auto; }
.l-hinweis-liste li { font-size: 13px; line-height: 1.4; }
.l-hinweis-text { color: var(--t1); }
.l-hinweise-knoepfe { gap: 8px; flex-wrap: wrap; }
.l-hinweis-zitat { margin: 0; padding: 10px 14px; border-left: 3px solid #e0b43c; background: var(--f1); border-radius: 8px; font-size: 14px; line-height: 1.45; }
/* ---------- Spielbox: Serviceklappen (E3), FUSE BOX (E4), Klappen-Taster im Simulator (E1/E2) ---------- */
.l-klappen { border-top: 1px solid var(--rand); padding-top: 10px; }
.l-klappen > summary { cursor: pointer; font: 600 14px/1.3 var(--ui); padding: 4px 0; }
.l-klappe { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-top: 8px; border-radius: 14px; background: var(--f1); border: 1px solid var(--rand); }
.l-klappe.warnung, .l-klappe.faehrt { border-color: rgba(255,176,32,.45); }
.l-klappe.fehler { border-color: rgba(255,95,82,.55); background: var(--bad-flaeche); }
.l-klappe-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.l-klappe-name { font: 600 14px/1.2 var(--ui); margin-right: auto; }
.l-klappe-fehler { color: var(--bad-text); display: flex; align-items: center; gap: 4px; }
.l-klappe-knoepfe { gap: 6px; flex-wrap: wrap; }
.l-fusebox { grid-column: 1 / -1; }
.l-fusebox-reihe { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.l-fusebox-hebel { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: 8px 10px; border-radius: 12px; background: var(--f1); border: 1px solid var(--rand); }
.l-fusebox-hebel b { font: 700 16px/1 var(--anz); letter-spacing: .06em; }
.l-fusebox-hebel.haupt { border-color: rgba(255,95,82,.45); }
.l-sim-klappe { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--f1); border: 1px solid var(--rand); }
.l-sim-klappe + .l-sim-klappe { margin-top: 8px; }
.l-sim-klappe-titel { font: 600 11px/1 var(--anz); letter-spacing: .18em; text-transform: uppercase; color: var(--t3); }
.l-sim-klappe .l-bios-tasten { margin: 0; }
.l-bios-taste .l-taste-name { font: 700 11.5px/1 var(--anz); letter-spacing: .14em; }
.l-sim-access { display: flex; gap: 8px; margin-top: 4px; }
.l-sim-access button { flex: 1; min-height: 46px; border-radius: 23px; border: 2px solid rgba(90,185,255,.7); background: var(--f1); color: var(--t1);
  font: 700 13px/1 var(--anz); letter-spacing: .16em; cursor: pointer; box-shadow: 0 0 12px -2px rgba(90,185,255,.45); }
.l-sim-access button:active { transform: scale(.97); }
.l-sim-fluegel-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }


/* Quiz beim Warten (Korbi E35, js/quiz.js): Fragen-Editor, Vorschau wie am Case, Zeile je Unit in Live */
.l-quiz-schalter { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.l-quiz-liste { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.l-quiz-frage { border: 1px solid var(--rand); border-radius: 18px; padding: 12px 14px; background: var(--f1); }
.l-quiz-frage.fehler { border-color: var(--bad); }
.l-quiz-kopf { display: flex; align-items: flex-start; gap: 12px; }
.l-quiz-nr { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--f2); font-weight: 700; }
.l-quiz-text { flex: 1; min-width: 0; }
.l-quiz-text > b { display: block; line-height: 1.35; }
.l-quiz-chips { margin-top: 6px; gap: 6px; }
.l-quiz-knoepfe { flex: none; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.l-quiz-antworten { list-style: none; margin: 10px 0 0 44px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.l-quiz-antworten li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--t2); }
.l-quiz-antworten li.richtig { color: var(--ok); font-weight: 600; }
.l-quiz-buchstabe { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--f2); font: 700 12px/1 var(--ui); color: var(--t2); }
.l-quiz-richtig { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.l-quiz-erklaerung { margin: 8px 0 0 44px; }
.l-quiz-form-antwort { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.l-quiz-form-antwort input[type=text] { flex: 1; }
.l-quiz-buehne { display: grid; place-items: center; padding: 22px; border-radius: 22px; min-height: 360px;
  background: radial-gradient(50% 38% at 78% 14%, rgba(80,120,255,.45), transparent 62%), radial-gradient(60% 46% at 12% 62%, rgba(123,67,151,.5), transparent 62%), linear-gradient(200deg, #0a1030, #060713 60%, #100a1c); }
.l-quiz-buehne .qz-karte { width: 100%; }
.l-unit-quiz { gap: 8px; align-items: center; margin-top: 6px; }
.l-unit-quiz-frage { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 160px; min-width: 0; }
.l-quiz-leiste { margin-top: 4px; }
@media (max-width: 900px) { .l-quiz-antworten { grid-template-columns: 1fr; margin-left: 0; } .l-quiz-kopf { flex-wrap: wrap; } }

/* Tablet: Unitwahl und PIA verwenden dieselben Karten und Tippflächen. */
.l-sim-units > button { min-width: 44px; min-height: 44px; }
#pia-wissen > .knopf { align-self: flex-start; }
.pia-chat { overflow-wrap: anywhere; }

/* Smartphone: kompakter Kopf, feste Navigation und Karten statt Tabellenzeilen. */
.l-technik-liste, .l-archiv-inhalt, .l-archiv-runden, .l-archiv-spieler { display: grid; gap: 12px; }
.l-technik-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); margin-top: 18px; }
.l-technik-karte { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.l-technik-karte h2, .l-technik-karte p { margin: 0 0 6px; }
.l-technik-karte .knopf { flex: none; }
.l-archiv-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin: 18px 0; }
.l-archiv-runden { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.l-archiv-runde { display: flex; flex-direction: column; gap: 4px; min-height: 88px; padding: 12px; color: var(--t1); text-align: left; cursor: pointer; }
.l-archiv-runde.aktiv { border-color: var(--ma-text); }
.l-archiv-person { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px; border: 1px solid var(--rand); border-radius: var(--r-m); }
.l-archiv-person > :last-child { grid-column: 1 / -1; color: var(--t2); }
.l-unit-abschnitt { margin: 4px 0; }
.l-unit-details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ma-text); font-weight: 600; }
.l-unit-details[open] { border-top: 1px solid var(--rand); margin-top: 10px; }

@media (max-width: 760px) {
  html, body.l-seite, #app, .l-haupt, .l-ansicht { max-width: 100%; overflow-x: clip; }
  body.l-seite { font-size: 15px; }
  .l-kopf { position: relative; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .l-kopf-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; min-height: 60px; }
  .l-marke { min-width: 0; }
  .l-marke .marke-zeichen { height: 28px; }
  .l-kopf-rechts { flex: none; }
  .l-abmelden { width: 44px; padding: 0; justify-content: center; }
  .l-abmelden > span:last-child { display: none; }
  .l-insel { grid-column: 1 / -1; order: initial; width: min(100%, 340px) !important; justify-self: center; }
  .l-nav-zeile { display: block; padding: 0 12px 8px; }
  .l-kopf-status { justify-content: flex-start; }
  .l-kopf-status .pille { max-width: 100%; white-space: normal; }
  .l-nav { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px;
    padding: 5px max(5px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
    overflow: visible; background: var(--f0); border-top: 1px solid var(--rand); box-shadow: var(--schatten-karte); }
  .l-speicherleiste { bottom: calc(122px + env(safe-area-inset-bottom)); z-index: 85; }
  body.l-seite > .l-toasts { bottom: calc(122px + env(safe-area-inset-bottom)); }
  .l-reiter { min-width: 0; height: 48px; padding: 3px 1px; border-radius: 12px; justify-content: center; flex-direction: column; gap: 2px; font-size: 11px; }
  .l-reiter .l-sym { width: 17px; height: 17px; }
  .l-haupt { padding: 14px max(12px, env(safe-area-inset-right)) calc(146px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .l-ansicht, .l-karte, .l-unit, .l-vb-rechts, .l-vb-inhalt { min-width: 0; }
  .l-karte { padding: 14px; }
  .l-karte.kante { padding-left: 14px; }
  .l-seitentitel { font-size: 23px; }
  .l-aktionen, .l-suchzeile, .l-eingriffe, .l-hinweise-knoepfe { display: grid; grid-template-columns: 1fr; }
  .l-aktionen > *, .l-suchzeile > *, .l-eingriffe > *, .l-hinweise-knoepfe > * { width: 100%; min-width: 0; }
  .l-technik-karte { align-items: stretch; flex-direction: column; }
  .l-unternav { display: block; overflow: visible; padding: 0; mask-image: none; -webkit-mask-image: none; }
  .l-unternav-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-unternav-eintrag { min-width: 0; min-height: 48px; padding: 6px; white-space: normal; }
  .l-unternav-text { white-space: normal; }
  .l-units, .l-sim-raster, .l-betrieb-raster, .l-runde-raster { grid-template-columns: minmax(0, 1fr); }
  .l-unit-kopf { gap: 8px; }
  .l-unit-chips { gap: 4px; }
  .l-unit-chips .pille { max-width: 100%; white-space: normal; }
  .l-seite table, .l-seite tbody, .l-seite tr, .l-seite td { display: block; width: 100%; min-width: 0; }
  .l-seite thead { display: none; }
  .l-seite tbody { display: grid; gap: 10px; }
  .l-seite tbody tr { border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--f1); padding: 8px 10px; }
  .l-seite tbody td { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; height: auto; min-height: 38px; padding: 6px 2px; border: 0; overflow-wrap: anywhere; text-align: right; }
  .l-seite tbody td + td { border-top: 1px solid var(--rand); }
  .l-seite tbody td::before { content: attr(data-label); color: var(--t3); text-align: left; font-size: 12px; flex: 0 0 38%; }
  .l-tabelle-rahmen, #protokoll .l-tabelle-rahmen { overflow-x: clip; max-height: none; }
  .overlay { align-items: stretch; padding: 0; }
  .overlay .fenster, .overlay .fenster.breit { width: 100%; max-width: 100%; height: var(--sichtbare-hoehe, 100dvh); max-height: var(--sichtbare-hoehe, 100dvh);
    border-radius: 0; overflow-y: auto; padding: calc(18px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
  .l-fenster .fenster-fuss { display: grid; grid-template-columns: 1fr; }
  .l-fenster .fenster-fuss .knopf { width: 100%; min-height: 48px; }
  .l-seite button, .l-seite a.knopf, .l-seite summary, .l-seite .l-reiter { min-height: 44px; }
  .l-seite input:not([type=checkbox]):not([type=radio]), .l-seite textarea, .l-seite select { font-size: 16px; max-width: 100%; }
}
/* E86/E88: Smartphone zuerst, Konten und Freigaben im vorhandenen Hell-/Dunkelstil. */
.l-geheimnis { display: block; overflow-wrap: anywhere; white-space: pre-wrap; padding: 12px; background: var(--f2); }
#konto-faktor .qr-rahmen { width: fit-content; max-width: 100%; background: white; padding: 8px; }
#anmelde-modus, #konto-felder input, #konto-faktor input, #ansicht-konten input, #ansicht-konten select { min-height: 44px; width: 100%; }
.l-rangliste-schalter { display: flex; align-items: center; min-height: 44px; gap: 12px; }
.l-rangliste-schalter input { width: 24px; height: 24px; flex-shrink: 0; }
#ansicht-konten .zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.l-rangliste { width: 100%; border-collapse: collapse; background: var(--f1); }
.l-rangliste th, .l-rangliste td { text-align: left; padding: 12px; border-bottom: 1px solid var(--rand); overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .l-rangliste, .l-rangliste tbody, .l-rangliste tr, .l-rangliste td { display: block; }
  .l-rangliste thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
  .l-rangliste tr { border: 1px solid var(--rand); border-radius: 16px; margin-bottom: 12px; }
  .l-seite .l-rangliste td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .l-seite .l-rangliste td::before { content: attr(data-spalte); color: var(--t2); }
}
body:not([data-rolle="betreiber"]) #firma-loeschen,
body:not([data-rolle="betreiber"]) [data-betreiber],
body:not([data-rolle="betreiber"]) #pia-loeschen,
body:not([data-rolle="betreiber"]) #pia-export-csv,
body:not([data-rolle="betreiber"]) #pia-export-json,
body:not([data-rolle="betreiber"]) [data-pia-auskunft],
body:not([data-rolle="betreiber"]) [data-pia-case-loeschen] { display: none !important; }