/* ====================================================================
   voxel.css — Voxel Premium Identitaets-Schicht (DESIGN.md · Voxel Premium).
   Laedt NACH onepage.css (hoechste Prioritaet). Additive Deko-Schicht auf
   dem Emerald+Aurora-Fundament: isometrische CSS-3D-Bloecke mit EINER
   Lichtquelle oben-links, gebaut aus drei getoenten Faces + Kanten-Highlight.
   ALLE bewegten Teile sind unter prefers-reduced-motion ruhiggestellt und
   zeigen ihren Endzustand. Deko-Layer sind aria-hidden + pointer-events:none.
   Nur transform/opacity animieren (60fps).
   ==================================================================== */

/* -------------------------------------------------------------------
   1. Das .voxel Primitiv — EIN isometrischer Wuerfel aus 3 Faces.
   transform-style:preserve-3d, rotateX(55deg) rotateZ(45deg). Faces via
   getoente Flaechen; die "teure Kante" ist ein inset Kanten-Highlight.
   Groesse steuert --vs (default = --iso-size). Farb-Familie via Klasse.
   ------------------------------------------------------------------- */
.voxel {
  --vs: var(--iso-size);
  --vt: var(--voxel-top);
  --vl: var(--voxel-left);
  --vr: var(--voxel-right);
  position: relative;
  width: var(--vs);
  height: var(--vs);
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(45deg);
  pointer-events: none;
}
.voxel .vx-face {
  position: absolute;
  inset: 0;
  width: var(--vs);
  height: var(--vs);
  /* 2px Pixel-Kante (Minecraft-Block-Lesbarkeit auch klein) + Ecken-AO. */
  box-shadow:
    inset 0 0 0 2px var(--voxel-edge),
    inset 0 0 22px var(--voxel-ao);
}
/* Top-Face bekommt einen dezenten Diagonal-Bevel: hell oben-links, Schatten
   unten-rechts — verkauft die Wuerfel-Woelbung, damit der Block nicht als
   flaches Quadrat liest (Gap#4). Nur auf der Top-Face. */
.voxel .vx-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%, rgba(2, 12, 8, 0.32));
  pointer-events: none;
}
/* Top-Face liegt flach; Left/Right kippen an den Kanten nach unten. */
.voxel .vx-top   { background: var(--vt); transform: translateZ(calc(var(--vs) / 2)); }
.voxel .vx-left  {
  background: var(--vl);
  height: calc(var(--vs) / 2);
  top: auto; bottom: 0;
  transform-origin: bottom;
  transform: rotateX(-90deg) translateZ(0);
}
.voxel .vx-right {
  background: var(--vr);
  width: calc(var(--vs) / 2);
  left: auto; right: 0;
  transform-origin: right;
  transform: rotateY(90deg) translateZ(0);
}
/* Weil rotateX(55) rotateZ(45) den Wuerfel schon iso stellt, reicht die
   Top-Face + zwei per box-shadow angedeutete Schatten-Kanten fuer die
   Iso-Anmutung ohne echte 3D-Seitenwaende (billiger, gestochen scharf).
   Wir nutzen daher eine 2.5D-Variante: eine Flaeche mit conic Faces. */
.voxel.vx-flat { transform: rotateX(55deg) rotateZ(45deg); }
.voxel.vx-flat .vx-left,
.voxel.vx-flat .vx-right { display: none; }
.voxel.vx-flat .vx-top {
  background:
    conic-gradient(from 0deg at 50% 50%,
      var(--vr) 0deg 90deg,
      var(--vl) 90deg 180deg,
      var(--vr) 180deg 270deg,
      var(--vl) 270deg 360deg);
  background: var(--vt);
}

/* Farb-Familien */
.voxel.vx-emerald { --vt: var(--voxel-top);  --vl: var(--voxel-left);  --vr: var(--voxel-right); }
.voxel.vx-stone   { --vt: var(--stone-top);  --vl: var(--stone-left);  --vr: var(--stone-right);  }
.voxel.vx-dirt    { --vt: var(--dirt-top);   --vl: var(--dirt-left);   --vr: var(--dirt-right);   }
.voxel.vx-ore     {
  --vt: var(--ore-core); --vl: var(--voxel-left); --vr: var(--voxel-right);
}
.voxel.vx-ore .vx-top { box-shadow: inset 0 0 0 2px var(--voxel-edge), inset 0 0 26px var(--ore-glow); }
/* Erz-Aederung: ein paar helle Pixel-Punkte auf der Ore-Top-Face — der
   unmissverstaendliche Minecraft-Wink (Gap#4). radial-gradient-Punkte statt
   Bild, zero-dep. Liegt ueber dem Top-Bevel. */
.voxel.vx-ore .vx-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 32%, var(--voxel-edge) 0 8%, transparent 9%),
    radial-gradient(circle at 66% 40%, var(--voxel-edge) 0 6%, transparent 7%),
    radial-gradient(circle at 44% 66%, var(--voxel-edge) 0 7%, transparent 8%),
    radial-gradient(circle at 72% 72%, var(--voxel-edge) 0 5%, transparent 6%);
  opacity: 0.9;
}

/* --- Iso-Welt-Insel-Familien (Hero). Gras (gruene Oberseite, erdbraune Seiten),
   Erde/Stein-Tiefe, Wasser, Holz, Blaetter. Eigene, ruhigere Kanten-Highlights
   je Material, damit das mint-gruene Emerald-Edge nicht auf Braun/Blau schreit. */
.voxel.vx-grass { --vt: var(--grass-top); --vl: var(--grass-left); --vr: var(--grass-right); }
.voxel.vx-soil  { --vt: var(--soil-top);  --vl: var(--soil-left);  --vr: var(--soil-right);  }
.voxel.vx-rock  { --vt: var(--rock-top);  --vl: var(--rock-left);  --vr: var(--rock-right);  }
.voxel.vx-water { --vt: var(--water-top); --vl: var(--water-left); --vr: var(--water-right); }
.voxel.vx-wood  { --vt: var(--wood-top);  --vl: var(--wood-left);  --vr: var(--wood-right);  }
.voxel.vx-leaf  { --vt: var(--leaf-top);  --vl: var(--leaf-left);  --vr: var(--leaf-right);  }

/* Material-eigene Kanten: waermer/kaelter statt Emerald-Mint, ruhiger. */
.voxel.vx-grass .vx-face, .voxel.vx-soil .vx-face { box-shadow: inset 0 0 0 2px rgba(255, 246, 225, 0.20), inset 0 0 22px var(--voxel-ao); }
.voxel.vx-rock .vx-face  { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14), inset 0 0 22px var(--voxel-ao); }
.voxel.vx-wood .vx-face, .voxel.vx-leaf .vx-face { box-shadow: inset 0 0 0 2px rgba(255, 248, 228, 0.18), inset 0 0 22px var(--voxel-ao); }
.voxel.vx-water .vx-face { box-shadow: inset 0 0 0 2px rgba(210, 245, 255, 0.30), inset 0 0 22px rgba(120, 220, 255, 0.28); }
/* Wasser-Oberseite schimmert leicht (Highlight-Glanz statt Erz-Aederung). */
.voxel.vx-water .vx-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.5) 0 10%, transparent 26%);
  opacity: 0.7;
}

/* -------------------------------------------------------------------
   2. Iso-Stage helper — legt Bloecke in ein isometrisches Feld.
   Der Stage-Container haelt die 3D-Perspektive; einzelne .vx-cube werden
   per --gx/--gy (Iso-Gitterkoordinate) und --gz (Tiefe) positioniert.
   ------------------------------------------------------------------- */
.iso-stage {
  position: absolute;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1400px;
}
.vx-cube {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Iso-Projektion: x' = (gx - gy) * s/2 ; y' = (gx + gy) * s/4 - gz * s/2 */
  --s: var(--iso-size);
  transform:
    translate3d(
      calc((var(--gx, 0) - var(--gy, 0)) * var(--s) * 0.5),
      calc((var(--gx, 0) + var(--gy, 0)) * var(--s) * 0.28 - var(--gz, 0) * var(--s) * 0.5),
      0);
}

/* =====================================================================
   3. HERO — Iso-Fundament + schwebende Bloecke (aria-hidden Deko).
   Z-Ebenen (siehe hero_concept): (2) Iso-Fundament unten, (3) schwebende
   Emerald-/Ore-Bloecke mit Parallax, hinter dem Content (z-index:2).
   ===================================================================== */
.hero-voxel {
  position: absolute;
  inset: 0;
  z-index: 1;             /* zwischen Aurora/Depth (0) und Content (2) */
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

/* Iso-Fundament: gebaute Ebene am unteren/rechten Hero-Rand (Alt-Layout,
   Fallback fuer Nicht-Split-Heroes). */
.hero-voxel-floor {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  bottom: -6vh;
  width: min(760px, 78vw);
  height: min(520px, 60vh);
  transform-style: preserve-3d;
  -webkit-mask-image: linear-gradient(200deg, #000 40%, transparent 88%);
  mask-image: linear-gradient(200deg, #000 40%, transparent 88%);
}

/* =====================================================================
   3-ISO. Iso-Welt-Insel — die schwebende Minecraft-Insel (approved Mockup).
   .hero-voxel-island traegt den ruhigen Idle-Float (schwebt) + Maus/Scroll-
   Parallax erbt sie NICHT direkt (das macht .hero-voxel-float fuer den Ore-
   Block); die Insel selbst schwebt nur sanft. Die eigentliche Bau-Buehne ist
   .hero-voxel-island-body == .hero-voxel-floor (Build-Intro I1 laeuft darauf).
   ===================================================================== */
.hero-voxel-island {
  position: absolute;
  /* Rechte Haelfte des Hero, vertikal zentriert (Split-Layout: Wortmarke links).
     Auf Nicht-Split-Fallbacks landet die Insel ebenfalls rechts unten sichtbar. */
  right: clamp(-10px, 2vw, 60px);
  top: 50%;
  width: min(620px, 52vw);
  height: min(560px, 78vh);
  transform: translateY(-50%);
  transform-style: preserve-3d;
  perspective: 1400px;
  /* Idle-Float: die ganze Insel hebt/senkt sich ruhig (nur transform). */
  animation: vx-island-float 6.5s ease-in-out infinite;
  will-change: transform;
}

/* Die Bau-Buehne ist der GEDREHTE Iso-Raum (approved Mockup): der ganze Body
   kippt als preserve-3d-Container in die Isometrie (rotateX ~ Kamera-Neigung,
   rotateZ = 45deg-Drehung -> Diamant-Oberseiten). Alle Insel-Wuerfel liegen in
   DIESEM gemeinsamen 3D-Raum, jeder per px-left/top + translateZ(Hoehe). Der
   --iso-scale skaliert die px-basierte Insel responsiv (Basis 62px-Wuerfel).
   KEINE Richtungsmaske (die wuerde Blockspitzen/Baumkrone abschneiden). */
.hero-voxel-island .hero-voxel-island-body {
  position: absolute;
  inset: auto;
  right: auto;
  bottom: auto;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  --iso-scale: 1.02;
  transform-style: preserve-3d;
  /* Erst die Buehne mittig heben (die gedrehte Insel sitzt optisch etwas tiefer),
     dann in die Isometrie kippen + drehen. scale skaliert die ganze px-Insel. */
  transform:
    translate(-50%, -50%)
    scale(var(--iso-scale))
    rotateX(58deg) rotateZ(-45deg);
  -webkit-mask-image: none;
  mask-image: none;
}
/* Ein Insel-Block: absolut im gedrehten Raum, per Inline-left/top gesetzt (JS),
   Hoehe per translateZ(--z). preserve-3d, damit die drei Faces echt stehen.
   Extra .hero-voxel-island-Scope hebt die Spezifitaet ueber die spaetere
   .hero-voxel-floor .vfx-Regel (Alt-Fundament), sonst wuerde deren left:50%/
   top:40%/Iso-Projektion die px-Position der Insel ueberschreiben. */
.hero-voxel-island .hero-voxel-island-body .vfx {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateZ(var(--z, 0px));
}
/* Der Build-Wrapper haelt die Iso-Faces + traegt die Drop-in-Animation. */
.hero-voxel-island-body .vfx-b {
  display: block;
  transform-style: preserve-3d;
}

/* -------------------------------------------------------------------
   3-ISO-b. Der ECHTE Iso-Wuerfel (.ic) — drei in 3D stehende Faces.
   Oberseite (.ic-top) liegt flach ganz oben (translateZ = Kantenlaenge);
   Left/Right klappen an ihren Kanten nach unten und bilden echte Waende.
   Weil die Insel-Buehne schon rotateX/rotateZ traegt, erscheinen sie als
   Diamant-Oberseite + zwei getoente Seitenflaechen. --c = Kantenlaenge.
   ------------------------------------------------------------------- */
.hero-voxel-island-body .ic {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--c, 62px);
  height: var(--c, 62px);
  transform-style: preserve-3d;
  pointer-events: none;
}
.hero-voxel-island-body .ic > span {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--c, 62px);
  height: var(--c, 62px);
  /* 2px-Pixelkante (Minecraft-Lesbarkeit) + weiche Ecken-AO. */
  box-shadow:
    inset 0 0 0 2px rgba(255, 248, 232, 0.16),
    inset 0 0 20px rgba(2, 12, 8, 0.28);
}
/* Oberseite: flach, um die Kantenlaenge angehoben (Deckel des Wuerfels). */
.hero-voxel-island-body .ic .ic-top {
  transform: translateZ(var(--c, 62px));
}
/* Woelbungs-Bevel auf der Oberseite (hell oben-links -> Schatten unten-rechts),
   damit der Deckel nicht als flaches Quadrat liest. */
.hero-voxel-island-body .ic .ic-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 46%, rgba(2, 12, 8, 0.26));
  pointer-events: none;
}
/* Linke Wand: klappt an der Unterkante nach unten. */
.hero-voxel-island-body .ic .ic-l {
  transform-origin: top;
  transform: rotateX(-90deg);
  top: var(--c, 62px);
}
/* Rechte Wand: klappt an der rechten Kante nach hinten. */
.hero-voxel-island-body .ic .ic-r {
  transform-origin: left;
  transform: rotateY(90deg);
  left: var(--c, 62px);
}

/* Material-Faces (EINE Lichtquelle oben-links: Top hell, Left mittel, Right dunkel). */
.ic-grass .ic-top { background: linear-gradient(135deg, #6BE58A, #46C866); }
.ic-grass .ic-l   { background: linear-gradient(#8A5A34, #6B4326); }
.ic-grass .ic-r   { background: linear-gradient(#734A2A, #573620); }

.ic-dirt .ic-top  { background: linear-gradient(135deg, #8A5A34, #6B4326); }
.ic-dirt .ic-l    { background: linear-gradient(#6B4326, #4D3019); }
.ic-dirt .ic-r    { background: linear-gradient(#573620, #3E2614); }

.ic-stone .ic-top { background: linear-gradient(135deg, #737B86, #565E6A); }
.ic-stone .ic-l   { background: linear-gradient(#565E6A, #3D444F); }
.ic-stone .ic-r   { background: linear-gradient(#434B57, #2C333D); }

.ic-water .ic-top { background: linear-gradient(135deg, #6BC0F4, #3897DC); }
.ic-water .ic-l   { background: linear-gradient(#3897DC, #2472AC); }
.ic-water .ic-r   { background: linear-gradient(#2A78A8, #1B577E); }
.ic-water .ic-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.55) 0 10%, transparent 26%);
  opacity: 0.75;
}

.ic-wood .ic-top  { background: linear-gradient(135deg, #A57442, #855A30); }
.ic-wood .ic-l    { background: linear-gradient(#855A30, #674624); }
.ic-wood .ic-r    { background: linear-gradient(#734E29, #55391C); }

.ic-leaf .ic-top  { background: linear-gradient(135deg, #61D276, #43AC58); }
.ic-leaf .ic-l    { background: linear-gradient(#43AC58, #308242); }
.ic-leaf .ic-r    { background: linear-gradient(#37934A, #256035); }

/* Emerald-Erz: leuchtender Blickfang mit Glow + heller Pixel-Aederung. */
.ic-ore .ic-top   {
  background: linear-gradient(135deg, #7BF0CE, #34D399);
  box-shadow: inset 0 0 0 2px rgba(230, 255, 246, 0.5), inset 0 0 22px rgba(52, 211, 153, 0.7);
}
.ic-ore .ic-l     { background: linear-gradient(#10B981, #0B7A5C); }
.ic-ore .ic-r     { background: linear-gradient(#0E8A67, #095C45); }
.ic-ore .ic-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 34%, rgba(235, 255, 248, 0.95) 0 9%, transparent 10%),
    radial-gradient(circle at 66% 42%, rgba(235, 255, 248, 0.9) 0 6%, transparent 7%),
    radial-gradient(circle at 46% 68%, rgba(235, 255, 248, 0.9) 0 7%, transparent 8%);
  opacity: 0.9;
}

/* Weicher Schlagschatten unter der Insel (verankert sie im Raum). */
.hero-voxel-island-shadow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: min(380px, 60%);
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}
@keyframes vx-island-float {
  0%, 100% { transform: translateY(-50%) translateZ(0); }
  50%      { transform: translateY(calc(-50% - 14px)) translateZ(0); }
}

/* Baum-Teile (Stamm/Krone) sind kleinere Wuerfel — die Groesse steuert das
   inline --c am .ic (JS: trunk 34px, Krone 44px vs. Insel 62px). Kein --vs mehr. */

/* Build-Intro-Tempo fuer die Insel (I1): dichterer Stagger als das Alt-Fundament,
   damit die ~85 Bloecke in UNTER 1s komplett einrasten (9ms * ~85 ≈ 0.77s bis der
   letzte Block startet, + 0.5s Settle). Wirkt als zuegiges "die Welt baut sich". */
@media (prefers-reduced-motion: no-preference) {
  .hero-voxel-island .hero-voxel-island-body.is-arming .vfx-b {
    opacity: 0;
    transform: translateY(-38px) scale(0.86);
  }
  /* Extra Scope (.hero-voxel-island …) hebt die Spezifitaet ueber die spaetere
     Alt-Fundament-Regel (40ms-Stagger), damit hier der 9ms-Stagger gewinnt. */
  .hero-voxel-island .hero-voxel-island-body .vfx-b {
    transition:
      transform 0.5s var(--ease-spring),
      opacity 0.4s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 9ms);
  }
  .hero-voxel-island .hero-voxel-island-body.is-built .vfx-b {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Einzelner Fundament-Block. Die Iso-Position sitzt auf .vfx (statisch, nie
   animiert). Der Build (Drop/Scale/Opacity) laeuft auf dem INNEREN Wrapper .vfx-b
   ueber echte transform/opacity-Transitions (kein Custom-Property-Transition-
   Trick -> maximal browser-kompatibel). --dx/--dy sind die vorprojizierten
   Iso-Offsets; sie werden in JS/Inline nicht gebraucht, CSS calc erledigt es. */
.hero-voxel-floor .vfx {
  position: absolute;
  left: 50%;
  top: 40%;
  width: var(--iso-size);
  height: var(--iso-size);
  transform-style: preserve-3d;
  transform:
    translate3d(
      calc((var(--gx) - var(--gy)) * var(--iso-size) * 0.5),
      calc((var(--gx) + var(--gy)) * var(--iso-size) * 0.28 - var(--gz, 0) * var(--iso-size) * 0.5),
      0);
}
.hero-voxel-floor .vfx-b {
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: none;
  opacity: 1;
}

/* Schwebende Einzelbloecke (Parallax-Buehne). */
.hero-voxel-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Maus/Scroll-Parallax via bestehenden --mpx/--mpy/--sy-Vertrag. */
  transform: translate3d(var(--mpx, 0px), calc(var(--sy, 0px) + var(--mpy, 0px)), 0);
  will-change: transform;
  /* Ruhige Zone um die zentrale Content-Spalte (Badge/Wortmarke/CTA/Pill):
     die Buehne wird zur Mitte hin ausgeblendet, damit kein Block optisch mit
     dem Text kollidiert (Gap#8, komponierter Eindruck). Raender bleiben voll. */
  -webkit-mask-image: linear-gradient(90deg, #000 0 24%, transparent 40% 60%, #000 76% 100%);
  mask-image: linear-gradient(90deg, #000 0 24%, transparent 40% 60%, #000 76% 100%);
}
.hero-voxel-float .vfloat {
  position: absolute;
  /* Explizite Buehnengroesse == Wuerfelgroesse (--fs). Ohne sie kollabiert der
     absolut positionierte Wrapper auf 0x0 (das .voxel-Kind ist 3D-transformiert
     und steuert keine Layout-Groesse bei) -> oreMiner-Hitbox waere 0x0 (Gap#2). */
  width: var(--fs, 64px);
  height: var(--fs, 64px);
  transform-style: preserve-3d;
  animation: vx-bob var(--bob-dur, 6s) ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}
.hero-voxel-float .vfloat .voxel { --vs: var(--fs, 64px); }

/* Ore-Block Blickfang mit sanftem Glow-Halo. */
.hero-voxel-float .vfloat-ore::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ore-glow), transparent 68%);
  filter: blur(8px);
  z-index: -1;
  animation: vx-ore-pulse 4.5s ease-in-out infinite;
}

/* Jeder Block "atmet" mit eigenem Charakter: Amplitude (--bob-y) und sanfte
   Dreh-Neigung (--bob-rot) kommen pro Block aus dem Markup — nichts wirkt
   geklont, alles bleibt in EINER Motion-Sprache (ease-in-out, ruhig). */
@keyframes vx-bob {
  0%, 100% { transform: translateZ(0) translateY(0) rotateZ(0deg); }
  50%      { transform: translateZ(0) translateY(var(--bob-y, -10px)) rotateZ(var(--bob-rot, 0.6deg)); }
}
@keyframes vx-ore-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* -------------------------------------------------------------------
   3a. Block-Build-Intro (I1). JS setzt .is-built auf .hero-voxel-floor;
   ohne Klasse (bzw. reduced-motion) sind Bloecke sofort im Endzustand.
   Stagger via --i (JS) * 40ms. Overshoot per ease-spring.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* From-state NUR wenn JS die Buehne "armiert" hat (.is-arming). Faellt JS
     komplett aus, bleibt der sichtbare Default -> nie leere Deko-Flaeche. */
  .hero-voxel-floor.is-arming .vfx-b {
    opacity: 0;
    transform: translateY(-46px) scale(0.9);
  }
  .hero-voxel-floor .vfx-b {
    transition:
      transform 0.5s var(--ease-spring),
      opacity 0.42s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 40ms);
  }
  /* To-state: gebaute Buehne -> sichtbarer Endzustand (gewinnt via Spezifitaet). */
  .hero-voxel-floor.is-built .vfx-b {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  /* Ore-Block: nur wenn armiert von oben einfallen; sonst sofort sichtbar. */
  .hero-voxel.is-arming .vfloat-ore {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
  .hero-voxel .vfloat-ore {
    transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-spring);
    transition-delay: 0.7s;
  }
  .hero-voxel.is-built .vfloat-ore { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
   4. Section-Divider — gebautes Iso-Block-Band als Trenn-Signatur (I5).
   aria-hidden. Rastet beim Scroll-in Block fuer Block ein (bestehender
   data-reveal-Observer setzt .revealed).
   ===================================================================== */
.vx-divider {
  position: relative;
  height: 34px;
  margin: 0 auto;
  width: min(1180px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.vx-divider .vx-tile {
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  background:
    linear-gradient(135deg, var(--voxel-top), var(--voxel-left) 55%, var(--voxel-right));
  box-shadow: inset 0 0 0 1px var(--voxel-edge);
  border-radius: 3px;
  opacity: 0.9;
}
.vx-divider .vx-tile.vx-tile-lg { width: 24px; height: 24px; }
.vx-divider .vx-tile.vx-tile-dim { opacity: 0.4; background: linear-gradient(135deg, var(--stone-top), var(--stone-right)); }

@media (prefers-reduced-motion: no-preference) {
  .vx-divider .vx-tile {
    opacity: 0;
    transform: rotate(45deg) translateY(12px) scale(0.6);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-spring);
  }
  .vx-divider .vx-tile.vx-tile-dim { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-spring); }
  .vx-divider.revealed .vx-tile { opacity: 0.9; transform: rotate(45deg) translateY(0) scale(1); }
  .vx-divider.revealed .vx-tile.vx-tile-dim { opacity: 0.4; }
  .vx-divider .vx-tile:nth-child(1) { transition-delay: 0.00s; }
  .vx-divider .vx-tile:nth-child(2) { transition-delay: 0.05s; }
  .vx-divider .vx-tile:nth-child(3) { transition-delay: 0.10s; }
  .vx-divider .vx-tile:nth-child(4) { transition-delay: 0.15s; }
  .vx-divider .vx-tile:nth-child(5) { transition-delay: 0.20s; }
  .vx-divider .vx-tile:nth-child(6) { transition-delay: 0.25s; }
  .vx-divider .vx-tile:nth-child(7) { transition-delay: 0.30s; }
}

/* =====================================================================
   5. NAV — Logo wird Mini-Iso-Emerald-Wuerfel; dreht bei Hover (I·Nav).
   ===================================================================== */
.logo-voxel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Feedback #7: kleine feste Box um den Iso-Cube, damit seine Hover-Drehung
     (rotateZ/rotateX) nicht in die Wortmarke laeuft; der .logo-gap bleibt sauber. */
  width: 26px;
  flex: 0 0 auto;
  transform-style: preserve-3d;
  transition: transform var(--t-base) var(--ease-spring);
}
.logo:hover .logo-voxel { transform: rotateZ(15deg) rotateX(6deg); }
/* --vs MUSS aufs .voxel-Kind (es setzt sonst selbst --vs:var(--iso-size), Z.18
   und ueberschriebe einen Wert am Wrapper). Muster wie Z.172 (Hero-Floats). */
.logo-voxel .voxel { --vs: 20px; transform: rotateX(55deg) rotateZ(45deg); }

/* =====================================================================
   6. PLUGINS — Mining-Hover (I4): Block-Lift + Kanten-Glanz-Sweep.
   Iso-Block-Icon als Marke auf jeder Karte, EINE Emerald-Familie.
   ===================================================================== */
.plugin-mini-media { position: relative; }

/* --- Emerald-Angleich der Plugin-Renders (Gap#3). Die admin-hochgeladenen
   Bilder stammen aus dem alten Rot/Orange-Design und brechen die Emerald-
   Leitfarbe. Bis neue Renders existieren, ziehen wir sie CSS-seitig in EINE
   Farbfamilie: (1) ein leichter hue-rotate+desaturate am Bild neutralisiert
   das aggressive Rot, (2) ein Emerald-Duotone-Overlay (mix-blend) legt die
   Leitfarbe darueber, (3) ein sanfter Tiefen-Vignette-Wash bindet es an die
   Karte. Nur Deko -> pointer-events:none, kein Markup-/Funktionsbruch. */
.plugin-mini:not(.is-coming-soon) .plugin-mini-media .plugin-mini-image {
  filter: saturate(0.72) hue-rotate(-8deg) brightness(1.02) contrast(1.02);
}
/* Coming-Soon behaelt seine Graustufen-Optik (pages.css), plus leichte
   Emerald-Neigung, damit es nicht rot durchschlaegt. */
.plugin-mini.is-coming-soon .plugin-mini-media .plugin-mini-image {
  filter: grayscale(0.5) hue-rotate(-8deg) brightness(0.9) saturate(0.8);
}
.plugin-mini-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Emerald-Duotone: faerbt die Mitteltoene in die Leitfarbe, laesst aber
     Struktur/Helligkeit des Renders erhalten. */
  background: linear-gradient(150deg, var(--voxel-top), var(--ore-core) 55%, var(--voxel-right));
  mix-blend-mode: color;
  opacity: 0.42;
}
.plugin-mini-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Tiefe + Kanten-Bindung an die Emerald-Karte (multipliziert Raender ab,
     smaragd-Schimmer oben-links = EINE Lichtquelle wie die Voxel). */
  background:
    radial-gradient(120% 90% at 22% 12%, var(--brand-wash), transparent 60%),
    linear-gradient(180deg, transparent 52%, rgba(3, 14, 10, 0.42));
  mix-blend-mode: normal;
  opacity: 0.9;
}
/* Der Iso-Badge muss ueber dem Wash bleiben. */
.plugin-voxel-badge { z-index: 4; }
html[data-theme="light"] .plugin-mini-media::after {
  background:
    radial-gradient(120% 90% at 22% 12%, var(--brand-wash), transparent 62%),
    linear-gradient(180deg, transparent 58%, rgba(6, 40, 28, 0.14));
  opacity: 0.8;
}
html[data-theme="light"] .plugin-mini:not(.is-coming-soon) .plugin-mini-media .plugin-mini-image {
  filter: saturate(0.78) hue-rotate(-6deg) brightness(1.0) contrast(1.02);
}
/* Coming-Soon-Renders sind schon entsaettigt (pages.css) — Overlay dezenter. */
.plugin-mini.is-coming-soon .plugin-mini-media::before { opacity: 0.3; }

/* Core-Flag: rotes Alt-Badge -> Emerald (Gap#3, cohesive Leitfarbe). */
.plugin-mini-media .plugin-mini-core-flag {
  z-index: 5;
  background: var(--brand-wash);
  border-color: var(--gold-line);
  color: var(--brand);
}
/* Bild-lose Karten: Platzhalter aus dem Alt-Rot in die Emerald-Familie. */
.plugin-mini-media .plugin-mini-placeholder {
  z-index: 3;
  background: linear-gradient(135deg, var(--brand-wash), rgba(3, 14, 10, 0.55));
}
.plugin-mini-media .plugin-mini-placeholder .plugin-icon {
  filter: drop-shadow(0 0 18px var(--ore-glow));
  color: var(--brand);
}

.plugin-voxel-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease-spring);
}
/* --vs aufs .voxel-Kind (siehe .logo-voxel .voxel). */
.plugin-voxel-badge .voxel { --vs: 30px; transform: rotateX(55deg) rotateZ(45deg); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .plugin-mini-link:hover .plugin-voxel-badge {
    transform: translateZ(8px) translateY(-3px) rotateZ(-6deg);
  }
  /* Kanten-Glanz-Sweep ueber die Top-Face (one-shot, kein loop). */
  .plugin-voxel-badge .voxel .vx-top { position: relative; overflow: hidden; }
  .plugin-voxel-badge .voxel .vx-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, var(--voxel-edge) 50%, transparent 60%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  .plugin-mini-link:hover .plugin-voxel-badge .voxel .vx-top::after {
    transform: translateX(120%);
    transition: transform 0.6s var(--ease-out);
  }
}

/* =====================================================================
   7. PRICING — Featured-Karte bekommt einen flachen Iso-Sockel.
   ===================================================================== */
.pricing-featured { position: relative; }
.pricing-voxel-plinth {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 82%;
  height: 26px;
  transform: translateX(-50%) perspective(320px) rotateX(58deg);
  background: linear-gradient(180deg, var(--voxel-top), var(--voxel-right));
  box-shadow: inset 0 0 0 1px var(--voxel-edge), 0 18px 30px -14px var(--brand-glow);
  border-radius: 6px;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

/* =====================================================================
   8. FAQ — Marker = kleiner Iso-Block der beim Oeffnen um 90deg kippt.
   Greift nur, wenn Markup den .vx-faq-marker traegt (progressive).
   ===================================================================== */
.vx-faq-marker {
  display: inline-flex;
  flex: 0 0 auto;
  transform-style: preserve-3d;
  transition: transform var(--t-base) var(--ease);
}
/* --vs aufs .voxel-Kind (siehe .logo-voxel .voxel). */
.vx-faq-marker .voxel { --vs: 18px; transform: rotateX(55deg) rotateZ(45deg); }
details[open] .vx-faq-marker { transform: rotateZ(90deg); }

/* =====================================================================
   9. FOOTER — untere Kante als flache Iso-Block-Reihe (Fundament).
   ===================================================================== */
.footer { position: relative; }
.vx-footer-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 0 0 26px;
  pointer-events: none;
}
.vx-footer-row .vx-tile {
  width: 16px; height: 16px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--voxel-top), var(--voxel-right));
  box-shadow: inset 0 0 0 1px var(--voxel-edge);
  border-radius: 3px;
  opacity: 0.5;
}
.vx-footer-row .vx-tile:nth-child(even) { opacity: 0.28; background: linear-gradient(135deg, var(--stone-top), var(--stone-right)); }

/* =====================================================================
   10. CLICK-PRESS + Voxel-Burst (I3). Buttons/Karten druecken sich wie ein
   Block runter (transform + inset-shadow). Der Partikel-Burst kommt aus
   dem bestehenden Canvas via JS. Hier nur der Press-State.
   ===================================================================== */
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary:active {
  box-shadow: inset 0 3px 8px var(--voxel-ao), inset 0 0 0 1px var(--voxel-edge);
}
.plugin-mini-link:active .plugin-mini,
.pricing-card:active {
  transform: translateY(2px) scale(0.995);
}

/* DOM-Voxel-Splitter (I3 Fallback wenn Canvas fehlt) — self-removing via JS. */
.vx-burst {
  position: fixed;
  z-index: 2000;
  width: 13px;
  height: 13px;
  pointer-events: none;
  background: linear-gradient(135deg, var(--voxel-top), var(--voxel-right));
  box-shadow: inset 0 0 0 1.5px var(--voxel-edge), 0 0 8px var(--ore-glow);
  border-radius: 3px;
  will-change: transform, opacity;
}
/* Impact-Ring am Klickpunkt (Gap#6): ein kurzer, expandierender Emerald-Ring
   gibt dem "Block-Abbau" taktile Wucht. Deko, self-removing via JS. */
.vx-impact {
  position: fixed;
  z-index: 1999;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid var(--voxel-top);
  box-shadow: 0 0 14px var(--ore-glow);
  will-change: transform, opacity;
}

/* =====================================================================
   11. Cursor-Aura auf Voxel-Flaechen (I7): iso-rautenfoermige --brand-wash
   statt Kreis. Nur fine-pointer; Touch/coarse aus (Guard unten).
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
  .vx-iso-aura::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    background:
      radial-gradient(120px 70px at var(--spot-x, 50%) var(--spot-y, 50%),
        var(--brand-wash), transparent 72%);
    -webkit-mask-image: none;
    z-index: 0;
  }
  .vx-iso-aura:hover::before { opacity: 1; }
}

/* =====================================================================
   12. Mobile/Tablet — Insel reflowt unter/hinter den Text, kleiner, kein
   H-Scroll. Die Split-Zwei-Spalten-Optik gilt nur ab 981px (onepage.css);
   darunter zentriert sich der Content und die Insel wandert nach unten-mittig.
   ===================================================================== */
/* Tablet & darunter: Insel unter den Text, kleiner, mittig. Content ist hier
   wieder zentriert (der 981px-Split-Block greift nicht mehr). */
@media (max-width: 980px) {
  .hero-voxel-island {
    right: 50%;
    top: auto;
    bottom: -2vh;
    transform: translateX(50%);
    width: min(520px, 92vw);
    height: min(360px, 42vh);
    opacity: 0.9;
    animation: none;                 /* auf kleinen Screens ruhiger */
  }
  /* Die Insel bleibt echt isometrisch (rotateX/rotateZ) — nur kleiner (scale)
     und optisch mittiger. NIE die Rotation entfernen (sonst wieder flach). */
  .hero-voxel-island .hero-voxel-island-body {
    top: 48%;
    --iso-scale: 0.72;
    transform:
      translate(-50%, -50%)
      scale(var(--iso-scale))
      rotateX(58deg) rotateZ(-45deg);
  }
  .hero-voxel-island-shadow { bottom: 2%; height: 80px; }
  /* Der schwebende Ore-Block wandert aus der Textspalte heraus nach oben-rechts. */
  .hero-voxel-float .vfloat-ore { top: 6% !important; left: 86% !important; --fs: 40px !important; }
}

@media (max-width: 767px) {
  .hero-voxel-floor {
    width: 120%;
    right: -10%;
    bottom: -4vh;
    opacity: 0.7;
  }
  .hero-voxel-island {
    width: min(360px, 96vw);
    height: min(280px, 34vh);
    opacity: 0.85;
  }
  .hero-voxel-island .hero-voxel-island-body { --iso-scale: 0.52; }
  .plugin-voxel-badge .voxel { --vs: 24px; }
  .vx-divider { height: 26px; gap: 7px; }
  .vx-divider .vx-tile { width: 14px; height: 14px; }
  .vx-divider .vx-tile.vx-tile-lg { width: 18px; height: 18px; }
}

/* =====================================================================
   12b. Terminal-Gaming-DNA — der kleine Live/Version-Tag traegt Silkscreen
   (nur ~6KB, nur fuer den Tag, nie Fliesstext). Eyebrows/Tags bleiben
   JetBrains Mono uppercase.
   ===================================================================== */
.hero-pro-live-label,
.vx-tag {
  font-family: var(--font-tag);
  font-size: var(--fs-tag);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* =====================================================================
   13. REDUCED MOTION — alles Bewegte ruhigstellen, Endzustand sichtbar.
   Keine leeren Sektionen, kein Bob/Pulse/Sweep/Build/Kipp-Anim.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-voxel-float .vfloat { animation: none !important; }
  .hero-voxel-float .vfloat-ore::before { animation: none !important; }
  .hero-voxel-floor .vfx-b { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-voxel-float .vfloat-ore { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Insel: Idle-Float aus, aber Ruhelage (translateY(-50%)) bleiben — sonst
     rutscht sie um die halbe Hoehe nach unten. Insel voll aufgebaut sichtbar. */
  .hero-voxel-island { animation: none !important; transform: translateY(-50%) !important; }
  @media (max-width: 980px) {
    .hero-voxel-island { transform: translateX(50%) !important; }
  }
  .vx-divider .vx-tile { opacity: 0.9 !important; transform: rotate(45deg) !important; transition: none !important; }
  .vx-divider .vx-tile.vx-tile-dim { opacity: 0.4 !important; }
  .logo:hover .logo-voxel,
  .plugin-mini-link:hover .plugin-voxel-badge { transform: none !important; }
  .vx-burst, .vx-impact { display: none !important; }
  .btn:active,
  .btn-primary:active,
  .plugin-mini-link:active .plugin-mini,
  .pricing-card:active { transform: none !important; }
}

/* =====================================================================
   14. PLAYFULNESS-AMPLIFIER — "es soll sich wie ein Spiel anfuehlen".
   Alle Effekte: nur transform/opacity (+ background-position auf der
   kleinen Wortmarken-Flaeche), EINE Motion-Sprache (--ease-spring /
   --ease-out), alles unter prefers-reduced-motion ruhiggestellt.
   ===================================================================== */

/* --- 14a. Wortmarke: edler Emerald-Glanz-Sweep (Gap b). Der bestehende
   Weiss->Emerald-Verlauf (onepage.css) bekommt periodisch einen ruhigen
   Licht-Sweep — wie eine polierte Block-Kante, kein Glow-Kitsch. Nur dort,
   wo background-clip:text sicher ist; Light-Theme behaelt seine (spezifischere)
   dunkle Variante ohne Sweep. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-pro-emerald .hpw-line:not(.hpw-accent) .hpw-text {
      background:
        linear-gradient(110deg, rgba(255, 255, 255, 0) 42%, rgba(240, 255, 250, 0.9) 50%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #FFFFFF 0%, #E7FBF3 46%, #9FE9CE 100%);
      background-size: 240% 100%, 100% 100%;
      background-position: -70% 0, 0 0;
      -webkit-background-clip: text;
      background-clip: text;
      animation: hpw-sheen 7.5s ease-in-out infinite;
    }
    .hero-pro-emerald .hpw-accent .hpw-text {
      background:
        linear-gradient(110deg, rgba(255, 255, 255, 0) 44%, rgba(220, 255, 240, 0.8) 50%, rgba(255, 255, 255, 0) 56%),
        var(--brand-gradient);
      background-size: 240% 100%, 100% 100%;
      background-position: -70% 0, 0 0;
      -webkit-background-clip: text;
      background-clip: text;
      animation: hpw-sheen 7.5s ease-in-out infinite;
      animation-delay: 0.9s;
    }
  }
}
@keyframes hpw-sheen {
  0%, 58%   { background-position: -70% 0, 0 0; }
  82%, 100% { background-position: 170% 0, 0 0; }
}
/* Light-Theme behaelt seine dunkle Wortmarke (spezifischere onepage-Regel
   gewinnt beim background) — der Sweep waere unsichtbar, also ganz aus. */
html[data-theme="light"] .hero-pro-emerald .hpw-line .hpw-text { animation: none; }

/* --- 14b. Fundament lebt in Ruhe: gelegentlicher Kanten-Glint wandert ueber
   die Emerald-Top-Faces (desynchronisiert via --i). Meist Stille, dann ein
   kurzes Funkeln — Minecraft-Erz-Charme statt Dauer-Blinken. */
@media (prefers-reduced-motion: no-preference) {
  .hero-voxel-floor .vfx .voxel.vx-emerald .vx-top { overflow: hidden; }
  .hero-voxel-floor .vfx .voxel.vx-emerald .vx-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 42%, var(--voxel-edge) 50%, transparent 58%);
    transform: translateX(-130%);
    animation: vx-glint 9s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -1.7s);
    pointer-events: none;
  }
}
@keyframes vx-glint {
  0%, 74%   { transform: translateX(-130%); }
  86%, 100% { transform: translateX(130%); }
}

/* --- 14c. Ore-Easter-Egg (bk-motion.js oreMiner): 3x klicken = abgebaut.
   Hit = Block-Schuettler (auf dem inneren .voxel, damit der Bob auf .vfloat
   weiterlaeuft), Mined = Spring-Scale auf 0 + Glow aus, Respawn via Transition. */
.hero-voxel-float .vfloat-ore .voxel {
  transition: transform 0.4s var(--ease-spring), opacity 0.3s var(--ease-out);
}
.hero-voxel-float .vfloat-ore.vx-hit .voxel {
  animation: vx-mine-hit 0.34s var(--ease-out);
}
@keyframes vx-mine-hit {
  0%, 100% { transform: rotateX(55deg) rotateZ(45deg) scale(1); }
  35%      { transform: rotateX(55deg) rotateZ(49deg) scale(0.86); }
  70%      { transform: rotateX(55deg) rotateZ(42deg) scale(1.06); }
}
.hero-voxel-float .vfloat-ore.vx-mined .voxel {
  transform: rotateX(55deg) rotateZ(120deg) scale(0);
  opacity: 0;
}
.hero-voxel-float .vfloat-ore.vx-mined::before { opacity: 0; transition: opacity 0.3s var(--ease-out); }

/* --- 14d. Achievement-Toast (Minecraft "Erfolg freigeschaltet!"), dunkles
   Glas-Panel mit Emerald-Hairline + Iso-Raute, gleitet federnd von rechts ein. */
.bk-achievement {
  position: fixed;
  top: 86px;
  right: 18px;
  z-index: 2100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  max-width: min(340px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(10, 20, 16, 0.94), rgba(7, 14, 11, 0.94));
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  box-shadow:
    0 18px 44px -18px rgba(0, 0, 0, 0.6),
    0 8px 30px -12px var(--brand-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateX(calc(100% + 26px));
  opacity: 0;
  transition: transform 0.6s var(--ease-spring), opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.bk-achievement.is-in { transform: translateX(0); opacity: 1; }
.bk-achievement .bk-ach-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border-radius: 4px;
  background: linear-gradient(135deg, var(--voxel-top), var(--voxel-left) 55%, var(--voxel-right));
  box-shadow: inset 0 0 0 1px var(--voxel-edge), 0 0 12px var(--brand-glow);
}
.bk-achievement .bk-ach-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-achievement .bk-ach-title {
  font-family: var(--font-tag);
  font-size: var(--fs-tag, 0.72rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}
.bk-achievement .bk-ach-text { color: var(--fg); font-size: 0.92rem; font-weight: 600; }
html[data-theme="light"] .bk-achievement {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 250, 246, 0.96));
}

/* --- 14e. Nav spielt mit: Links heben sich federnd, druecken sich wie ein
   Block beim Klick (Tap-Feedback auch auf Touch via :active). */
.nav-links a, .nav-link {
  transition:
    color var(--t-base) var(--ease),
    transform var(--t-fast, 0.15s) var(--ease-spring);
}
@media (hover: hover) {
  .nav-links a:hover, .nav-link:hover { transform: translateY(-1px); }
}
.nav-links a:active, .nav-link:active { transform: translateY(1px) scale(0.96); }
.logo:active .logo-voxel { transform: rotateZ(45deg) scale(0.9); }

/* --- 14f. FAQ: Antwort federt beim Oeffnen ein; der Iso-Marker wackelt beim
   Hover neugierig (Charakter, kein Zufall — gleiche Spring-Kurve). */
@media (prefers-reduced-motion: no-preference) {
  details.faq-card[open] .faq-a { animation: vx-faq-open 0.45s var(--ease-spring); }
  details.faq-card summary:hover .vx-faq-marker { transform: rotateZ(22deg) scale(1.12); }
  details.faq-card[open] summary:hover .vx-faq-marker { transform: rotateZ(112deg) scale(1.12); }
}
@keyframes vx-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 14g. Trust-Band: Items poppen einzeln beim Hover (Band pausiert schon). */
.trust-marquee-item {
  transition: transform 0.25s var(--ease-spring), color 0.2s var(--ease);
}
.trust-marquee-item:hover { transform: translateY(-2px) scale(1.06); color: var(--brand); }

/* --- 14h. Scroll-Hint im Emerald-Kleid (war noch Gold-Orange). */
.modern-hero-scroll { border-color: var(--gold-line); }
.modern-hero-scroll span { background: var(--brand); }

/* --- 14i. Floats < 1100px: zentrale Spalte wird schmaler als die Rand-Buehnen —
   nur die zwei markierten Ecken-Bloecke (.vfloat-m) bleiben, klein und weit
   oben, nie ueber Text. Kein H-Scroll: alles innerhalb .hero-voxel (overflow
   hidden). */
@media (max-width: 1100px) {
  .hero-voxel-float .vfloat { display: none; }
  .hero-voxel-float .vfloat-m { display: block; --fs: 34px !important; opacity: 0.85; }
}

/* --- 14j. Reduced motion: der komplette Amplifier haelt still, Inhalt bleibt
   voll sichtbar (Sweeps/Glints/Toast-Slide/Transforms aus, FAQ offen sofort). */
@media (prefers-reduced-motion: reduce) {
  .hero-pro-emerald .hpw-line .hpw-text { animation: none !important; }
  .hero-voxel-floor .vfx .voxel.vx-emerald .vx-top::after { animation: none !important; }
  .hero-voxel-float .vfloat-ore .voxel { transition: none !important; }
  .bk-achievement {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .nav-links a, .nav-link, .logo-voxel { transition: none !important; }
  .nav-links a:hover, .nav-link:hover,
  .nav-links a:active, .nav-link:active,
  .logo:active .logo-voxel { transform: none !important; }
  .trust-marquee-item { transition: none !important; }
  .trust-marquee-item:hover { transform: none !important; }
  details.faq-card[open] .faq-a { animation: none !important; }
  /* Marker: kein Hover-Wackeln, Zustands-Kipp ([open] -> 90deg aus Sektion 8)
     bleibt als instantaner Zustandswechsel erhalten. */
  .vx-faq-marker { transition: none !important; }
  details.faq-card summary:hover .vx-faq-marker { transform: none; }
  details.faq-card[open] summary:hover .vx-faq-marker { transform: rotateZ(90deg); }
}