/* PANGRAPHY – gemeinsame Design-Variablen (Hauptseite + Projektseiten).
   Aus index.html extrahiert; Werte hier ändern, nicht in den einzelnen Seiten duplizieren. */
:root {
  /* Flächen & Text */
  --bg: #0a0a0b;
  --bg-alt: #101012;
  --surface: rgba(255, 255, 255, 0.03);
  --text: #f4f6f8;
  --text-dim: rgba(244, 246, 248, 0.66);
  --text-mute: rgba(244, 246, 248, 0.45);
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.06);

  /* Akzent (Markenblau) */
  --accent: #7fb1ef;
  --accent-ink: #0a0a0b;

  /* Kategorie-Palette der Seiten-Tabs (erdig-filmisch) */
  --c-ink: #3e5f8a;     /* PANGRAPHY – Tintenblau */
  --c-wine: #74283a;    /* UMSETZUNG – Weinrot */
  --c-orange: #ef8f2b;  /* PORTFOLIO – Orange */
  --c-sand: #a8844f;    /* KONTAKT – Sand/Ocker */
  --c-petrol: #2e5e68;  /* PANBOT – Petrol */

  /* Schriften */
  --font-display: 'Bebas Neue', 'Jost', sans-serif;  /* große Überschriften, Tabs */
  --font-ui: 'Jost', sans-serif;                     /* Logo, Kicker, Navigation */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Maße & Bewegung */
  --measure: 66ch;
  --h-size: clamp(2.1rem, 4.6vw, 3rem);  /* eine Größe für alle großen Überschriften */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fade: 0.4s;                          /* Ein-/Ausblenden von Bereichen und Overlays */

  /* Abdunklung über Hintergrundvideos (wie Hero der Hauptseite) */
  --video-veil:
    linear-gradient(90deg, rgba(8,8,10,0.6) 0%, rgba(8,8,10,0.22) 42%, rgba(8,8,10,0) 78%),
    linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,0.08) 58%, rgba(8,8,10,0.55) 100%);
  --video-filter: saturate(1.12) brightness(1.08);

  /* Text-Schatten für Schrift über Video */
  --shadow-title: 0 2px 24px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5);
  --shadow-text: 0 1px 12px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.55);
}