/* ===================================================================
   CIRCLEONE — Design Tokens
   Grundlage: „Pixel-Perfect HTML/CSS Masteranalyse", Kap. 03–05, 15
   Abgeglichen mit den gemessenen Werten aus dem Live-Bestand.
   =================================================================== */

:root {
  /* ── Farbsystem (Masteranalyse Kap. 03) ───────────────────────── */
  --co-gold:        #C8A775;  /* Logo, Eyebrow, Linien, Icons, Nummern */
  --co-gold-dark:   #9E7E50;  /* Hover und aktive Zustände */
  /* Kleine Schrift in Gold auf hellem Grund. #9E7E50 erreicht nur 3.78:1 —
     zu wenig für WCAG AA. Dieser Ton erreicht 4.97:1 auf Weiß, 4.78:1 auf --co-paper. */
  --co-gold-text:   #8A6A42;
  --co-graphite:    #555856;  /* Logo-ONE, Bodytext, Navigation */
  --co-charcoal:    #171918;  /* Dunkle Sektionen, Footer, Overlays */
  --co-paper:       #FAF9F6;  /* Warme Hintergrundfläche */
  --co-soft:        #EAE9E5;  /* Formfelder, Trennflächen, dezente Cards */
  --co-white:       #FFFFFF;
  --co-line:        #D9D8D4;  /* 1px Borders und Divider */
  --co-error:       #C94848;  /* nur funktional */
  --co-success:     #3F7D58;  /* nur funktional */

  /* Overlays über Bildern — Zielwert 38–55 % Schwarz je Motiv */
  --co-ov-soft:     rgba(23, 25, 24, .38);
  --co-ov:          rgba(23, 25, 24, .46);
  --co-ov-strong:   rgba(23, 25, 24, .55);

  /* ── Dunkle Flächen (Dark-Theme, Kundenwunsch 08/2026) ────────── */
  --surface-0: #101211;   /* tiefste Fläche — sec--dark */
  --surface-1: #171918;   /* Seitengrund */
  --surface-2: #1D201E;   /* ehem. paper */
  --surface-3: #242826;   /* Karten */
  --line-dark: rgba(255, 255, 255, .13);
  --text-hi:   #FFFFFF;
  --text-mid:  rgba(255, 255, 255, .82);
  --text-low:  rgba(255, 255, 255, .60);

  /* ── Typografie (Masteranalyse Kap. 04) ───────────────────────── */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Headlines um 40 % vergrößert und auf 800 verdichtet (Kundenwunsch 08/2026) */
  --fs-display: clamp(3.125rem, 2rem + 5.2vw, 7.375rem);
  --fs-h1:      clamp(3rem, 2.1rem + 4.1vw, 6.25rem);
  --fs-h2:      clamp(2.5rem, 1.9rem + 2.9vw, 4.75rem);
  --fs-h3:      clamp(1.75rem, 1.5rem + 1vw, 2.75rem);
  --fs-h4:      clamp(1.375rem, 1.28rem + .5vw, 1.75rem);
  /* Lead           19–23 D · 18–21 T · 17–19 M · 400 / 1.48 */
  --fs-lead:    clamp(1.0625rem, 1rem + .33vw, 1.4375rem);
  /* Body           16–18 D · 16–17 T · 16 M · 400 / 1.55–1.65 */
  --fs-body:    clamp(1rem, .96rem + .18vw, 1.125rem);
  --fs-small:   .9375rem;
  --fs-nav:     clamp(.8125rem, .78rem + .16vw, .9375rem);
  --fs-btn:     clamp(.8125rem, .79rem + .13vw, .9375rem);
  --fs-eyebrow: clamp(.625rem, .6rem + .13vw, .8125rem);
  /* Index 01/02/03  64–96 D · 54–76 T · 44–58 M · 300–500 / .95 */
  --fs-index:   clamp(2.75rem, 1.85rem + 3.3vw, 6rem);

  --lh-display: .96;
  --lh-h1:      1.0;
  --lh-h2:      1.08;
  --lh-h3:      1.16;
  --lh-lead:    1.48;
  --lh-body:    1.62;

  --ls-display: -.035em;
  --ls-h1:      -.025em;
  --ls-h2:      -.02em;
  --ls-eyebrow: .16em;
  --ls-btn:     .01em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-heavy:   700;

  /* ── Spacing-Skala (Masteranalyse Kap. 05) ────────────────────── */
  /* 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 112 / 144 */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 112px;
  --sp-13: 144px;

  --space-xs:  8px;
  --space-sm:  clamp(12px, 1.1vw, 16px);
  --space-md:  clamp(20px, 2.2vw, 32px);
  --space-lg:  clamp(32px, 4vw, 64px);
  --space-xl:  clamp(56px, 7vw, 112px);   /* Section-Innenabstand */
  --space-2xl: clamp(72px, 9vw, 144px);   /* große Szenenwechsel */

  /* ── Canvas & Raster ──────────────────────────────────────────── */
  --container: 1320px;
  --gutter:    clamp(14px, 2.4vw, 48px);
  --grid-gap:  clamp(12px, 1.6vw, 24px);

  /* ── Radien & Schatten ────────────────────────────────────────── */
  --r-sm:   26px;
  --r-md:  26px;
  --r-lg:  26px;
  --r-xl:  26px;
  --r-2xl: 26px;
  --r-pill: 999px;
  --shadow-soft:  0 14px 40px rgba(17, 25, 22, .08);
  --shadow-head:  0 12px 36px rgba(17, 25, 22, .08);

  /* ── Motion (Masteranalyse Kap. 15) ───────────────────────────── */
  --dur-fast:   160ms;
  --dur-ui:     240ms;
  --dur-card:   420ms;
  --dur-layout: 660ms;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft:   cubic-bezier(.16, 1, .3, 1);

  /* ── Header ───────────────────────────────────────────────────── */
  --bar-h:      38px;   /* Standortleiste 34–40 px */
  --head-h:     84px;   /* Hauptnavigation 76–88 px */
  --head-h-sm:  68px;   /* gescrollt */
  --head-h-mob: 66px;   /* 64–72 px */

  /* ── Formulare (Masteranalyse Kap. 13) ────────────────────────── */
  --field-h:    54px;   /* 52–56 px */
  --field-r:    26px;
  --z-header:   80;
  --z-overlay:  120;
  --z-modal:    140;
}

/* Breakpoints als Referenz (nicht in @media nutzbar):
   ≤390 · ≤559 · 560–767 · 768–1023 · 1024–1279 · ≥1280 · Master 1440 */