/* ============================================================
   Pro Tier — ECOTHERM Immobilien GmbH, Achern

   Corporate-Farben, gemessen auf im-ecotherm.de:
     Blau  #0061AA = hsl(206, 100%, 33%)   Kopf-/Fußbalken
     Gold  #A9762D = hsl( 35,  58%, 42%)   H1-Überschriften

   ⚠ Gold NICHT auf Blau (1,6:1). Auf dem Nachtblau dagegen 3,7:1.
   ⚠ brand-gold nur für GROSSE Schrift (3,95:1). Für Text/Buttons
     stattdessen --color-complement (5,27:1).
   ============================================================ */

:root {
  /* Default-Blau = Nachtblau. Trägt Buttons, Links und aktive Zustände
     im gesamten Auftritt ausserhalb des Kopfes.
     ⚠ 1,00:1 gegen --color-text → Links im Fliesstext unterscheiden sich
       nur über Unterstreichung/Gewicht, nicht über die Farbe. */
  --color-primary:       var(--color-night);
  --color-primary-hover: var(--color-night-deep);
  --color-accent:        var(--color-night);
  --color-accent-hover:  var(--color-night-deep);

  /* Original-Corporate-Blau — NUR im Header (Topline + Logo-Band). */
  --color-brand-blue:    hsl(206, 100%, 33%);

  /* Gold/Bronze. brand-gold = Original (Headlines, Deko),
     complement = abgedunkelt und AA-fest (Badges, .btn.complement, Bänder). */
  --color-brand-gold:       hsl(35, 58%, 42%);
  --color-complement:       hsl(35, 62%, 35%);
  --color-complement-hover: hsl(35, 66%, 29%);

  /* Nachtblau — Navigations-Sockel, Footer, dunkle Sections.
     2,31:1 zum Corporate-Blau = klar erkennbare Stufe. */
  --color-night:      hsl(214, 45%, 17%);
  --color-night-deep: hsl(216, 42%, 13%);

  /* Text — Graphit mit leichtem Blaustich (210°). */
  --color-text:       hsl(210, 12%, 16%);
  --color-text-muted: hsl(210,  8%, 36%);
  --color-text-light: hsl(210,  8%, 44%);

  --color-graphite:      hsl(210, 14%, 24%);
  --color-graphite-deep: hsl(210, 18%, 15%);

  --color-bg:      hsl(0, 0%, 100%);
  --color-bg-alt:  hsl(210, 20%, 97%);

  /* Footer: night-DEEP, nicht night — sonst verschwinden Buttons
     (= --color-primary) vollständig in der Fläche. */
  --color-bg-dark: var(--color-night-deep);

  --color-topbar:      var(--color-brand-blue);
  --color-topbar-text: hsl(0, 0%, 100%);

  /* Bänder — aus --color-bg-dark aufgehellt, tragen denselben Hue.
     band-deep trägt das Abschluss-CTA (siehe card.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%));

  /* Kräftiger als die Kernel-Defaults — feine Hairlines verschwinden
     für ältere Augen. */
  --color-border:      hsl(210, 14%, 85%);
  --color-border-alt:  hsl(210, 16%, 91%);
  --color-border-dark: hsl(210, 12%, 74%);

  --font-base:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent:  Georgia, 'Times New Roman', serif;
  --font-heading: var(--font-accent);

  /* Zielgruppe 60+: Fließtext und Zeilenabstand über dem Plattform-Default. */
  --text-base: 1.0625rem;
  --leading:   1.7;

  --button-tracking: 0.06em;
  --icon-stroke:     2.25;

  --btn-radius:  0.125rem;
  --btn-padding: var(--space-4) var(--space-8);
  --radius:      0.125rem;
  --radius-lg:   0.25rem;

  /* Schmale Content-Seiten laufen auf voller Breite mit.
     Auf 52rem zurücksetzen, wenn Lesezeilen zu breit werden. */
  --width-narrow: var(--content-width);

  --property-hero-aspect: 3 / 2;
}