/* Schriften wie auf ki-kompass.dev, selbst gehostet.
   Die @font-face-Bloecke stehen DIREKT in dieser Datei (nicht in einer
   separaten fonts.css): /assets/fonts/ wird immutable gecacht, eine dort
   liegende CSS-Datei wuerde bei Aenderungen ein Jahr lang alt ausgeliefert
   (genau das passierte am 27.08.2026). site.css traegt ?v=<Hash>. (Entscheidung Maxim
   27.08.2026, vorher Plus Jakarta Sans + Cormorant Garamond).
   Space Grotesk und Hanken Grotesk: SIL Open Font License (OFL-Dateien
   liegen daneben). woff2 direkt aus dem ki-kompass-Projekt kopiert.

   Space Grotesk traegt Ueberschriften, Kicker und Kennzahlen und liegt
   NUR in Medium (500) vor: Ueberschriften laufen deshalb auf 500, sonst
   synthetisiert der Browser ein falsches Fett.
   Hanken Grotesk traegt Fliesstext und Bedienelemente (400/500/600/700). */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/HankenGrotesk-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/HankenGrotesk-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/HankenGrotesk-Bold.woff2') format('woff2');
}


/* ==========================================================================
   COMPASS Industrieservice — Design System
   Marke:   Rot #a83030 stammt direkt aus dem Logo-SVG (das seit 28.07.2026
            durchgaengig einfarbig ist). Grau #737373 traegt die Neutralen.
   Radien:  ein Maßstab, konsequent — 4px (Chips/Inputs), 8px (Buttons),
            14px (Karten, Panels, Bilder). Keine Pillen-Formen.
   Akzent:  genau eine Akzentfarbe auf der gesamten Seite.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Marke */
  --brand-900: #6f1f1f;
  --brand-800: #8d2727;
  --brand-700: #a83030;      /* Logo-Rot */
  --brand-600: #bd3b3b;
  --brand-500: #cf4f4f;
  --brand-100: #f6e3e3;
  --brand-050: #fcf3f3;

  /* Neutrale Graphit-Skala (kühl, eine Familie) */
  --ink-950: #101317;
  --ink-900: #171b20;
  --ink-850: #1e232a;
  --ink-800: #262c34;
  --ink-700: #363e48;
  --ink-600: #4b545f;
  --ink-500: #667080;
  --ink-400: #8b95a1;
  --ink-300: #b4bcc5;
  --ink-200: #d6dbe1;
  --ink-150: #e3e7ec;
  --ink-100: #edf0f3;
  --ink-050: #f5f7f9;
  --paper:   #ffffff;

  /* Typografie: wie auf ki-kompass.dev (Entscheidung Maxim 27.08.2026).
     --font-display (Space Grotesk, nur Medium 500 vorhanden) traegt
     Ueberschriften, Kicker und Kennzahlen; --font-sans (Hanken Grotesk)
     traegt Fliesstext und Bedienelemente. */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.32vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.4rem + 1.1vw, 2.4rem);
  --step-4:  clamp(2rem, 1.6rem + 1.9vw, 3.2rem);
  /* Obergrenze bewusst bei 3rem: die H1 der Startseite hat sieben Wörter und
     muss auf dem Desktop in zwei Zeilen passen. */
  --step-5:  clamp(2.15rem, 1.7rem + 1.9vw, 3rem);

  /* Radien */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Raster: 80rem wie ki-kompass.dev (verbreitert 27.08.2026, vorher 1220px) */
  --container: 80rem;
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);
  --section-y: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  /* Kopfleiste im TWD-Format (27.08.2026): grosses Logo, feste Hoehe.
     Hero und Seitenkopf beginnen UNTER der Leiste (negatives margin-top),
     deshalb haengt an diesem Wert auch deren padding-top. */
  --kopf-hoehe: 108px;

  /* Bewegung */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.32s;

  /* Ebenen */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
}

/* Semantische Tokens. Die Seite laeuft bewusst NUR hell (Entscheidung Maxim
   27.08.2026, Dunkelmodus samt Umschalter entfernt); dunkle Flaechen wie
   Seitenkopf, Band, Abschluss-Sektion und Footer sind feste Gestaltungs-
   elemente auf --bg-inverse und kein Theme. */
:root {
  color-scheme: light;
  --bg:          var(--paper);
  --bg-sub:      var(--ink-050);
  --bg-elev:     var(--paper);
  --bg-inverse:  var(--ink-950);
  --fg:          var(--ink-900);
  --fg-strong:   var(--ink-950);
  --fg-muted:    var(--ink-600);
  --fg-subtle:   var(--ink-500);
  --fg-inverse:  #f2f4f6;
  --line:        var(--ink-150);
  --line-strong: var(--ink-200);
  --accent:      var(--brand-700);   /* nur Flächen (Buttons, Bänder) */
  --accent-text: var(--brand-700);   /* nur Vordergrund (Links, Icons, Zahlen) */
  --accent-hover:var(--brand-800);
  --accent-fg:   #ffffff;
  --accent-soft: var(--brand-050);
  --accent-line: var(--brand-100);
  --shadow-sm: 0 1px 2px rgb(16 19 23 / 0.05), 0 2px 6px rgb(16 19 23 / 0.04);
  --shadow-md: 0 2px 4px rgb(16 19 23 / 0.05), 0 12px 28px rgb(16 19 23 / 0.09);
  --shadow-lg: 0 4px 8px rgb(16 19 23 / 0.06), 0 24px 56px rgb(16 19 23 / 0.13);
}

/* --- 2. Reset ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

h1, h2, h3, h4, h5 {
  /* Space Grotesk liegt nur in Medium vor: 500 statt 600, sonst
     synthetisiert der Browser ein falsches Fett. */
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  text-wrap: balance;
  /* Deutsche Komposita sind lang: „Chemische Spezialreinigung" passt auf
     schmalen Geräten in keine Überschriftenzeile. Ohne Trennung läuft sie aus
     dem Kasten. Der Browser trennt nach Wörterbuch, das lang-Attribut steht
     auf de; die Trennstellen der Leistungsnamen setzt zusätzlich die Tabelle
     TRENNFUGEN in build.py. */
  overflow-wrap: break-word;
}

p { text-wrap: pretty; }

/* Trennung nur dort, wo der Platz eng wird. Auf dem Desktop bleiben
   Überschriften ungetrennt, das liest sich ruhiger. */
@media (max-width: 900px) {
  h1, h2, h3, .prose p, .service-card__body p, .feature-grid p, .zeitstrahl p { hyphens: auto; }
}

/* Fließtext darf immer trennen: lange Fachbegriffe stehen mitten im Satz. */
.prose p, .prose li, .feature-grid p, .values p, .service-card__body p { overflow-wrap: break-word; }

ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: var(--accent-fg); }

/* Bewegung läuft standardmäßig, unabhängig von der Systemeinstellung
   „Bewegung reduzieren". Bewusste Entscheidung: Verschieben, Skalieren und
   Hochzählen sollen auf jedem Gerät stattfinden.
   Wer sie trotzdem nicht möchte, schaltet sie über den Schalter im Fußbereich
   ab; die Wahl liegt in data-motion und bleibt gespeichert. Damit bleibt die
   Abschaltbarkeit erhalten, sie ist nur nicht mehr die Voreinstellung. */
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  /* Bewegung entfällt, Farb- und Deckkraftwechsel bleiben: ohne sie fühlt
     sich die Seite beim Zeigen auf Buttons und Links tot an. */
  transition-property: opacity, color, background-color, border-color,
                       box-shadow, fill, outline-color !important;
  transition-duration: 0.22s !important;
}

/* --- 3. Layout-Primitive ------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }

/* Anker-Landung (ki-kompass-Muster, 27.08.2026): der Sektionskopf kommt
   mit fester 2.5rem-Luecke unter der Leiste an. Das Sektions-Padding wird
   aus der scroll-margin herausgerechnet, sonst landet man im Leerraum
   (ersetzt das fruehere globale scroll-padding-top, das den Leerraum
   zusaetzlich vergroesserte). Der Hero hat keinen Anker und bleibt aussen
   vor; #ueber-uns ist der Wrapper, dessen erstes Kind (Band) dasselbe
   Padding traegt. */
#leistungen, #ueber-uns, #prozess, #karriere, #kontakt, #faq, #stellen {
  scroll-margin-top: calc(var(--kopf-hoehe) + 2.5rem - var(--section-y));
}
.section--sub { background: var(--bg-sub); }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
/* Kicker nach dem Muster ki-kompass.dev (Wunsch Maxim 27.08.2026): kurze
   Versalzeile mit Strich darunter, dann die Überschrift. */
.kicker {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.15rem;
}
.kicker::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.55rem;
  background: var(--accent);
}
.kicker--on-dark { color: #e8797b; }
.kicker--on-dark::after { background: #e8797b; }
.section-head h2 { font-size: var(--step-4); }
/* :not(.kicker) ist entscheidend: sonst schlaegt diese Regel (0,1,1) die
   Kicker-Regel (0,1,0) und die Kicker liefen groesser und grau statt in
   der Eyebrow-Groesse und -Farbe (Befund Maxim 27.08.2026). */
.section-head p:not(.kicker) {
  margin-top: 1rem;
  font-size: var(--step-1);
  color: var(--fg-muted);
  max-width: 62ch;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: var(--z-overlay);
  padding: 0.75rem 1.15rem;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
}

/* --- 4. Buttons & Links ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.82rem 1.4rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform 0.12s var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: var(--shadow-sm);
}
/* Glanz-Streifen alle 6 Sekunden: lenkt den Blick periodisch auf die eine
   Primäraktion der Seite. Nur transform wird animiert; der globale
   data-motion-Schalter im Fußbereich stoppt auch das. */
/* In der Kopfleiste bewusst OHNE Glanz (Wunsch Maxim 27.08.2026): dort ist
   der Button Dauergast im Blickfeld, der Streifen wuerde nerven. */
.header .btn--primary::after { content: none; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 38%;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / 0.3), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: cis-glanz 6s linear 2.8s infinite;
  pointer-events: none;
}
.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(1px); }

.btn--outline {
  border-color: var(--line-strong);
  color: var(--fg-strong);
  background: var(--bg-elev);
}
.btn--outline:hover { border-color: var(--fg-subtle); background: var(--bg-sub); }

.btn--ghost { color: var(--fg-strong); border-color: transparent; padding-inline: 0.9rem; }
.btn--ghost:hover { background: var(--bg-sub); }

.btn--on-dark {
  border-color: rgb(255 255 255 / 0.28);
  color: #ffffff;
  background: rgb(255 255 255 / 0.06);
}
.btn--on-dark:hover { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.5); }

.btn--sm { padding: 0.6rem 1rem; font-size: var(--step--1); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
  text-underline-offset: 4px;
}
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* --- 5. Kopfbereich ----------------------------------------------------- */

/* Leiste im TWD-Format: liegt ueber dem Seitenanfang und ist dort ohne
   Hintergrund; erst beim Scrollen (data-stuck) kommen Flaeche, Blur und
   Linie. Ohne JavaScript (kein .js am html) bleibt sie dauerhaft gefuellt,
   sonst stuende weisse Schrift irgendwann auf hellem Inhalt. */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.js .header:not([data-stuck="true"]) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
}
.header[data-stuck="true"] { box-shadow: var(--shadow-sm); }

@supports not (backdrop-filter: blur(1px)) {
  .header[data-stuck="true"] { background: var(--bg); }
}

/* Aufteilung wie ki-kompass.dev (27.08.2026, Wunsch Maxim): Logo links,
   Navigation zentriert, Button rechts. Die 1fr-Spalten geben nach, sobald
   der Platz knapp wird -- die Mindestbreite bleibt dieselbe wie beim
   frueheren Flex-Layout, der Burger-Umbruch bei 900px gilt weiter. */
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.75rem, 0.2rem + 1.6vw, 2rem);
  height: var(--kopf-hoehe);
}

.brand { display: flex; align-items: center; justify-self: start; text-decoration: none; }
.brand__mark {
  height: 72px;
  width: auto;
  transform-origin: left center;
  transition: transform 0.32s var(--ease);
}
/* Zustandswechsel: die Seite ist gescrollt. Nur das Logo skaliert, die
   Kopfhoehe bleibt konstant, sonst wuerde der Inhalt darunter springen. */
.header[data-stuck="true"] .brand__mark { transform: scale(0.82); }
/* Zwei Logo-Varianten: ueber dem dunklen Seitenkopf laeuft die aufgehellte
   Fassung, sobald die Leiste ihren Hintergrund hat die normale. */
.brand__mark--hell { display: none; }
.js .header--over-dark:not([data-stuck="true"]) .brand__mark--dunkel { display: none; }
.js .header--over-dark:not([data-stuck="true"]) .brand__mark--hell { display: block; }

/* Heller Modus der Leiste ueber dem dunklen Seitenkopf */
.js .header--over-dark:not([data-stuck="true"]) .nav__link { color: rgb(255 255 255 / 0.82); }
.js .header--over-dark:not([data-stuck="true"]) .nav__link:hover,
.js .header--over-dark:not([data-stuck="true"]) .nav__link[aria-current="page"],
.js .header--over-dark:not([data-stuck="true"]) .nav__link.is-here { color: #ffffff; }
.js .header--over-dark:not([data-stuck="true"]) .nav__link:hover { background: rgb(255 255 255 / 0.1); }
.js .header--over-dark:not([data-stuck="true"]) .nav__link::after { background: #e8797b; }
.js .header--over-dark:not([data-stuck="true"]) .icon-btn {
  border-color: rgb(255 255 255 / 0.35);
  color: #ffffff;
}
.js .header--over-dark:not([data-stuck="true"]) .icon-btn:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.6); color: #ffffff; }

.nav { display: flex; align-items: center; gap: clamp(0.15rem, 1.2vw - 0.6rem, 0.9rem); justify-self: center; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.55rem 0.72rem;
  border-radius: var(--r-sm);
  /* Gleiche Stufe wie die ki-kompass-Nav (17px Fliesstext, Gewicht 500). */
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__link:hover { color: var(--fg-strong); background: var(--bg-sub); }
.nav__link[aria-current="page"] { color: var(--fg-strong); font-weight: 600; }

/* Unterstrich als Rueckmeldung: waechst von links (Muster ki-kompass/TWD),
   bleibt auf der aktiven Seite stehen und markiert per .is-here zusaetzlich
   den Abschnitt, in dem man sich gerade befindet (Scrollspy in site.js). */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  right: 0.72rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
}
.nav__link { position: relative; }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after,
.nav__link.is-here::after { transform: scaleX(1); }
.nav__link.is-here { color: var(--fg-strong); }
/* Waehrend ein Abschnitt markiert ist, tritt der Seiten-Unterstrich zurueck:
   genau eine Markierung zur Zeit (gesetzt vom Scrollspy in site.js). */
.nav__link[aria-current="page"].is-quiet:not(:hover)::after { transform: scaleX(0); }

.nav__item { position: relative; }
.nav__item > .nav__link .icon { width: 0.9em; height: 0.9em; transition: transform 0.2s var(--ease); }
.nav__item:hover > .nav__link .icon,
.nav__item:focus-within > .nav__link .icon { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  translate: -50% 0;
  min-width: 19rem;
  padding: 0.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__panel a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  color: var(--fg-muted);
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__panel a:hover { background: var(--bg-sub); color: var(--fg-strong); }

.header__actions { display: flex; align-items: center; gap: 0.5rem; justify-self: end; white-space: nowrap; }


.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.icon-btn:hover { color: var(--fg-strong); border-color: var(--line-strong); background: var(--bg-sub); }
.icon-btn .icon { width: 1.15rem; height: 1.15rem; }

.burger { display: none; }

/* Mobiles Menü */
.mobile-nav {
  position: fixed;
  inset: var(--kopf-hoehe) 0 0 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 1.25rem var(--gutter) 2.5rem;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
/* :not(.btn) wie beim Fliesstext: sonst faerbt diese Regel (0,1,1) die Schrift
   der beiden Buttons am Fuss des Menues schwarz auf Rot (2,8:1) und vererbt
   ihnen zusaetzlich Rahmen, Innenabstand und space-between-Ausrichtung. */
.mobile-nav a:not(.btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--fg-strong);
  text-decoration: none;
}
.mobile-nav a:not(.btn) .icon { color: var(--fg-subtle); width: 1rem; height: 1rem; }
.mobile-nav__group { margin-top: 1.5rem; }
.mobile-nav__group > p {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 0.35rem;
}
.mobile-nav__group a { font-size: var(--step-0); font-weight: 400; color: var(--fg-muted); }
.mobile-nav__cta { margin-top: 2rem; display: grid; gap: 0.65rem; }

/* Mobile Aktionsleiste (Kontakt immer erreichbar) */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  gap: 0.6rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.action-bar .btn { flex: 1; }

/* --- 6. Hero ------------------------------------------------------------ */

/* Hero im 50/50-Prinzip nach dem Vorbild ki-kompass.dev (Wunsch Maxim
   27.08.2026): links der Text vertikal zentriert, rechts das Video als
   volle Flaeche bis an die Raender, zusammen etwa fensterhoch. Beginnt
   UNTER der transparenten Kopfleiste. */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--kopf-hoehe));
  display: grid;
  /* Video etwas breiter als die Haelfte (Wunsch Maxim 27.08.2026, rote
     Linie im Screenshot: Textspalte ~45%, Video ~55%). */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: min(100dvh, 56rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 34rem at 40% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg-sub), transparent 60%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  padding-top: calc(var(--kopf-hoehe) + 2.5rem);
  padding-bottom: 3rem;
  padding-right: clamp(1.25rem, 0.75rem + 1.75vw, 3rem);
  /* Linker Rand laeuft mit dem Seitenraster: ab Container-Breite beginnt der
     Text dort, wo auch .wrap beginnen wuerde. */
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.hero__content > * { max-width: 34rem; }

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.5rem;
}
.hero__eyebrow::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.55rem;
  background: var(--accent);
}

/* Kompakter als die Standard-Stufe (Wunsch Maxim: zwei Zeilen statt drei,
   wirkte zu gross); die Zeilenfuehrung kommt aus content.py ueber
   span.zeile, deshalb hier ohne text-wrap: balance. */
.hero h1 {
  font-size: clamp(1.9rem, 1.35rem + 1.35vw, 2.3rem);
  letter-spacing: -0.022em;
  text-wrap: wrap;
}

/* Feste Zeilenfuehrung nur auf breiten Fenstern: jede Zeile als Block,
   in jedem Browser identisch (die br-Variante brach in Safari zusaetzlich
   um). Auf Schmal fliessen die spans inline. */
@media (min-width: 1081px) {
  .zeile { display: block; }
}
.hero__lead {
  margin-top: 1.35rem;
  font-size: var(--step-1);
  color: var(--fg-muted);
  max-width: 46ch;
}
/* Buttons und Zusagen in EINEM Raster (Wunsch Maxim): Spalte 1 fluchtet
   mit "Angebot anfordern", Spalte 2 exakt mit "Leistungen ansehen". */
.hero__aktion {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-items: start;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero__signal {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--fg-muted);
}
/* Luft zwischen Button-Reihe und erster Zusagen-Reihe */
.hero__aktion .hero__signal:nth-of-type(1),
.hero__aktion .hero__signal:nth-of-type(2) { margin-top: 1.4rem; }
.hero__signal .icon { color: var(--accent-text); width: 1.1rem; height: 1.1rem; margin-top: 0.16em; flex: none; }

/* Scroll-Pfeil (Muster ki-kompass/McKinsey): nur auf breiten, ausreichend
   hohen Fenstern, wo der fensterhohe Hero wie eine abgeschlossene Seite
   wirken koennte. Sitzt auf der Textflucht, gleitet sanft und verschwindet,
   sobald gescrollt wird (Leiste traegt dann data-stuck). */
.hero-pfeil { display: none; }
/* Nur wenn der Hero samt Pfeil-Spur ins Fenster passt: seit der kompakteren
   H1 (zwei Zeilen) und den einzeiligen Signalen reichen dafuer 46rem
   Fensterhoehe, also auch normale Laptop-Fenster. */
@media (min-width: 76rem) and (min-height: 46rem) {
  /* Spur fuer den Pfeil unter der Signal-Zeile reservieren, sonst
     ueberlappt er deren letzten Eintrag. */
  .hero__content { padding-bottom: 6.5rem; }
  .hero-pfeil {
    display: block;
    position: absolute;
    left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    bottom: 2.25rem;
    z-index: 1;
    color: var(--fg-strong);
    opacity: 0.85;
    transition: opacity 0.3s var(--ease);
  }
  .hero-pfeil:hover,
  .hero-pfeil:focus-visible { opacity: 1; }
  .hero-pfeil svg { animation: cis-pfeil-gleiten 2.2s ease-in-out infinite; }
  .header[data-stuck="true"] ~ main .hero-pfeil { opacity: 0; pointer-events: none; }
}

@keyframes cis-pfeil-gleiten {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.5rem); }
}

.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  /* Beginnt erst UNTER der Leistenzone (wie beim Original ki-kompass.dev):
     sonst stuenden Navigation und Telefon-Chip unlesbar auf dem Video. */
  margin-top: var(--kopf-hoehe);
}
/* Nur das Video und sein Fallback-Bild fuellen die Flaeche; das
   Marken-Wasserzeichen (.hero__marke) hat eigene Masse. */
.hero__media video,
.hero__media video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marken-Wasserzeichen auf dem Hero-Video: weiss, groesser als das
   Header-Logo (Wunsch der GF: Marke soll haengenbleiben), mit feinem
   dunklem Schein, damit es auch auf dem hellen Himmel von Clip 1 steht. */
.hero__marke {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  z-index: 1;
  height: 88px;
  width: auto;
  opacity: 0.95;
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.45));
  pointer-events: none;
}
@media (max-width: 1080px) {
  .hero__marke { height: 52px; top: 1rem; right: 1rem; }
}

/* Pausen-Knopf des Hero-Videos: immer sichtbar (WCAG 2.2.2, Bewegung laenger
   als 5 Sekunden braucht einen Stopp), dezent auf dunklem Glasgrund. */
.video-toggle {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgb(16 19 23 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.3);
  color: #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.video-toggle:hover { background: rgb(16 19 23 / 0.78); border-color: rgb(255 255 255 / 0.55); }
.video-toggle .icon { width: 1rem; height: 1rem; }
.video-toggle .icon--play { display: none; }
.video-toggle[aria-pressed="true"] .icon--pause { display: none; }
.video-toggle[aria-pressed="true"] .icon--play { display: block; }

/* Seitenkopf für Unterseiten.
   Feste Mindesthöhe mit vertikal zentriertem Inhalt: sonst springt der Block
   je nach Zeilenzahl von Überschrift und Untertitel um bis zu 95 px, und die
   Leistungsseiten wirken beim Wechseln unruhig. Die Untertitel in content.py
   sind zusätzlich auf eine einheitliche Länge gebracht. */
.pagehead {
  position: relative;
  display: grid;
  align-content: center;
  /* Beginnt UNTER der transparenten Kopfleiste (dort laeuft sie im hellen
     Modus, siehe .header--over-dark); Hoehe und padding-top gleichen die
     Leistenhoehe aus, die sichtbare Kopfflaeche bleibt unveraendert. */
  margin-top: calc(-1 * var(--kopf-hoehe));
  min-height: calc(clamp(21rem, 17rem + 10vw, 28rem) + var(--kopf-hoehe));
  padding-top: calc(var(--kopf-hoehe) + clamp(2.5rem, 2rem + 2vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background: var(--bg-inverse);
  color: #ffffff;
  overflow: hidden;
}
.pagehead__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.28;
  filter: grayscale(0.35);
}
.pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(16 19 23 / 0.94) 30%, rgb(16 19 23 / 0.62));
}
.pagehead__inner { position: relative; z-index: 1; }
/* 30ch statt 20ch: sonst bricht ausgerechnet „Chemische Spezialreinigung"
   als einzige Überschrift auf zwei Zeilen um. */
.pagehead h1 { font-size: var(--step-4); color: #ffffff; max-width: min(100%, 30ch); }
.pagehead p {
  margin-top: 1rem;
  max-width: 58ch;
  color: rgb(255 255 255 / 0.78);
  font-size: var(--step-1);
}
.pagehead__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.85rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.6);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .icon { width: 0.8rem; height: 0.8rem; opacity: 0.6; }

/* --- 7. Kontaktleiste --------------------------------------------------- */

/* Umbau 27.08.2026 (Wunsch Maxim): keine Labels, keine Zwischenlinien —
   drei verlinkte Kontaktwege im ki-kompass-Stil (Icon + unterstrichener
   Wert). Die Trennlinie oben startet auf der Container-Flucht und laeuft
   rechts bis an den Fensterrand: die Flucht des randlosen Hero-Videos,
   exakt die ki-kompass-Machart. */
.contact-strip { border-bottom: 1px solid var(--line); background: var(--bg); }
.contact-strip::before {
  content: "";
  display: block;
  height: 1px;
  margin-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  background: var(--line-strong);
}
.contact-strip__grid {
  display: grid;
  /* Drei gleiche Drittel, jeder Weg darin zentriert (Wunsch Maxim): der
     Rhythmus der frueheren Boxen, ohne bis an die Raender zu laufen. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  padding-block: 1.7rem;
}
.contact-strip__item {
  display: inline-flex;
  /* Vertikal zentriert (Wunsch Maxim): die Icon-Box mittig neben dem Text,
     auch bei der zweizeiligen Adresse. */
  align-items: center;
  gap: 0.9rem;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--fg-strong);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
/* Icon-Box (Wunsch Maxim): gibt den drei Wegen Struktur und Einheit. */
.contact-strip__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.contact-strip__symbol .icon { width: 1.25rem; height: 1.25rem; }
.contact-strip__item:hover .contact-strip__symbol { border-color: var(--accent); }
.contact-strip__item span:not(.contact-strip__symbol) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--fg-strong) 40%, transparent);
  transition: text-decoration-color 0.2s var(--ease);
  line-height: 1.45;
}
.contact-strip__item:hover { color: var(--accent-text); }
.contact-strip__item:hover span:not(.contact-strip__symbol) { text-decoration-color: currentColor; }

/* --- 8. Leistungs-Raster ------------------------------------------------ */

/* Vier Spalten statt zwei grosser plus sechs kleiner Karten. Grund ist die
   Bildqualitaet: die Fotos sind nur 305 px breit. Bei zwei grossen Karten
   wurden sie auf 558 px CSS gezogen, also fast auf das Doppelte. Bei vier
   Spalten liegt die Anzeigebreite bei rund 265 px, das Bild wird verkleinert
   statt vergroessert und ist auf normalen Displays scharf. */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.5rem);
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.service-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.service-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-sub); }
/* Akzentlinie faehrt beim Zeigen unter dem Bild ein: zeigt an, dass die
   ganze Karte anklickbar ist. */
.service-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.service-card:hover .service-card__media::after,
.service-card:focus-visible .service-card__media::after { transform: scaleX(1); }
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.04); }

.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 1.35rem;
}
.service-card__body h3 { font-size: var(--step-1); }
.service-card__body p {
  font-size: var(--step--1);
  color: var(--fg-muted);
  line-height: 1.55;
  /* balance statt pretty: die Spalte ist nur rund 27 Zeichen breit, dort
     bekommt pretty die Waise in der Schlusszeile nicht weg.
     hyphens greift hier nur in Browsern ohne balance: Chrome schaltet die
     Trennung waehrend des Ausbalancierens ab. Die beiden Karten mit sehr
     langen Komposita sind deshalb im Text gekuerzt worden. */
  text-wrap: balance;
  hyphens: auto;
}
.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-text);
}
.service-card__more .icon { width: 0.95rem; height: 0.95rem; transition: transform var(--dur) var(--ease); }
.service-card:hover .service-card__more .icon { transform: translateX(3px); }

/* --- 9. Dunkles Band: Haltung + Kennzahlen ------------------------------ */

.band {
  position: relative;
  background: var(--bg-inverse);
  color: #e9edf1;
  overflow: hidden;
  padding-block: var(--section-y);
}
.band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  filter: grayscale(1);
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50rem 30rem at 15% 0%, rgb(168 48 48 / 0.28), transparent 60%);
}
/* Nur den Inhalt anheben, nicht das absolut positionierte Hintergrundbild. */
.band > .wrap { position: relative; z-index: 1; }
.band h2 { color: #ffffff; font-size: var(--step-4); }

.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
/* :not(.kicker) noetig: sonst schlaegt Element+Klasse (0,1,1) den
   .kicker--on-dark (0,1,0) und faerbt den Kicker grau in --step-1 --
   dieselbe Spezifitaets-Falle wie .section-head p und .prose a. */
.band__intro p:not(.kicker) {
  margin-top: 1.15rem;
  color: rgb(233 237 241 / 0.75);
  font-size: var(--step-1);
  max-width: 40ch;
}

.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgb(255 255 255 / 0.13); border: 1px solid rgb(255 255 255 / 0.13); border-radius: var(--r-lg); overflow: hidden; }
.values > li { background: var(--bg-inverse); padding: 1.5rem 1.4rem; }
.values .icon { width: 1.5rem; height: 1.5rem; color: #ec8080; margin-bottom: 0.85rem; }
.values h3 { color: #ffffff; font-size: var(--step-0); margin-bottom: 0.35rem; }
.values p { font-size: var(--step--1); color: rgb(233 237 241 / 0.66); line-height: 1.55; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid rgb(255 255 255 / 0.15);
}
.stats dt {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: clamp(2.8rem, 2rem + 3.4vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.stats dd {
  margin: 0.6rem 0 0;
  font-size: var(--step--1);
  color: rgb(233 237 241 / 0.66);
  max-width: 22ch;
}

/* --- 10. Prozess (Zeitstrahl, ki-kompass-Vorbild 27.08.2026) ------------ */
/* Vier Schritte nebeneinander: nummerierte Kreise, Verbindungslinie, darunter
   Titel und Text. Kopf zweispaltig mit drei Prinzipien rechts, unten das
   dunkle Kontroll-Banner. Aktiv-Zustand (gefuellter Kreis) kommt vom
   Hover und vom automatischen Lauf in site.js. */

.prozess-kopf {
  display: grid;
  gap: 2rem clamp(2rem, 4vw, 5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.prozess-kopf .section-head { margin-bottom: 0; }
@media (min-width: 76rem) {
  .prozess-kopf { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); }
  .prozess-kopf .prinzipien { justify-self: end; }
}

.prinzipien { display: grid; gap: 1rem; justify-content: start; }
.prinzipien li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--fg-strong);
}
.prinzip-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}
.prinzip-symbol .icon { width: 1.25rem; height: 1.25rem; }

.zeitstrahl { display: grid; gap: 2.25rem; }
@media (min-width: 54rem) {
  .zeitstrahl { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.zeitstrahl li { position: relative; }

.ts-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  /* Prozess liegt auf der Sub-Flaeche: Kreisinneres muss die Sektionsfarbe
     tragen, sonst steht ein weisser Fleck auf grauem Grund. */
  background: var(--bg-sub);
  position: relative;
  z-index: 1;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
              color 0.22s var(--ease), box-shadow 0.22s var(--ease),
              transform 0.22s cubic-bezier(0.34, 1.3, 0.5, 1);
}

/* Verbindungslinie zwischen den Kreisen (nur nebeneinander) */
@media (min-width: 54rem) {
  .zeitstrahl li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 3rem;
    right: -2rem;
    height: 1px;
    background: var(--line-strong);
  }
}

.zeitstrahl h3 {
  font-size: var(--step-1);
  letter-spacing: -0.021em;
  margin-top: 1.15rem;
  transition: color 0.22s var(--ease);
}
/* Eine Stufe kleiner als Fliesstext (Wunsch Maxim): alle vier Texte stehen
   damit auf Desktop-Breiten einheitlich in maximal zwei Zeilen. */
.zeitstrahl li > p { margin-top: 0.6rem; color: var(--fg-muted); font-size: var(--step--1); line-height: 1.55; }

/* Aktiver Schritt: Kreis fuellt sich, waechst leicht, Ring in der weichen
   Akzentflaeche; die Ueberschrift nimmt den Akzent an. Hover greift sofort,
   der automatische Lauf (Klasse laeuft) blendet weicher (700 ms). */
.zeitstrahl li.ist-aktiv .ts-nr {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  transform: scale(1.08);
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.zeitstrahl li.ist-aktiv h3 { color: var(--accent-text); }
@media (hover: hover) {
  .zeitstrahl li:hover .ts-nr {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
    transform: scale(1.08);
    box-shadow: 0 0 0 6px var(--accent-soft);
  }
  .zeitstrahl li:hover h3 { color: var(--accent-text); }
}
.zeitstrahl.laeuft .ts-nr { transition-duration: 700ms; transition-timing-function: ease-in-out; }
.zeitstrahl.laeuft h3 { transition-duration: 700ms; }

/* Banner unter dem Zeitstrahl: die weiche Akzent-Flaeche (--accent-soft,
   Wunsch Maxim per Screenshot, 27.08.2026 abends) -- derselbe Rose-Ton wie
   die Icon-Kacheln, mit feiner Akzent-Linie. Der Button darauf ist ein
   regulaerer btn--primary im dunklen Akzent-Rot samt Glanz wie im Hero;
   Icon-Kachel links auf Weiss, damit sie sich von der Flaeche abhebt. */
.prozess-banner {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  background: var(--accent-soft);
  /* Rahmen im dunklen Akzent-Rot (Wunsch Maxim, 27.08.2026 abends). */
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 2rem 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.prozess-banner__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--r-md);
  background: #ffffff;
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}
.prozess-banner__symbol .icon { width: 1.4rem; height: 1.4rem; }
.prozess-banner__text { flex: 1 1 24rem; }
.prozess-banner h3 { color: var(--fg-strong); font-size: var(--step-1); }
.prozess-banner p { color: var(--fg-muted); margin-top: 0.4rem; max-width: 52ch; }
.prozess-banner .btn--primary { flex: none; }

/* --- 11. Split-Abschnitt (Text + Bild) ---------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 2;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body h2 { font-size: var(--step-3); }
/* :not(.kicker): sonst schlaegt Element+Klasse den Kicker (bekannte Falle). */
.split__body p:not(.kicker) { margin-top: 1.1rem; color: var(--fg-muted); }
.split__body .btn, .split__body .link-arrow { margin-top: 1.6rem; }

.checklist { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.checklist li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--step-0); }
.checklist .icon { color: var(--accent-text); margin-top: 0.2em; width: 1.15rem; height: 1.15rem; }

/* --- 12. Leistungs-Detailseite ------------------------------------------ */

/* Flex statt Grid: die Leistungslisten haben 4 bis 8 Einträge. Mit auto-fit-Grid
   entstünden Leerzellen in der letzten Reihe; hier wachsen die letzten Karten auf. */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.feature-grid > li {
  /* --basis steuert die Spaltenzahl (build.py setzt sie nach Anzahl der
     Einträge), damit in der letzten Reihe nie eine einzelne Karte über die
     volle Breite läuft. */
  flex: 1 1 var(--basis, 17rem);
  min-width: min(100%, var(--basis, 17rem));
  background: var(--bg-elev);
  padding: 1.5rem 1.4rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.feature-grid > li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.feature-grid .icon { width: 1.4rem; height: 1.4rem; color: var(--accent-text); margin-bottom: 0.8rem; }
.feature-grid h3 { font-size: var(--step-0); margin-bottom: 0.4rem; }
.feature-grid p { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.55; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--step-3); margin-top: 2.5rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose p { color: var(--fg-muted); }
.prose strong { color: var(--fg-strong); font-weight: 600; }
/* :not(.btn) ist entscheidend. Ohne das schlaegt diese Regel (0,1,1) die
   Button-Regel .btn--primary (0,1,0) und faerbt die Schrift eines Buttons im
   Fliesstext in die Akzentfarbe: dunkelrot auf dunkelrot, also unsichtbar.
   Genau so war der Bewerben-Button in den Stellenanzeigen unlesbar. */
.prose a:not(.btn) { color: var(--accent-text); text-underline-offset: 3px; }
.prose ul { display: grid; gap: 0.6rem; }
.prose ul li { position: relative; padding-left: 1.4rem; color: var(--fg-muted); }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.68em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}

/* Akkordeon (FAQ) */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 0;
  text-align: left;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--fg-strong);
  line-height: 1.35;
}
.faq__trigger .icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2em;
  color: var(--accent-text);
  transition: transform var(--dur) var(--ease);
}
/* Plus-Mechanik (ki-kompass-Muster): das X-Icon steht 45 Grad gedreht als
   Plus; beim Oeffnen dreht es zurueck und wird zum Schliessen-Kreuz. */
.faq__trigger .faq__plus { transform: rotate(45deg); }
.faq__trigger[aria-expanded="true"] .faq__plus { transform: rotate(0deg); }
/* Startseiten-FAQ: begrenzte Lesebreite (ki-kompass-Muster). */
.faq--solo { max-width: 52rem; border-top: 1px solid var(--line); }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
/* Der Auslöser steckt in einem <h3>, ist also kein direktes Geschwister des
   Panels. Deshalb über den umgebenden Eintrag greifen. */
.faq__item:has(.faq__trigger[aria-expanded="true"]) .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel .prose { padding-bottom: 1.4rem; max-width: 62ch; }

/* Seitenspalte */
.layout-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.sticky-card { position: sticky; top: calc(var(--kopf-hoehe) + 1rem); display: grid; gap: 1.25rem; }

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
/* Rahmen im dunklen Akzent-Rot wie das Prozess-Banner (Wunsch Maxim). */
.panel--accent { background: var(--accent-soft); border-color: var(--accent); }
.panel h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.panel p { font-size: var(--step--1); color: var(--fg-muted); }
.panel .btn { margin-top: 1.1rem; }

/* Teaser-Kasten (Karriere-Hinweis auf Startseite und Über uns).
   Zuvor mit Inline-Grid gebaut, das auf dem Handy nicht umbrach: die
   Button-Spalte blieb stehen und der Text lief aus dem Kasten heraus. */
.panel--teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
}
.panel--teaser h2 { font-size: var(--step-2); }
.panel--teaser p { margin-top: 0.6rem; max-width: 54ch; }
.panel--teaser .btn { margin-top: 0; }

@media (max-width: 640px) {
  .panel--teaser { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .panel--teaser .btn { justify-self: start; }
}

/* Karriere-Sektion der Startseite (27.08.2026): die drei offenen Stellen
   als Karten -- gleiche Karten-Mechanik wie die Leistungs-Karten (Flaeche,
   Linie, Hover-Lift), Daten aus CAREER["jobs"]. */
.job-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
/* Aufbau exakt wie .service-card (Wunsch Maxim): randloses Bild bis an
   die Kartenkanten, Akzentlinie faehrt beim Zeigen unter dem Bild ein,
   darunter der Textkoerper mit Innenabstand. */
.job-karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.job-karte:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.job-karte__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-sub); }
.job-karte__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.job-karte:hover .job-karte__media::after,
.job-karte:focus-visible .job-karte__media::after { transform: scaleX(1); }
.job-karte__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-karte__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
  padding: 1.4rem 1.6rem 1.6rem;
}
/* Titel einzeilig (Wunsch Maxim): passt nachgemessen ab ~1100px. Darunter
   regulaer umbrechen lassen -- abschneiden waere schlimmer als eine
   zweite Zeile auf schmalen Zwischenbreiten. */
.job-karte h3 { font-size: var(--step-0); font-weight: 600; color: var(--fg-strong); letter-spacing: -0.021em; white-space: nowrap; }
@media (max-width: 1099px) {
  .job-karte h3 { white-space: normal; }
}
.job-karte__meta { display: grid; gap: 0.45rem; font-size: var(--step--1); color: var(--fg-muted); }
.job-karte__meta span { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.job-karte__meta .icon { width: 1em; height: 1em; color: var(--accent-text); }
.job-karte .link-arrow { margin-top: auto; }
@media (max-width: 900px) {
  .job-karten { grid-template-columns: minmax(0, 1fr); }
}

.side-nav { display: grid; }
.side-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.side-nav a:last-child { border-bottom: 0; }
.side-nav a:hover { color: var(--accent-text); padding-left: 0.35rem; }
.side-nav a[aria-current="page"] { color: var(--fg-strong); font-weight: 600; }
.side-nav .icon { width: 0.9rem; height: 0.9rem; opacity: 0.55; }

/* --- 13. Kontaktbereich & Formular -------------------------------------- */

/* Kontakt nach ki-kompass-Muster (27.08.2026): Informationen links,
   Formular rechts. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.kontakt-info .section-head { margin-bottom: 1.9rem; }
/* Zweizeilige Sektions-Intros bilden EINEN Gedanken: aufeinanderfolgende
   Absaetze ruecken auf Zeilenabstand zusammen (Befund Maxim: der volle
   Absatzabstand wirkte wie eine Leerzeile). Gilt einheitlich fuer alle
   Sektionskoepfe (Leistungen, Kontakt, ...). */
.section-head p:not(.kicker) + p { margin-top: 0.35rem; }
/* Bewusst gebrochene Intro-Zeilen: jede ist EIN Satz und soll auf Desktop
   genau eine Zeile bleiben. Dafuer faellt sowohl die 62ch-Absatzgrenze als
   auch der 46rem-Deckel des Kopfes; die Ueberschrift behaelt ihre Breite.
   Auf Schmal bricht der Satz natuerlich um. */
.section-head p.intro-zeile { max-width: none; }
.section-head:has(.intro-zeile) { max-width: none; }
.section-head:has(.intro-zeile) h2 { max-width: 46rem; }
.kontakt-wege { display: grid; gap: 1.05rem; }
.kontakt-wege li > a,
.kontakt-wege li > .kontakt-symbol + span { font-weight: 500; }
.kontakt-wege li,
.kontakt-wege li > a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--fg-strong);
  text-decoration: none;
}
.kontakt-wege li > a > span:not(.kontakt-symbol) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--fg-strong) 40%, transparent);
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.kontakt-wege li > a:hover > span:not(.kontakt-symbol) { color: var(--accent-text); text-decoration-color: currentColor; }
.kontakt-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  transition: border-color 0.2s var(--ease);
}
.kontakt-symbol .icon { width: 1.25rem; height: 1.25rem; }
.kontakt-wege li > a:hover .kontakt-symbol { border-color: var(--accent); }
/* Oeffnungszeiten: zweizeiliges Mini-Raster (Tage | Zeiten), vertikal
   mittig neben dem Symbol wie die Zeilen darueber (Wunsch Maxim). */
.kontakt-zeiten {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.15rem 1.4rem;
  justify-content: start;
  font-weight: 500;
}
.kontakt-hinweis {
  margin-top: 1.9rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.kontakt-hinweis h3 { font-size: var(--step-0); }
.kontakt-hinweis p { margin-top: 0.45rem; color: var(--fg-muted); font-size: var(--step--1); }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--fg-strong);
}
.field label .req { color: var(--accent-text); font-weight: 600; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--fg-strong);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-subtle); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fg-subtle); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
/* Select im Look der Eingabefelder, eigener Pfeil (Systempfeil variiert). */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.6rem;
  cursor: pointer;
}
.field select:invalid, .field select option[value=""] { color: var(--fg-subtle); }
.field__hint { font-size: 0.8rem; color: var(--fg-muted); }
.field__error {
  display: none;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-text);
}
.field__error .icon { width: 0.9rem; height: 0.9rem; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: var(--accent); }
.field[data-invalid="true"] .field__error { display: flex; }

/* Grid statt Flex, damit die Fehlermeldung unter dem Text landet und nicht daneben. */
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.7rem;
  align-items: start;
}
.consent input { grid-column: 1; width: 1.15rem; height: 1.15rem; margin-top: 0.22em; accent-color: var(--accent); }
.consent label { grid-column: 2; font-size: 0.85rem; font-weight: 400; color: var(--fg-muted); line-height: 1.55; }
.consent .field__error { grid-column: 2; }
.consent a { color: var(--accent-text); }

.form__status {
  display: none;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border-radius: var(--r-sm);
  font-size: var(--step--1);
}
.form__status[data-state="ok"] {
  display: flex;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--fg-strong);
}
.form__status[data-state="error"] {
  display: flex;
  background: var(--bg-sub);
  border: 1px solid var(--line-strong);
  color: var(--fg-strong);
}
.form__status .icon { color: var(--accent-text); margin-top: 0.15em; }

.btn[data-busy="true"] { pointer-events: none; opacity: 0.72; }
.btn[data-busy="true"] .icon { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 14. Stellenanzeigen ------------------------------------------------ */

.jobs { display: grid; gap: 1rem; }
.job {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.job:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.job__trigger {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.1rem 1.35rem;
  text-align: left;
}
.job__thumb { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.job__thumb img { width: 100%; height: 100%; object-fit: cover; }
.job__title { font-size: var(--step-1); font-weight: 600; color: var(--fg-strong); }
.job__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.35rem; }
.job__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--step--1);
  color: var(--fg-muted);
}
.job__meta .icon { width: 0.95rem; height: 0.95rem; color: var(--fg-subtle); }
.job__trigger > .icon { width: 1.2rem; height: 1.2rem; color: var(--accent-text); transition: transform var(--dur) var(--ease); }
/* Plus-Mechanik wie die FAQs: X-Icon 45 Grad gedreht = Plus, offen = Kreuz. */
.job__trigger > .job__plus { transform: rotate(45deg); }
.job__trigger[aria-expanded="true"] > .job__plus { transform: rotate(0deg); }
.job__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.job__trigger[aria-expanded="true"] + .job__panel { grid-template-rows: 1fr; }
.job__panel > div { overflow: hidden; }
.job__panel .job__inner { padding: 0 1.35rem 1.6rem; border-top: 1px solid var(--line); margin-top: 0; padding-top: 1.4rem; }

.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem 1.5rem; }
/* balance statt pretty: die Eintraege sind kurz, sonst steht das letzte
   Wort allein („… tarifgerechte / Bezahlung"). */
.benefits li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--step--1); color: var(--fg-muted); }
.benefits li span { text-wrap: balance; }
.benefits .icon { color: var(--accent-text); width: 1.1rem; height: 1.1rem; margin-top: 0.22em; }

/* --- 15. Abschluss-CTA & Footer ----------------------------------------- */

/* Abschluss-Sektion der Unterseiten: vollflächig dunkel wie das Kennzahlen-
   Band, mit demselben roten Lichtakzent. Ersetzt den früheren roten Kasten
   in weißer Sektion (Umbau 27.08.2026) und führt den Flächen-Rhythmus in den
   dunklen Footer über. Die Trennlinie unten hält beide auseinander. */
.closing {
  position: relative;
  background: var(--bg-inverse);
  color: #e9edf1;
  overflow: hidden;
  padding-block: clamp(3.25rem, 2.2rem + 4vw, 5.5rem);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46rem 26rem at 82% 100%, rgb(168 48 48 / 0.3), transparent 62%);
  pointer-events: none;
}
.closing > .wrap { position: relative; z-index: 1; }
.closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
.closing h2 { color: #ffffff; font-size: var(--step-3); max-width: 24ch; }
.closing p { margin-top: 0.8rem; color: rgb(233 237 241 / 0.72); max-width: 52ch; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Der Primärbutton steht hier immer auf dunklem Grund: fester aufgehellter
   Markenton statt --accent, damit der Kontrast in beiden Farbmodi gleich
   bleibt (Weiß auf #bd3b3b ≈ 4,9:1). */
.closing .btn--primary { background: var(--brand-600); }
.closing .btn--primary:hover { background: var(--brand-500); }

.footer {
  background: var(--bg-inverse);
  color: rgb(233 237 241 / 0.72);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-size: var(--step--1);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.95fr)) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
/* Gleiche Groesse wie das Header-Logo (72px), weisse Fassung. */
.footer img.footer__logo { height: 72px; width: auto; }
.footer__about { margin-top: 1.25rem; max-width: 34ch; line-height: 1.6; }
.footer h3 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* Einheitlich rot zum Trennstrich darunter (Wunsch Maxim). */
  color: #e8797b;
  font-weight: 500;
  margin-bottom: 1rem;
}
/* Roter Trennstrich unter jedem Spaltentitel (ki-kompass-Muster); auf dem
   dunklen Grund die aufgehellte Akzent-Fassung wie beim Band-Kicker. */
.footer h3::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.55rem;
  background: #e8797b;
}
.footer ul { display: grid; gap: 0.6rem; }
.footer a { text-decoration: none; transition: color 0.2s var(--ease); }
.footer a:hover { color: #ffffff; }
/* Icons vertikal mittig zu ihren (teils zweizeiligen) Eintraegen
   (Wunsch Maxim, 27.08.2026 abends). */
.footer__contact li { display: flex; gap: 0.6rem; align-items: center; }
.footer__contact .icon { width: 1.05rem; height: 1.05rem; color: #ec8080; flex: none; }
.footer__contact a, .footer__contact address { font-style: normal; overflow-wrap: anywhere; }
/* Adresse zweizeilig halten: "73525 Schwaebisch Gmuend" bricht nicht
   (Wunsch Maxim); die Spalte ist dafuer im Grid etwas breiter. */
.footer__contact address { white-space: nowrap; }

/* Der KI-Kompass-Credit ist als Link erkennbar (Wunsch Maxim):
   dezente Unterstreichung, beim Zeigen in voller Staerke. */
.footer__bottom a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(255 255 255 / 0.35);
}
.footer__bottom a:hover { text-decoration-color: currentColor; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.82rem;
  color: rgb(233 237 241 / 0.55);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; }
/* Schalter für Bewegung. Sitzt bei den rechtlichen Verweisen, weil er eine
   Einstellung ist und keine Handlungsaufforderung. */


/* --- 16. Bewegung (gedämpft, motiviert) --------------------------------- */
/* Zweck: Abschnitte melden beim Eintreten Hierarchie an, statt alles gleichzeitig zu zeigen. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Bilder ziehen zusätzlich den Ausschnitt auf, statt nur einzublenden.
   Zweck: das Motiv baut sich auf, statt schlagartig dazustehen. */
.js [data-reveal="media"] img {
  clip-path: inset(0 0 14% 0);
  transform: scale(1.05);
  transition: clip-path 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="media"].is-visible img {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Einlauf des Prozess-Zeitstrahls: die vier Schritte erscheinen nacheinander
   (Versatz 350 ms ueber --reveal-delay im Markup), der Kreis waechst mit
   leichtem Ueberschwingen. Nur bis zum Ende des Einlaufs -- site.js setzt
   danach "eingelaufen", damit Hover (220 ms) und Lauf (700 ms) ihre eigenen
   Uebergaenge behalten. Ohne JavaScript steht alles sofort vollstaendig da. */
.js .zeitstrahl:not(.eingelaufen) li[data-reveal] .ts-nr {
  transform: scale(0.6);
  transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.5, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .zeitstrahl:not(.eingelaufen) li[data-reveal].is-visible .ts-nr { transform: scale(1); }
.js .zeitstrahl.eingelaufen li[data-reveal] { transition-delay: 0ms; }

/* Auftritt der Startseite: Reihenfolge macht die Hierarchie sichtbar,
   Kennzeile vor Überschrift vor Text vor Handlungsaufforderung.
   Rein in CSS, damit sie auch ohne JavaScript läuft. */
.hero__eyebrow  { animation: cis-rise 0.65s var(--ease) 0.04s both; }
.hero h1        { animation: cis-rise 0.65s var(--ease) 0.11s both; }
.hero__lead     { animation: cis-rise 0.65s var(--ease) 0.19s both; }
.hero__aktion   { animation: cis-rise 0.65s var(--ease) 0.27s both; }
/* Das Hero-Video bewusst ohne Deckkraft-Animation: sein Poster ist das
   LCP-Element, und ein Start bei opacity 0 würde die gemessene
   Ladezeit künstlich verschlechtern. Nur eine ruhige Skalierung. */
.hero__media video { animation: cis-settle 0.9s var(--ease) both; }


@keyframes cis-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cis-settle {
  from { transform: scale(1.03); }
  to   { transform: none; }
}

@keyframes cis-glanz {
  0%   { transform: skewX(-18deg) translateX(0); }
  16%  { transform: skewX(-18deg) translateX(430%); }
  100% { transform: skewX(-18deg) translateX(430%); }
}

/* --- 17. Responsiv ------------------------------------------------------ */

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__content { padding-bottom: 2.25rem; }
  .hero__media { height: clamp(15rem, 55vw, 24rem); margin-top: 0; }
  .hero__lead { max-width: 52ch; }
  .band__grid { grid-template-columns: minmax(0, 1fr); }
  .layout-aside { grid-template-columns: minmax(0, 1fr); }
  .sticky-card { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
}

/* Footer frueher auf zwei Spalten: mit fuenf Spalten plus einzeiliger
   Adresse wird es zwischen 900 und 1000px zu eng (nachgemessen 901px). */
@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nav-Kollaps wieder deckungsgleich mit den Inhalts-Umbruechen: seit der
   Telefon-Chip aus dem Kopf entfernt ist (27.08.2026), passt die volle
   17px-Nav bis ~910px (nachgemessen; mit Chip lief sie ab ~990px ueber). */
@media (max-width: 900px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: inline-flex; }
  /* Die Nav (Spalte 2) ist hier ausgeblendet -- ohne explizite Spalte
     rutschte der Burger per Auto-Platzierung in die Mitte des Grids. */
  .header__actions { grid-column: 3; }
  .action-bar { display: flex; }
  body { padding-bottom: 4.6rem; }
}

@media (max-width: 900px) {
  :root { --kopf-hoehe: 88px; }
  .brand__mark { height: 56px; }
  /* Ab hier zeigt die feste Aktionsleiste unten dieselben zwei Aktionen
     dauerhaft an. Die Buttons im Seitenkopf sind damit doppelt und kosten
     rund 130 px, die den Kopf je nach Seite unterschiedlich hoch machen. */
  .pagehead__cta { display: none; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .split, .split--reverse { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }
  .closing__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .contact-strip__grid { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0.9rem; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .stats > div { display: flex; align-items: baseline; gap: 1rem; }
  .stats dt { font-size: 2.6rem; min-width: 3.4ch; }
  .stats dd { margin-top: 0; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .job__trigger { grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.9rem; padding: 1rem; }
  .job__panel .job__inner { padding-inline: 1rem; }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__aktion { grid-template-columns: minmax(0, 1fr); }
  .hero__aktion .btn { width: 100%; }
  .hero__aktion .hero__signal:nth-of-type(2) { margin-top: 0; }
  .pagehead__cta .btn { width: 100%; }
  .services { grid-template-columns: minmax(0, 1fr); }
}