/* Gemeinsame Design-Schicht für /forms und /forms-admin. */

/* ══════════════════════════════════════════════════════════════════════
   1 — TOKENS
   ══════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* ---- Flächen: höhere Ebenen werden heller. */
  --bg:          #171210;   /* Canvas                                     */
  --surface-1:   #1d1713;   /* E1 — Haarlinien-Fläche, Listenzeilen       */
  --surface-2:   #241c17;   /* E2/E3 — angehobene Karten                  */
  --surface-3:   #2b221b;   /* E4 — Dialoge                               */
  --sunken:      #100c0a;   /* E−1 — NUR Eingabefelder                    */

  /* ---- Text */
  --cream:       #f6eee5;
  --muted:       rgba(246, 238, 229, .68);
  --faint:       rgba(246, 238, 229, .12);
  --line:        rgba(246, 238, 229, .14);

  /* ---- Aktion: Ember ist der einzige Klick-Akzent. */
  --ember:       #ff5a36;   /* 5.99:1 auf --bg                            */
  --ember-deep:  #c8401f;   /* dieselbe Rolle auf hellen Creme-Flächen    */
  --on-ember:    #fff6ef;
  --champagne:   #e7cfa0;   /* kanonischer Champagne-Wert · 12.23:1       */
  --error:       #ff9a5a;   /* 8.87:1                                     */
  --paid:        #8fca9a;

  /* ---- Helle Creme-Karten (bewusste Kontrast-Insel auf dunklem Grund) */
  --cream-card:  linear-gradient(168deg, #faf4e9 0%, #f4ecdf 52%, #eee2cf 100%);
  --ink:         #231710;
  --ink-80:      rgba(35, 23, 16, .8);
  --ink-70:      rgba(35, 23, 16, .7);
  --ink-line:    rgba(35, 23, 16, .12);
  --gold-deep:   #8a6316;   /* 4.62:1 auf Creme                         */

  /* ---- Abstände (Apple: 8er-Raster) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- Radien (Apple-Grammatik, dazwischen nichts) */
  --r-sm:   8px;   /* kompakte Utility                    */
  --r-md:  11px;   /* Eingabefelder, kleine Flächen       */
  --r-lg:  18px;   /* Karten, Dialoge                     */
  --r-pill: 999px; /* alles, was „Aktion" heißt           */

  /* ---- Typo-Metrik */
  --f-sans: Archivo, system-ui, -apple-system, sans-serif;
  --f-disp: "Archivo Black", Archivo, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --t-micro: 11px; --t-label: 11.5px; --t-sm: 13px;
  --t-base:  15px; --t-body:  17px;   --t-lg: 20px;

  /* ---- Bewegung */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.6, .64, 1);
  --d-1: 200ms; --d-2: 350ms; --d-3: 550ms;
  /* Klappdauer beider Forms-Seiten. */
  --d-panel: 820ms;

  /* ---- Elevation: warmer Hausschatten mit heller Oberkante. */
  --rim-1: inset 0 1px 0 rgba(255, 252, 246, .05);
  --rim-2: inset 0 1px 0 rgba(255, 252, 246, .08);
  --rim-3: inset 0 1px 0 rgba(255, 252, 246, .11);

  /* ---- Kontaktverschattung. */
  --ao: 0 0 0 1px hsla(18, 45%, 3%, .26),
        0 1px 2px  hsla(18, 45%, 3%, .32),
        0 2px 6px -2px hsla(18, 45%, 3%, .26);

  /* ---- Materialkante: Licht nur an der Oberseite. */
  --lip: inset 0 1px 0 rgba(255, 252, 246, .06);

  /* ---- Rahmenkante: oben hell, unten dunkel. */
  --plate-edge: linear-gradient(180deg,
                  rgba(255, 252, 246, .15)   0%,
                  rgba(255, 252, 246, .125)  8%,
                  rgba(255, 252, 246, .10)  17%,
                  rgba(255, 252, 246, .078) 27%,
                  rgba(255, 252, 246, .058) 37%,
                  rgba(255, 252, 246, .040) 47%,
                  rgba(255, 252, 246, .025) 57%,
                  rgba(255, 252, 246, .013) 67%,
                  rgba(255, 252, 246, .004) 76%,
                  hsla(18, 45%, 3%, .035)   85%,
                  hsla(18, 45%, 3%, .085)   93%,
                  hsla(18, 45%, 3%, .14)   100%);

  --e-2: 0 54px 22px hsla(18, 45%, 3%, .02),
         0 30px 18px hsla(18, 45%, 3%, .10),
         0 13px 13px hsla(18, 45%, 3%, .22),
         0  3px  7px hsla(18, 45%, 3%, .28);
  --e-3: 0 54px 24px hsla(18, 45%, 3%, .04),
         0 30px 20px hsla(18, 45%, 3%, .14),
         0 16px 16px hsla(18, 45%, 3%, .28),
         0  4px  9px hsla(18, 45%, 3%, .38);
  --e-4: 0 40px 60px -12px hsla(18, 45%, 3%, .62),
         0 24px 24px      hsla(18, 45%, 3%, .50),
         0  6px 13px      hsla(18, 45%, 3%, .55);

  /* E−1 — eingelassene Eingabefläche. */
  --e-in: inset 0 2px 5px hsla(18, 45%, 3%, .55),
          inset 0 1px 0   hsla(18, 45%, 3%, .7),
          inset 0 -1px 0  rgba(255, 252, 246, .04);

  /* Ember-Kreise (Zurück-Knopf, Button-Orb) */
  --e-orb:       var(--rim-3), inset 0 -2px 6px rgba(20, 13, 10, .16), var(--e-2);
  --e-orb-hover: var(--rim-3), inset 0 -2px 6px rgba(20, 13, 10, .16), var(--e-3);
  --e-orb-press: 0 1px 2px hsla(18, 45%, 3%, .4), 0 3px 8px -2px hsla(18, 45%, 3%, .35);
}

/* ══════════════════════════════════════════════════════════════════════
   2 — BASIS
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }

/* Native Felder müssen in iOS-Rastern unter ihre Mindestbreite schrumpfen dürfen. */
fieldset { min-inline-size: 0 }   /* UA-Vorgabe ist min-content — nicht schrumpffähig */
form, fieldset, .field, .form-sec, .option, .phone-group { min-width: 0 }

html {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--f-sans);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  background: var(--bg);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit }
button, a { touch-action: manipulation }
a { color: inherit }
button { cursor: pointer }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-disp);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.012em;
  /* Freitexttitel dürfen keine Raster- oder Flexspur aufblähen. */
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(26px, 9vw, 56px) }
h2 { font-size: clamp(20px, 7vw, 38px) }
h3 { font-size: var(--t-body); letter-spacing: -.005em }

.mono {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .2em;
}
.tnum, .cap-val, .count, .participant .num { font-variant-numeric: tabular-nums }

/* ══════════════════════════════════════════════════════════════════════
   3 — FOKUS & DRUCK (Apple: eine Geste für alles)
   ══════════════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px }
.room:focus-visible, .event-card:focus-visible, .unit-card:focus-visible {
  outline: 2px solid var(--ember-deep); outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════
   4 — CHROME
   ══════════════════════════════════════════════════════════════════════ */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 30;
  background: var(--cream); color: var(--bg); padding: var(--s-3);
  border-radius: var(--r-sm);
}
.skip:focus { top: 12px }

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: 76px;
  border-bottom: 1px solid var(--line);
}
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0 }
.mark {
  display: flex; align-items: center;
  /* Nur das Suffix darf schrumpfen. */
  flex: none;
  min-width: 44px; min-height: 44px;
  font-family: var(--f-disp); font-size: 24px; letter-spacing: -.02em;
  text-decoration: none;
}
.mark span { color: var(--ember) }
.mark-sep { color: var(--muted); flex: none }
.mark-suffix {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--champagne);
  font: 500 var(--t-micro)/1 var(--f-mono);
  letter-spacing: .18em; text-transform: uppercase;
}
@media (max-width: 420px) {
  .top-left { gap: var(--s-2) }
  .mark-suffix { letter-spacing: .12em }
}

/* Sprachumschalter — segmentierte Pille */
.lang {
  display: inline-flex; align-items: stretch; flex: none; height: 38px;
  border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden;
  background: var(--surface-1); box-shadow: var(--rim-1);
}
.lang button {
  border: 0; background: transparent; color: var(--muted);
  font: 500 var(--t-micro)/1 var(--f-mono); letter-spacing: .12em;
  padding: 0 12px;
  transition: background-color var(--d-1) ease, color var(--d-1) ease;
}
.lang button + button { border-left: 1px solid var(--line) }
.lang button[aria-pressed=true] { background: var(--ember); color: var(--on-ember) }
@media (hover: hover) {
  .lang button:not([aria-pressed=true]):hover { color: var(--cream) }
}

footer {
  margin-top: var(--s-8); padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; justify-items: start;
  color: var(--muted); font-size: var(--t-sm);
}
footer a { min-height: 44px; display: inline-flex; align-items: center }

/* ══════════════════════════════════════════════════════════════════════
   5 — STATUSZEILE
   ══════════════════════════════════════════════════════════════════════ */
.status {
  padding: var(--s-3) 0; color: var(--muted); font-size: var(--t-base);
  border-top: 1px solid var(--line);
}
.status:empty { display: none }
.status[data-tone=error] { color: var(--error) }
.status[data-tone=ok]    { color: var(--champagne) }

/* ══════════════════════════════════════════════════════════════════════
   6 — EINGABEN  (E−1: eingelassen — der Gegenpol zu allen erhabenen Flächen)
   ══════════════════════════════════════════════════════════════════════ */
/* Nur Feldbeschriftungen, nicht Auswahlzeilen, verwenden Mono-Versalien. */
.field > label:not(.option):not(.consent):not(.check-row):not(.radio-row),
.legend, .label {
  color: var(--muted);
  font: 500 var(--t-label)/1.3 var(--f-mono);
  text-transform: uppercase; letter-spacing: .16em;
}

/* Gemeinsamer vertikaler Feldrhythmus beider Forms-Seiten. */
.field {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
.form-grid, .grid, .block-row, .caps { row-gap: var(--s-5) }

/* input:not([type]) deckt Verwaltungsfelder ohne type-Attribut ab. */
input:not([type]),
input[type=text], input[type=tel], input[type=search], input[type=url],
input[type=date], input[type=time], input[type=number], textarea, select {
  width: 100%; min-width: 0; min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--sunken); color: var(--cream);
  box-shadow: var(--e-in);
  padding: 12px 14px;
  font-size: 16px;                      /* verhindert iOS-Zoom beim Fokus */
  transition: border-color var(--d-2) ease, box-shadow var(--d-2) ease,
              background-color var(--d-2) ease;
}
textarea { min-height: 108px; padding-top: 14px; line-height: 1.5; resize: vertical }
input::placeholder, textarea::placeholder { color: rgba(246, 238, 229, .3) }

/* WebKit-Datum, -Zeit und -Zahl dürfen das Feld nicht verbreitern. */
input[type=date], input[type=time] { overflow: hidden }
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit { padding: 0; min-width: 0 }
input[type=date]::-webkit-datetime-edit-fields-wrapper,
input[type=time]::-webkit-datetime-edit-fields-wrapper { padding: 0 }
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value { min-width: 0; margin: 0; text-align: left }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { margin-left: 0 }

/* Lange Select-Optionen dürfen in WebKit keinen horizontalen Überlauf erzeugen. */
select { overflow: hidden; text-overflow: ellipsis }

input:focus, textarea:focus, select:focus {
  border-color: var(--ember);
  background: var(--sunken);
  box-shadow: var(--e-in), 0 0 0 3px rgba(255, 90, 54, .22);
}
[aria-invalid=true] {
  border-color: var(--error) !important;
  box-shadow: var(--e-in), 0 0 0 3px rgba(255, 154, 90, .16) !important;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--sunken) inset;
  -webkit-text-fill-color: var(--cream);
}

/* Zusammengeschweißtes Paar für Vorwahl und Nummer. */
.phone-group { display: grid; grid-template-columns: auto minmax(0, 1fr) }
.phone-group select {
  width: auto; border-radius: var(--r-md) 0 0 var(--r-md); border-right: 0;
  padding-right: var(--s-2); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  font: 500 14px var(--f-mono);
}
.phone-group input { border-radius: 0 var(--r-md) var(--r-md) 0 }

/* ---- Eigene Checkboxen und Optionsfelder. */
input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 24px; height: 24px; margin: 0; padding: 0;
  display: grid; place-content: center;
  border: 1.5px solid rgba(246, 238, 229, .34);
  background: var(--sunken);
  box-shadow: var(--e-in);
  cursor: pointer;
  transition: background-color var(--d-1) ease, border-color var(--d-1) ease,
              box-shadow var(--d-1) ease, transform var(--d-1) var(--spring);
}
input[type=checkbox] { border-radius: 7px }
input[type=radio]    { border-radius: var(--r-pill) }

input[type=checkbox]::after {
  content: ''; width: 11px; height: 6px;
  border: 2px solid var(--on-ember); border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -2px) scale(.4);
  opacity: 0;
  transition: opacity var(--d-1) ease, transform var(--d-2) var(--spring);
}
input[type=radio]::after {
  content: ''; width: 10px; height: 10px; border-radius: var(--r-pill);
  background: var(--on-ember);
  transform: scale(.2); opacity: 0;
  transition: opacity var(--d-1) ease, transform var(--d-2) var(--spring);
}
input[type=checkbox]:checked, input[type=radio]:checked {
  background: var(--ember); border-color: var(--ember);
  box-shadow: var(--rim-3), 0 2px 8px -2px rgba(255, 90, 54, .55);
}
input[type=checkbox]:checked::after { opacity: 1; transform: rotate(-45deg) translate(1px, -2px) scale(1) }
input[type=radio]:checked::after    { opacity: 1; transform: scale(1) }
input[type=checkbox]:active, input[type=radio]:active { transform: scale(.9) }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .4; cursor: not-allowed }
@media (hover: hover) {
  input[type=checkbox]:not(:disabled):hover, input[type=radio]:not(:disabled):hover {
    border-color: rgba(246, 238, 229, .55);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   7 — BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
/* Creme-Primärbutton mit Ember-Orb. */
.af-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-self: center;
  /* min-height lässt lange Beschriftungen auf schmalen Geräten umbrechen. */
  min-height: 56px; padding: 0 76px 0 30px;
  background: var(--cream); color: var(--bg);
  border: none; border-radius: var(--r-pill);
  font: 400 13px/1 var(--f-disp);
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--e-3);
  transition: transform var(--d-2) var(--spring), box-shadow var(--d-2) ease;
}
.af-btn:disabled { opacity: .48; cursor: wait }
.af-btn:active { transform: scale(.96) }
.af-btn-label {
  position: relative; z-index: 1;
  transition: opacity var(--d-1) ease, transform var(--d-3) var(--ease);
}
.af-btn:hover .af-btn-label, .af-btn.fire .af-btn-label { opacity: 0; transform: translateX(-14px) }
.af-btn-circ {
  position: absolute; top: 6px; bottom: 6px; right: 6px; width: 44px;
  border-radius: var(--r-pill);
  background: var(--ember); color: var(--on-ember);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--e-orb);
  transition: width var(--d-3) var(--ease), box-shadow var(--d-2) ease,
              transform var(--d-1) var(--ease);
}
.af-btn-circ::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,252,246,.32) 0%, rgba(255,252,246,.08) 40%, rgba(20,13,10,.14) 100%);
}
.af-btn:hover .af-btn-circ, .af-btn.fire .af-btn-circ {
  width: calc(100% - 12px); box-shadow: var(--e-orb-hover);
}
.af-btn:active .af-btn-circ { box-shadow: var(--e-orb-press) }

/* Runder Zurück-Knopf */
.af-back-circ {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: none; border-radius: var(--r-pill);
  background: var(--ember); color: var(--on-ember); cursor: pointer;
  box-shadow: var(--e-orb);
  transition: transform var(--d-2) var(--spring), box-shadow var(--d-2) ease;
}
.af-back-circ::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,252,246,.32) 0%, rgba(255,252,246,.08) 40%, rgba(20,13,10,.14) 100%);
}
@media (hover: hover) {
  .af-back-circ:hover { transform: translateY(-2px); box-shadow: var(--e-orb-hover) }
  .af-back-circ:hover .af-chev-l1 { transform: translateX(2.6px) }
  .af-back-circ:hover .af-chev-l2 { transform: translateX(2.6px); transition-delay: .07s; opacity: .7 }
}
.af-back-circ:active { transform: scale(.94); box-shadow: var(--e-orb-press) }
.af-back-circ .af-chev { position: relative; z-index: 1; width: 20px; height: 20px; transform: rotate(180deg) }

/* Band-Chevron */
.af-chev { width: 1em; height: 1em; display: block; overflow: visible }
.af-chev use { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round }
.af-chev-l1, .af-chev-l2 { transition: transform var(--d-2) var(--ease), opacity var(--d-1) ease }
.af-chev-l2 { opacity: .45 }
.af-btn:hover .af-chev-l1, .af-btn.fire .af-chev-l1 { transform: translateX(2.6px) }
.af-btn:hover .af-chev-l2, .af-btn.fire .af-chev-l2 { transform: translateX(2.6px); transition-delay: .07s; opacity: .7 }

/* Textlink mit Unterkante */
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
  padding: 0; color: var(--cream); font-size: var(--t-base); text-decoration: none;
  transition: color var(--d-1) ease, border-color var(--d-1) ease;
}
.text-link:hover, .text-link:focus-visible { color: var(--ember); border-color: var(--ember) }
.danger, .text-link.danger { color: var(--error) }
.danger:hover, .danger:focus-visible { color: var(--error); border-color: var(--error) }

/* Sekundärer Flächen-Button */
.secondary {
  min-height: 48px; padding: var(--s-3) var(--s-4); text-align: left;
  border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--cream);
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--plate-edge) border-box;
  box-shadow: var(--lip), var(--ao);
  transition: box-shadow var(--d-1) ease, transform var(--d-1) var(--ease);
}
@media (hover: hover) { .secondary:hover { box-shadow: var(--lip), var(--ao), 0 0 0 1px rgba(255,90,54,.45) } }
.secondary:active { transform: scale(.98) }

/* ══════════════════════════════════════════════════════════════════════
   8 — KAPAZITÄTS-ANZEIGE
   ══════════════════════════════════════════════════════════════════════ */
.cap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin: 0 0 var(--s-4) }
.cap-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font: 500 var(--t-label)/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: .16em;
}
.cap-role { color: var(--muted) }
/* Die Zahl bleibt die zugängliche Hauptinformation. */
.cap-val {
  flex: none; color: var(--cream);
  font: 500 17px/1 var(--f-mono); letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.cap-wl {
  color: var(--champagne); font-size: var(--t-label); letter-spacing: .06em;
  margin-left: 6px; font-variant-numeric: tabular-nums;
}
.cap-track { display: flex; align-items: center; gap: 6px }
.cap-rail {
  position: relative; flex: 1; height: 6px; overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--sunken);
  box-shadow: inset 0 1px 3px hsla(18, 45%, 3%, .7), inset 0 -1px 0 rgba(255, 252, 246, .04);
}
.cap-fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ember-deep), var(--ember));
  box-shadow: 0 0 10px -2px rgba(255, 90, 54, .5), inset 0 1px 0 rgba(255, 252, 246, .25);
  transition: width var(--d-3) var(--ease);
}
/* Schraffierter Überlauf kennzeichnet die Warteliste. */
.cap-over {
  flex: none; width: 26px; height: 6px; border-radius: var(--r-pill);
  background: repeating-linear-gradient(-45deg,
    rgba(231, 207, 160, .55) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px rgba(231, 207, 160, .22);
}
.cap-note { margin: 0; color: var(--muted); font-size: var(--t-sm) }
.cap[data-full=true] .cap-val { color: var(--ember) }
.cap[data-full=true] .cap-role { color: var(--cream) }

/* ══════════════════════════════════════════════════════════════════════
   8b — PLATTE
   ══════════════════════════════════════════════════════════════════════ */
.af-plate {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--plate-bg, var(--surface-1)), var(--plate-bg, var(--surface-1))) padding-box,
    var(--plate-edge) border-box;
  box-shadow: var(--lip), var(--ao);
}

/* ══════════════════════════════════════════════════════════════════════
   9 — DIALOG (E4)
   ══════════════════════════════════════════════════════════════════════ */
dialog {
  width: min(calc(100% - 32px), 520px);
  border: 1px solid transparent; border-radius: var(--r-lg);
  color: var(--cream);
  padding: var(--s-5);
  background:
    linear-gradient(var(--surface-3), var(--surface-3)) padding-box,
    var(--plate-edge) border-box;
  box-shadow: var(--lip), var(--e-4);
}
dialog::backdrop { background: rgba(10, 7, 5, .82) }
dialog p { color: var(--muted) }
.dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: var(--s-5) }

/* ══════════════════════════════════════════════════════════════════════
   10 — SYSTEMWEITE RÜCKSICHTEN
   ══════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  html { scrollbar-width: none }
  ::-webkit-scrollbar { width: 0; height: 0; display: none }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}