/* Komponenten-CSS der Seite Braun Transporte & Vermietung.
 *
 * Ladereihenfolge: styleguide.css -> tokens.css -> DIESE Datei.
 *
 * Regeln aus SKILL.md, die hier gelten:
 *   - Keine Rohwerte. Kein Hex, kein px, kein rem. Alles kommt aus Tokens.
 *     Ausnahmen sind die Breakpoints der Media-Queries (991px / 479px) —
 *     layout.md fuehrt sie als Konstanten des Frameworks, fuer die es
 *     ausdruecklich kein Token gibt und geben soll.
 *   - Utility zuerst. Was styleguide.css als u-* liefert, steht im Markup,
 *     nicht hier. Diese Datei enthaelt nur, wofuer es keine Utility gibt:
 *     Raster, Flex, Padding, Rahmen, Zustaende, Komponenten.
 *   - Namen: {komponente}_{element}_{teil}, is-{variante}, g_{zweck}.
 */

/* ==========================================================================
   Globales
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--white);
  color: var(--gray-700);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-text-main);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-text-main);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--gray-900);
  font-weight: var(--weight-xbold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

h1 { line-height: var(--line-height-h1); }
h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
h4 { line-height: var(--line-height-h4); }
h5 { line-height: var(--line-height-h5); }
h6 { line-height: var(--line-height-h6); }

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--brand-700);
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--space-xsmall);
  transition: color var(--transition-main);
}

a:hover {
  color: var(--brand-600);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
  margin: 0;
  padding: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--focus-ring-width) solid var(--brand-500);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-small);
}

/* Sprungmarke fuer Tastaturbedienung */
.g_skip_link {
  position: absolute;
  left: var(--space-main);
  top: var(--space-main);
  z-index: 100;
  padding: var(--space-small) var(--space-main);
  background-color: var(--brand-700);
  color: var(--white);
  border-radius: var(--radius-main);
  transform: translateY(-200%);
}

.g_skip_link:focus {
  transform: translateY(0);
  color: var(--white);
}

/* --- Sektionsrhythmus als Padding.
 * layout.md: das Token ist ein Abstand, kein Padding; wer Sektions-Padding
 * braucht, schreibt es in der Komponente gegen dasselbe Token. Genau das. */
.g_section {
  padding-block: var(--section-space-main);
  padding-inline: var(--section-inset);
}

.g_section.is-small { padding-block: var(--section-space-small); }
.g_section.is-large { padding-block: var(--section-space-large); }
.g_section.is-flush_top { padding-block-start: 0; }

.g_section.is-tinted { background-color: var(--gray-50); }
.g_section.is-dark { background-color: var(--gray-950); }
.g_section.is-brand { background-color: var(--brand-900); }

.g_section.is-dark,
.g_section.is-brand {
  color: var(--gray-200);
}

.g_section.is-dark :is(h1, h2, h3, h4, h5, h6),
.g_section.is-brand :is(h1, h2, h3, h4, h5, h6) {
  color: var(--white);
}

/* --- Raster.
 * styleguide.css enthaelt keine einzige Raster- oder Spaltenklasse; das
 * 24-Spalten-Raster aus layout.md ist dort Mechanik ohne Umsetzung. Hier
 * steht deshalb ein einfaches Spaltenraster gegen den eigenen Gutter. */
.g_grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.g_grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g_grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g_grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.g_grid.is-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--section-space-small);
}

.g_stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
}

.g_stack.is-tight { gap: var(--space-main); }
.g_stack.is-loose { gap: var(--space-2xlarge); }

.g_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-main);
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */

/* Fest ueber dem Inhalt, nicht im Fluss: ueber dem Kopfbild durchsichtig,
 * ab dem ersten Scrollen gedeckt. Den Zustand setzt site.js als .is-solid.
 * Der Verlauf im durchsichtigen Zustand ist kein Schmuck — ohne ihn steht
 * die weisse Schrift auf hellen Fotos (Himmel) auf hellem Grund. */
.header_bar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--overlay-main), transparent);
  /* Ueber dem Kopfbild ohne Trennlinie — dort gibt es nichts zu trennen. Die
   * Linie kommt erst mit .is-solid, wo die Leiste eine eigene Flaeche hat. */
  border-bottom: 0 solid var(--gray-800);
  /* Der Innenabstand sitzt aussen, wie bei jeder Sektion — sonst steht der
   * Container der Kopfzeile um genau diesen Betrag weiter rechts als der
   * Container darunter, und Logo und Ueberschrift stehen nicht auf einer
   * Linie. */
  padding-inline: var(--section-inset);
  transition: background-color var(--transition-main), border-color var(--transition-main);
}

.header_bar.is-solid {
  background-color: var(--gray-950);
  background-image: none;
  border-bottom-width: var(--border-hairline);
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-large);
  min-height: var(--header-height-top);
  transition: min-height var(--transition-main);
}

.header_bar.is-solid .header_inner {
  min-height: var(--header-height);
}

.header_logo_link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-block: var(--space-small);
}

.header_logo_img {
  height: var(--logo-height-top);
  width: auto;
  transition: height var(--transition-main);
}

.header_bar.is-solid .header_logo_img {
  height: var(--logo-height);
}

.header_nav_list {
  display: flex;
  align-items: center;
  gap: var(--space-large);
  list-style: none;
}

.header_nav_link {
  display: inline-block;
  padding-block: var(--space-small);
  color: var(--gray-200);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--border-main) solid transparent;
}

.header_nav_link:hover {
  color: var(--white);
  border-bottom-color: var(--brand-500);
}

.header_nav_link.is-active {
  color: var(--white);
  border-bottom-color: var(--brand-500);
}

.header_actions {
  display: flex;
  align-items: center;
  gap: var(--space-main);
}

.header_phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-small);
  color: var(--white);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.header_phone:hover { color: var(--brand-400); }

.header_toggle {
  display: none;
  align-items: center;
  gap: var(--space-small);
  padding: var(--space-small) var(--space-main);
  background-color: transparent;
  color: var(--white);
  border: var(--border-hairline) solid var(--gray-700);
  border-radius: var(--radius-main);
  font-family: inherit;
  font-size: var(--font-size-text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}

/* Umschaltbild des Knopfes: Balken im Ruhezustand, Kreuz im geoeffneten.
 * Der Zustand steht schon am Knopf — aria-expanded —, also wird er auch von
 * dort gelesen und nicht in einer zweiten Klasse doppelt gefuehrt. */
.header_toggle_icon.is-close { display: none; }
.header_toggle[aria-expanded="true"] .header_toggle_icon.is-menu { display: none; }
.header_toggle[aria-expanded="true"] .header_toggle_icon.is-close { display: block; }

/* Fuss des Menuepanels. Ausgeblendet, bis der 767er-Block ihn einblendet —
 * darueber stehen Knopf und Nummer in der Leiste. */
.header_nav_foot {
  display: none;
  flex-direction: column;
  gap: var(--space-main);
  margin-top: var(--space-large);
}

.header_nav_phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-small);
  padding-block: var(--space-small);
  color: var(--white);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
}

.header_nav_phone:hover { color: var(--brand-400); }

/* Inline-Icons aus dem Tabler-Satz (MIT). Sie erben Farbe und Strichstaerke
 * vom Text, deshalb steht hier nur die Groesse. */
.icon_inline {
  flex-shrink: 0;
  width: var(--icon-inline);
  height: var(--icon-inline);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button_main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-small);
  padding: var(--space-main) var(--space-xlarge);
  background-color: var(--brand-600);
  color: var(--white);
  border: var(--border-main) solid var(--brand-600);
  border-radius: var(--button-radius);
  font-family: inherit;
  font-size: var(--font-size-text-main);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--tracking-wide);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-main), border-color var(--transition-main), color var(--transition-main);
}

.button_main:hover {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--white);
}

.button_main.is-ghost {
  background-color: transparent;
  color: var(--gray-900);
  border-color: var(--gray-300);
}

.button_main.is-ghost:hover {
  background-color: var(--gray-50);
  border-color: var(--gray-500);
  color: var(--gray-900);
}

.button_main.is-invers {
  background-color: transparent;
  color: var(--white);
  border-color: var(--gray-500);
}

.button_main.is-invers:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--gray-950);
}

.button_main.is-block {
  width: 100%;
}

.button_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-small);
  color: var(--brand-700);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
}

.button_link::after {
  width: var(--icon-inline);
  height: var(--icon-inline);
  background-color: currentColor;
  content: "";
  transition: transform var(--transition-main);
  /* Tabler-Icon "arrow-right", inline aus demselben Grund wie oben. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012l14%200'/%3E%3Cpath%20d='M13%2018l6%20-6'/%3E%3Cpath%20d='M13%206l6%206'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012l14%200'/%3E%3Cpath%20d='M13%2018l6%20-6'/%3E%3Cpath%20d='M13%206l6%206'/%3E%3C/svg%3E") no-repeat center / contain;
}

.button_link:hover::after {
  transform: translateX(var(--space-xsmall));
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero_section {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height);
  /* Die Kopfzeile liegt darueber und belegt keinen Platz mehr im Fluss —
   * der Innenabstand oben traegt sie mit. */
  padding-block: calc(var(--section-space-large) + var(--header-height)) var(--section-space-main);
  padding-inline: var(--section-inset);
  background-color: var(--gray-950);
  background-image:
    linear-gradient(to top, var(--overlay-strong), transparent 65%),
    linear-gradient(to right, var(--overlay-strong), var(--overlay-main) 55%, var(--overlay-soft)),
    var(--hero-image);
  background-position: center;
  background-size: cover;
  color: var(--gray-100);
}

/* Die Bildquelle steht NICHT mehr hier, sondern im Inhalt: Hero.astro setzt
 * --hero-image als Stilangabe am Abschnitt. Frueher stand hier je Seite eine
 * Variante mit der Begruendung, das Markup solle keine Pfade tragen. Die
 * Entscheidung ist zurueckgenommen - sie stammte aus der Zeit vor dem CMS
 * und kostete den Kunden die Moeglichkeit, Kopfbilder zu wechseln.
 *
 * Was hier bleibt, ist die Gestaltung: Verlaeufe, Masse, Deckschicht. Nur
 * die Bildquelle ist Inhalt geworden. */

.hero_section.is-plain {
  background-image: none;
}

.hero_section.is-compact {
  min-height: auto;
  padding-block: calc(var(--section-space-main) + var(--header-height)) var(--section-space-main);
  align-items: center;
}

.hero_inner {
  position: relative;
  width: 100%;
}

.hero_body {
  max-width: var(--container-small);
}

.hero_title {
  color: var(--white);
}

.hero_text {
  max-width: var(--container-small);
  color: var(--gray-200);
}

.hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-main);
}


/* ==========================================================================
   Sektionskopf
   ========================================================================== */

.section_head {
  display: flex;
  flex-direction: column;
  gap: var(--space-main);
  max-width: var(--container-small);
}

.section_head.is-center {
  margin-inline: auto;
  text-align: center;
}

.section_head_row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xlarge);
  flex-wrap: wrap;
}

.section_text {
  color: var(--gray-600);
}

.g_section.is-dark .section_text,
.g_section.is-brand .section_text {
  color: var(--gray-300);
}

/* ==========================================================================
   Karten
   ========================================================================== */

.card_item {
  display: flex;
  flex-direction: column;
  gap: var(--space-main);
  height: 100%;
  padding: var(--space-xlarge);
  background-color: var(--white);
  border: var(--border-hairline) solid var(--gray-200);
  border-radius: var(--radius-large);
  transition: border-color var(--transition-main), box-shadow var(--transition-main), transform var(--transition-main);
}

.card_item.is-linked:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-main);
  transform: translateY(calc(var(--space-xsmall) * -1));
}

.card_item_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-large);
  height: var(--icon-size-large);
  background-color: var(--brand-50);
  border-radius: var(--radius-main);
}

/* Die Leistungsicons sind eigene SVG-Dateien in src/assets/icons/ und
 * deshalb 1:1 austauschbar — siehe README.md, Abschnitt "Icons". */
.card_item_icon_img {
  width: var(--space-xlarge);
  height: var(--space-xlarge);
}

.leistung_icon {
  width: var(--icon-size-large);
  height: var(--icon-size-large);
}

.card_item_title {
  color: var(--gray-900);
}

.card_item_text {
  color: var(--gray-600);
  flex-grow: 1;
}

.card_item.is-dark {
  background-color: var(--gray-900);
  border-color: var(--gray-800);
}

.card_item.is-dark .card_item_title { color: var(--white); }
.card_item.is-dark .card_item_text { color: var(--gray-300); }

/* --- Karte mit Bild (Fuhrpark, Einsatz) --- */
.media_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--white);
  border: var(--border-hairline) solid var(--gray-200);
  border-radius: var(--radius-large);
}

.media_card_figure {
  margin: 0;
  overflow: hidden;
}

.media_card_img {
  width: 100%;
  height: var(--media-height-main);
  object-fit: cover;
  transition: transform var(--transition-main);
}

.media_card:hover .media_card_img {
  transform: scale(1.03);
}

.media_card_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  padding: var(--space-xlarge);
}

.media_card_meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small) var(--space-main);
  margin-top: var(--space-small);
  padding-top: var(--space-main);
  border-top: var(--border-hairline) solid var(--gray-200);
  color: var(--gray-600);
  list-style: none;
}

.media_card_meta_item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xsmall);
}

.media_card_meta_label {
  color: var(--gray-500);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.media_card_title { color: var(--gray-900); }
.media_card_text { color: var(--gray-600); }

.media_card.is-dark {
  background-color: var(--gray-900);
  border-color: var(--gray-800);
}

.media_card.is-dark .media_card_title { color: var(--white); }
.media_card.is-dark .media_card_text { color: var(--gray-300); }

.media_card.is-dark .media_card_meta {
  border-top-color: var(--gray-800);
  color: var(--gray-300);
}

.media_card.is-dark .media_card_meta_label { color: var(--gray-400); }

/* ==========================================================================
   Merkmalliste, Zahlen, Schritte
   ========================================================================== */

.check_list {
  display: grid;
  gap: var(--space-main);
  list-style: none;
}

.check_list.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Nebeneinander statt untereinander: im Kopfbild stehen die Leistungen als
 * umbrechende Zeile ueber den Knoepfen. */
.check_list.is-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small) var(--space-large);
}

.check_list_item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-main);
  color: var(--gray-700);
}

/* Icon aus dem Tabler-Satz (MIT), Name "circle-check", als Maske eingesetzt:
 * so bleibt die Farbe am Token und wandert mit dem Abschnitt mit.
 *
 * Warum als data:-URI und nicht als Datei: eine Maske ist ein Bildabruf, und
 * unter file:// behandelt der Browser den als fremde Herkunft und blockiert
 * ihn — das Element waere dann vollstaendig ausmaskiert, also unsichtbar. Auf
 * einem Server ginge die Datei; lokal geoeffnet nicht. Inline geht beides. */
.check_list_item::before {
  flex-shrink: 0;
  width: var(--space-large);
  height: var(--space-large);
  margin-top: var(--space-xsmall);
  background-color: var(--brand-500);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200'/%3E%3Cpath%20d='M9%2012l2%202l4%20-4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200'/%3E%3Cpath%20d='M9%2012l2%202l4%20-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.g_section.is-dark .check_list_item::before,
.g_section.is-brand .check_list_item::before,
.hero_section .check_list_item::before {
  background-color: var(--brand-400);
}

.g_section.is-dark .check_list_item,
.g_section.is-brand .check_list_item,
.hero_section .check_list_item { color: var(--gray-100); }

/* --- Timeline.
 *
 * Ohne JavaScript stehen alle Schritte sichtbar da; erst site.js setzt
 * .is-animated auf die Liste und blendet sie dann einzeln ein. Andersherum
 * — Startzustand unsichtbar, JS macht sichtbar — waere die Seite ohne
 * JavaScript leer, und das ist kein Preis fuer eine Einblendung. */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--section-space-small);
  list-style: none;
}

.timeline_item {
  position: relative;
  display: grid;
  grid-template-columns: var(--icon-size-large) minmax(0, 1fr);
  gap: var(--space-large);
  align-items: start;
}

/* Der Strich zum naechsten Schritt. Er sitzt in der Mitte der Marke und
 * ueberbrueckt den Abstand zwischen zwei Eintraegen. */
.timeline_item::before {
  position: absolute;
  left: calc(var(--icon-size-large) / 2);
  top: 0;
  bottom: calc(var(--section-space-small) * -1);
  width: var(--border-main);
  background-color: var(--brand-300);
  content: "";
  transform: translateX(-50%);
  transition: background-color var(--reveal-duration) ease;
}

.timeline_item:last-child::before { display: none; }

.timeline_marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-large);
  height: var(--icon-size-large);
  background-color: var(--brand-600);
  color: var(--white);
  border: var(--border-main) solid var(--brand-600);
  border-radius: var(--radius-round);
  font-size: var(--font-size-text-small);
  font-weight: var(--weight-xbold);
  letter-spacing: var(--tracking-wide);
  transition: background-color var(--reveal-duration) ease,
              border-color var(--reveal-duration) ease,
              color var(--reveal-duration) ease;
}

.timeline_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  /* Auf der vollen Arbeitsbreite wird jede Beschreibung eine einzige lange
   * Zeile — das liest sich schlecht. Der Text bleibt auf Lesebreite. */
  max-width: var(--container-small);
  padding-bottom: var(--space-small);
}

.timeline_title { color: var(--gray-900); }

/* Der Ruhezustand der Einblendung — nur wenn JavaScript ihn eingeschaltet hat. */
.timeline.is-animated .timeline_item {
  opacity: 0;
  transform: translateY(var(--space-large));
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
}

.timeline.is-animated .timeline_item:nth-child(2) { transition-delay: var(--reveal-delay); }
.timeline.is-animated .timeline_item:nth-child(3) { transition-delay: calc(var(--reveal-delay) * 2); }

.timeline.is-animated .timeline_item.is-visible {
  opacity: 1;
  transform: none;
}

/* Waehrend der Einblendung ist die Marke noch unbesetzt und der Strich grau;
 * mit .is-visible faellt beides in den Ausgangszustand zurueck. So sieht die
 * Timeline ohne JavaScript fertig aus statt unfertig. */
.timeline.is-animated .timeline_item::before {
  background-color: var(--gray-200);
}

.timeline.is-animated .timeline_marker {
  background-color: var(--white);
  color: var(--gray-500);
  border-color: var(--gray-200);
}

.timeline.is-animated .timeline_item.is-visible::before {
  background-color: var(--brand-300);
}

.timeline.is-animated .timeline_item.is-visible .timeline_marker {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--white);
}

/* ==========================================================================
   Galerie
   ========================================================================== */

.gallery_grid {
  display: grid;
  gap: var(--space-main);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Feste Zeilenhoehe: sonst bestimmt das hoechste Bild die Zeile, und eine
   * Kachel mit Hochformat treibt das ganze Mosaik auseinander. */
  grid-auto-rows: var(--media-height-small);
}

.gallery_item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-large);
}

.gallery_item.is-wide { grid-column: span 2; }
.gallery_item.is-tall { grid-row: span 2; }

.gallery_item_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-main);
}

.gallery_item:hover .gallery_item_img { transform: scale(1.04); }

.gallery_item_caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-xlarge) var(--space-main) var(--space-main);
  background-image: linear-gradient(to top, var(--overlay-strong), transparent);
  color: var(--white);
  font-weight: var(--weight-medium);
}

/* ==========================================================================
   Aufmacherband (CTA)
   ========================================================================== */

.cta_band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xlarge);
  padding: var(--space-2xlarge);
  background-color: var(--brand-900);
  border-radius: var(--radius-large);
  color: var(--gray-200);
}

.cta_band_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  max-width: var(--container-small);
}

.cta_band_title { color: var(--white); }

.cta_band_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-main);
}

/* ==========================================================================
   Kontaktdaten
   ========================================================================== */

.contact_card {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  padding: var(--space-xlarge);
  background-color: var(--gray-50);
  border: var(--border-hairline) solid var(--gray-200);
  border-radius: var(--radius-large);
}

.contact_list {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  list-style: none;
}

.contact_list_item {
  display: flex;
  gap: var(--space-main);
}

.contact_list_label {
  color: var(--gray-500);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.contact_list_value {
  color: var(--gray-900);
  font-weight: var(--weight-semibold);
}

.contact_list_value a { color: var(--brand-700); }

/* ==========================================================================
   Formulare
   ========================================================================== */

.form_area {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  padding: var(--space-2xlarge);
  background-color: var(--white);
  border: var(--border-hairline) solid var(--gray-200);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-small);
}

.form_grid {
  display: grid;
  gap: var(--space-large);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form_field {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}

.form_field.is-full { grid-column: 1 / -1; }

.form_label {
  color: var(--gray-900);
  font-size: var(--font-size-text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.form_label_hint {
  color: var(--gray-500);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: normal;
}

.form_input {
  width: 100%;
  padding: var(--space-main);
  background-color: var(--white);
  color: var(--gray-900);
  border: var(--border-hairline) solid var(--gray-300);
  border-radius: var(--radius-main);
  font-family: inherit;
  font-size: var(--font-size-text-main);
  line-height: var(--line-height-text-main);
  transition: border-color var(--transition-main), box-shadow var(--transition-main);
}

.form_input:hover { border-color: var(--gray-400); }

.form_input:focus {
  border-color: var(--brand-500);
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--brand-100);
}

textarea.form_input {
  min-height: var(--media-height-small);
  resize: vertical;
}

.form_check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-main);
  color: var(--gray-700);
}

.form_check input {
  margin: 0;
  flex-shrink: 0;
  width: var(--space-large);
  height: var(--space-large);
  accent-color: var(--brand-600);
}

.form_note {
  color: var(--gray-500);
  font-size: var(--font-size-text-small);
}

.form_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-main);
  padding-top: var(--space-large);
  border-top: var(--border-hairline) solid var(--gray-200);
}

.form_status {
  padding: var(--space-main);
  background-color: var(--brand-50);
  border: var(--border-hairline) solid var(--brand-200);
  border-radius: var(--radius-main);
  color: var(--brand-900);
}

.form_status[hidden] { display: none; }

/* ==========================================================================
   Fusszeile
   ========================================================================== */

.footer_area {
  padding-block: var(--section-space-main) var(--section-space-small);
  padding-inline: var(--section-inset);
  background-color: var(--gray-950);
  color: var(--gray-300);
}

.footer_grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}

.footer_logo {
  height: var(--logo-height-footer);
  width: auto;
  /* Ohne align-self zieht der Spaltenflex (.g_stack) das Bild auf die volle
   * Spaltenbreite — width: auto verliert gegen align-items: stretch, und das
   * Logo wird verzerrt. */
  align-self: flex-start;
}

.footer_title {
  color: var(--white);
  font-size: var(--font-size-text-main);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.footer_list {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  list-style: none;
}

.footer_list a {
  color: var(--gray-300);
  text-decoration: none;
}

.footer_list a:hover {
  color: var(--brand-400);
  text-decoration: underline;
}

.footer_address {
  font-style: normal;
}

.footer_address a {
  color: var(--gray-300);
}

.footer_address a:hover { color: var(--brand-400); }

.footer_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-main);
  margin-top: var(--section-space-small);
  padding-top: var(--space-xlarge);
  border-top: var(--border-hairline) solid var(--gray-800);
  color: var(--gray-400);
}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */

.legal_rich > * + * {
  margin-top: var(--space-large);
}

.legal_rich h2 {
  margin-top: var(--section-space-small);
  font-size: var(--font-size-h5);
}

.legal_rich h3 {
  margin-top: var(--space-xlarge);
  font-size: var(--font-size-h6);
}

.legal_rich ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  padding-left: var(--space-xlarge);
  list-style: disc;
}

.legal_rich address {
  font-style: normal;
}

/* ==========================================================================
   Breakpoints.
   991px und 479px sind die Konstanten des Frameworks (layout.md); 767px
   kommt in styleguide.css nicht vor und wird hier nur fuer den Umbruch der
   Navigation gebraucht.
   ========================================================================== */

@media screen and (max-width: 991px) {
  .g_grid.is-3,
  .g_grid.is-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Das Panel haengt an der Leiste, nicht am Container darin. Vorher war
   * .header_inner der Bezug, und der ist um den Innenabstand schmaler: das
   * Panel stand eingerueckt und liess links und rechts einen Streifen
   * Kopfbild stehen. Die Leiste liegt fest und ist damit von sich aus
   * Bezugsrahmen — es braucht dafuer keine zweite Regel. */
  .header_nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-large) var(--section-inset) var(--space-xlarge);
    background-color: var(--gray-950);
    border-bottom: var(--border-hairline) solid var(--gray-800);
  }

  .header_nav.is-open { display: block; }

  /* Verdunkelung unter dem Panel. Sie liegt hinter der Leiste, weil die
   * einen eigenen Stapelkontext aufmacht (z-index) und ihr Grund deshalb
   * ueber einem Kind mit negativem z-index bleibt — genau richtig: die
   * Leiste selbst soll nicht abgedunkelt werden. Sie faengt keine Klicks,
   * das Schliessen bei Klick daneben macht site.js. */
  .header_nav.is-open::after {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--overlay-main);
    content: "";
    pointer-events: none;
  }

  .header_nav_list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Als Block, damit die Trennlinie und die Tastaturmarkierung ueber die
   * ganze Zeile laufen und nicht nur unter dem Wort. */
  .header_nav_link {
    display: block;
    padding-block: var(--space-main);
    border-bottom: var(--border-hairline) solid var(--gray-800);
  }

  .header_nav_link.is-active,
  .header_nav_link:hover {
    border-bottom-color: var(--brand-500);
  }

  /* Ab hier wird mit dem Finger bedient: beide Ziele bekommen die
   * Mindesthoehe, auch wo der Knopf noch seine Beschriftung traegt. */
  .header_toggle {
    display: inline-flex;
    min-height: var(--tap-target);
  }

  .header_phone {
    justify-content: center;
    min-width: var(--tap-target);
    min-height: var(--tap-target);
  }

  .header_phone_text { display: none; }
}

@media screen and (max-width: 767px) {
  .g_grid.is-2,
  .g_grid.is-3,
  .g_grid.is-4,
  .g_grid.is-split,
  .form_grid,
  .check_list.is-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gallery_item.is-wide { grid-column: span 2; }
  .gallery_item.is-tall { grid-row: span 1; }

  .form_area { padding: var(--space-xlarge); }

  .cta_band { padding: var(--space-xlarge); }
}

@media screen and (max-width: 479px) {
  .footer_grid { grid-template-columns: minmax(0, 1fr); }

  .gallery_grid { grid-template-columns: minmax(0, 1fr); }

  .gallery_item.is-wide { grid-column: span 1; }

  .hero_actions .button_main,
  .cta_band_actions .button_main { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* Nachtrag: zentrierte Aktionszeile (Einsaetze-Seite). */
.g_row.is-center {
  justify-content: center;
}

/* --- Ueberschriftengroesse h3.
 * styleguide.css liefert bewusst KEINE .u-text-style-h3 — die Rolle
 * font-size-h3 steht auf der Markenebene (typography.md, "Die Luecke bei
 * h3"). Wer die Klasse benutzt, benutzt nichts. Also steht sie hier als
 * Komponentenklasse, gegen das Token und mit derselben Multiplikator-Leiter,
 * die der Generator fuer h3 fuehrt: .95 bei 991px, .875 bei 479px. */
.section_title {
  --_ts--font-size: var(--font-size-h3);
  font-size: var(--_ts--font-size);
  line-height: var(--line-height-h3);
}

@media screen and (max-width: 991px) {
  .section_title { --_ts--font-size: calc(var(--font-size-h3) * .95); }
}

/* Ab hier verlaesst der Sektionstitel die Multiplikator-Leiter und nimmt
 * eigene Stufen. Begruendung und Werte stehen in tokens.css. */
@media screen and (max-width: 767px) {
  .section_title { --_ts--font-size: var(--font-size-h3-medium); }
}

@media screen and (max-width: 479px) {
  .section_title { --_ts--font-size: var(--font-size-h3-small); }
}

/* --- Nachbesserungen aus der Sichtpruefung --- */

/* Bilder in zweispaltigen Abschnitten auf eine gemeinsame Hoehe bringen —
 * sonst springt das Raster zwischen Hoch- und Querformat. */
.g_grid.is-split .gallery_item_img {
  height: var(--media-height-large);
}

/* Karten einer Reihe enden buendig: die Metazeile wird nach unten gedrueckt. */
.media_card_body { flex-grow: 1; }
.media_card_meta { margin-top: auto; }

/* Die Beschriftungsspalte der Kontaktliste ausrichten. */
.contact_list_label {
  flex: 0 0 var(--label-width);
}

/* Hinweistexte auf dunklem Grund brauchen eine hellere Stufe. */
.g_section.is-dark .form_note,
.g_section.is-brand .form_note {
  color: var(--gray-400);
}

/* Dateiauswahl: der Systemknopf sitzt sonst am oberen Rand des Feldes. */
.form_input[type="file"] {
  padding: var(--space-small) var(--space-main);
  line-height: var(--line-height-tight);
}

/* Rechtstexte laufen in der Arbeitsbreite an, bleiben aber lesbar schmal —
 * so steht ihre linke Kante auf derselben Linie wie Kopfzeile und Ueberschrift. */
.legal_rich {
  max-width: var(--container-small);
}

/* Eine Kachel ausserhalb des Mosaiks (zweispaltige Abschnitte) hat keine
 * Rasterzeile, die ihre Hoehe vorgibt — sie bekommt sie oben ueber
 * .g_grid.is-split. Steht sie allein, gilt die mittlere Bildhoehe. */
.gallery_item:only-child .gallery_item_img {
  height: var(--media-height-large);
}

/* Tabler-Icon in der Kontaktliste: gleiche Grundlinie wie die Beschriftung. */
.contact_list_item .icon_inline {
  margin-top: var(--space-xsmall);
  color: var(--brand-600);
}

/* Auf schmalen Schirmen wird die Kopfzeile knapp: Telefonsymbol, Knopf und
 * Menue zusammen sind breiter als 390px. Der Knopf wird kompakt, das Wort
 * "Menü" entfaellt — der zugaengliche Name steht als aria-label am Knopf. */
@media screen and (max-width: 767px) {
  .header_inner {
    gap: var(--space-small);
    min-height: var(--header-height-top-small);
  }

  .header_logo_img { height: var(--logo-height-top-small); }
  .header_actions { gap: var(--space-small); }
  .header_toggle_text { display: none; }

  /* Der Textknopf verlaesst die Leiste und steht als volle Zeile im
   * geoeffneten Menue. Was bleibt, ist die staerkste Handlung auf einem
   * Telefon — anrufen —, und die traegt jetzt die Knopffarbe. */
  .header_cta { display: none; }
  .header_nav_foot { display: flex; }

  .header_phone {
    background-color: var(--brand-600);
    border-radius: var(--button-radius);
  }

  .header_phone:hover { color: var(--white); }

  /* Ohne Beschriftung wird der Knopf quadratisch; das Mass kommt aus dem
   * 991er-Block darueber, hier faellt nur der Innenabstand weg. */
  .header_toggle {
    justify-content: center;
    padding-inline: 0;
    min-width: var(--tap-target);
  }
}

/* Unter 479px reisst die Zeile sonst mitten im Begriff um. */
@media screen and (max-width: 479px) {
  .check_list.is-inline { flex-direction: column; gap: var(--space-small); }
}

/* ==========================================================================
   Mehrstufiges Formular

   Ohne JavaScript stehen alle Schritte untereinander und das Formular
   funktioniert wie zuvor — die Schrittanzeige und die Weiter-Knoepfe
   blendet erst site.js ein. Deshalb tragen sie im Markup hidden.
   ========================================================================== */

.form_steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-main) var(--space-large);
  padding-bottom: var(--space-large);
  border-bottom: var(--border-hairline) solid var(--gray-200);
  list-style: none;
  counter-reset: schritt;
}

.form_steps[hidden] { display: none; }

.form_steps_item {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  color: var(--gray-500);
  font-size: var(--font-size-text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.form_steps_num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-xlarge);
  height: var(--space-xlarge);
  background-color: var(--gray-100);
  color: var(--gray-500);
  border-radius: var(--radius-round);
}

.form_steps_item.is-done {
  color: var(--brand-700);
}

.form_steps_item.is-done .form_steps_num {
  background-color: var(--brand-100);
  color: var(--brand-700);
}

.form_steps_item.is-current {
  color: var(--gray-900);
}

.form_steps_item.is-current .form_steps_num {
  background-color: var(--brand-600);
  color: var(--white);
}

.form_step {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  margin: 0;
  padding: 0;
  border: 0;
}

.form_step[hidden] { display: none; }

.form_step_head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);
}

.form_step_title {
  color: var(--gray-900);
}

.form_nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-main);
}

.form_nav [hidden] { display: none; }

/* ==========================================================================
   Schmale Schirme

   Was das Framework mitbringt, reicht bis zum Tablet. Darunter stimmen drei
   Dinge nicht mehr: die Ueberschriften sind fuer die Spaltenbreite zu gross,
   der Sektionsrhythmus ist auf einem Bildschirm von 390px Breite kein
   Rhythmus mehr, sondern Leerlauf, und das Kopfbild schiebt den ersten Absatz
   unter die zweite Bildschirmhoehe.

   Die Ueberschriften laufen ueber --_ts--font-size, nicht ueber font-size:
   typography.md nennt genau das den vorgesehenen Hebel, "auch innerhalb der
   Breakpoints". Die Werte kommen aus tokens.css.
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* Deutsche Komposita sind laenger als die Spalte: "Datenschutzerklaerung"
   * hat die Seite bislang seitlich aus dem Bild geschoben. Die Trennung
   * greift, weil <html lang="de"> gesetzt ist. */
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .hero_title { --_ts--font-size: var(--font-size-h1-medium); }

  /* Das Kopfbild ist ein flex-Container; ohne das hier bliebe sein Inhalt
   * auf seiner Mindestbreite stehen und liefe rechts hinaus. */
  .hero_inner { min-width: 0; }

  .hero_section {
    min-height: var(--hero-min-height-small);
    padding-block: calc(var(--section-space-small) + var(--header-height)) var(--section-space-small);
  }

  .hero_section.is-compact {
    padding-block: calc(var(--space-2xlarge) + var(--header-height)) var(--space-2xlarge);
  }

  /* Eine Stufe herunter, jeweils auf die naechstkleinere belegte Sprosse.
   * .is-flush_top braucht keine Wiederholung — zwei Klassen wiegen mehr als
   * eine und bleiben oben bei null. */
  .g_section { padding-block: var(--section-space-small); }
  .g_section.is-small { padding-block: var(--space-2xlarge); }
  .g_section.is-large { padding-block: var(--section-space-main); }

  .timeline { gap: var(--space-2xlarge); }

  /* Solange das Menue offen ist, soll die Seite darunter nicht mitscrollen. */
  html.is-nav_open, html.is-nav_open body { overflow: hidden; }
}

@media screen and (max-width: 479px) {
  .hero_title { --_ts--font-size: var(--font-size-h1-small); }
}

/* ==========================================================================
   Stellenanzeigen
   ========================================================================== */

.stelle_kachel {
  display: flex;
  flex-direction: column;
  gap: var(--space-main);
  padding: var(--space-xlarge);
  background-color: var(--white);
  border: var(--border-hairline) solid var(--gray-200);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-small);
  transition: border-color var(--transition-main), box-shadow var(--transition-main);
  /* Bezugsrahmen fuer den flaechendeckenden Link weiter unten. */
  position: relative;
}

.stelle_kachel:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-main);
}

.stelle_kachel_titel { color: var(--gray-900); }

/* Der Link deckt die ganze Kachel ab, damit nicht nur die Ueberschrift
 * anklickbar ist - eine Kachel, auf der nur drei Worte treffen, ist auf dem
 * Telefon eine Zumutung. */
.stelle_kachel_link {
  color: inherit;
  text-decoration: none;
}

.stelle_kachel_link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.stelle_kachel_text { color: var(--gray-600); }

.stelle_eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small) var(--space-large);
  list-style: none;
}

.stelle_eckdaten_item { color: var(--gray-700); }

.stelle_eckdaten_label {
  color: var(--gray-500);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Im Kopfbild stehen die Eckdaten auf einem dunklen Foto - dieselbe Regel
 * wie bei den Haekchenlisten weiter oben, aus demselben Grund: dunkles Grau
 * auf dunklem Grund ist unlesbar. */
.hero_section .stelle_eckdaten_item { color: var(--gray-100); }
.hero_section .stelle_eckdaten_label { color: var(--gray-400); }

/* Die Beschreibung einer Stelle ist Fliesstext in Leseblattbreite; die
 * Abstaende kommen aus g_stack, hier fehlt nur die Farbe der Zwischentitel. */
.g_section .u-container-small h3 { color: var(--gray-900); }