/* ============================================================================
   standards.css – ZENTRALE GESTALTUNGS-STANDARDS für lean1green.de
   ----------------------------------------------------------------------------
   WAS:   Alle Farben, Schriften, Maße und der Umbruchpunkt der Website stehen
          HIER – und nur hier – als CSS-Variablen ("Einstellschrauben").
   WARUM: Will man z. B. das Grün ändern, ändert man es an einer einzigen Stelle,
          und die ganze Seite folgt. Im HTML stehen keine "wilden" Farbwerte.
   WER BENUTZT DIES: css/bausteine.css (alle Bausteine und Hilfsklassen) und damit
          jede Seite der Website. Die Schriftdateien selbst kommen aus fonts/fonts.css.
   WIE LESEN: "var(--green)" in einer anderen CSS-Datei heißt: "nimm den Wert von --green
          aus dieser Datei".
   ============================================================================ */

:root {

  /* ---------- FARBEN: Kernfarben aus dem freigegebenen Mockup ---------- */

  /* Dunkles Blau: Kopfbereich (Header), Fußbereich (Footer), Kennzahlen-Leiste */
  --navy: #132A4C;
  /* Überschriften (und dunkle Teaser-Karten) – fast schwarz mit Blaustich */
  --text-heading: #13203A;
  /* Grundtext der Seite */
  --text: #1B2230;
  /* Fließtext in Karten und Absätzen (etwas heller als der Grundtext) */
  --text-soft: #454E5C;
  /* Bildunterschriften, Hinweise, kleine Nebentexte */
  --text-muted: #8A93A3;
  /* Haupt-Akzent: Haupt-Buttons, Punkte, Balken */
  --green: #2E9E52;
  /* Dunkleres Grün: Links, Dachzeilen (Eyebrows), große grüne Zahlen */
  --green-dark: #1F7A3E;
  /* Helles Grün für Links und Dachzeilen AUF Navy-Hintergrund */
  --green-light-on-navy: #9FD9B5;
  /* Orange: Alleinstellungsmerkmale, „alte“ Werte (z. B. 229 kW), Termin-Karten */
  --orange: #D97757;
  /* Dunkleres Orange: Schrift auf hellem Grund, Hinweisleiste oben */
  --orange-dark: #B85A3C;
  /* Seitenhintergrund (leicht cremig) */
  --bg: #FAFAF8;
  /* Hintergrund der grauen Abschnitte */
  --bg-section: #F1F3EE;
  /* Rahmen von Karten und Trennlinien */
  --border: #E3E7EA;
  /* Weiß: Kartenhintergrund, Schrift auf Navy */
  --white: #FFFFFF;

  /* ---------- FARBEN: Zusatzfarben, die im Mockup vorkommen ---------- */

  /* Zweiter Grundtext (etwas dunkler als --text-soft): Zitate, Rechtstexte, Legendentext */
  --text-body2: #2A323D;
  /* Kleine Beschriftungen auf Navy (z. B. „Meine Referenz-WEG“ in der Kennzahlen-Leiste) */
  --navy-label: #7C94BC;
  /* Fließtext und Untertitel auf Navy-Hintergrund */
  --navy-text: #C7D0DE;
  /* Navigationslinks im Header */
  --navy-nav: #E7ECF2;
  /* Gedämpfter Text im Footer (z. B. „gelistet als Energieeffizienz-Experte“) */
  --navy-footer-muted: #9AA4B5;
  /* Trennlinie im Footer */
  --navy-line: #2A3C5A;
  /* Hinweisleiste oben, wenn man mit der Maus darüberfährt */
  --orange-darker: #A44F34;
  /* Orange Badge/Hinweis: Hintergrund und Rahmen (sehr helles Orange) */
  --orange-bg: #F9EBE6;
  --orange-border: #F4D9D0;
  /* Große Schrittnummern „01–04“ im Ablauf */
  --step-number: #C9CFD8;
  /* Linien im Ablauf-Strahl und im Zeitstrahl (Werdegang) */
  --rail: #D8DCE2;
  /* Kleine Etiketten („Tag“): grüner und grauer Hintergrund, grauer Text */
  --tag-green-bg: #E6F3EA;
  --tag-grey-bg: #EDF1F6;
  --tag-grey-text: #44546B;

  /* ---------- SCHRIFTEN ---------- */

  /* Überschriften und große Zahlen (Fraunces, lokal in fonts/ eingebunden) */
  --font-heading: 'Fraunces', serif;
  /* Fließtext, Buttons, Navigation (Work Sans, lokal in fonts/ eingebunden) */
  --font-text: 'Work Sans', system-ui, sans-serif;

  /* ---------- MAßE ---------- */

  /* Inhaltsbreite Startseite und Kopf/Fuß (Pixel) */
  --width-start: 1200px;
  /* Inhaltsbreite aller Unterseiten (Pixel) */
  --width-page: 900px;
  /* Seitenrand links/rechts innerhalb der Inhaltsbreite (Pixel) */
  --gutter: 24px;
  /* Rundung der Karten (Pixel) */
  --radius-card: 14px;
  /* Rundung der Buttons und Etiketten = „Pille“ */
  --radius-pill: 999px;
  /* Rundung der weißen Logo-Boxen in Header und Footer */
  --radius-logo-box: 10px;
  /* Logohöhe im Header – nie kleiner! (Pixel) */
  --logo-height-header: 64px;
  /* Logohöhe im Footer – nie kleiner! (Pixel) */
  --logo-height-footer: 56px;

  /* ---------- UMBRUCHPUNKT ----------
     Mobil-Umbruch bei 680 px Bildschirmbreite: Raster werden einspaltig, die Navigation
     wird zum „☰ Menü“-Button, Hauptüberschriften werden 30 px groß.
     HINWEIS: In CSS können Variablen nicht in @media-Regeln stehen. Deshalb steht der Wert
     680px in bausteine.css bei jeder @media-Regel fest. Wer den Umbruchpunkt ändern will,
     sucht dort nach "680px" und ersetzt alle Vorkommen. */
}