/* ============================================================
   DEMO-SCHALE — Bedienelemente fuer Theme und Barrierefreiheit
   Gilt fuer alle Entwuerfe unter /demos/. Die Farbwerte der Demos selbst
   stehen in der jeweiligen Datei; hier steht nur, was allen gemeinsam ist.

   Form und Masse folgen den schwebenden Schaltflaechen der Hauptseite
   (.fixed-action-buttons in css/style.css): 56px Kreis, 48px auf dem Handy,
   Milchglas mit blur(20px) saturate(180%), weicher Schatten, beim Ueberfahren
   scale(1.1). Die Farben sind bewusst neutral gehalten und nicht aus der Demo
   entlehnt -- jede Demo hat ihre eigene Farbwelt, die Schale muss auf allen
   funktionieren.
   ============================================================ */

:root {
  --xdemo-groesse: 56px;
  --xdemo-icon: 24px;
  --xdemo-abstand: 12px;
  --xdemo-rand: 20px;
  --xdemo-radius: 16px;
  --xdemo-glas: rgba(255, 255, 255, 0.92);
  --xdemo-glas-linie: rgba(20, 20, 15, 0.10);
  --xdemo-tinte: #14140f;
  --xdemo-schatten: 0 4px 20px rgba(0, 0, 0, 0.15);
  --xdemo-schatten-hoch: 0 6px 25px rgba(0, 0, 0, 0.22);
  --xdemo-fokus: #00a88a;
}

html[data-theme="dark"] {
  --xdemo-glas: rgba(24, 24, 22, 0.92);
  --xdemo-glas-linie: rgba(255, 255, 255, 0.14);
  --xdemo-tinte: #f4f1ea;
  --xdemo-schatten: 0 4px 20px rgba(0, 0, 0, 0.45);
  --xdemo-schatten-hoch: 0 6px 25px rgba(0, 0, 0, 0.55);
}

.xdemo-shell {
  position: fixed;
  right: var(--xdemo-rand);
  bottom: var(--xdemo-rand);
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  gap: var(--xdemo-abstand);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.xdemo-btn {
  width: var(--xdemo-groesse);
  height: var(--xdemo-groesse);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--xdemo-glas-linie);
  background: var(--xdemo-glas);
  color: var(--xdemo-tinte);
  cursor: pointer;
  box-shadow: var(--xdemo-schatten);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.xdemo-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--xdemo-schatten-hoch);
}

.xdemo-btn:active { transform: scale(1.04); }
.xdemo-btn:focus-visible { outline: 3px solid var(--xdemo-fokus); outline-offset: 3px; }

.xdemo-btn svg {
  width: var(--xdemo-icon);
  height: var(--xdemo-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Panel ---
   Gleiche Glasflaeche wie die Schaltflaechen. Die Abstaende folgen einer
   einzigen Stufung (--xdemo-abstand und dessen Vielfache), damit zwischen
   Gruppen, Zeilen und Rand ueberall dasselbe Mass steht. */

.xdemo-panel {
  position: fixed;
  right: var(--xdemo-rand);
  bottom: calc(var(--xdemo-rand) + var(--xdemo-groesse) * 2 + var(--xdemo-abstand) * 2);
  z-index: 2147483001;
  width: min(320px, calc(100vw - var(--xdemo-rand) * 2));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: calc(var(--xdemo-abstand) * 1.5);
  border-radius: var(--xdemo-radius);
  border: 1px solid var(--xdemo-glas-linie);
  background: var(--xdemo-glas);
  color: var(--xdemo-tinte);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-size: 14px;
  line-height: 1.5;
}

.xdemo-panel[hidden] { display: none; }

.xdemo-panel h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.xdemo-panel__hint {
  margin: 0 0 calc(var(--xdemo-abstand) * 1.5);
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.72;
}

.xdemo-group { margin-bottom: calc(var(--xdemo-abstand) * 1.5); }
.xdemo-group:last-of-type { margin-bottom: 0; }

.xdemo-group__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.68;
}

.xdemo-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: rgba(20, 20, 15, 0.06);
}

html[data-theme="dark"] .xdemo-seg { background: rgba(255, 255, 255, 0.09); }

.xdemo-seg button {
  padding: 9px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.xdemo-seg button[aria-pressed="true"] {
  background: var(--xdemo-tinte);
  color: var(--xdemo-glas);
  font-weight: 600;
}

html[data-theme="dark"] .xdemo-seg button[aria-pressed="true"] {
  background: #f4f1ea;
  color: #14140f;
}

.xdemo-seg button:focus-visible { outline: 2px solid var(--xdemo-fokus); outline-offset: 1px; }

.xdemo-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xdemo-abstand);
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-top: 1px solid var(--xdemo-glas-linie);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  text-align: start;
  cursor: pointer;
}

.xdemo-switch:focus-visible { outline: 2px solid var(--xdemo-fokus); outline-offset: 1px; }

.xdemo-switch__box {
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.4);
  position: relative;
  transition: background-color 0.18s ease;
}

.xdemo-switch__box::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}

.xdemo-switch[aria-pressed="true"] .xdemo-switch__box { background: var(--xdemo-fokus); }
.xdemo-switch[aria-pressed="true"] .xdemo-switch__box::after { transform: translateX(16px); }

.xdemo-panel__foot {
  margin-top: calc(var(--xdemo-abstand) * 1.5);
  padding-top: var(--xdemo-abstand);
  border-top: 1px solid var(--xdemo-glas-linie);
}

.xdemo-reset {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--xdemo-glas-linie);
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.xdemo-reset:hover { background: rgba(128, 128, 128, 0.12); }
.xdemo-reset:focus-visible { outline: 2px solid var(--xdemo-fokus); outline-offset: 2px; }

.xdemo-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Auf dem Handy dieselbe Verkleinerung wie bei den Schaltflaechen der
   Hauptseite: 48px statt 56px, Symbol 20px statt 24px. */
@media (max-width: 743px) {
  :root {
    --xdemo-groesse: 48px;
    --xdemo-icon: 20px;
    --xdemo-rand: 16px;
  }
}

/* ============================================================
   BARRIEREFREIHEITS-EINSTELLUNGEN — wirken auf die ganze Demo
   ============================================================ */

html.a11y-font-lg  body { font-size: 112.5%; }
html.a11y-font-xl  body { font-size: 125%; }

/* Kontrastverstaerkung.
   ACHTUNG: Die Textfarbe wird NICHT per CSS pauschal gesetzt. Eine Regel wie
   `color:#14140f` fuer alle Textknoten kennt die Flaeche darunter nicht und machte
   Schrift auf dunklen Kopfzeilen, Baendern und Fussbereichen unsichtbar -- gemessen
   in 30 von 34 Entwuerfen. Die Farbe setzt deshalb _shell.js je Element, nachdem es
   den tatsaechlichen Hintergrund gemessen hat. Hier bleibt nur, was flaechenunabhaengig
   sicher ist. */
html.a11y-contrast body { -webkit-font-smoothing: auto; }
html.a11y-contrast :where(button, input, select, textarea, .btn) {
  border-color: currentColor;
}
html.a11y-contrast :where(input, select, textarea) { border-width: 2px; }
html.a11y-contrast :focus-visible { outline-width: 3px !important; outline-offset: 2px !important; }

/* Links sichtbar machen -- unabhaengig davon, wie die Demo sie sonst gestaltet. */
html.a11y-links a:not([class*="btn"]):not([class*="button"]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Bewegung abschalten. Die Demos pruefen zusaetzlich selbst auf diese Klasse. */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .xdemo-btn, .xdemo-switch__box, .xdemo-switch__box::after { transition: none; }
  .xdemo-btn:hover { transform: none; }
}

@media print {
  .xdemo-shell, .xdemo-panel { display: none !important; }
}

/* ============================================================
   VORSCHAU IM RAHMEN
   In der Uebersicht laeuft jede Demo in einem verkleinerten iframe. Deren
   Scroll-Beobachter loesen dort nie aus, weil niemand scrollt -- Inhalte mit
   Einblend-Animation blieben bei Deckkraft 0 und die Vorschau zeigte grosse
   leere Flaechen. Im Rahmen wird deshalb alles sofort gezeigt.
   ============================================================ */
html.xdemo-im-rahmen :where(
  .reveal, [class*="reveal"], [class*="animate-in"], [class*="fade-in"], [class*="slide-in"]
) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  filter: none !important;
  clip-path: none !important;
}

/* Nur in der stark verkleinerten Kachel stoeren die Bedienelemente: dort waeren
   sie rund zehn Pixel gross und nicht bedienbar. Im Vollbild laeuft die Demo
   unverkleinert, dort gehoeren Farbwelt und Barrierefreiheit dazu.
   Die Klasse setzt _shell.js, nachdem es den tatsaechlichen Massstab gemessen hat. */
html.xdemo-klein .xdemo-shell,
html.xdemo-klein .xdemo-panel { display: none !important; }