/* Demo-eigene Styles der Design-System-Demo (UI-Phase 2a, Task 9).
   Enthält die Layout-Hilfen der Seite — die Dichte-Stufe „tief“ (verstärkte
   Elevation für Karten und Buttons) liegt zentral unter dem
   STUELLRAD-Marker in tokens.css (Screen 1b, 2026-11-06). */

/* Seitenlayout der Demo (light DOM, ausschließlich Tokens). */
.avatar-zeile {
  display: flex;
  gap: var(--rlv-space-2);
  align-items: center;
  padding: var(--rlv-space-2) 0;
}

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rlv-space-4);
  padding: var(--rlv-space-4);
  border-bottom: 1px solid var(--rlv-border);
  flex-wrap: wrap;
}

.schalter {
  display: flex;
  align-items: center;
  gap: var(--rlv-space-2);
  flex: none;
}

main {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--rlv-space-5);
}

section {
  margin-bottom: var(--rlv-space-6);
}

section > .abschnitt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rlv-space-3);
  margin-bottom: var(--rlv-space-1);
}

section .abschnitt-kopf h2 {
  margin: 0;
}

/* Segment-Control Desktop|Mobil pro Abschnitt (rahmt nur die .rahmen des Blocks). */
.vp-umschalter {
  display: flex;
  flex: none;
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-ctrl);
  overflow: hidden;
}

.vp-umschalter button {
  border: none;
  background: var(--rlv-surface);
  padding: var(--rlv-space-1) var(--rlv-space-3);
  font: 600 12px/1.4 var(--rlv-font-body);
  color: var(--rlv-text-2);
  cursor: pointer;
}

.vp-umschalter button + button {
  border-left: 1px solid var(--rlv-border);
}

.vp-umschalter button[aria-pressed="true"] {
  background: var(--rlv-accent-soft);
  color: var(--rlv-text);
}

section > p.beschreibung {
  margin: 0 0 var(--rlv-space-3);
  color: var(--rlv-text-2);
}

.rahmen {
  box-sizing: border-box;
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-card);
  padding: var(--rlv-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlv-space-3);
  align-items: flex-start;
}

.rahmen.spalte {
  flex-direction: column;
  align-items: stretch;
}

/* Mobil-Rahmen: fester Viewport 390 px — die Medienquery-Simulation zeigt nur
   die Breite; der echte Media-Query-Pfad (z. B. Stapel-Modus der Tabelle)
   wird separat mit echtem viewport getestet. */
.rahmen[data-modus="mobil"] {
  width: 390px;
}

/* Farbtafel. */
.farbtafel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--rlv-space-3);
  width: 100%;
}

.feld {
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-ctrl);
  overflow: hidden;
}

.feld .probe {
  height: 48px;
  border-bottom: 1px solid var(--rlv-border);
}

.feld dl {
  margin: 0;
  padding: var(--rlv-space-2);
  font-size: 12px;
}

.feld dt {
  font-weight: 600;
}

.feld dd {
  margin: 0;
  color: var(--rlv-text-2);
  font-variant-numeric: tabular-nums;
}

/* Typo-Skala. */
.typo {
  display: grid;
  gap: var(--rlv-space-3);
  width: 100%;
}

.typo .zeile .beispiel {
  margin: 0;
}

.typo .zeile .marke {
  display: block;
  font-size: 12px;
  color: var(--rlv-text-2);
}

/* Schwebende Bedienelemente oben rechts (Dichte + „Alle Blöcke“). */
.schalter-schwebend {
  position: fixed;
  top: var(--rlv-space-3);
  right: var(--rlv-space-3);
  z-index: 1200;
  display: flex;
  gap: var(--rlv-space-3);
  background: var(--rlv-surface);
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-card);
  box-shadow: var(--rlv-shadow-overlay);
  padding: var(--rlv-space-2);
}