/* ============================================================
   Wolbach Design System
   Stand 06.08.2026

   Alle Kontrastwerte sind mit tools/design-check.py gemessen,
   nicht geschaetzt. Das Skript validiert sich vor jeder Messung
   gegen dokumentierte WCAG-Referenzwerte.

   Pruefen:  python3 tools/design-check.py <datei.html>
   ============================================================ */

:root {

  /* --- Farben ---------------------------------------------- */

  --paper:      #eef1f4;   /* Grundflaeche                     */
  --paper-hi:   #f7f9fb;   /* erhoehte Flaeche, Karten         */
  --glass:      rgba(255,255,255,0.66);
  --glass-edge: rgba(255,255,255,0.90);

  --ink:        #16202a;   /* Fliesstext, Ueberschriften       */
  --ink-soft:   #445260;   /* Sekundaertext                    */
  --muted:      #5d6874;   /* Hilfstext, ab 06/2026 AA-tauglich */

  --accent:     #ee5c0e;   /* Marken-Orange, Flaechen          */
  --accent-2:   #ff7a2e;   /* heller Akzent, Verlaufsstart     */
  --accent-ink: #a43f0a;   /* Akzent als TEXT auf hellem Grund */
  --accent-tint: rgba(238,92,14,0.10);

  --line:      rgba(22,32,42,0.10);
  --line-soft: rgba(22,32,42,0.06);

  /* --- Abstaende: 4er-Basis, bevorzugte Stufen ------------- */

  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* --- Typografie ------------------------------------------ */

  --font-display: 'Urbanist', sans-serif;
  --font-body:    'Kumbh Sans', sans-serif;

  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   clamp(16px, 1.2vw, 18px);
  --t-lg:   clamp(19px, 1.7vw, 23px);
  --t-xl:   clamp(24px, 2.4vw, 32px);
  --t-2xl:  clamp(32px, 3.6vw, 46px);
  --t-3xl:  clamp(40px, 5.2vw, 68px);

  /* --- Radien ---------------------------------------------- */

  --r-sm:   4px;
  --r-md:  12px;
  --r-lg:  24px;
  --r-pill: 100px;
}

/* ============================================================
   ERLAUBTE FARBPAARE  (gemessen, WCAG 2.2 AA = 4.5:1 fuer Text)
   ------------------------------------------------------------
   ink        auf paper-hi   15.62:1   Fliesstext
   ink        auf paper      14.54:1   Fliesstext
   weiss      auf ink        16.48:1   Umkehrung
   ink-soft   auf paper-hi    7.59:1   Sekundaertext
   muted      auf paper-hi    5.38:1   Hilfstext
   muted      auf paper       5.01:1   Hilfstext
   accent-ink auf paper-hi    6.04:1   Links, Akzenttext
   ink        auf accent-2    6.34:1   Text auf Button (hell)
   ink        auf accent      4.84:1   Text auf Button (dunkel)

   VERBOTEN
   ------------------------------------------------------------
   weiss auf accent      3.40:1  -> reisst AA
   weiss auf accent-2    2.60:1  -> reisst AA deutlich
   accent als Text auf hellem Grund 3.22:1 -> --accent-ink nehmen
   muted  auf paper-hi   5.38:1  -> seit 11.08.2026 auch als Fliesstext

   MERKSATZ
   Auf einer Akzentflaeche steht IMMER --ink, niemals Weiss.
   Wer Marken-Orange als Schrift braucht, nimmt --accent-ink.
   ============================================================ */

/* --- Basisbausteine, die jedes Projekt braucht -------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Auf Akzentflaechen ist der Akzent als Fokusring unsichtbar */
.on-accent:focus-visible { outline-color: var(--ink); }

section { scroll-margin-top: 90px; }

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 680ms cubic-bezier(0.16,1,0.3,1),
              transform 680ms cubic-bezier(0.16,1,0.3,1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}