/* =============================================================
   DESIGN TOKENS – Arberger Dorffest
   -------------------------------------------------------------
   Zentrale Stellschraube für das gesamte Erscheinungsbild.
   Sobald die Design-PDF (Farben/Symbole) vorliegt, werden hier
   – und NUR hier – die Farb- und ggf. Font-Werte getauscht.
   Der Rest der Seite übernimmt die Änderung automatisch.
   ============================================================= */

:root {
  /* ---------- FARBWELT (nach Flyer: Navy · Orange · Sonnengelb · Himmelblau) ---------- */
  /* Primär – Navy: Marke, Anker, Überschriften-Akzent, dunkle Flächen */
  --c-primary:        #12314F;
  --c-primary-dark:   #143A5E;   /* aktive Flächen (weiße Schrift), Akzenttext */
  --c-primary-darker: #0C2540;
  --c-primary-soft:   #E7F0F7;   /* zarter Himmel-Tint für Flächen */

  /* Akzent – Sonnengelb: Highlights, Badges, „Für Jung und Alt“ */
  --c-accent:         #F5A81C;
  --c-accent-soft:    #FCE7BE;

  /* Sekundär – Orange: Energie, CTAs, Hinweise (AA-sicher: Weiß auf Fläche) */
  --c-secondary:      #CF3E15;
  --c-secondary-soft: #FBE1D7;

  /* Himmel – Blau: Luftigkeit, Karte, Verlinkungen */
  --c-sky:            #3E9BD1;
  --c-sky-soft:       #DEEEF8;

  /* Neutrale Basis (warmes Creme wie der Flyer) */
  --c-bg:             #FCF7EE;   /* Seitenhintergrund */
  --c-surface:        #FFFFFF;   /* Karten / Panels */
  --c-surface-2:      #F5EDDE;   /* abgesetzte, warme Fläche */
  --c-ink:            #14293D;   /* Haupttext – sehr hoher Kontrast (Navy) */
  --c-ink-soft:       #3A4C5C;
  --c-muted:          #5E6B77;   /* sekundärer Text */
  --c-border:         #E8DECC;   /* Linien / Rahmen */

  /* Semantische / Aktions-Tokens */
  --c-cta:            var(--c-secondary);   /* Orange-Button, weiße Schrift */
  --c-cta-hover:      #B5340E;
  --c-cta-text:       #FFFFFF;
  --c-link:           #1668A0;   /* dunkleres Himmelblau – AA auf Weiß */
  --c-focus:          #1266B5;   /* deutlich sichtbarer Fokusring */

  /* Zustände */
  --c-success:        #2E7D4F;
  --c-warning:        #B26B00;
  --c-danger:         #C23616;

  /* ---------- TYPOGRAFIE ---------- */
  /* Systemschrift-Stack: 0 externe Requests, DSGVO-freundlich,
     sehr gut lesbar. Eine Marken-Schrift lässt sich später via
     @font-face an dieser einen Stelle ergänzen. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-display: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue",
               Arial, sans-serif;

  /* Fluide, senioren-freundliche Schriftskala (min ~18px) */
  --fs-base:  clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); /* ~17–19px */
  --fs-sm:    clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-lg:    clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
  --fs-h4:    clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --fs-h3:    clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-h2:    clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-h1:    clamp(2.25rem, 1.7rem + 3.2vw, 4rem);
  --fs-display: clamp(2.5rem, 1.8rem + 4vw, 4.75rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- ABSTÄNDE (4/8-px-Skala) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Vertikaler Sektions-Rhythmus (fluide) */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* ---------- LAYOUT ---------- */
  --container: 1180px;
  --container-narrow: 820px;
  --gutter: clamp(1.15rem, 0.8rem + 2.2vw, 2.5rem);

  /* ---------- RADIEN ---------- */
  --r-sm: 0.5rem;
  --r-md: 0.85rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-pill: 999px;

  /* ---------- SCHATTEN (weich, dezent) ---------- */
  --shadow-xs: 0 1px 2px rgba(30, 42, 36, 0.06);
  --shadow-sm: 0 2px 8px rgba(30, 42, 36, 0.07);
  --shadow-md: 0 8px 24px rgba(30, 42, 36, 0.09);
  --shadow-lg: 0 18px 48px rgba(30, 42, 36, 0.14);

  /* ---------- BEWEGUNG ---------- */
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- TOUCH / BEDIENUNG ---------- */
  --tap-min: 3rem;          /* ≥48px Mindest-Touch-Ziel */
  --header-h: 4.5rem;

  /* ---------- Z-INDEX ---------- */
  --z-header: 100;
  --z-menu: 200;
  --z-lightbox: 300;
  --z-toast: 400;
}

/* Bewegung reduzieren: alle Übergänge fast ausschalten */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}