:root {
  /* ── Logo-Farben ──────────────────────────────── */
  /* Rot  = Schriftzug "Jahnschule Bergkamen"       */
  /* Blau = Sportlerfigur                           */

  /* ── Blau (Logo-Figur) ────────────────────────── */
  --blue:            #1A3282;
  --blue-dark:       #102060;
  --blue-light:      #2E4FA8;
  --blue-pale:       #E6EBF8;
  --blue-subtle:     #F0F3FA;

  /* ── Rot (Logo-Schrift) ───────────────────────── */
  --red:             #D12830;
  --red-dark:        #A81E26;
  --red-light:       #E05060;
  --red-pale:        #FDEDEF;

  /* ── Grün (positiver Akzent, OGS) ────────────── */
  --green:           #2E8A5F;
  --green-dark:      #236B49;
  --green-pale:      #E6F4ED;

  /* ── Neutrals ─────────────────────────────────── */
  --text:            #0F1E3D;
  --text-body:       #253050;
  --text-secondary:  #52607A;
  --text-muted:      #8B96AE;
  --bg:              #F8F9FF;
  --bg-warm:         #FFF7F7;
  --bg-section:      #F1F4FB;
  --white:           #FFFFFF;

  /* ── Borders & Shadows (Claymorphism) ─────────── */
  --border:          rgba(26, 50, 130, 0.12);
  --border-strong:   rgba(26, 50, 130, 0.22);
  --clay-border:     3px solid rgba(26, 50, 130, 0.16);
  --clay-border-r:   3px solid rgba(209, 40, 48, 0.35);
  --clay-border-g:   3px solid rgba(46, 138, 95, 0.35);

  --shadow-sm:       0 1px 4px rgba(15, 30, 61, 0.06);
  --shadow-md:       0 4px 20px rgba(15, 30, 61, 0.10);
  --shadow-lg:       0 12px 48px rgba(15, 30, 61, 0.13);
  --shadow-blue:     0 4px 24px rgba(26, 50, 130, 0.25);
  --shadow-red:      0 4px 20px rgba(209, 40, 48, 0.30);
  --shadow-clay:     4px 6px 0 rgba(26, 50, 130, 0.18), inset 0 -2px 0 rgba(26, 50, 130, 0.10);
  --shadow-clay-r:   4px 6px 0 rgba(168, 30, 38, 0.30), inset 0 -2px 0 rgba(168, 30, 38, 0.12);
  --shadow-clay-g:   4px 6px 0 rgba(35, 107, 73, 0.22), inset 0 -2px 0 rgba(35, 107, 73, 0.10);
  --shadow-card:     0 8px 32px rgba(15, 30, 61, 0.10), inset 0 1px 0 rgba(255,255,255,0.9);

  /* ── Spacing ──────────────────────────────────── */
  --section-py:      clamp(4.5rem, 8vw, 7.5rem);
  --container-px:    clamp(1.25rem, 5vw, 2.5rem);
  --max-w:           1600px;

  /* ── Radius (Claymorphism) ─────────────────────── */
  --r-sm:    10px;
  --r-md:    16px;
  --r-lg:    24px;
  --r-xl:    32px;
  --r-full:  9999px;

  /* ── Transitions ──────────────────────────────── */
  --t-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:    280ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-bounce:  200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-spring:  380ms cubic-bezier(0.34, 1.10, 0.64, 1);
  --t-slow:    460ms cubic-bezier(0.34, 1.56, 0.64, 1);
}