/* ============================================================
   IDEEGRAFIK – Relaunch 2026
   Design-System: "Signal im Dunkeln"
   Full Dark · Orange #ee7202 · DIN OT · volle Breite, keine Container
   ============================================================ */

/* ---------- Fonts (Eigenhosting, volle Glyphen inkl. Umlaute) ---------- */
@font-face {
  font-family: 'DIN OT';
  src: url('/assets/fonts/DINOT-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN OT';
  src: url('/assets/fonts/DINOT-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN OT Cond';
  src: url('/assets/fonts/DINOT-CondBlack.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-Italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Farben – sehr dunkel, warm */
  --bg: #0a0a0a;            /* Grundfläche */
  --bg-deep: #060606;       /* tiefste Ebene (Hero, Footer) */
  --bg-raise: #121212;      /* leicht erhöhte Flächen */
  --bg-card: #151412;       /* Karten, warm getönt */
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.05);
  --ink: #f4f1ec;           /* Text, warmes Weiß */
  --ink-dim: #b5aea6;       /* Sekundärtext */
  --ink-mute: #726c65;      /* Tertiär, Labels */
  --accent: #ee7202;        /* Ideegrafik-Orange */
  --accent-hot: #ff8a1e;    /* Verlaufs-/Hover-Endpunkt */
  --accent-deep: #b34f00;   /* dunkles Orange, Schatten/Glow */
  --selection: rgba(238, 114, 2, 0.85);

  /* Typo-Skala – fluid */
  --font-display: 'DIN OT Cond', 'Arial Narrow', sans-serif;
  --font-head: 'DIN OT', Arial, sans-serif;
  --font-body: 'DIN OT', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --font-accent: 'Fraunces', Georgia, serif;
  --fs-hero: clamp(3.4rem, 11.5vw, 11.5rem);       /* Riesen-Display */
  --fs-h1: clamp(3rem, 9vw, 9rem);
  --fs-h2: clamp(2.2rem, 6vw, 5.5rem);
  --fs-h3: clamp(1.4rem, 2.6vw, 2.2rem);
  --fs-lead: clamp(1.15rem, 1.8vw, 1.5rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Raum – großzügig, Sektionen atmen */
  --sp-section: clamp(6rem, 14vh, 12rem);
  --sp-gutter: clamp(1.25rem, 4vw, 4rem);      /* Außenabstand statt Container */
  --sp-gutter-wide: clamp(2rem, 8vw, 9rem);

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.35s;
  --dur-med: 0.7s;
  --dur-slow: 1.1s;

  --nav-h: 5.5rem;
  --radius: 2px;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: auto; /* Lenis übernimmt */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: 0.01em;
  overflow-x: clip;
  min-height: 100vh;
}

::selection { background: var(--selection); color: #0a0a0a; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 900; line-height: 1.02; text-transform: uppercase; }

/* ---------- Grain-Overlay (gegen Flat-Look) ---------- */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 4%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-4%, -2%); }
  80% { transform: translate(3%, 3%); }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ---------- View Transitions (Progressive Enhancement) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms ease both vt-out; }
::view-transition-new(root) { animation: 260ms 60ms ease both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Reduced Motion: Inhalte sofort sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-split], [data-reveal], [data-hero-fade], .hero__meta { visibility: visible !important; opacity: 1 !important; transform: none !important; }
}