/* Demonstrator „Klicken Sie eine Anfrage durch“. Nutzt die Tokens aus site.css. Keine Inline-Styles. */
.demo { margin-bottom: var(--abstand); }

/* Kopf: welcher Fall läuft, andere Fälle auf Wunsch */
.demo__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.demo__fallname { margin: 0; }
.demo__fallname strong { color: var(--text); font-weight: 600; text-transform: none; letter-spacing: 0; font-family: var(--schrift-text); font-size: 1rem; }
.demo__wechsel { font: inherit; font-size: 0.92rem; cursor: pointer; background: transparent; border: 1px solid var(--rand); color: var(--text); border-radius: 999px; padding: 0.4rem 0.9rem; }
.demo__wechsel:hover { border-color: var(--text); }
.demo__wechsel[aria-expanded="true"] { background: var(--flaeche-2); }
.demo__faelle { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.demo__faelle[hidden] { display: none; }
@media (min-width: 44rem) { .demo__faelle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.demo__fall {
  font: inherit; text-align: left; cursor: pointer; padding: 0.9rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); display: grid; gap: 0.2rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.demo__fall strong { font-family: var(--schrift-titel); font-size: 1.1rem; }
.demo__fall span { color: var(--text-2); font-size: 0.95rem; }
.demo__fall:hover { border-color: var(--text); }
.demo__fall[aria-pressed="true"] { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.demo__fall[aria-pressed="true"] span { color: var(--flaeche); opacity: 0.8; }

/* Anfrage links, Ablauf rechts */
.demo__raster { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 56rem) { .demo__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); } }
.demo__anfrage { border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.25rem; background: var(--flaeche-2); }
.demo__felder { margin: 0; display: grid; gap: 0.6rem; }
.demo__felder div { display: grid; gap: 0.1rem; border-bottom: 1px solid var(--rand); padding-bottom: 0.5rem; }
.demo__felder div:last-child { border-bottom: 0; padding-bottom: 0; }
.demo__felder dt { font-family: var(--schrift-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.demo__felder dd { margin: 0; }
.demo__felder dd.fehlt { background: var(--amber-weich); border-bottom: 2px dotted var(--amber); padding: 0 0.3em; justify-self: start; }
.demo__felder dd.ergaenzt { border-left: 3px solid var(--akzent); padding-left: 0.5rem; }
@media (max-width: 56rem) {
  .demo__felder { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .demo__felder div { border-bottom: 0; padding-bottom: 0; }
}

.demo__ablauf { background: var(--buehne); color: var(--buehne-text); border-radius: var(--radius); padding: clamp(1.1rem, 2.5vw, 1.75rem); }
.demo__stationen { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; position: relative; }
.demo__stationen::before { content: ""; position: absolute; left: 10%; right: 10%; top: 1.45rem; height: 2px; background: var(--buehne-rand); }
.demo__stationen li { position: relative; }
.demo__stationen button {
  font: inherit; width: 100%; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0.25rem; border-radius: var(--radius-klein); border: 1px solid transparent; background: transparent; color: var(--buehne-text-2);
  font-size: 0.85rem; line-height: 1.2;
}
.demo__nr { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--schrift-mono); font-size: 0.7rem; background: var(--buehne-2); border: 2px solid var(--buehne-rand); color: var(--buehne-text-2); }
.demo__stationen button:disabled { cursor: not-allowed; opacity: 0.55; }
.demo__stationen button.erreicht { color: var(--buehne-text); }
.demo__stationen button.erreicht .demo__nr { border-color: var(--buehne-akzent); color: var(--buehne-text); }
.demo__stationen button[aria-current="step"] { color: var(--buehne-text); background: var(--buehne-2); border-color: var(--buehne-rand); }
.demo__stationen button[aria-current="step"] .demo__nr { background: var(--buehne-akzent); border-color: var(--buehne-akzent); color: var(--akzent-text); }
.demo__stationen .demo__station--mensch.erreicht .demo__nr { border-color: var(--amber); }
.demo__stationen .demo__station--mensch[aria-current="step"] .demo__nr { background: var(--amber); border-color: var(--amber); color: #15191D; }
.demo__stationen button.wartet .demo__nr { box-shadow: 0 0 0 4px rgba(217, 163, 74, 0.25); }
@media (max-width: 40rem) {
  .demo__stationen button { font-size: 0.72rem; padding-inline: 0; }
  .demo__stationen::before { top: 1.3rem; }
  .demo__nr { width: 1.5rem; height: 1.5rem; }
}

/* Ein Schritt: eine Überschrift, ein Satz, bei Bedarf eine Frage */
.demo__schritt { min-height: 16rem; }
.demo__schritt .dachzeile { color: var(--buehne-text-2); margin-bottom: 0.4rem; }
.demo__schritt h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 0.6rem; outline: none; }
.demo__schritt h3:focus-visible { outline: 3px solid var(--buehne-akzent); outline-offset: 4px; }
.demo__satz { font-size: 1.05rem; color: var(--buehne-text-2); max-width: 40em; margin-bottom: 1.25rem; }
.demo__frage { border-left: 3px solid var(--amber); padding: 0.25rem 0 0.25rem 1rem; margin: 0 0 1.25rem; }
.demo__fragetext { font-weight: 600; margin-bottom: 0.6rem; }
.demo__optionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.demo__optionen button { font: inherit; cursor: pointer; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--buehne-text-2); background: transparent; color: var(--buehne-text); }
.demo__optionen button:hover { background: var(--buehne-2); }
.demo__optionen button:focus-visible { outline: 3px solid var(--buehne-akzent); outline-offset: 2px; }

.demo__ergebnis { border: 1px solid var(--buehne-rand); border-radius: var(--radius-klein); padding: 1rem; margin: 0 0 1.25rem; background: var(--buehne-2); }
.demo__ergebnis .dachzeile { color: var(--amber); }
.demo__antwort { white-space: pre-wrap; font-family: var(--schrift-text); font-size: 0.97rem; margin: 0 0 0.75rem; line-height: 1.55; }
.demo__ergebnis .hinweis-klein { color: var(--buehne-text-2); }

/* Zwei Aktionen je Zustand */
.demo__steuerung { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--buehne-rand); }
.demo__steuerung .knopf--zweit { color: var(--buehne-text); border-color: var(--buehne-text-2); }
.demo__steuerung .knopf--zweit:hover { background: var(--buehne-2); color: var(--buehne-text); }
.demo__steuerung .knopf:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.demo__steuerung [hidden] { display: none; }
.demo__steuerung .hinweis-klein { flex-basis: 100%; color: var(--buehne-text-2); }

/* Hintergrund auf Wunsch: Regeln und Verlauf */
.demo__hintergrund { margin-top: 1.25rem; border-top: 1px solid var(--buehne-rand); padding-top: 0.75rem; }
.demo__hintergrund summary { cursor: pointer; font-weight: 600; color: var(--buehne-text-2); padding: 0.4rem 0; }
.demo__hintergrund summary:hover { color: var(--buehne-text); }
.demo__hintergrund[open] summary { color: var(--buehne-text); margin-bottom: 0.75rem; }
.demo__erklaerung { margin: 0 0 1.25rem; display: grid; gap: 0.75rem; }
.demo__erklaerung div { display: grid; gap: 0.15rem; }
.demo__erklaerung dt { font-family: var(--schrift-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--buehne-text-2); }
.demo__erklaerung dd { margin: 0; color: var(--buehne-text); font-size: 0.95rem; }
@media (min-width: 48rem) { .demo__erklaerung { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.demo__hintergrund .dachzeile { color: var(--buehne-text-2); margin-bottom: 0.4rem; }
.demo__verlauf { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.3rem; font-size: 0.92rem; color: var(--buehne-text-2); }
.demo__verlauf li .zeit { font-family: var(--schrift-mono); font-size: 0.75rem; margin-right: 0.5rem; }
.demo__verlauf li.mensch { border-left: 3px solid var(--amber); padding-left: 0.6rem; list-style-position: inside; color: var(--buehne-text); }

/* Zustandswechsel: ein bewusster Übergang, bei reduzierter Bewegung keiner */
@media (prefers-reduced-motion: no-preference) {
  .demo__schritt.wechsel { animation: demo-einblenden 0.3s ease; }
  @keyframes demo-einblenden { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}