/* =====================================================================
   demo-kern.css · Gemeinsamer Demo-Rahmen aller Automationsseiten
   Besitzer: Builder 3 (Branch claude/auto-seiten-b). Zusammen mit
   demo-kern.js. Bitte nicht in fremden Branches ändern; Wünsche über
   den Geschäftsführer.

   SPEZIFITAET: Alle Regeln stehen unter .demo[data-demo], damit sie die
   alte Demo-Kachel aus stil.css (.demo p) sicher schlagen. Seiteneigene
   Regeln daher ebenfalls mit .demo[data-demo] beginnen.

   GRUNDSATZ: Der Rahmen färbt sich selbst ein und erbt keine Text-
   farbe vom Abschnitt (Lehre aus CLAUDE.md 7a). Er funktioniert in
   .teil (dunkel) und in .teil--hell gleich.

   KLASSEN
   .demo[data-demo="<key>"]   Rahmen. Überschreibt die alte Demo-Kachel
                              aus stil.css (die heisst nur .demo).
     .demo-kopf               Kopfzeile: .demo-marke + .demo-neu
     .demo-marke              «Beispiel, frei erfunden» (Pflicht, im HTML)
     .demo-neu                Knopf «Neu starten» (im HTML mit hidden,
                              demo-kern.js blendet ihn ein)
     .demo-flaeche            Inhalt. Ohne JS steht hier das fertige
                              Beispiel-Ergebnis.
     .demo-fuss               kleine Zeile unter der Fläche (Hinweis
                              «nichts wird gespeichert»)
   Bausteine
     .demo-karte              helle Karte (App-Optik), .demo-karte--still
     .demo-liste              Liste, Zeilen <li>, li.ist-erledigt
     .demo-handy              Handy-Rahmen, darin .demo-handy-schirm
     .demo-wahl               Auswahlknöpfe (button[aria-pressed])
     .demo-taste              Knopf in der Demo, .demo-taste--leer
     .demo-ordner             Ablageziel (Ordner), .demo-ordner--pruefen
     .demo-weiche             Sortierweiche, darin .demo-rinne
     .demo-ziehbar            ziehbares Element (setzt demo-kern.js)
     .demo-hinweis            kleiner Hinweis-Badge (z. B. «Standortdaten
                              entfernt»), .ist-an blinkt einmal auf
     .demo-raster             einfaches 2-Spalten-Gitter, mobil 1 Spalte
     .demo-spieler            Schritt-Spieler (baut demo-kern.js)
     .demo-ansage             aria-live (baut demo-kern.js, unsichtbar)
   ===================================================================== */

.demo[data-demo] {
  --d-grund: #0C1628;
  --d-grund-2: #122038;
  --d-linie: #2A3D5E;
  --d-text: #EAF0F9;
  --d-still: #A9B6CB;
  --d-akzent: #6CE7FA;
  --d-papier: #F6F9FD;
  --d-papier-2: #E6EDF7;
  --d-papier-linie: #C3D0E3;
  --d-tinte: #0B1526;
  --d-tinte-still: #44526A;
  --d-blau: #0F4FA8;
  --d-gruen: #0E6B47;
  --d-gruen-hell: #DDF3E9;
  --d-gelb: #7A4D00;
  --d-gelb-hell: #FFF1D6;
  --d-rot: #A2262E;
  --d-rot-hell: #FBE3E4;

  display: block;
  position: relative;
  color: var(--d-text);
  background: var(--d-grund);
  border: 1px solid var(--d-linie);
  border-radius: 14px;
  padding: 0;
  text-decoration: none;
  overflow: hidden;
  font-family: var(--schrift, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  isolation: isolate;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.7);
}
/* hidden gilt immer, auch wenn ein Baustein display setzt (Inhalte nur mit JS) */
.demo[data-demo] [hidden] { display: none !important; }
/* Die alte Kachel aus stil.css hat einen Hover-Verlauf; hier nicht. */
.demo[data-demo]:hover {
  background: var(--d-grund);
  border-color: var(--d-linie);
}
.demo[data-demo] :where(p) { max-width: none; font-size: inherit; color: inherit; } /* :where, damit Klassen wie .demo-gruppe-name gewinnen */
.demo[data-demo] :where(h3, h4) {
  font-family: var(--anzeige, Georgia, serif);
  font-weight: 400;
  color: inherit;
  line-height: 1.15;
  margin: 0;
}
.demo[data-demo] :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

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

.demo[data-demo] .demo-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem 0.7rem 1.1rem;
  border-bottom: 1px solid var(--d-linie);
  background: var(--d-grund-2);
}
.demo[data-demo] .demo-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 600 0.74rem/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-still);
}
.demo[data-demo] .demo-marke::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--d-akzent);
  box-shadow: 0 0 0 4px rgba(108, 231, 250, 0.16);
  flex: none;
}
.demo[data-demo] .demo-neu,
.demo[data-demo] .demo-taste,
.demo[data-demo] .demo-spieler-steuer button {
  appearance: none;
  font: 600 0.9rem/1.2 var(--schrift, system-ui, sans-serif);
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.demo[data-demo] .demo-neu {
  background: transparent;
  color: var(--d-text);
  border: 1px solid #5A6E8C;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.demo[data-demo] .demo-neu::before { content: "\21BB"; font-size: 1.05em; line-height: 1; }
.demo[data-demo] .demo-neu:hover { border-color: var(--d-akzent); }
.demo[data-demo] .demo-neu[hidden] { display: none; }

.demo[data-demo] :where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--d-akzent);
  outline-offset: 2px;
}
.demo[data-demo] .demo-karte :where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible,
.demo[data-demo] .demo-handy-schirm :where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--d-blau);
}

/* ---------- Fläche -------------------------------------------------- */

.demo[data-demo] .demo-flaeche {
  padding: clamp(1rem, 2.6vw, 1.75rem);
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}
.demo[data-demo] .demo-flaeche > * { min-width: 0; }
.demo[data-demo] .demo-fuss {
  padding: 0.7rem 1.1rem 0.9rem;
  border-top: 1px solid var(--d-linie);
  font-size: 0.86rem;
  color: var(--d-still);
}
.demo[data-demo] .demo-titel {
  font-family: var(--anzeige, Georgia, serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.15;
}
.demo[data-demo] .demo-klein { font-size: 0.88rem; color: var(--d-still); }

.demo[data-demo] .demo-raster { display: grid; gap: 1.1rem; }
@media (min-width: 48rem) {
  .demo-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .demo-raster--schmal-breit { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* ---------- Knöpfe -------------------------------------------------- */

.demo[data-demo] .demo-taste {
  background: var(--d-akzent);
  color: #041018;
  border: 1px solid var(--d-akzent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.demo[data-demo] .demo-taste:hover { background: #A3F2FE; border-color: #A3F2FE; }
.demo[data-demo] .demo-taste:active { transform: scale(0.97); }
.demo[data-demo] .demo-taste--leer { background: transparent; color: var(--d-text); border-color: #5A6E8C; }
.demo[data-demo] .demo-taste--leer:hover { background: transparent; border-color: var(--d-akzent); }
.demo[data-demo] .demo-taste[disabled], .demo[data-demo] .demo-taste[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Auf heller Karte */
.demo[data-demo] .demo-karte .demo-taste, .demo[data-demo] .demo-handy-schirm .demo-taste { background: var(--d-blau); border-color: var(--d-blau); color: #fff; }
.demo[data-demo] .demo-karte .demo-taste:hover, .demo[data-demo] .demo-handy-schirm .demo-taste:hover { background: #0B3C82; border-color: #0B3C82; }
.demo[data-demo] .demo-karte .demo-taste--leer, .demo[data-demo] .demo-handy-schirm .demo-taste--leer { background: transparent; color: var(--d-tinte); border-color: #6B7A92; }
.demo[data-demo] .demo-karte .demo-taste--leer:hover, .demo[data-demo] .demo-handy-schirm .demo-taste--leer:hover { background: transparent; color: var(--d-tinte); border-color: var(--d-blau); }
.demo[data-demo] .demo-tasten { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Auswahl (Branche, Anlass, Bausteine) */
.demo[data-demo] .demo-wahlen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.demo[data-demo] .demo-wahl {
  appearance: none;
  font: 500 0.92rem/1.2 var(--schrift, system-ui, sans-serif);
  min-height: 2.75rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid #5A6E8C;
  background: transparent;
  color: var(--d-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.demo[data-demo] .demo-wahl::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex: none;
  opacity: 0.7;
}
.demo[data-demo] .demo-wahl--kasten::before { border-radius: 3px; }
.demo[data-demo] .demo-wahl:hover { border-color: var(--d-akzent); }
.demo[data-demo] .demo-wahl[aria-pressed="true"], .demo[data-demo] .demo-wahl[aria-checked="true"] {
  background: var(--d-akzent);
  border-color: var(--d-akzent);
  color: #041018;
}
.demo[data-demo] .demo-wahl[aria-pressed="true"]::before, .demo[data-demo] .demo-wahl[aria-checked="true"]::before {
  opacity: 1;
  background: radial-gradient(circle, #041018 0 38%, transparent 42%);
}
.demo[data-demo] .demo-wahl--kasten[aria-pressed="true"]::before, .demo[data-demo] .demo-wahl--kasten[aria-checked="true"]::before {
  background: #041018;
  box-shadow: inset 0 0 0 2px var(--d-akzent);
}
.demo[data-demo] .demo-gruppe-name {
  font: 600 0.74rem/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-still);
  margin-bottom: 0.5rem;
  display: block;
}

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

.demo[data-demo] .demo-karte {
  background: var(--d-papier);
  color: var(--d-tinte);
  border-radius: 12px;
  border: 1px solid var(--d-papier-linie);
  padding: clamp(0.9rem, 2vw, 1.25rem);
  display: grid;
  gap: 0.6rem;
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.55);
  min-width: 0;
  overflow-wrap: anywhere;
}
.demo[data-demo] .demo-karte .demo-klein, .demo[data-demo] .demo-handy-schirm .demo-klein { color: var(--d-tinte-still); }
.demo[data-demo] .demo-karte .demo-gruppe-name { color: var(--d-tinte-still); }
.demo[data-demo] .demo-karte a { color: var(--d-blau); }
.demo[data-demo] .demo-karte--still { background: var(--d-grund-2); color: var(--d-text); border-color: var(--d-linie); box-shadow: none; }
.demo[data-demo] .demo-karte--still .demo-klein,
.demo[data-demo] .demo-karte--still .demo-gruppe-name { color: var(--d-still); }
/* Leere Taste auf der dunklen Still-Karte: hell, nicht dunkel (vorher 1.1:1) */
.demo[data-demo] .demo-karte--still .demo-taste--leer { background: transparent; color: var(--d-text); border-color: #5A6E8C; }
.demo[data-demo] .demo-karte--still .demo-taste--leer:hover { background: transparent; color: var(--d-text); border-color: var(--d-akzent); }
.demo[data-demo] .demo-karte-kopf { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.demo[data-demo] .demo-zeichen {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 0.95rem/1 var(--schrift, system-ui, sans-serif);
  background: var(--d-blau);
  color: #fff;
}
.demo[data-demo] .demo-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: 600 0.78rem/1.2 var(--schrift, system-ui, sans-serif);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--d-papier-2);
  color: var(--d-tinte);
  width: fit-content;
}
.demo[data-demo] .demo-marker--gruen { background: var(--d-gruen-hell); color: var(--d-gruen); }
.demo[data-demo] .demo-marker--gelb { background: var(--d-gelb-hell); color: var(--d-gelb); }
.demo[data-demo] .demo-marker--rot { background: var(--d-rot-hell); color: var(--d-rot); }
.demo[data-demo] .demo-marker--blau { background: #DCE8FA; color: var(--d-blau); }

/* ---------- Liste --------------------------------------------------- */

.demo[data-demo] .demo-liste { display: grid; gap: 0; border-top: 1px solid var(--d-papier-linie); }
.demo[data-demo] .demo-liste > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.1rem;
  border-bottom: 1px solid var(--d-papier-linie);
  min-width: 0;
}
.demo[data-demo] .demo-liste > li > :where(div, span):first-of-type { min-width: 0; flex: 1; }
.demo[data-demo] .demo-liste > li.ist-erledigt :where(.demo-liste-text) { text-decoration: line-through; color: var(--d-tinte-still); }
.demo[data-demo] .demo-liste > li.ist-neu { animation: demo-neu-zeile 1.4s ease-out both; }
.demo[data-demo] .demo-karte--still .demo-liste, .demo[data-demo] .demo-flaeche > .demo-liste { border-top-color: var(--d-linie); }
.demo[data-demo] .demo-karte--still .demo-liste > li, .demo[data-demo] .demo-flaeche > .demo-liste > li { border-bottom-color: var(--d-linie); }
@keyframes demo-neu-zeile {
  from { background: rgba(108, 231, 250, 0.35); }
  to { background: transparent; }
}

/* ---------- Handy --------------------------------------------------- */

.demo[data-demo] .demo-handy {
  width: min(100%, 19.5rem);
  margin-inline: auto;
  border-radius: 2.4rem;
  padding: 0.7rem;
  background: linear-gradient(160deg, #24324C, #0A1220 60%);
  border: 1px solid #3A4C6C;
  box-shadow: 0 30px 50px -28px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(255, 255, 255, 0.04);
  position: relative;
}
.demo[data-demo] .demo-handy::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 50%;
  translate: -50% 0;
  width: 5.5rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #050A14;
  z-index: 2;
}
.demo[data-demo] .demo-handy-schirm {
  position: relative;
  border-radius: 1.8rem;
  background: var(--d-papier);
  color: var(--d-tinte);
  min-height: 30rem;
  padding: 2.9rem 0.9rem 1rem;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  overflow-wrap: anywhere;
}
.demo[data-demo] .demo-handy--dunkel .demo-handy-schirm { background: #0E1A2E; color: var(--d-text); }
.demo[data-demo] .demo-handy-zeit {
  position: absolute;
  top: 1.05rem;
  left: 1.4rem;
  font: 600 0.78rem/1 var(--schrift, system-ui, sans-serif);
}
.demo[data-demo] .demo-blase {
  background: #fff;
  border: 1px solid var(--d-papier-linie);
  border-radius: 1rem 1rem 1rem 0.3rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.92rem;
  max-width: 92%;
}
.demo[data-demo] .demo-blase--eigen { justify-self: end; background: #DCE8FA; border-color: #B9CDEB; border-radius: 1rem 1rem 0.3rem 1rem; }

/* ---------- Ordner und Weiche -------------------------------------- */

.demo[data-demo] .demo-ordner-reihe { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.demo[data-demo] .demo-ordner {
  position: relative;
  background: var(--d-grund-2);
  border: 1.5px solid var(--d-linie);
  border-radius: 4px 12px 12px 12px;
  padding: 1.15rem 0.85rem 0.85rem;
  min-height: 6.5rem;
  display: grid;
  align-content: start;
  gap: 0.4rem;
  color: var(--d-text);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.demo[data-demo] .demo-ordner::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: -1.5px;
  width: 42%;
  height: 0.6rem;
  border: 1.5px solid var(--d-linie);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--d-grund-2);
}
.demo[data-demo] .demo-ordner-name { font-weight: 600; font-size: 0.95rem; }
.demo[data-demo] .demo-ordner-inhalt { display: grid; gap: 0.3rem; font: 500 0.78rem/1.3 var(--mono, ui-monospace, monospace); color: var(--d-still); }
.demo[data-demo] .demo-ordner--pruefen { border-color: #B7791F; border-style: dashed; }
.demo[data-demo] .demo-ordner--pruefen::before { border-color: #B7791F; border-style: dashed; }
.demo[data-demo] .demo-ordner.ist-bereit { border-color: var(--d-akzent); cursor: pointer; }
.demo[data-demo] .demo-ordner.ist-bereit::before { border-color: var(--d-akzent); }
.demo[data-demo] .demo-ordner.ist-ueber, .demo[data-demo] .demo-ordner.ist-bereit:hover { background: #17304F; transform: translateY(-2px); }
.demo[data-demo] .demo-ordner.ist-getroffen { animation: demo-treffer 0.6s ease-out; }
@keyframes demo-treffer {
  0% { box-shadow: 0 0 0 0 rgba(108, 231, 250, 0.6); }
  100% { box-shadow: 0 0 0 14px rgba(108, 231, 250, 0); }
}

.demo[data-demo] .demo-weiche {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(var(--rinnen, 3), minmax(0, 1fr));
  position: relative;
  padding-top: 1.6rem;
}
.demo[data-demo] .demo-weiche::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 1.2rem;
  border: 2px solid var(--d-linie);
  border-bottom: 0;
  border-radius: 1.2rem 1.2rem 0 0;
}
.demo[data-demo] .demo-rinne {
  border: 1px dashed var(--d-linie);
  border-radius: 8px;
  padding: 0.5rem;
  min-height: 3rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--d-still);
}

/* Ziehen */
.demo[data-demo] .demo-ziehbar { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.demo[data-demo] .demo-ziehbar[aria-pressed="true"] { outline: 3px solid var(--d-akzent); outline-offset: 3px; }
.demo[data-demo] .demo-ziehbar.ist-gezogen {
  cursor: grabbing;
  z-index: 20;
  position: relative;
  box-shadow: 0 26px 40px -18px rgba(0, 0, 0, 0.75);
  transition: none !important;
}

/* ---------- Hinweis-Badge ------------------------------------------ */

.demo[data-demo] .demo-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 600 0.8rem/1.2 var(--schrift, system-ui, sans-serif);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--d-gruen-hell);
  color: var(--d-gruen);
  width: fit-content;
}
.demo[data-demo] .demo-hinweis.ist-an { animation: demo-blink 1.6s ease-out 1; }
@keyframes demo-blink {
  0%, 30%, 60% { box-shadow: 0 0 0 0 rgba(14, 107, 71, 0.55); }
  15%, 45% { box-shadow: 0 0 0 8px rgba(14, 107, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 107, 71, 0); }
}

/* ---------- Schritt-Spieler ---------------------------------------- */

.demo[data-demo] .demo-spieler { display: grid; gap: 1rem; }
.demo[data-demo] .demo-spieler-punkte { display: flex; gap: 0.4rem; }
.demo[data-demo] .demo-spieler-punkte li {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--d-linie);
  overflow: hidden;
  position: relative;
}
.demo[data-demo] .demo-spieler-punkte li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--d-akzent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.demo[data-demo] .demo-spieler-punkte li.ist-durch::after { transform: scaleX(1); }
.demo[data-demo] .demo-spieler-punkte li.ist-jetzt::after { transform: scaleX(1); }
.demo[data-demo] .demo-spieler-punkte li.ist-jetzt.laeuft::after {
  transform: scaleX(0);
  animation: demo-takt var(--takt, 3s) linear forwards;
}
@keyframes demo-takt { to { transform: scaleX(1); } }
.demo[data-demo] .demo-spieler-nr {
  font: 600 0.74rem/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-akzent);
}
.demo[data-demo] .demo-spieler-schritt { display: grid; gap: 0.55rem; outline: none; }
.demo[data-demo] .demo-spieler-titel { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
.demo[data-demo] .demo-spieler-inhalt { display: grid; gap: 0.75rem; min-width: 0; }
.demo[data-demo] .demo-spieler-inhalt.tritt-auf { animation: demo-auftritt 0.45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes demo-auftritt {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.demo[data-demo] .demo-spieler-steuer { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.demo[data-demo] .demo-spieler-steuer button { background: transparent; color: var(--d-text); border: 1px solid #5A6E8C; }
.demo[data-demo] .demo-spieler-steuer button:hover { border-color: var(--d-akzent); }
.demo[data-demo] .demo-spieler-steuer button[data-rolle="weiter"] { background: var(--d-akzent); color: #041018; border-color: var(--d-akzent); margin-inline-start: auto; }
.demo[data-demo] .demo-spieler-steuer button[data-rolle="weiter"]:hover { background: #A3F2FE; }
.demo[data-demo] .demo-spieler-steuer button[disabled] { opacity: 0.5; cursor: not-allowed; }
.demo[data-demo] .demo-spieler-steuer button[hidden] { display: none; }

/* ---------- Ansage (nur für Screenreader) -------------------------- */

.demo[data-demo] .demo-ansage {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Ohne Bewegung ------------------------------------------ */

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

/* ---------- Druck --------------------------------------------------- */

@media print {
  .demo[data-demo] { box-shadow: none; border-color: #999; }
  .demo-neu, .demo[data-demo] .demo-spieler-steuer { display: none !important; }
}