/* Ebene 3, Component Tokens plus Bausteinregeln.
   Referenziert ausschließlich Semantic- und Component-Tokens.
   Keine Raw-Tokens, kein Hex, keine freien Pixelwerte. */

:root {
  --header-height: 4.5rem;

  --button-bg: var(--color-interactive-default);
  --button-bg-hover: var(--color-interactive-hover);
  --button-bg-active: var(--color-interactive-active);
  --button-fg: var(--color-text-inverse);
  --button-radius: var(--radius-button);
  --button-pad-x: calc(var(--space-3) * var(--density));
  --button-pad-y: calc(var(--space-1) * var(--density));

  --card-bg: var(--color-surface-default);
  --card-radius: var(--radius-card);
  --card-pad: calc(var(--space-3) * var(--density));

  --eyebrow-bg: var(--color-brand-primary);
  --eyebrow-fg: var(--color-text-inverse);

  --stat-color: var(--color-brand-primary);
}

@media (max-width: 768px) {
  :root { --header-height: 3.5rem; }
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: var(--text-leading-tight);
  margin: 0;
}

/* Fokus, Invariante 2.6. Pflicht auf allen interaktiven Elementen. */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

img { max-width: 100%; }

a { color: var(--color-interactive-default); }
a:hover { color: var(--color-interactive-hover); }


/* ===== Struktur ===== */

/* Container, Invariante 2.1 */
.huelle {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

.huelle--schmal { max-width: var(--container-narrow); }

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-1);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  padding: var(--space-1) var(--space-2);
  z-index: var(--z-hinweis);
}
.skip:focus { left: var(--space-2); }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sektionsrhythmus, Invariante 2.2. Für alle Marken identisch. */
.sektion { padding-block: var(--space-section-y); }

.sektion--default { background: var(--color-surface-default); }
.sektion--muted {
  background: var(--color-surface-muted);
  border-block: 1px solid var(--color-border-default);
}
.sektion--accent {
  background: var(--color-surface-accent);
  color: var(--color-text-inverse);
}

.sektion__kopf {
  margin-block-end: var(--space-section-head);
  max-width: 54ch;
}
.sektion__kopf h2,
.text-media h2 {
  margin-block: var(--space-3) 0;
  font-size: var(--text-display-2);
}
.sektion__subline {
  margin-block: var(--space-2) 0;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* Akzentbalken. Markiert die Sektionsköpfe. Die Variante --klein stand in der
   nutzen-liste an der Stelle des fehlenden Icons und entfiel mit ihr. */
.akzentbalken {
  display: block;
  width: var(--space-3);
  height: 4px;
  background: var(--color-brand-primary);
}


/* ===== Header, Invariante 2.4 ===== */

.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface-default);
  border-bottom: 1px solid var(--color-border-default);
}

.kopf__innen {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.kopf__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.kopf__logo img {
  height: calc(var(--header-height) - var(--space-3));
  width: auto;
  display: block;
}

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

.kopf__nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--motion-fast);
}
.kopf__nav a:hover { color: var(--color-interactive-hover); }
.kopf__nav a[aria-current="page"] { color: var(--color-interactive-default); }
.kopf__nav .knopf { color: var(--button-fg); }

.kopf__burger { display: none; }

@media (max-width: 768px) {
  .kopf__innen {
    justify-content: space-between;
  }

  .kopf__burger {
    display: block;
    background: none;
    border: 0;
    padding: var(--space-1);
    cursor: pointer;
    order: 2;
  }
  .kopf__burger-linien,
  .kopf__burger-linien::before,
  .kopf__burger-linien::after {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--color-text-primary);
    content: "";
  }
  .kopf__burger-linien::before { transform: translateY(-0.4rem); }
  .kopf__burger-linien::after { transform: translateY(0.4rem); }

  .kopf__nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: var(--header-height);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-surface-default);
    border-bottom: 1px solid var(--color-border-default);
    padding: var(--space-2) var(--container-pad-x);
  }
  .kopf__nav[data-offen="true"] { display: flex; }
  .kopf__nav a { padding-block: var(--space-2); }
  .kopf__nav .knopf { margin-block-start: var(--space-1); }
}


/* ===== Element-Baustein button ===== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-pad-y) var(--button-pad-x);
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.knopf--primaer { background: var(--button-bg); color: var(--button-fg); }
.knopf--primaer:hover { background: var(--button-bg-hover); color: var(--button-fg); }
.knopf--primaer:active { background: var(--button-bg-active); }
.knopf--sekundaer {
  border: 1.5px solid var(--color-text-secondary);
  color: var(--color-text-primary);
  background: transparent;
  font-weight: 600;
}
.knopf--sekundaer:hover {
  border-color: var(--color-interactive-default);
  color: var(--color-interactive-default);
  background: var(--color-surface-muted);
}
.knopf[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }


/* ===== Baustein hero, Varianten bild und split ===== */

.hero { background: var(--color-surface-default); }

.hero--bild { position: relative; }

/* Seitenverhältnis an die Bildquelle gebunden, damit das Motiv nicht
   beschnitten wird. Die Mindesthöhe verhindert, dass der Text bei
   schmalen Fenstern aus dem Band läuft. Wo sie greift, wird das Bild
   leicht beschnitten, das ist der bewusste Kompromiss. */
.hero--bild .hero__medium {
  aspect-ratio: 1024 / 285;
  min-height: 22rem;
  width: 100%;
}

.hero__medium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero--bild .hero__inhalt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-surface-default) 94%, transparent) 0%,
    color-mix(in oklab, var(--color-surface-default) 88%, transparent) 38%,
    transparent 66%
  );
}

.hero__inhalt .huelle { width: 100%; }

.eyebrow {
  display: inline-block;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--eyebrow-bg);
  color: var(--eyebrow-fg);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1 {
  margin-block: var(--space-3) 0;
  font-size: var(--text-display-1);
  max-width: 30ch;
  text-wrap: balance;
}

.hero__subline {
  margin-block: var(--space-3) 0;
  max-width: 46ch;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.hero__aktionen {
  margin-block-start: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__split-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.hero__inhalt--split { padding-block: var(--space-7); }
.hero--split .hero__medium--split { aspect-ratio: 4267 / 2004; }

@media (max-width: 768px) {
  .hero--bild .hero__medium { min-height: 0; }
  .hero--bild .hero__inhalt {
    position: static;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border-default);
    padding-block: var(--space-5);
  }
  .hero__split-raster { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero__inhalt--split { padding-block: var(--space-5); }
}

/* Umschalter der Testfassung. In der Produktion ist die Variante split
   entfernt, diese Regeln laufen dort ins Leere. */
[data-hero="split"] { display: none; }
:root[data-hero-active="split"] [data-hero="bild"] { display: none; }
:root[data-hero-active="split"] [data-hero="split"] { display: block; }


/* ===== Baustein vertrauens-band, Variante zahlen ===== */

.vertrauens__raster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stat__zahl {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--stat-color);
  line-height: 1;
}
.stat__bezeichnung {
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ===== Baustein text-media, Variante bild-links ===== */

.text-media__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.text-media p {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.text-media__medium {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-image);
  overflow: hidden;
}
.text-media__medium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===== Baustein stellen-liste, Variante einbettung ===== */

.stellen-liste .sektion__kopf {
  max-width: 100%;
}

/* Zustände loading, error und empty. empty ist hier erlaubt, anders als
   bei leistungs-grid: eine leere Stellenliste ist ein gültiger
   Geschäftszustand, kein Content-Fehler. */
.stellen__rahmen {
  background: var(--card-bg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  min-height: 20rem;
}

.stellen__rahmen iframe {
  width: 100%;
  border: 0;
}

.stellen__laedt,
.stellen__fehler {
  margin: 0;
  padding-block: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

.stellen__fussnote {
  margin-block: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ===== Baustein cta-band ===== */

.cta-band {
  padding-block: var(--space-4);
}

.cta__innen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 {
  font-size: var(--text-display-2);
  max-width: 28ch;
  color: var(--color-surface-default);
}
.cta__subline {
  margin-block: var(--space-2) 0;
  max-width: 46ch;
  font-size: var(--text-md);
  text-wrap: pretty;
  color: var(--color-surface-default);
}

/* Auf der Akzentfläche kehrt sich der Knopf um, damit der Kontrast trägt. */
.knopf--auf-accent,
.sektion--accent .knopf--auf-accent {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-size: var(--text-md);
  font-weight: 700;
  padding: calc(var(--button-pad-y) * 1.25) calc(var(--button-pad-x) * 1.25);
  min-height: calc(2.75rem * 1.25);
  box-shadow: 0 2px 6px color-mix(in oklab, var(--color-text-primary) 15%, transparent);
}
.knopf--auf-accent:hover,
.sektion--accent .knopf--auf-accent:hover {
  background: var(--color-surface-default);
  color: var(--color-interactive-default);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--color-text-primary) 25%, transparent);
}

/* Auf der Akzentfläche erbt der Fokusring sonst die Markenfarbe und
   verschwindet. Invariante 2.6 fordert einen sichtbaren Ring. */
.sektion--accent :focus-visible { outline-color: var(--color-surface-default); }
.sektion--accent a:not(.knopf) { color: var(--color-text-inverse); }


/* ===== Footer, Invariante 2.5 ===== */

.fuss {
  background: var(--color-surface-inverse);
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-border-default);
}

.fuss__zonen {
  padding-block: var(--space-4) var(--space-3);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1.1fr 1fr 1fr;
}

.fuss__marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 34ch;
}

.fuss__logo-flaeche img {
  height: 2.5rem;
  width: auto;
  display: block;
}

.fuss__marke p {
  margin-block: var(--space-3) 0;
  color: var(--color-brand-primary);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 1.4;
  text-wrap: pretty;
}

.fuss__titel {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.fuss__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fuss__nav address { font-style: normal; color: var(--color-text-primary); }
.fuss__nav p { margin: 0; color: var(--color-text-primary); }
.fuss__nav a { color: var(--color-text-primary); text-decoration: none; }
.fuss__nav a:hover { color: var(--color-brand-primary); }
.fuss__label { color: var(--color-text-muted); }

.fuss__legal { border-top: 1px solid var(--color-border-default); }

.fuss__legal-innen {
  padding-block: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.fuss__legal-links {
  display: flex;
  gap: var(--space-3);
}
.fuss__legal a { color: var(--color-text-secondary); text-decoration: none; }
.fuss__legal a:hover { color: var(--color-brand-primary); }

/* Immer rechts, Position gruppenweit fixiert. Mobile zentriert darunter. */
.fuss__powered { margin-inline-start: auto; }

@media (max-width: 768px) {
  .fuss__zonen { grid-template-columns: 1fr; }
  .text-media__raster { grid-template-columns: 1fr; }
  .vertrauens__raster { gap: var(--space-4); }
}

@media (max-width: 640px) {
  .fuss__legal-innen {
    justify-content: center;
    text-align: center;
  }
  .fuss__powered {
    margin-inline-start: 0;
    flex-basis: 100%;
  }
}


/* ===== Seitentyp T6 Utility ===== */

/* Schmucklos, container-narrow, keine accent-Fläche.
   Auf allen Domains der Gruppe identisch. */
.rechtstext {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.rechtstext h1 { font-size: var(--text-3xl); }
.rechtstext h2 {
  font-size: var(--text-lg);
  margin-block-end: var(--space-2);
}
.rechtstext p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.rechtstext strong { color: var(--color-text-primary); }

.stand {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Platzhalterhinweise bleiben sichtbar, bis sie ergänzt sind. */
.hinweis {
  padding: var(--space-2);
  background: var(--color-surface-muted);
  border-inline-start: 3px solid var(--color-brand-primary);
  color: var(--color-text-muted);
}