:root{
  /* Dark */
  --color-bg: #000;
  --color-fg: #fff;
  --color-muted: #9a9a9a;
  --color-border: #fff;

  /* Schriften */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --font-serif: "NyghtSerif", Georgia, serif;            /* NEU: für Hover/Active */
  --color-accent: rgb(153, 255, 153);                    /* NEU: Giftgrün  rgb(57, 255, 20) */ 
  --nav-active-size: var(--text-nav);                     /* NEU: Größe im aktiven Zustand */
  --nav-active-weight: 900;                               /* NEU: Gewicht im aktiven Zustand */


  
  /* Spacing */
  --size-4: 0.25rem;
  --size-8: 0.5rem;
  --size-12: 0.75rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-32: 2rem;
  --size-40: 2.5rem;
  --size-48: 3rem;
  --size-64: 4rem;
  --size-80: 5rem;
  --size-96: 6rem;

  /* Höhe der Menüleiste: */
  --menu-h: 64px;

  /* Typo */
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 0.9rem + 0.6svw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.5svw, 2.25rem);
  --text-2xl: clamp(2rem, 1.6rem + 2svw, 3rem);

  /* Index-Hero: ~45px Desktop, min 25px, dezent wachsend */
  --text-hero: clamp(25px, 0.8svw + 16px, 52px);

  /* Nav-Schrift: mind. doppelt so groß wie vorher (~>=32px) */
  --text-nav: clamp(22px, 1.4svw + 10px, 32px);
}

/* Mobile/Portrait tokens: smaller text, shorter menu */
@media (orientation: portrait){
  :root{
    --menu-h: 56px;
    --text-base: .95rem;
    --text-lg: clamp(1rem, 0.8rem + 0.5svw, 1.25rem);
    --text-hero: clamp(22px, 0.7svw + 14px, 44px);
    --text-nav: clamp(16px, 4.8svw, 20px);
  }
}
@media (max-width: 380px){
  :root{
    --menu-h: 52px;
    --text-nav: clamp(15px, 5vw, 18px);
  }
}
@media (orientation: landscape) and (max-width: 900px){
  :root{
    --menu-h: 46px;
    --text-nav: clamp(16px, 3.2vw, 20px);
  }
}