/* ============================================================
   Pro Tier — Immobilien Partner Saarland (IPS)
   Farben aus dem Logo (img/logo.svg):
     Gold  rgb(197,164,73) = hsl(44, 52%, 53%)  — Ring + Fenster
     Oliv  rgb(50,48,28)   ≈ hsl(55, 28%, 15%)  — Dach + Schriftzug
   Headings: Jost · Body: Raleway (wie Legacy-Website, _legacy/rp/assets/css/_variablen.css)
   ============================================================ */

/* Self-hosted Webfonts (DSGVO-konform, Files unter html/assets/fonts/).
   Beide sind Variable Fonts (wght 100–900) — ein File pro Subset deckt alle Schnitte ab.
   Erzeugt aus den Legacy-TTFs (fontTools-Subset latin / latin-ext → WOFF2). */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../../fonts/Jost-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: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../../fonts/Jost-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: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../../fonts/Raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../../fonts/Raleway-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 {
  /* Primary: Logo-Gold, abgedunkelt. Das Original-Gold (#c5a449) hat gegen Weiß nur
     2.4:1 — der Kernel nutzt Primary aber als Link-/Textfarbe auf Hell UND als
     Button-BG unter weißem Text. L33 → 5.0:1 auf Weiß, 4.75:1 auf --color-bg-alt (WCAG AA). */
  --color-primary:       hsl(44, 60%, 33%);   /* ≈ #876c22 */
  --color-primary-hover: hsl(44, 62%, 26%);   /* ≈ #6c561a, 7.1:1 */

  /* Accent: Original-Logo-Gold — nur dekorativ (Icons, Linien, Rahmen),
     nicht als Textfarbe auf hellem Grund. */
  --color-accent:        hsl(44, 52%, 53%);   /* #c5a449 */
  --color-accent-hover:  hsl(44, 55%, 45%);

  /* Complement: Logo-Oliv — Badges, .btn.complement, getönte Trenner.
     Weißer Text darauf 13:1. */
  --color-complement:       hsl(55, 28%, 20%);
  --color-complement-hover: hsl(55, 28%, 13%);

  /* Text: warmes Anthrazit (Legacy --clr-immo-detail). muted/light ≥ 4.5:1 gegen --color-bg-alt.
     Im Footer (dunkler BG) cascadieren #footer-Overrides aus components/footer.css. */
  --color-text:       hsl(50, 8%, 15%);
  --color-text-muted: hsl(50, 5%, 38%);
  --color-text-light: hsl(50, 5%, 43%);

  /* Backgrounds: Weiß + zarter Gold-Tint (Legacy --clr-accent-light) für alternierende Sections.
     Dunkel = Legacy-Footer-Oliv. */
  --color-bg:      hsl(0, 0%, 100%);
  --color-bg-alt:  hsl(44, 30%, 97%);
  --color-bg-dark: hsl(55, 28%, 10%);       /* #211f12 */

  /* Topbar: Oliv wie Footer, weißer Text */
  --color-topbar:      hsl(55, 28%, 10%);
  --color-topbar-text: hsl(0, 0%, 100%);

  /* Borders: leicht warm getönt */
  --color-border:      hsl(44, 12%, 88%);
  --color-border-alt:  hsl(44, 15%, 93%);
  --color-border-dark: hsl(44, 10%, 78%);

  --color-icon: var(--color-primary);

  /* Typography: Jost (geometrisch, wie der Logo-Schriftzug) für Headings,
     Raleway für Fließtext */
  --font-base:    'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent:  'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-accent);
  --font-nav:     var(--font-accent);
  --font-button:  var(--font-accent);

  /* ─── Flächen, Formen, Header- und Teaser-Maße ─────────────────────── */

  /* Vollbreite Bänder, aus --color-bg-dark (Oliv) aufgehellt → gleicher Hue:
       --color-band       Partner-Band + Kontaktzeile (~95 %)
       --color-band-deep  Abschluss-CTA (~90 %, eine Stufe dunkler)
     Beide hell, Text darauf in --color-text (partners.css, contact-cta.css). */
  --color-band:      color-mix(in srgb, var(--color-bg-dark)  5%, hsl(0 0% 100%));
  --color-band-deep: color-mix(in srgb, var(--color-bg-dark) 10%, hsl(0 0% 100%));

  /* Icon-Strichstärke — fein, passend zu Raleway 300 */
  --icon-stroke: 1.5;

  /* Buttons: weite Laufweite (wie SAARLAND im Logo), dezent gerundet */
  --button-tracking: var(--tracking-wide);
  --btn-radius:  0.25rem;
  --btn-padding: var(--space-4) var(--space-8);

  /* Radius: zurückhaltend, nicht kantig */
  --radius:    0.25rem;
  --radius-lg: 0.375rem;

  /* Schmale Seiten (CMS, Kontakt, Impressum) auf volle Content-Breite */
  --width-narrow: 95rem;

  /* Schwebender Header über dem Hero (Startseite, Desktop — header.css).
     Kontaktzeile + Service-Nav teilen sich eine Zeile → zwei Zeilen:
     topline (2.5rem) + Brand/Nav (4.5rem-Logo + 2×1.5rem Kernel-Padding an #brand).
     Gemessen auf ips.immoprofessional.eu (24.09.2026): 40 + 120 = 160px = 10rem.
     Muss zur tatsächlichen Header-Höhe passen, sonst Lücke bzw. Überlappung. */
  --header-fixed-height:        10rem;
  --header-fixed-height-mobile: 7rem;

  /* Kompakte Teaser der Unterseiten: Kernel-35vh ist bei voller Breite zu flach.
     Immer den KOMPLETTEN Satz setzen (sonst wirkt es nur auf Desktop). */
  --teaser-compact-min-height:        44vh;
  --teaser-compact-min-height-tablet: 38vh;
  --teaser-compact-min-height-mobile: 32vh;

  /* Property-Hero weniger flach (3/2 statt 16/9) → baked-in-Banner wird nicht angeschnitten. */
  --property-hero-aspect: 3 / 2;

  /* Links (.link external + .link download): Marken-Gold statt Default-Grau. */
  --link-download-border-hover: var(--color-primary);
  --link-download-icon-color:   var(--color-primary);
  --link-external-icon-color:   var(--color-primary);

  /* LocalArea-Pills: Pin-Icon in Gold */
  --local-area-pill-icon-color: var(--color-accent);
}