/* ==========================================================================
   mk-Haustechnik · Design-Tokens
   Farben abgeleitet aus dem bestehenden Logo: Anthrazit/Chrom + Linie Rot → Türkis
   (Wärme ↔ Wasser, wie die Markierung an einer Mischbatterie).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-normal-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-normal-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-italic-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Rohfarben (HSL-Kanäle) --- */
  --ink-hsl: 210 17% 9%;          /* #14181C  Text, dunkle Sektionen */
  --slate-hsl: 210 14% 16%;       /* #232A31  dunkle Karten */
  --graphite-hsl: 210 11% 23%;    /* Linien auf Dunkel */
  --steel-hsl: 208 9% 46%;        /* #6B7680  feine Linien */
  --steel-text-hsl: 208 11% 36%;  /* Sekundärtext auf Hell (≥ 4.5:1) */
  --chrome-hsl: 205 12% 78%;      /* Chrom-Ton aus dem Logo, Text auf Dunkel */
  --paper-hsl: 36 17% 96%;        /* #F6F4F1  heller Grund */
  --paper-2-hsl: 34 14% 91%;      /* abgesetzte helle Fläche */
  --mist-hsl: 192 22% 93%;        /* kühle Fläche (Sanitär/Klima) */
  --white-hsl: 0 0% 100%;

  --heat-hsl: 10 76% 50%;         /* Logo-Rot, Punkte & Linien */
  --heat-strong-hsl: 10 74% 40%;  /* CTA-Fläche, weiße Schrift ≥ 5:1 */
  --heat-deep-hsl: 10 72% 33%;    /* Hover */
  --water-hsl: 184 45% 52%;       /* Logo-Türkis, Punkte & Linien */
  --water-strong-hsl: 192 72% 28%;/* Links/Text auf Hell ≥ 4.5:1 */
  --water-deep-hsl: 192 72% 22%;  /* Hover */

  /* --- Semantische Tokens --- */
  --color-bg: hsl(var(--paper-hsl));
  --color-surface: hsl(var(--white-hsl));
  --color-surface-raised: hsl(var(--white-hsl));
  --color-surface-sunk: hsl(var(--paper-2-hsl));
  --color-cool: hsl(var(--mist-hsl));
  --color-ink: hsl(var(--ink-hsl));
  --color-ink-raised: hsl(var(--slate-hsl));
  --color-text: hsl(var(--ink-hsl));
  --color-text-muted: hsl(var(--steel-text-hsl));
  --color-text-on-dark: hsl(var(--paper-hsl));
  --color-text-on-dark-muted: hsl(var(--chrome-hsl));
  --color-border: hsl(var(--ink-hsl) / 0.12);
  --color-border-strong: hsl(var(--ink-hsl) / 0.28);
  --color-border-dark: hsl(var(--white-hsl) / 0.14);
  --color-heat: hsl(var(--heat-hsl));
  --color-heat-strong: hsl(var(--heat-strong-hsl));
  --color-heat-deep: hsl(var(--heat-deep-hsl));
  --color-water: hsl(var(--water-hsl));
  --color-water-strong: hsl(var(--water-strong-hsl));
  --color-water-deep: hsl(var(--water-deep-hsl));
  --color-focus: hsl(var(--water-strong-hsl));
  --color-focus-on-dark: hsl(var(--water-hsl));

  /* Die Logolinie: Rot → Türkis */
  --brand-line: linear-gradient(90deg, hsl(var(--heat-hsl)) 0%, hsl(var(--heat-hsl)) 18%, hsl(var(--water-hsl)) 82%, hsl(var(--water-hsl)) 100%);

  /* --- Typografie --- */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --display-stretch: 112%;

  --text-xs: 0.875rem;                                    /* 14 – nur Labels */
  --text-sm: 1rem;                                        /* 16 */
  --text-base: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem); /* 18–19 */
  --text-lg: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --text-display: clamp(2.25rem, 0.6rem + 8.4vw, 6rem);

  --leading-tight: 1.05;
  --leading-heading: 1.12;
  --leading-body: 1.6;
  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-label: 0.08em;

  --measure: 66ch;

  /* --- Spacing (4px-Basis) --- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --section-y: clamp(var(--space-8), 4rem + 5vw, var(--space-10));
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --container: 80rem;   /* 1280 */
  --container-narrow: 48rem; /* 768 */

  /* --- Form --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --line: 2px;
  --shadow-sm: 0 1px 2px hsl(20 30% 10% / 0.06), 0 2px 6px hsl(20 30% 10% / 0.05);
  --shadow-md: 0 6px 16px -4px hsl(20 30% 10% / 0.12), 0 2px 4px hsl(20 30% 10% / 0.06);
  --shadow-lg: 0 24px 48px -16px hsl(20 30% 8% / 0.28);

  --tap: 44px;
  --header-h: 4.5rem;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.18, 0.64, 1); /* leichter Überschwinger */
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 420ms;
  --dur-4: 600ms;
  --dur-reveal: 440ms;
  --reveal-shift: 14px;
  --stagger: 70ms;

  --z-header: 50;
  --z-sticky: 40;
  --z-overlay: 100;
}