@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../assets/fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/dm-mono-300.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/dm-mono-400.woff2) format("woff2")}

/* ---------- Tokens aus dem Logo: Studio-Grau, Perlmutt-Metall, Graphit, warmes Leuchten ---------- */
:root{
  --bg:#F2F0ED;--bg-2:#E8E5E1;--fg:#1A1816;--muted:#6B645B;
  --line:rgba(26,24,22,.14);--line-strong:rgba(26,24,22,.32);
  --accent:#B98A4B;--glow:#FFCF8F;--on-accent:#1A1816;
  --glass:rgba(250,249,247,.62);--glass-line:rgba(26,24,22,.09);
  --focus:#1A1816;--danger:#A3321F;--btn-bg:#1A1816;--btn-fg:#F5F2EE;
  --ff-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Tiefe der Schrift: beleuchtete Metall-Oberfläche + dunkle Flanken + weicher Schatten */
  --face:linear-gradient(180deg,#5b554f 0%,#2b2825 38%,#1a1816 62%,#34302c 100%);
  --face-muted:linear-gradient(180deg,#b3aca3 0%,#8c857c 55%,#9d968d 100%);
  --side-1:#0f0e0d;--side-2:#1c1a18;--drop:rgba(58,44,30,.22);
  --gold-face:var(--face);--gold-side:var(--side-1);
  --fc:#5b554f,#2b2825,#1a1816,#34302c;--fcm:#b3aca3,#8c857c,#8c857c,#9d968d;
  --ff-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px);--hud-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121110;--bg-2:#1B1917;--fg:#EFEAE2;--muted:#A39B90;
    --line:rgba(239,234,226,.14);--line-strong:rgba(239,234,226,.3);
    --accent:#E3AF68;--glass:rgba(27,25,23,.6);--glass-line:rgba(239,234,226,.1);
    --focus:#E3AF68;--danger:#F08A73;--btn-bg:#EFEAE2;--btn-fg:#121110;
    --face:linear-gradient(180deg,#ffffff 0%,#e9e3da 40%,#c9c1b6 64%,#ded7cd 100%);
    --face-muted:linear-gradient(180deg,#8c857c 0%,#6d675f 60%,#7a736b 100%);
    --side-1:#5d574f;--side-2:#3a3631;--drop:rgba(0,0,0,.55);
    --fc:#ffffff,#e9e3da,#c9c1b6,#ded7cd;--fcm:#8c857c,#6d675f,#6d675f,#7a736b;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121110;--bg-2:#1B1917;--fg:#EFEAE2;--muted:#A39B90;
  --line:rgba(239,234,226,.14);--line-strong:rgba(239,234,226,.3);
  --accent:#E3AF68;--glass:rgba(27,25,23,.6);--glass-line:rgba(239,234,226,.1);
  --focus:#E3AF68;--danger:#F08A73;--btn-bg:#EFEAE2;--btn-fg:#121110;
  --face:linear-gradient(180deg,#ffffff 0%,#e9e3da 40%,#c9c1b6 64%,#ded7cd 100%);
    --face-muted:linear-gradient(180deg,#8c857c 0%,#6d675f 60%,#7a736b 100%);
    --side-1:#5d574f;--side-2:#3a3631;--drop:rgba(0,0,0,.55);
    --fc:#ffffff,#e9e3da,#c9c1b6,#ded7cd;--fcm:#8c857c,#6d675f,#6d675f,#7a736b;
    color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--hud-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ff-body);font-weight:400;font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
::selection{background:var(--glow);color:#1A1816}
a{color:inherit}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:3px}
[tabindex="-1"]:focus{outline:none}
.skip{position:fixed;left:16px;top:-80px;z-index:60;background:var(--btn-bg);color:var(--btn-fg);padding:12px 16px;border-radius:999px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* ---------- Ebenen: Studio-Licht, Band, Korn ---------- */
/* cleanes, warmes Studio: Creme zur Mitte, leicht dunkler zum Rand – der Untergrund des Logo-Fotos */
.studio{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity 1.2s ease;
  background:radial-gradient(80% 70% at 50% 44%,var(--studio-hi,#f6f3ee) 0%,var(--studio-lo,#e7e1d9) 100%)}
:root{--studio-hi:#f6f3ee;--studio-lo:#e7e1d9}
:root[data-theme="dark"] .studio{background:radial-gradient(60% 55% at 66% 40%,color-mix(in srgb,var(--glow) 12%,transparent),transparent 62%),radial-gradient(140% 100% at 50% 120%,rgba(0,0,0,.5),transparent 60%)}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
/* ---------- Fraktal-Hintergrund (nur in der Farbwelt „Fraktal“) ---------- */
#fractal{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;opacity:0;transition:opacity 1.2s ease;image-rendering:auto;filter:saturate(1.08)}
.pal-fractal #fractal{opacity:.92}
.pal-fractal .studio{opacity:0}
.pal-fractal .chapter::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 62%,transparent) 34%,transparent 62%)}
.pal-fractal .intro::before{background:none}
.is-bgdrag,.is-bgdrag *{-webkit-user-select:none;user-select:none;cursor:grabbing}
/* Lesbarkeit: links, wo der Text steht, wird das Fraktal sanft ausgeblendet */
/* ---------- Glasbildschirm darüber: Rahmen mit runden Ecken, gewölbte Scheibe, Spiegelung, die der Maus folgt ---------- */
.glass-screen{--gx:0;--gy:0;--bz:clamp(6px,1vw,12px);--gr:clamp(18px,2.4vw,34px);position:fixed;inset:0;z-index:35;pointer-events:none}
.glass-screen::before{content:"";position:absolute;inset:var(--bz);border-radius:var(--gr);
  box-shadow:0 0 0 80px #070707,inset 0 0 0 1px rgba(255,255,255,.2),inset 0 2px 1px rgba(255,255,255,.14),inset 0 -2px 2px rgba(0,0,0,.35),inset 0 0 70px rgba(0,0,0,.26),inset 0 0 180px rgba(0,0,0,.14)}
.gs-glare{position:absolute;inset:var(--bz);border-radius:var(--gr);overflow:hidden;mix-blend-mode:screen;
  background:radial-gradient(90% 70% at calc(18% + var(--gx) * 8%) calc(-6% + var(--gy) * 8%),rgba(255,255,255,.16),rgba(255,255,255,.05) 38%,transparent 62%),
             radial-gradient(60% 40% at calc(85% - var(--gx) * 5%) calc(108% - var(--gy) * 5%),rgba(255,255,255,.06),transparent 70%)}
.gs-glare,.gs-edge{transition:opacity .8s ease}
.is-intro .gs-glare,.is-intro .gs-edge{opacity:0} /* im Film: keine Glasspiegelung über dem Bild */
.gs-edge{position:absolute;inset:var(--bz);border-radius:var(--gr);overflow:hidden;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 0 calc(50% + var(--gx) * 10%),rgba(255,255,255,.07) calc(52% + var(--gx) * 10%),rgba(255,255,255,.025) calc(58% + var(--gx) * 10%),transparent calc(61% + var(--gx) * 10%))}
@media (max-width:760px){.glass-screen::before{box-shadow:0 0 0 80px #070707,inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 40px rgba(0,0,0,.25)}}
/* ---------- Röhrenfernseher-Filter (80er) im Hintergrund: Zeilen, Lochmaske, Schnee, Rollbalken, Flackern ---------- */
:root{--crt-line:rgba(26,24,22,.09);--crt-mask:.05;--crt-snow:.14;--crt-roll:rgba(255,255,255,.35);--crt-vig:rgba(40,32,24,.32)}
:root[data-theme="dark"]{--crt-line:rgba(0,0,0,.6);--crt-mask:.1;--crt-snow:.15;--crt-roll:rgba(255,236,210,.075);--crt-vig:rgba(0,0,0,.75)}
.crt{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;animation:crtFlicker 4s steps(1) infinite}
.crt::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,var(--crt-line) 0 1px,transparent 1px 3px),
             repeating-linear-gradient(90deg,rgba(255,40,40,var(--crt-mask)) 0 1px,rgba(40,255,90,var(--crt-mask)) 1px 2px,rgba(60,90,255,var(--crt-mask)) 2px 3px)}
.crt::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,var(--crt-vig) 100%);box-shadow:inset 0 0 120px 20px var(--crt-vig)}
.crt-snow{position:absolute;inset:-100px;opacity:var(--crt-snow);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:crtSnow .5s steps(5) infinite}
.crt-roll{position:absolute;left:0;right:0;top:0;height:28vh;background:linear-gradient(transparent,var(--crt-roll) 45%,var(--crt-roll) 55%,transparent);animation:crtRoll 9s linear infinite;mix-blend-mode:screen}
.crt-track{position:absolute;left:0;right:0;height:3px;top:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 20%,rgba(80,200,255,.14) 50%,rgba(255,80,120,.14) 70%,transparent);filter:blur(.5px);opacity:0;animation:crtTrack 7.3s steps(1) infinite}
@keyframes crtSnow{0%{transform:translate(0,0)}20%{transform:translate(-37px,21px)}40%{transform:translate(18px,-44px)}60%{transform:translate(-12px,33px)}80%{transform:translate(41px,9px)}100%{transform:translate(0,0)}}
@keyframes crtRoll{from{transform:translateY(-30vh)}to{transform:translateY(130vh)}}
@keyframes crtFlicker{0%{opacity:1}31%{opacity:.94}32%{opacity:1}64%{opacity:.97}65%{opacity:1}88%{opacity:.92}89%{opacity:1}}
@keyframes crtTrack{0%{opacity:0;top:40%}58%{opacity:.9;top:62%;height:5px}59%{opacity:.6;top:63%;height:2px}60%{opacity:0}83%{opacity:.8;top:18%;height:3px}84%{opacity:0}}
@media (prefers-reduced-motion:reduce){.crt,.crt-snow,.crt-roll,.crt-track{animation:none}.crt-track{display:none}}
.grain{position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}
#smooth-wrapper{z-index:2;position:relative}
/* Lenis (sanftes Scrollen) – Grundregeln aus lenis.css, ohne die iframe-Sperre (sonst ließe sich der Chat nicht bedienen) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:50;background:var(--bg);color:var(--fg);display:grid;place-content:center;gap:14px;
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;animation:plFail .6s 7s forwards}
.pl-row{display:flex;justify-content:space-between;gap:48px;width:min(320px,calc(100vw - 32px))}
.pl-sub{color:var(--muted)}
#pl-pct{font-variant-numeric:tabular-nums}
.pl-bar{height:1px;background:var(--line);width:min(320px,calc(100vw - 32px));overflow:hidden}
.pl-bar i{display:block;height:100%;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.js .preloader{animation:none}
@keyframes plFail{to{opacity:0;visibility:hidden}}

/* ---------- Eigener Mauszeiger ---------- */
.cursor{position:fixed;left:0;top:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:difference}
.has-cursor .cursor{opacity:1}
.c-dot{position:fixed;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff}
.c-ring{position:fixed;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s,left .35s,top .35s,border-color .3s,background-color .3s}
.c-label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cursor.is-hover .c-ring{width:56px;height:56px;left:-28px;top:-28px;border-color:#fff}
.cursor.is-drag .c-ring{width:76px;height:76px;left:-38px;top:-38px;border-color:#fff}
.cursor.is-drag .c-label{opacity:1}
@media (hover:none){.cursor{display:none}}

/* ---------- HUD ---------- */
.hud{position:fixed;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--gutter);font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.hud a,.hud button{pointer-events:auto}
.hud-top{top:0;padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:12px}
.hud-bottom{bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);padding-top:12px;align-items:flex-end}
.hud-top::before,.hud-bottom::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hud-top::before{background:linear-gradient(var(--bg),transparent);opacity:.7}
.hud-bottom::before{background:linear-gradient(transparent,var(--bg));opacity:.7}
.brand-wrap{text-decoration:none;color:var(--fg);display:grid;gap:2px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-display);font-size:16px;font-weight:800;letter-spacing:-.04em;text-transform:none;white-space:nowrap}
.brand-dot{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 25%,transparent),0 0 14px 2px color-mix(in srgb,var(--glow) 80%,transparent)}
.brand-sub{font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:none;padding-left:17px}
.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.nav a{text-decoration:none;color:var(--fg);position:relative;padding-block:12px;font-family:var(--ff-body);font-weight:700;font-size:11px;letter-spacing:-.01em}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.controls{display:flex;align-items:center;gap:6px}
.ctl{all:unset;pointer-events:auto;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;min-width:38px;padding:0 12px;border-radius:999px;color:var(--fg);font:inherit;text-transform:uppercase;transition:background-color .2s}
.ctl:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.ctl:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.lang{gap:4px}
.lang button{all:unset;pointer-events:auto;cursor:pointer;padding:2px 3px;color:var(--muted)}
.lang button[aria-pressed="true"]{color:var(--fg)}
.lang button:focus-visible{outline:2px solid var(--focus)}
.lang .sep{color:var(--line-strong)}
.theme svg{width:16px;height:16px;display:block}
.theme path{fill:var(--fg)}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.bars i{display:block;width:2px;height:3px;background:currentColor;transition:height .3s}
.sound[aria-pressed="true"] .bars i{animation:bar 1.1s ease-in-out infinite}
.sound[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.4s}
.sound[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.7s}
.sound[aria-pressed="true"] .bars i:nth-child(4){animation-delay:-.2s}
@keyframes bar{0%,100%{height:3px}50%{height:10px}}
.hud-left,.hud-right{display:grid;gap:6px}
.hud-right{justify-items:end;text-align:right}
.chapter-label{display:flex;gap:8px;align-items:baseline;color:var(--fg)}
.chapter-label b{font-weight:400;color:var(--muted)}
.palette-btn{all:unset;cursor:pointer;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;color:var(--muted);padding-block:4px}
.palette-btn:hover{color:var(--fg)}
.palette-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.swatches{display:inline-flex;gap:3px}
.swatches i{width:8px;height:8px;border-radius:50%;border:1px solid var(--line-strong)}
.fold{display:flex;align-items:center;gap:10px;color:var(--muted)}
.fold-meter{width:72px;height:1px;background:var(--line-strong);overflow:hidden}
.fold-meter i{display:block;height:100%;background:var(--fg);transform-origin:left;transform:scaleX(.5)}
#fold-out{color:var(--fg);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
.ring{width:40px;height:40px;display:block}
.ring circle{fill:none;stroke-width:1.5}
.ring .ring-bg{stroke:var(--line)}
.ring .ring-fg{stroke:var(--fg)}
.progress-row{display:flex;align-items:center;gap:14px}
.coords{color:var(--muted);font-variant-numeric:tabular-nums;white-space:pre}
.journey{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);width:min(300px,26vw);height:28px;overflow:visible}
.journey path{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 4}
.journey circle{fill:var(--glow);stroke:var(--fg);stroke-width:1}
@media (max-width:1023px){.journey{display:none}}
@media (max-width:760px){.nav,.coords,.brand-sub,.fold{display:none}.ring{width:34px;height:34px}}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:var(--ff-display);color:var(--fg);margin:0;font-weight:800}
.eyebrow{font-family:var(--ff-body);font-weight:700;font-size:.74rem;letter-spacing:-.005em;text-transform:uppercase;color:var(--fg);display:inline-flex;gap:10px;align-items:center}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px 1px color-mix(in srgb,var(--glow) 80%,transparent)}
h1.hero-title{font-size:clamp(2rem,1.1rem + 2.9vw,3.8rem);line-height:.98;letter-spacing:-.045em;max-width:24ch;text-wrap:balance}
h2{font-size:clamp(2.5rem,1.2rem + 4.6vw,5.6rem);line-height:.92;letter-spacing:-.05em;text-wrap:balance}
h3{font-size:1.4rem;line-height:1.1;font-weight:700;letter-spacing:-.03em}
.lead{font-size:clamp(1rem,.95rem + .3vw,1.16rem);line-height:1.6;max-width:46ch;color:var(--fg)}
/* 3D-Schrift: jede Überschrift ist ein beleuchteter Körper mit Flanken und Schatten */
.depth,.depth .pc{background:linear-gradient(rgba(255,236,205,calc(var(--hi,0) * .55)),rgba(255,236,205,calc(var(--hi,0) * .55))),var(--face);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--fg)}
.depth{filter:drop-shadow(0 1px 0 var(--side-2)) drop-shadow(0 1px 0 var(--side-1)) drop-shadow(0 1.5px 0 var(--side-1)) drop-shadow(0 10px 10px var(--drop))}
.depth.is-split{background:none}
.depth .strike,.depth .strike .pc{--face:var(--face-muted)}
.depth .strike{color:var(--muted)}
/* Hervorhebung: Pinselschrift in Gold – das warme Leuchten aus den Falten des Logos */
/* Hervorhebung: gleiche Schrift, nur mit einer Linie darunter, die sich beim Einblenden zieht */
.hl{background-image:linear-gradient(var(--fg),var(--fg));background-repeat:no-repeat;background-position:0 96%;background-size:calc(var(--hl,1) * 100%) .07em;padding-bottom:.04em}
.depth .hl{background:linear-gradient(var(--fg),var(--fg)) 0 96%/calc(var(--hl,1) * 100%) .07em no-repeat,var(--face);-webkit-background-clip:border-box,text;background-clip:border-box,text}
h1 .hl,h2 .hl{white-space:nowrap}
.strike{position:relative;white-space:nowrap;color:var(--muted);text-decoration:none}
.strike::after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.07em;min-height:2px;background:var(--fg);border-radius:2px;transform-origin:0 50%;transform:scaleX(var(--strike,1));pointer-events:none}
/* Schrift reagiert auf die Maus */
[data-proximity] .pw{display:inline-block;white-space:nowrap}
[data-proximity] .pc{display:inline-block;will-change:transform}
.mono{font-family:var(--ff-body);font-weight:700;font-size:.72rem;letter-spacing:-.005em;text-transform:uppercase;color:var(--muted)}

/* ---------- Bausteine ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border-radius:22px;box-shadow:0 30px 60px -40px rgba(26,24,22,.35)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:50px;padding:0 26px;border:0;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:500 .95rem/1 var(--ff-body);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.btn:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 45%,transparent),0 10px 30px -10px color-mix(in srgb,var(--glow) 90%,transparent)}
.btn:active{transform:scale(.98)}
.btn .arr{display:inline-block;transition:transform .3s}
.btn:hover .arr{transform:translateX(4px)}
.link{display:inline-flex;align-items:center;gap:.45em;min-height:44px;font-weight:500;text-decoration:none;color:var(--fg);position:relative}
.link::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.link:hover::after{transform:scaleX(0);transform-origin:right}
.copy{font:500 .82rem/1 var(--ff-body);background:transparent;color:var(--fg);border:1px solid var(--line-strong);border-radius:999px;padding:0 16px;min-height:40px;cursor:pointer;transition:border-color .2s,background-color .2s}
.copy:hover{border-color:var(--fg)}
.copy[data-state="ok"]{background:var(--glow);border-color:var(--glow);color:#1A1816}

/* ---------- Kapitel ---------- */
.chapter{position:relative}
.col{max-width:600px;display:grid;gap:26px;justify-items:start}
.drag-zone{position:absolute;inset:0;z-index:0}
.chapter .wrap{position:relative;z-index:1}
.hero{min-height:100vh;min-height:100svh;display:flex;padding-block:calc(var(--hud-h) + 36px) 150px}
.hero-inner{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px);width:100%}
.hero-mark{margin:0;font-family:var(--ff-display);font-weight:800;font-size:clamp(4.2rem,1rem + 16.5vw,16.5rem);line-height:.84;letter-spacing:-.065em;white-space:nowrap;display:flex;align-items:baseline;gap:.08em;
  background:var(--face);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 var(--side-2)) drop-shadow(0 2px 0 var(--side-1)) drop-shadow(0 20px 24px var(--drop));padding-bottom:.08em}

.mark3d .hero-mark,.mark3d .hero-mark .hm-ki{visibility:hidden}
.hero-tag{font-weight:700;font-size:clamp(.8rem,.7rem + .5vw,1.15rem);letter-spacing:-.03em;text-transform:uppercase;max-width:60ch;margin-top:-.4em}
.hero-copy{margin-top:auto;gap:22px}
@media (min-width:761px){.hero .hints{display:none}}
.hero .drag-zone{left:48%}
.hints{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:6px}
.hints span{display:inline-flex;align-items:center;gap:8px}
.hints span::before{content:"";width:14px;height:1px;background:var(--line-strong)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
@media (max-width:760px){.hero .drag-zone{left:0;bottom:auto;height:42%}.hero-copy{margin-top:22vh}}

.manifest{height:100vh;height:100svh;display:flex;align-items:center}
.manifest-text{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,1.1rem + 3.2vw,4.2rem);line-height:.98;letter-spacing:-.05em;max-width:17ch}
.manifest .note{margin-top:22px}

.services-head{padding-block:18vh 4vh}
.svc-block{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:flex-end;padding-block:10vh}
.svc{width:min(500px,100%);padding:clamp(24px,3vw,38px);display:grid;gap:14px;justify-items:start}
.svc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%}
.chip{font-family:var(--ff-body);font-weight:700;font-size:.72rem;letter-spacing:-.005em;text-transform:uppercase;background:var(--fg);color:var(--bg);padding:5px 10px;border-radius:6px}
.svc-count{font-family:var(--ff-mono);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.svc-jargon{font-family:var(--ff-mono);font-size:.8rem}
.svc h3{font-size:clamp(1.8rem,1.2rem + 1.6vw,2.7rem);font-weight:800;line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.tags{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:.75rem;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong)}
@media (max-width:760px){.svc-block{justify-content:center;align-items:flex-end}}

.translator{min-height:100vh;padding-block:16vh}
.kt{padding:clamp(20px,2.6vw,30px);display:grid;gap:18px;width:min(560px,100%)}
.kt-sub{color:var(--muted);font-size:.9rem}
.kt-terms{min-width:0}
.kt-track{display:flex;flex-wrap:wrap;gap:8px}
.term{font:400 .78rem/1.2 var(--ff-mono);color:var(--fg);background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:9px 14px;min-height:40px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.term:hover{border-color:var(--fg)}
.term[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.kt-out{background:color-mix(in srgb,var(--bg) 65%,transparent);border-radius:16px;padding:20px;display:grid;gap:14px}
.kt-row{display:grid;gap:6px;justify-items:start}
.kt-from{font-family:var(--ff-mono);font-size:.95rem;white-space:normal}
.kt-to{font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.35;letter-spacing:-.01em;min-height:calc(1.35em * 5);overflow-wrap:anywhere}
@media (min-width:1100px){.kt-to{min-height:calc(1.35em * 4)}}
.kt-morph{display:block;width:100%;height:24px;overflow:visible}
.kt-morph path{fill:none;stroke:var(--fg);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kt-foot{font-size:.9rem;color:var(--muted)}
.kt-foot a{color:var(--fg);font-weight:500}
.touch-only{display:none}
@media (hover:none) and (pointer:coarse){.touch-only{display:inline}}
@media (max-width:760px){
  .kt-terms{overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(20px,2.6vw,30px));padding-inline:clamp(20px,2.6vw,30px);padding-block:2px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)}
  .kt-terms::-webkit-scrollbar{display:none}
  .kt-terms.is-drag{overflow:hidden}
  .kt-track{flex-wrap:nowrap;width:max-content}
  .term{flex:none}
}

.process{height:100vh;height:100svh;display:flex;align-items:center}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative;width:min(520px,100%)}
.steps-line{position:absolute;left:28px;top:24px;bottom:24px;width:4px;overflow:visible;pointer-events:none}
.steps-line path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
.step{display:grid;grid-template-columns:56px 1fr;gap:4px 18px;align-items:start;padding:14px 18px 14px 0;border-radius:18px;transition:background-color .3s}
.step.is-on{background:var(--glass)}
.step-n{grid-row:span 2;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--bg);color:var(--muted);font-family:var(--ff-mono);font-size:.85rem;position:relative;z-index:1;transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s}
.step.is-on .step-n{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg);box-shadow:0 0 18px 2px color-mix(in srgb,var(--glow) 60%,transparent)}
.step h3{font-size:1.6rem;font-weight:800;letter-spacing:-.04em;padding-top:10px}
.step p{max-width:40ch;color:var(--muted)}
.step.is-on p{color:var(--fg)}
.process-grid{display:grid;gap:30px;width:100%}

.contact{padding-block:18vh 10vh}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,80px);align-items:start}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}
.contact-copy{display:grid;gap:22px;justify-items:start}
.mail-box{display:grid;gap:10px;width:100%;padding-top:20px;margin-top:6px;border-top:1px solid var(--line)}
.mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.mail{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.25rem,1rem + 1vw,1.7rem);letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.form-panel{padding:clamp(22px,3vw,38px);min-width:0}
.form-head{display:grid;gap:6px;margin-bottom:22px}
.form-head h3{font-size:1.7rem;font-weight:800;letter-spacing:-.045em}
.form-head p{color:var(--muted)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.field.wide,.form-foot,.summary{grid-column:1/-1}
label,legend{font-weight:500;font-size:.88rem;padding:0}
legend{margin-bottom:8px}
.opt{font-weight:400;color:var(--muted)}
input[type="text"],input[type="email"],textarea{width:100%;font:400 1rem/1.5 var(--ff-body);color:var(--fg);background:color-mix(in srgb,var(--bg) 75%,transparent);border:1px solid var(--line-strong);border-radius:14px;padding:12px 16px;min-height:50px;transition:border-color .2s,box-shadow .2s}
textarea{resize:vertical;min-height:140px}
input[type="text"]:focus,input[type="email"]:focus,textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 45%,transparent)}
::placeholder{color:var(--muted);opacity:.85}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--danger)}
.err{color:var(--danger);font-size:.85rem;font-weight:500}
.hint{color:var(--muted);font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-r{position:relative;display:inline-flex}
.chip-r input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip-r span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;font-size:.88rem;font-weight:500;transition:background-color .2s,border-color .2s,color .2s}
.chip-r:hover span{border-color:var(--fg)}
.chip-r input:checked + span{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.chip-r input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.form-foot{display:grid;gap:12px;justify-items:start}
.form-note{font-size:.85rem;color:var(--muted)}
.summary{border:1px solid var(--danger);border-radius:14px;padding:14px 16px}
.summary h3{font-family:var(--ff-body);font-size:.95rem;font-weight:600}
.summary ul{margin:8px 0 0;padding-left:18px}
.summary a{color:var(--danger);font-weight:500}
.done{display:grid;gap:14px}
.done h3{font-size:1.6rem;font-weight:800;letter-spacing:-.04em}
.done pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;background:color-mix(in srgb,var(--bg) 75%,transparent);border-radius:14px;padding:14px;font:400 .85rem/1.55 var(--ff-mono)}
.done .row{display:flex;flex-wrap:wrap;gap:10px}

/* Anfrage: eine Frage nach der anderen */
.lead-perks{display:flex;flex-wrap:wrap;gap:8px 18px;margin:4px 0 0;padding:18px 0 0;list-style:none;border-top:1px solid var(--line);width:100%;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lead-perks li{display:inline-flex;align-items:center;gap:8px}
.lead-perks li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 1px color-mix(in srgb,var(--glow) 70%,transparent)}
.lead-form{display:grid;gap:18px}
.lead-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.lead-count{margin:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lead-count b{color:var(--fg);font-weight:500}
.lead-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 2px;color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.lead-back:hover{color:var(--fg)}
.lead-bar{height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.lead-bar i{display:block;height:100%;background:var(--accent);box-shadow:0 0 12px var(--glow);transform:scaleX(.25);transform-origin:0 50%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.lead-steps{min-height:clamp(210px,24vw,250px);display:grid;align-content:start}
.lead-steps>.lead-step{grid-area:1/1}
.lead-step{display:grid;gap:14px;align-content:start;min-width:0}
.lead-step[hidden]{display:none}
.lead-q{display:block;font:800 clamp(1.45rem,1.1rem + 1.4vw,2.1rem)/1.12 var(--ff-display);letter-spacing:-.045em;color:var(--fg);padding-bottom:4px}
.lead-form .lead-in{width:100%;font:400 1.15rem/1.45 var(--ff-body);color:var(--fg);background:transparent;border:0;border-bottom:1.5px solid var(--line-strong);border-radius:0;padding:12px 2px;min-height:56px;transition:border-color .25s,box-shadow .25s}
.lead-form textarea.lead-in{resize:none;min-height:96px}
.lead-form .lead-in:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 12px 18px -16px var(--glow)}
.lead-form .lead-step.is-invalid .lead-in{border-bottom-color:var(--danger)}
.lead-chips .chip-r span{min-height:36px;padding:0 14px;font-size:.82rem}
.lead-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.lead-foot .btn[disabled]{opacity:.6;pointer-events:none}
.lead-skip{background:none;border:0;padding:8px 2px;color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.lead-skip:hover{color:var(--fg)}
.lead-enter{margin:0 0 0 auto;font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.lead-enter kbd{font:inherit;padding:3px 7px;border:1px solid var(--line-strong);border-radius:6px;margin-left:4px}
@media (hover:none),(max-width:560px){.lead-enter{display:none}}
.lead-done{justify-items:start;gap:16px;padding:8px 0}
.lead-done h3{font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);letter-spacing:-.05em}
.lead-done p{color:var(--muted);max-width:42ch}
.lead-check{width:58px;height:58px;display:block}
.lead-check svg{width:100%;height:100%;overflow:visible}
.lead-check circle{fill:none;stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 0 6px var(--glow))}
.lead-check path{fill:none;stroke:var(--fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.faq{padding-block:10vh 16vh}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:920px){.faq-grid{grid-template-columns:1fr}}
.faq-list{padding:6px clamp(20px,2.6vw,30px)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:last-child{border-bottom:0}
.faq-list details.is-flipping{overflow:hidden}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;min-height:44px;font-family:var(--ff-display);font-weight:700;font-size:1.15rem;letter-spacing:-.03em;line-height:1.25}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:linear-gradient(var(--fg),var(--fg)) center/10px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) center/1.5px 10px no-repeat;transition:transform .35s,background-color .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 0 22px;max-width:60ch;color:var(--muted)}

/* ---------- Fuß ---------- */
.foot{position:relative;z-index:2;padding-block:clamp(60px,8vw,104px) calc(96px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.foot-inner{display:grid;gap:14px}
.foot-mark{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:.14em;font-family:var(--ff-display);font-weight:800;font-size:clamp(3.6rem,1.4rem + 10vw,11rem);line-height:.9;letter-spacing:-.06em;margin:0}
.foot-mark .brand-ki{color:var(--fg)}
/* Wasser-Effekt: Text wird in WebGL gespiegelt, das Original bleibt für Screenreader und Auswahl im DOM */
#ink{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none;mix-blend-mode:difference;display:block}
#liquid-layer{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;display:block}
.liq-on,.liq-on *{-webkit-text-fill-color:transparent!important;filter:none!important;text-shadow:none!important;background:none!important}
.liq-on .strike::after{opacity:0}
.foot-tag{font-family:var(--ff-mono);font-size:.8rem;color:var(--muted)}
.foot-hint{opacity:0;transition:opacity .4s}
.foot.has-liquid .foot-hint{opacity:1}
@media (hover:none){.foot-hint{display:none}}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.foot-row nav{display:flex;gap:22px}
.foot a{color:var(--fg);text-underline-offset:3px}

/* ---------- Reise wie bei Active Theory: Intro → Durchflug → Aussage → Karussell ---------- */
.intro{height:100vh;height:100svh;position:relative}
.intro-hint{position:absolute;left:50%;bottom:calc(var(--hint-b,156px) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);color:var(--fg);letter-spacing:.02em;display:flex;align-items:center;gap:10px;font-size:.78rem}
.intro-play{position:absolute;left:50%;bottom:calc(120px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);color:var(--muted);text-align:center;width:max-content;max-width:calc(100% - 32px);white-space:normal}

.intro-hint::after{content:"";width:1px;height:18px;background:currentColor;animation:hintDrop 1.8s cubic-bezier(.6,0,.2,1) infinite;transform-origin:top}
@keyframes hintDrop{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.statement{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:calc(var(--hud-h) + 40px) 110px}
.statement-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.7fr);gap:clamp(24px,4vw,72px);align-items:end;width:100%}
.st-left{display:grid;gap:clamp(14px,2vw,26px);min-width:0}
.statement .hero-mark{font-size:clamp(3.4rem,.4rem + 12.6vw,14rem)}
.statement h1.hero-title{font-size:clamp(1.6rem,1rem + 2.2vw,3rem);max-width:none}
.st-right{display:grid;gap:18px;justify-items:start;padding-bottom:.6em}
.st-right .lead{font-size:.98rem;max-width:34ch}
.st-right .hero-tag{margin:0;color:var(--fg)}
@media (max-width:860px){.statement-grid{grid-template-columns:1fr;align-items:start}.statement{align-items:flex-start}}
.work{height:100vh;height:100svh;position:relative}
.work-ui{position:absolute;inset:0;pointer-events:none;padding:calc(var(--hud-h) + 30px) var(--gutter) 110px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.work-list{display:grid;gap:14px;pointer-events:auto;max-width:320px}
.topics{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.topics button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:6px 0;font-family:var(--ff-body);font-weight:700;font-size:.8rem;letter-spacing:-.005em;text-transform:uppercase;color:var(--muted);transition:color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.topics button:hover,.topics button[aria-current="true"]{color:var(--fg);transform:translateX(6px)}
.topics button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.topics .tn{font-family:var(--ff-mono);font-weight:400;font-size:.72rem;color:var(--muted)}
.topics .ta{font-family:var(--ff-mono);font-weight:400}
.work-now{display:grid;gap:6px;justify-items:end;text-align:right;color:var(--fg)}
.work-now span:last-child{color:var(--muted)}
@media (max-width:760px){
  .work-ui{flex-direction:column;align-items:stretch;justify-content:flex-end;padding-bottom:calc(150px + env(safe-area-inset-bottom,0px));padding-inline:0}
  .work-list{max-width:none;gap:8px}.work-list .eyebrow{padding-inline:16px}
  .topics{display:flex;gap:8px;overflow-x:auto;padding:4px 16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 24px),transparent)}
  .topics::-webkit-scrollbar{display:none}
  .topics button{white-space:nowrap;padding:10px 14px;border:1px solid var(--line-strong);border-radius:999px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
  .topics button:hover,.topics button[aria-current="true"]{transform:none;background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
  .topics button[aria-current="true"] .tn{color:var(--btn-fg)}
  .topics .ta{display:none}
  .work-now{justify-items:start;text-align:left;padding-inline:16px}
}

/* Detail: Karte füllt den Bildschirm, Inhalt links */
.detail{position:fixed;inset:0;z-index:25;pointer-events:none}
.detail > *{pointer-events:auto}
.detail-top{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + var(--hud-h) + 8px);display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.detail-top > *{pointer-events:auto}
.detail-close{background:var(--bg);display:inline-flex;align-items:center;gap:8px}
.detail-hint{color:var(--fg);position:absolute;left:50%;transform:translateX(-50%)}
.detail-num{color:var(--fg)}
.detail-panel{position:absolute;left:var(--gutter);top:calc(env(safe-area-inset-top,0px) + var(--hud-h) + 64px);bottom:calc(env(safe-area-inset-bottom,0px) + 90px);width:min(640px,calc(100% - 2 * var(--gutter)));overflow:auto;overscroll-behavior:contain;padding:clamp(22px,3vw,38px);scrollbar-width:thin}
.detail-panel:focus{outline:none}
.topic{display:grid;gap:18px;justify-items:start}
.detail .topic-h{font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem)}
.detail .svc{width:auto;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.detail .contact-grid,.detail .faq-grid{grid-template-columns:1fr;gap:28px}
.detail .form-panel{padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.detail .faq-list{padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;width:100%}
.detail .kt{width:100%}
.detail .process-grid{gap:22px}
.detail .step.is-on{background:color-mix(in srgb,var(--bg) 55%,transparent)}
@media (max-width:760px){.detail-panel{top:42vh;bottom:0;left:0;width:100%;border-radius:22px 22px 0 0;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}.detail-hint{display:none}}

/* ---------- Rechtliches ---------- */
dialog.legal{border:0;padding:0;border-radius:22px;background:var(--bg);color:var(--fg);width:min(640px,calc(100vw - 32px));max-height:min(82vh,760px);overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.4)}
dialog.legal::backdrop{background:rgba(18,17,16,.5)}
.legal-inner{padding:clamp(22px,3vw,34px);display:grid;gap:10px}
.legal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.legal h2{font-size:1.8rem}
.legal h3{font-size:1rem;font-weight:600;margin-top:12px}
.todo{background:color-mix(in srgb,var(--glow) 55%,transparent);color:#1A1816;padding:10px 12px;border-radius:10px;font-size:.9rem;font-weight:500}
.lang-note:empty{display:none}

/* ---------- Effekte ---------- */
.ripple{position:fixed;z-index:15;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1px solid var(--accent);pointer-events:none}
.burst{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.burst i{position:absolute;width:6px;height:14px;margin:-7px 0 0 -3px;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Partner ---------- */
.partners{position:relative;z-index:2;padding-block:clamp(72px,10vw,140px) clamp(56px,8vw,110px);border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.partners-head{display:grid;gap:14px;max-width:44rem;margin-bottom:clamp(28px,4vw,48px)}
.partners-title{margin:0;font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,1.2rem + 4vw,4.6rem);line-height:.95;letter-spacing:-.045em;text-wrap:balance}
.partners-lead{margin:0;color:var(--muted);font-size:1.05rem;max-width:36rem}
.partner-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.partner-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.partner-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.partner-card p{margin:0}
.partner-card > p:not(.chip){color:var(--muted);max-width:34rem}
.partner-name{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .22em;font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,1.3rem + 2.8vw,3.6rem);line-height:.92;letter-spacing:-.06em}
.partner-name .pn-sub{flex-basis:100%;font-size:.42em;letter-spacing:-.03em;line-height:1.1;margin-top:.12em}
.mq-everlast .mq-sub,.mq-kaiser .mq-sub,.mq-mikey .mq-sub,.mq-kiler .mq-sub{margin-left:.1em}
.partner-link{margin-top:auto}
@media (min-width:761px){.partner-list > .partner-card:last-child:nth-child(odd){grid-column:1 / -1}}
@media (max-width:760px){.partner-list{grid-template-columns:1fr}}


/* ---------- Chat: sitzt oben rechts direkt unter „Ton an/aus“ ---------- */
.chat-dock{position:fixed;z-index:21;right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 70px);transition:opacity .4s,visibility .4s}
.is-detail .chat-dock,.preloader:not([hidden]) ~ .chat-dock{opacity:0;visibility:hidden}
.bot-peek{position:absolute;right:25px;top:-46px;width:170px;height:190px;z-index:-1;pointer-events:none}
.bot-peek canvas{display:block;width:100%;height:100%}
.bot-bubble{position:absolute;right:196px;top:6px;margin:0;width:max-content;max-width:min(260px,calc(100vw - 230px));padding:12px 16px;border-radius:18px 18px 4px 18px;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid color-mix(in srgb,var(--bot-glow,var(--glow)) 55%,var(--line-strong));box-shadow:0 18px 40px -22px rgba(0,0,0,.5),0 0 22px -6px color-mix(in srgb,var(--bot-glow,var(--glow)) 60%,transparent);font:600 .95rem/1.35 var(--ff-body);color:var(--fg);opacity:0;transform:translateX(10px) scale(.92);transform-origin:right bottom;transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.bot-bubble:empty{display:none}
.bot-bubble.on{opacity:1;transform:none}
.chat-fab{position:relative;display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:50%;cursor:pointer;color:var(--fg);border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent),0 22px 44px -22px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.chat-fab:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.chat-fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chat-fab[aria-expanded="true"]{background:var(--fg);color:var(--bg)}
.chat-consent{position:absolute;right:0;top:calc(100% + 12px);width:min(360px,calc(100vw - 2 * var(--gutter)));padding:20px 20px 18px;border-radius:20px;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line-strong);box-shadow:0 30px 60px -30px rgba(0,0,0,.55);font-size:.9rem;line-height:1.5;color:var(--fg)}
.chat-consent h2{margin:0 0 8px;font:700 1.02rem/1.25 var(--ff-display);letter-spacing:-.01em}
.chat-consent p{margin:0 0 14px;color:var(--muted)}
.chat-consent .row{display:flex;flex-wrap:wrap;gap:10px}
.chat-consent .btn{min-height:44px;padding:0 20px}
.chat-consent .ghost{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);font:500 .92rem/1 var(--ff-body);cursor:pointer}
.chat-consent a{color:var(--fg)}
/* eigene Blase statt der Botpress-Blase (öffnet/schließt per Schnittstelle) */
.bpFab{display:none!important}
@media (max-width:820px){.chat-dock{top:calc(env(safe-area-inset-top,0px) + 66px)}.chat-fab{width:46px;height:46px}.bot-peek{width:140px;height:160px;right:23px;top:-40px}.bot-bubble{right:160px;top:2px;max-width:calc(100vw - 190px);font-size:.86rem}}

/* Partner-Logos (von den Websites der Partner übernommen) */
.logo-everlast{--logo:url(../assets/img/partner-everlast.webp)}
.logo-kaiser{--logo:url(../assets/img/partner-kaiser.webp)}
.logo-mikey{--logo:url(../assets/img/partner-mikey.webp)}
.logo-kiler{--logo:url(../assets/img/partner-kiler.webp)}
.logo-kaiser{--logo-w:1}.logo-everlast{--logo-w:5.7}.logo-mikey{--logo-w:5.3}.logo-kiler{--logo-w:4.5}
.logo-plate{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:14px;background:radial-gradient(120% 140% at 30% 0%,#2a2b30 0%,#121215 55%,#0a0a0c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.6),0 10px 24px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05)}
.logo-plate::before{content:"";display:block;height:var(--lh,30px);width:calc(var(--lh,30px) * var(--logo-w,4));background:var(--logo) center/contain no-repeat}
.logo-plate::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%) 0 0/250% 100%;transition:background-position 1.1s cubic-bezier(.2,.8,.2,1)}
.partner-logo{--lh:clamp(24px,2.2vw,32px);padding:16px 22px}
.partner-logo.logo-kaiser{--lh:clamp(40px,3.6vw,52px);padding:10px}
.partner-card:hover .logo-plate::after{background-position:100% 0}
.partner-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;width:100%}
.mq-plate{--lh:clamp(22px,.9rem + 1.3vw,38px);padding:clamp(12px,1.2vw,18px) clamp(18px,1.8vw,28px);border-radius:14px}
.mq-plate.logo-kaiser{--lh:clamp(38px,1.6rem + 2vw,62px);padding:6px}
@media (prefers-reduced-motion:reduce){.logo-plate::after{transition:none}}

/* Logo-Band: läuft endlos, reagiert aufs Scrollen */
.partner-band{position:relative;z-index:2;padding-block:clamp(22px,3vw,36px) 0;border-block:1px solid var(--line);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.band-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.band-more{font-size:.9rem}
.marquee{position:relative;overflow:hidden;margin:0;padding-block:clamp(14px,2vw,24px) clamp(22px,3vw,34px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:mq-run 42s linear infinite;will-change:transform}
.marquee-group{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-shrink:0}
.mq-item{display:flex;align-items:center;padding-inline:clamp(26px,4vw,64px);position:relative}
.mq-item::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px 1px color-mix(in srgb,var(--glow) 80%,transparent);opacity:.8}
.mq-logo{display:inline-flex;align-items:baseline;gap:.4em;white-space:nowrap;font-family:var(--ff-display);font-weight:800;font-size:clamp(1.5rem,1rem + 2.2vw,2.9rem);line-height:1;letter-spacing:-.045em;color:var(--fg);opacity:.85;transition:opacity .4s}
.mq-sub{font-family:var(--ff-body);font-weight:700;font-size:.34em;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.marquee:hover .mq-logo{opacity:.8}
@keyframes mq-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee-group + .marquee-group{display:none}.marquee-track{width:auto;justify-content:center}.marquee-group{flex-wrap:wrap;justify-content:center}}
@media (prefers-reduced-motion:reduce){.partner-card,.partner-card:hover{transition:none;transform:none}}
@media (max-width:760px){.intro{--hint-b:186px}}

/* ---------- Intro: Gerät im Kachelraum (js/intro.js) ---------- */
html.is-intro{overflow:hidden}
.is-intro .preloader{display:none}
.is-intro .hud,.is-intro .chat-dock,.is-intro #liquid-layer,.is-intro .crt{visibility:hidden}
.intro-stage{position:fixed;inset:0;z-index:30;background:#050505;color:#f4f1ec;overflow:hidden;--in-x:clamp(20px,4vw,56px)}
.intro-stage[data-hover="screen"],.intro-stage[data-hover="knob"],.intro-stage[data-hover="button"]{cursor:pointer}
#intro-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.in-hud{position:absolute;left:var(--in-x);right:var(--in-x);top:calc(env(safe-area-inset-top,0px) + 22px);display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:2}
.in-brand{font-family:var(--ff-display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.in-ctl{display:flex;gap:22px;align-items:center}
.in-btn{background:none;border:0;color:#f4f1ec;font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px 0;opacity:.85;transition:opacity .3s;display:inline-flex;align-items:center;gap:10px}
.in-btn:hover{opacity:1}
.in-btn .bars{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.in-btn .bars i{width:2px;height:3px;background:currentColor;transition:height .3s}
.in-btn[aria-pressed="true"] .bars i{animation:inBars 1s ease-in-out infinite}
.in-btn[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.15s}.in-btn[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.3s}.in-btn[aria-pressed="true"] .bars i:nth-child(4){animation-delay:.45s}
@keyframes inBars{0%,100%{height:3px}50%{height:10px}}
.in-tag{position:absolute;left:0;right:0;top:19%;text-align:center;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:#d8d2c8;margin:0;z-index:2;pointer-events:none}
.in-center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;gap:18px;z-index:2;pointer-events:none}
.in-load{display:grid;place-items:center;gap:10px}
.in-s{font-family:var(--ff-display);font-weight:800;font-size:2.2rem;line-height:1;animation:inSpin 2.6s linear infinite;display:inline-block;color:#f4f1ec}
@keyframes inSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.in-pct{font-size:2.6rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.in-load-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#a29b90}
.in-gate{display:flex;gap:14px;pointer-events:auto;flex-wrap:wrap;justify-content:center}
.in-start{background:transparent;border:1px solid rgba(244,241,236,.35);color:#f4f1ec;font:inherit;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border-radius:999px;cursor:pointer;transition:border-color .3s,background .3s}
.in-start:hover{border-color:#f4f1ec;background:rgba(244,241,236,.08)}
.in-skip{position:absolute;right:var(--in-x);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(22px,4.5vh,44px));z-index:5;overflow:hidden;
  display:inline-flex;align-items:center;gap:14px;padding:15px 18px 15px 26px;border-radius:999px;
  background:rgba(8,8,10,.46);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(244,241,236,.62);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 10px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff;font:inherit;font-size:.82rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .45s ease,visibility .45s,transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .3s}
.in-skip.is-on{opacity:1;visibility:visible;transform:none}
.in-skip:hover,.in-skip:focus-visible{outline:none;border-color:#fff;background:rgba(255,42,28,.16);box-shadow:0 0 0 1px rgba(255,42,28,.45),0 0 34px rgba(255,42,28,.35),0 10px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.in-skip-txt{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px}
.in-skip-arr{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f4f1ec;color:#0a0a0a;font-size:.95rem;letter-spacing:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.in-skip:hover .in-skip-arr,.in-skip:focus-visible .in-skip-arr{transform:translateX(4px);background:#ff2a1c;color:#fff}
.in-skip-key{position:relative;z-index:1;font-size:.62rem;letter-spacing:.12em;padding:4px 7px;border:1px solid rgba(244,241,236,.35);border-radius:6px;color:rgba(244,241,236,.75)}
.in-skip-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(244,241,236,.14);pointer-events:none}
.in-skip-bar i{position:absolute;inset:0;background:#ff2a1c;transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px #ff2a1c}
@media (hover:none),(max-width:640px){.in-skip-key{display:none}}
@media (max-width:640px){.in-skip{left:50%;right:auto;transform:translate(-50%,8px);padding:13px 14px 13px 22px;font-size:.76rem}.in-skip.is-on{transform:translate(-50%,0)}}
.in-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);text-align:center;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#a29b90;margin:0;z-index:2;pointer-events:none}
@media (max-width:760px){.in-tag{top:14%;font-size:.66rem}.in-brand{font-size:1rem}.in-btn{font-size:.62rem;letter-spacing:.1em}.in-ctl{gap:14px}}
@media (prefers-reduced-motion:reduce){.intro-stage{display:none}}
/* ---------- Schritt 5: Hover-Zustände 0.4 s, power2.out; Masken-Blenden ---------- */
.btn,.link,.ctl,.nav a,.term,.topics button,.faq summary,.copy,.chat-fab,.in-btn,.in-start,.logo-plate,.partner-card{transition-duration:.4s;transition-timing-function:cubic-bezier(.33,1,.68,1)}
.btn,.link::after,.term,.topics button,.faq summary{transition-property:color,background-color,border-color,box-shadow,transform,opacity}
.ln{overflow:hidden}
/* ---------- Schritt 6: UI-Texte konsequent Monospace, klein, mit viel Abstand; großzügiger Weißraum ---------- */
.mono,.hud,.nav a,.eyebrow,.chapter-label,.coords,.fold,.palette-btn,.intro-hint,.intro-play,.pl-row,.c-label,.term,.tn,.step-n,.copy,.brand-sub,.band-head .eyebrow{font-family:var(--ff-mono);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.mono,.eyebrow,.chapter-label,.coords,.fold,.palette-btn,.intro-play,.brand-sub{font-size:.68rem}
.hud{font-size:.68rem}
.nav a{font-size:.68rem;letter-spacing:.16em}
.hud-top{padding-top:calc(env(safe-area-inset-top,0px) + 22px)}
.hud-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
.hud-bottom .hud-left{display:grid;gap:12px}
.intro-hint{letter-spacing:.2em}
.intro-play{letter-spacing:.16em;line-height:1.9}
.eyebrow{margin-bottom:1.6em}
.partners,.contact,.faq,.translator{padding-block:clamp(120px,18vh,220px)}
.wrap{padding-inline:var(--gutter)}
.foot{padding-block:clamp(96px,12vw,160px) calc(120px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px){.hud,.mono,.eyebrow,.chapter-label{font-size:.62rem;letter-spacing:.12em}}

/* ---------- Partner & Kunden als 3D-Glas-Karussell um das S (js/scene.js) ---------- */
.partner-3d .partner-band{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent;min-height:clamp(420px,78vh,760px);display:flex;flex-direction:column}
.partner-3d .partner-band .marquee{opacity:0;pointer-events:none;margin-top:auto} /* bleibt für Screenreader/ohne 3D, ist aber unsichtbar */
@media (prefers-reduced-motion:reduce){.partner-3d .partner-band{min-height:0}.partner-3d .partner-band .marquee{opacity:1}}
.partner-3d .partner-band{cursor:grab;touch-action:pan-y}
.is-carousel-drag,.is-carousel-drag *{cursor:grabbing!important;user-select:none}

/* ---------- Manifest wie ein Werbespot: Schlüsselwörter leuchten auf (js/app.js) ---------- */
@property --kw{syntax:'<number>';inherits:false;initial-value:0}
.manifest-text .kw{color:color-mix(in srgb,color-mix(in srgb,var(--glow) 62%,#8a4f12) calc(var(--kw,0) * 100%),var(--fg));text-shadow:0 0 calc(var(--kw,0) * 28px) color-mix(in srgb,var(--glow) calc(var(--kw,0) * 55%),transparent)}

/* ---------- Partner-Karte: Eintauchen (Kamera fliegt in die Karte) und Landung beim Text ---------- */
.dive-veil{position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 30% 0%,#2c2d33 0%,#121215 55%,#08080a 100%)}
.dive-logo{display:block;width:min(56vw,620px);aspect-ratio:1024/640;background:center/contain no-repeat;opacity:0;will-change:transform,opacity}
.is-diving,.is-diving body{cursor:progress}
.partner-card.is-landed{position:relative}
.partner-card.is-landed::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px var(--glow),0 0 42px -6px color-mix(in srgb,var(--glow) 70%,transparent);
  animation:card-landed 2.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes card-landed{0%{opacity:0}12%{opacity:1}70%{opacity:.8}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.partner-3d .partner-band .marquee{pointer-events:auto}.dive-veil{display:none}}
.marquee .mq-plate{cursor:pointer}

/* ---------- Intro: „Scrollen zum Eintauchen“ gut sichtbar – leuchtend weiß, Maus-Symbol mit laufendem Rad, springender Pfeil ---------- */
.in-hint{bottom:calc(env(safe-area-inset-bottom,0px) + clamp(28px,5vh,56px));display:flex;flex-direction:column;align-items:center;gap:14px;
  font-size:clamp(.82rem,.62rem + .45vw,1.05rem);font-weight:400;letter-spacing:.3em;color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.8),0 0 28px rgba(255,255,255,.45);animation:hint-glow 2.4s ease-in-out infinite}
.in-hint::before{content:"";width:26px;height:42px;border:2px solid rgba(255,255,255,.92);border-radius:14px;
  box-shadow:0 0 14px rgba(255,255,255,.55),inset 0 0 8px rgba(255,255,255,.25);
  background:radial-gradient(circle,#fff 0 2.6px,transparent 3.2px) no-repeat;background-size:8px 8px;background-position:50% 7px;
  animation:hint-wheel 1.6s cubic-bezier(.6,0,.4,1) infinite}
.in-hint::after{content:"";width:11px;height:11px;margin-top:-4px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);filter:drop-shadow(0 0 6px rgba(255,255,255,.8));animation:hint-arrow 1.6s ease-in-out infinite}
@keyframes hint-wheel{0%{background-position:50% 7px}55%,100%{background-position:50% 24px}}
@keyframes hint-arrow{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(7px) rotate(45deg)}}
@keyframes hint-glow{0%,100%{text-shadow:0 0 10px rgba(255,255,255,.8),0 0 28px rgba(255,255,255,.45)}50%{text-shadow:0 0 14px rgba(255,255,255,1),0 0 44px rgba(255,255,255,.7)}}
@media (prefers-reduced-motion:reduce){.in-hint,.in-hint::before,.in-hint::after{animation:none}}

/* Während des Intros keine Tinten-Spur der Startseite über dem Laptop (Ziehen dreht dort den Laptop / den Datenraum) */
.is-intro #ink{display:none}

/* Übergang Röntgenfilm → Webseite: Kachelraster, das sich auflöst */
.film-out{position:fixed;inset:0;z-index:2147482000;display:grid;pointer-events:none;overflow:hidden}
.film-out i{display:grid;place-items:center;background:#000;color:#ff4a38;font:400 14px/1 "DM Mono",monospace;font-style:normal}

/* Startbildschirm: Mensch trifft Maschine – zwei Hände als Tiefenebenen, reagieren auf die Maus */
.in-cover{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:clamp(10px,2vh,22px);padding-bottom:clamp(64px,11vh,120px);
  background:radial-gradient(ellipse 80% 70% at 50% 40%,#E9E2D8 0%,#E3DBCF 55%,#D9D0C2 100%);color:#1A1816;overflow:hidden}
.in-cover::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(26,24,22,.06) 1px,transparent 1.2px);background-size:3px 3px}
.in-cover-foot{position:relative;display:grid;place-items:center;min-height:56px;width:min(88vw,360px)}
.in-prog{position:absolute;left:18%;right:18%;top:50%;height:1px;background:rgba(26,24,22,.12);overflow:hidden;transition:opacity .5s}
.in-prog i{position:absolute;inset:0;background:linear-gradient(90deg,#B98A4B,#E3AF68);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 8px rgba(227,175,104,.7)}
.in-prog.is-done{opacity:0}
.in-cover .in-gate{display:flex;align-items:center;gap:18px;pointer-events:auto;flex-wrap:wrap;justify-content:center}
.in-cover .in-gate[hidden]{display:none}
.in-cover .in-start{border:0;cursor:pointer;border-radius:999px;transition:transform .4s cubic-bezier(.33,1,.68,1),background-color .3s,color .3s,box-shadow .4s}
.in-cover .in-start-main{display:inline-flex;align-items:center;gap:12px;background:#1A1816;color:#F5F2EE;font:500 .98rem/1 var(--ff-body);letter-spacing:-.005em;text-transform:none;padding:16px 26px 16px 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 12px 30px -12px rgba(26,24,22,.55)}
.in-start-main::before{content:"";width:28px;height:28px;border-radius:50%;flex:none;
  background:#E3AF68 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 9.2v9.6l8-4.8z' fill='%231A1816'/%3E%3C/svg%3E") center/100% no-repeat}
.in-cover .in-start-main:hover,.in-cover .in-start-main:focus-visible{outline:none;transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 36px -14px rgba(26,24,22,.6),0 0 0 3px rgba(227,175,104,.45)}
.in-cover .in-start-alt{border:0;background:none;color:#6E675E;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:10px 4px;text-decoration:underline;text-decoration-color:rgba(26,24,22,.2);text-underline-offset:5px}
.in-cover .in-start-alt:hover,.in-cover .in-start-alt:focus-visible{background:none;outline:none;color:#1A1816;text-decoration-color:#B98A4B}
.in-cover-skip{position:absolute;right:var(--in-x);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(20px,4vh,40px));background:none;border:0;cursor:pointer;
  color:#6E675E;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:10px 0;transition:color .3s}
.in-cover-skip span:last-child{display:inline-block;transition:transform .35s cubic-bezier(.33,1,.68,1)}
.in-cover-skip:hover,.in-cover-skip:focus-visible{outline:none;color:#1A1816}
.in-cover-skip:hover span:last-child{transform:translateX(4px)}
@media (max-width:640px){.in-cover-skip{left:0;right:0;text-align:center}}
@media (prefers-reduced-motion:reduce){.in-logo,.in-sheen{animation:none}}
/* Überspringen-Knopf im Film: Champagner statt Rot, passend zur Marke */
.in-skip:hover,.in-skip:focus-visible{border-color:rgba(245,242,238,.9)!important;background:rgba(227,175,104,.12)!important;box-shadow:0 0 0 1px rgba(227,175,104,.45),0 0 30px rgba(227,175,104,.25),0 10px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18)!important}
.in-skip:hover .in-skip-arr,.in-skip:focus-visible .in-skip-arr{background:#E3AF68!important;color:#1A1816!important}
.in-skip-bar i{background:linear-gradient(90deg,#B98A4B,#E3AF68)!important;box-shadow:0 0 10px rgba(227,175,104,.8)!important}

.in-scene{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 40%;pointer-events:none}
.in-dust{position:absolute;inset:0;width:100%;height:100%}
.in-frame{position:absolute;left:50%;top:38%;width:max(100vw,112vh);aspect-ratio:16/9;transform-style:preserve-3d;will-change:transform;translate:-50% -48%}
@media (max-aspect-ratio:1/1){.in-frame{width:270vw;top:42%}}
.in-layer{position:absolute;will-change:transform;transform-style:preserve-3d}
.in-layer img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.in-l-robot{left:-13.542%;top:39.537%;width:63.75%;filter:drop-shadow(0 22px 26px rgba(60,48,32,.18))}
.in-l-human{left:48.906%;top:32.778%;width:64.635%;filter:drop-shadow(0 22px 26px rgba(60,48,32,.16))}
.in-spark{position:absolute;left:49.45%;top:48.1%;width:0;height:0;z-index:3;transform-style:preserve-3d;will-change:transform,opacity}
.in-spark i{position:absolute;left:-80px;top:-80px;width:160px;height:160px;border-radius:50%;opacity:var(--sp,0);
  background:radial-gradient(circle,#fff 0 5%,rgba(255,246,228,1) 9%,rgba(240,196,124,.9) 17%,rgba(222,166,90,.5) 30%,rgba(214,160,86,.18) 46%,transparent 66%);
  transform:scale(calc(.3 + var(--sp,0) * .95));box-shadow:0 0 0 0 transparent}
.in-spark i::after{content:"";position:absolute;left:50%;top:50%;width:calc(40px + var(--sp,0) * 150px);height:1.5px;translate:-50% -50%;opacity:calc(var(--sp,0) * .8);
  background:linear-gradient(90deg,transparent,rgba(255,250,240,.95),transparent);filter:blur(.4px)}
.in-title{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(8px,1.4vh,14px);text-align:center;pointer-events:none}
.in-word{margin:0;font:300 clamp(2.6rem,1.4rem + 4.2vw,5.4rem)/1 var(--ff-display);font-stretch:125%;letter-spacing:.005em;color:#1A1816}
.in-claim{margin:0;display:flex;align-items:center;gap:16px;font:400 clamp(.78rem,.62rem + .5vw,1.05rem)/1 var(--ff-mono);letter-spacing:.34em;text-transform:uppercase;color:#3B352E}
.in-claim::before,.in-claim::after{content:"";width:clamp(28px,5vw,64px);height:1px;background:rgba(26,24,22,.35)}
.in-cover-foot{margin-top:clamp(6px,1.6vh,18px)}
@media (max-width:640px){.in-claim{letter-spacing:.22em;gap:10px}.in-cover{padding-bottom:84px}}

/* Hände anklicken: Hinweis am Zeiger, Berührungs-Blitz, Botschaft in der Schrift vom Seitenende */
.in-scene .in-layer img{pointer-events:auto}
.in-cover.is-handhover{cursor:pointer}
.in-clickhint{position:fixed;left:0;top:0;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:#1A1816;color:#F5F2EE;
  font:500 .72rem/1 var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;pointer-events:none;opacity:0;scale:.85;transition:opacity .25s,scale .35s cubic-bezier(.33,1,.68,1);box-shadow:0 10px 26px -12px rgba(26,24,22,.6)}
.in-clickhint i{width:8px;height:8px;border-radius:50%;background:#E3AF68;box-shadow:0 0 0 0 rgba(227,175,104,.7);animation:inPulse 1.4s ease-out infinite}
.in-clickhint.is-on{opacity:1;scale:1}
.in-clickhint.is-touch{position:absolute;left:50%;top:calc(38% + 9vh);translate:-50% 0;opacity:1;scale:1}
@media (max-aspect-ratio:1/1){.in-clickhint.is-touch{top:calc(42% + 8vh)}}
.in-clickhint.is-touch:not(.is-on){opacity:0}
@keyframes inPulse{0%{box-shadow:0 0 0 0 rgba(227,175,104,.7)}100%{box-shadow:0 0 0 10px rgba(227,175,104,0)}}
.in-ring{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,248,236,.95);box-shadow:0 0 24px rgba(227,175,104,.9),inset 0 0 12px rgba(227,175,104,.6);opacity:0;pointer-events:none}
.in-ring.is-go{animation:inRing 1.3s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes inRing{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(22)}}
.in-msg{position:absolute;left:0;right:0;top:clamp(56px,11vh,120px);z-index:3;margin:0;padding:0 16px;text-align:center;pointer-events:none;
  font-family:var(--ff-display);font-weight:800;font-size:clamp(2.2rem,1rem + 5vw,6.2rem);line-height:.95;letter-spacing:-.06em;color:#1A1816}
.in-msg .w{display:inline-block;overflow:hidden;padding:.06em .02em .1em;vertical-align:top}
.in-msg .w > span{display:inline-block}
@media (max-aspect-ratio:1/1){.in-msg{top:clamp(40px,8vh,90px)}}

/* Start: roter Knopf + invertierter Rot-Look (wie der Filmanfang) */
.in-cover .in-start-main:hover,.in-cover .in-start-main:focus-visible,.in-cover .in-start-main.is-go{background:#c8101c;color:#fff;
  box-shadow:0 0 0 1px rgba(255,80,60,.6),0 0 26px rgba(255,42,28,.65),0 0 70px rgba(255,42,28,.35),0 14px 30px -14px rgba(120,0,0,.7)}
.in-cover .in-start-main:hover::before,.in-cover .in-start-main.is-go::before{background-color:#fff}
.in-cover .in-start-main.is-go{animation:inGo .5s ease-out}
@keyframes inGo{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.in-cover.is-inv{background:#070003 none}
.in-cover.is-inv .in-scene,.in-cover.is-inv .in-title,.in-cover.is-inv .in-msg{filter:url(#in-red)}
.in-cover.is-inv .in-dust,.in-cover.is-inv .in-cover-foot,.in-cover.is-inv .in-cover-skip,.in-cover.is-inv .in-clickhint{opacity:0;transition:opacity .15s}
.in-cover.is-inv .in-l-robot,.in-cover.is-inv .in-l-human{filter:none}
/* 3D ausgefallen (Grafikkarte/Fehler): statt eines eingefrorenen Bildes die normale Seite mit Laufband-Logos */
.no-webgl #gl{display:none}
.no-webgl .hero-mark,.no-webgl .hero-mark .hm-ki{visibility:visible}
.no-webgl .partner-band{min-height:0}
.no-webgl .partner-band .marquee{opacity:1;pointer-events:auto;margin-top:0}
/* Handy: hervorgehobene Schlüsselwörter (skaliert) dürfen die Seite nicht seitlich verbreitern */
body{overflow-x:clip}
.manifest,.chapter{overflow-x:clip}