/* ============================================================
   GREWE Studio — gemeinsame Basis für ALLE Unterseiten.
   Tokens, Typografie und Chrome exakt von der Hauptseite
   übernommen. Neue Unterseiten binden diese Datei plus
   /assets/gl-field.js ein und erben damit Look & Hintergrund.
============================================================ */

/* TOKENS (identisch zur Hauptseite) */
: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);
}

/* FONTS (lokal gehostet, DSGVO-konform) */
@font-face{font-family:'Syne';font-weight:600;font-display:swap;src:url(/fonts/syne-600.woff2) format('woff2')}
@font-face{font-family:'Syne';font-weight:700;font-display:swap;src:url(/fonts/syne-700.woff2) format('woff2')}
@font-face{font-family:'Syne';font-weight:800;font-display:swap;src:url(/fonts/syne-800.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-display:swap;src:url(/fonts/instrument-sans-500.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400;font-display:swap;src:url(/fonts/space-mono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:700;font-display:swap;src:url(/fonts/space-mono-700.woff2) format('woff2')}

/* RESET + BASIS (identisch zur Hauptseite) */
*{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}
/* Gradient-Text, der in Chars/Wörter gesplittet wird, braucht den
   Verlauf pro Teilstück, sonst verschwindet der geclippte Text */
.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;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;white-space:nowrap}

/* TYPOGRAFIE (exakte Metriken der Hauptseite) */
.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}
.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}
.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)}

/* CHROME: GL-Hintergrund, Noise, Cursor, Progress (identisch zur Hauptseite) */
#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}}
#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)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gutter);background:linear-gradient(rgba(8,8,15,.85),rgba(8,8,15,0));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);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-right{display:flex;align-items:center;gap:22px}
.nav-right .portfolio-link{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:color .3s}
.nav-right .portfolio-link:hover{color:var(--ink)}
.nav .btn{padding:11px 22px}

/* BUTTONS */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:14px 28px;border-radius:100px;font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#0A0A14;background:linear-gradient(100deg,var(--lumen),var(--ember));transition:box-shadow .4s,transform .3s var(--ease-out)}
.btn:hover{box-shadow:0 10px 44px rgba(184,196,255,.35);transform:translateY(-2px)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--lumen);box-shadow:none}

/* MARQUEE (identisch zur Hauptseite) */
.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);-webkit-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%)}}

/* FOOTER */
footer{position:relative;z-index:1;padding:clamp(48px,7vh,84px) var(--gutter) 28px;border-top:1px solid var(--line);color:var(--mute)}
footer .mono{color:var(--mute)}
.foot-top{display:grid;grid-template-columns:1.25fr 2fr;gap:clamp(32px,6vw,80px);padding-bottom:clamp(36px,6vh,58px)}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:340px}
.foot-brand .nav-logo{font-size:17px}
.foot-tagline{font-size:14.5px;line-height:1.6;color:var(--mute)}
.foot-mail{color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .3s}
.foot-mail:hover{border-color:var(--lumen)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px)}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col h3{color:var(--mute);font-weight:400;margin-bottom:3px}
.foot-col a{font-size:14.5px;color:var(--ink);opacity:.72;transition:opacity .3s}
.foot-col a:hover{opacity:1}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.foot-bottom a{color:var(--mute);transition:color .3s}
.foot-bottom a:hover{color:var(--ink)}
@media (max-width:820px){.foot-top{grid-template-columns:1fr;gap:40px}}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr 1fr}}

/* RESPONSIVE + REDUCED MOTION */
/* Mobil: GL-Partikel hinter dem Hero-Text abdunkeln (bessere Lesbarkeit).
   .hero ist position:relative (Seiten-CSS), .hero-inner liegt bei z-index:2,
   der Overlay bei z-index:1 also zwischen Canvas (z-index:0) und Text. */
@media (max-width:820px){
  .hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,8,15,.62) 0%,rgba(8,8,15,.5) 55%,rgba(8,8,15,.2) 100%)}
}
@media (max-width:640px){.nav-right .portfolio-link{display:none}}
@media (max-width:400px){:root{--gutter:18px}}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
  .marquee-track,.noise{animation:none !important}
}