/* ============================================================
   Hemmler GmbH — Entwurf 2, Wertequelle
   ============================================================
   Diese Datei setzt ausschliesslich Variablen des Chassis (Intrio).
   Sie enthaelt bewusst KEINE eigene Regel, die etwas anderes tut
   als einen Variablenwert zu belegen — kein Layout, keine Farbe
   direkt an einem Element, keine Ausnahme.

   Geladen nach style.css, coloring.css und scheme-01.css.

   Warum `:root, *`: style.css belegt die Variablen auf dem
   Universalselektor. Ein blosses `:root` wuerde davon auf jedem
   Element ueberschrieben, weil dort ein eigener Wert gesetzt ist
   statt geerbt zu werden. Deshalb dieselbe Reichweite.

   Nicht gesetzt und damit unveraendert aus dem Chassis uebernommen:
   --heading-text-transform (uppercase), --heading-font-weight (400),
   --h1-font-size (96px), --h2-font-size (48px), --rounded-1 (0),
   --btn-rounded (0), --btn-text-transform (uppercase).
   ============================================================ */

@import url("../fonts/kunde/kunde.css");

:root, * {

  /* ---------- Farbe ----------
     Drei Flaechen, mehr nicht. Weiss minimal gebrochen, Anthrazit
     kuehl statt braeunlich, Gelb aus der Wortmarke. Das Chassis
     bringt ein Braun mit (#805231 / #34241C), das faellt weg. */
  --primary-color: #ffd400;
  --primary-color-rgb: 255, 212, 0;
  --secondary-color: #ffd400;
  --secondary-color-rgb: 255, 212, 0;

  --bg-default: #fbfbfa;
  --bg-light: #ffffff;
  --bg-grey: #f0f0ee;
  --bg-color-even: #f4f4f2;
  --bg-color-odd: #fafaf9;

  --bg-dark-1: #1c1e21;
  --bg-dark-2: #24272b;
  --bg-dark-3: #2f3338;
  --bg-dark-1-rgb: 28, 30, 33;

  --border-color: #dcdcd8;
  --border-default: solid 1px rgba(28, 30, 33, 1);
  --footer-background-color: #1c1e21;

  /* ---------- Schrift ----------
     Hanken Grotesk fuer den Fliesstext, Outfit fuer die
     Ueberschriften. Outfit trifft das Google Sans des Chassis
     am genauesten. */
  --body-font: "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --body-font-size: 16px;
  --body-font-color: rgba(28, 30, 33, .76);
  /* Voll deckend, nicht gedaempft. Gemessen: mit rgba(...,.72) faellt der
     Buehnenabsatz auf Slide 1 auf 3,2:1 und damit unter die WCAG-Grenze
     fuer Fliesstext. Siehe pruefung-kontrast.py. */
  --body-font-color-bg-dark: #ffffff;
  --body-font-weight: 400;
  --body-font-letter-spacing: -0.16px;
  --body-font-line-height: 30px;

  --heading-font: "Outfit", "Helvetica Neue", Helvetica, sans-serif;
  --heading-font-color: #1c1e21;
  --heading-font-color-bg-dark: #ffffff;
  --alt-font-1: "Outfit", "Helvetica Neue", Helvetica, sans-serif;

  --h1-letter-spacing: -0.02em;
  --h1-line-height: .85em;
  --h1-margin-bottom: 20px;

  --h2-letter-spacing: -0.96px;
  --h2-line-height: 1em;
  --h2-margin-bottom: 25px;

  --h3-font-size: 26px;
  --h3-letter-spacing: -0.4px;
  --h3-line-height: 1.5em;

  --h4-font-size: 20px;
  --h4-letter-spacing: -0.2px;

  --h5-font-size: 18px;
  --h6-font-size: 16px;

  --subheader-title-font-size: 64px;

  /* Menue */
  --mainmenu-font: var(--heading-font);
  --mainmenu-font-size: 15px;
  --mainmenu-font-weight: 500;
  --mainmenu-text-transform: uppercase;
  --mainmenu-letter-spacing: 0;

  /* ---------- Masse ----------
     Hausregel: Inhaltsbreite mindestens 1440px. Das Chassis
     deckelt auf 1240px, das ist die einzige Massabweichung. */
  --container-max-width: 1440px;
  --logo-width: 210px;
  --logo-footer-width: 230px;

  /* ---------- Knopf ----------
     Anthrazit auf Gelb. Weiss auf Gelb ist unlesbar. Im Hover
     kippt der Knopf auf Anthrazit, dann traegt er Weiss. */
  --btn-color: #1c1e21;
  --btn-hover-color: #ffffff;
  --btn-hover-bg: #1c1e21;
  --btn-font-family: var(--heading-font);
  --btn-font-size: 15px;
  --btn-font-weight: 700;
  --btn-letter-spacing: 0;
  --btn-padding: 12px 34px;

  /* Swiper faerbt seine Bedienelemente ueber diese Variable. */
  --swiper-theme-color: #ffd400;
}