/* =========================================================================
   PIXXWELL — Design-System
   Mischung aus Sigma-fp-II-Produktseite (Großbuchstaben, Bento, Spezifikationen,
   Hell/Dunkel-Rhythmus) und dem dunklen Index-Stil (Serif-Akzente, Reihen, Orbs).
   Alle Ressourcen lokal – keine externen Fonts/CDNs (DSGVO).
   ========================================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:"Inter Tight";src:url("../fonts/inter-tight-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* HELL (Standard) – Creme, passend zum Markenrot */
  --ink:#f5f0e8;          /* Seitengrund */
  --ink-2:#fffdf9;        /* Karten/Panels */
  --ink-3:#e9e1d5;        /* Bild-Hintergründe */
  --alt:#fffdf9;          /* Wechsel-Sektionen (Sigma-Rhythmus) */
  --paper-2:#ebe4d8;
  --fg:#1a1411;
  --fg-dim:#4f4640;
  --muted:#857a70;
  --line:rgba(26,20,17,.13);
  --hover:rgba(26,20,17,.06);
  --glass:rgba(245,240,232,.82);
  --gridline:rgba(26,20,17,.12);
  --shadow:rgba(70,30,20,.22);

  --red:#a61010;          /* Pixxwell-Markenrot */
  --red-hi:#a61010;       /* Akzent-Text (auf Hell: Markenrot) */
  --ember:#e2502a;
  --amber:#e0892e;

  --f-sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(16px,3vw,48px);
  --max:1480px;
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --head-h:64px;
  color-scheme:light;
}

/* DUNKEL – per Schalter im Footer; .dark-zone = dunkle Inseln (z. B. Video-Hero) */
[data-theme="dark"],.dark-zone,.site-head.head-dark{
  --ink:#0b0b0a;--ink-2:#131311;--ink-3:#1b1a18;--alt:#f0ebe2;--paper-2:#1b1a18;
  --fg:#ece9e1;--fg-dim:#b8b4ab;--muted:#8b8881;
  --line:rgba(236,233,225,.16);--hover:rgba(236,233,225,.08);--glass:rgba(11,11,10,.8);
  --gridline:rgba(236,233,225,.14);--shadow:rgba(0,0,0,.55);
  --red-hi:#e0392b;--ember:#ff6b3d;--amber:#f3a64a;
}
[data-theme="dark"]{color-scheme:dark;--mesh-o:.9;--mesh-o-cta:.55}
/* Im Dunkelmodus bleiben die Wechsel-Sektionen hell (wie bei Sigma) */
[data-theme="dark"] .light{
  --ink:#f0ebe2;--ink-2:#fbf8f2;--ink-3:#e3dccf;--paper-2:#e3dccf;
  --fg:#14100d;--fg-dim:#4a4842;--muted:#76736c;
  --line:rgba(11,11,10,.14);--hover:rgba(11,11,10,.06);--gridline:rgba(11,11,10,.12);--shadow:rgba(70,30,20,.22);
  --red-hi:#a61010;--ember:#e2502a;--amber:#e0892e;
}
.dark-zone{background:var(--ink);color:var(--fg)}
.site-head.head-dark{color:var(--fg)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;background:var(--ink);scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 52px);-webkit-text-size-adjust:100%}
body{margin:0;transition:background-color .4s,color .4s;background:var(--ink);color:var(--fg);font-family:var(--f-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg);color:var(--ink);padding:10px 14px;border-radius:8px;font-size:13px}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Typo-Bausteine */
.mono,.eyebrow,.kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.eyebrow{color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 22px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.kicker{color:var(--muted)}
.display{font-weight:650;text-transform:uppercase;letter-spacing:-.045em;line-height:.86;margin:0}
.display em,.h2 em,.h3 em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;color:var(--red-hi)}
.h2{font-weight:640;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;font-size:clamp(38px,6vw,96px);margin:0}
.h3{font-weight:620;text-transform:uppercase;letter-spacing:-.025em;line-height:.98;font-size:clamp(24px,2.6vw,40px);margin:0}
.lead{font-size:clamp(18px,1.7vw,26px);line-height:1.32;letter-spacing:-.018em;margin:0;max-width:760px}
.body{font-size:16px;line-height:1.6;color:var(--fg-dim);max-width:620px}
.ph{border-bottom:1px dashed currentColor;opacity:.75}
.note{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-top:14px}

/* Hell-Sektionen (Sigma-Rhythmus) */
.light{background:var(--alt);color:var(--fg)}
[data-theme="dark"] .light{background:var(--ink)}

/* ---------- Noise & Cursor ---------- */
.noise{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:var(--grain-o,.12);background-size:220px 220px;
  /* hell: dunkle Körnung (Alpha aus Rauschen), dunkel: helle Körnung */
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .07  0 0 0 0 .05  1.8 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="dark"] .noise{--grain-o:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .98  0 0 0 0 .95  1.8 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--red-hi);border:1px solid var(--red-hi);pointer-events:none;z-index:95;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .2s;opacity:0}
.cursor.on{opacity:1}
.cursor.big{width:54px;height:54px;background:transparent}

/* ---------- Header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--head-h);display:flex;align-items:center;transition:background .4s,border-color .4s,transform .45s var(--ease);border-bottom:1px solid transparent}
.site-head.scrolled{background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-color:var(--line)}
.site-head.hide{transform:translateY(-100%)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.16em;font-size:15px;text-transform:uppercase}
.logo-img{display:block;background:currentColor;-webkit-mask-position:left center;mask-position:left center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo .logo-img{height:30px;aspect-ratio:2478/707;color:var(--fg);transition:color .3s}
.logo:hover .logo-img{color:var(--red-hi)}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;border-radius:99px;color:var(--fg-dim);transition:color .25s,background .25s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg);background:var(--hover)}
.nav a[aria-current="page"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red-hi);margin-right:8px;vertical-align:1px}
.nav .ext::after{content:" ↗";opacity:.6}
.nav .btn-red,.nav .btn-red:hover{color:#fff;background:var(--red)}
.nav .btn-red:hover{background:var(--red-hi)}
[data-theme="dark"] .nav .btn-red:hover{background:#c41f14}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:13px 18px;border-radius:99px;border:1px solid var(--line);transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease);white-space:nowrap}
.btn:hover{border-color:var(--fg);transform:translateY(-1px)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi);border-color:var(--red-hi)}
.btn-light{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px) rotate(-35deg)}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);position:relative}
.menu-btn span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--fg);transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:25px}
.menu-open .menu-btn span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){top:21px;transform:rotate(-45deg)}

/* Sigma-artige Unternavigation (Sprungmarken) */
.subnav{position:sticky;top:var(--head-h);z-index:70;transition:top .45s var(--ease);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.head-hidden .subnav{top:0}
.subnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:50px}
.subnav-title{font-weight:650;text-transform:uppercase;letter-spacing:.02em;font-size:14px;white-space:nowrap}
.subnav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;border-radius:99px;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s}
.subnav a:hover,.subnav a.active{color:var(--fg);background:var(--hover)}

/* ---------- Hero (Start) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--head-h) + 40px) 0 34px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.hero-bg .fallback{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 70% 35%,rgba(166,16,16,.28),transparent 70%),
  radial-gradient(40% 40% at 85% 70%,rgba(243,166,74,.22),transparent 70%)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 0%,color-mix(in srgb,var(--ink) 50%,transparent) 26%,transparent 55%,transparent 85%,color-mix(in srgb,var(--ink) 50%,transparent))}
.hero .wrap{width:100%}
.hero .eyebrow,.hero .lead{text-shadow:0 0 18px var(--ink),0 0 4px var(--ink)}
.hero h1{font-size:clamp(64px,13.5vw,232px)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .line > span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--ease)}
.loaded .hero h1 .line > span{transform:none}
.hero h1 .line:nth-child(2) > span{transition-delay:.12s}
.hero-foot{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-meta{display:flex;justify-content:flex-end;gap:36px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-meta b{display:block;color:var(--fg);font-weight:500;margin-bottom:5px}
.scroll-cue{position:absolute;right:var(--pad);top:calc(var(--head-h) + 28px);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}
.scroll-cue::after{content:"";width:1px;height:60px;background:linear-gradient(var(--muted),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red-hi);box-shadow:0 0 0 0 rgba(224,57,43,.6);animation:pulse 2.2s infinite}
@keyframes pulse{60%{box-shadow:0 0 0 10px rgba(224,57,43,0)}100%{box-shadow:0 0 0 0 rgba(224,57,43,0)}}

/* ---------- Seiten-Hero (Unterseiten) ---------- */
.page-hero{position:relative;min-height:86svh;display:flex;align-items:flex-end;padding:calc(var(--head-h) + 60px) 0 46px;overflow:hidden;isolation:isolate}
.page-hero .wrap{width:100%}
.page-hero h1{font-size:clamp(58px,11.5vw,190px)}
.page-hero .hero-foot{grid-template-columns:1fr auto}
.page-hero .bg-media{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%}
.page-hero .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--ink) 6%,color-mix(in srgb,var(--ink) 50%,transparent) 45%,color-mix(in srgb,var(--ink) 20%,transparent) 75%,color-mix(in srgb,var(--ink) 55%,transparent))}

/* Gradient-Art (Attached-Stil, poliert): Ringe, Grid, Sweep */
.art{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.art .mesh{position:absolute;inset:-20%;filter:blur(40px) saturate(1.15);opacity:var(--mesh-o,.75);animation:meshDrift 22s ease-in-out infinite alternate;
  background:
    radial-gradient(28% 34% at 72% 34%,var(--c1,#a61010) 0%,transparent 70%),
    radial-gradient(24% 30% at 86% 62%,var(--c2,#f3a64a) 0%,transparent 70%),
    radial-gradient(30% 36% at 58% 70%,var(--c3,#3b0c1f) 0%,transparent 72%),
    radial-gradient(22% 26% at 40% 30%,var(--c4,#5c0a12) 0%,transparent 70%)}
@keyframes meshDrift{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(-3%,2%,0) rotate(6deg) scale(1.05)}100%{transform:translate3d(2%,-3%,0) rotate(-4deg) scale(1.02)}}
.art .grid{position:absolute;inset:12% -10% 8% 30%;opacity:.5;transform:perspective(900px) rotateX(66deg) rotateZ(-8deg);transform-origin:center bottom;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:linear-gradient(to left,#000 20%,transparent 95%);mask-image:linear-gradient(to left,#000 20%,transparent 95%);animation:gridDrift 24s linear infinite}
@keyframes gridDrift{to{background-position:60px 60px}}
.art .ring{position:absolute;border:1px solid var(--gridline);border-radius:50%;aspect-ratio:1}
.art .r1{width:min(50vw,780px);right:-10vw;top:8%;animation:float1 18s ease-in-out infinite}
.art .r2{width:min(30vw,480px);right:10vw;top:24%;border-color:color-mix(in srgb,var(--red-hi) 35%,transparent);animation:float2 14s ease-in-out infinite}
.art .sweep{position:absolute;width:60vw;height:1px;right:-8vw;top:40%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ember) 70%,transparent),transparent);transform:rotate(-14deg);animation:sweep 9s ease-in-out infinite}
@keyframes float1{50%{transform:translate3d(-22px,14px,0) scale(1.025)}}
@keyframes float2{50%{transform:translate3d(18px,-16px,0) scale(.97)}}
@keyframes sweep{0%,100%{transform:translate3d(0,-26px,0) rotate(-14deg);opacity:.05}50%{transform:translate3d(-9vw,80px,0) rotate(-14deg);opacity:.5}}

/* ---------- Sektionen ---------- */
.section{padding:clamp(80px,11vw,170px) 0;position:relative}
.section.tight{padding:clamp(60px,7vw,110px) 0}
.sec-head{display:grid;grid-template-columns:1fr 2fr;gap:30px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(36px,5vw,70px)}
.sec-head span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec-head span:last-child{text-align:right}

/* Statement (Sigma-Intro) */
.statement{text-align:center}
.statement .h2{font-size:clamp(40px,7.4vw,124px);max-width:1300px;margin:0 auto}
.statement .lead{margin:clamp(28px,4vw,50px) auto 0;color:inherit}
.statement .note{margin-top:28px}

/* Zwei-Spalten Bild/Text (Sigma-Wechsel) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:center}
.split + .split{margin-top:clamp(70px,9vw,140px)}
.split.flip > :first-child{order:2}
.split .media{border-radius:var(--radius);overflow:hidden;background:var(--ink-3);aspect-ratio:4/3}
.split .media img,.split .media video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.split:hover .media img{transform:scale(1.03)}
.split .copy .h3{margin-bottom:22px}
.caption{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-top:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.tag{padding:7px 10px;border:1px solid var(--line);border-radius:99px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- Video ---------- */
.player{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;aspect-ratio:16/9;isolation:isolate}
.player.full{border-radius:0;aspect-ratio:auto;height:min(92svh,56.25vw);min-height:420px}
.player video,.player img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2.4vw,34px);background:linear-gradient(to top,rgba(0,0,0,.65),transparent 50%,rgba(0,0,0,.3));transition:opacity .5s var(--ease)}
.player.playing .overlay{opacity:0;pointer-events:none}
.player .top{display:flex;justify-content:space-between;gap:20px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.player .bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.player .bottom .h3,.player .bottom .h2{color:#fff}
.play{width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .4s var(--ease),background .3s;flex:none}
.play svg{width:28%;margin-left:6%}
.player:hover .play{transform:scale(1.08);background:var(--red)}
.player .msg{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(11,11,10,.88);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:#d8d4cc;max-width:min(90%,440px);text-align:center;opacity:0;pointer-events:none;transition:opacity .3s}
.player .msg.show{opacity:1}
.player .consent{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.65);max-width:380px;line-height:1.5;margin-top:10px;text-transform:none}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.video-grid .player{aspect-ratio:16/10}
.video-grid .player .h3{font-size:clamp(20px,1.8vw,28px)}

/* ---------- Bento (Sigma) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{position:relative;grid-column:span 4;min-height:380px;border-radius:var(--radius);overflow:hidden;background:var(--ink-3);color:#fff;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:22px;transition:transform .6s var(--ease)}
.tile.w8{grid-column:span 8}.tile.w6{grid-column:span 6}.tile.w5{grid-column:span 5}.tile.w7{grid-column:span 7}
.tile.tall{min-height:520px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 55%,rgba(0,0,0,.25))}
.tile:hover img{transform:scale(1.05)}
.tile:hover{transform:translateY(-4px)}
.tile .t-top{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.tile .h3{font-size:clamp(28px,3vw,50px)}
.tile p{margin:12px 0 0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.78);max-width:420px}
.tile .arrow{position:absolute;right:22px;bottom:22px}
.arrow{width:52px;height:52px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-size:22px;transition:.4s var(--ease);flex:none}
a:hover > .arrow,a:hover .arrow{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-35deg)}

/* ---------- Index-Reihen (Attached) ---------- */
.index{border-top:1px solid var(--line);position:relative}
.row{position:relative;display:grid;grid-template-columns:56px 1fr 220px 90px;gap:16px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease),color .3s;overflow:hidden;isolation:isolate}
.row::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--fg);z-index:-1;transition:height .42s var(--ease)}
.row:hover{color:var(--ink);padding-left:16px;padding-right:16px}
.row:hover::before{height:100%}
.row .num,.row .type,.row .year{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.row:hover .num,.row:hover .type,.row:hover .year{color:color-mix(in srgb,var(--ink) 60%,transparent)}
.row:hover .title em{color:var(--ember)}
.row .title{font-size:clamp(26px,3.4vw,54px);font-weight:600;letter-spacing:-.035em;text-transform:lowercase;line-height:1}
.row .title em{font-family:var(--f-serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.row .year{text-align:right}
.preview{position:fixed;left:0;top:0;width:min(30vw,440px);aspect-ratio:16/10;border-radius:14px;overflow:hidden;pointer-events:none;z-index:85;opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-3deg);transition:opacity .3s,transform .5s var(--ease);box-shadow:0 30px 80px var(--shadow)}
.preview.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.preview img{width:100%;height:100%;object-fit:cover}

/* ---------- Labor-Karten (polierte Verläufe) ---------- */
.lab{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{position:relative;grid-column:span 4;min-height:380px;border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--ink-2);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;transition:transform .6s var(--ease),border-color .35s}
.card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ember) 55%,transparent)}
.card.w8{grid-column:span 8}.card.w7{grid-column:span 7}.card.w5{grid-column:span 5}.card.w6{grid-column:span 6}
.card.tall{min-height:520px}
.card .glow{position:absolute;inset:-25%;z-index:-2;filter:blur(26px) saturate(1.5);opacity:1;will-change:transform;transition:opacity .6s;animation:glowSpin 30s linear infinite;
  background:
    radial-gradient(30% 34% at 70% 70%,var(--c1),transparent 70%),
    radial-gradient(26% 30% at 88% 40%,var(--c2),transparent 70%),
    radial-gradient(34% 34% at 52% 96%,var(--c3),transparent 72%),
    radial-gradient(18% 22% at 62% 52%,var(--c2),transparent 70%),
    radial-gradient(40% 30% at 20% 85%,var(--c1),transparent 70%)}
@keyframes glowSpin{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
.card:hover .glow{filter:blur(28px) saturate(1.6) brightness(1.15)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--ink-2) 30%,transparent),transparent 30%,transparent 50%,color-mix(in srgb,var(--ink-2) 78%,transparent) 88%);pointer-events:none}
.card .shot{position:absolute;right:-6%;top:20%;width:72%;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px var(--shadow),0 0 0 1px var(--line);transform:perspective(1200px) rotateY(-14deg) rotateX(6deg) rotateZ(-2deg);transition:transform 1s var(--ease);z-index:-1}
.card:hover .shot{transform:perspective(1200px) rotateY(-6deg) rotateX(2deg) rotateZ(-1deg) translateY(-8px)}
.card.w8 .shot,.card.w7 .shot{width:58%;top:14%;right:4%}
.card .c-top{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.card h3{margin:0;font-size:clamp(30px,3.4vw,58px);font-weight:620;letter-spacing:-.04em;line-height:.92;text-transform:uppercase}
.card h3 em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none}
.card p{margin:12px 0 0;font-size:14.5px;line-height:1.45;color:var(--fg-dim);max-width:440px}
.card .c-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.card .arrow{border-color:color-mix(in srgb,var(--fg) 30%,transparent)}
.card h3 em{color:var(--red-hi)}
.card.no-link{cursor:default}
.card.no-link .arrow{display:none}

/* Paletten – hell (Standard) */
.p-red{--c1:#d42a1f;--c2:#ff9a6b;--c3:#f6c2ae;--c4:#a61010}
.p-ember{--c1:#ff6b3d;--c2:#f6b35c;--c3:#f9cfb2;--c4:#d42a1f}
.p-plum{--c1:#b0306f;--c2:#e0392b;--c3:#f0c2d4;--c4:#7a1a4a}
.p-amber{--c1:#f3a64a;--c2:#f7d79c;--c3:#ef9f7f;--c4:#d46a1f}
.p-ice{--c1:#5a8fbf;--c2:#a8d4ea;--c3:#d9c6e8;--c4:#2f6b9a}
.p-moss{--c1:#6f9a5f;--c2:#d5df8f;--c3:#f3d3a0;--c4:#3d6a3a}
.p-rose{--c1:#e05b78;--c2:#f6b8a4;--c3:#f7d3dc;--c4:#a8304a}
.p-steel{--c1:#8d877c;--c2:#d6d0c4;--c3:#e8c9b8;--c4:#55524c}
/* Paletten – dunkel */
[data-theme="dark"] .p-red{--c1:#a61010;--c2:#ff6b3d;--c3:#3b0c1f;--c4:#5c0a12}
[data-theme="dark"] .p-ember{--c1:#ff6b3d;--c2:#f3a64a;--c3:#a61010;--c4:#5c0a12}
[data-theme="dark"] .p-plum{--c1:#5b1a4a;--c2:#e0392b;--c3:#1d0b2b;--c4:#a61010}
[data-theme="dark"] .p-amber{--c1:#f3a64a;--c2:#e8d6a8;--c3:#7a2a0c;--c4:#a61010}
[data-theme="dark"] .p-ice{--c1:#2f4d6b;--c2:#9fc3d8;--c3:#141e2c;--c4:#f3a64a}
[data-theme="dark"] .p-moss{--c1:#3d5a3a;--c2:#c8d38a;--c3:#141b12;--c4:#f3a64a}
[data-theme="dark"] .p-rose{--c1:#d0566d;--c2:#f2b8a2;--c3:#3a0f24;--c4:#a61010}
[data-theme="dark"] .p-steel{--c1:#55524c;--c2:#c7c2b6;--c3:#1b1a18;--c4:#a61010}

/* ---------- Spezifikationen (Sigma) ---------- */
.specs{display:grid;grid-template-columns:1fr 2fr;gap:clamp(30px,5vw,90px)}
.specs dl{margin:0;border-top:1px solid var(--line)}
.specs .r{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.specs dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.specs dd{margin:0;font-size:17px;line-height:1.45}
.specs dd a{border-bottom:1px solid currentColor}

/* Feature-Liste (nummeriert) */
.features{list-style:none;margin:0;padding:0;counter-reset:f;border-top:1px solid var(--line)}
.features li{counter-increment:f;display:grid;grid-template-columns:70px 1fr 1.1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.features li::before{content:counter(f,decimal-leading-zero);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.features h3{margin:0;font-size:clamp(24px,2.6vw,40px);font-weight:620;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.features p{margin:0;color:var(--fg-dim);line-height:1.55;max-width:540px}

/* Modi / Tabs (Sigma Color-Modes) */
.modes{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,70px);align-items:stretch}
.modes > *,.split > *,.specs > *,.about > *{min-width:0}
.mode-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mode-btn{text-align:left;padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:baseline;color:var(--muted);transition:color .3s}
.mode-btn .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
.mode-btn .t{font-size:clamp(26px,3vw,46px);font-weight:620;text-transform:uppercase;letter-spacing:-.03em;line-height:1}
.mode-btn .d{grid-column:2;font-size:15px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .4s,margin .4s;color:var(--fg-dim)}
.mode-btn .d i{display:block;margin-top:10px;font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mode-btn[aria-selected="true"]{color:var(--fg)}
.mode-btn[aria-selected="true"] .d{max-height:220px;opacity:1;margin-top:12px}
.mode-btn[aria-selected="true"] .n{color:var(--red-hi)}
.mode-stage{position:relative;border-radius:var(--radius);overflow:hidden;min-height:460px;background:var(--ink-3)}
.mode-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .8s var(--ease),transform 1.4s var(--ease)}
.mode-stage img.on{opacity:1;transform:none}

/* Projekt-Mockups (Webseiten) */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,28px)}
.work{display:block}
.work .frame{border-radius:14px;overflow:hidden;background:var(--paper-2);aspect-ratio:16/10;position:relative}
.work .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.work:hover .frame img{transform:scale(1.035)}
.work .meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 2px 0}
.work .meta b{font-size:clamp(20px,2vw,30px);font-weight:620;letter-spacing:-.03em}
.work .meta span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.work:nth-child(even){transform:translateY(clamp(0px,6vw,90px))}
.works{padding-bottom:clamp(0px,6vw,90px)}

/* Horizontaler Streifen (Social-Formate) */
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--muted) transparent;margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
.strip figure{margin:0;flex:0 0 clamp(200px,22vw,300px);scroll-snap-align:start}
.strip .v{aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--ink-3);position:relative}
.strip .v img{width:100%;height:100%;object-fit:cover}
.strip figcaption{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* Über / Text-Block (Attached) */
.about{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(30px,6vw,90px);align-items:start}
.about .h2{position:sticky;top:calc(var(--head-h) + 70px);font-size:clamp(40px,5.4vw,88px)}
.about-copy{font-size:clamp(21px,2.3vw,36px);line-height:1.18;letter-spacing:-.025em}
.about-copy p{margin:0 0 1em}
.about-copy .dim{color:color-mix(in srgb,var(--fg) 52%,var(--ink))}

/* Marquee (Leistungen) */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;white-space:nowrap}
.marquee .track{display:inline-flex;gap:48px;animation:marq 38s linear infinite;padding-right:48px}
.marquee span{font-size:clamp(28px,4vw,64px);font-weight:640;text-transform:uppercase;letter-spacing:-.035em}
.marquee span em{font-family:var(--f-serif);font-weight:400;color:var(--red-hi);text-transform:none}
.marquee .sep{color:var(--muted);font-weight:300}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;padding:clamp(100px,14vw,220px) 0;text-align:center}
.cta .h2{font-size:clamp(46px,9vw,160px);max-width:1300px;margin:0 auto}
.cta .lead{margin:28px auto 0;color:var(--fg-dim)}
.cta .actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:40px}
.cta .art .mesh{opacity:var(--mesh-o-cta,.5)}

/* ---------- Footer (Sigma-Spalten) ---------- */
.site-foot{border-top:1px solid var(--line);padding:clamp(50px,6vw,80px) 0 30px;background:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot-grid h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 16px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-grid a{color:var(--fg-dim);transition:color .2s}
.foot-grid a:hover{color:var(--fg)}
.foot-grid address{font-style:normal;color:var(--fg-dim);line-height:1.6}
.foot-big{margin:clamp(50px,7vw,100px) 0 24px;user-select:none}
.foot-big .logo-img{width:min(100%,1100px);aspect-ratio:2478/788;color:color-mix(in srgb,var(--fg) 13%,transparent)}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}
.to-top:hover{color:var(--fg)}
.foot-tools{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.theme-switch{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.theme-switch:hover{color:var(--fg)}
.theme-switch .track{position:relative;width:38px;height:22px;border-radius:99px;border:1px solid var(--line);background:var(--ink-2);transition:background .3s}
.theme-switch .knob{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--red-hi);transition:transform .35s var(--ease)}
[data-theme="dark"] .theme-switch .knob{transform:translateX(16px)}

/* ---------- Rechtstexte ---------- */
.legal{max-width:860px}
.legal h2{font-size:clamp(22px,2.2vw,30px);font-weight:620;letter-spacing:-.02em;text-transform:uppercase;margin:56px 0 14px}
.legal h3{font-size:18px;font-weight:620;margin:30px 0 8px}
.legal p,.legal li{color:var(--fg-dim);line-height:1.7}
.legal a{border-bottom:1px solid currentColor}
.todo{border:1px dashed color-mix(in srgb,var(--red-hi) 55%,transparent);border-radius:12px;padding:16px 18px;font-family:var(--f-mono);font-size:12px;line-height:1.6;color:var(--red-hi);background:color-mix(in srgb,var(--red-hi) 6%,transparent)}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:.08s}[data-reveal-d="2"]{transition-delay:.16s}[data-reveal-d="3"]{transition-delay:.24s}
.no-js [data-reveal]{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .row{grid-template-columns:44px 1fr 160px 70px}
  .tile,.card{grid-column:span 6}
  .tile.w8,.tile.w7,.card.w8,.card.w7{grid-column:span 12}
  .tile.w5,.card.w5{grid-column:span 6}
  .video-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--head-h:58px}
  .menu-btn{display:block}
  .nav{position:fixed;top:var(--head-h);left:0;right:0;height:calc(100svh - var(--head-h));overflow-y:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:var(--ink);padding:10px var(--pad) 26px;border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
  .menu-open .nav{opacity:1;transform:none;pointer-events:auto}
  .menu-open .site-head{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  .menu-open body{overflow:hidden}
  .nav a{font-family:var(--f-sans);font-size:30px;font-weight:620;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line);border-radius:0;color:var(--fg)}
  .nav a:hover,.nav a[aria-current="page"]{background:none}
  .nav .btn{margin-top:18px;justify-content:center;font-family:var(--f-mono);font-size:12px;padding:16px;border-radius:99px;border:1px solid var(--red)}
  .head-cta{display:none}
  .hero-foot,.page-hero .hero-foot{grid-template-columns:1fr}
  .hero-meta{justify-content:flex-start}
  .scroll-cue{display:none}
  .sec-head{grid-template-columns:1fr auto}
  .split,.modes,.specs,.about{grid-template-columns:1fr}
  .split.flip > :first-child{order:0}
  .about .h2{position:static}
  .row{grid-template-columns:34px 1fr auto}
  .row .type{display:none}
  .features li{grid-template-columns:44px 1fr}
  .features li p{grid-column:2}
  .mode-stage{min-height:0;aspect-ratio:4/3;width:100%}
  .works{grid-template-columns:1fr;padding-bottom:0}
  .work:nth-child(even){transform:none}
  .video-grid{grid-template-columns:1fr}
  .preview{display:none}
}
@media (max-width:640px){
  .tile,.card,.tile.w5,.card.w5,.tile.w6,.card.w6{grid-column:span 12}
  .tile,.card{min-height:340px}
  .tile.tall,.card.tall{min-height:420px}
  .card .shot{width:84%;top:24%;right:-14%}
  .card.w8 .shot,.card.w7 .shot{width:80%;right:-10%;top:22%}
  .hero{min-height:94svh}
  .hero h1{font-size:clamp(54px,17.5vw,96px)}
  .page-hero{min-height:74svh}
  .page-hero h1{font-size:clamp(46px,15vw,90px)}
  .hero-meta{display:none}
  .player.full{height:62svh;min-height:340px}
  .specs .r{grid-template-columns:1fr;gap:6px}
  .foot-grid{grid-template-columns:1fr}
  .cursor{display:none}
  .subnav-title{display:none}
  .sec-head{grid-template-columns:1fr}
  .sec-head span:last-child{display:none}
  .art .r1{width:90vw;right:-40vw}.art .r2{width:60vw;right:-14vw}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero h1 .line > span{transform:none}
  .cursor{display:none}
}