/* ============================================================
   case4de — Designsystem
   Dunkles, technisches Erscheinungsbild: Präzision als Ästhetik.
   ============================================================ */

/* ---------- Schriften (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-300-700-latin-0.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-100-900-latin-0.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400-latin-0.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500-latin-1.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  --bg:        #0a0e17;
  --bg-elev:   #0d1220;
  --surface:   #111828;
  --line:      rgba(151, 168, 205, 0.14);
  --line-soft: rgba(151, 168, 205, 0.08);
  --text:      #e9edf6;
  --text-2:    #9aa5bd;
  /* war #5d6880 und kam damit auf 3,45:1 — zu wenig fuer die Kleinlabels
     ueber Kontaktdaten, Formularfeldern und im Fussbereich (WCAG 1.4.3). */
  --text-3:    #76829b;
  --accent:    #4d7dff;
  --accent-2:  #8fb2ff;
  --accent-dim: rgba(77, 125, 255, 0.12);
  /* Fuer Flaechen, auf denen Text steht: weiss auf --accent ergibt nur
     3,69:1. Dieser Ton traegt 4,78:1 und bleibt derselbe Blauwert. */
  --accent-flaeche:       #3a68ee;
  --accent-flaeche-hover: #2f5ee0;
  /* Rahmen von Bedienelementen brauchen 3:1 zum Untergrund (WCAG 1.4.11).
     --line ist dafuer als reine Trennlinie zu zart. */
  --line-feld: #5a6784;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", Consolas, monospace;

  --w-max: 1200px;
  --pad-x: clamp(20px, 4vw, 48px);
  /* War clamp(96px, 12vw, 176px). Bei 1440 px standen damit 352 px Luft
     zwischen zwei Abschnitten, und die Unterseiten tragen dort oft nur
     drei Absaetze — grosszuegig wirkte das nicht mehr, sondern hohl.
     132 px oben und unten lassen die Abschnitte weiterhin atmen und
     halten die Seite zusammen. */
  --sec-y: clamp(80px, 9vw, 132px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Takt: vier Dauern statt der acht, die hier gewachsen waren
     (0,2s / 0,25s / 0,3s / 0,35s / 0,4s / 0,45s / 0,5s / 0,8s / 0,9s).
     Wer eine neue Bewegung anlegt, greift zu einer davon — dann bewegt
     sich die ganze Seite im selben Mass. */
  --takt-1: 0.16s;   /* Druckpunkt: :active, Farbwechsel unter dem Finger */
  --takt-2: 0.28s;   /* Zustand: Hover an Verweisen und Schaltflaechen */
  --takt-3: 0.5s;    /* Flaeche: Klappmenues, Navigationsgrund, Bildzoom */
  --takt-4: 0.8s;    /* Auftritt: Einblenden beim Scrollen */

  /* Erhebung. Auf dunklem Grund traegt ein Schatten kaum — dort setzt
     eine helle Innenkante die Kachel ab. Im hellen Bereich uebernimmt
     der Schatten; die Werte stehen deshalb in .hell noch einmal. */
  --schatten-1: 0 1px 2px rgba(3, 7, 18, 0.30);
  --schatten-2: 0 6px 18px rgba(3, 7, 18, 0.38);
  --schatten-3: 0 18px 44px rgba(3, 7, 18, 0.46);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Farbe fuers Ueberscrollen — oben grenzt der helle Hero an, unten der
     helle Footer, deshalb hier nicht der dunkle Grundton. */
  background: #ffffff;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

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

.wrap {
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* nur für Screenreader und Suchmaschinen sichtbar */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typografie-Bausteine ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.h-section {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(23px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); }

.muted { color: var(--text-2); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 14, 23, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
/* ---------- Wortmarke ---------- */
.brand {
  display: flex;
  align-items: center;
  perspective: 600px;   /* für die 3D-Neigung beim Überfahren */
}
.brand-logo {
  position: relative;
  display: block;
  height: 38px;
  aspect-ratio: 652 / 226;   /* Seitenverhältnis der Logodatei */
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.brand-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s var(--ease);
}
/* Standard ist die helle Fassung — die Navigation ist meistens dunkel */
.brand-img-hell { opacity: 1; }
.brand-img-farbe { opacity: 0; }
/* Nur solange die Navigation über dem hellen Hero-Band steht: Originalfarben */
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .brand-img-hell { opacity: 0; }
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .brand-img-farbe { opacity: 1; }

/* Lichtreflex, der beim Überfahren einmal über die Buchstaben wandert.
   Die Maske hat die Form des Logos, deshalb bleibt der Reflex exakt
   auf der Schrift und läuft nicht als Balken darüber. */
.brand-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url("../assets/logo.png") center / contain no-repeat;
  mask: url("../assets/logo.png") center / contain no-repeat;
}
.brand-shine::before {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  width: 45%;
  /* Auf dunklem Grund ist das Logo fast weiss — ein weisser Reflex wäre
     dort unsichtbar. Deshalb hier ein blauer Lichtstrahl. */
  background: linear-gradient(105deg,
    rgba(93, 175, 255, 0) 0%,
    rgba(93, 175, 255, 0.95) 50%,
    rgba(93, 175, 255, 0) 100%);
  transform: translateX(-220%);
}
/* Über dem hellen Hero-Band steht das Logo in Originalfarben — dort wirkt
   der klassische weisse Reflex. */
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .brand-shine::before {
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0) 100%);
}
.brand:hover .brand-shine::before,
.brand:focus-visible .brand-shine::before {
  animation: brand-shine 0.95s cubic-bezier(0.3, 0.7, 0.4, 1);
}
@keyframes brand-shine {
  from { transform: translateX(-220%); }
  to   { transform: translateX(330%); }
}

.brand-footer .brand-logo { height: 32px; }

@media (prefers-reduced-motion: reduce) {
  .brand-shine { display: none; }
  .brand-logo { transition: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a:not(.btn) {
  font-size: 14.5px;
  font-weight: 450;
  color: var(--text-2);
  transition: color 0.25s;
  position: relative;
}
.nav-links a:not(.btn):hover { color: var(--text); }

.nav-links .lang {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  transition: color 0.25s, border-color 0.25s;
}
.nav-links .lang:hover { color: var(--text); border-color: var(--accent-2); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: border-color var(--takt-2), background var(--takt-2),
              color var(--takt-2), transform var(--takt-2) var(--ease),
              box-shadow var(--takt-2) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
/* Druckpunkt. Auf dem Telefon gibt es keinen Schwebezustand — ohne
   Rueckmeldung beim Antippen wirkt eine Schaltflaeche tot, bis die
   naechste Seite da ist. Der Weg ist klein und die Dauer kurz, damit es
   sich nach Mechanik anfuehlt und nicht nach Animation. */
.btn:active { transform: translateY(1px); transition-duration: var(--takt-1); }
.btn:active .arr { transform: translateX(2px); }
.btn-primary {
  background: var(--accent-flaeche);
  border-color: var(--accent-flaeche);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-flaeche-hover);
  border-color: var(--accent-flaeche-hover);
}
.btn-ghost:hover { border-color: var(--accent-2); color: var(--accent-2); }
.btn .arr { transition: transform 0.3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* Mobiles Menü */
/* Zwischenstufe: bevor die Leiste aufs Menue umklappt, wird sie enger.
   Zwischen ~1061 und ~1240 px reicht die Breite fuer die Verweise, aber
   nicht mehr fuer die urspruenglichen Abstaende. */
@media (max-width: 1240px) and (min-width: 1061px) {
  .nav-links { gap: 20px; }
  .nav-links a:not(.btn) { font-size: 14px; }
  .nav-links .btn { padding-inline: 16px; }
}

.nav-toggle { display: none; width: 40px; height: 40px; position: relative; z-index: 110; }
.nav-toggle span {
  position: absolute;
  left: 9px; right: 9px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.25s, top 0.35s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 24px; }

@media (max-width: 1060px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 23, 0.97);
    backdrop-filter: blur(18px);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    opacity: 0;
    pointer-events: none;
    /* Ohne `visibility` bleiben die Verweise im Tastaturpfad, obwohl das
       Menue unsichtbar ist — der Fokus verschwindet dann ins Nichts. */
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  .nav-links a:not(.btn) { font-size: 24px; font-family: var(--font-display); color: var(--text); }
  body.menu-open .nav-links {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.35s var(--ease), visibility 0s;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav-toggle span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }
  /* Ein `backdrop-filter` macht sein Element zum Bezugsrahmen fuer
     `position: fixed` in allen Nachfahren. Ungescrollt faellt das nicht
     auf; sobald `.is-scrolled` greift, mass sich das bildschirmfuellende
     Menue nicht mehr am Fenster, sondern an der 76 px hohen Leiste — von
     832 px Inhalt blieben 144 px sichtbar, der Rest lag im Ueberlauf.
     Solange das Menue offen ist, entfaellt die Weichzeichnung deshalb.
     Die Flaeche des Menues deckt die Leiste ohnehin ab, es geht nichts
     verloren. Die Hintergrundfarbe bleibt: sie erzeugt keinen
     Bezugsrahmen und haelt die Leiste waehrend des Einblendens dunkel. */
  body.menu-open .nav.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero::after {
  /* sanfter Verlauf, damit der Text immer lesbar bleibt */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 18% 38%, rgba(10, 14, 23, 0.88), rgba(10, 14, 23, 0.3) 60%, transparent),
    linear-gradient(to bottom, rgba(10,14,23,0.5), transparent 30%, transparent 70%, var(--bg));
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 76px;
}
.hero h1 { margin: 26px 0 28px; }
.br-lg { display: none; }
@media (min-width: 861px) { .br-lg { display: inline; } }
.hero .lead { max-width: 58ch; }
.hero-cta { display: flex; gap: 16px; margin-top: 44px; flex-wrap: wrap; }

.hero-meta {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(48px, 8vh, 96px);
}
.hero-meta-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hero-meta-item {
  padding: 22px 24px 26px 0;
  border-right: 1px solid var(--line-soft);
}
.hero-meta-item:last-child { border-right: none; }
.hero-meta-item + .hero-meta-item { padding-left: 24px; }
.hero-meta-item .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.hero-meta-item .v {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--text-2);
}
@media (max-width: 860px) {
  .hero-meta-inner { grid-template-columns: 1fr 1fr; }
  .hero-meta-item { border-right: none; border-bottom: 1px solid var(--line-soft); padding-left: 0 !important; }
  .hero-meta-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ---------- Hero mit 3D-Video ----------
   Das Video trägt Logo und Claim bereits in sich. Deshalb liegen
   hier nur die beiden Schaltflächen darüber. Damit der eingebrannte
   Text nie beschnitten wird, richtet sich die Höhe des Hero nach dem
   16:9-Format des Videos. */
.hero-video {
  min-height: 0;
  display: block;
  background: var(--bg);   /* nur sichtbar, bevor das Poster geladen ist */
}
.hero-video::after { content: none; }

.hero-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Weicher Übergang in den hellen Bereich darunter — sonst stösst das
   dunkle Wasser hart auf die helle Fläche. */
.hero-video-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(50px, 9vh, 130px);
  background: linear-gradient(180deg,
    rgba(238, 242, 248, 0) 0%,
    rgba(238, 242, 248, 0.55) 62%,
    #eef2f8 100%);
  pointer-events: none;
  z-index: 2;
}


/* ---------- Inhalt über dem Video ----------
   Logo, Claim und Schaltflächen sind echtes HTML und deshalb exakt
   mittig. Der Block sitzt etwas oberhalb der Mitte, damit er im freien
   Himmel steht und nicht auf dem Schiff. */
.hero-inhalt {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Oben Platz für die Navigation. Die Polsterung unten schiebt den
     zentrierten Block nach oben, damit der Claim im freien Himmel steht
     und nicht auf dem Schiff landet — dort wäre er unlesbar. */
  padding: 76px var(--pad-x) 11%;
  gap: clamp(18px, 2.4vw, 40px);
}
.hero-logo {
  margin: 0;
  line-height: 0;
  /* Fluchtpunkt für die räumliche Bewegung des Logos */
  perspective: 1200px;
  transform-style: preserve-3d;
}
.hero-logo img {
  width: clamp(260px, 46vw, 880px);
  height: auto;
  /* Der Schatten steckt bewusst nicht im Bild, sondern hier. In der
     Vorlage war er auf Weiss gerendert und damit hell — im Video ist er
     dunkel. Zwei Ebenen: eine enge, die die Buchstaben vom Hintergrund
     abhebt, und eine weiche, die das Logo auf der Szene aufsetzen lässt. */
  filter: drop-shadow(0 3px 5px rgba(9, 24, 58, 0.42))
          drop-shadow(0 16px 34px rgba(9, 24, 58, 0.34));
  transform-origin: 50% 60%;
  will-change: transform;
}
.hero-aktionen {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(6px, 1vw, 16px);
}
.hero-aktionen .btn { box-shadow: 0 6px 22px rgba(8, 22, 55, 0.22); }
.hero-aktionen .btn-primary { background: #1a5fd0; border-color: #1a5fd0; }
.hero-aktionen .btn-primary:hover { background: #2f6be0; border-color: #2f6be0; }
.hero-aktionen .btn-ghost-dark { background: #fff; border-color: #fff; color: #14294f; }
.hero-aktionen .btn-ghost-dark:hover { color: #1a5fd0; }

/* Nur für automatisierte Vorschaubilder: dort ist das Fenster absichtlich
   sehr hoch, wodurch eine fensterhohe Bühne die ganze Aufnahme füllen
   würde. Hat auf Besucher keinen Einfluss. */
.shot .hero-video-stage { height: auto !important; aspect-ratio: 16 / 9 !important; }

@media (min-width: 701px) {
  /* Am Desktop ist das Fenster flacher als 16:9. Bei fester 16:9-Höhe
     ragt der untere Videorand unter die Falz — man muss scrollen, und
     das mittig sitzende Logo wirkt dadurch zu tief. Deshalb ist der Hero
     hier genau fensterhoch. Der Zuschnitt nimmt nur unten Wasser weg,
     weil das Bild oben verankert ist. */
  .hero-video-stage {
    aspect-ratio: auto;
    height: 100svh;
  }
  .hero-video-el { object-position: center top; }

  /* Inhalt oben verankern statt zentrieren: so steht das Logo im freien
     Himmel und die Schaltflächen bleiben über dem Schiff. */
  .hero-inhalt {
    justify-content: flex-start;
    padding-top: clamp(104px, 13svh, 168px);
    padding-bottom: 0;
  }
}

@media (max-width: 700px) {
  /* Hochkant: quadratischer Ausschnitt, damit der Inhalt Platz hat */
  /* Hochkant hochformatiger Ausschnitt: Logo, Claim und zwei
     untereinander stehende Schaltflächen brauchen die Höhe. */
  .hero-video-stage { aspect-ratio: 3 / 4; }
  .hero-inhalt { padding: 66px var(--pad-x) 6%; }
  .hero-logo img { width: min(72vw, 380px); }
  .hero-aktionen { flex-direction: column; align-items: stretch; width: min(86vw, 340px); }
  .hero-aktionen .btn { justify-content: center; }
}

.hero-video { position: relative; }



.btn-ghost-dark {
  border-color: rgba(20, 46, 92, 0.35);
  color: #142e5c;
}
.btn-ghost-dark:hover { border-color: #2f6be0; color: #2f6be0; }

/* Navigation über dem hellen Hero: dunkle Schrift, solange nicht gescrollt */
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .brand { color: #142e5c; }
/* Der Himmel im Video reicht bis #c3d0e2 — gegen diesen hellsten Punkt
   kam das fruehere #3b5a8c nur auf 4,44:1. */
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-links a:not(.btn) { color: #33507f; }
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-links a:not(.btn):hover { color: #142e5c; }
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-links .lang { color: #33507f; border-color: rgba(20, 46, 92, 0.4); }
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-toggle span { background: #142e5c; }

/* Ausnahme fuer das Klappmenue: Die Regeln darueber faerben die
   Menuepunkte dunkel, solange die Navigation ueber dem hellen Hero steht
   — das ist dort richtig. Die Eintraege der aufgeklappten Liste liegen
   aber auf der dunklen Flaeche des Menues. Ohne diese Ausnahme standen
   sie in #33507f auf #0a0e17: 2,31:1, weit unter den geforderten 4,5:1.
   Erst nach dem Scrollen sah es richtig aus — genau der Fehler, den man
   beim Bauen nicht bemerkt, weil man vorher scrollt.

   Die Selektoren sind absichtlich so lang: die Regel darueber traegt
   `:not(.btn)` und damit ein Klassengewicht mehr. Eine kuerzere Ausnahme
   verliert gegen sie und bleibt wirkungslos — genau das ist beim ersten
   Versuch passiert. */
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-links .nav-unter a:not(.btn) { color: var(--text-2); }
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-links .nav-unter a:not(.btn):hover { color: var(--text); }
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-links .nav-unter li:first-child a:not(.btn) { color: var(--text-3); }
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-links .nav-unter a:not(.btn)[aria-current="page"] { color: var(--accent-2); }
@media (max-width: 1060px) {
  /* im offenen Mobilmenü gilt wieder die dunkle Overlay-Optik */
  :is(body.light-hero.menu-open, html.szene-hell body.menu-open) .nav .nav-links a:not(.btn) { color: var(--text); }
  /* Steht `light-hero` nicht am Rumpf, sondern an einem Wurzel-Element
     darin, greift die Zeile darueber nicht — das offene Menue behielte
     dann die dunkelblaue Schrift des hellen Grundes auf schwarzem Grund. */
  body.menu-open .light-hero .nav .nav-links a:not(.btn) { color: var(--text); }
  :is(body.light-hero.menu-open, html.szene-hell body.menu-open) .nav .nav-toggle span { background: var(--text); }
  body.menu-open .light-hero .nav .nav-toggle span { background: var(--text); }
}

/* Faktenleiste direkt unter dem Video-Hero — nur dort schliesst sie
   bündig an; auf Seiten mit dunklem Hero gilt weiter der Abstand oben */
:is(.light-hero, html.szene-hell) .hero-meta {
  background: var(--bg);
  border-top: none;
  margin-top: 0;
  border-bottom: 1px solid var(--line-soft);
}

/* ---------- Sektionen ---------- */
.section { padding-block: var(--sec-y); position: relative; }
.section + .section { border-top: 1px solid var(--line-soft); }

/* ---------- Heller Bereich ab Leistungen ----------
   Farben aus dem Hero-Video gemessen: der Himmel läuft dort von einem
   mittleren Blaugrau (#90A3C6) oben zu fast Weiss am Horizont (#E8EAF4).
   Dieselbe Richtung nimmt der Verlauf hier auf. Weil das gesamte
   Designsystem über Token läuft, genügt es, sie hier neu zu setzen —
   Text, Linien, Formularfelder und Schaltflächen ziehen mit. */
/* `html.szene-hell` steht mit in dieser Liste, damit die Tokenliste an
   genau EINER Stelle bleibt. Frueher hing js/szene-rahmen.js dem Kopfband
   die Klasse `hell` an, sobald das erste Bild stand — das war der Moment,
   in dem die Seite sichtbar umkippte. Jetzt steht die Klasse an <html>,
   bevor der Browser den Rumpf gelesen hat. */
.hell,
html.szene-hell .kopfband,
.kopfband-hell {
  --bg:        #f2f5fa;
  --bg-elev:   #f8fafc;
  --surface:   #ffffff;
  --line:      rgba(16, 36, 71, 0.15);
  --line-soft: rgba(16, 36, 71, 0.08);
  --text:      #101a2e;
  --text-2:    #46536e;
  --text-3:    #5f6b85;
  --accent:    #1d55b8;
  --accent-2:  #1c50ad;
  --accent-dim: rgba(29, 85, 184, 0.10);
  --accent-flaeche:       #1d55b8;
  --accent-flaeche-hover: #17439a;
  --line-feld: #76839f;

  /* Im hellen Bereich traegt der Schatten die Erhebung. Der Ton ist nicht
     neutralgrau, sondern der Blauton des Designsystems (#101a2e) in
     geringer Deckkraft — grauer Schatten unter blaustichigem Weiss wirkt
     schmutzig. */
  --schatten-1: 0 1px 2px rgba(16, 26, 46, 0.06);
  --schatten-2: 0 8px 24px -6px rgba(16, 26, 46, 0.12), 0 2px 6px rgba(16, 26, 46, 0.05);
  --schatten-3: 0 22px 48px -12px rgba(16, 26, 46, 0.18), 0 4px 12px rgba(16, 26, 46, 0.07);

  /* Deutlich blauer als zuvor: der obere Hero-Rand misst #8BA3C1, das
     frühere Weissgrau wirkte daneben ausgewaschen. Der Verlauf hellt nur
     leicht auf, damit der Blauton über die ganze Seite trägt. */
  background: linear-gradient(180deg, #eef2f8 0%, #f7f9fc 45%, #ffffff 100%);
  color: var(--text);
}
/* Der erste Abschnitt im hellen Bereich braucht keine Trennlinie zum
   dunklen Teil darüber — die Farbkante trennt schon deutlich genug. */
.hell > .section:first-child { border-top: none; }
/* Die Faktenleiste malt sonst ihren eigenen flachen Ton über den Verlauf */
.hell .hero-meta { background: transparent; }
.hell > *:first-child { border-top: none; }

/* Auf hellem Grund ist die dunkle Fassung des Logos die richtige */
.hell .brand-img-hell { opacity: 0; }
.hell .brand-img-farbe { opacity: 1; }

/* ---------- Aussage-Abschnitt ---------- */
.h-statement {
  font-family: var(--font-display);
  font-weight: 600;
  /* Untergrenze bewusst niedrig: bei 320 px passt "Branchen." damit ohne
     Trennstrich in eine Zeile. */
  font-size: clamp(31px, 6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
}
.statement .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: end;
}
.statement-body p {
  color: var(--text-2);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
  max-width: 46ch;
}
.statement-body p + p { margin-top: 1.3em; }
.statement-body em { font-style: normal; color: var(--text); }
@media (max-width: 900px) {
  .statement .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------- Verweis im Versalstil ---------- */
.link-cta {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 8px;
  position: relative;
}
.link-cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--line);
}
.link-cta::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.45s var(--ease);
  z-index: 1;
}
.link-cta:hover::before, .link-cta:focus-visible::before { width: 100%; }
.link-cta:hover { color: var(--accent-2); }

/* ---------- Branchen als ganzflächige Tafeln ---------- */
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--line-soft);
  /* Alle Tafeln gleich hoch — sonst bestimmt jedes Bild mit seinen
     Eigenmassen die Zeilenhöhe und die Abschnitte wirken ungleich. */
  min-height: clamp(320px, 54vh, 620px);
}
.panel-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  perspective: 1000px;   /* für die Neigung zum Mauszeiger */
}
.panel-media img {
  /* absolut, damit die Bildgrösse die Tafelhöhe nicht beeinflusst */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Ausgangswert; die Bewegung setzt js/main.js Bild für Bild.
     Bewusst ohne CSS-Übergang — der würde mit dem Scrollen kollidieren. */
  transform: scale(1.12);
  will-change: transform;
}

/* Akzentlinie läuft beim Überfahren über die Tafelkante */
.panel { position: relative; }
.panel::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  height: 1px; width: 0;
  background: var(--accent);
  transition: width 0.8s var(--ease);
  pointer-events: none;
}
.panel:hover::after { width: 100%; }
.panel-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 92px);
}
.panel-text h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.panel-text p {
  margin-top: 20px;
  color: var(--text-2);
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.65;
  max-width: 44ch;
}
/* jede zweite Tafel spiegeln — Bild rechts */
.panel-flip .panel-media { grid-column: 2; grid-row: 1; }
.panel-flip .panel-text  { grid-column: 1; grid-row: 1; }

@media (max-width: 860px) {
  /* minmax(0, 1fr) statt 1fr: sonst waechst die Spalte auf die
     Mindestbreite ihres Inhalts, und eine Ueberschrift wie
     "SCHIENENVERKEHR" schiebt bei 320 px die ganze Seite auf. */
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel-flip .panel-media,
  .panel-flip .panel-text { grid-column: 1; }
  .panel-flip .panel-media { grid-row: 1; }
  .panel-flip .panel-text  { grid-row: 2; }
  .panel { min-height: 0; }
  .panel-media { height: clamp(230px, 46vw, 340px); }
}

/* Tafel fährt beim Erscheinen auf — Bild wischt von unten frei */
.reveal-panel .panel-media { clip-path: inset(18% 0 0 0); transition: clip-path 1.1s var(--ease); }
.reveal-panel .panel-text > * { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-panel .panel-text > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-panel .panel-text > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-panel.is-in .panel-media { clip-path: inset(0 0 0 0); }
.reveal-panel.is-in .panel-text > * { opacity: 1; transform: none; }

/* ---------- Leistungen als redaktionelle Liste ---------- */
.leistungen { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.leistung {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 56px);
  align-items: baseline;
  padding: clamp(26px, 2.6vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.5s var(--ease);
}
.leistung::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.6s var(--ease);
}
.leistung:hover::before { width: 100%; }
.leistung:hover { padding-left: 18px; }
.leistung h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(20px, 1.9vw, 28px);
  letter-spacing: -0.005em;
  color: var(--text);
}
.leistung p { color: var(--text-2); font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) {
  .leistung { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ---------- Mission ---------- */
.mission { text-align: center; }
/* "Engineering FlexAbility" ist der Anspruch der Firma, und das grosse A
   in der Mitte ist der ganze Witz daran: Flexibilität und Fähigkeit in
   einem Wort. text-transform: uppercase machte daraus
   "ENGINEERING FLEXABILITY" — das Wortspiel war weg und uebrig blieb ein
   Tippfehler. Der Anspruch steht deshalb als einzige grosse Zeile der
   Seite in gemischter Schreibung. */
.mission .claim {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--text);
}
.mission-lead {
  margin: 28px auto 0;
  max-width: 60ch;
  color: var(--text-2);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
}
.fakten {
  margin-top: clamp(52px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  text-align: left;
}
.faktum { border-top: 1px solid var(--line); padding-top: 24px; }
.faktum .zahl {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}
.faktum .txt {
  display: block;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 30ch;
}
@media (max-width: 860px) { .fakten { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kontakt ---------- */
.kontakt-abstand { height: clamp(40px, 5vw, 72px); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.contact-item { border-top: 1px solid var(--line); padding: 22px 0; }
.contact-item .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.contact-item .v {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 500;
}
.contact-item a.v { transition: color 0.25s; }
.contact-item a.v:hover { color: var(--accent-2); }

.form { display: flex; flex-direction: column; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 620px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-feld);
  color: var(--text);
  font: inherit;
  font-size: 16.5px;
  padding: 10px 2px 14px;
  outline: none;
  transition: border-color 0.3s;
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.form-note { font-size: 13px; color: var(--text-3); }
.form .btn { align-self: flex-start; }

/* ---------- Footer ---------- */
/* Setzt den Verlauf des hellen Bereichs nicht neu an, sondern führt
   dessen Endton flach weiter. */
.footer.hell { background: #ffffff; }
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 6.5vw, 88px) 0 40px;
}

/* Der Fussbereich war bis Fassung 49 eine einzelne Zeile. Wer unten auf
   einer Unterseite ankam, fand dort keinen Weg weiter — jeder Schritt
   ging ueber die Kopfnavigation. Vier Spalten: Marke, drei Verweislisten,
   Anschrift. Die Breiten sind nach Inhalt bemessen, nicht gleichmaessig:
   "Arbeitnehmerueberlassung" braucht Platz, "Unternehmen" nicht. */
.footer-oben {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.5fr) minmax(0, 0.95fr);
  gap: clamp(30px, 3.4vw, 58px);
  align-items: start;
}
.footer-raster {
  display: grid;
  /* Keine gleichen Drittel: "Ingenieurdienstleistungen" und
     "Arbeitnehmerueberlassung" sind 24 Zeichen lang und laufen sonst in
     die Nachbarspalte. minmax(0, …) haelt das Raster zusammen, die
     Gewichtung gibt der mittleren Spalte den Platz, den sie braucht. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr) minmax(0, 0.75fr);
  gap: clamp(20px, 2.2vw, 32px);
}
.fuss-marke .brand { margin-bottom: 20px; }
.fuss-satz {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 34ch;
  hyphens: auto;
}
.fuss-titel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.fuss-liste { display: flex; flex-direction: column; gap: 2px; }
.fuss-liste a,
.fuss-zeile a {
  display: inline-block;
  padding-block: 5px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.45;
  transition: color var(--takt-2) var(--ease);
}
/* Ruecklage fuer schmale Anzeigen: hier darf getrennt werden. Die Regel
   hyphens: manual gilt fuer Ueberschriften, nicht fuer Verweislisten —
   und ein Fussbereich, in dem "Arbeitnehmerueberlassung" die Spalte
   sprengt, ist schlechter als einer mit einem Trennstrich darin.

   display: block ist hier nicht Geschmack, sondern noetig: als
   inline-block bemisst sich der Verweis nach seiner Mindestbreite, und
   die verkleinern weder hyphens: auto noch overflow-wrap: break-word.
   "Ingenieurdienstleistungen" stand damit bei 390 px 22 px ueber der
   Spalte und wurde vom Rand abgeschnitten. Als Block fuellt der Verweis
   die Spalte, bricht darin um und traegt nebenbei eine groessere
   Trefferflaeche.

   Kein overflow-wrap: break-word daneben — das bricht dort, wo die Zeile
   voll ist ("Ingenieurdienstleistun / gen"), und gewinnt gegen die
   Trennung. hyphens: auto allein setzt den Strich an der richtigen
   Stelle: "Ingenieur- / dienstleistungen". */
.fuss-liste a {
  display: block;
  hyphens: auto;
}
.fuss-liste a:hover,
.fuss-zeile a:hover { color: var(--accent-2); }
.fuss-anschrift {
  font-style: normal;          /* <address> steht sonst kursiv */
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}
.fuss-zeile { margin-top: 2px; font-size: 15px; }
.fuss-kontakt .fuss-zeile:first-of-type { margin-top: 12px; }
.fuss-sprache { color: var(--text-3) !important; }
.fuss-sprache:hover { color: var(--accent-2) !important; }

@media (max-width: 980px) {
  .footer-oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-raster {
    grid-column: 1 / -1;
    order: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fuss-kontakt { order: 1; }
}
@media (max-width: 660px) {
  .footer-oben { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
/* Ab hier eine Spalte, und die Grenze ist gerechnet, nicht geraten:
   "Ingenieurdienstleistungen" misst 15 px gross rund 190 px. Bei 500 px
   Anzeigenbreite bleiben nach Rand und Spalt 220 px je Spalte — das
   traegt. Bei 390 px waeren es 165 px, und dann steht das Wort ueber der
   Spalte. Auf die Trennung ist kein Verlass: hyphens: auto braucht ein
   Trennwoerterbuch, das nicht jeder Browser mitbringt, und ohne das
   bricht gar nichts. Eine Spalte mehr Hoehe ist besser als ein Wort,
   das am Rand abgeschnitten wird. */
@media (max-width: 500px) {
  .footer-raster { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer-raster .fuss-spalte + .fuss-spalte { margin-top: 26px; }
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  /* siehe Regel weiter unten: steht die Zeile allein im Fussbereich,
     faellt diese zweite Linie weg */
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-3);
}

/* ---------- Unterseiten (Impressum etc.) ---------- */
.page {
  padding-top: calc(76px + clamp(64px, 9vw, 120px));
  padding-bottom: var(--sec-y);
}
.page .h-section { margin: 22px 0 48px; }
.legal { max-width: 760px; }
.legal h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 44px 0 14px;
}
.legal p, .legal li { color: var(--text-2); font-size: 16px; }
.legal p + p { margin-top: 1em; }
.legal a { color: var(--accent-2); }
.legal a:hover { text-decoration: underline; }
.legal ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Einblend-Animationen ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Screenshot-Modus: nur für automatisierte Vorschaubilder (?shot) */
html.shot .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ============================================================
   Sprungmarke zum Inhalt
   Erste Station der Tastaturbedienung: wer nicht mit der Maus arbeitet,
   soll die Navigation ueberspringen koennen, statt sich auf jeder Seite
   erneut durch sie hindurchzutabben (WCAG 2.4.1).
   ============================================================ */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  /* --accent traegt Weiss nicht: #4d7dff ergibt 3,69:1. --accent-flaeche
     ist die Flaechenfassung desselben Blaus und kommt auf 4,78:1. */
  background: var(--accent-flaeche);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 0 0 10px 10px;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 2px solid #fff;
  outline-offset: -6px;
}

/* ============================================================
   Sichtbarer Fokus
   Der Browser zeichnet von sich aus einen Rahmen, der auf dunklem Grund
   kaum zu sehen ist. Hier ein eigener, der auf beiden Farbwelten traegt.
   ============================================================ */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 3px;
}
.hell :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline-color: var(--accent);
}
/* Ueber dem hellen Hero-Band braucht der Fokus einen dunklen Ring */
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) :focus-visible { outline-color: #14294f; }
/* Auf dem Video wechselt der Untergrund staendig — dort ein doppelter Ring */
.hero-inhalt :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(10, 22, 48, 0.75);
}
/* Formularfelder haben nur eine Unterkante; ein Rahmen aussen herum wirkt
   dort falsch — stattdessen die Linie verstaerken. */
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   Formular: Rueckmeldung bei fehlenden oder falschen Eingaben
   Pflichtfelder werden nicht allein durch Farbe markiert, und jede
   Fehlermeldung steht als Text am Feld (WCAG 3.3.1, 3.3.3).
   ============================================================ */
.pflicht { color: var(--accent); margin-left: 2px; }
.feld-fehler {
  display: none;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #f07a86;
}
.hell .feld-fehler { color: #b3162b; }
.field.hat-fehler .feld-fehler { display: block; }
.field.hat-fehler input, .field.hat-fehler textarea { border-bottom-color: #f07a86; }
.hell .field.hat-fehler input, .hell .field.hat-fehler textarea { border-bottom-color: #b3162b; }
.form-meldung {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.form-meldung:empty { margin-top: 0; }
.form-meldung.ist-fehler { color: #f07a86; }
.hell .form-meldung.ist-fehler { color: #b3162b; }
.form-meldung.ist-erfolg { color: var(--accent-2); }

/* ============================================================
   Kennzeichnung computergenerierter Bilder
   Die Branchenbilder und die Hero-Szene sind KI-Visualisierungen und
   keine Aufnahmen realer Projekte. Artikel 50 der KI-Verordnung verlangt,
   dass das "klar und erkennbar" offengelegt wird — eine Mindestgroesse
   nennt sie nicht. Der Hinweis ist deshalb bewusst zurueckhaltend
   gesetzt, bleibt aber am Bild selbst, dauerhaft sichtbar, ohne
   Interaktion lesbar und mit klarem Kontrast (15,6:1). Kleiner als hier
   sollte er nicht werden, sonst geraet die Erkennbarkeit in Zweifel.
   ============================================================ */
/* ============================================================
   Kennzeichnung fuer JEDES Inhaltsbild

   Die Pille `.bildquelle` steht nur dort im Markup, wo sie beim
   Bau gesetzt wurde — Kacheln, Kopfbaender und Rasterbilder blieben
   ohne. Statt sie in siebzehn Dateien nachzutragen, uebernimmt das
   hier eine Regel: jeder Behaelter, der ein Inhaltsbild direkt
   enthaelt und noch KEINE Pille traegt, bekommt sie als ::before.
   NICHT ::after: dort liegen auf mehreren Behaeltern die Verlaufs-
   schleier des Entwurfs (.kopfband-bild, .ent-wer-bild u. a.), die
   sonst ueberschrieben wuerden und das Bild unabgedunkelt liesse.
   Logos und Favicons sind ueber die Dateinamen ausgenommen.
   ============================================================ */
main :is(figure, span, div, a):has(> img:not([src*="logo"]):not([src*="favicon"]):not([src*="apple-touch"])):not(:has(.bildquelle)) {
  position: relative;
}
main :is(figure, span, div, a):has(> img:not([src*="logo"]):not([src*="favicon"]):not([src*="apple-touch"])):not(:has(.bildquelle))::before {
  content: "KI-generiert";
  position: absolute;
  /* Position und Groesse ausdruecklich setzen, damit keine Regel des
     Entwurfs die Pille aufzieht. */
  top: auto;
  left: auto;
  right: 8px;
  bottom: 8px;
  width: auto;
  height: auto;
  inset-inline-start: auto;
  white-space: nowrap;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 14, 28, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #eaf0fb;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  pointer-events: none;
}

.bildquelle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  /* Gemessen gegen den HELLSTEN Bildpunkt unter der Pille, je Kachel
     einzeln: bei 0,58 Deckung kam Automotive auf 4,37:1 und die
     Schiene auf 4,36 — beide unter den geforderten 4,5 (WCAG 1.4.3).
     Mit 0,72 sind es 6,9:1 selbst ueber reinem Weiss, also unabhaengig
     vom Bild. Derselbe Wert wie beim Anhalteknopf; die beiden kleinen
     Auflagen sehen dadurch gleich aus. */
  background: rgba(8, 14, 28, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #eaf0fb;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  pointer-events: none;
}
/* Im Hero in die rechte untere Ecke, knapp ueber dem Verlauf in den
   hellen Bereich — dort stoert er die Szene am wenigsten. */
.hero-video-stage 

.bildquelle {
  right: clamp(12px, 1.6vw, 22px);
  bottom: clamp(12px, 1.6vw, 22px);
}
@media (max-width: 700px) {
  

.bildquelle { right: 9px; bottom: 9px; font-size: 8.5px; padding: 3px 7px; }
  .hero-video-stage 

.bildquelle { right: 12px; bottom: 12px; }
}

/* ============================================================
   Anrisse der Startseite mit 3D-Szene
   ============================================================
   Aus dem Claude-Design-Paket "3D Interaktive Animationen". Der
   Aufbau des Anrisses bleibt, wie er war — Rubrik und Schlagzeile
   links, Text und Verweis rechts. Dazu kommen drei Schichten:

     .anriss-buehne     die Leinwand, vollflaechig hinter dem Abschnitt
     .anriss-schleier   weisser Verlauf ueber der linken Haelfte
     .anriss-hinweis    die Bedienzeile unten rechts

   Die Szene laedt nur, wenn sie etwas beitraegt (Sperre in
   js/szene-rahmen.js). Ohne sie bleibt die Buehne leer und der
   Abschnitt sieht aus wie vor dem Einbau — deshalb steht die
   Mindesthoehe an der Klasse und nicht an der Buehne.
   ============================================================ */
.anriss-szene {
  position: relative;
  overflow: hidden;
}
.anriss-buehne {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Erst wenn wirklich ein Bild steht, blendet die Leinwand auf. Vorher
   ist die Flaeche leer und der Abschnitt liest sich wie immer. */
.anriss-buehne dmu-szene {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--takt-4) var(--ease);
}
.anriss-buehne dmu-szene.szene-laeuft { opacity: 1; }

/* Der Schleier liegt GLEICHMAESSIG ueber der ganzen Flaeche, nicht als
   Verlauf von links.

   Der Entwurf deckt die linken 30 % ab und laesst den Rest frei. Das
   traegt die Schlagzeile, aber nicht den Fließtext daneben: gemessen
   stand der bei 1,94:1, der Verweis bei 3,77:1. Sobald der Text als
   Overlay ueber der ganzen Szene liegt, gibt es keine Seite mehr, auf
   die man ihn schieben koennte — also muss die Szene ueberall so weit
   zuruecktreten, dass Text darauf lesbar bleibt.

   Die Deckung ist ausgemessen, nicht geschaetzt: sie ist der kleinste
   Wert, bei dem auch die schlechteste Stelle ueber 4,5:1 bleibt. Die
   schlechteste Stelle sind die Akzentwuerfel — sie stehen mit 0,85
   Deckung im Bild, alles andere liegt bei 0,08 bis 0,35.

   Die Farbe ist der Grund des hellen Bereichs, nicht reines Weiss —
   sonst zeichnet sich die Flaeche gegen den Seitenverlauf ab. */
.anriss-schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(244, 247, 251, var(--schleier, 0.72));
}

/* Der Inhalt liegt ueber beidem. Die Szene nimmt keine Zeiger an,
   ausser auf ihrer eigenen Flaeche — sonst liesse sie sich nicht
   drehen; Verweise und Schaltflaechen bleiben trotzdem bedienbar,
   weil sie hier drueber liegen. */
.anriss-szene .anriss-inner { position: relative; z-index: 2; }

/* Ohne Szene braucht der Abschnitt weder Hoehe noch Schleier. */
.anriss-szene:has(dmu-szene.szene-laeuft) {
  min-height: 88svh;
  display: flex;
  align-items: center;
}

/* Mit Szene steht der Text EINSPALTIG auf der linken Haelfte, nicht
   zweispaltig ueber die volle Breite.

   Das ist die eine Stelle, an der dieser Einbau vom Entwurf abweicht,
   und sie ist gemessen: zweispaltig liegt der rechte Block frei auf der
   Szene, und die Akzentlinien stehen dort mit 0,79 bis 0,85 Deckung.
   Gemessen kam der Fliesstext auf 1,94:1 und der Verweis auf 3,77:1 —
   gefordert sind 4,5:1. Die linke Spalte war nie das Problem, die deckt
   der Schleier ab (Schlagzeile 10,9 bis 12,1:1).

   Weniger deckende Linien waeren der andere Weg gewesen; dafuer haetten
   die Akzente auf 0,20 gemusst, und dann ist von der Szene nichts mehr
   uebrig. Text links, Motiv rechts — so zeigt es der Entwurf ohnehin. */
/* Aufbau und Schriftgrad bleiben, wie sie ohne Szene auch sind:
   Schlagzeile links, Fließtext rechts daneben, ueber die volle Breite.
   Der Text liegt als Overlay ueber der Szene — den Kontrast traegt der
   Schleier, nicht die Anordnung. */
/* `.wrap` traegt `margin: 0 auto`. Als Flex-Element bedeutet eine
   automatische Aussenkante Inhaltsbreite statt voller Breite —
   dieselbe Falle wie bei .ent-wer, .ent-arbeit und im
   Automotive-Raster. */
.anriss-szene:has(dmu-szene.szene-laeuft) > .wrap { width: 100%; }

/* Unterhalb der Sperre (900 px) laedt die Szene ohnehin nicht. Die
   Regeln stehen trotzdem hier, damit ein Fenster, das waehrend des
   Betriebs schmaler wird, nicht mit halbem Schleier dasteht. */
@media (max-width: 900px) {
  .anriss-szene:has(dmu-szene.szene-laeuft) { min-height: 0; padding-block: clamp(64px, 14vw, 110px); }
}

/* ============================================================
   Anhalteknopf fuer endlose Bewegung
   ============================================================
   WCAG 2.2.2: was laenger als fuenf Sekunden laeuft und von selbst
   startet, braucht eine Anhaltemoeglichkeit. Drei Stellen sind
   betroffen — das Startvideo, das Kopfvideo auf "Ueber uns" und das
   Laufband darunter.

   Der Knopf ist klein gehalten, er soll das Bild nicht beherrschen.
   Die Trefferflaeche misst trotzdem 36 px, damit sie auf dem Telefon
   zu treffen ist.

   Gerechnet gegen den schlechtesten Fall, einen WEISSEN Bildpunkt
   unter dem Knopf: die Fuellung deckt zu 0,72, daraus wird
   rgb(77, 82, 92). Weisses Symbol darauf steht bei 7,8:1, und mit
   demselben Wert hebt sich der Knopf von seiner Umgebung ab.
   Gefordert sind 3:1 (WCAG 1.4.11).
   ============================================================ */
.bewegung-knopf {
  position: absolute;
  left: clamp(12px, 1.6vw, 22px);
  bottom: clamp(12px, 1.6vw, 22px);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  background: rgba(8, 14, 28, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff;
  cursor: pointer;
  transition: background var(--takt-2), border-color var(--takt-2);
}
.bewegung-knopf:hover {
  background: rgba(8, 14, 28, 0.88);
  border-color: rgba(255, 255, 255, 0.55);
}
.bewegung-knopf:active { transition-duration: var(--takt-1); }

/* Im Ruhezustand unsichtbar.

   Der dunkle Kreis lag dauerhaft ueber dem Bild und stoerte die
   Komposition. Loeschen kommt nicht in Frage: eine Bewegung, die
   laenger als fuenf Sekunden laeuft, braucht einen Weg sie
   anzuhalten (WCAG 2.2.2). Er blendet deshalb nur noch ein, wenn
   der Zeiger ueber dem Medium liegt oder er per Tastatur erreicht
   wird — angehalten bleibt er immer sichtbar, sonst waere der Weg
   zurueck nicht auffindbar. */
.bewegung-knopf {
  /* Nur opacity, kein visibility: hidden — damit faellt der Knopf aus
     dem Tab-Order und die :focus-visible-Regel unten koennte nie
     feuern. Fuer Tastatur waere die Bewegung dann gar nicht
     anzuhalten. */
  opacity: 0;
  transition: opacity var(--takt-2),
              background var(--takt-2), border-color var(--takt-2);
}
:is(.hero-video-stage, .anriss-szene, .kopfband, figure, .bildband-medium, section):hover > .bewegung-knopf,
:is(.hero-video-stage, .anriss-szene, .kopfband, figure, .bildband-medium, section):focus-within > .bewegung-knopf,
.bewegung-knopf:hover,
.bewegung-knopf:focus-visible,
.bewegung-knopf.ist-angehalten {
  opacity: 1;
}
/* Ohne Zeiger (Touch) gibt es kein Hover — dort bleibt er sichtbar,
   sonst waere die Bewegung gar nicht anzuhalten. */
@media (hover: none) {
  .bewegung-knopf { opacity: 1; }
}

/* Beide Symbole liegen in derselben Rasterzelle uebereinander; die
   Klasse am Knopf entscheidet, welches zu sehen ist. */
.bewegung-knopf svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: currentColor; }
.bewegung-knopf .bewegung-weiter { display: none; }
.bewegung-knopf.ist-angehalten .bewegung-halt { display: none; }
.bewegung-knopf.ist-angehalten .bewegung-weiter { display: block; }

/* Das Kopfvideo auf "Ueber uns" ist ein <figure> ohne eigene Ebene —
   ohne die haenge der Knopf am naechsten positionierten Vorfahren. */
/* Der Anhalteknopf liegt absolut und muss sich am VIDEO bemessen, nicht
   an der Figur: die traegt seit Fassung 88 noch die Herkunftsangabe
   darunter, und mit ihr als Bezug rutschte der Knopf um seinen eigenen
   Abstand unter die Videokante. Deshalb ein eigener Rahmen, der genau so
   gross ist wie das Video. */
.ent-ueber .ent-kopffilm-rahmen { position: relative; display: block; }
/* Herkunftsangabe am Kopfvideo.
   Anders als die Pille am Startvideo (.bildquelle) steht sie NICHT im
   Bild, sondern darunter am rechten Rand — auf Wunsch des
   Auftraggebers. Damit entfaellt auch die dunkle Flaeche: eine Pille
   braucht es nur, wo der Grund unbekannt ist. Hier ist er die helle
   Seitenflaeche, also traegt der Text sich selbst.

   --text-3 ist der blasseste Ton, den der helle Tokensatz hergibt und
   der noch traegt: #5f6b85 auf dem Seitengrund misst 4,64:1 (gefordert
   4,5:1). Wer ihn weiter aufhellt, faellt darunter. */
.ent-ueber .ent-filmquelle {
  margin-top: 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Das Laufband steht im hellen Bereich. Ein dunkler Knopf waere dort
   ein Fremdkoerper; er nimmt deshalb die hellen Token. Der Rand traegt
   den Kontrast: --line-feld auf --bg-elev misst 3,64:1, das Symbol in
   --text auf --surface deutlich mehr. */
.bewegung-knopf-band {
  left: auto;
  right: 10px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: var(--surface);
  border-color: var(--line-feld);
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bewegung-knopf-band:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}
.bewegung-knopf-band svg { width: 13px; height: 13px; }

/* Der Screenshot-Modus baut die Vorschaubilder — dort gibt es niemanden,
   der etwas anhalten koennte. */
.shot .bewegung-knopf { display: none; }

@media (max-width: 700px) {
  .bewegung-knopf { left: 12px; bottom: 12px; }
}

/* ============================================================
   Einwilligung: Banner und Einstellungen
   ============================================================ */
.einwilligung {
  --ein-grund: #0d1220;
  --ein-linie: rgba(151, 168, 205, 0.18);
  --ein-text: #e9edf6;
  --ein-text-2: #aab5cc;
}
body.einwilligung-offen { overflow: hidden; }

/* ---------- Banner ---------- */
.einwilligung-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: var(--ein-grund);
  border-top: 1px solid var(--ein-linie);
  color: var(--ein-text);
  transform: translateY(102%);
  transition: transform 0.45s var(--ease);
  box-shadow: 0 -18px 50px rgba(4, 8, 18, 0.35);
}
.einwilligung-banner.ist-offen { transform: none; }
.einwilligung-innen {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: clamp(22px, 3vw, 32px) var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titel  knoepfe"
    "text   knoepfe"
    "links  knoepfe";
  column-gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.einwilligung-titel {
  grid-area: titel;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.25;
  color: var(--ein-text);
}
.einwilligung-text {
  grid-area: text;
  margin-top: 8px;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ein-text-2);
}
.einwilligung-links {
  grid-area: links;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ein-text-2);
}
.einwilligung-links a {
  color: var(--ein-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.einwilligung-links a:hover { color: var(--accent-2); }

/* Ablehnen und Akzeptieren gleich gross, gleich auffaellig, nebeneinander.
   Nur "Einstellungen" tritt zurueck, weil es fuer sich nichts entscheidet. */
.einwilligung-knoepfe {
  grid-area: knoepfe;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-einwilligung {
  background: transparent;
  border: 1px solid rgba(151, 168, 205, 0.42);
  color: var(--ein-text);
  font-size: 14.5px;
  padding: 12px 22px;
  white-space: nowrap;
  flex: none;
  min-width: 152px;
  justify-content: center;
}
.btn-einwilligung:hover {
  border-color: var(--accent-2);
  color: #fff;
  background: rgba(77, 125, 255, 0.16);
}
.btn-einwilligung-schlicht {
  border-color: transparent;
  color: var(--ein-text-2);
  min-width: 0;
  padding: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-einwilligung-schlicht:hover {
  background: none;
  border-color: transparent;
  color: var(--ein-text);
}

@media (max-width: 900px) {
  .einwilligung-innen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titel" "text" "links" "knoepfe";
  }
  .einwilligung-knoepfe { margin-top: 20px; }
  .btn-einwilligung { flex: 1 1 auto; min-width: 0; }
  .einwilligung-banner { max-height: 84svh; overflow-y: auto; }
}

/* ---------- Einstellungen ---------- */
.einwilligung-hinter {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(5, 9, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, 4vh) var(--pad-x);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.einwilligung-hinter.ist-offen { opacity: 1; pointer-events: auto; }

.einwilligung-dialog {
  width: min(660px, 100%);
  max-height: 92svh;
  overflow-y: auto;
  background: var(--ein-grund);
  border: 1px solid var(--ein-linie);
  border-radius: 16px;
  color: var(--ein-text);
  padding: clamp(26px, 3.4vw, 40px);
  transform: translateY(14px);
  transition: transform 0.35s var(--ease);
}
.einwilligung-hinter.ist-offen .einwilligung-dialog { transform: none; }
.einwilligung-dialog-kopf h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 27px);
  letter-spacing: -0.01em;
}
.einwilligung-dialog .einwilligung-text { margin-top: 12px; }

.einwilligung-liste { margin-top: 26px; border-top: 1px solid var(--ein-linie); }
.einwilligung-kategorie { padding: 18px 0; border-bottom: 1px solid var(--ein-linie); }
.einwilligung-kategorie-kopf { display: flex; align-items: center; gap: 14px; }
.einwilligung-name {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 17px;
  color: var(--ein-text);
  cursor: pointer;
}
.einwilligung-fest {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9dbaff;
  border: 1px solid rgba(157, 186, 255, 0.4);
  border-radius: 999px;
  padding: 3px 9px;
}
.einwilligung-kategorie-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ein-text-2);
  max-width: 62ch;
}

/* Schalter: das Kaestchen bleibt ein echtes Kontrollkaestchen und liegt
   unsichtbar ueber der Bahn — Screenreader und Tastatur bedienen es ganz
   normal, die Optik ist nur Fassade. */
.einwilligung-schalter-huelle {
  position: relative;
  margin-left: auto;
  flex: none;
  width: 52px;
  height: 30px;
  display: block;
}
.einwilligung-schalter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.einwilligung-schalter:disabled { cursor: default; }
.einwilligung-schalter-bahn {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(151, 168, 205, 0.2);
  border: 1px solid var(--ein-linie);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.einwilligung-schalter-bahn::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #cfd8ea;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.einwilligung-schalter:checked + .einwilligung-schalter-bahn {
  background: var(--accent);
  border-color: var(--accent);
}
.einwilligung-schalter:checked + .einwilligung-schalter-bahn::after {
  transform: translateX(22px);
  background: #fff;
}
.einwilligung-schalter:disabled + .einwilligung-schalter-bahn {
  background: rgba(77, 125, 255, 0.5);
  border-color: rgba(77, 125, 255, 0.5);
}
.einwilligung-schalter:focus-visible + .einwilligung-schalter-bahn {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
}

.einwilligung-fussnote {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ein-text-2);
}
.einwilligung-knoepfe-dialog { margin-top: 26px; }
@media (max-width: 620px) {
  .einwilligung-knoepfe-dialog .btn-einwilligung { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .einwilligung-banner, .einwilligung-hinter, .einwilligung-dialog,
  .einwilligung-schalter-bahn, .einwilligung-schalter-bahn::after,
  .skip-link { transition: none; }
}

/* ---------- Widerruf im Fussbereich ---------- */
.footer-bottom button {
  color: inherit;
  font: inherit;
  text-decoration: none;
  padding: 0;
}
.footer-bottom a:hover, .footer-bottom button:hover { color: var(--text); }

/* ============================================================
   Karriereseite
   Nimmt die redaktionelle Listenoptik der Leistungen auf: Trennlinien
   statt Kacheln, Typografie statt Rahmen. Die Ausschreibungen sind
   <details>-Elemente — auf- und zuklappen kann der Browser von sich aus,
   inklusive Tastatur und Screenreader.
   ============================================================ */
.page.hell { background: linear-gradient(180deg, #eef2f8 0%, #f7f9fc 45%, #ffffff 100%); }

/* Der Rumpf der Karriereseite. Bis Fassung 70 war das <main class="page
   hell"> — .page bringt den Abstand unter die feste Navigation mit. Den
   braucht nur eine Seite, die direkt darunter anfaengt; hier steht jetzt
   ein Kopfband davor, das seinen eigenen mitbringt.

   `display: flow-root` statt eines eigenen Kopfabstands: der erste
   Abschnitt traegt schon `margin-top` aus .karriere-abschnitt. Ohne
   eigene Stapelebene liefe dieser Aussenabstand aus dem hellen Bereich
   heraus und risse eine Luecke zwischen Kopfband und Flaeche.

   .karriere-titel und .karriere-lead sind mit dem Umbau entfallen — im
   Kopfband gelten .h-statement und .kopfband-anriss wie auf allen
   anderen Unterseiten. */
.karriere-koerper {
  display: flow-root;
  padding-bottom: var(--sec-y);
}

.karriere-abschnitt { margin-top: clamp(64px, 9vw, 128px); }
.karriere-abschnitt > .h-section { margin-bottom: clamp(28px, 3.5vw, 48px); }

/* ---------- Was den Arbeitsplatz ausmacht ---------- */
.karriere-werte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.karriere-wert {
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 44px) clamp(24px, 2.6vw, 36px) 0;
  border-bottom: 1px solid var(--line);
}
.karriere-wert:nth-child(odd) { border-right: 1px solid var(--line); }
.karriere-wert:nth-child(even) { padding-left: clamp(24px, 3vw, 44px); }
.karriere-wert h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(18px, 1.7vw, 23px);
  letter-spacing: -0.005em;
  color: var(--text);
}
.karriere-wert p {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.62;
  max-width: 42ch;
}
@media (max-width: 760px) {
  .karriere-werte { grid-template-columns: minmax(0, 1fr); }
  .karriere-wert:nth-child(odd) { border-right: none; }
  .karriere-wert:nth-child(even) { padding-left: 0; }
}

/* ============================================================
   Vollflaechiger Bildabschnitt
   Vorbild ist die Startseite von SpaceX: der Hintergrund des Abschnitts
   ist ganz Bild, der Text liegt unten links darauf. Hier steht das
   Band allerdings in einer hellen Seite — es ist eine dunkle Insel,
   kein durchgehender schwarzer Grund. Der Verlauf ist deshalb nicht
   Dekoration, sondern traegt den Textkontrast.
   ============================================================ */
.bildband {
  /* Die Token des hellen Bereichs gelten hier nicht — sonst stuende
     dunkler Text auf einem dunklen Bild. Es sind dieselben Werte wie in
     :root, bewusst noch einmal genannt, damit das Band ueberall
     funktioniert: im hellen Bereich wie im dunklen. */
  --text:      #e9edf6;
  --text-2:    #9aa5bd;
  --text-3:    #76829b;
  --accent:    #4d7dff;
  --accent-2:  #8fb2ff;
  --line:      rgba(151, 168, 205, 0.14);
  --line-soft: rgba(151, 168, 205, 0.08);
  color: var(--text);

  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 74svh, 780px);
  overflow: hidden;
  background: var(--bg);
}
.bildband-medium {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bildband-medium img,
.bildband-medium video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anders als im Kopfband bleibt das Bild hier voll deckend. Den
     Kontrast macht der Verlauf darueber — eine zusaetzliche Deckkraft
     wuerde das Motiv nur grau waschen. */
}
.bildband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(8, 12, 21, 0.95) 0%, rgba(8, 12, 21, 0.80) 26%,
                    rgba(8, 12, 21, 0.30) 58%, rgba(8, 12, 21, 0.55) 100%),
    linear-gradient(to right, rgba(8, 12, 21, 0.78), rgba(8, 12, 21, 0.30) 52%,
                    rgba(8, 12, 21, 0.05) 78%);
}
.bildband .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.bildband-inhalt { max-width: 54ch; }
.bildband-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
}
.bildband-anriss {
  color: var(--text-2);
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.62;
  margin: 0 0 22px;
  max-width: 52ch;
}
.bildband 

.bildquelle { z-index: 3; }
@media (max-width: 700px) {
  .bildband { min-height: clamp(360px, 62svh, 520px); }
  /* Schmal nimmt der Text anteilig mehr Breite ein; ein gleichmaessig
     dichter Verlauf traegt dort besser als der auslaufende. */
  .bildband::after {
    background:
      linear-gradient(to top, rgba(8, 12, 21, 0.95) 0%, rgba(8, 12, 21, 0.72) 42%,
                      rgba(8, 12, 21, 0.52) 100%);
  }
}

/* ---------- Stellenliste ---------- */
.stellen { border-top: 1px solid var(--line); }
/* Steht da, wenn keine Stelle ausgeschrieben ist — der Normalfall,
   sobald die Musterstellen ersetzt oder geloescht sind. */
.stellen-keine {
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.5vw, 28px);
  color: var(--text-2);
  max-width: 62ch;
}
.stelle { border-bottom: 1px solid var(--line); position: relative; }
.stelle::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.6s var(--ease);
}
.stelle:hover::before, .stelle[open]::before { width: 100%; }

.stelle-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(24px, 2.6vw, 36px) 44px clamp(24px, 2.6vw, 36px) 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: padding-left 0.5s var(--ease);
}
.stelle-kopf::-webkit-details-marker { display: none; }
.stelle:hover .stelle-kopf { padding-left: 18px; }

.stelle-titel {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--text);
}
.stelle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.stelle-meta span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* Zeichen zum Auf- und Zuklappen: zwei Striche, die sich zum Minus drehen */
.stelle-kopf::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 15px; height: 15px;
  margin-top: -7px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  color: var(--text-3);
  transition: transform 0.35s var(--ease), color 0.25s;
}
.stelle[open] .stelle-kopf::after { transform: rotate(135deg); color: var(--accent); }
.stelle-kopf:hover::after { color: var(--accent); }

.stelle-inhalt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  padding: 0 0 clamp(30px, 3vw, 44px);
}
.stelle-spalte h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.stelle-spalte ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stelle-spalte li {
  position: relative;
  padding-left: 20px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.stelle-spalte li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 8px; height: 1px;
  background: var(--accent);
}
.stelle-fuss {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line-soft);
}
.stelle-kontakt .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.stelle-kontakt .v { font-size: 16px; color: var(--text-2); }
.stelle-kontakt a { color: var(--accent-2); }
.stelle-kontakt a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .stelle-kopf {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  .stelle-meta { justify-content: flex-start; }
  .stelle-kopf::after { top: clamp(30px, 3.2vw, 42px); }
  .stelle-inhalt { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Initiativbewerbung ---------- */
.initiativ-raster {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 90px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3vw, 44px);
}
.initiativ-raster p {
  color: var(--text-2);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
  max-width: 52ch;
}
.initiativ-raster p + p { margin-top: 1.2em; }
.initiativ-raster .btn { margin-top: 30px; }
.initiativ-kontakt .contact-item:first-child { border-top: none; }
@media (max-width: 860px) {
  .initiativ-raster { grid-template-columns: minmax(0, 1fr); }
  .initiativ-kontakt .contact-item:first-child { border-top: 1px solid var(--line); }
}

.karriere-datenschutz {
  margin-top: clamp(30px, 4vw, 48px);
  font-size: 14px;
  color: var(--text-3);
}
.karriere-datenschutz a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .stelle::before, .stelle-kopf, .stelle-kopf::after { transition: none; }
}

.form-hinweis-pflicht { font-size: 13px; color: var(--text-3); }

/* ============================================================
   Trefferflaechen
   WCAG 2.5.8 verlangt fuer Bedienelemente mindestens 24 x 24 px.
   Die Verweise in Navigation und Fussbereich sind nur so hoch wie ihre
   Textzeile — hier wird die Flaeche aufgepolstert, ohne dass sich am
   Erscheinungsbild etwas aendert.
   ============================================================ */
.nav-links a:not(.btn) { padding-block: 7px; }
.footer-nav a { display: inline-block; padding-block: 6px; }
.footer-bottom a,
.footer-bottom button { display: inline-block; padding-block: 5px; }

/* Im aufgeklappten Mobilmenue stehen die Eintraege ohnehin gross —
   dort wuerde das Polster den Abstand nur unnoetig aufblaehen. */
@media (max-width: 1060px) {
  .nav-links a:not(.btn) { padding-block: 4px; }
}

/* Weg aus dem Einstellungsdialog, ohne sich festzulegen */
.einwilligung-dialog-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.einwilligung-zu {
  flex: none;
  width: 40px;
  height: 40px;
  margin: -6px -8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ein-text-2);
  font-size: 26px;
  line-height: 1;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.einwilligung-zu:hover { background: rgba(151, 168, 205, 0.14); color: var(--ein-text); }
@media (prefers-reduced-motion: reduce) { .einwilligung-zu { transition: none; } }

/* ============================================================
   Umbruch bei sehr schmalen Anzeigen
   WCAG 1.4.10 verlangt, dass sich der Inhalt bis herunter zu 320 px
   Breite ohne seitliches Scrollen lesen laesst. Lange deutsche
   Komposita — "Mobilitaetssegmente", "Schienenverkehr",
   "Arbeitnehmerueberlassung" — passen dort in keine Spalte und schoben
   bisher die ganze Seite auf. Silbentrennung greift nur, wenn ein Wort
   sonst nicht passt; am uebrigen Schriftbild aendert sie nichts.
   ============================================================ */
/* Ueberschriften: kein Trennstrich. Passt ein Wort nicht mehr in die
   Zeile, soll es ganz in die naechste wandern — "Vier / Branchen." liest
   sich besser als "Vier Bran-chen." overflow-wrap greift erst, wenn
   selbst das nicht reicht. */
.h-statement,
.h-section,
.h-display,
.legal h2,
.panel-text h2,
.mission .claim,
.leistung h3,
.karriere-wert h3,
.stelle-titel,
.thema h3,
.kachel-name,
.quer-name {
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Im Fliesstext und in den schmalen Wertespalten ist die Trennung dagegen
   unauffaellig und verhindert Loecher im Satz. */
.legal p,
.legal li,
.hero-meta-item .v,
.contact-item .v,
.kachel-anriss,
.quer-text {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Unter 380 px reicht die halbe Spaltenbreite der Faktenleiste selbst mit
   Trennung nicht mehr — dort untereinander. */
@media (max-width: 339px) {
  .hero-meta-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-meta-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .hero-meta-item:last-child { border-bottom: none; }
}

/* Steht die untere Zeile als einziger Inhalt im Fussbereich, wuerde ihre
   Trennlinie unmittelbar unter der Oberkante des Fussbereichs liegen —
   zwei Linien im Abstand von 24 px. */
.footer .wrap > .footer-bottom:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ============================================================
   Klappmenues in der Hauptnavigation
   "Branchen" und "Leistungen" fuehren zu einer Uebersichtsseite UND
   haben Unterseiten. Deshalb sind es zwei Bedienelemente: der Verweis
   auf die Uebersicht und daneben ein Schalter, der die Liste aufklappt.
   Ein Klappmenue, das den Hauptverweis schluckt, waere fuer Tastatur
   und Touch eine Sackgasse — dort gibt es kein "Ueberfahren".
   ============================================================ */
.nav-gruppe {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-auf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-2);
  transition: color 0.25s, background 0.25s;
}
.nav-auf > span {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.nav-auf:hover { color: var(--text); background: rgba(151, 168, 205, 0.12); }
.nav-auf[aria-expanded="true"] > span { transform: translateY(1px) rotate(-135deg); }

/* Die Liste selbst */
.nav-unter {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 262px;
  padding: 10px;
  margin: 0;
  list-style: none;
  /* Ueber dem hellen Hero-Video muss die Liste als eigene Flaeche
     lesbar sein, nicht als Schleier. Deshalb der volle Grundton statt
     --bg-elev, dazu ein kraeftigerer Rand und ein tieferer Schatten. */
  background: var(--bg);
  border: 1px solid rgba(151, 168, 205, 0.22);
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(4, 8, 18, 0.62);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
              visibility 0s linear 0.22s;
  z-index: 120;
}
/* Unsichtbare Bruecke: zwischen Menuepunkt und Liste liegen 14 px Luft.
   Ohne sie klappt das Menue zu, sobald der Zeiger den Spalt quert. */
.nav-unter::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 16px;
}
.nav-gruppe:hover .nav-unter,
.nav-gruppe:focus-within .nav-unter,
.nav-auf[aria-expanded="true"] + .nav-unter {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
              visibility 0s;
}

.nav-unter li { margin: 0; }
.nav-unter a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--text-2);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.nav-unter a:hover { background: var(--accent-dim); color: var(--text); }
.nav-unter a[aria-current="page"] { color: var(--accent-2); }
/* Der erste Eintrag fuehrt zur Uebersicht und wird abgesetzt */
.nav-unter li:first-child a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nav-unter li:first-child { border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; padding-bottom: 6px; }

/* Aktueller Menuepunkt */
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links > a[aria-current="page"]::after,
.nav-gruppe > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--accent-2);
}
.nav-links > a, .nav-gruppe > a { position: relative; }

/* Ueber dem hellen Hero-Band gilt die dunkle Schrift auch fuer das Menue */
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-auf { color: #33507f; }
:is(.light-hero, html.szene-hell) .nav:not(.is-scrolled) .nav-auf:hover { color: #142e5c; background: rgba(20, 46, 92, 0.1); }

/* ---------- Hochkant: alles untereinander, nichts klappt ----------
   Auf dem Telefon oeffnet das Menue ohnehin bildschirmfuellend. Dort
   die Unterseiten gleich mit anzuzeigen ist schneller als zweimal
   tippen — und der Klappschalter entfaellt ersatzlos. */
@media (max-width: 1060px) {
  .nav-links {
    justify-content: flex-start;
    overflow-y: auto;
    padding: 96px var(--pad-x) 48px;
    gap: 0;
  }
  .nav-gruppe {
    display: block;
    width: 100%;
    text-align: left;
  }
  .nav-auf { display: none; }
  .nav-links > a,
  .nav-gruppe > a {
    display: block;
    width: 100%;
    padding-block: 12px;
    font-size: 22px;
  }
  .nav-links > a[aria-current="page"]::after,
  .nav-gruppe > a[aria-current="page"]::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--accent-2); }

  .nav-unter {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    width: 100%;
    padding: 0 0 14px;
    margin: 0 0 8px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: none;
    transition: none;
  }
  .nav-unter::before { display: none; }
  .nav-unter a {
    padding: 9px 0 9px 18px;
    font-size: 16px;
    border-radius: 0;
    white-space: normal;
  }
  .nav-unter a:hover { background: none; }
  .nav-unter li:first-child { display: none; }   /* der Hauptverweis fuehrt schon dorthin */
  .nav-links .lang { align-self: flex-start; margin-top: 22px; }
  .nav-links .btn { align-self: flex-start; margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-unter, .nav-auf, .nav-auf > span { transition: none; }
}

/* ============================================================
   Kopfband der Unterseiten
   Statt eines zweiten Videos traegt jede Unterseite ein ruhiges
   Kopfband: Rubrik, Titel, ein Satz. Bei den Branchen liegt das
   Branchenbild darunter, sonst bleibt es einfarbig.
   ============================================================ */
.kopfband {
  position: relative;
  padding-top: calc(76px + clamp(56px, 9vw, 116px));
  padding-bottom: clamp(48px, 7vw, 96px);
  background: var(--bg);
  overflow: hidden;
}
.kopfband-bild {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.kopfband-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Die Branchenbilder sind Fotografien mit Bildinhalt, der etwas
     hergibt. Eine zu starke Abdunklung macht daraus eine graue Flaeche;
     den Textkontrast sichert der Verlauf darunter, nicht die Deckkraft. */
  opacity: 0.72;
}
/* Verlauf, damit die Typografie auf jedem Bildausschnitt lesbar bleibt.
   Links, wo Titel und Anriss stehen, deckt er dicht; nach rechts laeuft
   er aus und gibt das Motiv frei. */
.kopfband-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Die Haltepunkte sind gemessen, nicht geschaetzt: Titel und Anriss
     reichen bei 1440 px bis 88 % der Bandbreite. Dort muss der Verlauf
     noch 0,58 decken, sonst faellt der Kontrast auf den hellen Stellen
     der Fotos unter 4,5:1. Erst rechts davon gibt er das Motiv frei. */
  background:
    linear-gradient(100deg, rgba(8, 12, 21, 0.93) 10%, rgba(8, 12, 21, 0.80) 60%,
                    rgba(8, 12, 21, 0.58) 88%, rgba(8, 12, 21, 0.36)),
    linear-gradient(to bottom, rgba(8, 12, 21, 0.52), transparent 42%, rgba(8, 12, 21, 0.38));
}

/* Auf schmaleren Anzeigen nimmt der Text anteilig mehr Breite ein und
   reicht bis in den hellen Teil des Bildes — der nach rechts auslaufende
   Verlauf traegt dort nicht mehr. Gemessen fiel der Kontrast bei 1024 px
   auf 4,1:1 und hochkant auf 3,1:1. Ein gleichmaessig dichter Verlauf
   bringt ihn auf ueber 9:1, und das Motiv bleibt erkennbar. Die Grenze
   liegt deshalb bei 1100 px, nicht erst beim Hochformat. */
@media (max-width: 1100px) {
  .kopfband-bild::after {
    background:
      linear-gradient(to bottom, rgba(8, 12, 21, 0.76), rgba(8, 12, 21, 0.70) 45%,
                      rgba(8, 12, 21, 0.78));
  }
}
.kopfband-inhalt { position: relative; z-index: 2; }

/* ---------- Helles Kopfband (Karriere) ----------
   Branchen und Leistungen dunkeln ihr Bild ab und setzen helle Schrift
   darauf. Karriere soll die helle Farbwelt der Seite behalten. Damit
   dreht sich die Aufgabe des Schleiers um: nicht das Bild dunkler
   machen, damit helle Schrift traegt, sondern heller, damit dunkle
   Schrift traegt.

   Die Tokenliste steht deshalb oben mit in der Auswahl von `.hell` —
   eine zweite Liste von Farbwerten liefe nach der ersten Aenderung
   auseinander.

   Das Bild laeuft hier mit voller Deckkraft. Bei 0,72 auf hellem Grund
   waere es ausgewaschen, und der Kontrast kommt ohnehin vom Verlauf. */
/* Volle Bildschirmhoehe. Vorher richtete sich die Hoehe nach dem Text,
   und vom Bild blieb unten immer ein Streifen abgeschnitten.

   `100svh` statt `100vh`: auf dem Telefon zaehlt vh die Leiste des
   Browsers mit, die beim Scrollen verschwindet — die Seite waere dort
   um deren Hoehe zu lang.

   Der Inhalt sitzt mittig zwischen den Innenabstaenden; der obere haelt
   weiter den Platz unter der festen Navigation frei. */
.kopfband-hell {
  background: var(--bg);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
/* .wrap traegt `margin: 0 auto`. Als Flex-Element bedeutet eine
   automatische Aussenkante etwas anderes als im Block: das Element nimmt
   Inhaltsbreite statt voller Breite an. Dieselbe Falle wie bei den
   Automotive-Abschnitten im Raster. */
.kopfband-hell > .kopfband-inhalt { width: 100%; }
.kopfband-hell .kopfband-bild img { opacity: 1; }

/* Die Haltepunkte sind gemessen wie beim dunklen Kopfband, nur gegen die
   dunklen Textfarben des hellen Satzes. Bei 1440 px reichen die echten
   Zeilen bis 58 % (Ueberschrift) und 66 % (Anriss) der Bandbreite —
   deutlich weniger als die 88 % des dunklen Bandes, weil dort gegen den
   Kasten gemessen wurde und hier gegen die Zeilen.

   Gemessen ueber assets/karriere.jpg:
     Ueberschrift 12,9:1   Anriss 5,6:1   Rubrik 5,5:1
   Der kritische Punkt ist die dunkle Gestalt links im Bild: dort muss
   der Verlauf fast decken. Nach rechts gibt er das Motiv frei. */
.kopfband-hell .kopfband-bild::after {
  background:
    linear-gradient(100deg, rgba(238, 242, 248, 0.95) 0%, rgba(238, 242, 248, 0.90) 62%,
                    rgba(238, 242, 248, 0.45) 82%, rgba(238, 242, 248, 0.06)),
    linear-gradient(to bottom, rgba(238, 242, 248, 0.30), rgba(238, 242, 248, 0.10) 50%,
                    rgba(238, 242, 248, 0.20));
}

/* Wie beim dunklen Band: unter 1100 px nimmt der Text anteilig mehr
   Breite ein und reicht in den offenen Teil. Ein gleichmaessig dichter
   Verlauf statt des auslaufenden — gemessen 12,4 / 5,5 / 4,9:1. */
@media (max-width: 1100px) {
  .kopfband-hell .kopfband-bild::after {
    background: linear-gradient(to bottom, rgba(238, 242, 248, 0.90),
                                rgba(238, 242, 248, 0.90));
  }
}
.kopfband .eyebrow { margin-bottom: 22px; }
.kopfband .h-statement { color: var(--text); }
.kopfband-anriss {
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 62ch;
  font-size: clamp(16.5px, 1.45vw, 20px);
  line-height: 1.6;
  color: var(--text-2);
}
.kopfband 

.bildquelle { z-index: 3; }

/* ============================================================
   Fliesstext-Einleitung
   ============================================================ */
.einleitung p {
  max-width: 68ch;
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.68;
  color: var(--text-2);
}
.einleitung p + p { margin-top: 1.3em; }
.einleitung em { font-style: normal; color: var(--text); }
.einleitung .h-section { margin-bottom: 20px; }

/* ---------- Die Einleitung fuellt die Seitenbreite ----------
   Bis Fassung 49 stand die Einleitung als eine Spalte von 68 ch links im
   1200 px breiten Satzspiegel. Rechts blieben rund 45 % der Seite leer —
   nicht als Weissraum, sondern als Loch: die Unterseiten sahen aus, als
   fehlte dort noch etwas. Zwei Formen loesen das, je nachdem, ob der
   Block eine Ueberschrift traegt.

   Ohne Ueberschrift (Branchen- und Leistungsseiten): die beiden Absaetze
   nebeneinander. Alle 16 Einleitungen haben genau zwei Absaetze von 190
   bis 300 Zeichen — bei 46 ch je Spalte sind das drei bis vier Zeilen,
   die sich nebeneinander gut lesen. */
.einleitung-doppel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
}
.einleitung-doppel p { max-width: 48ch; }
.einleitung-doppel p + p { margin-top: 0; }

/* Mit Ueberschrift (Ueber uns): Titel links, Text rechts. Dasselbe
   Verhaeltnis wie bei .aufgaben-raster weiter unten, damit die Seite
   nicht zwei verschiedene Zweispaltigkeiten nebeneinander zeigt. */
.einleitung-titel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  /* Zeilenabstand und Spaltenabstand getrennt: zwischen den Absaetzen
     genuegt der Zeilenabstand eines Absatzes, zwischen Titel und Text
     braucht es die ganze Rinne. */
  gap: 1.3em clamp(20px, 4vw, 72px);
  align-items: start;
}
.einleitung-titel > p + p { margin-top: 0; }
.einleitung-titel .h-section {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
  /* Die Ueberschrift sitzt auf der ersten Zeile des Textes, nicht auf
     seiner Oberkante — sonst laeuft sie optisch nach oben weg. */
  padding-top: 0.06em;
}
.einleitung-titel > p { grid-column: 2; max-width: 58ch; }

@media (max-width: 860px) {
  .einleitung-doppel,
  .einleitung-titel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .einleitung-doppel p + p,
  .einleitung-titel > p + p { margin-top: 1.3em; }
  .einleitung-titel .h-section { margin-bottom: 20px; }
}

.ueber-abschnitte {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 92px);
}

/* ============================================================
   Themenbloecke
   Vier kurze Abschnitte statt eines langen Textes — dasselbe Raster,
   das Bertrandt und Expleo auf ihren Branchenseiten verwenden.
   ============================================================ */
.themen {
  margin-top: clamp(34px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.thema {
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 48px) clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}
.thema:nth-child(odd) { border-right: 1px solid var(--line); }
.thema:nth-child(even) { padding-left: clamp(24px, 3vw, 48px); }
.thema h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(18px, 1.75vw, 24px);
  letter-spacing: -0.005em;
  color: var(--text);
}
.thema p {
  margin-top: 13px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.62;
  max-width: 44ch;
}
@media (max-width: 760px) {
  .themen { grid-template-columns: minmax(0, 1fr); }
  .thema:nth-child(odd) { border-right: none; }
  .thema:nth-child(even) { padding-left: 0; }
}

/* ============================================================
   Aufgabenliste
   ============================================================ */
.aufgaben-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.aufgabenliste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.aufgabenliste li {
  position: relative;
  padding: 15px 20px 15px 26px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.aufgabenliste li::before {
  content: "";
  position: absolute;
  left: 0; top: 24px;
  width: 12px; height: 1px;
  background: var(--accent);
}
@media (max-width: 860px) {
  .aufgaben-raster { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 620px) {
  .aufgabenliste { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Querverweise zwischen Branchen und Leistungen
   Die beiden Achsen kreuzen sich: jede Branchenseite fuehrt zu den
   Leistungen, jede Leistungsseite zu den Branchen. Das erzeugt die
   Tiefe, die eine Seitenstruktur von einer Linkliste unterscheidet.
   ============================================================ */
.quer-raster {
  margin-top: clamp(30px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.quer-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  /* Auch im Ruhezustand eine Erhebung: eine Kachel, die nur aus einer
     Haarlinie besteht, liest sich als Rahmen, nicht als Gegenstand. Erst
     der Schatten macht aus dem Umriss eine Karte, die auf der Flaeche
     liegt. */
  box-shadow: var(--schatten-1);
  transition: border-color var(--takt-2) var(--ease),
              transform var(--takt-2) var(--ease),
              box-shadow var(--takt-2) var(--ease);
}
.quer-kachel:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--schatten-2);
}
.quer-name {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--text);
  padding-right: 26px;
}
.quer-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.quer-pfeil {
  position: absolute;
  top: clamp(22px, 2.4vw, 30px);
  right: clamp(20px, 2.2vw, 28px);
  color: var(--text-3);
  transition: transform 0.3s var(--ease), color 0.3s;
}
.quer-kachel:hover .quer-pfeil { transform: translateX(4px); color: var(--accent); }

/* Fassung mit Bild — auf Leistungsseiten fuehren die Kacheln zu Branchen */
.quer-kachel-bild { padding: 0; overflow: hidden; }
.quer-bild {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elev);
}
.quer-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.6s var(--ease);
}
.quer-kachel-bild:hover .quer-bild img { transform: scale(1.09); }
.quer-kachel-bild .quer-name { padding: clamp(18px, 2vw, 24px) clamp(50px, 5vw, 60px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px); }
.quer-kachel-bild .quer-pfeil { top: auto; bottom: clamp(20px, 2.2vw, 26px); }

/* ============================================================
   Kacheln auf den Uebersichtsseiten
   Airbus-Muster: Bild, Name, ein Satz, Verweis. Die ganze Kachel ist
   anklickbar, nicht nur das Woertchen am Ende.
   ============================================================ */
.kacheln {
  margin-top: clamp(34px, 4.5vw, 60px);
  display: grid;
  /* 460 px Mindestbreite ergibt auf dem Schreibtisch zwei Spalten statt
     vier. Vier waeren je 280 px breit — dort passt "Ingenieurdienst-
     leistungen" nicht hinein, und vier lange deutsche Komposita
     nebeneinander wirken ohnehin gedraengt. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}
/* Mit Bild tragen die Kacheln auch schmaler, weil der Name allein steht */
.kacheln-bild { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--schatten-1);
  transition: border-color var(--takt-2) var(--ease),
              transform var(--takt-2) var(--ease),
              box-shadow var(--takt-2) var(--ease);
}
.kachel:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--schatten-3);
}
.kachel-bild {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-elev);
}
.kachel-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.7s var(--ease);
}
.kachel:hover .kachel-bild img { transform: scale(1.1); }
.kachel-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 34px);
  flex: 1;
}
.kachel-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text);
}
.kachel-anriss {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
  flex: 1;
}
.kachel-weiter {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.kachel-weiter .arr { transition: transform 0.3s var(--ease); }
.kachel:hover .kachel-weiter .arr { transform: translateX(5px); }

/* ============================================================
   Anrisse auf der Startseite
   ============================================================ */
.anriss-inner {
  display: grid;
  /* Sieben zu fuenf statt halbe-halbe: Der grosse Schriftgrad bleibt, aber
     die Ueberschriftenspalte wird breit genug fuer das laengste Wort.
     Bei halber Breite brauchte "Gesamtmodell." in 86 px mehr Platz als die
     Spalte hatte und wurde mitten im Wort umbrochen. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(26px, 3.6vw, 64px);
  align-items: start;
}
.anriss .eyebrow { margin-bottom: 20px; }

.anriss-text {
  color: var(--text-2);
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.65;
  max-width: 48ch;
}
.anriss-text em { font-style: normal; color: var(--text); }
@media (max-width: 900px) {
  .anriss-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* ============================================================
   Abschliessendes Kontaktband
   Steht auf jeder Detailseite an derselben Stelle. Wer unten ankommt,
   soll nicht suchen muessen, wie es weitergeht.
   ============================================================ */
.kontaktband { text-align: center; }
.kontaktband .h-statement { margin-inline: auto; }
.kontaktband-text {
  margin: clamp(22px, 3vw, 34px) auto 0;
  max-width: 58ch;
  color: var(--text-2);
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.65;
}
.kontaktband-aktionen {
  margin-top: clamp(30px, 4vw, 46px);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.kontaktband .btn-ghost {
  border-color: var(--line-feld);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.kontaktband .btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); }

/* ============================================================
   Anfahrt auf der Kontaktseite
   ============================================================ */
.anfahrt {
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.anfahrt-titel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.anfahrt p {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 40ch;
}

/* ============================================================
   Sehr schmale Anzeigen: Trennung als letztes Mittel
   Ueber 400 px bleibt jede Ueberschrift ungetrennt — lange Woerter
   wandern ganz in die naechste Zeile. Darunter passt ein Wort wie
   "Ingenieurdienstleistungen" in keine Spalte mehr, egal wie klein der
   Grad wird. Dort ist ein Trennstrich das kleinere Uebel gegenueber
   einem harten Bruch mitten im Wort.
   ============================================================ */
@media (max-width: 400px) {
  .h-statement,
  .h-section,
  .panel-text h2,
  .mission .claim,
  .leistung h3,
  .karriere-wert h3,
  .stelle-titel,
  .thema h3,
  .kachel-name,
  .quer-name,
  /* Die Karten der Entwurfslayouts standen hier nicht mit drin — sie
     kamen erst in Fassung 53 dazu. Auf der Schienenseite ist die Karte
     am schmalsten (280er Spur, 60 px Polster): bei 320 px Anzeige
     bleiben 203 px, "Ingenieurdienstleistungen" braucht bei 22 px
     aber 275. Die Seite liess sich dadurch waagerecht schieben. */
  .ent-leistungskarte h3,
  .ent-leistungskarte-dunkel h3,
  .legal h2 {
    hyphens: auto;
  }
}

/* ============================================================
   Anfrageportal
   Ein Formular in Schritten statt eines Freitextfelds. Ohne
   JavaScript stehen alle Schritte untereinander und lassen sich ganz
   gewoehnlich abschicken — erst die Klasse `ist-schrittweise`, die das
   Skript setzt, macht daraus den gefuehrten Ablauf. Deshalb versteckt
   dieses Stylesheet nichts, was nicht vorher vom Skript freigegeben
   wurde.
   ============================================================ */
.portal { max-width: 720px; }
.portal-mitte { max-width: 760px; margin-inline: auto; }

/* ---------- Fortschrittsanzeige ---------- */
.portal-fortschritt {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  counter-reset: schritt;
}
.portal-punkt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 0;
  margin-right: 6px;
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.3;
  position: relative;
}
/* Verbindungsstrich zwischen den Punkten */
.portal-punkt:not(:last-child)::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--line);
  margin-left: 4px;
}
.portal-punkt-zahl {
  flex: none;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease);
}
.portal-punkt-name { display: none; }

.portal-punkt.ist-aktiv { color: var(--text); }
.portal-punkt.ist-aktiv .portal-punkt-zahl {
  background: var(--accent-flaeche);
  border-color: var(--accent-flaeche);
  color: #fff;
}
.portal-punkt.ist-aktiv .portal-punkt-name { display: inline; }

.portal-punkt.ist-erledigt { color: var(--text-2); cursor: pointer; }
.portal-punkt.ist-erledigt .portal-punkt-zahl {
  border-color: var(--accent);
  color: var(--accent-2);
}
/* Erledigte Schritte tragen statt der Zahl einen Haken */
.portal-punkt.ist-erledigt .portal-punkt-zahl::before {
  content: "✓";
  font-size: 13px;
}
.portal-punkt.ist-erledigt .portal-punkt-zahl { font-size: 0; }
.portal-punkt.ist-erledigt:hover .portal-punkt-zahl {
  background: var(--accent-dim);
}

/* Auf schmalen Anzeigen bricht die Punktkette mitten im Ablauf um und
   laesst einen Verbindungsstrich in der Luft haengen. Dort wird daraus
   ein schlichter Balken — welcher Schritt gerade dran ist, steht ohnehin
   als "Schritt 1 von 5" darunter. */
@media (max-width: 620px) {
  .portal-fortschritt {
    gap: 5px;
    margin-bottom: clamp(22px, 4vw, 32px);
  }
  .portal-punkt {
    flex: 1;
    padding: 0;
    margin: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    transition: background 0.3s var(--ease);
  }
  .portal-punkt:not(:last-child)::after { display: none; }
  .portal-punkt-zahl, .portal-punkt-name {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .portal-punkt.ist-aktiv,
  .portal-punkt.ist-erledigt { background: var(--accent-flaeche); }
  .portal-punkt.ist-erledigt { opacity: 0.55; }
}

/* ---------- Ein Schritt ---------- */
.portal-schritt { margin-bottom: clamp(30px, 4vw, 44px); }
/* Erst wenn das Skript laeuft, wird immer nur einer gezeigt */
.portal.ist-schrittweise .portal-schritt[hidden] { display: none; }
.portal.ist-schrittweise .portal-schritt { margin-bottom: 0; }

/* ---------- Betrieb ohne JavaScript ----------
   Weiter, Zurueck und die Fortschrittsanzeige haengen am Skript und
   taeten hier nichts. Der Absende-Knopf traegt im HTML `hidden`, damit er
   im gefuehrten Ablauf erst am Ende erscheint — ohne Skript muss er
   dagegen von Anfang an da sein, sonst liesse sich das Formular gar nicht
   abschicken. Der Pruefschritt bliebe leer und entfaellt ebenfalls. */
.portal:not(.ist-schrittweise) [data-weiter],
.portal:not(.ist-schrittweise) [data-zurueck],
.portal:not(.ist-schrittweise) .portal-fortschritt,
.portal:not(.ist-schrittweise) .portal-pruefen,
.portal:not(.ist-schrittweise) .portal-zaehler { display: none; }
.portal:not(.ist-schrittweise) [data-absenden] { display: inline-flex; }
.portal:not(.ist-schrittweise) .portal-fertig { display: none; }

.portal-zaehler {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.portal-titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 2.6vw, 33px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
}
.portal-titel:focus { outline: none; }
.portal-titel:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.portal-hinweis {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 56ch;
}
.portal-felder {
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}

/* ---------- Auswahl als Kacheln ----------
   Bei vier bis fuenf Moeglichkeiten sieht man so alle auf einen Blick.
   Eine Aufklappliste wuerde sie verstecken und auf dem Telefon das
   Systemmenue oeffnen. Das Kontrollkaestchen bleibt ein echtes
   Radiofeld — Tastatur und Screenreader bedienen es ganz normal. */
.feldgruppe { border: none; padding: 0; margin: 0; }
.feldgruppe-titel {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
  padding: 0;
}
.wahl {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.wahl + .wahl { margin-top: 10px; }
.wahl:hover { border-color: var(--accent-2); }
.wahl input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.wahl-marke {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--line-feld);
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.wahl-marke::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.2s var(--ease);
}
.wahl input:checked + .wahl-marke {
  border-color: var(--accent-flaeche);
  background: var(--accent-flaeche);
}
.wahl input:checked + .wahl-marke::after { transform: scale(1); }
.wahl input:focus-visible + .wahl-marke {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.wahl:has(input:checked) {
  border-color: var(--accent-flaeche);
  background: var(--accent-dim);
}
.wahl-text { display: flex; flex-direction: column; gap: 4px; }
.wahl-name {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 16.5px;
  color: var(--text);
}
.wahl-erklaerung { font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* ---------- Falle fuer Skripte ----------
   Nicht display:none — manche Skripte fuellen gerade solche Felder
   bevorzugt. Ausserhalb des Sichtfelds und aus dem Tastaturpfad. */
.portal-falle {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Pruefseite ---------- */
.portal-uebersicht {
  margin-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.portal-uebersicht dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 16px;
}
.portal-uebersicht dd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin: 5px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  white-space: pre-line;
}
.portal-uebersicht .ohne-angabe { color: var(--text-3); font-style: italic; }
.uebersicht-aendern {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.uebersicht-aendern:hover { border-bottom-color: var(--accent); }

/* ---------- Steuerung ---------- */
.portal-steuerung {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.portal-steuerung .btn-ghost {
  border-color: var(--line-feld);
  color: var(--text-2);
}
.portal-steuerung .btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); }
.arr-links { transition: transform 0.3s var(--ease); }
.btn:hover .arr-links { transform: translateX(-4px); }
.portal.ist-am-senden .portal-steuerung { opacity: 0.6; pointer-events: none; }

.portal-datenschutz {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 60ch;
}
.portal-datenschutz a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bestaetigung ---------- */
.portal-fertig {
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
}
.portal-fertig:focus { outline: none; }
.portal-haken {
  margin: 0 auto 20px;
  width: 68px; height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
}
.portal-fertig .h-section { margin-bottom: 14px; }
.portal-fertig-text {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.65;
  max-width: 46ch;
  margin-inline: auto;
}
.portal-vorgang {
  margin: clamp(24px, 3vw, 32px) auto 0;
  max-width: 100%;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px clamp(16px, 4vw, 26px);
  border: 1px dashed var(--line-feld);
  border-radius: 12px;
}
.portal-vorgang-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.portal-vorgang-v {
  font-family: var(--font-mono);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  /* Die Nummer enthaelt Bindestriche — ohne dies bricht sie auf schmalen
     Anzeigen dreizeilig um und ist als Ganzes kaum noch zu erfassen. */
  white-space: nowrap;
  /* Ein Doppelklick markiert die ganze Nummer statt nur eines Teils */
  user-select: all;
  -webkit-user-select: all;
}
.portal-fertig .portal-hinweis { margin-inline: auto; text-align: center; }
.portal-fertig-aktionen {
  margin-top: clamp(26px, 3vw, 34px);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.portal-fertig-aktionen .btn-ghost {
  border-color: var(--line-feld);
  color: var(--text);
}
.portal-fertig-aktionen .btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); }

/* ---------- Kontaktseite: Daten neben dem Portal ---------- */
.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 980px) {
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 5vw, 52px); }
  .portal { max-width: none; }
}
.kontakt-daten .contact-item:first-child { border-top: none; }
@media (max-width: 980px) {
  .kontakt-daten .contact-item:first-child { border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .wahl, .wahl-marke, .wahl-marke::after, .portal-punkt-zahl,
  .uebersicht-aendern, .arr-links { transition: none; }
}

/* ============================================================
   Unterlagen im Bewerbungsformular
   Das eigentliche input[type=file] bleibt erhalten und liegt unsichtbar
   hinter der Schaltflaeche — die Beschriftung ist ein <label>, also
   oeffnet auch die Tastatur damit den Dateidialog. Dadurch braucht es
   keinen Nachbau mit tabindex und Tastenabfragen.
   ============================================================ */
.feld-dateien .dateien-hinweis {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 54ch;
}

.dateien-ablage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1.5px dashed var(--line-feld);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.dateien-ablage.ist-ziel {
  border-color: var(--accent-flaeche);
  border-style: solid;
  background: var(--accent-dim);
}

/* Das Feld selbst: unsichtbar, aber vorhanden und bedienbar */
.dateien-ablage input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.dateien-knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--accent-flaeche);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-2);
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.dateien-knopf:hover { background: var(--accent-flaeche); color: #fff; }
.dateien-ablage input[type="file"]:focus-visible + .dateien-knopf {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.dateien-zeichen { display: flex; }

.dateien-ziehen { font-size: 14px; color: var(--text-3); }
/* Auf Touch gibt es kein Hineinziehen — der Hinweis waere irreführend */
@media (hover: none) {
  .dateien-ziehen { display: none; }
  .dateien-ablage { border-style: solid; }
}

/* ---------- Liste der gewaehlten Unterlagen ---------- */
.dateien-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feld-dateien.hat-dateien .dateien-liste { margin-top: 14px; }

.datei-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.datei-zeile + .datei-zeile { margin-top: 8px; }
.datei-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--text);
  /* Lange Dateinamen kuerzen statt umbrechen — die Zeile bleibt ruhig */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.datei-groesse {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}
.datei-weg {
  flex: none;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.datei-weg:hover { background: rgba(179, 22, 43, 0.1); color: #b3162b; }

@media (max-width: 520px) {
  .dateien-ablage { flex-direction: column; align-items: stretch; }
  .dateien-knopf { justify-content: center; }
  .dateien-ziehen { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dateien-ablage, .dateien-knopf, .datei-weg { transition: none; }
}

/* ============================================================
   3D-Szene als Seitenhintergrund
   Aus einem Entwurf in Claude Design uebernommen (Rumpfsektion im
   Rohbau, Kamera faehrt beim Scrollen hindurch). Zwei Dinge sind dabei
   bewusst anders als in der Vorlage:

   * Farben. Die Luftfahrt-Vorlage kam in Papierweiss und Rostorange. Dort
     stehen jetzt der obere Ton des hellen Bereichs (#eef2f8) und der Akzent
     des Designsystems (#1d55b8) — sonst saesse die Seite als Fremdkoerper
     zwischen den uebrigen 31. Die drei spaeter dazugekommenen Szenen
     (Schiffbau, Schienenverkehr, Automotive) behalten vorerst die Farben
     ihrer Entwuerfe; ihre Werte stehen in der Tabelle SZENEN in
     tools/seiten-bauen.py und kommen als --szene-grund hier an.
   * Helligkeit. Drei der vier Szenen sind hell und kippen die Farbwelt auf
     dunkle Schrift. Automotive ist dunkel und laesst sie, wie sie ohne
     Szene ist — deshalb faerbt dieser Block nichts fest, sondern setzt nur
     die Klasse `hell` frei, die js/szene-rahmen.js an das Kopfband haengt.
   * Reichweite. In der Vorlage laeuft die Szene hinter der ganzen Seite.
     Hier endet sie mit dem ersten Bildschirm. Darunter deckt wieder eine
     Flaeche ab, weil der Text dort ueber die volle Breite laeuft und die
     gemessenen Kontraste sonst nicht mehr gelten wuerden.

   Ohne die Klasse `hat-szene` am <html> ist dieser ganze Block wirkungslos
   und die Seite sieht aus wie eine Branchenseite ohne Szene. Die Klasse
   setzt js/szene-rahmen.js erst, wenn wirklich ein Bild gerendert ist.
   ============================================================ */
/* Die Buehne ist immer im Layout, nur unsichtbar, bis ein Bild steht.
   Zuerst stand hier display: none — das war eine Katze, die sich in den
   Schwanz beisst: ohne Layout misst sich die Buehne zu 0, der Renderer
   klemmt sich auf 1x1 Pixel, und erst der ResizeObserver koennte ihn
   wieder herausholen. Mit opacity hat die Buehne von Anfang an ihre
   richtige Groesse. */
.szene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* Kurz, nicht lang. Vorher stand hier --takt-4 (0,8 s), und weil das
     Kopfbandfoto im selben Moment hart verschwand, klaffte dazwischen bis
     zu einer Sekunde blasse Flaeche. Jetzt blenden Foto und Szene
     gemeinsam ueber --takt-1 — kurz genug, dass kein Zwischenzustand
     stehen bleibt, lang genug, dass es kein Sprung ist. */
  transition: opacity var(--takt-1) var(--ease);
  /* Der Generator setzt --szene-grund je Szene am Element. Die meisten
     Szenen faerben ihre Flaeche selbst; die Automotive-Szene rendert mit
     `alpha: true` und braucht den Grund von hier. */
  background: var(--szene-grund, #eef2f8);
}
/* Die Buehne ist von Anfang an da und traegt die Grundfarbe der Szene —
   deshalb gibt es nichts umzuschalten. Nur die Leinwand blendet auf,
   sobald wirklich ein Bild steht. */
.hat-szene .szene { opacity: 1; }
.szene canvas,
.ent-szene canvas {
  opacity: 0;
  transition: opacity var(--takt-2) var(--ease);
}
.szene-steht .szene canvas,
.szene-steht .ent-szene canvas { opacity: 1; }
/* Die vier Szenen sind vier verschiedene Custom Elements. Angesprochen
   werden sie ueber die Klasse, die der Generator ihnen mitgibt — sonst
   stuende hier eine Namensliste, die beim fuenften Motiv vergessen wird. */
.hat-szene .szene .szene-flaeche { position: absolute; inset: 0; }

/* Der Schleier haelt die linke Seite frei fuer die Typografie und gibt
   das Motiv nach rechts frei — dieselbe Richtung wie der Verlauf ueber
   den Kopfbandbildern. Bei 62 % deckt er noch 0,86; dort endet der
   Satzspiegel des Kopfbandtextes bei 1440 px. */
.hat-szene .szene-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgb(var(--szene-grund-rgb, 238 242 248) / 0.97) 0%,
      rgb(var(--szene-grund-rgb, 238 242 248) / 0.95) 34%,
      rgb(var(--szene-grund-rgb, 238 242 248) / 0.90) 62%,
      rgb(var(--szene-grund-rgb, 238 242 248) / 0.42) 88%,
      rgb(var(--szene-grund-rgb, 238 242 248) / 0.12) 100%),
    linear-gradient(to bottom,
      rgb(var(--szene-grund-rgb, 238 242 248) / 0.55), transparent 26%,
      rgb(var(--szene-grund-rgb, 238 242 248) / 0.45));
}

/* Der Anriss steht in --text-2 und kam damit ueber der hellsten Stelle des
   Rumpfes auf 2,8:1 — die Ueberschrift daneben auf 6,3:1, weil sie die
   dunklere Textfarbe traegt. Ueber einem bewegten Bild ist die zweite
   Textfarbe zu leicht; hier steht deshalb dieselbe wie in der
   Ueberschrift. Der Entwurf macht es genauso (#2c3235 statt Grau).
   Nachgemessen mit dem Verfahren aus tools/kopfband-kontrast-messen.py,
   nur gegen die gerenderte Szene statt gegen ein Foto. */
.hat-szene .kopfband-anriss { color: var(--text); }

/* Der Inhalt liegt ueber der Szene */
.hat-szene main { position: relative; z-index: 1; }
/* Der Fussbereich steht ausserhalb von <main> und war nicht positioniert.
   Damit malte er in der Ebene des Textflusses — und die liegt unter dem
   Stapelkontext, den `main` mit z-index: 1 aufmacht. Die Szene liegt in
   diesem Kontext und ist `position: fixed`, deckt das Fenster also an
   jeder Scrollstelle ab, auch dort, wo der Fussbereich steht.

   Zu sehen war nichts, anklickbar alles: die Szene traegt
   `pointer-events: none`, die Verweise nahmen den Zeiger also weiter an.
   Genau daran war der Fehler zu erkennen — und genau deshalb faellt er
   in keiner Verweispruefung auf.

   Automotive war als einzige Branchenseite in Ordnung: sie hat keine
   fixierte Seitenszene, sondern fuenf Abschnittsszenen innerhalb ihrer
   Sektionen. Ohne fixierte Flaeche gibt es nichts, was den Fussbereich
   zudecken koennte. */
.hat-szene .footer { position: relative; z-index: 1; }

/* Das Kopfband traegt jetzt die Klasse `hell` (gesetzt von
   js/rumpf-szene.js). Von dort kommen die dunklen Textfarben; die Flaeche
   darunter braucht es nicht, die malt die Szene. */
/* `html.szene-hell .kopfband` steht oben in der Selektorliste von `.hell`,
   damit die Tokenliste an einer Stelle bleibt. Von dort kommt aber auch
   deren FLAECHE — ein deckender heller Verlauf, der die Szene im ersten
   Bildschirm zudeckte und als harte Kante quer ueber die Seite endete.
   Der Selektor hier ist deshalb gleich spezifisch (0,2,1) und steht
   spaeter: er nimmt die Flaeche wieder weg, die Token bleiben. */
html.hat-szene .kopfband {
  background: transparent;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-bottom: clamp(64px, 10vh, 140px);
}
/* Das Kopfbandfoto ist der Rueckfall und tritt zurueck, sobald die Szene
   steht. Ausgeblendet, nicht weggeschaltet: `display: none` war ein
   harter Schnitt mitten in das Einblenden der Szene hinein, und dazwischen
   stand die Buehne blass und leer. Beide Seiten laufen jetzt ueber
   dieselbe kurze Dauer gegeneinander.

   `visibility` kommt mit Verzoegerung hinterher, damit das Foto danach
   wirklich aus dem Weg ist — es liegt im `main` und damit VOR der Szene. */
.kopfband-bild {
  transition: opacity var(--takt-1) var(--ease), visibility 0s linear var(--takt-1);
}
.hat-szene .kopfband-bild { opacity: 0; visibility: hidden; }

/* Auch die Schrift springt sonst in einem Bild von hell auf dunkel. */
.kopfband .eyebrow,
.kopfband .h-statement,
.kopfband-anriss { transition: color var(--takt-1) var(--ease); }

/* Ab dem hellen Bereich wieder gedeckt. Ohne das liefe der Fliesstext der
   Themenbloecke ueber den Rumpf, und die gemessenen 4,5:1 waeren dahin.
   Die Deckflaeche liegt hinter dem Inhalt (z-index -1 innerhalb von main)
   und trotzdem vor der Szene, weil main eine eigene Stapelebene hat. */
.hat-szene main:not(.ent) .hell {
  background: transparent;
  position: relative;
}
.hat-szene main:not(.ent) .hell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #eef2f8 0%, #f7f9fc 22%, #ffffff 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* Doppelt gemoppelt: das Skript laedt hier ohnehin nichts. */
  .szene { display: none !important; }
}

/* ============================================================
   DIE DREI ENTWURFSLAYOUTS (Fassung 53)

   Schiffbau, Schienenverkehr und Automotive kamen als eigene Entwuerfe
   aus Claude Design. Sie sind absichtlich verschieden aufgebaut: vier
   Branchenseiten im selben Raster lesen sich als eine Seite, die viermal
   wiederholt wurde. Die Luftfahrt behaelt den urspruenglichen Aufbau.

   Die Werte stehen so, wie sie in den Entwuerfen stehen. Sie sind
   deshalb NICHT auf die Token des Designsystems gezogen — das ist ein
   bewusst offener Punkt, siehe CLAUDE.md. Wer sie angleicht, faengt hier
   an; die Farben je Entwurf stehen als Variablen oben in jedem Block.

   Gemeinsam ist allen dreien: der Inhalt liegt als halbdurchsichtige
   Flaeche ueber der laufenden Szene, statt sie wie im Standardaufbau ab
   dem hellen Bereich vollstaendig zu verdecken. Genau daher kommt der
   Eindruck von Tiefe — und daher kommt auch die Pflicht, den Kontrast
   des Fliesstextes nachzumessen, nicht nur den des Kopfbands.
   ============================================================ */

/* Die Deckflaeche des Standardaufbaus greift in den Entwurfslayouts gar
   nicht mehr — sie wuerde die Szene ab dem ersten Abschnitt zudecken, und
   die Entwuerfe leben davon, dass sie durchlaeuft. Ausgeschlossen ist sie
   oben ueber `main:not(.ent)`.

   Wichtig ist die Unterscheidung zwischen den beiden Arten von `hell` in
   diesen Layouts:

   * `.ent-flaeche` ist der Rahmen um die ganze Seite bei Schiffbau und
     Schienenverkehr. Er bringt nur den hellen Tokensatz mit, keine
     Flaeche — sonst waere die Szene weg.
   * `.ent-auto .ent-abschnitt.hell` ist ein einzelner heller Abschnitt
     bei Automotive. Der hat sehr wohl eine eigene Flaeche; sie liegt
     unter der Szene dieses Abschnitts.

   Diese beiden zu verwechseln hat schon einmal die hellen
   Automotive-Abschnitte durchsichtig gemacht: dunkler Text stand dann auf
   dem dunklen Seitengrund, gemessene 1,0:1. */
.ent .ent-flaeche { background: transparent; }

.ent .ent-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.ent .ent-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.ent .ent-eyebrow,
.ent .ent-marke {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.ent .ent-pfeil { font-size: 20px; line-height: 1; }

/* Kuerzere Einblendung als im Rest der Seite. Die Abschnitte dieser
   Layouts sind bildschirmhoch und tragen je eine einzelne Karte — man
   scrollt entsprechend zuegig hindurch, und mit den 0,9 s des
   Standardaufbaus war der Text nie ganz da, bevor er wieder oben
   herauslief. Mit --takt-3 steht er, solange er im Bild ist. */
.ent .reveal {
  transform: translateY(16px);
  transition-duration: var(--takt-3), var(--takt-3);
}
/* ACHTUNG: Der Versatz bleibt auf den Szenenseiten STEHEN, auch nach
   dem Einblenden. Das sieht wie ein Fehler aus und ist keiner — der
   `transform` traegt dort zwei Aufgaben.

   `.reveal.is-visible { transform: none }` steht weiter oben und ist
   genauso spezifisch wie `.ent .reveal` (zwei Klassen hier wie dort).
   Bei Gleichstand entscheidet die Reihenfolge, und diese Regel steht
   spaeter — der Versatz gewinnt also dauerhaft.

   Die zweite Aufgabe ist die entscheidende: **ein transform ungleich
   `none` erzeugt einen Stapelkontext.** Die Szene liegt als
   `position: fixed; z-index: 0` hinter der Seite. Ein gewoehnlicher,
   nicht positionierter Block malt in der Ebene des Textflusses und
   damit UNTER jedem positionierten Element — also unter der Szene.
   Nur weil jede Karte, jeder Kasten und jede Liste einen eigenen
   Stapelkontext aufmacht, stehen sie ueberhaupt vor dem Motiv.

   Genau das ist in Fassung 62 einmal weggenommen worden, in der
   Annahme, hier liege ein unvollendeter Uebergang vor. Ergebnis: beim
   Scrollen durch Schiffbau und Schienenverkehr verschwand der Inhalt
   hinter der Szene — sichtbar blieben nur die Aufzaehlungspunkte, weil
   die `position: absolute` tragen und deshalb ohnehin positioniert
   sind. Wer den Versatz hier anfasst, gibt den Bloecken vorher
   ausdruecklich `position: relative; z-index: 1`.

   Die Ueber-uns-Seite hat keine Szene und damit nichts, wovor sie
   stehen muesste. Dort — und nur dort — wird der Versatz aufgeloest:
   ihr Raster traegt die Trennfarbe als Flaeche, und die 16 px standen
   als grauer Balken ueber den A/B-Kaesten. */
.ent-ueber .reveal.is-visible { transform: none; }
/* Ueber einem bewegten Bild ist die zweite Textfarbe zu leicht. Der
   Anriss des Kontaktbands kam damit auf 4,47:1 — knapp unter der Grenze.
   Dieselbe Feststellung wie beim Kopfband-Anriss der Luftfahrtseite. */
.ent .kontaktband-text { color: var(--text); }

/* Karten und Kaesten sollen nicht ueber die Spalte hinauswachsen — dieselbe
   Falle wie ueberall sonst im Stylesheet. */
.ent [class*="raster"] { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }


/* ---------------------------------------------------------------- Schiffbau
   Jeder Abschnitt fuellt einen Bildschirm, der Text steht als Glaskarte
   darueber. Wiederkehrendes Element: die Sektionsmarke 01-04 am linken
   Rand, mit der Akzentlinie darueber. */
.ent-schiff {
  --ent-ink: #151a1f;
  --ent-weich: #4a5560;
  --ent-linie: rgba(21, 26, 31, 0.14);
  /* Der Wert steht ausgeschrieben, nicht als var(--accent). `.hell` ist
     hier ein KIND von main, kein Vorfahre — `var(--accent)` liefert an
     dieser Stelle deshalb den dunklen Wert des Wurzelsatzes (#4d7dff),
     und der kam auf der hellen Szene auf 3,2:1. */
  --ent-akzent: #1d55b8;         /* Akzent des hellen Tokensatzes */
  /* Weiches Weiss, kein reines #fff. Die Karte soll ueber der hellen
     Helling-Szene als eigene Flaeche stehen, ohne gegen sie zu blitzen —
     zwischen Szenengrund (#f3f5f7) und Karte liegen nur wenige Stufen,
     Kante und Schatten tragen den Unterschied.

     Die Deckkraft ist trotzdem hoch: selbst ueber der dunkelsten Stelle
     der Szene (Stahl, #66727d, im Schatten etwa rgb(70,80,90)) bleibt die
     Flaeche bei rgb(228,230,233). Darauf misst die Ueberschrift 14,0:1,
     --ent-weich 6,1:1 und der Akzent 5,5:1 — die Karte traegt ihren Text
     also an jeder Stelle des Kamerawegs, nicht nur ueber dem hellen
     Dockboden (dort 16,7 / 7,3 / 6,6:1). */
  --ent-karte:       rgba(250, 251, 253, 0.88);
  --ent-karte-hover: rgba(255, 255, 255, 0.95);
  color: var(--ent-ink);
}
.ent-schiff .ent-schirm {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 14vh 0;
}
.ent-schiff .ent-schirm-kurz { min-height: 0; padding: 10vh 0; }
.ent-schiff .ent-eyebrow { color: var(--ent-akzent); }
.ent-schiff .ent-h1 { color: var(--ent-ink); }

/* Die Karten tragen KEINEN eigenen Tokensatz mehr. Bis Fassung 58 standen
   sie dunkel (rgba(10,14,23,.88)) und waren damit dunkle Inseln in einer
   hellen Seite — sie mussten die dunklen Token deshalb selbst nennen,
   sonst haette `--text: #101a2e` aus `.hell` dunklen Text auf dunkle
   Flaeche gestellt.

   Jetzt sind sie weiss und laufen im hellen Tokensatz von `.hell` mit.
   Alles, was sie brauchen, erben sie: `--ent-ink`, `--ent-weich` und
   `--ent-akzent` (#1d55b8) aus `.ent-schiff`, Schatten und Linien aus
   `.hell`. */
.ent-schiff .ent-karte {
  background: var(--ent-karte);
  backdrop-filter: blur(3px);
  border: 1px solid var(--ent-linie);
  /* Eine Karte, die sich nur wenige Stufen vom Szenengrund abhebt, liest
     sich ohne Erhebung als Rahmen statt als Gegenstand — dieselbe
     Feststellung wie bei den Kacheln im hellen Bereich. */
  box-shadow: var(--schatten-1);
  padding: clamp(24px, 3.2vw, 44px);
}
.ent-schiff .ent-einordnung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 3vw, 48px);
  max-width: 960px;
}
.ent-schiff .ent-einordnung p {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  color: var(--ent-weich);
  text-wrap: pretty;
}

.ent-schiff .ent-meta { display: flex; gap: 40px; margin: 56px 0 0; flex-wrap: wrap; }
.ent-schiff .ent-meta > div {
  border-top: 1px solid var(--ent-linie);
  padding-top: 10px;
  min-width: 150px;
}
.ent-schiff .ent-meta dt {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ent-weich);
}
.ent-schiff .ent-meta dd { margin: 6px 0 0; font-size: 15px; }

.ent-schiff .ent-sektion {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  max-width: 900px;
}
.ent-schiff .ent-no {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ent-akzent);
  border-top: 2px solid var(--ent-akzent);
  padding-top: 10px;
}
.ent-schiff .ent-sektion h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
.ent-schiff .ent-sektion p {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.62;
  color: var(--ent-weich);
  max-width: 56ch;
  text-wrap: pretty;
}

.ent-schiff .ent-pakete {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  /* Die Fugen liegen zwischen weissen Zeilen und sind deshalb dunkler
     als diese. Mit den dunklen Karten war es bis Fassung 58 umgekehrt. */
  background: var(--ent-linie);
  max-width: 860px;
}
.ent-schiff .ent-pakete li {
  background: var(--ent-karte);
  padding: 22px clamp(18px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 34px);
  align-items: baseline;
}
.ent-schiff .ent-pakete b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
}
.ent-schiff .ent-pakete span { color: var(--ent-weich); font-size: 15.5px; line-height: 1.55; }

/* Die Leistungskacheln stehen in keinem der Entwuerfe — der Block ist hier
   aber noetig, damit die Seite kein Sackgassenende hat. Aussehen wie die
   uebrigen Glaskarten dieses Entwurfs. */
.ent-schiff .ent-kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--ent-linie);
  border: 1px solid var(--ent-linie);
  margin-top: 36px;
}
.ent-schiff .ent-leistungskarte {
  background: var(--ent-karte);
  backdrop-filter: blur(3px);
  padding: 30px clamp(18px, 2.4vw, 30px) 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 180px;
  color: var(--ent-ink);
  text-decoration: none;
  transition: background var(--takt-2) var(--ease);
}
.ent-schiff .ent-leistungskarte:hover { background: var(--ent-karte-hover); }
.ent-schiff .ent-leistungskarte h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.ent-schiff .ent-leistungskarte p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ent-weich);
  flex: 1;
}
.ent-schiff .ent-leistungskarte .ent-pfeil { color: var(--ent-akzent); }


/* ------------------------------------------------------- Schienenverkehr
   Zwei Glaskarten nebeneinander, dann ein vierteiliges Raster, dessen
   Fugen die Trennlinien sind, dann ein dunkler Kasten, der aus der hellen
   Seite herausfaellt. */
.ent-schiene {
  --ent-ink: #23262a;
  --ent-weich: #494e54;
  --ent-linie: #c6c4bd;
  /* Der Wert steht ausgeschrieben, nicht als var(--accent). `.hell` ist
     hier ein KIND von main, kein Vorfahre — `var(--accent)` liefert an
     dieser Stelle deshalb den dunklen Wert des Wurzelsatzes (#4d7dff),
     und der kam auf der hellen Szene auf 3,2:1. */
  --ent-akzent: #1d55b8;         /* Akzent des hellen Tokensatzes */
  --ent-glas: rgba(241, 240, 236, 0.95);
  color: var(--ent-ink);
}
/* Die Abschnitte bekommen ihren Abstand ueber die Unterkante. Bis
   Fassung 59 stand hier `.ent-schiene > section` — die Abschnitte liegen
   aber in `.ent-flaeche` und sind damit ENKEL von main, nicht Kinder.
   Der Selektor traf deshalb nichts: zwischen allen vier Abschnitten
   standen gemessene 0 px, und die Ueberschrift "Unsere Leistungen in
   dieser Branche" klebte unmittelbar an der Unterkante des dunklen
   Kastens. Eine Ebene zu wenig gerechnet — dieselbe Art Fehler wie bei
   den beiden Pfadtiefen, und beim Bauen faellt sie nicht auf, weil das
   CSS formal richtig ist.

   Das Kontaktband bleibt aussen vor: es traegt als `.section` schon
   --sec-y. Aus demselben Grund endet der Leistungsblock ohne eigene
   Unterkante — sonst stuenden dort zwei Abstaende uebereinander. Der
   Selektor der Ausnahme braucht `section.ent-leistungen`, sonst
   unterliegt er dem `:not(.section)` darueber in der Spezifitaet. */
.ent-schiene .ent-flaeche > section:not(.section) { padding-bottom: 22vh; }
.ent-schiene .ent-flaeche > section.ent-leistungen { padding-bottom: 0; }
.ent-schiene .ent-h2 { color: var(--ent-ink); margin-bottom: 44px; }
.ent-schiene .ent-marke { color: var(--ent-akzent); }

.ent-schiene .ent-kontext-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px 56px;
}
.ent-schiene .ent-glas {
  background: var(--ent-glas);
  backdrop-filter: blur(6px);
  padding: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--ent-linie);
}
.ent-schiene .ent-glas-dunkel { border-top-color: var(--ent-ink); }
.ent-schiene .ent-glas p {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.62;
  text-wrap: pretty;
}

.ent-schiene .ent-feldraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--ent-linie);
  border: 1px solid var(--ent-linie);
}
.ent-schiene .ent-feld {
  background: rgba(241, 240, 236, 0.96);
  backdrop-filter: blur(6px);
  padding: 34px 30px 38px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ent-schiene .ent-no {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ent-akzent);
}
.ent-schiene .ent-feld h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ent-schiene .ent-feld p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ent-weich);
  text-wrap: pretty;
}

.ent-schiene .ent-dunkelkasten {
  background: rgba(35, 38, 42, 0.96);
  color: #eceae4;
  /* Wie bei den Schiffbau-Karten: auf dieser Flaeche sind es fuer
     #1d55b8 nur 2,2:1 und fuer #4d7dff 4,12:1 — der hellere Akzent
     bringt 7,22:1. Betrifft die Aufzaehlungspunkte. */
  --ent-akzent: #8fb2ff;
  padding: clamp(36px, 4vw, 60px);
  max-width: 1080px;
}
.ent-schiene .ent-dunkelkasten .ent-h2 { color: #eceae4; }
.ent-schiene .ent-punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0 56px;
}
.ent-schiene .ent-punkte li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid #3d4146;
  font-size: 17px;
}
.ent-schiene .ent-punkt {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--ent-akzent);
  transform: translateY(-3px);
}

.ent-schiene .ent-kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
.ent-schiene .ent-leistungskarte {
  background: rgba(241, 240, 236, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ent-linie);
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 190px;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--takt-2) var(--ease), transform var(--takt-2) var(--ease);
}
.ent-schiene .ent-leistungskarte:hover {
  border-color: var(--ent-akzent);
  transform: translateY(-3px);
}
.ent-schiene .ent-leistungskarte h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.ent-schiene .ent-leistungskarte p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ent-weich);
  flex: 1;
}
.ent-schiene .ent-leistungskarte .ent-pfeil { color: var(--ent-akzent); }


/* ---------------------------------------------------------------- Automotive
   Der einzige Entwurf ohne durchlaufende Szene: hinter jedem Abschnitt
   sitzt eine eigene, und die Abschnitte wechseln zwischen hell und dunkel
   und zwischen linker und rechter Ausrichtung. */
.ent-auto {
  --ent-akzent: #4d7dff;         /* Akzent des dunklen Tokensatzes */
  --ent-dunkelgrund: #0d1011;
  --ent-hellgrund: #f4f2ee;
  --ent-linie-hell: rgba(244, 242, 238, 0.13);
}
.ent-auto .ent-marke { color: var(--ent-akzent); margin-bottom: 0; }

/* Die Szene eines Abschnitts liegt hinter dessen Inhalt, nicht hinter der
   Seite. Sie ist immer im Layout (nur unsichtbar, bis ein Bild steht) —
   eine Buehne mit display:none misst sich zu null, und der Renderer
   klemmt sich dauerhaft auf ein Pixel fest. */
.ent-auto .ent-szene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--takt-4) var(--ease);
}
.hat-szene .ent-auto .ent-szene { opacity: 1; }

.ent-auto .ent-abschnitt {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 11vh, 128px) 0;
}
.ent-auto .ent-abschnitt > .wrap { position: relative; z-index: 2; }
.ent-auto .ent-schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Der Schleier des Kopfbands. Er steht im Entwurf genauso und ist nicht
   Zierde: die Marken-Leiste am unteren Rand misst ohne ihn 2,7:1. */
.ent-auto .kopfband { position: relative; overflow: hidden; }
/* Fotogrund der Themenabschnitte — er ersetzt die frueheren
   Drahtgitter-Szenen und liegt unter demselben Schleier. */
/* Der Fotogrund braucht je nach Flaeche einen eigenen Schleier: auf
   hellen Abschnitten weiss, auf dunklen schwarz, jeweils gerichtet zur
   Textspalte hin. Ohne ihn steht die Schrift ohne Kontrast im Bild. */
.ent-auto .ent-thema { position: relative; overflow: hidden; }
.ent-auto .ent-thema > .wrap { position: relative; z-index: 2; }
.ent-auto .ent-thema .ent-schleier { position: absolute; inset: 0; z-index: 1; }
.ent-auto .ent-thema-rechts.hell .ent-schleier,
.ent-auto .ent-thema-breit.hell .ent-schleier {
  background: linear-gradient(100deg, rgba(244,242,238,.96) 0%, rgba(244,242,238,.9) 38%, rgba(244,242,238,.55) 62%, rgba(244,242,238,.3) 100%);
}
.ent-auto .ent-thema-links.ent-dunkel .ent-schleier {
  background: linear-gradient(260deg, rgba(13,16,17,.95) 0%, rgba(13,16,17,.88) 38%, rgba(13,16,17,.5) 64%, rgba(13,16,17,.28) 100%);
}
.ent-auto .ent-thema-rechts.ent-dunkel .ent-schleier {
  background: linear-gradient(100deg, rgba(13,16,17,.95) 0%, rgba(13,16,17,.88) 38%, rgba(13,16,17,.5) 64%, rgba(13,16,17,.28) 100%);
}
.ent-auto .ent-bild {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.ent-auto .ent-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Das Kopfband ist eine Flex-Zeile: die Leiste steht neben dem Textblock
   und bekam dadurch nur die halbe Breite — zu wenig fuer vier einzeilige
   Beschriftungen. Sie belegt jetzt eine eigene Zeile ueber die volle
   Breite, damit alle vier Zellen nebeneinander stehen. */
.ent-auto .kopfband { flex-wrap: wrap; }
.ent-auto .kopfband > .wrap.kopfband-inhalt { flex: 1 1 100%; }
.ent-auto .kopfband > .ent-leiste { flex: 1 1 100%; }
.ent-auto .kopfband > .wrap { position: relative; z-index: 2; }
/* Der Schleier deckte auf 20-70 % der Breite mit ~0.93 — dort, wo die
   Geometrie sitzt. Uebrig blieben 10-18 Helligkeitsstufen ueber dem Grund,
   also nichts Sichtbares. Jetzt traegt er nur noch die Textspalte links
   und laeuft ab 40 % schnell aus. */
.ent-auto .ent-schleier-hero {
  background: linear-gradient(100deg,
    rgba(13, 16, 17, .93) 0%,
    rgba(13, 16, 17, .88) 26%,
    rgba(13, 16, 17, .52) 46%,
    rgba(13, 16, 17, .22) 66%,
    rgba(13, 16, 17, .06) 88%);
}

.ent-auto .ent-dunkel { background: var(--ent-dunkelgrund); color: #f4f2ee; }
.ent-auto .ent-abschnitt.hell { background: var(--ent-hellgrund); }
.ent-auto .ent-thema { min-height: 82vh; display: grid; align-items: center; }
/* `.wrap` traegt `margin: 0 auto`. Als Block ist das die uebliche
   Zentrierung; als GRID-ELEMENT — und der Abschnitt ist ein Grid — macht
   eine automatische Aussenkante das Element schrumpfen: es nimmt dann
   Inhaltsbreite statt Spaltenbreite an.

   Folge war, dass der rechtsbuendige Textblock in der Mitte des
   Abschnitts stand statt am rechten Rand — also genau dort, wo der
   Schleier auslaeuft. Gemessen 2,0:1 bei 1440 px, waehrend es bei 1000 px
   nicht auffiel. */
.ent-auto .ent-thema > .wrap { width: 100%; }

.ent-auto .ent-thema-text { max-width: 54ch; display: flex; flex-direction: column; gap: 20px; }
.ent-auto .ent-thema-rechts .wrap { display: grid; justify-items: end; }
.ent-auto .ent-thema-rechts .ent-thema-text { text-align: left; }
.ent-auto .ent-thema-text p { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.62; text-wrap: pretty; }
/* Die Marken sind ausgenommen. Sie sind ebenfalls <p>, und die
   Absatzregel schlug sie in der Spezifitaet — die Zeilen "Leistung 01"
   standen dadurch in der Textfarbe statt im Akzent, obwohl der Entwurf
   sie farbig setzt. Dasselbe galt fuer die Fussmarke. */
.ent-auto .ent-dunkel .ent-thema-text p:not(.ent-marke):not(.ent-fussmarke) { color: #c3c8cb; }
.ent-auto .ent-abschnitt.hell .ent-thema-text p:not(.ent-marke):not(.ent-fussmarke) { color: #3c4143; }

/* Schleier je Ausrichtung: er haelt die Textseite frei und gibt das Motiv
   zur anderen Seite hin frei — dieselbe Richtung wie beim Kopfband. */
.ent-auto .ent-thema-links .ent-schleier {
  background: linear-gradient(90deg, rgba(13, 16, 17, .95) 0%, rgba(13, 16, 17, .88) 34%, rgba(13, 16, 17, .5) 62%, rgba(13, 16, 17, .26) 100%);
}
/* Dieselbe Nachbesserung wie beim hellen Gegenstueck: der rechtsbuendige
   Textblock beginnt bei 1440 px schon bei knapp der halben Breite, und
   dort deckte der Verlauf des Entwurfs (0,75 bei 42 %) zu wenig. Seit die
   Kamera naeher an der Baugruppe steht, faellt das staerker ins Gewicht —
   gemessen 4,46:1 an der Marke. Die dichte Zone reicht jetzt bis 56 %. */
.ent-auto .ent-thema-rechts.ent-dunkel .ent-schleier {
  background: linear-gradient(260deg, rgba(13, 16, 17, .95) 0%, rgba(13, 16, 17, .88) 34%, rgba(13, 16, 17, .5) 62%, rgba(13, 16, 17, .26) 100%);
}
/* Einziger Verlauf des Automotive-Entwurfs, dessen Haltepunkte verschoben
   sind. Im Entwurf steht `.96 0%, .78 40%, .06 82%`. Der rechtsbuendige
   Textblock beginnt bei 1440 px aber schon bei 48 % der Breite, und dort
   deckte der Verlauf nur noch 0,57 — gemessen 3,9:1 ueber der hellsten
   Stelle des Motivs. Die dichte Zone reicht jetzt bis 56 %, also bis unter
   die linke Kante der Textspalte. Rechts davon bleibt alles wie im
   Entwurf, links laeuft das Motiv weiterhin frei aus.
   Der dunkle Gegenpart braucht das nicht: dort steht helle Schrift, und
   ein duenner dunkler Schleier schadet ihr nicht. */
.ent-auto .ent-thema-rechts.hell .ent-schleier {
  background: linear-gradient(260deg, rgba(233, 230, 223, .96) 0%, rgba(233, 230, 223, .9) 34%, rgba(233, 230, 223, .55) 62%, rgba(233, 230, 223, .3) 100%);
}
.ent-auto .ent-thema-rechts.hell { background: #e9e6df; }
/* Im Entwurf steht in der Mitte 0,6. Der Abschnitt traegt aber Text ueber
   die volle Breite, und die `flow`-Szene setzt ihre Knoten mit
   Math.random() — ihr Bild ist bei jedem Aufruf ein anderes. Gemessen
   wurde 3,57:1 an einer Stelle, die auf der deutschen Fassung gar nicht
   auftrat und auf der englischen schon.

   Ein Verlauf, der nur fuer einen bestimmten Wuerfelwurf reicht, ist kein
   Verlauf. Die Mitte steht deshalb auf 0,82: das Motiv bleibt sichtbar,
   der schlechteste denkbare Wurf traegt den Text aber trotzdem. */
.ent-auto .ent-thema-breit .ent-schleier {
  background: linear-gradient(180deg, rgba(244, 242, 238, .94) 0%, rgba(244, 242, 238, .82) 55%, rgba(244, 242, 238, .92) 100%);
}

.ent-auto .ent-fussmarke,
.ent-auto .ent-leiste div,
.ent-auto .ent-unterleiste div,
.ent-auto .ent-nr {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ent-auto .ent-fussmarke { margin: 0; color: #7d7a74; }
.ent-auto .ent-dunkel .ent-fussmarke { color: #8b969b; }

/* Der Akzent kippt mit der Helligkeit des Abschnitts, wie ueberall sonst
   im Designsystem: #4d7dff auf Dunkel, #1d55b8 auf Hell. Der helle Wert
   allein auf dunklem Grund waere zu schwach und umgekehrt.

   Das Grau der Fussmarke ist eine gemessene Korrektur am Entwurf: #7d7a74
   kam auf hellem Grund auf 3,43:1 und faellt bei 11 px Versalschrift unter
   WCAG 1.4.3 durch. #5f5c55 sind 5,35:1 auf #e9e6df und 5,97:1 auf
   #f4f2ee. Der Abstand nach oben ist Absicht: dahinter laeuft ein bewegtes
   Bild, und der Schleier deckt es nicht ueberall gleich. */
.ent-auto .ent-abschnitt.hell .ent-marke { color: var(--accent); }
.ent-auto .ent-abschnitt.hell .ent-fussmarke { color: #5f5c55; }

/* Leiste am unteren Rand des Kopfbands */
.ent-auto .ent-leiste,
.ent-auto .ent-unterleiste {
  display: flex;
  border-top: 1px solid var(--ent-linie-hell);
  margin-top: 0;
}
.ent-auto .ent-leiste {
  /* Als Flex-Item neben .kopfband-inhalt traegt sie min-width:auto und
     ragte dadurch 13.6 px ueber den abschneidenden Rand hinaus. */
  min-width: 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  width: 100%;
  /* Eigene Flaeche statt blossem Verlauf: die Leiste laeuft ueber die
     volle Breite, ihre rechten Zellen liegen damit immer im duennen Ende
     des Kopfband-Verlaufs. Gemessen dort 3,7:1 bei 11 px Versalschrift.
     Sie ist ein Bedienstreifen, kein Teil des Bildes — eine eigene
     Flaeche ist auch gestalterisch das Richtige. */
  background: rgba(13, 16, 17, 0.72);
}
.ent-auto .ent-leiste div,
.ent-auto .ent-unterleiste div {
  /* Nicht `1 1 0`: das teilt die Breite in vier gleiche Teile, ohne den
     Inhalt zu fragen — die laengste Beschriftung lief dadurch ueber die
     Trennlinie. Mit `auto` als Ausgangsbreite bekommt jede Zelle erst
     ihren Text, und nur der Rest wird gleichmaessig verteilt. */
  /* KEIN min-width:0 hier — das hob min-width:auto auf und liess die
     Zellen unter ihre min-content-Breite stauchen, sodass der Text ueber
     die Trennlinie lief. nowrap haelt jede Beschriftung einzeilig, damit
     alle Grundlinien im Balken auf einer Hoehe sitzen; die Leiste selbst
     darf dafuer umbrechen, wenn die Breite nicht reicht. */
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px clamp(12px, 2vw, 24px);
  color: #8b969b;
  border-left: 1px solid var(--ent-linie-hell);
}
.ent-auto .ent-leiste div:first-child,
.ent-auto .ent-unterleiste div:first-child { border-left: 0; }
.ent-auto .ent-unterleiste { margin-top: 44px; max-width: 760px; }
.ent-auto .ent-unterleiste div { padding: 18px 0 18px 24px; }
.ent-auto .ent-unterleiste div:first-child { padding-left: 0; }

.ent-auto .ent-zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.ent-auto .ent-zweispalt-weit { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ent-auto .ent-gross {
  margin: 0 0 28px;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.ent-auto .ent-klein {
  margin: 0;
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.65;
  color: #4c5153;
  text-wrap: pretty;
}

.ent-auto .ent-nummernliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0 48px;
  border-top: 1px solid var(--ent-linie-hell);
}
.ent-auto .ent-nummernliste li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ent-linie-hell);
  font-size: 16.5px;
  line-height: 1.45;
}
.ent-auto .ent-nr { color: var(--ent-akzent); padding-top: 4px; flex: 0 0 auto; }

.ent-auto .ent-weitere { padding-top: 0; }
.ent-auto .ent-branchenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--ent-linie-hell);
  border: 1px solid var(--ent-linie-hell);
  margin-top: 24px;
}
.ent-auto .ent-branchenkachel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--ent-dunkelgrund);
  color: #f4f2ee;
  text-decoration: none;
  transition: background var(--takt-2) var(--ease);
}
.ent-auto .ent-branchenkachel:hover { background: #151a1c; }
.ent-auto .ent-branchenname { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ent-auto .ent-branchentext { font-size: 14px; line-height: 1.5; color: #98a2a7; }

/* Der Leistungsblock steht in keinem der Entwuerfe (siehe CLAUDE.md) und
   hatte deshalb als einziger Block dieser Seite keinen Abstand zwischen
   Ueberschrift und Raster — gemessene 0 px, die Kacheln stiessen an die
   Unterkante der Zeile. Schiffbau loest das ueber `margin-top` am Raster,
   Schienenverkehr ueber `margin-bottom` an der Ueberschrift; hier steht
   es am Raster, weil `.ent-h2` bei Automotive auch in den zweispaltigen
   Themenbloecken vorkommt und dort keinen Abstand braucht. */
.ent-auto .ent-kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--ent-linie-hell);
  border: 1px solid var(--ent-linie-hell);
  margin-top: 44px;
}
.ent-auto .ent-leistungskarte-dunkel {
  background: var(--ent-dunkelgrund);
  color: #f4f2ee;
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 180px;
  text-decoration: none;
  transition: background var(--takt-2) var(--ease);
}
.ent-auto .ent-leistungskarte-dunkel:hover { background: #151a1c; }
.ent-auto .ent-leistungskarte-dunkel h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.ent-auto .ent-leistungskarte-dunkel p { margin: 0; font-size: 15px; line-height: 1.6; color: #98a2a7; flex: 1; }
.ent-auto .ent-leistungskarte-dunkel .ent-pfeil { color: var(--ent-akzent); }


/* -------------------------------------------------- Verlaeufe im schmalen Fenster
   Die Verlaeufe des Automotive-Entwurfs laufen bei 78 bis 82 % der Breite
   aus. Bei 1440 px endet die Textspalte (54 ch) lange davor; bei 1000 px
   reicht sie hinein, und der Text steht dann auf dem blanken Bild —
   gemessen 1,5:1 an der hellsten Stelle des Motivs.

   Unter 1100 px greift deshalb ein gleichmaessig dichter Verlauf statt
   des auslaufenden. Dieselbe Loesung wie bei den Kopfbandbildern, aus
   demselben Grund: unter 1100 px nimmt der Text anteilig mehr Breite ein.
   Ueber 1100 px bleiben die Werte des Entwurfs unangetastet.

   Die Szenen laufen erst ab 901 px (darfLaden), das Fenster dazwischen
   ist also 901 bis 1100 px. */
@media (max-width: 1100px) {
  .ent-auto .ent-thema-links .ent-schleier {
    background: linear-gradient(90deg, rgba(13, 16, 17, .95) 0%, rgba(13, 16, 17, .9) 44%, rgba(13, 16, 17, .62) 74%, rgba(13, 16, 17, .4) 100%);
  }
  .ent-auto .ent-thema-rechts.ent-dunkel .ent-schleier {
    background: linear-gradient(260deg, rgba(13, 16, 17, .95) 0%, rgba(13, 16, 17, .9) 44%, rgba(13, 16, 17, .62) 74%, rgba(13, 16, 17, .4) 100%);
  }
  .ent-auto .ent-thema-rechts.hell .ent-schleier {
    background: linear-gradient(260deg, rgba(233, 230, 223, .96) 0%, rgba(233, 230, 223, .92) 44%, rgba(233, 230, 223, .64) 74%, rgba(233, 230, 223, .42) 100%);
  }
  /* Gleiche Rampe wie oben: bei ~0.92 ueber 64 % der Breite blieb von
     der Szene nichts uebrig. Traegt jetzt nur die Textspalte. */
  .ent-auto .ent-schleier-hero {
    background: linear-gradient(100deg,
      rgba(13, 16, 17, .93) 0%,
      rgba(13, 16, 17, .88) 26%,
      rgba(13, 16, 17, .52) 46%,
      rgba(13, 16, 17, .22) 66%,
      rgba(13, 16, 17, .06) 88%);
  }
}


/* ---------------------------------------------------------------- schmal
   Unter 760 px fallen alle mehrspaltigen Raster der drei Entwuerfe auf
   eine Spalte. Die Szenen laufen dort ohnehin nicht (siehe darfLaden),
   die Seiten sind also gewoehnliche Textseiten. */
@media (max-width: 760px) {
  .ent-schiff .ent-schirm { min-height: 0; padding: 10vh 0; }
  .ent-schiff .ent-sektion,
  .ent-schiff .ent-pakete li { grid-template-columns: 1fr; }
  .ent-schiff .ent-pakete li { gap: 8px; }
  .ent-schiene .ent-flaeche > section:not(.section) { padding-bottom: 14vh; }
  .ent-auto .ent-zweispalt,
  .ent-auto .ent-zweispalt-weit { grid-template-columns: 1fr; }
  .ent-auto .ent-thema { min-height: 0; }
  .ent-auto .ent-thema-rechts .wrap { justify-items: start; }
  .ent-auto .ent-leiste { flex-wrap: wrap; }
  .ent-auto .ent-leiste div { flex: 1 1 50%; }
}

/* Unter 560 px steht die Spaltenzahl fest auf eins.

   Das ist keine Gestaltungsfrage — bei dieser Breite sind alle Raster
   hier ohnehin einspaltig (das engste braeuchte 260 + 260 + 1 = 521 px
   Innenbreite, verfuegbar sind 520). Es geht um etwas anderes:

   `minmax(min(100%, 320px), 1fr)` soll den Ueberlauf gerade verhindern.
   Beim Ermitteln der MINDESTBREITE des Dokuments laesst sich das 100 %
   aber nicht aufloesen — die Raster stehen in `.ent-schirm`, und das
   ist ein Flex-Kasten ohne feste Breite. Uebrig bleibt der Sockel von
   320 px, und der bestimmt dann die Mindestbreite der ganzen Seite.

   Gemessen bei 320 px Anzeige: Schiffbau verlangte 413 px, der
   Schienenverkehr 377. Beides ist ein Verstoss gegen WCAG 1.4.10, und
   im Browser sieht man es nur daran, dass sich die Seite waagerecht
   schieben laesst.

   Wer hier ein Raster ergaenzt, traegt es mit ein. Die Gegenprobe ist
   eine Zeile in der Konsole — sie muss `true` ergeben:

     document.documentElement.scrollWidth <= innerWidth + 1
*/
@media (max-width: 560px) {
  .ent-schiff .ent-einordnung,
  .ent-schiff .ent-kartenraster,
  .ent-schiene .ent-kontext-raster,
  .ent-schiene .ent-feldraster,
  .ent-schiene .ent-punkte,
  .ent-schiene .ent-kartenraster,
  .ent-auto .ent-nummernliste,
  .ent-auto .ent-kartenraster { grid-template-columns: minmax(0, 1fr); }

  /* Der dunkle Kasten trug 36 px Polster ringsum. Zusammen mit den
     20 px des Satzspiegels bleiben bei 320 px Anzeige 208 px fuer den
     Text — "Kollisionsuntersuchungen" misst bei 17 px aber 207 px und
     braucht mit Aufzaehlungspunkt und Fuge 231. Mit 20 px sind es 240. */
  .ent-schiene .ent-dunkelkasten { padding: 24px 20px; }

  /* Dieselbe Rechnung fuer die Leistungskarte: 30 px Polster liessen
     203 px fuer die Ueberschrift, "Ingenieurdienstleistungen" braucht
     bei 22 px aber 275. Mit 20 px sind es 223.
     Das reicht immer noch nicht, deshalb steht darunter der Rueckfall:

     hyphens: auto ist hier WIRKUNGSLOS. Der berechnete Wert steht auf
     "auto" (die 400er Regel weiter oben setzt ihn), gebrochen wird das
     Wort trotzdem nicht — in derselben Anzeige, in der die Kachel auf
     der Leistungsuebersicht sauber trennt. Auf die Trennung ist kein
     Verlass; das steht im Projekt schon einmal so, fuer den
     Fussbereich, und gilt hier genauso.

     overflow-wrap bricht mitten im Wort statt an der Trennstelle. Das
     ist haesslicher als eine Trennung und schlaegt sie auch, wenn
     beide gesetzt sind — aber es haelt, und bei 320 px auf einer Karte
     ist ein Umbruch besser als eine Seite, die sich schieben laesst. */
  .ent-schiene .ent-leistungskarte { padding: 28px 20px 24px; }
  .ent-leistungskarte h3,
  .ent-leistungskarte-dunkel h3 { overflow-wrap: break-word; }
}


/* ============================================================
   UEBER UNS — Entwurfslayout (Fassung 62)

   Aus dem Entwurf "Website-Animationen fuer case4de" (Claude Design).
   Er kam in eigenen Farben (Papierton #efece5, Akzent #1b3bff) und
   eigenen Schriften (Archivo, IBM Plex Mono von Google). Beides ist
   hier ersetzt: Farben durch den hellen Tokensatz, Archivo durch
   --font-display. Nur IBM Plex Mono bleibt — die liegt ohnehin selbst
   gehostet im Projekt und traegt schon die Kleinlabels der Seite.

   Anders als bei den drei Branchenentwuerfen liegt hier KEINE 3D-Szene
   dahinter. `main` traegt deshalb `hell` direkt und damit eine eigene
   Flaeche — nicht `.ent-flaeche`, die nur den Tokensatz mitbringt und
   die Szene durchscheinen laesst. Wer die beiden verwechselt, bekommt
   eine durchsichtige Seite; das ist im Automotive-Layout schon einmal
   passiert.

   Die Seite ist als einzige Unterseite oben HELL. Daran haengen zwei
   Angaben in tools/seiten-bauen.py: `nav_klasse=""` und
   `body_klasse="light-hero"`. Ohne die zweite steht helle Schrift auf
   hellem Papier.
   ============================================================ */

.ent-ueber { position: relative; }

/* ---------------------------------------------------------------- Marken
   Die kleine Nummer, die Ueberschrift und die Linie: die Zeile ueber
   jedem Block. Im Entwurf steht dort "03 — Wer wir sind"; hier traegt
   die Marke nur die Nummer, weil die Ueberschrift daneben schon genau
   das sagt. */
.ent-ueber .ent-markenzeile {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 20px);
  margin-bottom: clamp(24px, 3vw, 42px);
}
.ent-ueber .ent-no-klein {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  flex: none;
}
.ent-ueber .ent-markentitel { margin: 0; }
.ent-ueber .ent-markenlinie {
  flex: 1;
  height: 1px;
  background: var(--line);
  /* Eine Linie an der Grundlinie der Ueberschrift saehe aus, als waere
     sie durchgestrichen. Sie sitzt deshalb auf halber x-Hoehe. */
  align-self: center;
  margin-top: 2px;
}
.ent-ueber .ent-marke { color: var(--text-3); margin: 0; }

.ent-ueber .ent-abschnitt { padding-block: var(--sec-y); }

/* Fliesstext in zwei Groessen, wie im Entwurf: der erste Absatz traegt,
   der zweite ergaenzt. */
.ent-ueber .ent-gross {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  max-width: 56ch;
  text-wrap: pretty;
}
.ent-ueber .ent-weich {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.ent-ueber .ent-gross + .ent-weich { margin-top: clamp(18px, 2vw, 26px); }


/* ---------------------------------------------------------------- Balken
   Fortschritt der Seite, 2 px ueber allem. Er liegt UNTER der
   Navigation (z-index 60 gegen deren 100), sonst laege der Strich quer
   ueber dem Logo, sobald die Navigation ihren Grund bekommt. */
.ent-ueber .ent-fortschritt {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.ent-ueber .ent-fortschritt > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}


/* ---------------------------------------------------------------- Kopfband
   Technisches Papier: zwei Gitter, zwei Masslinien, ein wandernder
   Schleier. Das Kopfband der uebrigen Unterseiten ist dunkel und traegt
   ein Foto — hier ist es hell und traegt eine Zeichnung. Die Klasse
   `kopfband` bleibt trotzdem daran: die Abstaende sollen dieselben sein. */
.ent-ueber .ent-kopf {
  position: relative;
  overflow: hidden;
  /* Die 76 px sind der Platz unter der festen Navigation — dieselbe
     Rechnung wie in .kopfband. Ohne sie liefe die Ueberschrift
     dahinter. */
  padding-top: calc(76px + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(48px, 7vw, 96px);
  /* Der Verlauf von .hell beginnt am Seitenanfang; das Kopfband bekommt
     seinen eigenen, damit die Kante zum Laufband nicht mitten im
     Farbverlauf sitzt. */
  background: linear-gradient(180deg, #eef2f8 0%, #f4f7fb 100%);
  border-bottom: 1px solid var(--line);
}
/* Das Video steht als eigenes Element neben dem Text, nicht dahinter und
   nicht randlos. Damit entfaellt der Schleier: ueber dem Video steht
   keine Schrift, es gibt also nichts freizuhalten. Es behaelt sein
   eigenes Verhaeltnis (16:9) und ist ganz zu sehen, nicht angeschnitten. */
.ent-ueber .ent-kopffilm {
  margin: 0;                       /* <figure> traegt sonst eigene Raender */
  align-self: center;
}
.ent-ueber .ent-kopf-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: var(--schatten-2);
  background: var(--bg-elev);      /* solange das erste Bild fehlt */
}

.ent-ueber .ent-gitter {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  /* Die Muster zeichnen mit currentColor — so haengt die Gitterfarbe am
     Textton und nicht an einem zweiten, von Hand gepflegten Hexwert. */
  color: var(--text);
  pointer-events: none;
  will-change: transform;
}
.ent-ueber .ent-mass { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.ent-ueber .ent-mass-quer {
  stroke: var(--accent);
  animation: ent-strich 2.6s 0.25s var(--ease) forwards;
}
.ent-ueber .ent-mass-hoch {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: ent-strich 3.2s 0.5s var(--ease) forwards;
}
@keyframes ent-strich { to { stroke-dashoffset: 0; } }

/* Der wandernde Schleier. Reine Zierde; unter --accent-dim bleibt er so
   blass, dass er nichts verdeckt, was darunter steht. */
.ent-ueber .ent-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  animation: ent-scan 9s 1s linear infinite;
  pointer-events: none;
}
@keyframes ent-scan {
  0%   { transform: translateX(-12%); opacity: 0; }
  15%  { opacity: 0.55; }
  85%  { opacity: 0.55; }
  100% { transform: translateX(112%); opacity: 0; }
}

/* Fadenkreuz. Es folgt dem Zeiger und wird von js/ueber-uns.js gesetzt —
   sichtbar erst, wenn der Zeiger wirklich im Kopfband steht. Ohne das
   Skript bleibt es unsichtbar und niemand vermisst es. */
.ent-ueber .ent-faden {
  position: absolute;
  /* Der Akzentwert des hellen Satzes (#1d55b8) ausgeschrieben. Eine
     Variable traegt hier keine Deckkraft, und color-mix waere die
     einzige Stelle im Stylesheet, die es braeuchte. */
  background: rgba(29, 85, 184, 0.38);
  opacity: 0;
  transition: opacity var(--takt-2) ease;
  pointer-events: none;
}
.ent-ueber .ent-faden-x { top: 0; bottom: 0; width: 1px; transform: translateX(-100px); }
.ent-ueber .ent-faden-y { left: 0; right: 0; height: 1px; transform: translateY(-100px); }
.ent-ueber .ent-kopf.ent-faden-an .ent-faden { opacity: 1; }

.ent-ueber .kopfband-inhalt { position: relative; z-index: 2; }

/* Links Anriss und Kennzahlen, rechts das Video. Der Kopf traegt seit
   dem Wegfall der Ueberschrift nur noch diese beiden Saeulen — das
   margin-top von vorher ist hinfaellig, darueber steht nichts mehr.
   Die rechte Spalte ist die groessere: sie haelt das Video, und ein
   16:9-Bild braucht Breite, um nicht als Briefmarke zu wirken. */
.ent-ueber .ent-kopfunten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* Anriss und Kennzahlen standen bis Fassung 66 nebeneinander und
   brauchten keinen Abstand zueinander. Jetzt stehen sie in einer Spalte
   uebereinander. */
.ent-ueber .ent-kopftext .ent-fakten { margin-top: clamp(24px, 3vw, 36px); }
.ent-ueber .ent-lead {
  font-size: clamp(16.5px, 1.45vw, 20px);
  line-height: 1.58;
  max-width: 46ch;
  text-wrap: pretty;
}

/* Drei Angaben nebeneinander. Die Fugen sind die Flaeche darunter, die
   Felder liegen als Kacheln davor — dasselbe Muster wie das Raster der
   Arbeitsweise weiter unten. */
.ent-ueber .ent-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ent-ueber .ent-fakten > div {
  flex: 1 1 150px;
  background: var(--bg-elev);
  padding: 18px 20px;
}
.ent-ueber .ent-fakten dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.ent-ueber .ent-fakten dd {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
}


/* ---------------------------------------------------------------- Laufband
   Endlose Schleife aus zwei gleichen Haelften. Sie haelt an, sobald der
   Zeiger darauf steht oder etwas darin den Fokus hat.

   Formal ist eine Bewegung ueber fuenf Sekunden nach WCAG 2.2.2 eine
   Bewegung mit Anhaltemoeglichkeit — ein Knopf waere die saubere Loesung.
   Der Auftraggeber hat einen solchen Knopf am Startvideo ausdruecklich
   abgelehnt; hier steht deshalb dieselbe Abfederung wie dort: wer
   "Bewegung reduzieren" gesetzt hat, sieht ein stehendes Band. Siehe
   CLAUDE.md, der Punkt ist dort als offen vermerkt. */
.ent-ueber .ent-laufband {
  border-block: 1px solid var(--line);
  background: var(--bg-elev);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.ent-ueber .ent-laufband-spur {
  display: flex;
  width: max-content;
  animation: ent-laufband 38s linear infinite;
}
.ent-ueber .ent-laufband:hover .ent-laufband-spur,
.ent-ueber .ent-laufband:focus-within .ent-laufband-spur { animation-play-state: paused; }
/* Hover und Fokus reichen als Anhaltemoeglichkeit nicht: auf dem Telefon
   gibt es kein Hover. Die Klasse setzt der Anhalteknopf (WCAG 2.2.2). */
.ent-ueber .ent-laufband.ist-angehalten .ent-laufband-spur { animation-play-state: paused; }
.ent-ueber .ent-laufband-satz {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 13px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.ent-ueber .ent-plus { color: var(--accent); }
/* Die Spur besteht aus zwei gleichen Haelften; nach 50 % beginnt die
   zweite genau dort, wo die erste anfing. Deshalb -50 % und nicht -100 %. */
@keyframes ent-laufband { to { transform: translateX(-50%); } }


/* ---------------------------------------------------------------- Branchen
   Vier Zeilen, die sich beim Ueberfahren oeffnen.

   Im Entwurf ist das eine Ziehharmonika mit JavaScript und ohne Ziel.
   Hier ist jede Zeile ein Verweis auf die Branchenseite — das macht sie
   ohne Skript bedienbar (Hover, Fokus, Tastatur, Vorlesehilfe) und gibt
   der Seite den Weg weiter hinein, den sie sonst nicht haette.

   Solange nichts ueberfahren wird, steht die erste Zeile offen. Das ist
   die einzige Stelle, an der `:not(:hover)` am Elternteil noetig ist —
   sie ersetzt das `select(0)` des Entwurfs. */
.ent-ueber .ent-branchenliste { border-top: 1px solid var(--line); }
.ent-ueber .ent-branchenzeile {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: clamp(18px, 2.4vw, 28px) clamp(4px, 1.4vw, 20px);
  transition: background var(--takt-3) ease;
}
.ent-ueber .ent-branchenkopf {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 36px);
}
.ent-ueber .ent-branchenname {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--takt-2) ease, transform var(--takt-3) var(--ease);
}
.ent-ueber .ent-branchenlinie {
  flex: 1;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--takt-3) var(--ease);
}
.ent-ueber .ent-branchenzeile .ent-pfeil {
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--takt-2) ease, transform var(--takt-2) var(--ease);
}
/* Der Text waechst aus 0fr auf 1fr. Das ist die Variante ohne
   Zahlenwert — ein `max-height: 12em` muesste raten, wie hoch der Text
   bei der schmalsten Spalte wird, und schnappt zu frueh zu. */
.ent-ueber .ent-branchentext {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--takt-3) var(--ease), opacity var(--takt-2) ease;
}
.ent-ueber .ent-branchentext > span {
  overflow: hidden;
  display: block;
  padding-left: clamp(26px, 4.4vw, 60px);
  max-width: 62ch;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.ent-ueber .ent-branchenzeile:hover,
.ent-ueber .ent-branchenzeile:focus-visible { background: var(--bg-elev); }
.ent-ueber .ent-branchenzeile:hover .ent-branchenname,
.ent-ueber .ent-branchenzeile:focus-visible .ent-branchenname {
  color: var(--text);
  transform: translateX(10px);
}
.ent-ueber .ent-branchenzeile:hover .ent-branchenlinie,
.ent-ueber .ent-branchenzeile:focus-visible .ent-branchenlinie { transform: scaleX(1); }
.ent-ueber .ent-branchenzeile:hover .ent-pfeil,
.ent-ueber .ent-branchenzeile:focus-visible .ent-pfeil { opacity: 1; transform: none; }
.ent-ueber .ent-branchenzeile:hover .ent-branchentext,
.ent-ueber .ent-branchenzeile:focus-visible .ent-branchentext {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 16px;
}
/* Ruhezustand: die erste Zeile steht offen, damit der Block nicht als
   blosse Liste ohne Inhalt beginnt. */
.ent-ueber .ent-branchenliste:not(:hover):not(:focus-within) > :first-child .ent-branchentext {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 16px;
}
.ent-ueber .ent-branchenliste:not(:hover):not(:focus-within) > :first-child .ent-branchenname {
  color: var(--text);
}
.ent-ueber .ent-branchenliste:not(:hover):not(:focus-within) > :first-child .ent-branchenlinie {
  transform: scaleX(1);
}
/* Ohne Zeigergeraet gibt es kein Ueberfahren. Dort stehen alle vier
   Zeilen offen — sonst bekaeme ein Telefon nur vier Woerter zu sehen. */
@media (hover: none) {
  .ent-ueber .ent-branchentext { grid-template-rows: 1fr; opacity: 1; padding-top: 16px; }
  .ent-ueber .ent-branchenname { color: var(--text); }
  .ent-ueber .ent-branchenzeile .ent-pfeil { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------- Wer wir sind
   Ueberschrift links, Text rechts. Dasselbe Verhaeltnis wie
   .einleitung-titel und .aufgaben-raster, damit auf der Seite nicht drei
   verschiedene Zweispaltigkeiten nebeneinander stehen. */
.ent-ueber .ent-zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
/* Hannover im Hintergrund — der Abschnitt sagt "mit Sitz in Hannover".
   Wie beim Kopf der Karriereseite bleibt die helle Farbwelt stehen, der
   Schleier hellt also auf, statt abzudunkeln. */
.ent-ueber .ent-wer {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  border-block: 1px solid var(--line);
  /* Hoeher als der Text es braucht: nur dann bleibt ueber und unter der
     Schrift Flaeche uebrig, auf der das Motiv wirklich zu sehen ist.
     `svh` statt `vh` — auf dem Telefon zaehlt vh die Browserleiste mit. */
  min-height: 78svh;
  display: flex;
  align-items: center;
}
/* `.wrap` traegt `margin: 0 auto`. Als Flex-Element bedeutet eine
   automatische Aussenkante Inhaltsbreite statt voller Breite — dieselbe
   Falle wie im Kopfband der Karriereseite und im Automotive-Raster. */
.ent-ueber .ent-wer > .wrap { width: 100%; }
.ent-ueber .ent-wer-bild { position: absolute; inset: 0; }
.ent-ueber .ent-wer-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Nur noch ein Hauch. Den Kontrast traegt jetzt die Karte, nicht der
   Schleier — ein Schleier, der stark genug fuer Text ist, legt sich als
   milchiges Band ueber das ganze Bild und sieht nach Fehler aus statt
   nach Absicht. Diese 0,18 nehmen dem Foto nur die Buntheit, damit es
   neben dem ruhigen Rest der Seite nicht schreit. */
.ent-ueber .ent-wer-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.18);
}

/* Die Karte traegt den Text. Dasselbe Muster wie die Glaskarten der
   Schiffbauseite: ein weiches Weiss, nicht reines #fff, mit Linie und
   der ersten Schattenstufe — eine Flaeche, die fast so hell ist wie ihr
   Grund, liest sich sonst als Rahmen statt als Gegenstand.

   Gerechnet gegen den denkbar schlechtesten Fall, einen schwarzen
   Bildpunkt unter der Karte:
     Deckung 0,86  Ueberschrift 12,18   zweiter Absatz 5,41   Nummer 4,84
     Deckung 0,90  Ueberschrift 13,40   zweiter Absatz 5,95   Nummer 5,32
   Das Foto ist an keiner Stelle wirklich schwarz; 0,90 traegt also mit
   grossem Abstand. */
.ent-ueber .ent-wer-karte {
  background: rgba(250, 251, 253, 0.90);
  border: 1px solid var(--line);
  box-shadow: var(--schatten-1);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 3.6vw, 52px);
}

/* Der Inhalt steht sonst hinter dem Bild: er liegt im Textfluss, das Bild
   ist absolut gesetzt. Auf Ueber uns nimmt `.ent-ueber .reveal.is-visible`
   den transform zurueck, also gibt es auch keinen Stapelkontext, der das
   von selbst richten wuerde — dieselbe Falle wie bei den Szenenseiten. */
.ent-ueber .ent-wer > .wrap { position: relative; z-index: 1; }
.ent-ueber .ent-zweispalt .ent-markenzeile { margin-bottom: 0; }


/* ---------------------------------------------------------------- Name
   Die Aufloesung des Akronyms, Wort fuer Wort. Die Initialen tragen den
   Akzent — deshalb steht der Name hier gross und nicht mehr als
   <em>-Einschub im Fliesstext. */
.ent-ueber .ent-wortmarke {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(28px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  /* Nicht trennen. "Enterprises" quer ueber zwei Zeilen zerlegt die
     Reihe, und die Woerter sind kurz genug, dass sie umbrechen koennen. */
  hyphens: manual;
}
.ent-ueber .ent-initial { color: var(--accent); }
.ent-ueber .ent-wort-weich { color: var(--text-3); font-weight: 400; }

.ent-ueber .ent-namensraster {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.ent-ueber .ent-anspruch .ent-marke { margin-bottom: 12px; }
.ent-ueber .ent-anspruchmarke {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin-bottom: 22px;
}
/* Der Unterstrich haengt am inneren <span>, nicht am Absatz: er soll so
   breit sein wie der Schriftzug, nicht so breit wie die Spalte. */
.ent-ueber .ent-anspruchmarke > span { position: relative; display: inline-block; }
.ent-ueber .ent-unterstrich {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--takt-4) 0.3s var(--ease);
}
.ent-ueber .ent-anspruch.is-visible .ent-unterstrich { transform: scaleX(1); }


/* ---------------------------------------------------------------- Arbeitsweise
   Zwei Kaesten nebeneinander, A und B. Die Fuge zwischen ihnen ist die
   Flaeche darunter — dasselbe Muster wie im Kennzahlenfeld des Kopfbands. */
/* ------------------------------------------------- Wie wir arbeiten
   Vollflaechiges Foto, Text auf der linken Haelfte — kein Kasten. Die
   Seite traegt schon genug Kaesten; hier soll das Bild durchlaufen.

   Der Unterschied zu "Wer wir sind" weiter oben ist damit nicht mehr das
   Prinzip (dort Karte auf Bild), sondern die Aufteilung: dort sitzt der
   Text mittig auf einer eigenen Flaeche, hier steht er frei auf der
   linken Haelfte und das Motiv laeuft nach rechts offen aus.

   Weil hier wieder Schrift auf dem Bild steht, traegt der Verlauf den
   Kontrast. Die Haltepunkte sind gemessen, nicht geschaetzt — siehe das
   Profil "arbeit" in tools/kopfband-kontrast-messen.py. */
.ent-ueber .ent-arbeit {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  /* Hoeher als der Text es braucht, sonst bleibt vom Motiv nichts uebrig.
     `svh` statt `vh` — auf dem Telefon zaehlt vh die Browserleiste mit. */
  min-height: 78svh;
  display: flex;
  align-items: center;

  /* Eine dunkle Insel in einer hellen Seite. Ohne diese Zeilen erbt der
     Block --text: #101a2e aus .hell und stellt dunkle Schrift auf ein
     dunkles Bild — dieselbe Falle wie bei .bildband auf der Startseite
     und beim Kontaktband weiter unten. */
  --text:   #e9edf6;
  --text-2: #9aa5bd;
  --text-3: #76829b;
  --line:   rgba(151, 168, 205, 0.22);
  /* Nicht --accent (#4d7dff): ueber dem Foto misst die 11-px-Nummer
     damit nur 4,68:1. --accent-2 bringt sie auf 8,21:1 — dieselbe
     Ueberlegung wie beim dunklen Kasten der Schienenseite. */
  --accent: #8fb2ff;
  color: var(--text);
}
/* `.wrap` traegt `margin: 0 auto`. Als Flex-Element bedeutet eine
   automatische Aussenkante Inhaltsbreite statt voller Breite — dieselbe
   Falle wie bei .ent-wer und im Automotive-Raster.
   `position/z-index`, weil das Bild absolut liegt und der Text im Fluss:
   ohne eigene Ebene malt das Bild darueber. */
.ent-ueber .ent-arbeit > .wrap { width: 100%; position: relative; z-index: 1; }

.ent-ueber .ent-arbeit-bild { position: absolute; inset: 0; }
.ent-ueber .ent-arbeit-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Gemessen ueber team.jpg, Textzone linke 50 %, Abschnitt auf 2,05:1:
     Ueberschrift 9,57:1   Absatz 2  5,00:1   Nummer 05  8,21:1
   Rechts gibt der Verlauf auf 0,30 nach, damit das Motiv sichtbar
   bleibt — dort steht kein Text mehr. */
.ent-ueber .ent-arbeit-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
    rgba(8, 12, 21, 0.92) 0%, rgba(8, 12, 21, 0.86) 42%,
    rgba(8, 12, 21, 0.58) 64%, rgba(8, 12, 21, 0.30) 100%);
}

/* Der Text nimmt die linke Haelfte — wie das Vorbild, an dem sich der
   Abschnitt orientiert. */
.ent-ueber .ent-arbeit-text { max-width: 50%; }
.ent-ueber .ent-arbeit-text .ent-markenzeile { margin-bottom: clamp(20px, 2.4vw, 32px); }


/* ---------------------------------------------------------------- Werte
   Vier Karten mit Nummer. Beim Ueberfahren faehrt oben eine Akzentkante
   ein — dasselbe Signal wie die Linie an den Branchenzeilen. */
/* Vier Spalten, dann zwei, dann eine — ausgeschrieben statt auto-fit.
   Mit `auto-fit, minmax(250px, 1fr)` passten bei 1000 px genau drei
   Karten nebeneinander, und die vierte stand allein in der zweiten
   Zeile. Zwei mal zwei liest sich dort besser als drei plus eins. */
.ent-ueber .ent-werteraster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 1180px) {
  .ent-ueber .ent-werteraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ent-ueber .ent-werteraster { grid-template-columns: minmax(0, 1fr); }
}
.ent-ueber .ent-wertkarte {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(22px, 2.4vw, 32px);
  /* Eine Kachel, die nur aus einer Haarlinie besteht, liest sich als
     Rahmen und nicht als Gegenstand — dieselbe Feststellung wie bei den
     uebrigen Kacheln im hellen Bereich. */
  box-shadow: var(--schatten-1);
  transition: box-shadow var(--takt-2) ease, transform var(--takt-2) var(--ease);
}
.ent-ueber .ent-kartenkante {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--takt-3) var(--ease);
}
.ent-ueber .ent-wertkarte:hover { box-shadow: var(--schatten-2); transform: translateY(-2px); }
.ent-ueber .ent-wertkarte:hover .ent-kartenkante { transform: scaleX(1); }
.ent-ueber .ent-wertkarte .ent-no-klein {
  display: block;
  color: var(--text-3);
  margin-bottom: clamp(28px, 4vw, 54px);
}
.ent-ueber .ent-wertkarte h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.ent-ueber .ent-wertkarte p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}


/* ---------------------------------------------------------------- Kontaktband
   Der Entwurf schliesst dunkel. Das Band ist damit eine dunkle Insel in
   einer hellen Seite — genau wie .bildband auf der Startseite, und mit
   derselben Pflicht: die dunklen Token muessen hier noch einmal stehen.
   Ohne sie erbte das Band `--text: #101a2e` aus `.hell` und stellte
   dunklen Text auf dunklen Grund. */
.ent-ueber .kontaktband {
  --bg:        #0a0e17;
  --surface:   #111828;
  --text:      #e9edf6;
  --text-2:    #9aa5bd;
  --text-3:    #76829b;
  --accent:    #4d7dff;
  --accent-2:  #8fb2ff;
  --accent-flaeche:       #3a68ee;
  --accent-flaeche-hover: #2f5ee0;
  --line:      rgba(151, 168, 205, 0.14);
  --line-soft: rgba(151, 168, 205, 0.08);
  color: var(--text);

  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
}
/* Dasselbe Gitter wie im Kopfband, hier aber ohne SVG: zwei
   Streifenverlaeufe reichen fuer ein 44er Raster, und die Sektion kommt
   aus kontaktband() — die stellt kein Markup fuer eine Zeichnung. */
.ent-ueber .kontaktband::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(233, 237, 246, .05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(180deg, rgba(233, 237, 246, .05) 0 1px, transparent 1px 44px);
  pointer-events: none;
}
.ent-ueber .kontaktband::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 220px;
  background: linear-gradient(90deg, transparent, rgba(77, 125, 255, .18), transparent);
  animation: ent-scan 11s 2s linear infinite;
  pointer-events: none;
}
.ent-ueber .kontaktband > .wrap { position: relative; z-index: 2; }


/* ---------------------------------------------------------------- schmal */
@media (max-width: 900px) {
  .ent-ueber .ent-kopfunten,
  .ent-ueber .ent-namensraster,
  .ent-ueber .ent-zweispalt { grid-template-columns: minmax(0, 1fr); }
  /* Einspaltig steht das Video oben: es ist der Grund, warum es diesen
     Kopf gibt, und ein Anriss ueber einem Video liest sich wie eine
     Bildunterschrift, die vor dem Bild kommt. */
  .ent-ueber .ent-kopffilm { order: -1; }
  .ent-ueber .ent-kopfunten { gap: clamp(28px, 5vw, 40px); }
  /* Schmal nimmt der Text die volle Breite. Der nach rechts auslaufende
     Verlauf traegt dort nicht mehr — deshalb ein gleichmaessig dichter,
     dieselbe Loesung wie beim Kopfband und aus demselben Grund.
     Gemessen bei 375 x 633: Ueberschrift 11,81  Nummer 6,58  Absatz 2
     5,60. Mit 0,86/0,80/0,88 fiel der zweite Absatz auf 4,55 — zu knapp
     fuer eine Grenze von 4,5. */
  .ent-ueber .ent-arbeit-text { max-width: none; }
  .ent-ueber .ent-arbeit-bild::after {
    background: linear-gradient(to bottom,
      rgba(8, 12, 21, 0.90), rgba(8, 12, 21, 0.86) 45%, rgba(8, 12, 21, 0.92));
  }
  .ent-ueber .ent-zweispalt .ent-markenzeile { margin-bottom: clamp(20px, 3vw, 28px); }
}
@media (max-width: 560px) {
  /* Unter 560 px passt "Ingenieurdienstleistungen" nicht mehr, und die
     Wortmarke laeuft sonst ueber den Rand. Dort darf getrennt werden —
     dieselbe Ausnahme wie in den Ueberschriften des Designsystems. */
  .ent-ueber .ent-wortmarke { hyphens: auto; font-size: clamp(24px, 8vw, 34px); }
  .ent-ueber .ent-branchenkopf { gap: 12px; }
  .ent-ueber .ent-fakten > div { flex: 1 1 100%; }
}

/* Bewegung reduzieren: das globale `* { animation: none }` des
   Stylesheets trifft die Aufsteiger und das Laufband schon. Was es NICHT
   trifft, sind die Uebergaenge — und den Unterstrich, der ohne die
   Klasse `is-visible` auf scaleX(0) stehen bliebe. Ohne diese Regel
   waere er dauerhaft weg. */
@media (prefers-reduced-motion: reduce) {
  .ent-ueber .ent-unterstrich { transform: scaleX(1); transition: none; }
  .ent-ueber .ent-mass { stroke-dashoffset: 0; }
}
/* Screenshot-Modus: die Aufsteiger duerfen nicht mitten in der Animation
   erwischt werden, sonst steht die Ueberschrift im Bild halb hinter
   ihrer Maske. */
html.shot .ent-ueber .ent-unterstrich { transform: scaleX(1); }
html.shot .ent-ueber .ent-mass { stroke-dashoffset: 0; animation: none; }

/* ============================================================
   DIE DREI LEISTUNGSLAYOUTS (Fassung 99)

   Bis Fassung 98 liefen alle vier Leistungsseiten im selben Raster.
   Hintereinander gelesen waren das vier Ausfertigungen einer Seite —
   dieselbe Feststellung, die in Fassung 53 schon die Branchenseiten
   auseinandergefuehrt hat.

   Jetzt traegt jede Leistung einen eigenen Aufbau, und die Aufbauten
   sind nicht nur anders gefaerbt, sondern anders GEBAUT:

     .lst-zeilen    Beratung — nummerierte Zeilen ueber die volle Breite,
                    nur Haarlinien, keine Flaechen. Der Aufbau eines
                    Fachartikels.
     .lst-module    Schulungen — versetzte Karten mit Modulmarke, dazu
                    eine dunkle Insel fuer die Inhalte. Der einzige harte
                    Kontrastwechsel unter den vier Seiten.
     .lst-wechsel   Arbeitnehmerueberlassung — Abschnitte ueber die volle
                    Breite im Wechsel hell/getoent und links/rechts, dazu
                    ein nummerierter Ablauf.

   Die Ingenieurdienstleistung behaelt den Standardaufbau. Sie faellt
   ohnehin aus der Reihe, weil hinter ihr die 3D-Baugruppe laeuft.

   Gemeinsam bleibt allen vieren das Kopfband. Es ist das, woran der
   Besucher die Seitenfamilie wiedererkennt — verschieden sind die Seiten
   darunter, nicht darin.
   ============================================================ */

/* Die Ziffer. Sie kommt in zwei der drei Aufbauten vor und steht deshalb
   hier einmal, nicht dreimal. Tabellenziffern, damit 01 und 04 gleich
   breit sind und die Spalte nicht zittert. */
.lst-nr {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* ------------------------------------------------------------
   Beratung — .lst-zeilen
   ------------------------------------------------------------ */

/* Die beiden Einleitungsabsaetze stehen hier NICHT gleich gross
   nebeneinander wie sonst im Projekt, sondern als Vorspann mit
   Randbemerkung. Sonst faengt die Seite zweimal gleich laut an. */
.lst-zeilen .lst-vorspann {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 40px);
}
.lst-vorspann-gross {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: pretty;
}
.lst-vorspann-klein {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.66;
}

.lst-zeilenliste {
  list-style: none;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.lst-zeile {
  display: grid;
  grid-template-columns: minmax(0, 4ch) minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 44px);
  align-items: start;
  padding-block: clamp(26px, 3.2vw, 44px);
  border-bottom: 1px solid var(--line);
}
.lst-zeile .lst-nr { padding-top: 7px; }
.lst-zeile h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--text);
}
.lst-zeile p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.66;
  max-width: 58ch;
}

/* Drei Spalten statt der zwei des Standardaufbaus: sechs Aufgaben
   ergeben damit zwei ruhige Reihen statt drei. */
.lst-spaltenliste {
  list-style: none;
  margin: clamp(26px, 3.4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--line);
}
.lst-spaltenliste li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
}

/* ------------------------------------------------------------
   Schulungen — .lst-module
   ------------------------------------------------------------ */
.lst-modulraster {
  margin-top: clamp(34px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
}
/* Module stehen zeilenweise 2 × 2 auf gleicher Hoehe. */
.lst-modulraster { align-items: stretch; }

.lst-modul {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  /* Auch im Ruhezustand eine Erhebung. Eine Karte, die nur aus einer
     Haarlinie besteht, liest sich als Rahmen, nicht als Gegenstand —
     dieselbe Feststellung wie bei den Kacheln im hellen Bereich. */
  box-shadow: var(--schatten-1);
  padding: clamp(24px, 2.6vw, 36px);
  transition: box-shadow var(--takt-2) var(--ease);
}
.lst-modul::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
}
.lst-modulmarke {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.lst-modul h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(18px, 1.75vw, 24px);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--text);
}
.lst-modul p {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.62;
}

/* Dunkle Insel in einer hellen Seite — dieselbe Lage wie .bildband auf
   der Startseite. Die dunklen Token muessen hier noch einmal stehen:
   ohne sie erbt der Block --text: #101a2e aus .hell und stellt dunklen
   Text auf dunklen Grund. Genau das ist beim Einbau von .bildband schon
   einmal passiert. */
.lst-insel {
  --bg:        #0a0e17;
  --text:      #e9edf6;
  --text-2:    #9aa5bd;
  --text-3:    #76829b;
  --accent:    #4d7dff;
  --accent-2:  #8fb2ff;
  --line:      rgba(151, 168, 205, 0.14);
  --line-soft: rgba(151, 168, 205, 0.08);
  color: var(--text);
  background: #0a0e17;
  padding-block: var(--sec-y);
}
.lst-inselliste {
  list-style: none;
  margin: clamp(26px, 3.4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--line);
}
.lst-inselliste li {
  position: relative;
  padding: 17px 0 17px 30px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
}
.lst-inselliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 27px;
  width: 16px;
  height: 1px;
  background: var(--accent-2);
}

/* ------------------------------------------------------------
   Arbeitnehmerueberlassung — .lst-wechsel
   ------------------------------------------------------------ */
.lst-wechselband { padding-top: var(--sec-y); }
.lst-wechselband > .wrap { margin-bottom: clamp(30px, 4vw, 52px); }

.lst-halb { padding-block: clamp(34px, 4.4vw, 60px); }
.lst-halb-getoent { background: var(--bg-elev); }

/* `.wrap` traegt `margin: 0 auto`. Das ist hier ungefaehrlich, weil
   `.lst-halb` ein gewoehnlicher Block ist und `.wrap` selbst der
   Rasterbehaelter — nicht, wie im Automotive-Layout, ein Rasterelement.
   Dort bedeutete die automatische Aussenkante Inhaltsbreite statt voller
   Breite und hat den Textblock in die Mitte gezogen. */
.lst-halb-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3.4vw, 56px);
  align-items: start;
}
/* Der Wechsel: bei jedem zweiten Abschnitt tauschen Ueberschrift und
   Text die Seite — und mit ihnen die Spaltenbreiten, damit der Text
   immer in der breiten Spalte steht. */
.lst-halb-gedreht .lst-halb-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lst-halb-gedreht .lst-halb-text { order: 1; }
.lst-halb-gedreht .lst-halb-kopf { order: 2; }

.lst-halb-kopf { display: flex; flex-direction: column; gap: 10px; }
.lst-halb-kopf h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(21px, 2.4vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--text);
}
.lst-halb-text p {
  color: var(--text-2);
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.68;
  max-width: 62ch;
}

/* Die Aufgaben dieser Leistung SIND eine Reihenfolge — Profil aufnehmen,
   vorauswaehlen, ueberlassen, vermitteln, planen, betreuen. Deshalb hier
   ein nummerierter Ablauf und nicht, wie bei den anderen drei, eine
   Liste. Bei denen waere die Nummerierung eine Behauptung ueber eine
   Ordnung, die es dort nicht gibt. */
.lst-schritte {
  list-style: none;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}
.lst-schritte li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.lst-schrittnr {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}
.lst-schritttext {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
  padding-top: 4px;
}

/* ------------------------------------------------------------
   Querverweise als Zeilen (Beratung, Arbeitnehmerueberlassung)
   ------------------------------------------------------------ */
.lst-querliste {
  margin-top: clamp(26px, 3.4vw, 44px);
  border-top: 1px solid var(--line);
}
.lst-querzeile {
  display: grid;
  grid-template-columns: minmax(0, 5ch) minmax(0, 1fr) minmax(0, auto);
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  padding-block: clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.lst-quername {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(19px, 2vw, 27px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  transition: color var(--takt-2) var(--ease);
}
.lst-querpfeil {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  transition: transform var(--takt-2) var(--ease);
}
.lst-querzeile:hover .lst-quername,
.lst-querzeile:focus-visible .lst-quername { color: var(--accent); }
.lst-querzeile:hover .lst-querpfeil,
.lst-querzeile:focus-visible .lst-querpfeil { transform: translateX(6px); }

/* ------------------------------------------------------------
   Schmalere Anzeigen
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .lst-zeilen .lst-vorspann { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* Zwei Spalten statt drei: die Ziffer bleibt links, Ueberschrift und
     Text ruecken untereinander in die zweite. Ohne die ausdrueckliche
     Zuweisung landet der Absatz in der Ziffernspalte. */
  .lst-zeile { grid-template-columns: minmax(0, 4ch) minmax(0, 1fr); gap: 10px 18px; }
  .lst-zeile h3 { grid-column: 2; }
  .lst-zeile p { grid-column: 2; max-width: none; }

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

  .lst-modulraster { grid-template-columns: minmax(0, 1fr); }
  .lst-modulraster > :nth-child(even) { margin-top: 0; }
  .lst-inselliste { grid-template-columns: minmax(0, 1fr); }

  .lst-halb-raster,
  .lst-halb-gedreht .lst-halb-raster { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lst-halb-gedreht .lst-halb-text,
  .lst-halb-gedreht .lst-halb-kopf { order: 0; }

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

@media (max-width: 560px) {
  .lst-spaltenliste,
  .lst-schritte { grid-template-columns: minmax(0, 1fr); }
  .lst-querzeile { grid-template-columns: minmax(0, 4ch) minmax(0, 1fr) minmax(0, auto); gap: 12px; }
}

/* Der Sprachhinweis am Fuss der Fehlerseite. Eigene Regel, weil die
   Fehlerseite sonst nichts Eigenes hat — sie leiht sich die
   Verweiszeilen der Leistungslayouts. */
.lst-404-andere { margin-top: clamp(26px, 3vw, 40px); font-size: 15.5px; }
.lst-404-andere a { color: var(--text-2); }
.lst-404-andere a:hover { color: var(--accent); }


/* ============================================================
   Karriere — Neugestaltung
   Kopf zweispaltig: das Bild steht frei und ohne Schleier daneben,
   statt hinter einem fast deckenden Verlauf zu verschwinden.
   ============================================================ */
.kr-kopf {
  background: var(--bg);
  padding: calc(var(--sec-y) + 56px) 0 clamp(48px, 6vw, 88px);
}
.kr-kopf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.kr-kopf-text .h-statement {
  margin-top: 14px;
  font-size: clamp(34px, 3.6vw, 60px);
  overflow-wrap: normal;
  hyphens: manual;
}
.kr-kopf-anriss {
  margin-top: 24px;
  max-width: 48ch;
  color: var(--text-2);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  text-wrap: pretty;
}
.kr-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.kr-kopf-bild {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--schatten-3);
  background: var(--bg-elev);
}
.kr-kopf-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kr-kopf-text .h-statement { overflow-wrap: normal; hyphens: manual; font-size: clamp(34px, 3.6vw, 60px); }
@media (max-width: 1100px) {
  .kr-kopf-text .h-statement { font-size: clamp(30px, 7vw, 60px); }
  .kr-kopf { padding-top: calc(var(--sec-y) + 32px); }
  .kr-kopf-raster { grid-template-columns: minmax(0, 1fr); }
  .kr-kopf-bild { aspect-ratio: 16 / 10; }
}

.karriere-abschnitt > .eyebrow + .h-section { margin-top: 10px; }

.kr-werte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.kr-wert {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--schatten-1);
  transition: border-color var(--takt-2) var(--ease), transform var(--takt-2) var(--ease);
}
.kr-wert:hover { border-color: var(--accent); transform: translateY(-3px); }
.kr-nr {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.kr-wert h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.25;
  color: var(--text);
}
.kr-wert p { color: var(--text-2); line-height: 1.65; text-wrap: pretty; }
@media (max-width: 700px) { .kr-werte { grid-template-columns: minmax(0, 1fr); } }

/* Stellen als Karten */
.karriere-koerper .stellen { border-top: none; display: flex; flex-direction: column; gap: 14px; }
.karriere-koerper .stelle {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 0 clamp(20px, 2.6vw, 32px);
  overflow: hidden;
  transition: border-color var(--takt-2) var(--ease);
}
.karriere-koerper .stelle:hover,
.karriere-koerper .stelle[open] { border-color: var(--accent); }
.karriere-koerper .stelle::before { display: none; }
.karriere-koerper .stelle:hover .stelle-kopf { padding-left: 0; }
.karriere-koerper .stelle-kopf { padding-right: 44px; }
.karriere-koerper .stelle-meta span { border-radius: 999px; }

/* Initiativbewerbung als abgesetzte Fläche */
.kr-initiativ {
  padding: clamp(28px, 4vw, 56px);
  border-radius: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.kr-initiativ > .eyebrow + .h-section { margin-top: 10px; margin-bottom: 0; }


/* ================================================================
   Arbeitnehmerueberlassung — eigene Gliederung (aue-*)
   Karten 2 pro Reihe, Ablauf als Zeitleiste, Branchen als Bildkacheln.
   ================================================================ */
.aue .section + .section { border-top: none; }
.aue-intro { padding-bottom: clamp(48px, 6vw, 80px); }
.aue-intro-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.aue-lead {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.aue-intro-text p { color: var(--text-2); line-height: 1.7; text-wrap: pretty; }
.aue-intro-text p + p { margin-top: 1.1em; }
.aue-versprechen {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.aue-versprechen li {
  display: flex; align-items: center; gap: 14px;
  padding: 22px clamp(12px, 2vw, 28px) 22px 0;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(15px, 1.25vw, 18px);
  color: var(--text);
}
.aue-versprechen li + li { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.aue-haken {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-dim); position: relative;
}
.aue-haken::after {
  content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.aue-leistungen { background: var(--bg-elev); }
.aue-leistungen .h-section, .aue-ablauf .h-section, .aue-branchen-sektion .h-section { margin-top: 10px; }
.aue-karten {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.aue-karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--schatten-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.aue-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-3); border-color: rgba(29, 85, 184, .28); }
.aue-nr {
  display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  color: var(--accent); padding: 6px 10px; border-radius: 999px; background: var(--accent-dim);
}
.aue-karte h3 {
  margin-top: 22px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2vw, 27px); color: var(--text); letter-spacing: -0.01em;
}
.aue-karte p { margin-top: 12px; color: var(--text-2); line-height: 1.65; text-wrap: pretty; }
.aue-rechtsliste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.aue-rechtsliste li {
  position: relative; padding-left: 22px; color: var(--text-2); font-size: 15.5px; line-height: 1.5;
}
.aue-rechtsliste li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}

.aue-schritte {
  list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px);
  position: relative;
}
.aue-schritte::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(29, 85, 184, .15));
}
.aue-schritt { position: relative; display: flex; flex-direction: column; gap: 16px; }
.aue-punkt {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent);
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  box-shadow: 0 0 0 6px var(--bg);
  position: relative; z-index: 1;
}
.aue-schritttext { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--text); text-wrap: pretty; }

.aue-branchen-sektion { background: var(--bg-elev); }
.aue-branchen {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px);
}
.aue-branche {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #101a2e; text-decoration: none; isolation: isolate;
}
.aue-branche img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.aue-branche::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 14, 23, .82) 0%, rgba(10, 14, 23, .2) 55%, rgba(10, 14, 23, 0) 100%);
}
.aue-branche:hover img { transform: scale(1.05); }
.aue-branche .bildquelle { z-index: 3; }
.aue-branche-name {
  position: absolute; left: clamp(20px, 2.4vw, 32px); bottom: clamp(18px, 2.2vw, 28px); z-index: 2;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 2.2vw, 30px); color: #fff;
  display: flex; align-items: center; gap: 12px;
}
.aue-branche-name span { transition: transform .4s var(--ease); }
.aue-branche:hover .aue-branche-name span { transform: translateX(6px); }
.aue-branche:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1000px) {
  .aue-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .aue-schritte::before { display: none; }
}
@media (max-width: 860px) {
  .aue-intro-raster { grid-template-columns: minmax(0, 1fr); }
  .aue-versprechen { grid-template-columns: minmax(0, 1fr); }
  .aue-versprechen li + li { padding-left: 0; border-left: none; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .aue-karten, .aue-branchen { grid-template-columns: minmax(0, 1fr); }
  .aue-schritte { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .aue-schritt { flex-direction: row; align-items: center; padding-bottom: 20px; }
  .aue-schritt:not(:last-child)::after {
    content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: rgba(29, 85, 184, .25);
  }
}


/* ---------- Ablauf: dunkel mit Bild im Hintergrund, scrollgesteuert ---------- */
.aue-ablauf {
  --text: #e9edf6; --text-2: #aab4c9; --line: rgba(151,168,205,.2);
  --accent: #8fb2ff; --accent-dim: rgba(143,178,255,.14); --surface: #0d1220; --bg: #0a0e17;
  background: #0a0e17; color: var(--text); overflow: hidden; isolation: isolate;
  padding-top: clamp(56px, 6vw, 88px);
}
.aue-ablauf-bild { position: absolute; inset: 0; z-index: -1; }
.aue-ablauf-bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); will-change: transform; opacity: .55; }
.aue-ablauf-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,23,.92) 0%, rgba(10,14,23,.72) 45%, rgba(10,14,23,.9) 100%);
}
.aue-ablauf .bildquelle { position: absolute; right: 16px; bottom: 16px; z-index: 3; }
.aue-ablauf .eyebrow { color: #8fb2ff; }
.aue-ablauf .h-section { color: #fff; }
.aue-ablauf .aue-schritte::before { background: rgba(143,178,255,.2); }
.aue-ablauf .aue-schritte::after {
  content: ""; position: absolute; left: 22px; top: 22px; height: 2px;
  width: calc((100% - 44px) * var(--f, 0));
  background: linear-gradient(90deg, #4d7dff, #8fb2ff);
  box-shadow: 0 0 14px rgba(143,178,255,.6);
}
.aue-ablauf .aue-punkt { background: #0d1220; border-color: rgba(143,178,255,.35); color: #76829b; box-shadow: 0 0 0 6px rgba(10,14,23,.9); transition: all .5s var(--ease); }
.aue-ablauf .aue-schritttext { color: #9aa5bd; transition: color .5s var(--ease), transform .5s var(--ease); }
.aue-ablauf .ist-aktiv .aue-punkt { background: #4d7dff; border-color: #8fb2ff; color: #fff; box-shadow: 0 0 0 6px rgba(10,14,23,.9), 0 0 24px rgba(77,125,255,.7); transform: scale(1.08); }
.aue-ablauf .ist-aktiv .aue-schritttext { color: #fff; }
.aue-ablauf:not(.aue-dyn) .aue-punkt { background: #4d7dff; color: #fff; }
.aue-ablauf:not(.aue-dyn) .aue-schritttext { color: #fff; }
@media (max-width: 1000px) { .aue-ablauf .aue-schritte::after { display: none; } }
@media (max-width: 700px) {
  .aue-ablauf .aue-schritt:not(:last-child)::after { background: rgba(143,178,255,.25); }
  .aue-ablauf .ist-aktiv:not(:last-child)::after { background: #8fb2ff; }
}


/* Hintergrundbilder gegen die globale Kennzeichnungsregel (main :is(...):has(> img))
   absichern — die ist spezifischer und setzte position: relative. */
main .kopfband > .kopfband-bild,
main .aue-ablauf > .aue-ablauf-bild { position: absolute !important; inset: 0 !important; }


/* Branchenkacheln der Startseite: auf dem Handy 2 x 2 statt 4 nebeneinander,
   sonst werden die Kacheln 69 px schmal und die Beschriftung laeuft ueber. */
@media (max-width: 700px) {
  .kachel4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  .kachel4 figcaption { margin-top: 10px !important; gap: 8px !important; }
  .kachel4 figcaption span:last-child { font-size: 14px !important; line-height: 1.3; overflow-wrap: anywhere; }
}

/* KI-Hinweis dezenter */
main :is(figure, span, div, a):has(> img:not([src*="logo"]):not([src*="favicon"]):not([src*="apple-touch"])):not(:has(.bildquelle))::before,
.bildquelle { font-size: 7.5px !important; padding: 2px 6px !important; letter-spacing: 0.06em !important; right: 6px !important; bottom: 6px !important; }
@media (max-width: 700px) {
  main :is(figure, span, div, a):has(> img:not([src*="logo"]):not([src*="favicon"]):not([src*="apple-touch"])):not(:has(.bildquelle))::before,
  .bildquelle { font-size: 6.5px !important; padding: 2px 5px !important; right: 5px !important; bottom: 5px !important; }
}