/* ============================================================
   Pro Tier — Sportpferde M&M Haunhorst
   Primary: HKS 78 Braun (#963934) · Accent: HKS 56 Grün (#00755C)
   Headings: Cinzel (Trajan-Look) · Body: Lato (humanistische Sans)
   Warm-toned neutrals für edlen, hochwertigen Look.
   ============================================================ */

/* Self-hosted Webfonts (DSGVO-konform, files unter html/assets/fonts/).
   Cinzel ist ein Variable Font — ein File deckt 400–700 ab. */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../../fonts/Cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../../fonts/Cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../../fonts/Lato-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../../fonts/Lato-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../fonts/Lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../fonts/Lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../../fonts/Lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../../fonts/Lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --width-narrow: 95rem;  /* etwas breitere Lese-Spalte */

  /* Primary: HKS 78 Braun — Haupt-Brand (exakter Match zum Logo) */
  --color-primary:       #963934;
  --color-primary-hover: #7c2f2b;

  /* Accent: HKS 56 Grün — dezent, für Highlights/CTAs */
  --color-accent:        hsl(167, 100%, 23%);
  --color-accent-hover:  hsl(167, 100%, 18%);

  /* Complement: HKS 56 Grün — Komplementärfarbe zum braunen Primary.
     Laut liesmich.txt hat die Marke genau zwei Farben (Braun + Grün), daher
     bewusst identisch zum Accent. Treibt .btn.complement, getönte Section-
     Trenner (--color-complement-soft, vom Kernel via color-mix) und dekorative
     Akzente. Für einen visuell eigenständigen 3. Ton hier einen anderen Wert setzen. */
  --color-complement:       hsl(167, 100%, 23%);
  --color-complement-hover: hsl(167, 100%, 18%);

  /* Text: warm charcoal. muted/light dunkler als optisch ideal, aber nötig
     für WCAG AA Kontrast (≥4.5:1) gegen --color-bg-alt.
     Im Footer (dunkler BG) cascadieren #footer-Overrides aus components/footer.css. */
  --color-text:       hsl(20, 8%, 15%);
  --color-text-muted: hsl(20, 6%, 38%);
  --color-text-light: hsl(20, 6%, 45%);

  /* Backgrounds: warm-cremiger Haupthintergrund — harmoniert mit dem
     Brand-Braun und sorgt für edlen Premium-Look (statt klinisch-weiß).
     Alt-BG ist ein Tick dunkler/saturierter für Card- und Section-
     Differenzierung. */
  --color-bg:      hsl(40, 16%, 97%);   /* sehr helles, fast weißes Creme ≈ #f9f7f2 */
  --color-bg-alt:  hsl(40, 14%, 94%);   /* einen Tick dunkler ≈ #f1ede6 */
  --color-bg-dark: hsl(20, 10%, 12%);

  /* Topbar: warm anthracite */
  --color-topbar:      hsl(20, 10%, 14%);
  --color-topbar-text: hsl(0, 0%, 100%);

  /* Borders: warm grey */
  --color-border:      hsl(30, 10%, 88%);
  --color-border-dark: hsl(30, 8%, 78%);

  /* Typography: Cinzel (Trajan-style Roman caps) für Headings,
     Lato (humanistische Sans) für Body — passt zum Logo-Charakter. */
  --font-base:    'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent:  'Cinzel', Georgia, 'Times New Roman', serif;
  --font-heading: var(--font-accent);

  /* Button-Letter-Spacing — pro Tier individuell. Pro: extra-weiter „luxury"-Look. */
  --button-tracking: var(--tracking-wide);

  /* Button-Look. Pro: minimal abgerundet (passt zu --radius), luxury-Padding. */
  --btn-radius:  0;
  --btn-padding: var(--space-4) var(--space-8);

  /* Subtle radius */
  --radius:    0.125rem;
  --radius-lg: 0.25rem;

  /* Header-Höhen-Kompensation für fixed #site-header.
     Wird auf body als padding-top gesetzt (Subpages + Compact-Teaser-Seiten),
     damit Content nicht hinterm Header verschwindet. */
  --header-fixed-height:         11rem;  /* Desktop: contact-bar + topbar + brand (6rem-Logo) */
  --header-fixed-height-mobile:   7rem;  /* Mobile/Tablet: schmaler (kein contact-bar bzw. nur Tablet) */

  /* ============================================================
     Teaser / Hero-Slider — Kernel-Vars aus components/teaser.css.
     Statt eigener header.css-Overrides hier zentral steuern.
     ============================================================ */

  /* Compact-Teaser (Subpages, <section id="teaser-slider" class="teaser-compact">).
     Schlanker Bild-Header im normalen Flow — bewusst niedriger als der
     vollflächige Welcome-Hero, damit der Content schnell sichtbar ist. */
  --teaser-compact-min-height:          42vh;

  /* Welcome-Hero (Homepage) — Frosted-Glass-Buttons über dem Hero-Foto.
     Heller, halbtransparenter Look mit weißem Text + Rand passt zum
     transparenten Header über dem Hero (modernisierte Optik). Hover füllt
     kräftiger auf. */
  --teaser-welcome-btn-bg:        hsl(0 0% 100% / 0.12);
  --teaser-welcome-btn-bg-hover:  hsl(0 0% 100% / 0.22);
  --teaser-welcome-btn-border:    hsl(0 0% 100% / 0.6);
  --teaser-welcome-btn-color:     hsl(0 0% 100%);
}