/* ==========================================================================
   Gerhard GmbH – Design-Tokens (Variante „Akzentuiert – Rohrlinie“)
   Ziel: public/theme/css/tokens.css (als erste CSS-Datei laden).
   Schriften: docs/design/fonts/*.woff2 nach public/theme/fonts/ kopieren.
   Regeln und Komponenten: docs/styleguide.md
   ========================================================================== */

/* ---------- Schriften (2 Familien, 2 Dateien, SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Saira Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700; /* variable Schrift: 400, 600, 700 aus einer Datei */
  font-display: swap;
  src: url("../fonts/source-sans-3-var-latin.woff2") format("woff2");
}

:root {
  /* ---------- Farben ---------- */
  /* Signalfarbe – nur für Buttons, Links, Fokus und Hervorhebungen. Nie als Fläche, Rahmen oder Motivfarbe. */
  --color-accent: #D62328;          /* Weiß darauf 5,08:1 */
  --color-accent-text: #FFFFFF;
  --color-accent-hover: #B81C21;    /* Weiß darauf 6,51:1; zugleich Link-Text auf Hell */
  --color-link: #B81C21;            /* auf #FFF 6,51:1, auf #F3F2EF 5,81:1 */
  --color-link-hover: #1D1D1B;
  --color-link-on-dark: #F26A6D;    /* auf #1D1D1B 5,67:1, auf #2A2A27 4,84:1 */

  --color-text: #1D1D1B;            /* Anthrazit aus dem Logo; auf #FFF 16,88:1 */
  --color-text-muted: #5F5E5A;      /* auf #FFF 6,49:1, auf #F3F2EF 5,80:1, auf #E6E4DF 5,11:1 */
  --color-heading: #1D1D1B;

  --color-bg: #FFFFFF;              /* Grundfläche */
  --color-surface: #F3F2EF;         /* Fläche hell: .section--muted, .section--trust, Karten auf Weiß */
  --color-line: #E6E4DF;            /* Trennlinien, Kartenrahmen (nicht für Formularrahmen) */
  --color-line-strong: #1D1D1B;     /* 4-px-Kante (Strich des Block-G) */
  --color-field-border: #5F5E5A;    /* Formularrahmen, Nicht-Text 6,49:1 auf Weiß */

  --color-dark: #1D1D1B;            /* Fläche dunkel: Footer, .cta-band, .notdienst */
  --color-dark-2: #2A2A27;          /* zweite dunkle Fläche (Footer-Unterzeile) */
  --color-on-dark: #F3F2EF;         /* auf #1D1D1B 15,08:1 */
  --color-on-dark-muted: #B9B7B0;   /* auf #1D1D1B 8,41:1, auf #2A2A27 7,17:1 */

  --color-motiv: #1D1D1B;           /* Motive auf Hell (nie Rot) */
  --color-motiv-on-dark: #F3F2EF;   /* Motive auf Dunkel */

  --color-error: #B81C21;           /* Fehlermeldung Formular, immer mit Text + Rahmen */
  --color-success: #2F6B3A;         /* Bestätigung Formular; auf #FFF 6,39:1, auf #F3F2EF 5,71:1 */

  --color-focus: #D62328;           /* Fokus-Ring auf Hell (Nicht-Text 5,08:1) */
  --color-focus-on-dark: #FFFFFF;   /* Fokus-Ring auf Dunkel (16,88:1) */

  /* ---------- Typografie ---------- */
  --font-head: "Saira Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-head: 700;

  /* fluide Skala 320 px → 1440 px, Verhältnis ≈ 1,2 (mobil) bis ≈ 1,25 (Desktop) */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);   /* 14 → 15 px  Meta, Bildunterschrift, Footer */
  --step-0:  clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);  /* 17 → 19 px  Fließtext */
  --step-1:  clamp(1.1875rem, 1.12rem + 0.33vw, 1.4375rem);  /* 19 → 23 px  Lead, h4 */
  --step-2:  clamp(1.375rem, 1.26rem + 0.56vw, 1.75rem);     /* 22 → 28 px  h3, Kartentitel */
  --step-3:  clamp(1.625rem, 1.42rem + 1.0vw, 2.3125rem);    /* 26 → 37 px  h2 */
  --step-4:  clamp(1.875rem, 1.52rem + 1.8vw, 3.125rem);     /* 30 → 50 px  h1 Unterseiten (.page-hero) */
  --step-5:  clamp(2rem, 1.5rem + 2.5vw, 3.75rem);           /* 32 → 60 px  h1 Startseite/Wärmepumpe (.hero__title) */

  --leading-body: 1.6;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --tracking-head: 0.005em;
  --tracking-caps: 0.08em;          /* nur kleine Versalzeilen (Kicker, Nummern) */
  --measure: 68ch;                  /* maximale Zeilenlänge Fließtext */

  /* ---------- Abstände (8-px-Raster, fluide ab --space-l) ---------- */
  --space-3xs: 0.25rem;  /*  4 */
  --space-2xs: 0.5rem;   /*  8 */
  --space-xs:  0.75rem;  /* 12 */
  --space-s:   1rem;     /* 16 */
  --space-m:   1.5rem;   /* 24 */
  --space-l:   clamp(2rem, 1.7rem + 1.5vw, 3rem);       /* 32 → 48 */
  --space-xl:  clamp(2.5rem, 2rem + 2.5vw, 4rem);       /* 40 → 64 */
  --space-2xl: clamp(3.5rem, 2.6rem + 4.5vw, 6.5rem);   /* 56 → 104  Abstand zwischen Abschnitten */
  --section-space: var(--space-2xl);                   /* padding-block jedes .section */
  --stack: var(--space-s);                              /* Abstand zwischen Elementen im Fließtext */

  /* ---------- Raster ---------- */
  --container: 76rem;               /* 1216 px Inhaltsbreite */
  --container-narrow: 48rem;        /* 768 px Textseiten (.legal, News-Leser) */
  --container-wide: 90rem;          /* 1440 px Hero */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);            /* Seitenrand 16 → 32 */
  --grid-columns: 4;                /* mobil 4, ab 64em 12 (siehe Styleguide) */
  --grid-gap: clamp(1rem, 0.7rem + 1.5vw, 2rem);        /* 16 → 32 */
  --header-height: 4.5rem;          /* 72 px; mobil 4rem */

  /* ---------- Form ---------- */
  --radius: 0;                      /* Logo: ausschließlich 90°-Ecken */
  --border-thin: 1px;
  --border: 2px;                    /* Formularfelder, Kartenrahmen */
  --border-strong: 4px;             /* Strich des Block-G: Kartenkante, Aktiv-Markierung */
  --stroke-icon: 2px;               /* Icon-Linienstärke bei 24 px */
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;

  /* ---------- Schatten (sparsam, nur für die überlappende Hero-Karte) ---------- */
  --shadow-none: none;
  --shadow-card: 0 1px 0 var(--color-line);
  --shadow-raised: 0 18px 40px -24px rgb(29 29 27 / 0.45);

  /* ---------- Bewegung ---------- */
  --duration-fast: 120ms;
  --duration: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Bildverhältnisse (passend zu den Contao-Bildgrößen) ---------- */
  --ratio-hero: 16 / 9;             /* hero 1920×1080 */
  --ratio-hero-mobile: 4 / 3;       /* Anschnitt des 600×800-Bilds auf Mobil, damit H1 + Button über dem Fold bleiben */
  --ratio-split: 5 / 4;             /* split 1400×1120 */
  --ratio-tile: 4 / 3;              /* tile 900×675 */
  --ratio-gallery: 3 / 4;           /* gallery 900×1200 */
  --ratio-article: 16 / 10;         /* article 1600×1000 */

  /* ---------- Motive (Logo-DNA, nur als mask-image, eingefärbt über --color-motiv) ---------- */
  /* Motivtyp A „Rohr / Block-G“ */
  --motiv-rohr-trenner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' aria-hidden='true' focusable='false'%3E%3Cpath d='M3 6H76V18H157' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --motiv-rohr-unterstreichung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 14' aria-hidden='true' focusable='false'%3E%3Cpath d='M2.5 2.5H66V11.5' fill='none' stroke='currentColor' stroke-width='5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --motiv-g-rahmen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' aria-hidden='true' focusable='false'%3E%3Cpath d='M30 4H4V44H44V26H20' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  /* Motivtyp B „Flammenzunge“ */
  --motiv-flammenzunge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24' aria-hidden='true' focusable='false'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8 0Q16 10 16 16A8 8 0 0 1 0 16Q0 10 8 0ZM8 8Q10.5 12.5 10.5 16A2.5 2.5 0 0 1 5.5 16Q5.5 12.5 8 8Z'/%3E%3C/svg%3E");

  /* Motivmaße */
  --motiv-trenner-w: 10rem;         /* 160 × 24 */
  --motiv-trenner-h: 1.5rem;
  --motiv-underline-w: 4.5rem;      /* 72 × 14 */
  --motiv-underline-h: 0.875rem;
  --motiv-bullet-w: 0.6875rem;      /* 11 × 16 */
  --motiv-bullet-h: 1rem;
  --motiv-frame: 3.5rem;            /* 56 px G-Rahmen um Nummern 01–04 */
}

@media (min-width: 64em) {
  :root {
    --grid-columns: 12;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}