/* Design-Tokens nach docs/DESIGN-SYSTEM.md.
 * Referenzfassung: der :root-Block in static/styleguide.html.
 * Kein Hex-Wert gehoert direkt in eine Regel - alles laeuft ueber diese Tokens.
 */

:root {
  color-scheme: light;

  /* Redesign 2026-10-06 nach der Referenz fabianbaroud.com (Wunsch des
     Auftraggebers: heller, minimalistischer, Schrift wie dort): weisser
     Grund, schwarze Schrift, Schwarz als einziger Akzent, eckige Knoepfe,
     Versal-Antiqua (Gloock) fuer Headlines, Raleway fuer Text. Fotos bleiben
     farbig. Die Token-Namen bleiben, damit die Regeln unveraendert greifen:
     --ink-* sind die Flaechen, --text-* die Schrift, --accent-* der Akzent. */

  /* --- Flaechen --- */
  --ink-000: #FFFFFF;   /* Seitengrund */
  /* Abgesetzte Sektionen: kraeftig genug, dass sich benachbarte Abschnitte
     sichtbar trennen (FAQ | Anfrage), Text bleibt >= 5,5 : 1. */
  --ink-100: #ECE9E4;
  --ink-200: #FFFFFF;   /* Karten */
  --ink-300: #FFFFFF;   /* Eingabefelder, Hinweisboxen */
  --ink-400: #E6E5E2;   /* deaktiviert */
  --ink-900: #0B0B0B;   /* dunkle Flaechen: Footer */
  --photo-bg: #141414;  /* Grund unter Fotos, solange sie laden */
  --nav-bg: rgba(255, 255, 255, 0.94);  /* Leiste nach dem Scrollen */

  /* --- Text (Kontrast auf Weiss / --ink-100) --- */
  --text-1: #0B0B0B;    /* 19,7 : 1 / 16,3 : 1 */
  --text-2: #2B2B2B;    /* 14,2 : 1 / 11,7 : 1 */
  --text-3: #5C5C5C;    /*  6,7 : 1 /  5,5 : 1 */
  --on-accent: #FFFFFF;

  /* --- Akzent: Schwarz. 200-400 Text, 500 Kanten/Fokus, 600 Knopf,
     700 Hover, 800/900 zarte Toenungen. --- */
  --accent-200: #000000;
  --accent-300: #0B0B0B;
  --accent-400: #0B0B0B;
  --accent-500: #0B0B0B;
  --accent-600: #0B0B0B;
  --accent-700: #3A3A3A;
  --accent-800: #E6E5E2;
  --accent-900: #F6F5F3;

  --accent-a08: rgba(0, 0, 0, 0.04);
  --accent-a18: rgba(0, 0, 0, 0.08);
  --accent-a35: rgba(0, 0, 0, 0.30);
  --accent-a55: rgba(0, 0, 0, 0.45);
  --accent-glow: rgba(0, 0, 0, 0);

  /* --- Fokus und Status --- */
  --focus: #0B0B0B;
  --focus-halo: rgba(255, 255, 255, 0.92);
  --error: #B3261E;
  --error-bg: #FBEDEC;
  --success: #1E7A4C;
  --success-bg: #E8F4EC;

  /* --- Schrift --- */
  --font-display: 'Gloock', 'Bodoni 72', Georgia, 'Times New Roman', serif;
  --font-sans: 'Raleway', 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* 2026-10-06: insgesamt kleiner (Rueckmeldung "alles wirkt zu gross"). */
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.6vw, 5rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-num:     clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-intro:   clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
  --fs-nav:     0.75rem;
  --fs-btn:     0.75rem;
  --fs-eyebrow: 0.875rem;
  --fs-label:   0.8125rem;
  --fs-meta:    0.8125rem;

  /* --- Spacing (3.1) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* Mehr Rand, schmaler Inhalt wie die Referenz (~1100 px): die Seite
     wirkte auf breiten Bildschirmen zu gross und zu breit. */
  --gutter:    clamp(1.25rem, 0.2rem + 4.4vw, 6rem);
  --section-y: clamp(3.5rem, 2rem + 4.5vw, 7.5rem);
  --gap-lg:    clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --head-gap:  clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --title-gap: clamp(0.875rem, 0.7rem + 0.6vw, 1.375rem);

  /* --- Container (3.3) --- */
  /* Etwa 70 Zeichen je Zeile: ruhig zu lesen, ohne lange Blicksprünge. */
  --measure: 60ch;
  --container: 1100px;
  --container-wide: 1100px;

  /* --- Hoehe der Top-Leiste (4.1); ab 1024 px hoeher --- */
  --nav-h: 64px;

  /* --- Radien (3.4) --- */
  /* Eckig wie die Referenz. */
  --r-0: 0;
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;

  /* --- Linien und Schatten (3.5) --- */
  --line: 1px solid rgba(0, 0, 0, 0.12);
  /* Feldkanten und Kaestchen >= 3 : 1 (WCAG 1.4.11) auf Weiss und --ink-100. */
  --line-strong: 1px solid rgba(0, 0, 0, 0.5);
  --line-accent: 1px solid var(--accent-a35);
  --line-color: rgba(0, 0, 0, 0.12);
  --line-color-strong: rgba(0, 0, 0, 0.5);
  --line-color-faint: rgba(0, 0, 0, 0.06);

  /* Keine Schatten: Flaechen und Linien tragen die Gliederung. */
  --shadow-card: none;
  --shadow-lift: none;
  --glow-accent: none;
  --glow-soft: none;

  /* --- Motion (3.6) --- */
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 760ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);

  --reveal-y: 24px;
  --reveal-stagger: 80ms;
  --dur-stagger: 60ms;   /* Overlay-Links, je Eintrag ein Vielfaches */
  --dur-line: 120ms;     /* Eyebrow-Linie laeuft dem Wort hinterher */
  --dur-hint: 2.4s;      /* Scroll-Hinweis im Hero */
  /* Kein Bewegungs-Token: haelt die Autofill-Farbe der Browser dauerhaft
     fern (components.css, .field__control:autofill). Bleibt auch unter
     reduced-motion stehen, sonst kaeme das farbige Rechteck zurueck. */
  --autofill-hold: 600000s;

  /* --- Overlays ueber Fotos (6) --- */
  --veil-000: rgba(8, 7, 11, 0);
  --veil-20: rgba(8, 7, 11, .20);
  --veil-30: rgba(8, 7, 11, .30);
  --veil-34: rgba(8, 7, 11, .34);
  --veil-35: rgba(8, 7, 11, .35);
  --veil-40: rgba(8, 7, 11, .40);
  --veil-45: rgba(8, 7, 11, .45);
  --veil-52: rgba(8, 7, 11, .52);
  --veil-55: rgba(8, 7, 11, .55);
  --veil-62: rgba(8, 7, 11, .62);
  --veil-66: rgba(8, 7, 11, .66);
  --veil-72: rgba(8, 7, 11, .72);
  --veil-74: rgba(8, 7, 11, .74);
  --veil-90: rgba(8, 7, 11, .90);
  --veil-93: rgba(8, 7, 11, .93);
  --veil-94: rgba(8, 7, 11, .94);
  --veil-95: rgba(8, 7, 11, .95);
  --veil-96: rgba(8, 7, 11, .96);
  --veil-98: rgba(8, 7, 11, .98);
  --veil-12: rgba(8, 7, 11, .12);
}

@media (min-width: 768px) {
  :root { --reveal-y: 32px; }
}

/* Alle Bewegung der Seite laeuft ueber diese Dauern. Sie hier auf null zu
   setzen schaltet sie zentral ab - anders als ein Sammelblock mit `*`, der
   gegen jede Klassenregel verliert (Spezifitaet 0). Regeln, bei denen
   zusaetzlich eine Verschiebung bleibt, haben ihren eigenen reduce-Block
   dort, wo die Animation steht. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-reveal: 0.01ms;
    --dur-stagger: 0s;
    --dur-line: 0s;
    --dur-hint: 0.01ms;
  }
}

@media (min-width: 1024px) {
  :root { --nav-h: 84px; }
}

/* Dunkler Kontext: Text auf Fotos (Hero, Leuchtbuchstaben, Kacheln), die
   Lightbox und der Footer. Hier gelten helle Schrift und weisse Akzente;
   der Knopf wird weiss mit schwarzer Schrift. */
.on-photo,
.footer,
[data-gallery-lightbox] {
  color-scheme: dark;
  --text-1: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.90);
  --text-3: rgba(255, 255, 255, 0.72);
  --accent-200: #FFFFFF;
  --accent-300: #FFFFFF;
  --accent-400: #FFFFFF;
  --accent-500: #FFFFFF;
  --accent-600: #FFFFFF;
  --accent-700: #E6E5E2;
  --on-accent: #0B0B0B;
  --line: 1px solid rgba(255, 255, 255, 0.16);
  --line-color: rgba(255, 255, 255, 0.16);
  --line-color-strong: rgba(255, 255, 255, 0.34);
  --line-strong: 1px solid rgba(255, 255, 255, 0.34);
  --focus: #FFFFFF;
  --focus-halo: rgba(8, 7, 11, 0.85);
  --accent-a08: rgba(255, 255, 255, 0.10);
  --accent-a18: rgba(255, 255, 255, 0.18);
  --accent-a35: rgba(255, 255, 255, 0.70);
}