/* ============================================================================
 *  elements · v30 — Wordmark-Logo + Single-Bar Härtung
 *
 *  Zwei Probleme aus dem 2026-05-19-Bug-Report behoben:
 *
 *  1. SITE-HEADER ist beim scroll trotz body.module-scrolled translateY(-100%)
 *     (elements.css:181) sichtbar geblieben — zusammen mit der module-nav
 *     ergab sich der Doppel-Bar mit doppelter DE/EN-Toggle. Fix: !important +
 *     opacity:0 + visibility:hidden um auch bei CSS-Spezifizitäts-Konflikten
 *     hart zu greifen.
 *
 *  2. Die Assets-v4 Logos (chazon.eu/elements wordmark mit atom-Orbital +
 *     Schreibschrift) lagen ungenutzt rum. Inline-SVG-codex-sigil ersetzt
 *     durch <img src="/shared/assets/v4/logos/elements-v2.webp">.
 *
 *  Strategie: additiv, lädt NACH v29 (load-order). Override-Specificity über
 *  doppelte Klassen-Selektoren + !important wo nötig.
 * ========================================================================= */

/* ---------- Wordmark-Logo · ersetzt SVG sigil + codex-wordmark ---------- */
.site-header.site-header--logo {
  padding: 1.1rem 1.8rem;
  /* Banner kann sich anpassen — Logo selbst trägt das visuelle Gewicht. */
}

.brand-codex.brand-codex--img {
  display: inline-flex !important;
  align-items: center;
  text-decoration: none;
  padding: 0;
  background: transparent;
  border: 0;
}

.brand-logo {
  display: block;
  height: clamp(48px, 5.2vw, 72px);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 0 12px rgba(201, 164, 74, .18));
  transition: filter 0.6s cubic-bezier(.2, .7, .2, 1), transform 0.5s cubic-bezier(.2, .7, .2, 1);
}
.brand-codex--img:hover .brand-logo {
  filter: drop-shadow(0 0 22px rgba(245, 222, 179, .35));
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .site-header.site-header--logo { padding: .8rem 1rem; }
  .brand-logo { height: clamp(40px, 11vw, 54px); }
}
@media (max-width: 480px) {
  .brand-logo { height: 38px; }
}

/* ---------- module-nav-sigil als <img> · monogram-Stern ---------- */
.module-nav .module-nav-sigil img,
.chx-module-nav .chx-module-nav-sigil img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(201, 164, 74, .45));
  transition: filter 0.5s cubic-bezier(.2, .7, .2, 1), transform 0.4s cubic-bezier(.2, .7, .2, 1);
}
.module-nav:hover .module-nav-sigil img,
.chx-module-nav:hover .chx-module-nav-sigil img {
  filter: drop-shadow(0 0 8px rgba(245, 222, 179, .7));
  transform: rotate(-3deg) scale(1.04);
}

/* ---------- HARTES Slide-out: display:none-Brutalansatz ---------- */
/*
 * Trotz transform+visibility-Override (v30.1) blieb der site-header im
 * Screenshot 2026-05-19 22:35 sichtbar — vermutlich CSS-Spezifizitäts-
 * Konflikt mit elements.css:181 base-rule der vom Cache eingefrorenen
 * Vorgänger-version. v30.2 nutzt display:none — kompromisslos.
 *
 * Pattern: ONE BAR AT A TIME. Am top der page sieht der User den großen
 * Wordmark-Banner mit lang-toggle. Bei scrollY>240 wird der site-header
 * komplett aus dem DOM-Flow ausgeblendet, die slim module-nav (mit eigener
 * lang-toggle) übernimmt allein. Keine Mischphase, kein Doppel-Toggle.
 */
body.module-scrolled .site-header,
body.module-scrolled .site-header.site-header--logo {
  display: none !important;
}

/* ---------- site-header__lang · DE/EN am top of page ---------- */
.site-header.site-header--logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}
.site-header__lang {
  flex-shrink: 0;
}

/* ============================================================================
 * v1.20 · P1-Sweep · Bonding-Pullquote + Discover-Trias + Isotope-Shalem-Lens
 * ============================================================================ */

/* Bonding pullquote — leiht das visual pattern von .unif-pullquote */
.bonding-pullquote {
  max-width: 880px;
  margin: 3.5rem auto 0;
  padding: 2rem 1.6rem 0;
  text-align: center;
}
.bonding-pullquote blockquote {
  font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.5;
  color: var(--text-bright);
  margin: 0 0 1rem;
  position: relative;
  padding-inline: 1rem;
}
.bonding-pullquote blockquote::before,
.bonding-pullquote blockquote::after {
  font-family: 'Cormorant Garamond', serif;
  color: var(--accent-gold);
  font-size: 1.8rem;
  line-height: 0;
  opacity: 0.6;
}
.bonding-pullquote blockquote::before { content: '"'; margin-right: 0.2rem; }
.bonding-pullquote blockquote::after  { content: '"'; margin-left: 0.2rem; }
.bonding-pullquote cite {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.75;
}

/* Bonding-Discover · 3-Punkt-Trias unter dem mol-grid */
.bonding-discover {
  max-width: 1080px;
  margin: 2.4rem auto 3.4rem;
  padding: 0 1.4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 760px) {
  .bonding-discover { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
}
.bd-item {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  background: linear-gradient(170deg, rgba(20, 14, 28, .55), rgba(10, 7, 16, .75));
  border: 1px solid color-mix(in oklab, var(--accent-gold) 18%, transparent);
  border-radius: 10px;
}
.bd-num {
  font-family: 'Frank Ruhl Libre', 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--accent-gold);
  opacity: 0.65;
  line-height: 1;
  margin-bottom: 0.55rem;
}
.bd-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.18rem;
  color: var(--text-bright);
  margin-bottom: 0.55rem;
  line-height: 1.25;
}
.bd-body {
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(234, 215, 200, 0.78);
}

/* Isotope-Shalem-Lens · Lese-Brille direkt unter dem isotope-hero */
.isotope-shalem-lens {
  max-width: 900px;
  margin: 2rem auto 0;
  padding: 1.4rem 1.6rem 1.6rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 164, 74, 0.07), transparent 60%),
    rgba(10, 7, 16, 0.4);
  border-top: 1px solid color-mix(in oklab, var(--accent-gold) 18%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent-gold) 12%, transparent);
}
.isotope-shalem-lens p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-warm);
  margin: 0;
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}
.isotope-shalem-lens strong {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-inline: 0.18em;
}

/* ============================================================================
 * v30.3 · STABILITY PATCH · 2026-05-19
 *
 * Responsive-Audit-Findings (Elements):
 *   [P0] Music-Engine 6-Spalten-Grid auf 360px → ~46px Zelle für 118 Tasten →
 *        unbedienbar. Fallback auf 4-Spalten + scroll-snap-x.
 *   [P0] Helix-Stage touch-action:none blockt Page-Scroll → pan-y default,
 *        Drag erst nach explicit interaction (tap-to-engage).
 *   [P0] Phone-Module SVG-Spots zu klein → vector-effect + min-font 11px.
 *   [P1] iOS-Safari: dvh statt vh für tutor-drawer, rxn-sheet, cmdp
 *        (URL-bar + Tastatur-aware).
 *   [P1] Periodensystem-Overflow-X bekommt scroll-affordance (Mask-Gradient).
 *   [P1] Site-header Tap-Targets im footer (passport, memory).
 * ============================================================================ */

/* P0 · Music-Engine Mobile-Grid */
@media (max-width: 480px) {
  .m-keyboard {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.4rem !important;
  }
  .m-key {
    min-height: 56px;
    padding: 0.5rem 0.35rem !important;
  }
  .m-key-symbol {
    font-size: 1.2rem !important;
  }
  .m-key-num {
    font-size: 0.55rem !important;
  }
}

/* P0 · Helix-3D-Stage Page-Scroll wieder erlauben (touch-action: pan-y default) */
.helix-stage-wrap {
  touch-action: pan-y;
}
.helix-stage-wrap.helix-engaged,
.helix-stage-wrap[data-engaged="true"] {
  touch-action: none;
}
/* Tap-to-engage Hint: nur sichtbar wenn nicht-engaged auf Mobile */
@media (max-width: 720px) {
  .helix-stage-wrap:not(.helix-engaged)::before {
    content: '✦ Tippen zum Drehen';
    position: absolute;
    inset: auto 0 1rem 0;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--accent-gold, #c9a44a) 78%, transparent);
    pointer-events: none;
    z-index: 3;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  }
}

/* P0 · Phone-Module SVG-Spots: vector-effect + min-font für Labels */
.phone-svg .phone-part {
  vector-effect: non-scaling-stroke;
}
@media (max-width: 600px) {
  .phone-svg .phone-label,
  .phone-svg .phone-label-sm,
  .phone-svg text {
    font-size: 11px !important;
  }
}

/* P1 · iOS-Safari Viewport-Units: dvh > vh für die drei großen Drawers */
.tutor-drawer {
  height: min(70dvh, 540px);
}
.rxn-sheet {
  height: min(72dvh, 760px);
}
.cmdp {
  max-height: calc(100dvh - 4rem);
  padding-top: max(env(safe-area-inset-top), 6vh);
}
/* Touch-Drag-Affordance für die Bottom-Sheets (kleiner Grip) */
.rxn-sheet::before,
.tutor-drawer::before {
  content: '';
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background: color-mix(in oklab, var(--accent-gold, #c9a44a) 30%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

/* P1 · Periodensystem Scroll-Affordance (Mask-Gradient rechts wenn overflow) */
.periodic-table-wrap,
.periodic-scroll {
  position: relative;
}
.periodic-table-wrap::after,
.periodic-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.65));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
@media (max-width: 1100px) {
  .periodic-table-wrap::after,
  .periodic-scroll::after { opacity: 1; }
}

/* P1 · Footer Tap-Targets */
.chx-passport-badge,
.chx-memory-trigger {
  min-height: 44px;
}
.chx-memory-trigger {
  padding-block: 0.55rem !important;
}

/* P1 · Isotope-Chart Pinch-Zoom-Hint */
.isotope-chart-wrap {
  position: relative;
}
@media (max-width: 768px) {
  .isotope-chart-wrap::after {
    content: '⊕ Pinch zum Zoomen';
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--accent-gold, #c9a44a) 65%, transparent);
    pointer-events: none;
  }
}

/* ============================================================================
 * v30.4 · VOX ELEMENTORUM · Phase-10-Modul (Hörspiel-Orakel)
 * Multi-Element-Picker + Anlass-Textarea + Charakter-eingefärbte Dialog-Turns.
 * ============================================================================ */
.vox-section {
  padding: 6rem 1.5rem 5rem;
  background: linear-gradient(180deg, rgba(8, 5, 13, 0.0) 0%, rgba(8, 5, 13, 0.4) 100%);
}
.vox-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.vox-head { text-align: center; margin-bottom: 2.4rem; }
.vox-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.82;
  margin-bottom: 0.9rem;
}
.vox-title {
  font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--text-bright, #faf2e8);
  line-height: 1.1;
  margin: 0 0 1.1rem;
}
.vox-title em { color: var(--accent-gold-light, #f5deb3); }
.vox-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-warm, #ead7c8);
  max-width: 56ch;
  margin: 0 auto;
}

.vox-module { margin-top: 0.7rem; }
.vox-form {
  padding: 1.6rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, rgba(20,14,28,.55), rgba(10,7,16,.8));
  border: 1px solid color-mix(in oklab, var(--accent-gold) 22%, transparent);
  border-radius: 8px;
}
.vox-label {
  display: block;
  margin-bottom: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent-gold) 78%, transparent);
}

/* Element-Pool */
.vox-pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.vox-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.4rem;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid color-mix(in oklab, var(--vox-c, #c9a44a) 22%, transparent);
  border-radius: 6px;
  color: var(--text-warm);
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  min-height: 50px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.vox-chip:hover:not(:disabled) {
  border-color: var(--vox-c, var(--accent-gold));
  background: color-mix(in oklab, var(--vox-c, var(--accent-gold)) 10%, rgba(0,0,0,0.5));
}
.vox-chip.is-selected {
  border-color: var(--vox-c, var(--accent-gold));
  background: color-mix(in oklab, var(--vox-c, var(--accent-gold)) 18%, rgba(0,0,0,0.4));
  color: var(--text-bright);
}
.vox-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.vox-chip-sym {
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--vox-c, var(--accent-gold));
}
.vox-chip-name {
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.72rem;
  line-height: 1.1;
}

.vox-selected {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--text-faded);
  margin-bottom: 1rem;
}
.vox-selected-label {
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent-gold) 60%, transparent);
  margin-right: 0.55rem;
}
.vox-selected-list em { font-style: italic; }
.vox-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.35rem 0.18rem 0.6rem;
  background: color-mix(in oklab, var(--vox-c, var(--accent-gold)) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--vox-c, var(--accent-gold)) 45%, transparent);
  border-radius: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-bright);
  margin-right: 0.3rem;
}
.vox-tag-x {
  width: 18px;
  height: 18px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--vox-c) 35%, transparent);
  border-radius: 50%;
  color: var(--text-warm);
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: border-color 0.3s, color 0.3s;
}
.vox-tag-x:hover { border-color: var(--vox-c); color: var(--text-bright); }

.vox-anlass-row { margin-top: 0.7rem; }
.vox-anlass {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid color-mix(in oklab, var(--accent-gold) 22%, transparent);
  border-radius: 6px;
  color: var(--text-bright);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 90px;
  transition: border-color 0.3s, background 0.3s;
}
.vox-anlass:focus {
  outline: none;
  border-color: var(--accent-gold);
  background: rgba(0, 0, 0, 0.5);
}
.vox-anlass::placeholder {
  color: color-mix(in oklab, var(--text-faded) 75%, transparent);
  font-style: italic;
}
.vox-hint {
  margin-top: 0.55rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-faded);
}
.vox-hint em { color: var(--accent-gold); }

.vox-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.vox-submit, .vox-reset {
  min-height: 44px;
  padding: 0.7rem 1.3rem;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}
.vox-submit {
  flex: 1;
  min-width: 200px;
  background: color-mix(in oklab, var(--accent-gold) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-gold) 55%, transparent);
  color: var(--text-bright);
}
.vox-submit:hover:not(:disabled) {
  background: color-mix(in oklab, var(--accent-gold) 30%, transparent);
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}
.vox-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.vox-reset {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--text-faded) 35%, transparent);
  color: var(--text-warm);
}
.vox-reset:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

/* Result · Dialog-Stream */
.vox-result {
  margin-top: 1.8rem;
}
.vox-loading {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-warm);
  padding: 2.4rem 1rem;
}
.vox-loading-icon {
  color: var(--accent-gold);
  display: inline-block;
  margin-right: 0.4rem;
  animation: vox-spin 3s linear infinite;
}
@keyframes vox-spin { to { transform: rotate(360deg); } }

.vox-stream {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.vox-stream-pending {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--text-faded);
  padding: 1rem;
}

.vox-turn {
  padding: 1rem 1.2rem 0.95rem;
  background: linear-gradient(180deg, rgba(20,14,28,.4), rgba(10,7,16,.55));
  border: 1px solid color-mix(in oklab, var(--vox-c, var(--accent-gold)) 22%, transparent);
  border-left: 3px solid var(--vox-c, var(--accent-gold));
  border-radius: 0 6px 6px 0;
}
.vox-turn-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.vox-turn-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 0.4rem;
  background: color-mix(in oklab, var(--vox-c, var(--accent-gold)) 18%, transparent);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--vox-c, var(--accent-gold));
  letter-spacing: 0.04em;
}
.vox-turn-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--vox-c, var(--accent-gold)) 78%, transparent);
}
.vox-turn-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-bright);
  white-space: pre-wrap;
}

.vox-error {
  color: #d36b6b;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  padding: 1.4rem;
  text-align: center;
}

@media (max-width: 600px) {
  .vox-pool { grid-template-columns: repeat(3, 1fr); }
  .vox-section { padding: 4rem 1rem 3.5rem; }
  .vox-form { padding: 1.2rem 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vox-loading-icon { animation: none !important; }
  .vox-chip,
  .vox-submit,
  .vox-reset,
  .vox-anlass { transition: none !important; }
  .vox-submit:hover { transform: none !important; }
}

/* ============================================================
   v32 · Reaction Lab · chx-ai-stream-frame slot styling
   ============================================================ */
#rxn-result .chx-ai-slot[data-slot="equation"] .chx-ai-slot-content {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: var(--text-bright);
}
#rxn-result .chx-ai-slot[data-slot="product"] .chx-ai-slot-content {
  font-weight: 500;
  color: var(--text-bright);
}
#rxn-result .chx-ai-slot[data-slot="lifeforce"] .chx-ai-slot-content {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: color-mix(in oklab, var(--accent-rosegold, #f5d0c5) 92%, white);
}
.rxn-frame-warning {
  margin-top: 1.2rem;
  padding: .85rem 1.05rem;
  border-radius: var(--radius, 14px);
  background: rgba(255, 94, 58, .08);
  border: 1px solid rgba(255, 94, 58, .35);
  color: #ff8b6f;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .98rem;
  line-height: 1.45;
}

/* ============================================================
   v32 · Accessibility · --text-faded token in elements:root
   ============================================================
   Module-Peak-Roadmap Phase-2 acc-Polish · elements.css definiert
   --text-faded nicht, aber v30.css und elsewhere referenzieren es.
   Token jetzt explizit AA-konform · WCAG 4.5:1 mit aubergine-base.
   ============================================================ */
:root {
  --text-faded: #a89aa0;
}