/* ============ FONTS ============ */
/* Self-hosted, Latin subset (as served by Google Fonts). Licences: fonts/OFL-*.txt */
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/ibm-plex-sans-italic.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/ibm-plex-sans.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/ibm-plex-sans.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/ibm-plex-sans.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/ibm-plex-sans.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat'; font-style:italic; font-weight:500; font-display:swap; src:url('../fonts/montserrat-italic.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat'; font-style:italic; font-weight:600; font-display:swap; src:url('../fonts/montserrat-italic.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/montserrat.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/montserrat.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/montserrat.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ============ TOKENS ============ */
:root{
  --canvas:#E9E6E2; --canvas-dark:#1E2226; --panel:#FFFFFF; --panel-dark:#282C31;
  --accent:#344758; --accent-hover:#425F78; --accent-muted:#E7E9EB;
  --text-primary:#1E2226; --text-secondary:#3A3F44; --text-on-dark:#ECEBE9; --text-muted-dark:#9C9996;
  --steel:#B6B2AF; --paper-dim:#D3CDC6; --line:#C1BCB6; --line-dark:#383D42; --board-green:#7CD48A;
  --g01:#1E2226; --g02:#344758; --g03:#425F78; --g04:#5F7486; --g05:#70808E;
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --veil:rgba(233,230,226,.6);
  --font-display:'Montserrat',sans-serif; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --max:1180px; --gutter:clamp(16px,4vw,40px); --top-h:72px;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:var(--top-h);-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:16px}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--font-body);font-size:17px;line-height:1.6;transition:opacity .6s var(--ease)}
html.js body{opacity:0}
html.js body.ready{opacity:1}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.12;margin:0 0 .5em;color:var(--text-primary)}
h2{font-size:clamp(28px,4vw,44px)}
h3{font-size:clamp(19px,2.2vw,23px)}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono,.kicker,.km,.pill,.btn,.chip,.tafel-foot{font-family:var(--font-mono)}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover);margin:0 0 14px}
.lead{font-size:clamp(18px,1.6vw,21px);max-width:62ch;color:var(--text-secondary)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:10px 14px;z-index:100;font-family:var(--font-mono)}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dark :focus-visible,.tafel :focus-visible,.top:not(.solid) :focus-visible,.hero :focus-visible{outline-color:var(--board-green)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:#fff;text-decoration:none;font-size:15px;font-weight:500;letter-spacing:.02em;transition:background .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);cursor:pointer;text-shadow:none}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn.ghost:hover{background:var(--accent-muted)}
.btn.light{background:#fff;color:var(--accent);border-color:#fff}
.btn.light:hover{background:var(--canvas)}
@media (pointer:coarse){.btn{min-height:44px}}
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 70% 60% at 30% 20%,rgba(255,255,255,.35),rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 60% 50% at 80% 90%,rgba(52,71,88,.08),rgba(52,71,88,0) 70%);
  animation:envdrift 90s var(--ease-in-out) -30s infinite alternate}
.env::after{content:"";position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.13 0 0 0 0 0.15 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
@keyframes envdrift{from{transform:translate3d(-1.5%,-1%,0) scale(1.04)}to{transform:translate3d(1.5%,1%,0) scale(1.04)}}

/* ============ HEADER ============ */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter);color:var(--text-on-dark);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.top.solid{background:rgba(233,230,226,.92);color:var(--text-primary);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(30,34,38,.08)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:34px;height:34px}
.brand .mark-dark{display:none}
.top.solid .mark-light{display:none}
.top.solid .mark-dark{display:block}
.wordmark{font-family:var(--font-display);font-weight:300;letter-spacing:.14em;font-size:17px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
.nav a{text-decoration:none;font-size:15px;opacity:.9}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.nav .btn{padding:10px 16px;font-size:14px}
.nav-toggle{display:none;background:transparent;border:1px solid currentColor;color:inherit;border-radius:6px;padding:8px 12px;font-family:var(--font-mono);font-size:13px;cursor:pointer}
@media (max-width:859px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--canvas-dark);color:var(--text-on-dark);padding:16px var(--gutter) 22px;display:none}
  .top.solid .nav{background:var(--canvas);color:var(--text-primary)}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ============ HERO ============ */
.hero{position:relative;height:900vh;background:var(--canvas-dark);color:var(--text-on-dark)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas-dark)}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.stage video{opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.55) 100%);opacity:calc(1 - var(--light,0));transition:opacity .2s linear}
.veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 72% 62% at 50% 44%,var(--veil),rgba(233,230,226,.2) 62%,rgba(233,230,226,0) 82%),linear-gradient(180deg,rgba(233,230,226,0) 0%,rgba(233,230,226,0) 50%,rgba(233,230,226,.55) 74%,rgba(233,230,226,.94) 100%);opacity:var(--light,0)}
.mist{position:absolute;inset:-10%;pointer-events:none;opacity:.35;background:radial-gradient(ellipse 40% 30% at 20% 70%,rgba(182,178,175,.35),transparent 70%),radial-gradient(ellipse 50% 30% at 80% 40%,rgba(182,178,175,.25),transparent 70%);animation:mist 60s var(--ease-in-out) -20s infinite alternate}
@keyframes mist{from{transform:translate3d(-3%,1%,0)}to{transform:translate3d(3%,-1%,0)}}
.ring{position:absolute;left:50%;bottom:28px;width:36px;height:36px;margin-left:-18px;color:var(--steel);opacity:.9}
.ring circle{transition:stroke-dashoffset .2s linear;transform:rotate(-90deg);transform-origin:center}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);display:none;align-items:center;gap:10px}
.cue::after{content:"";width:1px;height:28px;background:var(--steel);animation:cue 2.4s var(--ease-in-out) -1s infinite}
/* departure countdown on the cue before the auto run: text plus a line that fills over the 3 s */
.cue.end{color:var(--accent-hover)}
.cue.end::after{background:var(--accent-hover)}
.cue.count{flex-direction:column;gap:8px;font-size:13px;color:#ECEBE9;white-space:nowrap}
.cue.count::after{display:none}
.cue i{display:block;width:180px;height:2px;background:rgba(182,178,175,.35)}
.cue i::after{content:"";display:block;height:100%;background:#ECEBE9;transform-origin:left;animation:depart 3s linear forwards}
@keyframes depart{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
/* will-change: own layers, so fading a band does not repaint its large text shadows (the video stalled on it) */
/* opener: the 3D logo on a light glow over the first frame; JS writes its opacity (in on load, out over the first metres) */
.opener{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;will-change:opacity}
.opener > div{position:relative;height:min(58vh,78vw);aspect-ratio:1033/961}
.opener > div::before{content:"";position:absolute;inset:-32% -36%;background:radial-gradient(closest-side,rgba(233,230,226,.96) 0%,rgba(233,230,226,.9) 52%,rgba(233,230,226,.35) 78%,rgba(233,230,226,0) 100%)}
.opener img{position:relative;width:100%;height:100%}
.band{position:absolute;inset:0;display:flex;padding:0 var(--gutter);opacity:0;pointer-events:none;text-shadow:var(--tshadow);will-change:opacity}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at var(--sx,50%) var(--sy,50%),rgba(5,5,10,.62) 0%,rgba(5,5,10,.42) 46%,rgba(5,5,10,0) 76%)}
.band > *{position:relative}
.band h1,.band .h2{font-family:var(--font-display);font-weight:600;color:#fff;margin:0}
.band h1{font-size:clamp(34px,5.4vw,72px);line-height:1.05;max-width:14ch}
.band .h2{font-size:clamp(26px,4vw,52px);line-height:1.1;max-width:18ch}
.band .kicker{color:var(--steel);text-shadow:var(--tshadow)}
.b1{align-items:flex-start;padding-top:18vh;--sx:28%;--sy:34%}
.b2{align-items:center;justify-content:flex-end;text-align:right;--sx:72%;--sy:50%}
.b2 .h2{max-width:22ch}
.b3{align-items:center;justify-content:space-between;--sx:50%;--sy:50%}
.b3::before{background:radial-gradient(ellipse 34% 50% at 22% 50%,rgba(5,5,10,.62),rgba(5,5,10,0) 76%),radial-gradient(ellipse 34% 50% at 78% 50%,rgba(5,5,10,.62),rgba(5,5,10,0) 76%)}
.b3 .half{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4.6vw,60px);color:#fff;margin:0;width:44%}
.b3 .half.r{text-align:right}
.b4{align-items:flex-start;justify-content:center;text-align:center;padding-top:24vh;--sx:50%;--sy:36%}
.b4::before{background:radial-gradient(ellipse 74% 62% at var(--sx,50%) var(--sy,50%),rgba(5,5,10,.8) 0%,rgba(5,5,10,.55) 46%,rgba(5,5,10,0) 76%)}
.b5{align-items:center;--sx:26%;--sy:50%}
.b5::before{background:radial-gradient(ellipse 60% 70% at 26% 50%,rgba(5,5,10,.74) 0%,rgba(5,5,10,.5) 46%,rgba(5,5,10,0) 76%)}
.b5 .h2{max-width:20ch}
.b6{align-items:center;justify-content:center;text-align:center;text-shadow:none;color:var(--text-primary);pointer-events:auto}
.b6::before{display:none}
.settle-inner{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:760px;margin-top:-6vh}
.settle-inner .logo{width:clamp(260px,min(34vw,47vh),460px);height:auto;filter:drop-shadow(0 22px 26px rgba(30,34,38,.28));transform-origin:50% 85%}
.subline{font-size:clamp(16px,1.5vw,20px);max-width:44ch;color:var(--text-secondary);margin:4px 0 6px}
.settle-inner .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.microline{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);margin:6px 0 0}
.static-only{display:none}
.b6 h1.static-only{font-family:var(--font-body);font-weight:500;font-size:clamp(17px,1.6vw,20px);letter-spacing:0;line-height:1.5;margin:0;color:var(--text-primary);max-width:none}
/* split text */
.split .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.split .w{display:inline-block;white-space:nowrap;margin-right:.28em}
.split .c{display:inline-block}
.e-drift .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.e-depth .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:scale(calc(.82 + .18*var(--kc)))}
.e-grid .c,.e-depth .w{will-change:transform,opacity} /* per letter and word layers: the entrances no longer repaint the band */
.e-converge .half.l{--kc:clamp(0,var(--k,0)*1.4,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*-12vw))}
.e-converge .half.r{--kc:clamp(0,var(--k,0)*1.4,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*12vw))}
.e-blur{position:relative}
.e-blur .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));will-change:opacity}
.e-blur .sharp{opacity:var(--k,0);will-change:opacity}
.e-rise .logo{--kc:clamp(0,var(--k,0)*2.2,1);opacity:var(--kc);transform:perspective(900px) rotateX(calc((1 - var(--kc))*-16deg)) translateY(calc((1 - var(--kc))*18px)) scale(calc(.96 + .04*var(--kc)))}
.e-rise .subline,.e-rise .static-only{--kc:clamp(0,(var(--k,0) - .5)*3.5,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*12px))}
.e-rise .cta-row,.e-rise .microline{--kc:clamp(0,(var(--k,0) - .7)*4,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*10px))}
.b6.static .cta-row,.b6.static .microline,.b6.static .subline,.b6.static .logo,.b6.static .static-only{opacity:1;transform:none}
@media (max-height:560px){.cue,.ring{display:none}}

/* static hero gates: identical to JS */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto;min-height:0}
  .stage{position:relative;height:auto}
  .stage video,.ring,.cue,.mist{display:none !important}
  .band,.opener{display:none}
  .band.b6{display:flex;position:relative;inset:auto;opacity:1 !important;pointer-events:auto;align-items:flex-start;padding-top:calc(72px + 3vh);padding-bottom:max(calc(40px + 22vh),calc(24px + 13vw))}
  .b6 .static-only{display:block}
  .scrim{opacity:0}
  .veil{opacity:1;background:radial-gradient(ellipse 46% 42% at 50% 42%,rgba(233,230,226,.5),rgba(233,230,226,0) 75%),linear-gradient(180deg,rgba(233,230,226,0) 0%,rgba(233,230,226,0) 70%,rgba(233,230,226,.7) 90%,rgba(233,230,226,.96) 100%)}
  .settle-inner{margin-top:0;gap:10px;transform:translateY(calc(var(--x,0)*-70px));opacity:calc(1 - var(--x,0)*1.7)}
  /* exit: JS writes --x (0 in place, 1 scrolled out); the taller poster moves 13 % slower than the page and zooms a little */
  .poster{top:-15%;height:115%;background-position:50% 100%;transform:translateY(calc(var(--x,0)*13%)) scale(calc(1 + .04*var(--x,0)))}
  .settle-inner .logo{width:clamp(170px,52vw,260px)}
  .microline{color:var(--text-primary)}
}
/* Phone journey (trial since 21.09.2026, remove this block, the .jr markup and the journey JS to drop it).
   Portrait phones and tablets without reduced motion: JS adds .journey, the hero grows to 350vh and the stage pins.
   Loading is staged: the strip is preloaded (index.html), depot and gable follow once it is in or the visitor scrolls.
   --ja pans the track strip from five tracks to one, --jb/--jz fade in and zoom the depot, --jc/--js fade in and settle
   the gable, --light swaps scrim for veil; all six bands get opacity and --k from JS as on desktop. */
.jr{display:none}
.hero.journey{height:350vh}
/* the journey gate (identical in the strip preload in index.html, same logic as applyJourney): the hero is tall from the
   first layout, so the lazy Gleis stills stay out of reach and nothing jumps when JS adds .journey */
@media (orientation:portrait) and (max-width:1024px) and (prefers-reduced-motion:no-preference),(orientation:portrait) and (pointer:coarse) and (prefers-reduced-motion:no-preference){html.js .hero{height:350vh}}
.hero.journey .stage{position:sticky;top:0;height:100vh}
.hero.journey .jr{display:block;position:absolute;inset:0;overflow:hidden}
.jr-strip{position:absolute;left:0;top:0;width:100%;aspect-ratio:760/5472;background:center/100% 100% no-repeat;transform:translateY(calc((1 - var(--ja,0))*(100vh - 100%)))}
.jr-depot{position:absolute;inset:0;background:center/cover no-repeat;opacity:var(--jb,0);transform:scale(calc(1 + .3*var(--jz,0)));transform-origin:50% 62%}
.hero.journey .poster{top:0;height:104%;background-position:50% 0;opacity:var(--jc,0);transform:translateY(calc(var(--x,0)*13%)) scale(calc((1.14 - .14*var(--js,0))*(1 + .04*var(--x,0))))}
.hero.journey .scrim{opacity:calc(1 - var(--light,0))}
.hero.journey .veil{opacity:var(--light,0)}
.hero.journey .band,.hero.journey .opener{display:flex}
.hero.journey .cue{display:flex !important}
.hero.journey .b1{padding-top:22vh}
.hero.journey .b3{flex-direction:column;justify-content:center;align-items:stretch;gap:18px}
.hero.journey .b3 .half{width:auto;font-size:30px}
.hero.journey .band.b6{position:absolute;inset:0;align-items:center;padding:64px var(--gutter) 24px;opacity:var(--o6,0) !important}
.hero.journey .b6 .static-only{display:none}

/* ============ SECTIONS ============ */
section.block{padding:clamp(72px,9vw,120px) 0}
@media (max-width:720px){section.block{padding:56px 0}}
.dark{background:var(--canvas-dark);color:var(--text-on-dark)}
.dark h2,.dark h3{color:#fff}
.dark .lead,.dark p{color:var(--text-muted-dark)}
.dark .kicker{color:var(--steel)}
.dark .lead{color:#C9C6C2}
/* Entrances hang on the scroll position: JS writes --o per part (0 below the viewport, 1 once the part has climbed
   22 % of the viewport height). The Gleis sections use their own --p drive further down. */
.reveal .part{opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1))*18px))}
.js .reveal:not(.gleis) .part{--o:0}
.gleis .part{transform:none}

/* Tafel: Zugzielanzeiger. Anthrazit bezel (padding), display with a Stahlblau to Anthrazit gradient,
   clock block left, three-column table right. The tokens on .tafel drive the header row and the rows alike. */
.tafel-sec{padding:clamp(56px,7vw,96px) 0}
.tafel{--bz:12px;--cw:clamp(190px,26%,288px);--tp:28px;--gap:16px;--cg:72px;--ca:84px;font-family:var(--font-body);color:#fff;background:var(--canvas-dark);border-radius:14px;padding:var(--bz);box-shadow:0 30px 80px rgba(30,34,38,.18)}
.tafel-display{position:relative;display:grid;grid-template-columns:var(--cw) minmax(0,1fr);border-radius:4px;overflow:hidden;background:linear-gradient(160deg,var(--accent) 0%,var(--canvas-dark) 100%)}
.tafel-display::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 2px,rgba(255,255,255,.02) 2px 3px)}
.tafel-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 16px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),var(--accent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tafel-clock .lbl{display:block;font-size:clamp(14px,1.2vw,17px);color:#ECEBE9;letter-spacing:.02em}
.clock{display:flex;align-items:baseline;gap:.12em;font-family:var(--font-mono);font-weight:600;line-height:1;white-space:nowrap}
.clock .hm{font-size:clamp(40px,4.6vw,64px);letter-spacing:-.01em}
.clock .ss{font-size:clamp(14px,1.4vw,20px);font-weight:500;color:#ECEBE9}
.tafel-table{min-width:0;padding:10px var(--tp) 12px}
.tafel-cols,.row{display:grid;grid-template-columns:var(--cg) minmax(0,1fr) var(--ca);column-gap:var(--gap);align-items:center}
.tafel-cols{font-size:clamp(13px,1vw,14px);color:#ECEBE9;padding:6px 0 7px;border-bottom:1px solid rgba(255,255,255,.7)}
.rows{list-style:none;margin:0;padding:0}
.row{position:relative;isolation:isolate;text-decoration:none;color:#fff;padding:10px 0 11px;border-top:1px solid rgba(255,255,255,.18);transform-origin:top;opacity:0;transform:rotateX(-70deg)}
.rows li:first-child .row{border-top-color:transparent}
.row::before{content:"";position:absolute;inset:0 -10px;z-index:-1;border-radius:3px;background:rgba(255,255,255,.06);opacity:0;transition:opacity .35s var(--ease)}
.row:hover::before{opacity:1}
.tafel.boot .row{animation:flap .7s var(--ease) forwards}
/* stagger sits on li:nth-child(n) .row; a.row is the only child of its li, so .row:nth-child(n) never matched */
.tafel.boot li:nth-child(1) .row{animation-delay:.05s}.tafel.boot li:nth-child(2) .row{animation-delay:.18s}.tafel.boot li:nth-child(3) .row{animation-delay:.31s}.tafel.boot li:nth-child(4) .row{animation-delay:.44s}.tafel.boot li:nth-child(5) .row{animation-delay:.57s}
@keyframes flap{0%{opacity:0;transform:rotateX(-70deg)}60%{opacity:1;transform:rotateX(12deg)}100%{opacity:1;transform:rotateX(0)}}
/* single characters: .spin rattles during the boot, .flip is one flap when a digit changes at the minute */
.ch{display:inline-block;white-space:pre;text-align:center;transform-origin:50% 60%}
.ch.spin{animation:chspin .11s linear infinite}
.ch.flip{animation:chflip .32s var(--ease)}
@keyframes chspin{0%{transform:rotateX(0)}50%{transform:rotateX(-75deg)}100%{transform:rotateX(0)}}
@keyframes chflip{0%{transform:rotateX(-90deg);opacity:.3}100%{transform:rotateX(0);opacity:1}}
.row .g,.row .ab{font-family:var(--font-mono);font-weight:500;font-size:clamp(18px,1.7vw,24px);line-height:1;white-space:nowrap}
.row .g{display:flex;align-items:center;gap:10px}
.row .g::before{content:"";flex:none;width:12px;height:12px;border-radius:2px;background:var(--dot);border:2px solid var(--steel)}
.row .ziel{min-width:0}
.row .ziel b{display:block;font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.15;white-space:nowrap}
.row .ziel small{display:block;margin-top:2px;font-size:clamp(13px,1vw,15px);font-weight:400;line-height:1.3;color:#ECEBE9}
.tafel-foot{margin:14px 4px 0;font-size:13px;color:var(--text-secondary)}
@media (max-width:1179px){.tafel{--tp:20px;--gap:12px;--cg:64px;--ca:80px}}
@media (max-width:859px){
  .tafel{--bz:10px;--tp:16px}
  .tafel-display{grid-template-columns:minmax(0,1fr)}
  .tafel-clock{flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 16px;text-align:left;box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)}
  .clock .hm{font-size:clamp(28px,5vw,40px)}
  .tafel-table{padding:6px var(--tp) 10px}
}
@media (max-width:639px){
  .tafel{--bz:8px;--tp:12px;--gap:10px;--cg:56px;--ca:64px}
  .row .ziel b{font-size:clamp(18px,4.6vw,22px)}
  .row .g,.row .ab{font-size:18px}
}
@media (max-width:479px){
  .tafel{--cg:52px}
  .tafel-cols,.row{grid-template-columns:var(--cg) minmax(0,1fr)}
  .tafel-cols span:nth-child(3),.row .ab{display:none}
}

/* Gleis sections: one skeleton for all five. Surfaces alternate (01 dark, 02 light, 03 dark, 04 light, 05 dark),
   the image side follows the surface (dark: image left, light: image right). --tone is the section accent:
   Stahlblau on light, Metallgrau on dark. The Gleis tones --g01..--g05 stay on the departure-board swatches. */
.gleis{--tone:var(--accent);--p:.5;position:relative}
.gleis.dark{--tone:var(--steel)}
section.gleis{padding:clamp(28px,4vh,48px) 0;display:grid;align-content:center;scroll-margin-top:0}
.gleis>.wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;position:relative;z-index:1}
@media (min-width:900px){
  section.gleis{min-height:calc(100vh - var(--top-h));min-height:calc(100svh - var(--top-h))}
  .gleis>.wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto;grid-template-areas:"media text" "card text";gap:16px clamp(24px,4vw,56px)}
  .gleis:not(.dark)>.wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"text media" "text card"}
  .gleis .media{grid-area:media;align-self:end}
  .gleis .text{grid-area:text;align-self:center}
  .gleis .format-card{grid-area:card;align-self:start}
}
.gleis .media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:10px;box-shadow:0 30px 70px rgba(30,34,38,.18)}
@media (max-width:899px){.gleis .media{aspect-ratio:16/9}}
.gleis .media img{position:absolute;inset:-30px 0;width:100%;height:calc(100% + 60px);object-fit:cover;border-radius:0;box-shadow:none;--s:clamp(0,(var(--p) - .2)*4,1);transform:translateY(calc((.5 - var(--p))*60px)) scale(calc(1.06 - .06*var(--s)))}
.gleis .kicker{color:var(--tone)}
.gleis h2{font-size:clamp(26px,3vw,38px)}
.gleis .lead{font-size:clamp(17px,1.35vw,19px)}
.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;background:var(--tone);color:#fff;border-radius:4px;padding:4px 8px;margin-right:10px}
.gleis.dark .badge{color:var(--text-primary)}
.leistungen{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:16px}
.leistungen li{position:relative;padding-left:26px;color:var(--text-secondary)}
.leistungen li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:2px;background:var(--tone)}
.leistungen strong{font-weight:600;color:var(--text-primary)}
.gleis.dark .leistungen li{color:var(--text-on-dark)}
.gleis.dark .leistungen strong{color:#fff}
.fuerwen{font-size:15px;color:var(--text-secondary);border-left:3px solid var(--tone);padding:4px 0 4px 14px;margin:0 0 16px;max-width:62ch}
.fuerwen strong{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:block;color:var(--text-primary);margin-bottom:4px}
.gleis.dark .fuerwen{color:var(--steel)}
.gleis.dark .fuerwen strong{color:var(--text-on-dark)}
.format-card{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--tone);border-radius:8px;padding:16px 20px}
.format-card .t{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 4px}
.format-card .f{font-size:17px;font-weight:600;font-family:var(--font-display);margin:0 0 6px}
.format-card p{font-size:15px;color:var(--text-secondary);margin:0 0 12px}
.format-card .btn{margin-top:0}
.dark .format-card{background:var(--panel-dark);border-color:var(--line-dark);border-top-color:var(--tone)}
.dark .format-card .t,.dark .format-card p{color:var(--text-muted-dark)}
.dark .format-card .f{color:#fff}
/* living element: the lamp in 04; paused while the section is not .live */
.lamp{position:relative}
.lamp::after{content:"";position:absolute;inset:0;border-radius:10px;opacity:0;box-shadow:inset 0 -80px 120px rgba(232,200,120,.25);animation:pulse 8s var(--ease-in-out) -3s infinite;animation-play-state:paused}
.live .lamp::after{animation-play-state:running}
@keyframes pulse{0%,100%{opacity:0}50%{opacity:.8}}
/* shared by Über */
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr}}
.media img{width:100%;height:auto;border-radius:10px;box-shadow:0 30px 70px rgba(30,34,38,.18)}
.media.portrait img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:899px){.media.portrait{width:66%;margin:0 auto}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px;position:relative;overflow:hidden}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:15px;color:var(--text-secondary);margin:0}
/* Gleis scroll effects, all driven by --p on the section (0: section top at the viewport bottom, 1: section bottom
   at the viewport top, .5 without JS or with reduced motion, written by main.js only while the section is on screen).
   The still parallaxes 60px slower than the page and settles from 1.06 to 1; the parts fade and rise in as the section
   enters, with staggered thresholds --t; the watermark digit counter-parallaxes behind the text. */
.reveal.gleis .part{--o:clamp(0,(var(--p) - var(--t,.2))*7,1);opacity:var(--o);transform:translateY(calc((1 - var(--o))*14px));transition:none}
.gleis .text>.part:nth-child(1){--t:.12}.gleis .text>.part:nth-child(2){--t:.16}.gleis .text>.part:nth-child(3){--t:.2}.gleis .text>.part:nth-child(4){--t:.24}.gleis .text>.part:nth-child(5){--t:.28}
.gleis .media.part{--t:.08}.gleis .format-card.part{--t:.3}
.wm-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wm{position:absolute;top:50%;font-family:var(--font-mono);font-weight:600;font-size:clamp(200px,28vw,420px);line-height:1;letter-spacing:-.04em;color:rgba(52,71,88,.07);user-select:none;transform:translateY(calc(-50% + (var(--p) - .5)*120px))}
.gleis.dark .wm{color:rgba(255,255,255,.035);right:-.04em}
.gleis:not(.dark) .wm{left:-.04em}

/* Vorgehen. JS adds .km-pin to the section (>=860px wide, >=700px tall, no reduced motion);
   without it the section is a normal block, the line is complete and the train is parked. */
.km-wrap{--draw:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media (min-width:860px){.km-wrap{grid-template-columns:repeat(4,1fr)}}
.km-track{position:relative;grid-column:1/-1;margin-bottom:4px}
.km-line{display:block;width:100%;height:26px}
/* 1200 = viewBox width; user units stretch with the box, so the drawn fraction stays linear */
.km-line path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:calc(1200*(1 - var(--draw)))}
.km-line .sleepers{stroke:var(--line);stroke-width:2}
.train{position:absolute;top:7px;left:calc(var(--draw)*100%);width:36px;height:12px;border-radius:3px;background:var(--accent);box-shadow:0 1px 3px rgba(30,34,38,.3);transform:translateX(calc(var(--draw)*-100%))}
.train::after{content:"";position:absolute;inset:3px 5px;border-radius:2px;background:rgba(255,255,255,.22)}
.km{font-size:13px;letter-spacing:.14em;color:var(--accent-hover);display:block;margin-bottom:8px}
.stop h3{margin-bottom:8px}
.stop p{color:var(--text-secondary);font-size:15px;margin:0}
/* narrow screens: the track runs down the left edge; --draw draws the rails and moves the train, --at (JS, measured)
   is where each stop sits on the line and --lit fills its dot once the line has reached it */
@media (max-width:859px){
  .km-wrap{padding-left:36px}
  .km-track{position:absolute;grid-column:auto;left:0;top:0;bottom:0;width:20px;margin:0}
  .km-line{display:none}
  .km-track::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--line)}
  .km-track::after{content:"";position:absolute;left:3px;top:0;width:14px;height:100%;background:linear-gradient(var(--accent),var(--accent)) 0 0/2px 100% no-repeat,linear-gradient(var(--accent),var(--accent)) 12px 0/2px 100% no-repeat;transform:scaleY(var(--draw));transform-origin:top}
  .train{top:calc(var(--draw)*100%);left:3px;width:14px;height:32px;z-index:2;transform:translateY(calc(var(--draw)*-100%))}
  .train::after{inset:5px 3px}
  .stop{position:relative;--lit:clamp(0,(var(--draw) - var(--at,0))*25,1)}
  .stop::before{content:"";position:absolute;left:-33px;top:1px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid var(--accent);background:var(--canvas);box-shadow:inset 0 0 0 calc(var(--lit)*6px) var(--accent)}
  .stop .km{opacity:calc(.5 + .5*var(--lit))}
}
/* pinned drawing */
section.km-pin{height:220vh;padding:0;scroll-margin-top:0}
.km-pin .km-stage{position:sticky;top:0;height:100vh;padding-top:88px;display:grid;align-content:center}
.km-pin .wrap{width:100%}
.km-pin .km-wrap .stop{--on:clamp(0,(var(--draw) - var(--at,0))*6,1);opacity:var(--on);transform:translateY(calc((1 - var(--on))*18px));transition:none}
.km-pin .stop:nth-child(2){--at:.02}.km-pin .stop:nth-child(3){--at:.27}.km-pin .stop:nth-child(4){--at:.52}.km-pin .stop:nth-child(5){--at:.77}

/* Über */
.einwand{display:grid;gap:18px;margin-top:clamp(32px,5vw,56px)}
@media (min-width:760px){.einwand{grid-template-columns:repeat(3,1fr)}}
.einwand .card{border-left:4px solid var(--accent)}

.einwand h3{font-size:17px;font-family:var(--font-body);font-weight:600;color:var(--accent);margin-bottom:8px}

/* FAQ */
.faq{display:grid;gap:12px}
@media (min-width:960px){.faq{grid-template-columns:1fr 1fr;align-items:start}}
details{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 20px}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);flex:none;transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 18px;margin:0;color:var(--text-secondary);font-size:15px}

/* Kontakt + Weiche */
.kontakt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,64px)}
@media (min-width:900px){.kontakt-grid{grid-template-columns:1fr 1fr;align-items:start}}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.pill{font-size:12px;letter-spacing:.04em;color:var(--text-on-dark);border:1px solid var(--line-dark);background:var(--panel-dark);border-radius:999px;padding:6px 12px}
.weiche{margin:0 0 22px}
.weiche svg{width:100%;max-width:520px;height:auto;display:block;margin:0 0 -8px}
.weiche .track{fill:none;stroke:var(--steel);stroke-width:2}
.weiche .tie{stroke:#4A4F55;stroke-width:22;stroke-dasharray:3 9}
.weiche .blade{fill:none;stroke:var(--board-green);stroke-width:4;stroke-dasharray:var(--blen,400);stroke-dashoffset:calc(var(--blen,400)*(1 - var(--p,0)));transition:stroke-dashoffset .1s linear}
.weiche .conv{fill:none;stroke:var(--steel);stroke-width:2;opacity:calc(.22 + .78*var(--p,0))}
.weiche .five{opacity:calc(1 - var(--p,0)*.7)}
.hebel{display:inline-flex;align-items:center;gap:12px;background:var(--panel-dark);color:var(--text-on-dark);border:1px solid var(--line-dark);border-radius:8px;padding:12px 16px;font-family:var(--font-mono);font-size:14px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
.hebel .knob{width:14px;height:34px;border-radius:7px;background:var(--steel);transform:rotate(calc(-28deg + var(--p,0)*56deg));transition:transform .1s linear}
.hebel[aria-pressed="true"]{border-color:var(--board-green)}
.weiche-status{font-family:var(--font-mono);font-size:13px;color:var(--board-green);min-height:20px;margin:10px 0 0;opacity:0;transition:opacity .5s var(--ease)}
.kontakt.set .weiche-status{opacity:1}
.form{display:grid;gap:14px;background:var(--panel-dark);border:1px solid var(--line-dark);border-radius:10px;padding:clamp(18px,3vw,28px)}
.field{display:grid;gap:6px;opacity:.78;transition:opacity .6s var(--ease)}
.kontakt.set .field,.kontakt.nohold .field{opacity:1}
.kontakt.set .field:nth-of-type(1){transition-delay:.05s}.kontakt.set .field:nth-of-type(2){transition-delay:.15s}.kontakt.set .field:nth-of-type(3){transition-delay:.25s}.kontakt.set .field:nth-of-type(4){transition-delay:.35s}
.field label{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.field input,.field select,.field textarea{width:100%;background:#1E2226;border:1px solid #7C838C;color:var(--text-on-dark);border-radius:6px;padding:12px 14px;font:inherit;font-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent-hover);border-color:var(--accent-hover)}
.field textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start;background:var(--accent-hover);border-color:var(--accent-hover)}
.form .btn:hover{background:#557391;border-color:#557391}
.form-note{font-size:13px;color:var(--text-muted-dark);margin:0}
.success{display:none;font-size:15px;color:#fff;background:var(--panel-dark);border-left:3px solid var(--board-green);padding:12px 14px;border-radius:0 6px 6px 0}
.form.sent .success{display:block}
.error{display:none;font-size:15px;color:#fff;background:var(--panel-dark);border-left:3px solid var(--steel);padding:12px 14px;border-radius:0 6px 6px 0}
.form.failed .error{display:block}
.form .btn:disabled{opacity:.6;cursor:default}
/* honeypot: off-screen instead of display:none, so simple bots still see and fill it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Footer */
footer{background:var(--canvas-dark);color:var(--text-muted-dark);padding:36px 0 40px;border-top:1px solid var(--line-dark)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
footer img{width:160px;height:auto}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer nav a{color:var(--text-on-dark);text-decoration:none;font-size:14px}
footer nav a:hover{text-decoration:underline;text-underline-offset:5px}
footer .line{font-family:var(--font-mono);font-size:13px;margin:0}

/* Legal pages */
.legal{padding:120px var(--gutter) 80px;max-width:760px}
.legal h1{font-size:clamp(30px,4vw,44px)}
.legal h2{font-size:22px;margin-top:36px}
.notfound-page{min-height:100vh;display:flex;flex-direction:column}
.notfound-page main{flex:1;display:flex}
.notfound{width:100%;display:flex;flex-direction:column;justify-content:center}
.notfound .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* Pause everything when hidden */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* Reduced motion: final states, no drives */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  body{opacity:1}
  .reveal .part{opacity:1;transform:none}
  .row{opacity:1;transform:none}
  .km-line path{stroke-dashoffset:0}
  .weiche{--p:1}
  .field{opacity:1}
  .env{animation:none}
}
body.pinned .reveal .part{opacity:1;transform:none}
body.pinned .row{opacity:1;transform:none}
body.pinned .km-line path{stroke-dashoffset:0}
body.pinned .weiche{--p:1}
body.pinned .field{opacity:1}
/* legal pages: solid header from the start, light canvas */
.legal-page .top{position:sticky}
.legal-page .nav{display:block;position:static;background:transparent;padding:0}
.legal-page .nav ul{flex-direction:row;gap:18px}
.legal-page .nav-toggle{display:none}