:root{
  --ink:#f2eadf;
  --muted:#d5c5b3;
  --dark:#16120f;
  --dark-soft:#201813;
  --accent:#d96a22;
  --accent-deep:#a94b24;
  --cream:#efe7da;
  --line:rgba(255,255,255,.16);
  --walk-bar-height:266px;
  --walk-foot-size:222px;
  --walk-foot-spacing:118px;
  --walk-foot-spacing-half:59px;
  --walk-foot-y:1px;
  --walk-bg:#7b0300;
  --walk-passive-color:#45121c;
  --walk-active-color:#ff4e4b;
  --walk-passive-opacity:.16;
  --walk-active-opacity:1;
  --walk-active-glow:32px;
  --walk-active-duration:121%;
  --walk-afterglow-strength:100%;
  --walk-afterglow-duration:45%;
  --walk-toggle-bottom:-117px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--dark);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ---------- NAVIGATION ---------- */
.hero > .site-header{
  position:absolute;
  top:0;
  right:0;
  bottom:auto;
  left:0;
  height:0;
  margin:0;
  overflow:visible;
  z-index:20;
}
.nav-shell{
  width:min(
    var(--hero-nav-shell-width, 1280px),
    calc(100% - var(--hero-nav-side-gap, 48px))
  );
  min-height:var(--hero-nav-height, 86px);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--hero-nav-shell-gap, 34px);
  border-bottom:1px solid rgba(255,255,255,.20);
}
.brand-link{
  color:white;
  text-decoration:none;
  flex:0 0 auto;
  position:relative;
  z-index:0;
  isolation:isolate;
}
.brand-link::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-.5em -.65em;
  border-radius:var(--hero-brand-box-radius,6px);
  background:rgba(var(--hero-brand-box-rgb,11,9,8),var(--hero-brand-box-opacity,.35));
  -webkit-backdrop-filter:blur(var(--hero-brand-box-blur,2px));
  backdrop-filter:blur(var(--hero-brand-box-blur,2px));
  pointer-events:none;
}
.brand-title{
  display:block;
  font-weight:900;
  font-size:clamp(.82rem, var(--hero-brand-size, .945rem), 1.5rem);
  letter-spacing:-.025em;
  line-height:1;
  color:rgba(var(--hero-brand-rgb, 217,106,34), var(--hero-brand-opacity, 1));
}
.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(16px, var(--hero-nav-gap, 30.24px), 50px);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.main-nav a{
  color:rgba(var(--hero-menu-rgb, 255,255,255), var(--hero-menu-opacity, .88));
  text-decoration:none;
  font-size:clamp(.78rem, var(--hero-menu-size, .78rem), 1.125rem);
  font-weight:800;
  letter-spacing:.035em;
  padding:var(--hero-nav-pad-top, 34px) 0 var(--hero-nav-pad-bottom, 29px);
  border-bottom:clamp(3px, var(--hero-nav-underline, 3px), 5px) solid transparent;
  transition:.2s ease;
}
.main-nav a:hover,
.main-nav a.active{
  color:rgba(var(--hero-menu-rgb, 255,255,255), var(--hero-menu-opacity, .88));
  border-bottom-color:var(--accent);
}
.menu-toggle{
  display:none;
}

/* ---------- HERO ---------- */
.hero{
  /* Calibration offsets are percentages of the fixed stage, before responsive scaling.
     Reference viewports: desktop 1440 × 900, tablet width 900, mobile width 390.
     Keep these neutral until the image + overlay are calibrated together. */
  --hero-stage-desktop-x:0%;
  --hero-stage-desktop-y:0%;
  --hero-stage-desktop-scale:1;
  --hero-stage-tablet-x:0%;
  --hero-stage-tablet-y:0%;
  --hero-stage-tablet-scale:1;
  --hero-stage-mobile-x:0%;
  --hero-stage-mobile-y:0%;
  --hero-stage-mobile-scale:1;
  --hero-stage-offset-x:var(--hero-stage-desktop-x);
  --hero-stage-offset-y:var(--hero-stage-desktop-y);
  --hero-stage-calibration-scale:var(--hero-stage-desktop-scale);
  min-height:0;
  height:var(--hero-frame-height, 86vh);
  max-height:100vh;
  max-height:100dvh;
  position:relative;
  overflow:hidden;

  background:none;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:10;
  top:0;
  right:0;
  left:0;
  height:var(--hero-menu-gradient-height, 43%);
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,var(--hero-menu-gradient-opacity, .56)) 0%,
    rgba(0,0,0,var(--hero-menu-gradient-opacity, .56)) 24%,
    transparent 100%
  );
  pointer-events:none;
}
/* The single image source lives inside the coupled visual stage. */
.hero.has-background-layer{
  background-image:none;
}
/* One fixed desktop coordinate space, anchored directly to the Hero's top edge. */
.hero-stage{
  position:absolute;
  left:50%;
  top:0;
  width:var(--hero-reference-width, 1440px);
  height:var(--hero-reference-height, 774px);
  transform:translateX(-50%) scale(var(--hero-stage-scale, 1))
    translate(var(--hero-stage-offset-x), var(--hero-stage-offset-y))
    scale(var(--hero-stage-calibration-scale));
  transform-origin:top center;
  pointer-events:none;
}
.hero-background{
  position:absolute;
  inset:0;
  background:url("images/hero-djembe-v1.png") center / 100% auto no-repeat;
  transform:translate(var(--bg-offset-x, -8px), var(--bg-offset-y, 46px)) scale(var(--bg-zoom, 1.16));
  transform-origin:50% 50%;
  pointer-events:none;
}

/* Minimal development cockpit. */
#hero-cockpit{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:100000;
  width:320px;
  max-width:calc(100vw - 28px);
  color:#fff;
  font-size:13px;
}
#cockpit-toggle{
  display:block;
  margin-left:auto;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:#111;
  color:#fff;
  font:inherit;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  cursor:pointer;
}
#cockpit-panel{
  display:grid;
  max-height:min(70vh, 720px);
  overflow-y:auto;
  grid-template-columns:1fr 58px;
  gap:6px 10px;
  margin-top:8px;
  padding:12px;
  border-radius:8px;
  background:rgba(12,11,10,.92);
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
#cockpit-panel[hidden]{display:none}
#cockpit-panel label{grid-column:1 / -1}
#cockpit-panel input{width:100%;margin:0 0 6px;min-width:0}
#cockpit-panel input[type="checkbox"]{width:auto;justify-self:start;accent-color:var(--accent)}
#cockpit-panel output{text-align:right;font-variant-numeric:tabular-nums}
#cockpit-panel input[type="color"]{height:28px;cursor:pointer}
.cockpit-section-title{
  grid-column:1 / -1;
  margin:8px 0 2px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.18);
  color:var(--accent);
  font-size:13px;
}
#ctl-point, #ctl-point-x, #ctl-point-y{grid-column:1 / -1;width:100%;min-width:0;font:inherit}
#calibration-status{grid-column:1 / -1;text-align:left}
#calibration-status[hidden]{display:none}

/* Temporary, independent WalkCycle calibration cockpit. */
#walkcycle-cockpit{
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:100001;
  width:300px;
  max-width:calc(100vw - 28px);
  color:#fff;
  font-size:12px;
}
#walkcycle-cockpit-toggle{
  display:block;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:#111;
  color:#fff;
  font:inherit;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  cursor:pointer;
}
#walkcycle-cockpit-panel{
  display:grid;
  max-height:min(72vh,680px);
  overflow-y:auto;
  grid-template-columns:minmax(0,1fr) 58px;
  gap:6px 10px;
  margin-top:8px;
  padding:12px;
  border-radius:8px;
  background:rgba(12,11,10,.94);
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
#walkcycle-cockpit-panel[hidden]{display:none}
#walkcycle-cockpit-panel label{grid-column:1 / -1}
#walkcycle-cockpit-panel input{width:100%;min-width:0;margin:0 0 6px}
#walkcycle-cockpit-panel input[type="color"]{height:28px;cursor:pointer}
#walkcycle-cockpit-panel output{text-align:right;font-variant-numeric:tabular-nums}

/* Appearance variables survive SVG rebuilds; only visible geometry is targeted. */
.hero-geometry.has-appearance-controls .geo-poly{
  stroke-width:var(--appearance-poly-width);
}
.hero-geometry.has-appearance-controls .geo-point{
  r:var(--appearance-point-size);
}
.hero-geometry.has-appearance-controls polygon[data-name="triangle-right"]{
  stroke:var(--appearance-tri-color);
}
.hero-geometry.has-appearance-controls polygon[data-name="triangle-left"]{
  stroke:var(--appearance-tri-b-color);
}
.hero-geometry.has-appearance-controls polygon[data-name="square"]{
  stroke:var(--appearance-sq-color);
}
.hero-geometry.has-appearance-controls polygon[data-name="pentagon-right"]{
  stroke:var(--appearance-pen-color);
}
.hero-geometry.has-appearance-controls polygon[data-name="pentagon-left"]{
  stroke:var(--appearance-pen-b-color);
}
.hero-geometry.has-appearance-controls polygon[data-name="hexagon"]{
  stroke:var(--appearance-hex-color);
}
.hero-geometry.has-appearance-controls > svg > .geo-circ{
  stroke:var(--appearance-circ-color);
  stroke-width:var(--appearance-circ-width);
  stroke-opacity:var(--appearance-circ-opacity);
}
.hero-geometry.has-appearance-controls #debugRot line{
  stroke:var(--appearance-radar-color);
}
.hero-geometry.has-appearance-controls #radarBeam{
  stroke-width:var(--appearance-radar-width);
}
.hero-geometry.has-appearance-controls #radarTrail{
  opacity:var(--appearance-radar-trail);
  filter:drop-shadow(0 0 4px var(--appearance-radar-glow));
}
.hero-geometry.has-appearance-controls #radarTrail line{
  stroke-width:var(--appearance-radar-width);
}
.hero-geometry.has-appearance-controls .geo-axis{
  stroke:var(--appearance-axis-color);
  stroke-width:var(--appearance-axis-width);
  stroke-opacity:var(--appearance-axis-opacity);
}
.hero-geometry.has-appearance-controls #debugRot circle{
  fill:var(--appearance-radar-color);
  filter:drop-shadow(0 4px 8px var(--appearance-radar-glow)) !important;
}

/* Geometry overlay container */
.hero-geometry{
  position:absolute;
  inset:0;
  z-index:1; /* behind hero-inner which is z-index:2 */
  pointer-events:none; /* enable per-element pointer-events on SVG */
  /* Move the complete overlay, including the radar, without changing SVG coordinates. */
  transform:translate(var(--geo-offset-x, -121px), var(--geo-offset-y, -19px)) scale(var(--geo-zoom, 1.37));
  transform-origin:50% 50%;
}
.hero-geometry svg{
  width:100%;
  height:100%;
  display:block;
  pointer-events:auto;
  /* transform the entire SVG geometry via cockpit variables (translate, scale) */
  --geo-x: 0px;
  --geo-y: 0px;
  --geo-scale: 1;
  transform: translate(var(--geo-x)) translateY(var(--geo-y)) scale(var(--geo-scale));
  transform-box: fill-box;
  transform-origin: center center;
}

/* polygon strokes and points */
.geo-poly{
  fill: none;
  stroke-opacity:1;
  stroke-width: var(--poly-width, 1.8);
}
.geo-point{
  fill: var(--point-fill, #fff);
  stroke: rgba(0,0,0,0.32);
  stroke-width: var(--point-stroke-width,1.2);
  transition: transform .12s ease, filter .28s ease, opacity .28s ease;
  cursor: pointer;
  pointer-events:auto;
}
.geo-point.glow{
  r:9;
  filter: drop-shadow(0 6px 12px rgba(240,120,50,0.28));
}
.geo-point.afterglow{
  opacity:0.6;
  transition: opacity .7s ease;
}
.geo-point.is-walk-step{
  fill:#ff2d2d !important;
  stroke:#fff0ea !important;
  stroke-width:1.5 !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 5px rgba(255,20,20,.95)) drop-shadow(0 0 11px rgba(255,20,20,.62)) !important;
}

/* radar pointer styles removed (debug test line used instead) */

/* ensure the horizontal axis is only visible inside circle via stroke-linecap and clipping */
.geo-axis{
  stroke: rgba(255,255,255,0.14);
  stroke-width:1.2;
  stroke-linecap:round;
}

.hero-content{
  position:relative;
  padding:clamp(42px,6vw,78px) 0;
}
.hero-copy{
  width:min(1040px,calc(100% - 30px));
  padding:0 8px;
  text-align:center;
}
.hero-kicker{
  margin:0 0 18px;
  color:var(--accent);
  font-size:clamp(.78rem,1vw,.95rem);
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.eyebrow{
  margin:0 0 18px;
  color:#f09a55;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
  font-size:.77rem;
}
.hero-title{
  margin:0;
  max-width:850px;
  font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;
  letter-spacing:-.05em;
  text-align:center;
}
.hero-title span{display:block}
.hero-title-main{
  font-size:clamp(2.15rem,4.7vw,4.8rem);
  line-height:.98;
  margin:0;
}
.hero-title-plus{
  display:block;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:clamp(1.1rem,1.6vw,1.45rem);
  color:var(--accent);
  letter-spacing:.16em;
  margin:.2em 0 .22em 0;
}
.hero-title-sub{
  font-size:clamp(2.2rem,4.4vw,4.8rem);
  line-height:1;
  opacity:0.98;
  margin-top:0;
}
.hero-title-small{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(.66rem,.9vw,.9rem);
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#d9c9b8;
  margin:.58em 0 .46em .16em;
}
.hero-title-location{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(.9rem,1.15vw,1.05rem);
  line-height:1.15;
  letter-spacing:.015em;
  color:#f0e6db;
  margin-top:.45em;
}
.hero-title-addition{
  margin-top:.42em;
  color:#f0e6db;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(1.25rem,2.5vw,2.25rem);
  line-height:1.08;
  letter-spacing:-.025em;
}
.hero-text-group{
  max-width:760px;
  margin-top:26px;
  /* subtle localized dark reading surface for readability (not full-image darkening) */
  background: rgba(var(--audience-box-rgb, 241,136,0), var(--audience-box-opacity, 0.56));
  padding:18px 22px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.03);
  backdrop-filter: var(--audience-box-blur, blur(1.2px));
}
.hero-audience{
  margin:0 auto;
  color:rgba(255,255,255,.96);
  font-size:clamp(1.02rem,1.25vw,1.18rem);
  line-height:1.35;
  font-weight:750;
  text-align:center;
}
.hero-audience-sub{
  margin:6px auto 0;
  color:rgba(255,255,255,.94);
  font-size:clamp(.98rem,1.15vw,1.07rem);
  line-height:1.35;
  font-weight:700;
  text-align:center;
}
.hero-method{
  margin:6px auto 0;
  color:rgba(255,255,255,.88);
  font-size:clamp(.9rem,1.02vw,.98rem);
  line-height:1.35;
  text-align:center;
}
.walkcycle-inline-link{
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
  transition: color .12s ease;
}
.walkcycle-inline-link:hover{
  color: #f08a45;
}
.hero-principle{
  margin:12px auto 0;
  max-width:760px;
  color:rgba(255,255,255,.76);
  font-size:clamp(.88rem,.98vw,1.02rem);
  line-height:1.5;
  text-align:center;
}
.hero-buttons{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:30px;
  justify-content:center;
}
.button{
  min-height:49px;
  padding:0 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-weight:900;
  font-size:.75rem;
  transition:transform .15s ease, background .15s ease;
}
.button:hover{transform:translateY(-1px)}
.button-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
}
.button-secondary{
  color:#fff;
  border:1px solid rgba(255,255,255,.46);
  background:rgba(12,9,8,.18);
  backdrop-filter:blur(3px);
}
.trust-list{
  display:grid;
  gap:18px; /* more space between items */
  margin-top:34px;
  color:rgba(255,255,255,.94);
  font-size:clamp(1.02rem,1.15vw,1.12rem); /* slightly larger */
  font-weight:800;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  padding:10px 16px;
  border-radius:12px;
  background: rgba(var(--trust-box-rgb, 172,81,70), var(--trust-box-opacity, 0.28));
  backdrop-filter: var(--trust-box-blur, none);
}
.trust-list span{
  display:flex;
  align-items:center;
  gap:14px;
  line-height:1.5;
}
.trust-list span::before{
  content:"✓";
  color: #f06f2a; /* warm strong orange */
  font-weight:900;
  font-size:1.35em; /* larger check */
  margin-left:-2px;
}

/* Desktop-only tweaks requested: keep mobile rules unchanged */
@media (min-width:941px){
  /* Keep the longer main headline balanced without forcing overflow. */
  .hero-title-main{
    font-size:clamp(2.4rem,4.2vw,4.8rem);
    white-space:normal;
  }

  /* Keep Trommelgruppen unchanged (no rule here) */

  /* More space between headline and first explanatory line */
  .hero-text-group{
    margin-top:44px;
  }

  /* Slightly larger final explanatory line (1-2px increase) */
  .hero-principle{
    font-size:clamp(.88rem,.98vw,1rem);
  }

  /* Move buttons further down */
  .hero-buttons{
    margin-top:42px;
  }
}

/* Public sound mixer: independent of the developer cockpit. */
.mixer-section{
  --mixer-water-opacity:0.95;
  --mixer-overlay-opacity:0.05;
  --mixer-box-opacity:0.37;
  --mixer-box-darkness:0;
  --mixer-box-blur:0px;
  position:relative;
  z-index:5;
  isolation:isolate;
  background:var(--dark);
}
.mixer-body{
  position:relative;
  isolation:isolate;
  padding:24px 0 14px;
}
.mixer-body::before,
.mixer-body::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.mixer-body::before{
  background:url("images/water-mixer-bg.png") center / cover no-repeat;
  opacity:var(--mixer-water-opacity);
}
.mixer-body::after{
  background:#000;
  opacity:var(--mixer-overlay-opacity);
}
.mixer-disclosure{
  position:relative;
  z-index:1;
}
.mixer-disclosure:not([open]) > .mixer-body{display:none}
.walkcycle-footbar{
  position:relative;
  width:100%;
  height:clamp(var(--walk-bar-height),calc(var(--walk-bar-height) + 1.5vw),calc(var(--walk-bar-height) + 48px));
  overflow:hidden;
  background:var(--walk-bg);
}
.walkcycle-bar{
  position:relative;
  z-index:4;
  width:min(calc(100% - 20px),clamp(720px,72vw,1440px));
  height:100%;
  margin:0 auto;
}
.walkcycle-foot{
  position:absolute;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(var(--walk-foot-size) + 70px);
  max-width:46%;
  height:100%;
  min-width:0;
  transform:translateY(var(--walk-foot-y));
  transition:transform 90ms ease-out;
  pointer-events:none;
}
.walkcycle-foot-left{
  right:calc(50% + var(--walk-foot-spacing-half));
  justify-content:flex-end;
  transform-origin:right center;
}
.walkcycle-foot-right{
  left:calc(50% + var(--walk-foot-spacing-half));
  justify-content:flex-start;
  transform-origin:left center;
}
.walkcycle-foot img{display:none}
.walkcycle-foot::before{
  content:"";
  display:block;
  height:min(clamp(var(--walk-foot-size),calc(var(--walk-foot-size) + 2vw),calc(var(--walk-foot-size) + 70px)),calc(100% - 16px));
  max-width:100%;
  background:var(--walk-passive-color);
  opacity:var(--walk-passive-opacity);
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
  transition:opacity 90ms linear,background-color 90ms linear,filter 90ms linear;
}
.walkcycle-foot-left::before{
  aspect-ratio:464 / 1004;
  -webkit-mask-image:url("images/walkcycle_left_footprint.png");
  mask-image:url("images/walkcycle_left_footprint.png");
}
.walkcycle-foot-right::before{
  aspect-ratio:480 / 1024;
  -webkit-mask-image:url("images/walkcycle_right_footprint.png");
  mask-image:url("images/walkcycle_right_footprint.png");
}
.walkcycle-foot.is-active{
  transform:translateY(calc(var(--walk-foot-y) - 2px)) scale(1.025);
}
.walkcycle-foot.is-active::before{
  background:var(--walk-active-color);
  opacity:var(--walk-active-opacity);
  filter:drop-shadow(0 0 var(--walk-active-glow) var(--walk-active-color));
}
.walkcycle-foot.is-afterglow::before{
  background:var(--walk-active-color);
  opacity:max(var(--walk-passive-opacity),var(--walk-afterglow-opacity,0));
  filter:drop-shadow(0 0 var(--walk-afterglow-glow,0px) var(--walk-active-color));
}
.walkcycle-controls{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  align-content:end;
  min-width:0;
  height:100%;
  padding-bottom:14px;
}
.mixer-settings{
  position:relative;
  z-index:3;
  width:340px;
  max-width:calc(100% - 28px);
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(16,12,10,.88);
  color:var(--ink);
  font-size:13px;
}
.mixer-toggle{
  position:absolute;
  z-index:10;
  bottom:var(--walk-toggle-bottom);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(16,12,10,.86);
  color:var(--ink);
  list-style:none;
  cursor:pointer;
}
.mixer-toggle::-webkit-details-marker{display:none}
.mixer-toggle::marker{content:""}
.mixer-chevron{
  width:9px;
  height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .16s ease;
}
.mixer-disclosure[open] > .mixer-toggle .mixer-chevron{
  transform:rotate(225deg) translate(-1px,-1px);
}
.walkcycle-modes{
  display:flex;
  justify-content:center;
  max-width:100%;
  padding:2px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
}
.walkcycle-mode{
  min-height:30px;
  padding:4px 9px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.55);
  font:700 10px/1.1 system-ui,sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.walkcycle-mode.is-active{
  background:rgba(217,106,34,.24);
  color:var(--ink);
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.mixer-settings > summary{padding:12px 14px;min-height:44px;cursor:pointer}
.mixer-toggle:focus-visible,
.walkcycle-mode:focus-visible,
.mixer-settings > summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mixer-settings-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  align-items:center;
  gap:8px;
  padding:0 14px 14px;
}
.mixer-settings-controls label{grid-column:1 / -1}
.mixer-settings-controls input{width:100%;min-width:0;margin:0;accent-color:var(--accent)}
.mixer-settings-controls output{text-align:right;font-variant-numeric:tabular-nums}
.hero-sound-panel{
  position:relative;
  margin:0 auto 14px;
  z-index:3;
  width:340px;
  max-width:calc(100% - 28px);
  padding:22px 14px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:
    linear-gradient(rgba(0,0,0,var(--mixer-box-darkness)),rgba(0,0,0,var(--mixer-box-darkness))),
    rgba(16,12,10,var(--mixer-box-opacity));
  backdrop-filter:blur(var(--mixer-box-blur));
  color:var(--ink);
  font-size:11px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.sound-transport{
  display:grid;
  grid-template-columns:64px 1fr 58px;
  align-items:center;
  gap:6px 10px;
}
#sound-play{
  grid-row:1 / 3;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--dark-soft);
  color:var(--ink);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.sound-transport label{grid-column:2 / 4}
.sound-master{
  display:grid;
  grid-template-columns:64px 1fr 28px;
  align-items:center;
  gap:10px;
  margin:14px 0;
}
.hero-sound-panel input{
  min-width:0;
  width:100%;
  margin:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.hero-sound-panel output{font-variant-numeric:tabular-nums;text-align:right}
.sound-layers{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.sound-lane{display:grid;justify-items:center;gap:6px;color:var(--voice-color,var(--ink))}
.sound-lane input{
  writing-mode:vertical-lr;
  direction:rtl;
  height:74px;
  width:26px;
  accent-color:var(--voice-color,var(--accent));
}
.sound-lane output{font-size:10px}
#sound-status{display:block;margin-top:8px}
#sound-status[hidden]{display:none}
.hero.has-hero-audio .hero-inner{pointer-events:none}
.hero.has-hero-audio .hero-copy{pointer-events:none}
.hero.has-hero-audio .hero-copy a{pointer-events:auto}
.hero-geometry.is-playable .geo-point{touch-action:manipulation}
.hero-geometry.is-playable .geo-point{transition-property:transform,filter}
.hero-geometry.is-playable .geo-poly,
.hero-geometry.is-playable .geo-axis,
.hero-geometry.is-playable .geo-point{
  opacity:var(--rhythm-opacity, 1);
}
.hero-geometry.is-playable .geo-point:hover{transform:none}
.hero-geometry.is-playable .geo-point:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:600px){
  .hero-sound-panel{margin:0 auto 14px}
  .walkcycle-mode{padding-inline:7px;font-size:9px}
}

/* ---------- NUR MARKER FÜR STEP 2 ---------- */
.next-step{
  background:var(--cream);
  color:#211a16;
  min-height:260px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:60px 24px;
}
.next-step p{
  color:var(--accent-deep);
  font-weight:900;
  letter-spacing:.15em;
  font-size:.74rem;
}
.next-step h2{
  margin:.25em 0 0;
  font-size:clamp(1.7rem,3vw,2.6rem);
  letter-spacing:-.035em;
}

/* ---------- MOBILE ---------- */
@media(max-width:940px){
  .site-header{position:absolute}
  .nav-shell{
    min-height:74px;
    width:min(100% - 28px,1280px);
    gap:20px;
  }
  .brand-title{font-size:clamp(.85rem,3.5vw,1rem)}
  .menu-toggle{
    display:flex;
    width:44px;
    height:44px;
    padding:10px;
    border:0;
    background:rgba(0,0,0,.22);
    border-radius:50%;
    flex-direction:column;
    justify-content:center;
    gap:4px;
  }
  .menu-toggle span{
    height:2px;
    background:#fff;
    width:100%;
  }
  .main-nav{
    display:none;
    position:absolute;
    top:74px;
    left:14px;
    right:14px;
    transform:none;
    padding:15px 18px 21px;
    background:rgba(16,12,10,.97);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .main-nav.open{display:flex}
  .main-nav.is-mobile-overlay{
    display:flex;
    position:fixed;
    z-index:99999;
    top:calc(var(--mobile-menu-anchor-top,59px) + var(--mobile-menu-offset-y,8px));
    right:calc(var(--mobile-menu-anchor-right,14px) + var(--mobile-menu-offset-right,0px));
    left:auto;
    width:min(var(--mobile-menu-width,100vw),calc(100vw - 28px),var(--mobile-menu-max-width,460px));
    max-height:calc(100vh - var(--mobile-menu-anchor-top,59px) - var(--mobile-menu-offset-y,8px) - 16px);
    max-height:calc(100dvh - var(--mobile-menu-anchor-top,59px) - var(--mobile-menu-offset-y,8px) - 16px - env(safe-area-inset-bottom,0px));
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:none;
    padding:15px 18px 21px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--mobile-menu-radius,24px);
    background:rgba(var(--mobile-menu-rgb,0,0,0),var(--mobile-menu-opacity,.85));
    -webkit-backdrop-filter:blur(var(--mobile-menu-blur,6px));
    backdrop-filter:blur(var(--mobile-menu-blur,6px));
    box-shadow:0 18px 48px rgba(0,0,0,.42);
  }
  .mobile-menu-notch{
    position:fixed;
    z-index:99999;
    top:calc(var(--mobile-menu-anchor-top,59px) + var(--mobile-menu-offset-y,8px));
    right:calc(var(--mobile-menu-anchor-right,14px) + var(--mobile-menu-offset-right,0px) + var(--mobile-menu-notch-position,18px));
    width:var(--mobile-menu-notch-size,8px);
    height:var(--mobile-menu-notch-size,8px);
    border-top:1px solid rgba(255,255,255,.12);
    border-left:1px solid rgba(255,255,255,.12);
    border-radius:2px 0 0;
    background:rgba(var(--mobile-menu-rgb,0,0,0),var(--mobile-menu-opacity,.85));
    transform:translateY(-50%) rotate(45deg);
    pointer-events:none;
  }
  .main-nav a{
    width:100%;
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .hero{
    --hero-stage-offset-x:var(--hero-stage-tablet-x);
    --hero-stage-offset-y:var(--hero-stage-tablet-y);
    --hero-stage-calibration-scale:var(--hero-stage-tablet-scale);
  }
}
@media(max-width:600px){
  .hero{
    --hero-stage-offset-x:var(--hero-stage-mobile-x);
    --hero-stage-offset-y:var(--hero-stage-mobile-y);
    --hero-stage-calibration-scale:var(--hero-stage-mobile-scale);
  }
}