/* =========================================================================
   BOTT – Heizung & Sanitär  ·  Color & Type Foundations
   Familienbetrieb seit 1914 · Bosch Premium Platin Partner
   -------------------------------------------------------------------------
   Tonalität: hochwertig + technisch + bodenständig.
   Primär: tiefes Petrolblau (aus dem Logo) – auch Primär-Aktion/CTA. Akzent: warmes Kupfer
   (Eyebrows, Links, Benefit – nicht für Primär-CTAs).
   Neutralwelt: Anthrazit + ruhige Grautöne, viel Weißraum.
   ========================================================================= */

/* --- Fonts -------------------------------------------------------------- */
/* NOTE (DSGVO): In Produktion müssen Fonts SELBST GEHOSTET werden – Google
   Fonts per CDN ist in Deutschland datenschutzrechtlich problematisch.
   Hier zur Vorschau via CDN geladen; im README als Aufgabe vermerkt.        */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---------------------------------------------------------------------
     BRAND · Petrolblau  (Kompetenz, Technik, Wasser/Wärme – Logo-Farbe)
     --------------------------------------------------------------------- */
  --petrol-950: #0B2230;   /* tiefster Ink-Blauton, Dark-Sections      */
  --petrol-900: #0F2E40;
  --petrol-800: #163E56;
  --petrol-700: #1B4A66;
  --petrol-600: #205070;   /* ★ Brand Primary (Logo)                   */
  --petrol-500: #2E6488;
  --petrol-400: #5A87A4;
  --petrol-300: #93B2C6;
  --petrol-200: #C3D4DF;
  --petrol-100: #E1EAF0;
  --petrol-50:  #EEF3F6;

  /* ---------------------------------------------------------------------
     ACCENT · Kupfer / Bronze  (warmer Akzent: Eyebrows, Links, Förderung/Benefit)
     Hinweis: Primär-Aktion ist Petrol (Logo-Kernton); Kupfer NICHT für Primär-CTAs.
     --------------------------------------------------------------------- */
  --copper-900: #6E3A1F;
  --copper-800: #8A4827;
  --copper-700: #A1542C;
  --copper-600: #B5673A;   /* ★ Warmer Akzent (Eyebrows/Links/Benefit) */
  --copper-500: #C67C4E;
  --copper-400: #D69B73;
  --copper-300: #E5BC9E;
  --copper-200: #F0D6C3;
  --copper-100: #F7E8DD;
  --copper-50:  #FBF3EC;

  /* ---------------------------------------------------------------------
     KEIN GRÜN. Förderung/Benefit-Momente nutzen Kupfer (Wert/Wärme),
     Bestätigungen/Erfolg nutzen Petrol (ruhig, vertrauenswürdig).
     --------------------------------------------------------------------- */

  /* ---------------------------------------------------------------------
     NEUTRAL · Anthrazit + ruhige, leicht kühle Grautöne
     --------------------------------------------------------------------- */
  --ink:       #14202A;    /* Headlines / Anthrazit                    */
  --slate-800: #243440;
  --slate-700: #38454F;
  --slate-600: #4C5961;    /* sekundärer Text                          */
  --slate-500: #647079;    /* Fließtext-Alt / Captions                 */
  --slate-400: #8B959C;
  --slate-300: #B9C1C6;
  --line:      #E2E8EC;    /* Standard-Border                          */
  --line-soft: #EDF1F3;
  --paper:     #F5F8F9;    /* ruhiger Section-Hintergrund              */
  --paper-warm:#FAF7F4;    /* warmer Section-Hintergrund (Familie)     */
  --white:     #FFFFFF;

  /* ---------------------------------------------------------------------
     SEMANTIC
     --------------------------------------------------------------------- */
  --color-fg:        var(--ink);
  --color-fg-muted:  var(--slate-600);
  --color-fg-soft:   var(--slate-500);
  --color-bg:        var(--white);
  --color-bg-alt:    var(--paper);
  --color-primary:   var(--petrol-600);
  --color-primary-ink: var(--petrol-900);
  --color-cta:       var(--petrol-600);  /* Primär-Aktion = Petrol (Logo) */
  --color-cta-hover: var(--petrol-700);
  --color-accent:    var(--copper-600);  /* warmer Akzent / Benefit       */
  --color-accent-hover: var(--copper-700);
  --color-link:      var(--petrol-600);
  --color-border:    var(--line);

  --color-success:   var(--petrol-600);  /* Bestätigung / Erfolg         */
  --color-benefit:   var(--copper-600);  /* Förderung / Wert-Highlight    */
  --color-info:      var(--petrol-500);
  --color-warning:   #B7791F;
  --color-danger:    #B4392E;
  --color-star:      #F5B400;          /* Google-Bewertungssterne       */

  --focus-ring:      0 0 0 3px rgba(32,80,112,.32);

  /* ---------------------------------------------------------------------
     TYPE FAMILIES
     --------------------------------------------------------------------- */
  --font-display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  /* Type scale (Major-Third-nah, mobile-first) ------------------------- */
  --fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 4.5rem);   /* Hero          */
  --fs-h1:      clamp(2.1rem, 1.3rem + 3.0vw, 3.25rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 1.9vw, 2.45rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-h4:      1.18rem;
  --fs-lead:    clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem);
  --fs-body:    1.05rem;
  --fs-sm:      0.94rem;
  --fs-xs:      0.82rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-body:    1.65;

  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.02em;

  /* ---------------------------------------------------------------------
     SPACING · 4px-Basis
     --------------------------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;
  --section-y: clamp(64px, 9vw, 128px);
  --container:  1200px;
  --container-narrow: 760px;

  /* ---------------------------------------------------------------------
     RADIUS · zurückhaltend, Seriosität vor Verspieltheit
     --------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOWS · weich, kühl getönt, dezent
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15,46,64,.06);
  --shadow-sm: 0 2px 8px rgba(15,46,64,.07);
  --shadow-md: 0 8px 24px rgba(15,46,64,.09);
  --shadow-lg: 0 18px 48px rgba(15,46,64,.13);
  --shadow-cta: 0 8px 20px rgba(32,80,112,.26);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .26s;
}

/* =========================================================================
   BASE / SEMANTIC ELEMENTS
   ========================================================================= */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}

.display { font-size: var(--fs-display); font-weight: 800; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--slate-600);
  font-weight: 400;
}

p { margin: 0 0 1em; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--copper-700);
}

small, .text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

a { color: var(--color-link); text-decoration-color: var(--petrol-300); text-underline-offset: 3px; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

::selection { background: var(--copper-200); color: var(--ink); }

/* Icon language — technisch geschärft: klare Kanten, keine verspielten Rundungen.
   Überschreibt Lucides runde Caps/Joins systemweit für eine ernste Formsprache. */
svg.lucide {
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 8;
  stroke-width: 1.6;
}