/* Die Markenebene dieses Projekts.
 * Angelegt aus Skill-Version: unbekannt
 * Diese Datei wird von init-project.sh nie ueberschrieben.
 */
/* Marke: Braun Transporte & Vermietung, Bestwig-Andreasberg.
 *
 * Herkunft der Farben: aus LogoBraun.ai ausgezaehlt (Upload/LogoBraun.ai).
 * Die beiden Logofarben sind #428ecb (Blau, Pfeil und Wortmarke) und
 * #465d65 (Schiefer, unterer Pfeil und Unterzeile). Alles Uebrige dieser
 * Datei ist daraus abgeleitet und damit Setzung, nicht Befund.
 *
 * WICHTIG — Ladereihenfolge: styleguide.css zuerst, DIESE Datei danach,
 * site.css zuletzt. Umgekehrt eingebunden, gewinnt jeder Vorgabewert gegen
 * jede Anpassung hier — lautlos.
 */

:root {
  /* --- Marke: Blau aus dem Logo ---
   * Rampenform ist Systemregel (12 Stufen, 25/50/100–900/950), der Ton ist
   * Markensache. Anker ist brand-500 = die Logofarbe, unveraendert.
   * Kontrast geprueft: weiss auf brand-600 = 4,73:1, brand-700 auf weiss
   * = 6,67:1, brand-400 auf gray-950 = 6,68:1.
   */
  --brand-25: #fafbfd;
  --brand-50: #f2f7fb;
  --brand-100: #e2edf6;
  --brand-200: #c6dcec;
  --brand-300: #a2c6e0;
  --brand-400: #7aacd4;
  --brand-500: #428ecb; /* Logoblau, unveraendert */
  --brand-600: #3578ad;
  --brand-700: #2e6089;
  --brand-800: #264b69;
  --brand-900: #1f384d;
  --brand-950: #142230;

  /* --- Marke: Neutralleiter aus dem Schiefer des Logos ---
   * Anker ist gray-700 = #465d65, die zweite Logofarbe. Die Leiter ist
   * deshalb leicht blaustichig statt neutralgrau — sie soll neben dem
   * Blau stehen koennen, ohne zu kippen.
   * Kontrast geprueft: gray-700 auf weiss = 6,97:1 (Fliesstext),
   * gray-900 auf weiss = 12,28:1 (Ueberschriften).
   */
  --gray-25: #fafbfb;
  --gray-50: #f4f6f7;
  --gray-100: #e9edee;
  --gray-200: #d3dadc;
  --gray-300: #b3bfc3;
  --gray-400: #8b9ba1;
  --gray-500: #6b7d84;
  --gray-600: #566a71;
  --gray-700: #465d65; /* Logoschiefer, unveraendert */
  --gray-800: #384a51;
  --gray-900: #2a373c;
  --gray-950: #1a2225;

  /* --- Schrift ---
   * Barlow: schmallaufende Grotesk, industrieller Schnitt. Sie liegt der
   * Wortmarke am naechsten, ohne sie nachzuahmen. Lokal eingebunden ueber
   * @font-face waere besser; hier laeuft sie ueber Google Fonts, siehe
   * README.md, Abschnitt "Schrift".
   */
  --font-family-primary: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Markenrollen mit Beispielmass: hier gesetzt ---
   * font-size-h3 folgt dem Konstruktionsprinzip der Leiter (h3 = 2 x h6 =
   * 3rem). Das ist die Empfehlung aus typography.md, also eine Setzung
   * dieses Projekts, kein Befund.
   */
  --font-size-h3: 3rem;
  --line-height-h1: 1.05;
  --line-height-h3: 1.15;
  --button-radius: var(--radius-main);

  /* --- Uebernommen, aber ueberschrieben ---
   * Nur diese beiden Zeilen sind aktiv; alle uebrigen Vorgabewerte bleiben
   * am System. Beide Rollen sind Vorgabewert, das Ueberschreiben ist der
   * vorgesehene Weg.
   *
   * container-main: 64rem ist fuer eine Seite mit dreispaltigen
   * Kartenreihen zu schmal. 75rem (1200px) ist die Arbeitsbreite dieses
   * Projekts; container-full (90rem, belegt) bleibt die seltene Ueberbreite
   * und wird nur von der Hero-Sektion benutzt.
   */
  --container-main: 75rem;
  /* Radien: 2 / 4 / 8 px statt 8 / 16 px. Beide Systemwerte sind Vorgabewert,
   * das Ueberschreiben ist der vorgesehene Weg (STYLEGUIDE.md, Status
   * "vorgabewert"). Eine dritte Sprosse fuehrt das System nicht — tokens.md,
   * "Luecken": "Nur zwei Radienstufen. Wer mehr braucht, legt sie als
   * Markenrolle an." Genau das ist --radius-large weiter unten.
   *
   * Warum px und nicht rem: eine Rundung ist keine Textgroesse. Sie soll
   * nicht mitwachsen, wenn jemand die Schrift des Browsers hochsetzt —
   * sonst wird aus 2px bei 24px-Wurzel eine 3px-Rundung ohne Anlass. */
  --radius-small: 2px;
  --radius-main: 4px;
  /* h1 auf 4rem statt 4.5rem: die Startseiten-Ueberschrift ist zweizeilig
   * und laeuft bei 72px auf 1200px Arbeitsbreite gegen die Kante. */
  --font-size-h1: 4rem;

  /* --- Projektebene: was das System nicht fuehrt ---
   * STYLEGUIDE.md sagt fuer diese Faelle ausdruecklich: "Wo eine Utility
   * fehlt, wird Komponenten-CSS geschrieben, und zwar gegen die Tokens."
   * Genau dafuer stehen die folgenden Rollen hier. Sie ueberschreiben
   * nichts — es gibt sie im System nicht — und sie sind Setzungen dieses
   * Projekts, keine Befunde. Die Rangnamen folgen der Konvention der
   * Fliesstextleiter (xsmall / small / main / large / xlarge).
   */

  /* Feinabstaende. Der Sektionsrhythmus (4/6/10rem) ist dafuer zu grob;
   * layout.md nennt genau diese Luecke. */
  --space-xsmall: 0.25rem;
  --space-small: 0.5rem;
  --space-main: 1rem;
  --space-large: 1.5rem;
  --space-xlarge: 2rem;
  --space-2xlarge: 3rem;

  /* Gutter des Rasters. layout.md: "Wer das Raster nachbaut, entscheidet
   * den Gutter selbst." */
  --grid-gutter: var(--space-xlarge);

  /* Innenabstand der Sektionen. Der Sektionsabstand ist im System ein
   * Margin; als Padding gebraucht, wird dasselbe Token gelesen. */
  --section-inset: var(--space-large);

  /* Dritte Radiensprosse. Sie traegt die Flaechen — Karten, Formulare,
   * Bilder —, waehrend main die Bedienelemente traegt und small nur die
   * kleinsten Kanten. */
  --radius-large: 8px;
  /* Vollrundung fuer die Schrittzaehler des Anfrageformulars. Das System
   * fuehrt keine — tokens.md, "Luecken". */
  --radius-round: 50%;

  /* Rahmenstaerken — tokens.md, "Luecken": kein Rahmenstaerkentoken. */
  --border-hairline: 1px;
  --border-main: 2px;
  --border-large: 4px;

  /* Zeilenhoehen ausserhalb von h2 und text-main. typography.md: "Wer h1,
   * h4, h5 oder h6 einsetzt, entscheidet die Zeilenhoehe selbst." */
  --line-height-h4: 1.2;
  --line-height-h5: 1.25;
  --line-height-h6: 1.3;
  --line-height-tight: 1.2;

  /* Laufweite. typography.md: "Wer Tracking braucht, setzt es im Projekt
   * und nennt es eine Setzung." Genau das ist das hier. In em notiert, damit
   * die Werte mit der Schriftgroesse mitwandern. */
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* Schatten, Uebergaenge, Fokus — im System nicht vorhanden. */
  --shadow-small: 0 1px 2px rgb(26 34 37 / 6%), 0 2px 8px rgb(26 34 37 / 6%);
  --shadow-main: 0 2px 4px rgb(26 34 37 / 6%), 0 12px 32px rgb(26 34 37 / 10%);
  --transition-main: 160ms ease;
  /* Einblenden der Timeline: Dauer je Schritt und Versatz zwischen zwei
   * Schritten. Getrennt von --transition-main, weil das eine Bedienung
   * quittiert und das andere eine Bewegung erzaehlt. */
  --reveal-duration: 520ms;
  --reveal-delay: 140ms;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Kopfzeile. Sie liegt fest ueber dem Inhalt und hat zwei Zustaende: gross
   * und durchsichtig ueber dem Kopfbild, kompakt und gedeckt ab dem ersten
   * Scrollen. Beide Masse stehen hier, damit das Komponenten-CSS nur
   * umschaltet und nicht rechnet. --header-height ist zugleich das Mass, um
   * das Sprungmarken und Kopfbilder nach unten ruecken. */
  --header-height: 5rem;
  --header-height-top: 7rem;
  --logo-height: 3rem;
  --logo-height-top: 4.5rem;
  /* Auf schmalen Schirmen frisst die grosse Fassung zu viel Bildschirm. */
  --header-height-top-small: 5.5rem;
  --logo-height-top-small: 3.25rem;
  --logo-height-footer: 5rem;

  /* Masse einzelner Bausteine. Sie stehen hier und nicht im Komponenten-CSS,
   * damit dort kein rem-Wert steht. */
  --hero-min-height: 40rem;
  --media-height-small: 14rem;
  --media-height-main: 18rem;
  --media-height-large: 26rem;
  --icon-size: 2.75rem;
  --icon-size-large: 3.5rem;
  --icon-inline: 1.25rem;
  --label-width: 6rem;

  /* --- Ueberschriften auf schmalen Schirmen ---
   * Die Multiplikator-Leiter des Frameworks ist fuer diese Seite zu mild:
   * h1 landet unter 479px bei 54px, und "Kippertransporte" steht dort
   * breiter als seine Spalte — auf datenschutz.html schob
   * "Datenschutzerklaerung" die ganze Seite seitlich aus dem Bild.
   * typography.md nennt fuer genau diesen Fall den Hebel: eine Komponente
   * setzt --_ts--font-size neu, "auch innerhalb der Breakpoints". Die Werte
   * dafuer stehen hier, nicht im Komponenten-CSS.
   *
   * Die Stufen bleiben auf der 6px-Teilung der Leiter (36 / 48 bzw. 30 / 36)
   * und halten den Abstand zwischen h1 und Sektionstitel.
   * Das ist eine Setzung dieses Projekts, kein Befund.
   */
  --font-size-h1-medium: 3rem;    /* 48px, ab 767px abwaerts */
  --font-size-h1-small: 2.25rem;  /* 36px, ab 479px abwaerts */
  --font-size-h3-medium: 2.25rem; /* 36px */
  --font-size-h3-small: 1.875rem; /* 30px */

  /* Kopfbild auf schmalen Schirmen. 40rem plus der Innenabstand oben ergeben
   * auf einem 390px-Schirm eine Sektion, die zweieinhalb Bildschirme hoch
   * ist, bevor der erste Absatz kommt. */
  --hero-min-height-small: 28rem;

  /* Kleinste sinnvolle Flaeche eines Bedienelements auf einem Schirm, der
   * mit dem Finger bedient wird. Das System fuehrt dafuer kein Mass. */
  --tap-target: 2.75rem;

  /* Deckschicht ueber Fotos, damit weisse Schrift darauf traegt. */
  --overlay-strong: rgb(26 34 37 / 84%);
  --overlay-main: rgb(26 34 37 / 62%);
  --overlay-soft: rgb(26 34 37 / 30%);
}