/* ==========================================================================
   VITA UMZÜGE – Design Tokens & Schriften
   Schriften werden selbst gehostet (kein Google-Fonts-CDN → DSGVO-konform).
   ========================================================================== */

/* --- Cinzel: Display-Serif, passend zur Wortmarke im Logo ---------------- */
@font-face {
  font-family: 'Cinzel';
  src: url('../../public/fonts/cinzel-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../../public/fonts/cinzel-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../../public/fonts/cinzel-latin-ext-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304-0305, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../../public/fonts/cinzel-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Inter: klare Sans-Serif für Fließtext und UI ------------------------ */
@font-face {
  font-family: 'Inter';
  src: url('../../public/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../public/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304-0305, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../../public/fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../public/fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../public/fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Markenfarben (aus dem Logo & Flyer) ------------------------------ */
  --black:        #0A0C0A;
  --black-soft:   #101210;
  --charcoal:     #171713;
  --charcoal-2:   #1F1F1A;
  --charcoal-3:   #2A2A24;
  --gold:         #DCBB70;
  --gold-light:   #ECDAA8;
  --gold-deep:    #B8923F;
  --gold-ink:     #7E5F16;   /* kontraststarkes Gold für helle Flächen (AA) */
  --white:        #F2F0E6;
  --white-pure:   #FFFFFF;

  /* --- Semantische Rollen: dunkles Standardthema ------------------------ */
  --bg:           var(--black);
  --bg-raised:    var(--charcoal);
  --ink:          var(--white);
  --ink-muted:    #C9C7BC;
  --ink-subtle:   #8E8C82;
  --accent:       var(--gold);
  --accent-text:  var(--gold);
  --line:         rgba(220, 187, 112, .20);
  --line-soft:    rgba(242, 240, 230, .10);
  --card:         rgba(242, 240, 230, .035);
  --card-hover:   rgba(242, 240, 230, .06);
  --shadow:       0 24px 60px -28px rgba(0, 0, 0, .85);
  --shadow-gold:  0 16px 40px -18px rgba(220, 187, 112, .35);

  /* --- Typografie ------------------------------------------------------- */
  --font-display: 'Cinzel', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:   clamp(2.05rem, 1.05rem + 4.5vw, 4.5rem);
  --fs-hero-lead: clamp(.95rem, .92rem + .3vw, 1.12rem);
  --fs-h2:     clamp(1.85rem, 1.05rem + 3.1vw, 3.5rem);
  --fs-h3:     clamp(1.15rem, .95rem + .85vw, 1.6rem);
  --fs-h4:     clamp(1rem, .92rem + .38vw, 1.2rem);
  --fs-lead:   clamp(1.02rem, .96rem + .42vw, 1.28rem);
  --fs-body:   clamp(.95rem, .92rem + .16vw, 1.05rem);
  --fs-small:  clamp(.82rem, .8rem + .1vw, .9rem);
  --fs-kicker: clamp(.68rem, .66rem + .1vw, .78rem);
  --fs-num:    clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);

  --lh-tight: 1.06;
  --lh-head:  1.14;
  --lh-body:  1.72;
  --ls-kicker: .3em;
  --ls-display: .015em;

  /* --- Raster & Abstände ------------------------------------------------ */
  --wrap:       1280px;
  --wrap-wide:  1480px;
  --wrap-text:  68ch;
  --gutter:     clamp(1.15rem, .6rem + 2.4vw, 2.75rem);
  --sec-y:      clamp(4.25rem, 2rem + 8vw, 9.5rem);
  --sec-y-sm:   clamp(3rem, 1.6rem + 5vw, 6rem);
  --gap:        clamp(1.1rem, .7rem + 1.5vw, 2rem);
  --gap-lg:     clamp(1.75rem, 1rem + 3vw, 4rem);

  --radius:     4px;
  --radius-lg:  8px;
  --radius-pill: 999px;

  /* --- Bewegung --------------------------------------------------------- */
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --t-fast:     .22s;
  --t:          .42s;
  --t-slow:     .85s;

  --header-h:      clamp(74px, 5.4vw, 104px);
  --header-h-tight: clamp(60px, 4.2vw, 76px);
  /* Der Kopfbereich liegt ÜBER dem Mobilmenü, damit Logo und das
     Schließen-Kreuz bei offenem Menü sichtbar und antippbar bleiben. */
  --z-bar: 90; --z-menu: 110; --z-nav: 120; --z-lightbox: 200;
}

/* --- Helles Sektionsthema (Rollen tauschen, Farben bleiben) ------------- */
.theme-light {
  --bg:         var(--white);
  --bg-raised:  var(--white-pure);
  --ink:        #1A1A16;
  --ink-muted:  #4A4A42;
  --ink-subtle: #6E6E64;
  --accent:     var(--gold-deep);
  --accent-text: var(--gold-ink);
  --line:       rgba(126, 95, 22, .22);
  --line-soft:  rgba(26, 26, 22, .10);
  --card:       #FFFFFF;
  --card-hover: #FFFFFF;
  --shadow:     0 22px 50px -26px rgba(26, 24, 16, .28);
  --shadow-gold: 0 18px 40px -20px rgba(184, 146, 63, .32);
}

/* --- Dunkles Sektionsthema (explizit, für Klarheit im Markup) ---------- */
.theme-dark  { --bg: var(--black);    --bg-raised: var(--charcoal); }
.theme-char  { --bg: var(--charcoal); --bg-raised: var(--charcoal-2); }