/* PIXEL.SYNTAX — Design Tokens v1.0
   Display/Headlines/Labels = IBM Plex Mono · Body = Space Grotesk
   Dark-first; Light per [data-theme="light"] gleichwertig. Schriften self-hosten. */
:root {
  --font-display: "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --fs-hero: clamp(40px, 9vw, 104px);
  --fs-h1: clamp(36px, 6vw, 72px);
  --fs-h2: clamp(28px, 4vw, 48px);
  --fs-h3: clamp(20px, 2.4vw, 28px);
  --fs-body: clamp(16px, 1.2vw, 18px);
  --fs-small: 14px;
  --fs-label: 12px;
  --ls-display: -0.01em;
  --ls-label: 0.2em;
  --maxw: 1120px;
  --gutter: clamp(20px, 4vw, 36px);
  --space-section: clamp(64px, 9vw, 120px);
  --radius: 0;
  --border: 1px;
}
:root, [data-theme="dark"] {
  /* R38: Tiefschwarz — einheitlicher Grundton auf allen Flächen */
  --bg: #000000; --surface: #151515; --surface-2: #1D1D1D;
  --text: #ECECEC; --muted: #8C8C8C; --line: rgba(255,255,255,0.16);
  --accent: #4D7CFF; --on-accent: #06080F;
}
[data-theme="light"] {
  --bg: #F3F1EA; --surface: #FFFFFF; --surface-2: #E9E6DC;
  --text: #0E0E0E; --muted: #6B6B6B; --line: rgba(0,0,0,0.18);
  --accent: #2950E0; --on-accent: #FFFFFF;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:#F3F1EA; --surface:#FFFFFF; --surface-2:#E9E6DC;
    --text:#0E0E0E; --muted:#6B6B6B; --line:rgba(0,0,0,0.18);
    --accent:#2950E0; --on-accent:#FFFFFF;
  }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 0.95; letter-spacing: var(--ls-display); text-transform: uppercase; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); }
/* R43: global ALLE H1/H2 zentriert (Nutzerwunsch) */
h1, h2 { text-align: center; }
h3 { font-size: var(--fs-h3); font-weight: 400; text-transform: none; }
p { max-width: 68ch; } a { color: inherit; text-decoration: none; }
.label, .section-num { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.label { color: var(--muted); } .section-num { color: var(--accent); }
.tag { display: inline-block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: var(--border) solid var(--line); padding: 7px 12px; }
.link { font-family: var(--font-display); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 22px; cursor: pointer; border: var(--border) solid transparent; transition: transform .14s ease, box-shadow .14s ease, color .14s ease, border-color .14s ease; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { transform: translate(1px,-1px); box-shadow: -3px 3px 0 var(--accent); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.section { padding-block: var(--space-section); border-top: var(--border) solid var(--line); }
/* Signatur-Glitch — rein optisch, NUR auf dem Namen.
   Markup: <span class="glitch" data-text="MANUEL HERRMANN">MANUEL HERRMANN</span> */
.glitch { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-hero); line-height: 0.95; letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--text); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: var(--text); background: var(--bg); overflow: hidden; }
.glitch::before { animation: glitch-top 3.4s steps(1) infinite; }
.glitch::after { animation: glitch-bot 3.4s steps(1) infinite; }
.glitch:hover::before, .glitch:hover::after { animation-duration: 1.1s; }
@keyframes glitch-top { 0%,68%,100% { clip-path: inset(0 0 100% 0); transform: translate(0,0);} 70% { clip-path: inset(2% 0 70% 0); transform: translate(-5px,0);} 74% { clip-path: inset(10% 0 62% 0); transform: translate(4px,0);} 78% { clip-path: inset(4% 0 74% 0); transform: translate(-2px,0);} }
@keyframes glitch-bot { 0%,68%,100% { clip-path: inset(100% 0 0 0); transform: translate(0,0);} 71% { clip-path: inset(58% 0 4% 0); transform: translate(5px,0);} 75% { clip-path: inset(46% 0 8% 0); transform: translate(-6px,0);} 79% { clip-path: inset(62% 0 0 0); transform: translate(3px,0);} }
@media (prefers-reduced-motion: reduce) { .glitch::before, .glitch::after { animation: none; } html { scroll-behavior: auto; } }