/* ============================================================
   GREWE Studio · Startseite
   Ausgelagert aus index.html (vormals inline).
   ACHTUNG: .htaccess liefert CSS ein Jahr als immutable aus.
   Bei jeder Aenderung den ?v=-Parameter in index.html hochzaehlen.
   ============================================================ */

/* --- Selbst gehostete Schriften (vormals Base64-inline, ~147 KB) --- */
@font-face{font-family:'Syne';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/syne-600.woff2') format('woff2');}
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/syne-700.woff2') format('woff2');}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/syne-800.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/instrument-sans-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/instrument-sans-500.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-mono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-mono-700.woff2') format('woff2');}

/* ============================================================
   TOKENS
============================================================ */
:root{
  --bg:#08080F; --bg-2:#0D0D18;
  --ink:#EEEDF4; --mute:#9D9DB6;
  --lumen:#B8C4FF; --ember:#FFAE8C;
  --line:rgba(238,237,244,.08); --line-2:rgba(238,237,244,.14);
  --glass:rgba(18,18,30,.55);
  --font-d:'Syne',sans-serif;
  --font-b:'Instrument Sans',sans-serif;
  --font-m:'Space Mono',monospace;
  --gutter:clamp(20px,5vw,72px);
  --ease-out:cubic-bezier(.19,1,.22,1);
  color-scheme:dark;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ overflow-x:hidden; max-width:100%; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:16px; line-height:1.6;
  overflow-x:hidden; max-width:100%; position:relative; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--lumen); color:#08080F; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.mono{ font-family:var(--font-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.grad-text{
  background:linear-gradient(100deg,var(--lumen) 10%,var(--ember) 90%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* when grad-text is split into chars/words for animation, each piece needs
   its own gradient — otherwise the clipped text has no background and vanishes */
.grad-text .char, .grad-text .word{
  background:linear-gradient(100deg,var(--lumen) 10%,var(--ember) 90%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.o-hidden{ overflow:hidden; }
.char{ display:inline-block; will-change:transform; }
.word-wrap{ display:inline-block; white-space:nowrap; }

/* CHROME */
#gl{ position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.noise{
  position:fixed; inset:0; z-index:60; pointer-events:none; width:100%; height:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
  opacity:.045; animation:grain 900ms steps(4) infinite;
}
@keyframes grain{
  0%{background-position:0 0;}25%{background-position:-7px 9px;}
  50%{background-position:9px -7px;}75%{background-position:-9px -9px;}
  100%{background-position:7px 7px;}
}
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:200; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--lumen); }
.cursor-ring{
  width:36px; height:36px; border:1px solid rgba(184,196,255,.45);
  transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .35s,background .35s;
}
.cursor-ring.is-active{ width:64px; height:64px; background:rgba(184,196,255,.08); border-color:rgba(184,196,255,.9); }
.cursor-ring .cursor-label{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-m); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lumen); opacity:0; transition:opacity .3s;
}
.cursor-ring.has-label .cursor-label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }
/* nativen Mauszeiger ausblenden — der Custom-Cursor (dot + ring) uebernimmt.
   Nur bei echter Maus; auf Touch bleibt alles unangetastet. */
@media (hover:hover) and (pointer:fine){
  *,*::before,*::after{ cursor:none !important; }
}
#progress{
  position:fixed; top:0; left:0; z-index:120; width:100%; height:2px;
  background:linear-gradient(90deg,var(--lumen),var(--ember));
  transform-origin:left center; transform:scaleX(0);
}

/* PRELOADER */
#loader{ position:fixed; inset:0; z-index:500; background:var(--bg); display:flex; align-items:center; justify-content:center;
  /* Notausstieg: Der Loader verdeckt die ganze Seite und wird sonst nur per JS
     entfernt. Laedt home.js nicht (404, Syntaxfehler, Netzabbruch), bliebe die
     Seite dauerhaft leer. Nach 3s raeumt CSS ihn unabhaengig vom Skript weg. */
  animation:loaderFailsafe .4s 3s forwards; }
@keyframes loaderFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.loader-inner{ text-align:center; }
.loader-name{ font-family:var(--font-d); font-weight:800; font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; }
.loader-name .char{ transform:translateY(120%); }
.loader-count{
  position:fixed; bottom:var(--gutter); right:var(--gutter);
  font-family:var(--font-d); font-weight:700; font-size:clamp(60px,10vw,120px); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(238,237,244,.35);
}
.loader-bar{ margin-top:24px; width:180px; height:1px; background:var(--line-2); margin-inline:auto; position:relative; overflow:hidden; }
.loader-bar i{ position:absolute; inset:0; background:linear-gradient(90deg,var(--lumen),var(--ember)); transform:scaleX(0); transform-origin:left; }

/* NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  background:linear-gradient(rgba(8,8,15,.6),rgba(8,8,15,0));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); transition:transform .5s var(--ease-out);
}
.nav.is-hidden{ transform:translateY(-110%); }
/* Wortmarke: bewusst Space Mono (nicht Syne wie H1), damit sich das Logo abhebt */
.nav-logo{ font-family:var(--font-m); font-weight:700; font-size:15px; letter-spacing:.24em; text-transform:uppercase; display:inline-flex; align-items:center; color:var(--ink); }
.nav-logo::after{ content:''; width:6px; height:6px; margin-left:1px; border-radius:50%; background:linear-gradient(120deg,var(--lumen),var(--ember)); }
.nav-links{ display:flex; gap:34px; }
.nav-links a{
  font-family:var(--font-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); position:relative; padding:4px 0; transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--lumen);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-status{ display:flex; align-items:center; gap:8px; font-family:var(--font-m); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.nav-status .pulse{ width:7px; height:7px; border-radius:50%; background:#7CE8A4; box-shadow:0 0 0 0 rgba(124,232,164,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(124,232,164,.5);}70%{box-shadow:0 0 0 10px rgba(124,232,164,0);}100%{box-shadow:0 0 0 0 rgba(124,232,164,0);} }
@media (max-width:820px){ .nav-links{ display:none; } }

/* LAYOUT */
main{ position:relative; z-index:1; }
section{ position:relative; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:clamp(48px,8vh,90px); padding-bottom:20px; border-bottom:1px solid var(--line-2); }
.section-head .mono{ color:var(--mute); }
.section-title{ font-family:var(--font-d); font-weight:700; font-size:clamp(34px,5.5vw,72px); letter-spacing:-.02em; line-height:1.14; padding-bottom:.08em; }

/* HERO */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(100px,14vh,150px) var(--gutter) clamp(36px,6vh,70px); }
.hero-eyebrow{ display:flex; gap:14px; align-items:center; color:var(--mute); margin-bottom:22px; }
.hero-eyebrow .rule{ width:56px; height:1px; background:var(--line-2); }
.hero-title{ font-family:var(--font-d); font-weight:800; font-size:clamp(24px,7.4vw,120px); line-height:.98; letter-spacing:-.035em; text-transform:uppercase; }
.hero-title .row{ display:block; }
.hero-title .indent{ padding-left:clamp(0px,5vw,120px); }
.hero-sub{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:clamp(28px,5vh,54px); }
.hero-sub p{ max-width:440px; color:var(--mute); font-size:clamp(15px,1.3vw,18px); }
.hero-sub p strong{ color:var(--ink); font-weight:500; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,64px); }
.hero-meta div{ display:flex; flex-direction:column; gap:6px; }
.hero-meta .mono{ color:var(--mute); }
.hero-meta b{ font-family:var(--font-d); font-weight:700; font-size:clamp(20px,2.2vw,30px); }
.scroll-hint{ position:absolute; right:var(--gutter); top:50%; display:flex; align-items:center; gap:12px; transform:rotate(90deg) translateX(-50%); transform-origin:right center; color:var(--mute); }
.scroll-hint .track{ width:64px; height:1px; background:var(--line-2); position:relative; overflow:hidden; }
.scroll-hint .track i{ position:absolute; inset:0; background:var(--lumen); animation:hintslide 2.2s var(--ease-out) infinite; }
@keyframes hintslide{ 0%{transform:translateX(-100%);}55%{transform:translateX(0);}100%{transform:translateX(100%);} }
@media (max-width:820px){ .scroll-hint{ display:none; } }

/* MARQUEE */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; overflow:hidden; background:rgba(13,13,24,.4); backdrop-filter:blur(6px); }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:marquee 26s linear infinite; }
.marquee-track span{ font-family:var(--font-d); font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); white-space:nowrap; display:flex; align-items:center; gap:56px; }
.marquee-track span::after{ content:'◆'; font-size:8px; color:var(--lumen); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ABOUT */
.about{ padding:clamp(100px,16vh,200px) var(--gutter); }
.about-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(40px,6vw,110px); align-items:start; }
.about-statement{ font-family:var(--font-d); font-weight:600; font-size:clamp(24px,3.4vw,46px); line-height:1.22; letter-spacing:-.015em; }
.about-statement .dim{ color:var(--mute); }
.about-aside{ display:flex; flex-direction:column; gap:28px; }
.about-aside > p{ color:var(--mute); font-size:15px; }
.glass-card{ background:var(--glass); border:1px solid var(--line-2); border-radius:18px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); padding:26px; box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05); }
.stat-list{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; }
.stat-list b{ display:block; font-family:var(--font-d); font-weight:800; font-size:clamp(26px,3vw,38px); line-height:1; }
.stat-list .mono{ color:var(--mute); display:block; margin-top:6px; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }

/* BUILD — Wireframe→Launch 3D scroll assembly */
.build{ position:relative; }
.build-pin{ position:relative; height:100svh; overflow:hidden; }
#buildGl{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.build-scrim{
  position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, rgba(8,8,15,.85));
}
.build-hud{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(88px,12vh,120px) var(--gutter) clamp(28px,5vh,48px);
}
.build-top{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.build-top .mono{ color:var(--mute); }
#buildHint{ transition:opacity .5s var(--ease-out); }
.build-title{ font-family:var(--font-d); font-weight:700; font-size:clamp(20px,2.6vw,36px); letter-spacing:-.015em; }
.build-bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; }
.build-phases{ position:relative; width:min(560px,100%); min-height:200px; }
.build-phase{
  position:absolute; left:0; bottom:0; width:100%;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.build-phase.is-active{ opacity:1; transform:translateY(0); }
.build-phase .num{
  font-family:var(--font-d); font-weight:800; line-height:1;
  font-size:clamp(44px,6.5vw,96px);
  color:transparent; -webkit-text-stroke:1px rgba(238,237,244,.35);
}
.build-phase h3{ font-family:var(--font-d); font-weight:700; font-size:clamp(22px,3vw,42px); letter-spacing:-.02em; margin:10px 0 8px; }
.build-phase p{ color:var(--mute); font-size:clamp(13.5px,1.15vw,15.5px); max-width:440px; }
.build-steps{ display:flex; flex-direction:column; gap:12px; text-align:right; }
.build-steps .step{
  font-family:var(--font-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); transition:color .4s; white-space:nowrap;
}
.build-steps .step i{ font-style:normal; color:var(--mute); margin-right:10px; transition:color .4s; }
.build-steps .step.is-active{ color:var(--ink); }
.build-steps .step.is-active i{ color:var(--lumen); }
.build-steps .step.is-done{ color:rgba(238,237,244,.55); }
.build-progress{
  position:absolute; left:0; bottom:0; z-index:3; width:100%; height:2px;
  background:linear-gradient(90deg,var(--lumen),var(--ember));
  transform:scaleX(0); transform-origin:left;
}
.build.no-gl #buildGl{ display:none; }
/* mini terminal HUD */
.build-terminal{
  align-self:flex-end;
  width:min(340px, 82vw);
  margin-top:14px;
  background:rgba(10,10,18,.6);
  border:1px solid var(--line-2);
  border-radius:12px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.term-head{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px; border-bottom:1px solid var(--line);
}
.term-head i{ width:8px; height:8px; border-radius:50%; }
.term-head i:nth-child(1){ background:#C4553C; }
.term-head i:nth-child(2){ background:#E5A05E; }
.term-head i:nth-child(3){ background:#7CE8A4; }
.term-head span{
  margin-left:8px; font-family:var(--font-m); font-size:9.5px;
  letter-spacing:.08em; color:var(--mute);
}
.term-lines{
  padding:10px 14px 12px;
  min-height:118px;
  display:flex; flex-direction:column; justify-content:flex-end;
  font-family:var(--font-m); font-size:10.5px; line-height:1.75;
  color:var(--ink);
}
.term-lines .tl-line{ white-space:nowrap; overflow:hidden; text-overflow:clip; }
.term-lines .tl-line.ok{ color:#7CE8A4; }
.term-caret{
  display:inline-block; width:6px; height:11px; margin-left:2px;
  background:var(--lumen); vertical-align:-1px;
  animation:caretblink .9s steps(1) infinite;
}
@keyframes caretblink{ 50%{ opacity:0; } }
@media (max-width:820px){
  .build-hud{ justify-content:flex-start; }
  .build-bottom{ margin-top:auto; }
  .build-terminal{ width:min(248px,66vw); margin-top:12px; border-radius:10px; }
  .term-head{ padding:7px 10px; }
  .term-head span{ font-size:8.5px; margin-left:6px; }
  .term-head i{ width:7px; height:7px; }
  .term-lines{ min-height:74px; font-size:9px; line-height:1.65; padding:8px 11px 9px; }
  .term-caret{ height:9px; }
}
@media (max-height:620px){ .build-terminal{ display:none; } }
@media (prefers-reduced-motion:reduce){ .term-caret{ animation:none; } }
@media (max-width:820px){
  .build-hud{ padding-top:78px; padding-bottom:calc(28px + 112px + env(safe-area-inset-bottom)); }
  .build-bottom{ flex-direction:column-reverse; align-items:flex-start; gap:18px; }
  .build-phases{ min-height:172px; }
  .build-steps{ flex-direction:row; flex-wrap:wrap; gap:8px 16px; text-align:left; }
  .build-steps .step i{ margin-right:6px; }
  .build-title{ display:none; }
}

/* WORK */
.work{ padding-top:clamp(80px,12vh,160px); }
.work .section-head{ margin-inline:var(--gutter); }
.work-pin{ overflow:hidden; min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
.work-track{ display:flex; gap:clamp(24px,3vw,48px); width:max-content; padding:0 var(--gutter); align-items:stretch; }
/* translateZ(0) erzwingt eine eigene Compositing-Ebene, damit iOS Safari die
   runden Ecken auch mit absolut positioniertem .art-Kind sauber clippt */
.work-card{ position:relative; width:min(72vw,860px); flex:none; border:1px solid var(--line-2); border-radius:22px; overflow:hidden; background:var(--bg-2); display:flex; flex-direction:column; transition:border-color .4s; transform:translateZ(0); isolation:isolate; }
.work-card:hover{ border-color:rgba(184,196,255,.35); }
.work-visual{ position:relative; height:clamp(280px,48vh,460px); overflow:hidden; }
.work-visual .art{ position:absolute; inset:-12%; transition:transform 1.1s var(--ease-out),filter 1.1s var(--ease-out); filter:saturate(.9); }
.work-card:hover .art{ transform:scale(1.05) rotate(.5deg); filter:saturate(1.15); }
.art-01{ background:radial-gradient(60% 90% at 20% 30%,#4A55B8 0%,transparent 60%),radial-gradient(50% 70% at 80% 20%,#C98B5F 0%,transparent 55%),radial-gradient(80% 80% at 60% 90%,#1B1E3E 0%,transparent 70%),conic-gradient(from 210deg at 50% 50%,#0A0A14,#23264D,#0A0A14); }
.art-02{ background:radial-gradient(45% 65% at 75% 65%,#C4553C 0%,transparent 60%),radial-gradient(55% 75% at 25% 25%,#E5A05E 0%,transparent 55%),linear-gradient(160deg,#12060A,#351220 55%,#0B0510); }
.art-03{ background:radial-gradient(70% 100% at 50% 110%,#6B7FE8 0%,transparent 65%),radial-gradient(40% 55% at 15% 15%,#9BE0D0 0%,transparent 55%),linear-gradient(200deg,#060A12,#101A33 60%,#05070D); }
.art-04{ background:radial-gradient(50% 75% at 70% 25%,#8A5FD1 0%,transparent 60%),radial-gradient(60% 85% at 20% 80%,#2E3A8C 0%,transparent 60%),linear-gradient(180deg,#0A0714,#170F2A 55%,#070510); }
.art::after{ content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:.12; mix-blend-mode:overlay; }
.work-visual .idx{ position:absolute; top:18px; left:22px; font-family:var(--font-d); font-weight:800; font-size:clamp(48px,6vw,84px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(238,237,244,.4); mix-blend-mode:screen; }
.work-visual .badge{ position:absolute; top:24px; right:22px; padding:7px 12px; border-radius:100px; background:rgba(8,8,15,.5); border:1px solid var(--line-2); backdrop-filter:blur(10px); font-family:var(--font-m); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--lumen); }
.work-info{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding:22px 24px 24px; }
.work-info h3{ font-family:var(--font-d); font-weight:700; font-size:clamp(22px,2.6vw,34px); letter-spacing:-.015em; }
.work-info p{ color:var(--mute); font-size:14px; max-width:420px; margin-top:6px; }
.work-tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.work-tags span{ font-family:var(--font-m); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); border:1px solid var(--line-2); border-radius:100px; padding:6px 11px; white-space:nowrap; }
.work-cta{ flex:none; width:min(38vw,420px); display:flex; align-items:center; justify-content:center; }
.work-cta a{ font-family:var(--font-d); font-weight:700; font-size:clamp(20px,2.4vw,30px); letter-spacing:-.01em; display:flex; align-items:center; gap:14px; color:var(--mute); transition:color .35s; }
.work-cta a:hover{ color:var(--ink); }
.work-cta a .arrow{ transition:transform .35s var(--ease-out); }
.work-cta a:hover .arrow{ transform:translateX(8px); }
@media (max-width:820px){
  .work-pin{ overflow:visible; min-height:0; display:block; }
  .work-track{ flex-direction:column; width:auto; padding:0 var(--gutter) 80px; align-items:stretch; }
  .work-card{ width:100%; }
  .work-visual{ height:clamp(180px,32vh,260px); }
  .work-info{ flex-direction:column; align-items:flex-start; gap:16px; }
  .work-info p{ max-width:none; }
  .work-tags{ justify-content:flex-start; }
  .work-cta{ width:100%; padding:20px 0; }
}

/* SKILLS */
.skills{ padding:clamp(100px,16vh,200px) var(--gutter); }
.skill-row{ position:relative; display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:24px; padding:clamp(22px,3.4vh,36px) 10px; border-top:1px solid var(--line-2); cursor:default; overflow:hidden; }
.skill-row:last-of-type{ border-bottom:1px solid var(--line-2); }
.skill-row .fill{ position:absolute; inset:0; z-index:0; background:linear-gradient(100deg,var(--lumen),#DCE3FF 60%,var(--ember)); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease-out); }
.skill-row:hover .fill{ transform:scaleY(1); }
.skill-row > *{ position:relative; z-index:1; }
.skill-row .mono{ color:var(--mute); transition:color .35s; }
.skill-row h3{ font-family:var(--font-d); font-weight:700; font-size:clamp(24px,4vw,54px); letter-spacing:-.02em; transition:color .35s,transform .55s var(--ease-out); }
.skill-row .detail{ color:var(--mute); font-size:14px; max-width:400px; text-align:right; transition:color .35s; }
.skill-row:hover h3{ color:#0A0A14; transform:translateX(14px); }
.skill-row:hover .mono,.skill-row:hover .detail{ color:rgba(10,10,20,.72); }
@media (max-width:820px){ .skill-row{ grid-template-columns:52px 1fr; } .skill-row .detail{ display:none; } }

/* JOURNEY — 3D time corridor (classic DOM timeline remains as fallback) */
.journey{ padding:0; position:relative; }
.journey-classic{ padding:clamp(100px,16vh,200px) var(--gutter); }
.journey.gl-active .journey-classic{ display:none; }
.journey-pin{ display:none; }
.journey.gl-active .journey-pin{ position:relative; height:100svh; overflow:hidden; display:block; }
#journeyGl{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.journey-scrim{
  position:absolute; left:0; right:0; bottom:0; height:40%; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, rgba(8,8,15,.88));
}
.journey-hud{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(88px,12vh,120px) var(--gutter) clamp(28px,5vh,48px);
}
.journey-top{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.journey-top .mono{ color:var(--mute); }
.journey-title{ font-family:var(--font-d); font-weight:700; font-size:clamp(20px,2.6vw,36px); letter-spacing:-.015em; }
#journeyHint{ transition:opacity .5s var(--ease-out); }
.journey-bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; }
.journey-stations{ position:relative; width:min(560px,100%); min-height:198px; }
.journey-station{
  position:absolute; left:0; bottom:0; width:100%;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.journey-station.is-active{ opacity:1; transform:translateY(0); }
.journey-station .yr{
  font-family:var(--font-d); font-weight:800; line-height:1;
  font-size:clamp(40px,6vw,88px);
  color:transparent; -webkit-text-stroke:1px rgba(238,237,244,.35);
}
.journey-station h3{ font-family:var(--font-d); font-weight:700; font-size:clamp(21px,2.8vw,40px); letter-spacing:-.02em; margin:10px 0 8px; }
.journey-station p{ color:var(--mute); font-size:clamp(13.5px,1.15vw,15.5px); max-width:460px; }
.journey-rail{ display:flex; flex-direction:column; gap:12px; text-align:right; }
.journey-rail .rl{
  font-family:var(--font-m); font-size:11px; letter-spacing:.14em;
  color:var(--mute); transition:color .4s; white-space:nowrap;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.journey-rail .rl i{
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--mute); transition:background .4s, border-color .4s, box-shadow .4s;
}
.journey-rail .rl.is-active{ color:var(--ink); }
.journey-rail .rl.is-active i{ background:var(--lumen); border-color:var(--lumen); box-shadow:0 0 12px rgba(184,196,255,.7); }
.journey-rail .rl.is-done{ color:rgba(238,237,244,.55); }
.journey-rail .rl.is-done i{ background:rgba(238,237,244,.4); border-color:transparent; }
.journey-progress{
  position:absolute; left:0; bottom:0; z-index:3; width:100%; height:2px;
  background:linear-gradient(90deg,var(--lumen),var(--ember));
  transform:scaleX(0); transform-origin:left;
}
@media (max-width:820px){
  .journey-hud{ padding-top:78px; padding-bottom:calc(28px + 112px + env(safe-area-inset-bottom)); }
  .journey-scrim{ height:62%; background:linear-gradient(transparent, rgba(8,8,15,.78) 45%, rgba(8,8,15,.96)); }
  .journey-station h3, .journey-station p{ text-shadow:0 2px 16px rgba(8,8,15,.9); }
  .journey-bottom{ flex-direction:column-reverse; align-items:flex-start; gap:18px; }
  .journey-stations{ min-height:184px; }
  .journey-rail{ flex-direction:row; flex-wrap:wrap; gap:8px 16px; text-align:left; }
  .journey-title{ display:none; }
}
.timeline{ position:relative; max-width:980px; margin-inline:auto; }
.timeline::before{ content:''; position:absolute; top:0; bottom:0; left:clamp(12px,6vw,120px); width:1px; background:var(--line-2); }
.timeline .beam{ position:absolute; top:0; bottom:0; left:clamp(12px,6vw,120px); width:1px; background:linear-gradient(var(--lumen),var(--ember)); transform:scaleY(0); transform-origin:top; box-shadow:0 0 18px rgba(184,196,255,.5); }
.tl-item{ position:relative; padding:clamp(26px,4vh,44px) 0 clamp(26px,4vh,44px) calc(clamp(12px,6vw,120px) + 42px); }
.tl-item::before{ content:''; position:absolute; left:calc(clamp(12px,6vw,120px) - 4px); top:calc(clamp(26px,4vh,44px) + 10px); width:9px; height:9px; border-radius:50%; background:var(--bg); border:1px solid var(--lumen); }
.tl-item .mono{ color:var(--lumen); }
.tl-item h3{ font-family:var(--font-d); font-weight:700; font-size:clamp(20px,2.6vw,32px); letter-spacing:-.015em; margin:8px 0 6px; }
.tl-item p{ color:var(--mute); max-width:560px; font-size:15px; }

/* CONTACT */
.contact{ min-height:92svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(100px,14vh,180px) var(--gutter) 60px; text-align:center; }
.contact .mono{ color:var(--mute); }
.contact-title .row{ display:block; }
.contact-title{ font-family:var(--font-d); font-weight:800; font-size:clamp(28px,7vw,112px); line-height:.98; letter-spacing:-.03em; text-transform:uppercase; margin:26px 0 40px; }
.magnet-btn{ position:relative; display:inline-flex; align-items:center; gap:14px; margin-inline:auto; padding:22px 44px; border-radius:100px; font-family:var(--font-m); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#0A0A14; font-weight:700; background:linear-gradient(100deg,var(--lumen),var(--ember)); overflow:hidden; transition:box-shadow .4s; box-shadow:0 0 0 rgba(184,196,255,0); }
.magnet-btn:hover{ box-shadow:0 12px 50px rgba(184,196,255,.35); }
.magnet-btn .btn-label{ position:relative; z-index:1; }
.hero-btn{ margin-inline:0; margin-top:clamp(28px,4vh,42px); padding:16px 30px; font-size:11px; align-self:flex-start; }
.contact-links{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:56px; }
.contact-links a{ font-family:var(--font-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); border-bottom:1px solid transparent; padding-bottom:3px; transition:color .3s,border-color .3s; }
.contact-links a:hover{ color:var(--ink); border-color:var(--lumen); }
footer{ padding:0 var(--gutter); border-top:1px solid var(--line); color:var(--mute); position:relative; z-index:1; }
.foot-top{ display:flex; justify-content:space-between; gap:clamp(36px,6vw,90px); flex-wrap:wrap; padding:clamp(48px,7vw,84px) 0 clamp(34px,4vw,50px); }
.foot-brand{ max-width:300px; }
.foot-logo{ font-family:var(--font-d); font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--ink); transition:color .3s; }
.foot-logo:hover{ color:var(--lumen); }
.foot-tagline{ margin-top:16px; font-size:14px; line-height:1.6; color:var(--mute); max-width:34ch; }
.foot-nav{ display:flex; gap:clamp(30px,5vw,72px); flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:13px; min-width:130px; }
.foot-head{ color:var(--mute); opacity:.5; margin-bottom:3px; }
.foot-col a{ color:var(--ink); transition:color .3s; }
.foot-col a:hover{ color:var(--lumen); }
.foot-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; padding:20px 0 26px; border-top:1px solid var(--line); }
.foot-bar .mono{ color:var(--mute); }

/* ===== Globaler Morph-Footer (Verlaufs-Panel mit federnder Oberkante) ===== */
.site-footer{ position:relative; overflow:visible; border-top:0; color:#14141F; isolation:isolate; }
.site-footer > .foot-morph{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.foot-morph-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.foot-morph-path{ transition:none; }
.foot-morph::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.site-footer > .foot-top, .site-footer > .foot-bar{ position:relative; z-index:1; }
.site-footer > .foot-top{ padding-top:clamp(80px,11vw,140px); }
.site-footer .foot-logo{ color:#14141F; }
.site-footer .foot-logo:hover{ color:#000; }
.site-footer .foot-tagline{ color:rgba(20,20,31,.74); }
.site-footer .foot-head{ color:rgba(20,20,31,.5); opacity:1; }
.site-footer .foot-col a{ color:rgba(20,20,31,.82); }
.site-footer .foot-col a:hover{ color:#000; }
.site-footer .foot-bar{ border-top:1px solid rgba(20,20,31,.16); }
.site-footer .foot-bar .mono{ color:rgba(20,20,31,.7); }
@media (max-width:640px){ .foot-nav{ flex-direction:column; gap:28px; } }


/* ---- mobile refinements (fine-tuning only; base sizes are fluid) ---- */
@media (max-width:820px){
  .hero-eyebrow{ font-size:10px; }
  .hero-sub{ gap:22px; }
  .hero-meta b{ font-size:clamp(20px,6vw,26px); }
  .about-statement{ font-size:clamp(23px,6.4vw,34px); }
  .section-title{ font-size:clamp(30px,7vw,52px); }
  /* Mobil: GL-Partikel hinter dem Hero-Text abdunkeln, damit die Schrift
     besser lesbar ist. z-index:-1 bleibt innerhalb des main-Stacking-Contexts
     (z-index:1) über dem fixierten Canvas (z-index:0), aber unter dem Text. */
  .hero{ position:relative; }
  .hero::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(8,8,15,0) 0%, rgba(8,8,15,.45) 48%, rgba(8,8,15,.75) 100%); }
}
@media (max-width:400px){
  :root{ --gutter:18px; }
}

@media (prefers-reduced-motion:reduce){
  .marquee-track,.noise,.scroll-hint .track i,.nav-status .pulse{ animation:none !important; }
  *{ transition-duration:.01ms !important; }
}
/* SCROLL-MORE INDICATOR (pinned sections) */
.scroll-more{
  position:fixed; left:50%; bottom:max(22px, env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:150; pointer-events:none; opacity:0;
  display:flex; flex-direction:column; align-items:center;
  transition:opacity .45s var(--ease-out);
}
.scroll-more-ring{
  position:absolute; top:-6px; left:50%; width:44px; height:64px; transform:translateX(-50%);
  border-radius:20px; border:1px solid rgba(184,196,255,.4);
  animation:scrollMoreRing 1.8s var(--ease-out) infinite;
}
.scroll-mouse{
  position:relative; width:28px; height:44px; border-radius:16px;
  border:2px solid var(--lumen); background:rgba(8,8,15,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 26px rgba(184,196,255,.55), 0 8px 24px rgba(0,0,0,.4);
}
.scroll-mouse i{
  position:absolute; left:50%; top:7px; width:5px; height:10px; margin-left:-2.5px;
  border-radius:3px; background:linear-gradient(180deg,var(--lumen),var(--ember));
  animation:scrollMouseDot 1.8s var(--ease-out) infinite;
}
.scroll-more .chev{
  display:flex; flex-direction:column; align-items:center; margin-top:6px;
}
.scroll-more .chev svg{ color:var(--lumen); }
.scroll-more .chev svg:nth-child(2){ margin-top:-6px; opacity:.55; }
.scroll-more .chev svg:nth-child(1){ animation:scrollChevBob 1.4s var(--ease-out) infinite; }
.scroll-more .chev svg:nth-child(2){ animation:scrollChevBob 1.4s var(--ease-out) infinite .12s; }
@keyframes scrollMouseDot{
  0%{ transform:translateY(0); opacity:1; }
  55%{ transform:translateY(16px); opacity:0; }
  56%{ transform:translateY(0); opacity:0; }
  85%{ opacity:1; }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes scrollMoreRing{
  0%{ transform:translateX(-50%) scale(.92); opacity:.55; }
  70%{ transform:translateX(-50%) scale(1.18); opacity:0; }
  100%{ transform:translateX(-50%) scale(1.18); opacity:0; }
}
@keyframes scrollChevBob{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(5px); opacity:1; }
}
@media (max-width:820px){
  .scroll-more{ bottom:max(30px, env(safe-area-inset-bottom)); }
  .scroll-mouse{ width:32px; height:50px; }
  .scroll-more-ring{ width:50px; height:72px; }
}
@media (prefers-reduced-motion:reduce){
  .scroll-mouse i, .scroll-more-ring, .scroll-more .chev svg{ animation:none; }
}
/* LANG TOGGLE */
.nav-right{ display:flex; align-items:center; gap:12px; }
.lang-toggle{
  background:none; border:1px solid var(--line-2); color:var(--mute);
  border-radius:999px; padding:6px 12px;
  font-family:var(--font-m); font-size:10px; letter-spacing:.14em;
  cursor:pointer; transition:color .3s, border-color .3s;
}
.lang-toggle:hover{ color:var(--ink); border-color:var(--lumen); }

/* THEME TOGGLE (Hell/Dunkel) */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--line-2); border-radius:999px;
  color:var(--mute); background:none; cursor:pointer;
  transition:color .3s, border-color .3s, background .3s;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--lumen); }
.theme-toggle svg{ width:16px; height:16px; display:block; }
.theme-toggle .ic-moon{ display:none; }
html[data-theme="light"] .theme-toggle .ic-sun{ display:none; }
html[data-theme="light"] .theme-toggle .ic-moon{ display:block; }

/* ============ LIGHT MODE ============ */
/* Dark bleibt die Original-/Standardversion; hier ausschliesslich die Hell-Overrides. */
html[data-theme="light"]{
  --bg:#F1F0F7; --bg-2:#FBFBFE;
  --ink:#14141F; --mute:#5A5A73;
  --lumen:#5860E6; --ember:#E56A38;
  --line:rgba(20,20,31,.10); --line-2:rgba(20,20,31,.16);
  --glass:rgba(255,255,255,.62);
  color-scheme:light;
}
html[data-theme="light"] ::selection{ color:#fff; }
html[data-theme="light"] .nav{ background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,0)); }
html[data-theme="light"] .marquee{ background:rgba(255,255,255,.5); }
html[data-theme="light"] .work-visual .badge{ background:rgba(255,255,255,.6); }
html[data-theme="light"] .scroll-mouse{ background:rgba(255,255,255,.5); box-shadow:0 0 26px rgba(88,96,230,.3),0 8px 24px rgba(20,20,45,.12); }
html[data-theme="light"] .glass-card{ box-shadow:0 30px 80px rgba(30,30,60,.14),inset 0 1px 0 rgba(255,255,255,.6); }
html[data-theme="light"] .noise{ opacity:.03; }
/* Terminal-HUD bleibt bewusst ein dunkles Code-Panel */
html[data-theme="light"] .build-terminal{ background:#0C0C16; border-color:rgba(255,255,255,.12); box-shadow:0 24px 60px rgba(20,20,45,.16),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="light"] .term-lines{ color:#EEEDF4; }
html[data-theme="light"] .term-head span{ color:#9D9DB6; }
html[data-theme="light"] .term-head{ border-bottom-color:rgba(255,255,255,.10); }
/* Sektions-Scrims faden zum Seitenhintergrund statt ins Dunkle
   (sonst grauer Schleier unter Prozess-Mockup und im Werdegang) */
html[data-theme="light"] .build-scrim{ background:linear-gradient(transparent, rgba(241,240,247,.9)); }
html[data-theme="light"] .journey-scrim{ background:linear-gradient(transparent, rgba(241,240,247,.92)); }
html[data-theme="light"] .hero::before{ background:linear-gradient(180deg, rgba(241,240,247,0) 0%, rgba(241,240,247,.5) 48%, rgba(241,240,247,.82) 100%); }
html[data-theme="light"] .journey-station h3, html[data-theme="light"] .journey-station p{ text-shadow:0 2px 16px rgba(241,240,247,.9); }
/* WebGL-Partikelfeld nutzt AdditiveBlending (leuchtet nur auf Dunkel).
   multiply macht die Partikel als sanfte Farbtupfer auf Hell sichtbar. */
html[data-theme="light"] #gl{ mix-blend-mode:multiply; opacity:.6; }


/* ============================================================
   Interne Kontextlinks (SEO)
   Fliesstext-Verweise auf die Stadt- und Ratgeber-Seiten.
   ============================================================ */

.skills-note{ margin-top:clamp(34px,5vh,56px); max-width:720px; color:var(--mute);
  font-size:clamp(14.5px,1.15vw,16px); line-height:1.7; }
.skills-note a{ color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:color .3s, border-color .3s; }
.skills-note a:hover{ color:var(--lumen); border-color:var(--lumen); }

.contact-note{ margin:34px auto 0; max-width:560px; text-align:center; color:var(--mute);
  font-size:14.5px; line-height:1.7; }
.contact-note a{ color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:color .3s, border-color .3s; }
.contact-note a:hover{ color:var(--lumen); border-color:var(--lumen); }

/* Hero-Fliesstext: Links dezent, damit die Typo ruhig bleibt */
.hero-sub p a{ color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:color .3s, border-color .3s; }
.hero-sub p a:hover{ color:var(--lumen); border-color:var(--lumen); }

/* About-Absatz */
.about-aside p a{ color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:color .3s, border-color .3s; }
.about-aside p a:hover{ color:var(--lumen); border-color:var(--lumen); }