/* Gemeinsames Hero-Chrome für alle Hero-Module (hero-row/*).
   Demo-Chrome (Library only, nicht Schema/Export): .settings, .topbar, .hud__kicker.
   Modulkern: .stage, .hud h1 / .hud__hint / .hud__cta, Effektfläche.
   Siehe Planung/12-demo-chrome-vs-modulkern.md.
   Enthält exakt die Panel- und HUD-Regeln, die zuvor in jedem Modul
   dupliziert waren. Module binden die Datei relativ ein:
     <link rel="stylesheet" href="../../_shared/hero-chrome.css" />
   Erwartet :root-Variablen (siehe _shared/hero-chrome.md für den Block).
   Module dürfen danach nur noch modul-spezifisches CSS ergänzen — niemals
   .settings / .hud / .control hier lokal umschreiben. */

.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--hero-bg);
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  touch-action: none;
  cursor: auto;
}

.hud {
  /* Feste Abstandsbasis des Content-Windows (Nutzer 2026-10-07): alle
     Vertikal-Abstaende sind BRUCHTEILE davon — Titel→Phrase und Phrase→
     Beschreibung je die Haelfte (symmetrisch), Buttons 3/4. */
  --cw-gap: 1.1rem;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5.5rem 1.1rem calc(var(--dock) + 1rem);
  pointer-events: none;
  width: min(92vw, 44rem);
  margin: 0 auto;
}

.hud__kicker {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hud .hud__title {
  font-size: var(--cw-title-size, clamp(2.6rem, 14vw, 6rem));
  font-weight: var(--cw-title-weight, 650);
  letter-spacing: var(--cw-title-track, -0.05em);
  line-height: var(--cw-title-lh, 0.95);
  margin-top: 0.35rem;
  /* KEIN text-shadow: er wuerde auch unter -webkit-text-fill-color:transparent
     (Gradient-Woerter) malen und beim Intro als Geisterwort aufbauen. */
}

.hud__hint {
  font-size: clamp(0.9rem, 2.4vw, 1.15rem);
  color: var(--cw-desc, #c4c4c8);
  margin-top: calc(var(--cw-gap, 1.1rem) * 0.5);
  line-height: 1.4;
  max-width: 28rem;
}

.hud__cta {
  pointer-events: auto;
  position: relative;
  z-index: 3;
  display: inline-flex;
  margin-top: calc(var(--cw-gap, 1.1rem) * 0.75);
  /* Referenz hero-heading .btn: 0.9/1.5rem Padding, keine min-Masse —
     min-height 44px + schmales Padding machte die Pillen klobig. */
  padding: 0.9rem 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hud__cta:hover { transform: translateY(-2px); }
/* WP-Themes unterstreichen Links (a, a:hover, .entry-content a) — die
   Pillen-CTA ist kein Textlink. !important schlaegt auch Theme-Regeln mit
   hoeherer Spezifitaet (Builder-only-Problem: der Editor laedt kein
   Theme-CSS, deshalb tritt es nur im Beaver Builder auf). */
.hud__cta, .hud__cta:hover, .hud__cta:focus { text-decoration: none !important; }

.hud__cta[hidden] { display: none !important; }

/* ------------------------------------------------------------ settings */

.settings {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  width: min(340px, calc(100vw - 2rem));
  max-height: calc(100dvh - var(--dock));
  background: var(--panel-bg);
  color: var(--panel-text);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  font-size: 0.8rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--panel-border);
  cursor: pointer;
}

.settings__toggle {
  font-size: 0.75rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.settings__body {
  padding: 0.75rem 0.9rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.settings.collapsed .settings__body { display: none; }

.settings__section {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  margin-top: 0.35rem;
}

.control label { font-weight: 600; display: block; margin-bottom: 0.25rem; }

.control select,
.control textarea,
.control input[type="text"],
.control input[type="url"] {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
}

.control textarea { min-height: 72px; }
.control input[type="range"] { width: 100%; }
.control input[type="color"] {
  width: 100%;
  height: 2.2rem;
  padding: 0.15rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: transparent;
  cursor: pointer;
}
.control.is-hidden { display: none; }
.control__row { display: flex; justify-content: space-between; align-items: baseline; }
.control__value { font-size: 0.72rem; color: var(--muted); }
.control__hint { font-size: 0.68rem; color: var(--muted); line-height: 1.4; margin-top: 0.2rem; }
.control--check { display: flex; justify-content: space-between; align-items: center; }
.control--check label { margin-bottom: 0; }

.btn-reset {
  width: 100%;
  padding: 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: inherit;
  font-weight: 650;
  cursor: pointer;
}

/* ------------------------------------------------------------- topbar */
/* Statischer Galerie-Link im Modul-Markup. Zeigt immer in den Projekt-Root
   (motion-modules-library.html), nie in die Modul-Kategorie.
   Die Demo-Guide-Pill (._shared/demo-guide.css) sitzt ebenfalls oben links und
   waechst mit ihrem Inhalt. Faende dieser Link dort separat, wuerde die Pill ihn
   verdecken. Deshalb haengt demo-guide.js den Link in die Pill ein und gibt ihm
   die Klasse .demo-guide__link. Das .topbar dient dann nur als Fallback, falls
   kein demo-guide.js laedt (z. B. Datei direkt per file:// geoeffnet). */
.topbar {
  position: fixed;
  z-index: 40;
  top: max(0.45rem, env(safe-area-inset-top));
  left: max(0.45rem, env(safe-area-inset-left));
  display: flex;
  gap: 0.35rem;
  pointer-events: none;
}

.topbar a {
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(12, 12, 16, 0.88);
  color: #f4f4f5;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-decoration: none;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topbar a:hover,
.topbar a:focus-visible {
  background: rgba(30, 30, 38, 0.92);
  outline: none;
}

@media (max-width: 640px) {
  .topbar a { font-size: 0.72rem; padding: 0 0.55rem; }
  .settings {
    top: auto;
    bottom: 0.65rem;
    left: 0.65rem;
    right: 0.65rem;
    width: auto;
    max-height: 46vh;
  }
}
/* ------------------------------------------------------------ content window
   Hero-Content-Modul (Arbeitsanweisung 2026-10-07): der Content (Kicker,
   Headline, Text, CTA) ist ein eigenes Fenster auf der Buehne.
   - data-pos   auf .hud  -> 9-Positionen-Raster (Ecken, Kanten, Mitte);
     das Attribut positioniert das FENSTER auf der Stage.
   - data-align auf .hud  -> Textausrichtung INNERHALB des Fensters,
     unabhaengig von der Fenster-Position.
   - data-panel auf .hud  -> Hintergrund des Fensters: "none" (alt, kein
     Panel-Div) oder ein Preset / "custom" via --cw-* Variablen.
   Ohne Attribute bleibt exakt das bisherige Zentrier-Verhalten aktiv —
   Bestandsmodule sind nicht betroffen. */

.hud[data-pos] {
  /* Unsichtbarer Rahmen um das Fenster (Nutzer 2026-10-07): in ALLEN 9
     Positionen mind. 20 px Abstand zum Hero-Rand, mobil 10 px — das Panel
     klebt nie an der Kante. Ersetzt das ungleichmaessige Basis-Padding
     (5.5rem oben / 1.1rem seitlich), das nur im Zentrier-Modus gilt. */
  --cw-inset: 20px;
  width: auto;
  margin: 0;
  padding: var(--cw-inset);
}
@media (max-width: 767px) {
  .hud[data-pos] { --cw-inset: 10px; }
}
.hud[data-pos$="-left"]   { align-items: flex-start; }
.hud[data-pos$="-center"] { align-items: center; }
.hud[data-pos$="-right"]  { align-items: flex-end; }
.hud[data-pos^="top-"]    { justify-content: flex-start; }
.hud[data-pos^="center-"] { justify-content: center; }
.hud[data-pos^="bottom-"] { justify-content: flex-end; }

.hud[data-align="left"]   { text-align: left; }
.hud[data-align="center"] { text-align: center; }
.hud[data-align="right"]  { text-align: right; }

.hud__panel {
  display: flex;
  flex-direction: column;
  pointer-events: none;
  max-width: min(92vw, 44rem);
  padding: 2.25rem 2.5rem;
  border-radius: var(--cw-radius, 28px);
}

/* Alignment must reach every child: the description (.hud__hint) has a
   max-width, so as a stretched flex item its BOX sits at the cross-start
   edge and inner text-align alone looks broken. Same for the CTA pill,
   which would stretch to the full panel width. */
.hud[data-align="left"] .hud__hint   { margin-right: auto; }
.hud[data-align="center"] .hud__hint { margin-left: auto; margin-right: auto; }
.hud[data-align="right"] .hud__hint  { margin-left: auto; }
.hud[data-align="left"] .hud__cta,
.hud[data-align="left"] .hud__cta-row   { align-self: flex-start; }
.hud[data-align="center"] .hud__cta,
.hud[data-align="center"] .hud__cta-row { align-self: center; }
.hud[data-align="right"] .hud__cta,
.hud[data-align="right"] .hud__cta-row  { align-self: flex-end; }

.hud[data-panel="glass-light"] {
  --cw-border-c: rgba(255, 255, 255, 0.6);
  --cw-b1-bg: #16181d;
  --cw-b2-bg: #16181d;
}
/* 1.3.29: Preset-Opacity/Blur einstellbar (--cw-pa / --cw-pbf, gesetzt von
   MMContentWindow.apply). Fallback = bisheriger fester Preset-Wert. */
.hud[data-panel="glass-light"] .hud__panel {
  background: rgba(255, 255, 255, var(--cw-pa, 0.55));
  -webkit-backdrop-filter: var(--cw-pbf, blur(18px) saturate(1.25));
  backdrop-filter: var(--cw-pbf, blur(18px) saturate(1.25));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.hud[data-panel="glass-light"] .hud__kicker { color: #52565e; }
.hud[data-panel="glass-light"] .hud .hud__title { color: #16181d; text-shadow: none; }
.hud[data-panel="glass-light"] .hud__hint { color: var(--cw-desc, #3a3e46); }
.hud[data-panel="glass-light"] .hud__cta {
  background: #16181d; border-color: transparent; color: #fff;
}

.hud[data-panel="glass-dark"] { --cw-border-c: rgba(255, 255, 255, 0.14); }
.hud[data-panel="glass-dark"] .hud__panel {
  background: rgba(10, 12, 18, var(--cw-pa, 0.5));
  -webkit-backdrop-filter: var(--cw-pbf, blur(18px) saturate(1.25));
  backdrop-filter: var(--cw-pbf, blur(18px) saturate(1.25));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.hud[data-panel="solid-dark"] { --cw-border-c: rgba(255, 255, 255, 0.1); }
.hud[data-panel="solid-dark"] .hud__panel {
  background: rgba(12, 14, 18, var(--cw-pa, 0.92));
  -webkit-backdrop-filter: var(--cw-pbf, none);
  backdrop-filter: var(--cw-pbf, none);
}
.hud[data-panel="solid-light"] {
  --cw-border-c: rgba(0, 0, 0, 0.08);
  --cw-b1-bg: #16181d;
  --cw-b2-bg: #16181d;
}
.hud[data-panel="solid-light"] .hud__panel {
  background: rgba(244, 245, 247, var(--cw-pa, 0.94));
  -webkit-backdrop-filter: var(--cw-pbf, none);
  backdrop-filter: var(--cw-pbf, none);
}
.hud[data-panel="solid-light"] .hud__kicker { color: #52565e; }
.hud[data-panel="solid-light"] .hud .hud__title { color: #16181d; text-shadow: none; }
.hud[data-panel="solid-light"] .hud__hint { color: var(--cw-desc, #3a3e46); }
.hud[data-panel="solid-light"] .hud__cta {
  background: #16181d; border-color: transparent; color: #fff;
}

.hud[data-panel="custom"] { --cw-border-c: rgba(255, 255, 255, 0.35); }
.hud[data-panel="custom"] .hud__panel {
  background: var(--cw-bg, rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(var(--cw-blur, 18px));
  backdrop-filter: blur(var(--cw-blur, 18px));
}
.hud[data-panel="custom"] .hud__kicker { color: var(--cw-text, #16181d); opacity: 0.75; }
.hud[data-panel="custom"] .hud__badge { color: var(--cw-text, #16181d); opacity: 0.75; }
.hud[data-panel="custom"] .hud .hud__title { color: var(--cw-text, #16181d); text-shadow: none; }
.hud[data-panel="custom"] .hud__hint { color: var(--cw-desc, var(--cw-text, #16181d)); }

@media (max-width: 640px) {
  .hud__panel { padding: 1.4rem 1.5rem; }
}

/* Button-Zeile im Content-Window (Button 1 + optionaler Button 2). */
.hud__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: calc(var(--cw-gap, 1.1rem) * 0.75);
}
.hud__cta-row .hud__cta { margin-top: 0; }

/* Button-Radius im Content-Window einstellbar (--cw-btn-radius). */
.hud .hud__cta {
  font-size: var(--cw-btn-size, 1rem);
  font-weight: var(--cw-btn-weight, 650);
  letter-spacing: var(--cw-btn-track, 0em);
  border-radius: var(--cw-btn-radius, 999px);
  border: var(--cw-btn-border-w, 1px) solid var(--cw-btn-border-c, rgba(255, 255, 255, 0.2));
  background: var(--cw-b1-bg, rgba(255, 255, 255, 0.12));
  color: var(--cw-b1-fg, #fff);
}
.hud .hud__cta--2 {
  background: var(--cw-b2-bg, rgba(255, 255, 255, 0.12));
  color: var(--cw-b2-fg, #fff);
}

/* Panel-Border: einstellbar (an/aus, Breite, Farbe) — die Presets liefern
   nur die Default-Farbe (--cw-border-c), JS setzt beides auf .hud. */
.hud[data-panel]:not([data-panel="none"]) .hud__panel {
  border: var(--cw-border-w, 1px) solid var(--cw-border-c, rgba(255, 255, 255, 0.35));
}
.hud[data-panel="none"] .hud__panel { border: none; }

/* Checkboxes in Settings sind On/Off-Toggles (Arbeitsanweisung 2026-10-07). */
.control--check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.2s ease;
}
.control--check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}
.control--check input[type="checkbox"]:checked { background: var(--accent, #38bdf8); }
.control--check input[type="checkbox"]:checked::after { transform: translateX(16px); }

/* Badge im Content-Window (Hero-Heading-Vorlage, 6 Formen). */
.hud .hud__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hud[data-align="left"] .hud__badge   { align-self: flex-start; }
.hud[data-align="center"] .hud__badge { align-self: center; }
.hud[data-align="right"] .hud__badge  { align-self: flex-end; }
/* Shape-Defaults OHNE dekorative Border (v27, Nutzer): der Border kommt
   ausschliesslich ueber den Toggle badgeBorderOn (Default AUS) — vorher
   hatten pill/slanted/glass eine 1px-CSS-Border, die beim Initial-Load
   sichtbar war, obwohl die Einstellung aus war. bracket bleibt: dessen
   border-left/right IST die Form. */
.hud .badge--pill {
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.hud .badge--bracket {
  padding: 0.2em 0.4em;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.hud .badge--dot::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.hud .badge--slanted {
  padding: 0.45em 1em;
  transform: skewX(-12deg);
  background: rgba(255, 255, 255, 0.12);
}
.hud .badge--glass {
  padding: 0.5em 1.1em;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hud .badge--soft {
  padding: 0.45em 1em;
  border-radius: 10px 999px 10px 999px;
  background: rgba(255, 255, 255, 0.16);
}

/* Highlight im Titel: *Wörter* (Farbe via --cw-hi). */
.hud .hud__hi { color: var(--cw-hi, #ff6a3d); }

/* Wertanzeige an Range-Reglern (wie Hero Heading: "4.4 rem"). */
.control label { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.control__val { opacity: 0.7; font-variant-numeric: tabular-nums; font-weight: 400; }

/* Titel-Gradient: cwTitleFlow wird nur noch von den Mixed-Marker-Woertern
   (.mode-mixed .hud__grad) genutzt; die Gradient-ZEILEN flowen seit v24
   ueber --cw-gs (siehe .cw-grad weiter unten). */
/* Nahtloser Shimmer: die Kachel (200 % breit) endet mit Ruecklauf zu g1,
   background-position wandert genau EINE Kachel weit — kein Loop-Sprung
   mehr. Vorher: 300 %-Fenster mit 3 Stops = das Wort wurde einmal
   komplett "weggeschwemmt" und sprang dann hart zum Anfang (Nutzer). */
@keyframes cwTitleFlow {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* ---------- Content-Window Stufe 3: Effekte (vanilla) ---------- */

/* Phrase-Zeile zwischen Titel und Description (Hero-Heading-Port). */
.hud .hud__phrase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: calc(var(--cw-gap, 1.1rem) * 0.5);
  font-size: clamp(0.95rem, 2.2vw, 1.2rem);
  min-height: 1.5em;
}
.hud[data-align="left"] .hud__phrase { justify-content: flex-start; }
.hud[data-align="center"] .hud__phrase { justify-content: center; }
.hud[data-align="right"] .hud__phrase { justify-content: flex-end; }
.hud .hud__phrase-prefix { opacity: 0.85; }

.hud .phrase-box {
  display: inline-flex;
  align-items: baseline;
  position: relative;
  vertical-align: baseline;
  font-weight: 650;
}
.hud .phrase-box .phrase-word { display: inline-block; }

/* 1. Typewriter */
.hud .phrase-box.fx-typewriter .phrase-word { color: var(--cw-ph, var(--cw-g1, #22d3ee)); }
.hud .phrase-box.fx-typewriter .caret {
  display: inline-block;
  width: 2.5px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--cw-ph, var(--cw-g1, #22d3ee));
  box-shadow: 0 0 8px var(--cw-ph, var(--cw-g1, #22d3ee));
  animation: cwBlink 1s steps(2) infinite;
}
@keyframes cwBlink { 50% { opacity: 0; } }

/* 2. Animated Underline (SVG Draw) */
.hud .phrase-box.fx-underline { padding-bottom: 0.35rem; }
.hud .phrase-box.fx-underline .phrase-word {
  color: var(--cw-ph, var(--cw-g1, #22d3ee));
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hud .phrase-box.fx-underline.is-swapping .phrase-word { opacity: 0; transform: translateY(6px); }
.hud .phrase-svg-line {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 9px;
  overflow: visible;
  pointer-events: none;
}
.hud .phrase-svg-line path {
  stroke: var(--cw-ph-accent, var(--cw-g2, #4ade80));
  stroke-width: 3.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--cw-ph-accent, var(--cw-g2, #4ade80)) 60%, transparent));
  transition: stroke-dashoffset 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hud .phrase-box.fx-underline.is-drawing .phrase-svg-line path {
  stroke-dashoffset: 100;
  transition: none;
}

/* 3. 3D Flip & Roll */
.hud .phrase-box.fx-flip {
  perspective: 600px;
  display: inline-block;
  height: 1.35em;
  overflow: hidden;
  vertical-align: bottom;
}
.hud .phrase-box.fx-flip .phrase-word {
  display: block;
  color: var(--cw-ph, var(--cw-g1, #22d3ee));
  transform-origin: 50% 50% -0.6em;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease, filter 0.35s ease;
}
.hud .phrase-box.fx-flip.is-swapping .phrase-word {
  transform: rotateX(90deg) translateY(-0.4em);
  opacity: 0;
  filter: blur(5px);
}

/* 4. Pill Highlight (Neon Marker) */
.hud .phrase-box.fx-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.75em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cw-pill-bg, var(--cw-g1, #22d3ee)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cw-pill-border, var(--cw-g1, #22d3ee)) 45%, transparent);
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--cw-pill-border, var(--cw-g1, #22d3ee)) 35%, transparent);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.hud .phrase-box.fx-pill.is-swapping { transform: scale(0.92); opacity: 0.3; }
.hud .phrase-box.fx-pill .phrase-word {
  background: linear-gradient(90deg, var(--cw-ph, var(--cw-g1, #22d3ee)), var(--cw-ph-accent, var(--cw-g2, #4ade80)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

/* 5. Cyber Scramble (Matrix Decrypt) */
.hud .phrase-box.fx-scramble .phrase-word {
  color: var(--cw-ph, var(--cw-g1, #22d3ee));
  font-family: "Space Grotesk", monospace;
  letter-spacing: 0.03em;
  text-shadow: 0 0 14px color-mix(in srgb, var(--cw-ph, var(--cw-g1, #22d3ee)) 65%, transparent);
}

/* 6. Cinematic Blur Morph */
.hud .phrase-box.fx-blur .phrase-word {
  color: var(--cw-ph, var(--cw-g1, #22d3ee));
  transition: filter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hud .phrase-box.fx-blur.is-swapping .phrase-word {
  filter: blur(16px);
  opacity: 0;
  transform: scale(0.9) translateY(8px);
}

/* Intro (Hero-Heading-Muster): Keyframes mit backwards-Fill + Stagger-Delay.
   Keine versteckten Elemente — der Text steht ab Frame 1 korrekt, die
   Animation baut ihn von Anfang an MIT Schatten und Markern auf. */
.hud .cw-ch, .hud .cw-word { display: inline-block; }
.hud.cw-intro-play .cw-ch, .hud.cw-intro-play .cw-word { transition: none; }
.hud.cw-intro-play.cw-fx-chars .cw-ch {
  animation: cwChIn calc(var(--cw-dur, 0.8s) * 1) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(0.1s + var(--i) * var(--cw-stag, 30ms));
}
.hud.cw-intro-play.cw-fx-words .cw-word {
  animation: cwWordIn calc(var(--cw-dur, 0.8s) * 1) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(0.1s + var(--w) * 0.09s);
}
.hud.cw-intro-play.cw-fx-fade .hud__badge,
.hud.cw-intro-play.cw-fx-fade .hud__title,
.hud.cw-intro-play.cw-fx-fade .hud__phrase,
.hud.cw-intro-play.cw-fx-fade .hud__hint {
  animation: cwLineFade calc(var(--cw-dur, 0.8s) * 1) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(0.1s + var(--l) * 0.14s);
}
.hud.cw-intro-play.cw-fx-blur .hud__badge,
.hud.cw-intro-play.cw-fx-blur .hud__title,
.hud.cw-intro-play.cw-fx-blur .hud__phrase,
.hud.cw-intro-play.cw-fx-blur .hud__hint {
  animation: cwLineBlur calc(var(--cw-dur, 0.8s) * 1) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(0.1s + var(--l) * 0.14s);
}
/* Rest-Content nach den Buchstaben/Woertern (wie Hero Heading .rv-rest). */
.hud.cw-intro-play.cw-fx-chars .hud__phrase,
.hud.cw-intro-play.cw-fx-chars .hud__hint,
.hud.cw-intro-play.cw-fx-chars .hud__cta-row,
.hud.cw-intro-play.cw-fx-words .hud__phrase,
.hud.cw-intro-play.cw-fx-words .hud__hint,
.hud.cw-intro-play.cw-fx-words .hud__cta-row {
  animation: cwRvIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  /* --r: strikte Top-down-Reihenfolge Phrase -> Hint -> Buttons */
  animation-delay: calc(var(--cw-rest-delay, 1s) + var(--r, 0) * 0.12s);
}
/* Das Badge ist das oberste Element und startet immer zuerst. */
.hud.cw-intro-play.cw-fx-chars .hud__badge,
.hud.cw-intro-play.cw-fx-words .hud__badge,
.hud.cw-intro-play.cw-fx-fade .hud__badge,
.hud.cw-intro-play.cw-fx-blur .hud__badge {
  animation: cwRvIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 0.1s;
}
/* Das FENSTER nimmt am Intro teil (Nutzer 2026-10-09): Glas/Panelhintergrund
   erscheinen MIT dem Content statt vorher — weiches Fade+Lift in der
   Titel-Dauer, danach normal (backwards-Fill, kein Loop). Gilt app-weit für
   alle CW-Hero-Module, da runIntro die Klassen ohnehin nur beim echten
   Intro-Replay setzt. */
.hud.cw-intro-play.cw-fx-chars .hud__panel,
.hud.cw-intro-play.cw-fx-words .hud__panel,
.hud.cw-intro-play.cw-fx-fade .hud__panel,
.hud.cw-intro-play.cw-fx-blur .hud__panel {
  animation: cwPanelIn calc(var(--cw-dur, 0.8s) * 1.1) cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
@keyframes cwPanelIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes cwRvIn { from { opacity: 0; transform: translateY(22px); } }
@keyframes cwChIn { from { opacity: 0; transform: translateY(60%) rotate(6deg); } }
@keyframes cwWordIn { from { opacity: 0; transform: translateY(0.45em); filter: blur(10px); } }
@keyframes cwLineFade { from { opacity: 0; transform: translateY(30px); } }
@keyframes cwLineBlur { from { opacity: 0; filter: blur(18px); transform: translateY(12px); } }

/* Shimmer wave: Welle ueber die Buchstaben (Hero-Heading-Werte). Pro ZEILE
   (is-shimmer sitzt an .hud__line, content-window.js) — Gradient-Zeilen
   bekommen sie nie (Flow); in Mixed-Zeilen bleiben die Gradient-Woerter
   (.hud__grad = background-clip:text, filter zerstoert dort den Clip)
   ausgespart. */
.hud:not(.cw-intro-play) .hud__line.is-shimmer .cw-ch:not(.hud__grad) {
  animation: cwShimmer 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes cwShimmer {
  0%, 62%, 100% { filter: brightness(1); }
  80% { filter: brightness(1.75) saturate(1.2); }
}

/* Hover lift NUR wenn der Toggle an ist (is-hover-Klasse aus content-window.js).
   Panel ist pointer-events:none (Ink malt unterm Content) — nur Glyphen fangen. */
.hud .cw-word, .hud .cw-ch { pointer-events: auto; }
.hud .hud__title .cw-ch { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hud .hud__title.is-hover .cw-ch:hover { transform: translateY(-0.08em) scale(1.06); }
/* Gradient-Zeilen seit v24 pro-Buchstabe geclippt (.cw-grad) — deren
   Buchstaben hoveren wie normale. Nur die Mixed-Marker (.hud__grad,
   Verlauf am GANZEN Wort) liften als Wort-Einheit — auch das ist der
   obigen generischen :hover-Regel geschuldet (das Marker-Wort IST ein
   .cw-ch). */

/* Badge pulse. */
.hud .badge--pulse { animation: cwPulse 1.6s ease-in-out infinite; }
@keyframes cwPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hud .hud__line.is-shimmer,
  .hud .hud__line.is-flow,
  .hud .badge--pulse,
  .hud .phrase-box { animation: none !important; }
  .hud .cw-ch, .hud .cw-word, .hud .hud__title, .hud .hud__phrase, .hud .hud__hint { animation: none !important; }
}

/* Title line 2: eigener Span, gleiches Heading-Level, eigene Groesse/Weight. */
.hud .hud__line2 {
  display: block;
  font-size: var(--cw-title2-size, 1em);
  font-weight: var(--cw-title2-weight, inherit);
  line-height: inherit;
  letter-spacing: inherit;
}

/* Title lines: block spans fuer per-line Fuellmodi. */
.hud .hud__line1, .hud .hud__line2 { display: block; }

/* Gradient pro Buchstabe (Hero-Heading-Technik, v24): JEDER Buchstabe
   einer Gradient-Zeile clippt seinen EIGENEN Verlauf — er lebt damit in
   seiner eigenen Clip-Box, und der Hover-Lift funktioniert auch hier
   (ein Zeilen-Clip zerreisst bei transformierten Kindern =
   Geist-Buchstaben). --cw-lw = Spannweite der Gradient-Buchstaben der
   Zeile, --cw-cx = Offset des einzelnen Buchstaben darin (beides aus
   layoutGradient() in content-window.js); --cw-gs verschiebt den Flow
   wiederholungssicher um genau eine Kachel. */
@property --cw-gs { syntax: "<number>"; inherits: true; initial-value: 0; }
.hud .cw-grad {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, var(--cw-g1, #22d3ee), var(--cw-g2, #4ade80), var(--cw-g3, #7cc8ff));
  background-size: var(--cw-lw, 100%) 100%;
  background-position: calc(var(--cw-cx, 0px) * -1 - var(--cw-gs) * var(--cw-lw, 0px)) 0;
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
}
/* Im Flow: 4. Farbstop (Ruecklauf zu g1), damit die repeat-x-Kachel
   nahtlos loopt. */
.hud .is-flow .cw-grad {
  background-image: linear-gradient(100deg, var(--cw-g1, #22d3ee), var(--cw-g2, #4ade80), var(--cw-g3, #7cc8ff), var(--cw-g1, #22d3ee));
}
/* Flow der Gradient-Zeile per Klasse (nicht inline), damit im Intro die
   Unit-Animationen der Buchstaben gewinnen und danach der Flow laeuft. */
.hud .hud__line1.is-flow, .hud .hud__line2.is-flow {
  animation: cwGradFlow var(--cw-grad-flow, 7s) linear infinite;
}
@keyframes cwGradFlow { to { --cw-gs: 1; } }

/* Mixed-Modus: ::Wort:: bekommt den Gradient (gA/gB/gC), Basis bleibt solid. */
/* Mixed-Modus: *Wort* bekommt den Gradient (gA/gB/gC), Basis bleibt Basisfarbe. */
.hud .mode-mixed .hud__grad {
  background-image: linear-gradient(100deg, var(--cw-g1, #22d3ee), var(--cw-g2, #4ade80), var(--cw-g3, #7cc8ff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* 1.3.1 Glyph-Ueberhang: background-clip:text malt nur innerhalb der Box.
   Mit negativem Letter-spacing (Default -0.05em), Kursiv-/Rundungs-
   Ueberhang und enger Zeilenhoehe ragt der letzte Buchstabe (z. B. das
   "e" von *creative*) und die Unterlaenge ueber die Box und wurde
   abgeschnitten. Innenabstand gibt der Clip-Flaeche Luft, der negative
   Margin gleicht ihn exakt aus (Layout, Abstaende und Zeilenhoehe bleiben
   gleich). Gilt fuer die Mixed-Marker (ein Verlauf ueber die ganze
   Markierung) und die Gradient-Buchstaben (.cw-grad; layoutGradient misst
   die Rahmenbox inkl. Innenabstand, der Verlauf bleibt durchgehend). */
.hud .mode-mixed .hud__grad,
.hud .cw-grad {
  padding: 0.08em 0.12em 0.16em;
  margin: -0.08em -0.12em -0.16em;
}
/* Highlight-Farbe (::Wort::) wirkt in JEDEM Modus — auch im Gradient-Modus. */
.hud .is-gradient .hud__hi,
.hud .mode-mixed .hud__hi {
  color: var(--cw-hi, #ff6a3d);
  -webkit-text-fill-color: var(--cw-hi, #ff6a3d);
}

/* Gradient-Flow auf *Wörter* im Mixed-Modus: der Gradient läuft durch die
   markierten Wörter (Dauer via --cw-grad-flow aus content-window.js).
   NUR mit .is-flow (Flow-Toggle) — ohne ihn zeigt das Wort den Gradient
   statisch; der Fallback-Wert in var() ließ den Sweep sonst immer laufen. */
.hud .mode-mixed.is-flow .hud__grad {
  background-image: linear-gradient(100deg, var(--cw-g1, #22d3ee), var(--cw-g2, #4ade80), var(--cw-g3, #7cc8ff), var(--cw-g1, #22d3ee));
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: cwTitleFlow var(--cw-grad-flow, 7s) linear infinite;
}
/* River-Flow: mit .is-flow-js uebernimmt content-window.js die Position per
   rAF (Richtung dreht sich selbststaendig — Fluss, keine starrer Loop). */
.hud .mode-mixed.is-flow.is-flow-js .hud__grad { animation: none; }
.hud .mode-mixed .hud__hi {
  animation: none; /* ::::-Highlight bleibt statisch in hiColor */
}
@media (prefers-reduced-motion: reduce) {
  .hud .mode-mixed .hud__grad { animation: none; }
}

/* Kachel-Gruppen (v25): jede Einstellungs-Gruppe ist eine eigene Karte
   mit heller Outline (deutlich heller als der fruehere Separator-Strich)
   — Modul-Gruppen legen dieselbe Klasse um ihre Controls. Flex-Spalte mit
   demselben Gap wie .settings__body, sonst kollabiert der Abstand zwischen
   den Controls (v25-Nachbesserung: Dropdowns saßen zu eng am nächsten
   Element). */
.control-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 0.85rem 0.9rem 0.95rem;
  margin: 0;
}

/* Custom-Zeilen des Panel-Hintergrunds: gleicher Rhythmus wie in den
   Kacheln (liegen als eigene Gruppe in der Panel-Kachel). */
#cwCustomRows, #cwTuneRows { display: flex; flex-direction: column; gap: 0.7rem; }

/* Mini-Zwischenueberschriften: sitzen zentriert OBEN IN der Kachel. */
.control__sub {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted, #a1a1aa);
  opacity: 0.8;
  margin: 0;
}

/* Builder-Kontext: BB macht Nodes im Editor fokussierbar — der schwarze
   Browser-Focus-Ring (folgt dem Element-Radius) legt sich sonst um Modul
   und Buttons und bleibt, bis ein Save das Node neu rendert. Der
   publizierte Frontend-Render hat keine Builder-Klasse, dort greift die
   Regel nie. */
.fl-builder-edit .ms-module:focus,
.fl-builder-edit .ms-module :focus {
  outline: none !important;
}