/* ==========================================================================
   BPR, Entwurf 2: Gestaltung nach Precept (verbindliche UI, BRIEF.md)

   Alle Werte aus tokens.css. Abschnitte in Seitenreihenfolge, danach die
   Strichzeichnungen, dann Mobil und reduzierte Bewegung.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 var(--t-16)/1.4 var(--font); letter-spacing: -.04em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
.br-einleitung { font-size: 18px; line-height: 1.5; color: var(--text-leise); }
.br-einleitung { margin-top: 24px; }
.kf-schaufenster { display: grid; grid-template-columns: 1.35fr 1fr; margin-top: 48px; overflow: hidden; border-radius: var(--r-gross); background: var(--flaeche); }
.kf-schaufenster-bild { overflow: hidden; }
.kf-schaufenster-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--kurve); }
.kf-schaufenster-bild:hover img { transform: scale(1.03); }
.kf-schaufenster-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; padding: clamp(28px, 4vw, 64px); }
.kf-schaufenster-text p { font-size: 18px; line-height: 1.5; color: var(--text-leise); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; }
p { text-wrap: pretty; }
::selection { background: var(--primary); color: #000; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only-titel { position: absolute !important; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.sprung {
  position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px;
  background: #000; color: #fff; font-size: 14px; transform: translateY(-160%); transition: transform .3s var(--kurve);
}
.sprung:focus { transform: none; }
.mono { font-family: var(--font-mono); font-size: var(--t-mono); line-height: 1.5; letter-spacing: 0; text-transform: uppercase; }

/* Textlinks: Strich waechst wie die Fusslinks der Vorlage (hover-10) */
.strich {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  padding-bottom: 2px; transition: background-size .4s var(--kurve), color .4s var(--kurve);
}
.strich:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* --- Titel, gemessene Stufen ------------------------------------------- */
.titel-64 { font-size: var(--t-64); line-height: 1; letter-spacing: -.06em; color: var(--text); }
.titel-48 { font-size: var(--t-48); line-height: 1.15; letter-spacing: -.04em; }
.titel-32 { font-size: var(--t-32); line-height: 1.2; letter-spacing: -.04em; }
.titel-24 { font-size: var(--t-24); line-height: 1.3; letter-spacing: -.03em; }

/* --- Knoepfe: Pille, 14/500, beim Ueberfahren 1,06 (hover-00) ----------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px 0 26px;
  border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap;
  transition: transform .3s var(--kurve), background-color .3s var(--kurve), color .3s var(--kurve);
}
.knopf:hover { transform: scale(1.06); }
.knopf:active { transform: scale(.98); }
.pfeil { flex: none; transition: transform .3s var(--kurve); }
.pfeil--raus { --pfeil-y: -2px; }
.pfeil--links { --pfeil-x: -3px; }
@media (prefers-reduced-motion: no-preference) {
  :is(a, button):not(:disabled):is(:hover, :focus-visible) .pfeil {
    transform: translate(var(--pfeil-x, 3px), var(--pfeil-y, 0));
  }
}
.knopf .pfeil { width: 16px; height: 16px; }
.knopf--dunkel { background: var(--knopf); color: #fff; }
.knopf--dunkel:is(:hover, :focus-visible) { background: #292929; }
.knopf--grau { background: #dedede; color: var(--knopf); }
.knopf--grau:is(:hover, :focus-visible) { background: #ccc; }
.knopf--weiss { background: #fff; color: #161616; }
.knopf--weiss:is(:hover, :focus-visible) { background: #e9e9e9; }
.knopf--orange { background: var(--primary); color: #000; }
.knopf--orange:is(:hover, :focus-visible) { background: #ffb142; }
.knopf--orange:active { background: var(--primary-druck); }
.knopf--linie { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .42); }
.knopf--linie:is(:hover, :focus-visible) { background-color: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px #fff; }

.rund, .eckig { display: grid; place-items: center; transition: transform .3s var(--kurve), background-color .3s var(--kurve); }
.rund { width: 64px; height: 64px; border-radius: 50%; background: #000; color: #fff; }
.eckig { width: 44px; height: 44px; border-radius: var(--r); background: #efefef; color: #111; }
.rund svg, .eckig svg { width: 18px; height: 18px; }
.rund:hover, .eckig:hover { transform: scale(1.06); }
.rund:not(:disabled):is(:hover, :focus-visible) { background-color: #222; }
.eckig:not(:disabled):is(:hover, :focus-visible) { background-color: #ddd; }
.eckig:disabled, .rund:disabled { opacity: .35; cursor: default; transform: none; }

.chip { display: inline-block; padding: 3px 10px; border-radius: 4px; background: #ececec; color: var(--text); }

.liste { display: grid; gap: 10px; margin-top: 20px; }
.liste li { position: relative; padding-left: 20px; }
.liste li::before { content: ""; position: absolute; left: 0; top: .66em; width: 8px; height: 1px; background: currentColor; opacity: .55; }

/* ======================================================================== Kopf
   Leiste statt Kasten (Auftrag Adrian). */
/* Dauerhaft transparentes Glas, expliziter Auftrag 04.11.2026.
   Filter auf dem Pseudo-Element, damit das mobile Vollbildmenue am Viewport bleibt. */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; isolation: isolate; height: var(--kopf-h); color: #fff;
  --kopf-glas: rgb(16 16 16 / .62); background-color: var(--kopf-glas); border-bottom: 1px solid rgb(255 255 255 / .16);
  transition: color .2s linear, background-color .2s linear, border-color .2s linear; }
.kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; contain: paint; transform: translateZ(0);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.kopf[data-ton="hell"] { color: #111; --kopf-glas: rgb(255 255 255 / .65); border-bottom-color: rgb(0 0 0 / .08); }
.kopf-innen { position: relative; z-index: 2; display: flex; align-items: center; gap: 28px; height: 100%; padding: 0 var(--rand); }
.kopf-logo { position: relative; display: block; flex: none; padding: 4px 0; transition: opacity .3s var(--kurve); }
.kopf-logo:hover { opacity: .78; }
.kopf-logo img { height: 40px; width: auto; transition: opacity .12s linear; }
.kopf-logo-dunkel { position: absolute; left: 0; top: 4px; opacity: 0; }
.kopf[data-ton="hell"] .kopf-logo-hell { opacity: 0; }
.kopf[data-ton="hell"] .kopf-logo-dunkel { opacity: 1; }
.kopf-nav { margin-left: auto; }
.kopf-nav ul { display: flex; align-items: center; gap: 26px; }
.kopf-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; font-size: 14px; font-weight: 500;
  letter-spacing: -.02em; background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 4px) / 0 1px;
  transition: background-size .4s var(--kurve), opacity .3s;
}
.kopf-link:hover, .kopf-link[data-hier] { background-size: 100% 1px; }
.kopf-shop .knopf, .kopf-cta { height: 40px; padding: 0 16px 0 20px; }
.kopf-shop .knopf { gap: 6px; padding-inline: 14px; }
.menue-knopf { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.menue-raster { display: grid; grid-template-columns: repeat(3, 3px); gap: 3px; padding: 9px; border-radius: 6px; background: rgb(255 255 255 / .12); }
.kopf[data-ton="hell"] .menue-raster { background: rgb(0 0 0 / .07); }
.menue-raster i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.mobilnav {
  position: fixed; inset: var(--kopf-h) 0 0 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px var(--rand) 40px; background: #0e0e0e; color: #fff;
}
.mobilnav[hidden] { display: none; }
.mobilnav ul { display: grid; }
.mobilnav li a { display: flex; align-items: center; gap: 8px; padding: 14px 0; font-size: 32px; letter-spacing: -.04em; border-bottom: 1px solid rgb(255 255 255 / .1); }
.mobilnav-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.mobilnav-tel { font-size: 18px; }

/* ======================================================================== Held */
.held {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 64px;
  min-height: max(100svh, 900px); padding: calc(var(--kopf-h) + clamp(48px, 6vh, 96px)) var(--rand) 48px;
  color: #fff; background: #0e0e0e; overflow: hidden;
}
.held-medium { position: absolute; inset: 0; }
.held-video { width: 100%; height: 100%; object-fit: cover; }
/* Verlauf unter dem Text als eigenes Element (B4), nicht als Pseudo-Element,
   damit er ueberall mitgerechnet wird, wo der Kontrast gemessen wird. */
.held-schatten {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(8 8 8 / .66) 0%, rgb(8 8 8 / .34) 48%, rgb(8 8 8 / .5) 100%),
              linear-gradient(0deg, rgb(8 8 8 / .6) 0%, rgb(8 8 8 / 0) 38%);
}
/* Punktraster wie ueber dem Video der Vorlage */
.held-raster, .ab-raster {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / .11) .8px, transparent 1.2px); background-size: 14px 14px;
}
.held-text { position: relative; z-index: 2; max-width: 1140px; }
.held-titel { font-size: clamp(60px, 6.7vw, 104px); line-height: .98; letter-spacing: -.045em; font-weight: 500; }
.held-lead { margin-top: 30px; max-width: 30em; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.25; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.held-unten { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.held-belege { display: grid; grid-template-columns: repeat(2, auto); gap: clamp(28px, 4vw, 72px); }
.held-beleg { display: flex; flex-direction: column-reverse; gap: 8px; }
.held-beleg dd { font-size: clamp(32px, 3vw, 44px); line-height: 1.1; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.held-beleg dt { font-size: 16px; line-height: 1.4; color: rgb(255 255 255 / .8); letter-spacing: -.01em; }
.held-logo { width: clamp(180px, 18vw, 260px); height: auto; flex: 0 0 auto; }

/* ======================================================================== Abschnitte */
.sek { position: relative; }
.sek--feld { padding: 56px 0 48px; }
.sek--karte { padding: 0 var(--rand-karte); }
.sek--halle { padding: clamp(48px, 7vw, 96px) var(--rand-karte) var(--rand-karte); }
.sek--branchen { padding: var(--rand-karte); }
.sek--schweissen { padding: clamp(48px, 6vw, 88px) var(--rand-karte); }
.swf { --raster-x: 32px; --raster-y: 32px; padding: 64px clamp(40px, 5vw, 72px) 56px; }
.swf-innen { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; }
.swf-text { display: grid; justify-items: start; gap: 24px; }
.swf-text > p { max-width: 48ch; font-size: 18px; line-height: 1.5; color: var(--text-leise); }
.swf-skizze svg { width: 100%; max-height: 290px; }
.swf-skizze figcaption { margin-top: 12px; text-align: center; color: var(--text-leise); font-size: 14px; }
.swf-verfahren { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--linie); }
.swf-verfahren p { margin-top: 12px; max-width: 54ch; font-size: 17px; line-height: 1.5; color: var(--text-leise); }
.sek--standort { padding: 0 var(--rand-karte) var(--luft); }
.sek--kernform { padding: 0 var(--rand-karte) var(--luft); }
.sek--karriere { padding: 0 var(--rand-karte) 48px; }
:is(.sek--karriere, .feld--karriere) { scroll-margin-top: calc(var(--kopf-h) + 12px); }
.sek--kontakt { padding: 64px var(--rand-karte) var(--rand-karte); }

/* --- Rasterfeld mit Knoten (Vorlage About, Abschluss) ------------------- */
.feld { position: relative; margin-inline: var(--feld-rand); }
.feld::before { content: ""; position: absolute; inset: -48px 0; border-inline: 1px solid var(--linie); pointer-events: none; }
.feld::after { content: ""; position: absolute; inset: 0 calc(-1 * var(--feld-rand)); border-block: 1px solid var(--linie); pointer-events: none; }
.feld-knoten {
  position: absolute; z-index: 1; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--knoten); transform: translate(-50%, -50%);
}
.feld--grau { margin: 0; border-radius: var(--r-gross); background: var(--flaeche); overflow: hidden; }
.feld.feld--grau::before { inset: 0 var(--raster-x); }
.feld.feld--grau::after { inset: var(--raster-y) 0; }
.feld--grau .feld-knoten {
  left: calc(var(--raster-x) + var(--x) * (100% - 2 * var(--raster-x)));
  top: calc(var(--raster-y) + var(--y) * (100% - 2 * var(--raster-y)));
}
.feld-innen {
  display: grid; grid-template-columns: 23.4% 26.5% 9.5% 26.5%; gap: 28px 0;
  padding: 120px 46px 112px; align-items: start;
}
.feld-innen > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.feld-innen > :nth-child(2) { grid-column: 2; grid-row: 1; }
.feld-innen > :nth-child(3) { grid-column: 4; grid-row: 1; }
.feld-spalte p { margin-top: 12px; color: var(--text); }
.feld-klein { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; color: var(--tinte); }
.feld-innen > .feld-knopf { grid-column: 2; grid-row: 2; }

/* ======================================================================== Leistungen
   Dunkle Medienkarte, Radius 8, Folien wechseln selbst, Balken fuellen sich
   (Vorlage schritt-01). Orange fuellt den laufenden Balken. */
.ls {
  position: relative; aspect-ratio: 2 / 1; min-height: 600px; max-height: calc(100svh - 16px); width: 100%;
  border-radius: var(--r); overflow: hidden; background: #121212; color: #fff;
}
.ls-folien { position: absolute; inset: 0; }
.ls-folie { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .758s var(--kurve-p3), visibility 0s linear .758s; }
.ls-folie.is-aktiv { visibility: visible; opacity: 1; transition: opacity .758s var(--kurve-p3), visibility 0s; }
.ls-medium { position: absolute; inset: 0; overflow: hidden; }
.ls-medium picture, .ls-bild { width: 100%; height: 100%; }
.ls-bild { object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--kurve-p3); }
.ls-folie.is-aktiv .ls-bild { transform: scale(1); }
.ls-medium::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(10 10 10 / .84) 0%, rgb(10 10 10 / .62) 38%, rgb(10 10 10 / .08) 72%),
              linear-gradient(0deg, rgb(10 10 10 / .7) 0%, rgb(10 10 10 / 0) 34%);
}
.ls-inhalt { position: absolute; left: var(--karte-innen); top: 50%; max-width: 520px; transform: translateY(-58%); }
.ls-inhalt > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--kurve-p3), transform 1.085s var(--kurve-p3), background-color .3s var(--kurve);
}
.ls-folie.is-aktiv .ls-inhalt > * { opacity: 1; transform: none; }
.ls-folie.is-aktiv .ls-inhalt > :nth-child(2) { transition-delay: .08s; }
.ls-folie.is-aktiv .ls-inhalt > :nth-child(3) { transition-delay: .16s, .16s, 0s; }
.ls-inhalt p { margin: 22px 0 34px; font-size: clamp(18px, 1.4vw, 20px); font-weight: 500; color: rgb(255 255 255 / .9); max-width: 30em; }
.ls-leiste { position: absolute; left: var(--karte-innen); right: var(--karte-innen); bottom: 32px; display: grid; grid-template-columns: repeat(var(--anzahl, 5), 1fr); gap: 16px; }
.ls-balken { display: grid; gap: 12px; width: 100%; padding-top: 12px; text-align: left; color: rgb(255 255 255 / .55); transition: color .3s; }
.ls-balken:hover, .ls-balken[aria-current="true"] { color: #fff; }
.ls-spur { position: relative; display: block; height: 2px; background: rgb(255 255 255 / .28); overflow: hidden; transition: transform .3s var(--kurve), background-color .3s; transform-origin: 50% 100%; }
.ls-balken:hover .ls-spur { transform: scaleY(2); background: rgb(255 255 255 / .45); }
.ls-fuell { position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; }
.ls-balken.is-fertig .ls-fuell, .ls-balken[aria-current="true"] .ls-fuell { transform: scaleX(1); }
.ls.ls-auto .ls-balken[aria-current="true"] .ls-fuell { transform: scaleX(0); animation: ls-fuellen var(--dauer, 6s) linear forwards; }
.ls.ls-auto.is-pausiert .ls-balken[aria-current="true"] .ls-fuell { animation-play-state: paused; }
@keyframes ls-fuellen { to { transform: scaleX(1); } }

/* ======================================================================== Ablauf
   Grundzustand (ohne JavaScript, schmal, reduzierte Bewegung): die Schritte
   stehen untereinander. Mit .ab-pin wird die Buehne geklebt und die Skala
   dreht sich (Vorlage schritt-03 bis -08). */
.ab { position: relative; color: #fff; background: var(--buehne); }
.ab-buehne { position: relative; padding: var(--luft) var(--rand); overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 72% 50%, #3b3a37 0%, var(--buehne) 62%, #1c1c1b 100%); }
.ab-titel { position: relative; z-index: 2; max-width: 14em; font-size: var(--t-48); line-height: 1.15; letter-spacing: -.04em; }
.ab-skala, .ab-ecke { display: none; }
.ab-schritte { position: relative; z-index: 2; display: grid; margin-top: 56px; }
.ab-schritt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px 64px; align-items: center; padding: 56px 0; border-top: 1px solid rgb(255 255 255 / .12); }
.ab-maske:last-child p { color: var(--weiss-leise); max-width: 30em; }
.ab-zaehler { color: rgb(255 255 255 / .6); }
.ab-bild { display: grid; gap: 14px; justify-items: center; }
/* Ein gemeinsamer Rahmen fuer alle Zeichnungen (Kritik Runde 2, Fix 6): der
   Rahmen bestimmt die Groesse, das SVG fuellt ihn und bleibt mittig. */
.ab-zeichnung { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 52vh; }
.ab-zeichnung > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-bild figcaption { color: rgb(255 255 255 / .5); text-align: center; }

.ab.ab-pin { height: calc(var(--n) * 78vh + 100vh); }
.ab-pin .ab-buehne { position: sticky; top: 0; height: 100vh; min-height: 640px; padding: 0; }
.ab-pin .ab-titel { position: absolute; left: calc(var(--zeiger-x) + 176px); top: calc(var(--kopf-h) + 44px); max-width: 16em; font-size: var(--t-24); color: rgb(255 255 255 / .8); }
.ab-pin .ab-ecke { display: block; position: absolute; z-index: 2; width: 14px; height: 14px; left: calc(24px + var(--x) * (100% - 62px)); top: calc(var(--kopf-h) + 18px + var(--y) * (100% - var(--kopf-h) - 56px));
  border: 1px solid rgb(255 255 255 / .55); border-width: calc((1 - var(--y)) * 1px) calc(var(--x) * 1px) calc(var(--y) * 1px) calc((1 - var(--x)) * 1px); }
.ab-pin .ab-schritte { position: absolute; inset: 0; margin: 0; }
.ab-pin .ab-schritt { position: absolute; inset: 0; display: block; padding: 0; border: 0; pointer-events: none; }
.ab-pin .ab-bild { opacity: 0; transition: opacity .45s var(--kurve-p3); }
.ab-pin .is-aktiv .ab-bild { opacity: 1; }
.ab-pin .ab-text { position: absolute; left: calc(var(--zeiger-x) + 176px); top: 50%; width: min(25vw, 380px); transform: translateY(-38%); }
.ab-maske { overflow: hidden; }
.ab-maske + .ab-maske { margin-top: 10px; }
.ab-maske:last-child { margin-top: 16px; }
/* Alte Zeilen rollen in der Maske nach oben hinaus, neue zugleich von unten
   herein (Vorlage schritt-05: "02" oben angeschnitten, "03" kommt von unten) */
.ab-pin .ab-maske > * { transform: translateY(102%); transition: transform .834s var(--kurve-circ); }
.ab-pin .ist-vorbei .ab-maske > * { transform: translateY(-102%); }
.ab-pin .is-aktiv .ab-maske > * { transform: none; }
.ab-pin .is-aktiv .ab-maske:nth-child(2) > * { transition-delay: .05s; }
.ab-pin .is-aktiv .ab-maske:nth-child(3) > * { transition-delay: .1s; }
.ab-pin .ab-bild { position: absolute; right: 4vw; top: calc(50% + var(--kopf-h) / 2); width: 38vw; transform: translateY(-50%); }
.ab-pin .ab-zeichnung { max-height: none; height: min(52vh, 430px); aspect-ratio: auto; }
.ab-pin .ab-skala { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ab { --zeiger-x: 19vw; --rad: 44vh; }
.ab-rad { position: absolute; left: calc(var(--zeiger-x) - var(--rad) * 1.9615); top: calc(50% - var(--rad)); width: calc(var(--rad) * 2); height: calc(var(--rad) * 2);
  transform: rotate(var(--dreh, 0deg)); will-change: transform; }
.ab-striche { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-striche circle { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ab-striche line { stroke: rgb(255 255 255 / .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ab-striche line.ab-lang { stroke: rgb(255 255 255 / .62); }
.ab-grade { position: absolute; left: 50%; top: 50%; }
.ab-grad {
  position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 11px; line-height: 1; color: rgb(255 255 255 / .5); white-space: nowrap;
  transform: rotate(var(--w)) translateX(calc(var(--rad) * .87)) rotate(calc(-1 * var(--w) - var(--dreh, 0deg))) translate(-50%, -50%);
  transform-origin: 0 0; opacity: var(--go, 1);
}
.ab-nummern { position: absolute; left: 50%; top: 50%; }
.ab-nummer {
  position: absolute; left: 0; top: 0; font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -.06em; white-space: nowrap;
  transform-origin: 0 50%; transform: rotate(var(--w, 0deg)) translate(calc(var(--rad) + 22px), -50%) scale(var(--s, .6));
  opacity: var(--o, .35);
}
.ab-zeiger { position: absolute; left: var(--zeiger-x); top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; }
.ab-zeiger::before, .ab-zeiger::after {
  content: ""; position: absolute; left: -18px; width: 12px; height: 26px; border: 1px solid rgb(255 255 255 / .8); border-right: 0;
}
.ab-zeiger::before { bottom: 18px; border-bottom: 0; }
.ab-zeiger::after { top: 18px; border-top: 0; }

/* ======================================================================== Branchen
   Bild links (645 x 567 auf 1440), rechts Zaehler, Titel, Text, Pfeile. */
.br { display: grid; grid-template-columns: 44.8% minmax(0, 1fr); gap: 0 8.4%; align-items: center; }
.br-bilder { position: relative; aspect-ratio: 645 / 567; border-radius: var(--r); overflow: hidden; background: #ddd; }
.br-bild { position: absolute; inset: 0; opacity: 0; transition: opacity .768s var(--kurve-p3); }
.br-bild.is-aktiv { opacity: 1; }
.br-bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--kurve-p3); }
.br-bild.is-aktiv img { transform: scale(1); }
.br-seite { padding-right: 12%; }
.br-zaehler { display: inline-block; margin-top: 44px; padding: 3px 10px; border-radius: 4px; background: #ececec; color: var(--text); }
.br-folien { display: grid; margin-top: 18px; }
.br-folie { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--kurve-p3), transform .768s var(--kurve-circ), visibility 0s linear .5s; }
.br-folie.is-aktiv { visibility: visible; opacity: 1; transform: none; transition: opacity .5s var(--kurve-p3), transform .768s var(--kurve-circ), visibility 0s; }
.br-folie h3 { color: var(--tinte); }
.br-folie p { margin-top: 14px; max-width: 27em; font-size: var(--t-15); color: var(--text-leise); letter-spacing: -.03em; }
.br-pfeile { display: flex; gap: 8px; margin-top: 36px; }

/* ======================================================================== Neue Halle
   Das eigene Hallenfoto bleibt frei von Text und flaechenhaftem Schleier. */
.hl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); grid-template-rows: 1fr auto; border-radius: var(--r); overflow: hidden; color: #fff; background: #242424; }
.hl-medium { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.hl-medium picture, .hl-bild { width: 100%; height: 100%; }
.hl-bild { object-fit: cover; object-position: 52% 50%; }
.hl-text { grid-column: 1; grid-row: 1; padding: 64px var(--karte-innen) 40px; }
.hl-text .titel-48 { font-size: clamp(32px, 2.9vw, 46px); }
.hl-text p { margin-top: 24px; color: rgb(255 255 255 / .85); font-size: 18px; line-height: 1.5; letter-spacing: -.02em; max-width: 33em; }
.hl-kennzeilen { grid-column: 1; grid-row: 2; display: grid; gap: 18px; margin: 0 var(--karte-innen); padding: 28px 0 48px; border-top: 1px solid rgb(255 255 255 / .25); }
.hl-kennzeilen .mono { font-family: var(--font); font-size: 15px; text-transform: none; letter-spacing: -.01em; }

/* ======================================================================== Standort
   Graue Flaeche an der Stelle der Kundenstimme, darunter das EU-Band an der
   Stelle des Logobands (Vorlage schritt-10, -11). */
.so { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: center;
  padding: 96px clamp(24px, 6.6vw, 96px); border-radius: var(--r-gross); background: var(--flaeche); }
.so-lead { margin-top: 24px; max-width: 33em; color: var(--text-leise); }
.so-fakten { margin-top: 40px; border-bottom: 1px solid #e0e0e0; }
.so-fakt { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid #e0e0e0; }
.so-fakt dt { font-size: 20px; font-weight: 500; letter-spacing: -.03em; color: var(--tinte); }
.so-fakt dd { font-size: var(--t-15); color: var(--text-leise); letter-spacing: -.03em; }
.so-adresse { margin-top: 28px; color: var(--text-leise); }
.so-karte { display: grid; gap: 14px; justify-items: center; }
.so-karte figcaption { color: var(--text-leise); text-align: center; }
.eu-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; margin-top: 8px; padding: 26px 32px;
  border-radius: var(--r-gross); background: var(--flaeche); font-size: 14px; color: var(--text-leise); letter-spacing: -.02em; }
.eu-band svg.eu { width: 54px; height: 36px; }
.eu-zeile { font-weight: 600; color: var(--tinte); }
.eu-text p + p { margin-top: 4px; max-width: 40em; }
.eu-links { display: flex; gap: 20px; color: var(--text); }

/* Karte im Precept-Grau: Linien zeichnen sich, wenn sie ins Bild kommt (site.js) */
.karte { width: 100%; height: auto; max-height: min(600px, 72vh); overflow: visible; }
.kt-schraffur path { fill: none; stroke: #b9b9b9; stroke-width: .55; }
.kt-grenze { fill: none; stroke: #8d8d8d; stroke-width: .6; stroke-dasharray: 2.5 2.5; }
.kt-a13 { fill: none; stroke: var(--primary); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kt-strasse { fill: var(--tinte); font-size: 7px; font-weight: 600; }
.kt-strahl { stroke: #4a4a4a; stroke-width: .6; stroke-dasharray: 1.5 2.5; stroke-opacity: .7; }
.kt-ort circle { fill: var(--tinte); }
.kt-name, .kt-km, .kt-strasse { paint-order: stroke; stroke: var(--flaeche); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font); letter-spacing: -.01em; }
.kt-name { fill: var(--tinte); font-size: 8px; font-weight: 600; }
.kt-km { fill: var(--text-leise); font-size: 7px; font-family: var(--font-mono); letter-spacing: 0; }
.kt-name--heim { font-size: 9.5px; }
.kt-kern { fill: var(--primary); stroke: var(--flaeche); stroke-width: 1.5; }
.kt-puls { fill: none; stroke: var(--primary); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: puls 2.4s ease-out infinite; }
@keyframes puls { from { transform: scale(.7); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* ======================================================================== Kernform
   Karussell wie der Newsroom der Vorlage (schritt-11, -12): waagrechte
   Karten, Bild links, Chip, Titel; eckige Pfeile oben rechts. */
.kf-kopf { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 48px; align-items: end; padding: 0 24px; }
.kf-kopf .titel-64 { max-width: 17ch; }
.kf-logo { width: clamp(132px, 13vw, 174px); height: auto; margin-top: 24px; }
.kf-seite p { max-width: 30em; margin-bottom: 24px; color: var(--text-leise); }
.kf-pfeile { display: flex; gap: 6px; justify-content: flex-end; margin: 32px 24px 0; }
.kf-spur { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 8px;
  scrollbar-width: none; padding-bottom: 4px; }
.kf-spur::-webkit-scrollbar { display: none; }
.kf-karte { flex: 0 0 min(1003px, 86vw); scroll-snap-align: start; }
/* position: relative haelt die versteckten Hinweise (.sr-only) in der
   scrollenden Reihe; sonst ragen sie unsichtbar nach rechts und das Telefon
   zoomt die ganze Seite heraus. */
.kf-link { position: relative; display: grid; grid-template-columns: 48.5% minmax(0, 1fr); gap: 0; height: 100%; border: 1px solid #ececec; border-radius: var(--r-gross); background: #fff;
  overflow: hidden; transition: border-color .4s var(--kurve); }
.kf-link:hover { border-color: #d8d8d8; }
.kf-bild { aspect-ratio: 487 / 272; overflow: hidden; background: #eee; }
.kf-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--kurve); }
.kf-link:hover .kf-bild img { transform: scale(1.05); }
.kf-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 24px 32px; }
.kf-name { font-size: 20px; line-height: 1.25; letter-spacing: -.03em; color: var(--tinte); }
.kf-art { display: block; margin-top: 4px; font-size: var(--t-15); font-weight: 400; color: var(--text-leise); }
.kf-preis { color: var(--text); }

/* ======================================================================== Karriere */
.ka-bild {
  position: relative; width: 100%; aspect-ratio: 2.35 / 1; min-height: 460px;
  border-radius: var(--r); overflow: hidden; color: #fff; background: #111;
}
.ka-foto { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.ka-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 10 10 / .72) 0%, rgb(10 10 10 / .3) 50%, rgb(10 10 10 / 0) 80%); }
.ka-bild-text { position: absolute; z-index: 1; left: var(--karte-innen); bottom: 48px; max-width: 560px; }
.feld--karriere {
  --raster-x: var(--feld-rand);
  --raster-y: clamp(26px, 4vw, 56px);
  margin-top: clamp(64px, 7.3vw, 104px);
  padding: calc(var(--raster-y) + clamp(20px, 3vw, 42px)) calc(var(--raster-x) + clamp(16px, 3vw, 44px));
}
.feld--karriere .titel-64 { font-size: clamp(34px, 6vw, 64px); }
.ka-stellen { margin-top: clamp(22px, 3vw, 44px); border-top: 1px solid #d4d4d4; }
.ka-stellen li { border-bottom: 1px solid #d4d4d4; }
.ka-stelle-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(18px, 2vw, 28px) clamp(8px, 1.6vw, 22px);
  font-size: clamp(17px, 2vw, 26px); line-height: 1.25; font-weight: 500; letter-spacing: -.03em;
  overflow-wrap: anywhere; transition: background-color .3s var(--kurve);
}
.ka-stelle-link:is(:hover, :focus-visible) { background: #e9e9e9; }
.ka-stelle-link .pfeil { width: clamp(18px, 2vw, 26px); height: auto; }
.ka-marke { width: clamp(52px, 6vw, 88px); height: auto; margin: clamp(22px, 3vw, 36px) 0 0 auto; }

/* ======================================================================== Stellenanzeige */
.job { padding: calc(var(--kopf-h) + var(--rand-karte)) var(--rand-karte) var(--luft); }
.job-kopf {
  display: grid; justify-items: start; gap: 18px;
  padding: clamp(24px, 5vw, 76px); border-radius: var(--r-gross); background: var(--buehne); color: #fff;
}
.job-kopf h1 { max-width: 20ch; font-size: clamp(27px, 4.7vw, 72px); line-height: 1.03; overflow-wrap: anywhere; }
.job-zurueck { margin-bottom: clamp(8px, 2.2vw, 36px); padding-inline: 14px 18px; }
.job-druck-logo { display: none; }
.job-ort { font-size: 16px; font-weight: 500; color: var(--weiss-leise); }
.job-einleitung { max-width: 44ch; font-size: clamp(17px, 2.2vw, 23px); line-height: 1.45; letter-spacing: -.025em; }
.job-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.job-inhalt { max-width: 1100px; margin: clamp(48px, 7vw, 104px) auto 0; padding-inline: var(--karte-innen); }
.job-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 72px); }
.job-details section:last-child { grid-column: 1 / -1; padding-top: clamp(26px, 4vw, 56px); border-top: 1px solid var(--linie); }
.job-details section:last-child .liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(30px, 5vw, 72px); }
.job-details .liste { font-size: 17px; line-height: 1.5; letter-spacing: -.02em; }
.job-bewerbung {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px;
  margin-top: clamp(40px, 7vw, 96px); padding: clamp(22px, 4vw, 48px);
  border-radius: var(--r-gross); background: var(--flaeche);
}
.job-bewerbung address { font-style: normal; }
.job-bewerbung .strich { display: inline-flex; align-items: center; min-height: 44px; background-position: 0 calc(100% - 9px); }
.job-bewerbung .strich:hover { background-position: 100% calc(100% - 9px); }

/* ======================================================================== Kontakt */
.kt { --raster-x: 24%; --raster-y: 76px; padding: 150px 24px; text-align: center; }
.kt-innen { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; }
.kt-innen > p:not(.kt-wege) { color: var(--text-leise); }
.kt-knoepfe { margin-top: 10px; }
.kt-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 12px; color: var(--text); }

/* ======================================================================== Fuss
   Koerniger Verlauf Graphit nach Braungrau (Vorlage schritt-14). */
.fuss { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 720px; padding: 48px var(--rand) 32px; color: #fff; overflow: hidden;
  background: radial-gradient(110% 90% at 0% 0%, #25272b 0%, rgb(37 39 43 / 0) 58%),
              radial-gradient(80% 70% at 88% 22%, #6b6a64 0%, rgb(107 106 100 / 0) 66%),
              radial-gradient(90% 75% at 18% 100%, #5e4636 0%, rgb(94 70 54 / 0) 70%), #4a4744; }
.fuss::before { content: ""; position: absolute; inset: 0; opacity: .28; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fuss > * { position: relative; }
.fuss-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.fuss-titel { font-size: 13px; font-weight: 600; letter-spacing: -.02em; }
.fuss-spalte ul { display: grid; gap: 4px; margin-top: 18px; }
.fuss-spalte p, .fuss-spalte address { margin-top: 18px; font-size: 14px; font-style: normal; line-height: 1.5; color: rgb(255 255 255 / .78); letter-spacing: -.02em; }
.fuss-spalte address + ul { margin-top: 14px; }
.fuss-link {
  display: inline-block; padding: 4px 0; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .4s var(--kurve);
}
.fuss-link:hover { background-size: 100% 1px; }
.fuss-zeichen { display: grid; place-items: center; padding: 48px 0; color: #fff; }
.fuss-marke { width: clamp(96px, 10vw, 140px); height: auto; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: rgb(255 255 255 / .85); }
.fuss-recht { display: flex; gap: 16px; }
.fuss-recht .fuss-link { padding: 0; }

/* ======================================================================== Zeichnungen
   Weisse Linien auf Graphit, Orange nur fuer Laser, Naht und Funken. */
.sz text, .tf text, .ak text { font-family: var(--font); letter-spacing: 0; }
.sz-teil { fill: rgb(255 255 255 / .07); }
.sz-kontur path { fill: none; stroke: #fff; stroke-width: .7; stroke-linejoin: round; }
.sz-weg { display: none; }
.sz-mitte line { stroke: rgb(255 255 255 / .38); stroke-width: .35; stroke-dasharray: 6 2 1 2; }
.sz-gewinde path { fill: none; stroke: #fff; stroke-width: .45; }
.sz-biege { stroke: var(--primary); stroke-width: .7; stroke-dasharray: 8 3 2 3; }
.sz-biege-text { fill: var(--primary); font-size: 6.4px; font-weight: 600; }
.sz-mass line, .sz-mass polyline { stroke: rgb(255 255 255 / .55); stroke-width: .35; fill: none; }
.sz-mass text, .sz-feld text { font-size: 6.4px; fill: rgb(255 255 255 / .82); font-variant-numeric: tabular-nums; }
.sz-mass .sz-punkt { fill: rgb(255 255 255 / .55); }
.sz-feld rect, .sz-feld line { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: .45; }
.sz-feld text:nth-child(odd) { fill: rgb(255 255 255 / .5); }
.sz-kopf { display: none; }

.tf-tafel { fill: rgb(255 255 255 / .04); stroke: rgb(255 255 255 / .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tf-teile use { fill: rgb(255 255 255 / .06); stroke: #fff; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.tf-spur use { fill: none; stroke: var(--primary); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1000 1000; stroke-dashoffset: 0; }

.ak-werkzeug { fill: url(#ak-schraffur); stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#ak-schraffur line { stroke: rgb(255 255 255 / .35); stroke-width: 1; }
.ak-blech, .ak-profil { fill: rgb(255 255 255 / .12); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ak-bogen { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: .9; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ak-winkel { fill: #fff; font-size: 11px; font-weight: 600; }
.ak-nr { fill: rgb(255 255 255 / .6); font-size: 10px; font-weight: 600; }
.ak-hub, .ak-pfeil { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.sw path, .iso path { stroke: rgb(255 255 255 / .85); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sw .iso-oben, .iso .iso-oben { fill: #3d3a36; }
.sw .iso-vorn, .iso .iso-vorn { fill: #302d2a; }
.sw .iso-seite, .iso .iso-seite { fill: #262421; }
.sw .iso-wand, .iso .iso-wand { fill: #181716; }
.iso .iso-biege { fill: #36332f; }
.iso .iso-gewinde { fill: none; stroke-width: .7; }
.iso .iso-tangente { fill: none; stroke-opacity: .35; }
.iso path.iso-marke { fill: var(--primary); stroke: none; }
.sw path.sw-naht { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* Planschliff und Versand: schematische Maschinen- und Masszeichnungen. */
.ps, .pl { fill: none; stroke: rgb(255 255 255 / .86); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.ps path, .ps rect, .ps circle, .pl path, .pl circle { vector-effect: non-scaling-stroke; }
.ps-rahmen, .ps-band { fill: rgb(255 255 255 / .025); }
.ps-linie, .ps-andruck, .ps-rollen, .pl-boden { stroke: rgb(255 255 255 / .42); }
.ps-teil, .pl-teil, .pl-karton, .pl-karosse { fill: #343433; }
.ps-grat, .ps-staub, .ps-richtung, .ps-sauber, .pl-check { stroke: var(--primary); }
.ps-grat { opacity: 0; }
.ps-oberkante { stroke: #fff; }
.ps-lauf { stroke: var(--primary); stroke-dasharray: 3 7; stroke-width: 2; }
.ps-staub { opacity: 0; }
.ps-sauber, .pl-check { stroke-width: 2; }
.pl-check, .pl-weg { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.pl-weg { stroke: rgb(255 255 255 / .5); }
.pl-etikett { stroke: var(--primary); }
.laeuft .ps-lauf { animation: ps-band .6s linear infinite; }
.laeuft .ps-staub { animation: ps-staub .3s linear infinite alternate; }
@keyframes ps-band { to { stroke-dashoffset: -20; } }
@keyframes ps-staub { to { transform: translateY(4px); } }

/* ======================================================================== Breiten */
@media (max-width: 1240px) {
  .kopf-nav ul { gap: 20px; }
}
@media (max-width: 1080px) {
  .kopf-nav li:not(.kopf-shop), .kopf-cta { display: none; }
  .menue-knopf { display: inline-flex; }
  .ab { --zeiger-x: 16vw; }
}
@media (max-width: 900px) {
  .kf-schaufenster { grid-template-columns: 1fr; }
  .swf { --raster-x: 20px; --raster-y: 24px; padding: 48px 28px; }
  .swf-innen { grid-template-columns: 1fr; gap: 24px; }
  .swf-skizze { max-width: 460px; width: 100%; margin-inline: auto; }
  .swf-verfahren { gap: 24px; }
  .kf-schaufenster { margin-top: 32px; }
  .kf-schaufenster-bild { aspect-ratio: 3 / 2; }
  .kopf-innen { padding: 0 var(--rand); }
  .kopf-logo img { height: 34px; }
  .kopf-logo { padding: 5px 0; }
  .kopf-logo-dunkel { top: 5px; }

  .held { min-height: 100svh; padding: calc(var(--kopf-h) + 48px) var(--rand) 36px; gap: 48px; }
  .held-titel { font-size: clamp(36px, 7vw, 60px); line-height: 1.04; }
  .held-lead { font-size: clamp(26px, 4vw, 32px); margin-top: 24px; max-width: 22em; }
  .held-schatten { background: linear-gradient(180deg, rgb(8 8 8 / .5), rgb(8 8 8 / .64) 35%, rgb(8 8 8 / .82)); }
  .held-knoepfe { gap: 10px; margin-top: 28px; }
  .held-unten { flex-wrap: wrap; gap: 32px; }
  .held-logo { width: 190px; margin-left: auto; }

  .feld::before { inset: -32px 0; }
  .feld-innen { grid-template-columns: 1fr; gap: 28px; padding: 64px 24px; }
  .feld-innen > :nth-child(n) { grid-column: 1; grid-row: auto; }

  .ls { aspect-ratio: auto; height: min(86svh, 720px); min-height: 560px; }
  .ls-inhalt { left: var(--karte-innen); right: var(--karte-innen); top: auto; bottom: 92px; transform: none; }
  .ls-inhalt p { margin: 16px 0 24px; }
  .ls-leiste { left: var(--karte-innen); right: var(--karte-innen); bottom: 28px; gap: 8px; }
  .ls-balken { min-height: 44px; padding-top: 21px; align-content: start; }
  .ls-leiste { bottom: 12px; }
  .ls-balken .mono { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ls-medium::after { background: linear-gradient(0deg, rgb(10 10 10 / .86) 0%, rgb(10 10 10 / .5) 45%, rgb(10 10 10 / .1) 100%); }

  .ab-schritt { grid-template-columns: 1fr; padding: 40px 0; gap: 28px; }
  .ab-zeichnung > svg { max-height: 46vh; }

  .br { grid-template-columns: 1fr; gap: 32px; }
  .br-seite { padding: 0 var(--karte-innen) 48px; }
  .br-zaehler { margin-top: 28px; }

  .so { grid-template-columns: 1fr; padding: 56px var(--karte-innen) 40px; gap: 40px; }
  .so-fakt { grid-template-columns: 1fr; gap: 4px; }
  .eu-band { grid-template-columns: auto 1fr; padding: 24px var(--karte-innen); }
  .eu-links { grid-column: 1 / -1; }
  .eu-links a, .kt-wege a { display: inline-block; padding-block: 11px; background-position: 0 calc(100% - 9px); }

  .kf-kopf { grid-template-columns: 1fr; padding: 0 var(--karte-innen); gap: 24px; }
  .kf-kopf .titel-64 { font-size: clamp(36px, 7vw, 48px); }
  .kf-logo { margin-top: 18px; }
  .kf-pfeile { display: none; }
  .kf-spur { margin-top: 36px; }
  .kf-link { grid-template-columns: 1fr; }
  .kf-bild { aspect-ratio: 3 / 2; }
  .kf-text { padding: 18px 20px 22px; }

  .hl { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hl-medium { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; }
  .hl-text { grid-row: 2; padding: 36px var(--karte-innen) 28px; }
  .hl-kennzeilen { grid-row: 3; grid-template-columns: 1fr 1fr; padding-bottom: 32px; }
  .ka-bild { aspect-ratio: auto; height: min(78svh, 620px); min-height: 480px; }
  .ka-bild::after { background: linear-gradient(0deg, rgb(10 10 10 / .82) 0%, rgb(10 10 10 / .3) 55%, rgb(10 10 10 / .05) 100%); }
  .ka-bild-text { right: var(--karte-innen); bottom: 32px; }

  .kt { --raster-x: 12%; --raster-y: 48px; padding: 112px 20px; }

  .fuss { min-height: 0; padding: 32px var(--rand) 24px; }
  .fuss-spalten { grid-template-columns: 1fr; gap: 32px; }
  .fuss-zeichen { padding: 64px 0; }
  .fuss-unten { flex-direction: column; }
  .fuss-link { padding: 10px 0; }
}
@media (max-width: 700px) {
  .swf-verfahren { grid-template-columns: 1fr; }
  .swf-verfahren > div + div { padding-top: 24px; border-top: 1px solid var(--linie); }
  .kopf-innen { gap: 12px; }
  .held-belege { width: 100%; grid-template-columns: 1fr 1fr; gap: 20px; }
  .held-beleg dd { font-size: 34px; }
  .held-logo { width: 170px; }
  .job-kopf h1 { font-size: clamp(26px, 8.5vw, 48px); }
  .job-inhalt { padding-inline: 16px; }
  .job-details, .job-details section:last-child .liste { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .knopf { padding: 0 18px 0 22px; }
  .kopf-innen { gap: 8px; padding-inline: 16px; }
  .kopf-logo img { height: 28px; }
  .held-titel { font-size: min(36px, 9.4vw); }
  .held-knoepfe .knopf { padding-inline: 12px; gap: 8px; }
}

/* ======================================================================== Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  :is(.knopf, .rund, .eckig):is(:hover, :active) { transform: none; }
  .ls-folie.is-aktiv .ls-inhalt > :nth-child(n) { transition-delay: 0s; }
  .kt-puls { display: none; }
}

@page stellenanzeige { size: A4; margin: 13mm; }
@media print {
  body:has(.job) > :is(.kopf, .fuss, .sprung) { display: none; }
  .job {
    page: stellenanzeige; padding: 0;
    font-size: 11pt; letter-spacing: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .job-kopf { gap: 8pt; padding: 19pt 22pt; }
  .job-druck-logo { display: block; width: 114pt; height: auto; margin-bottom: 7pt; }
  .job-kopf h1 { max-width: 26ch; font-size: 27pt; }
  .job-ort, .job-einleitung { font-size: 11pt; }
  .job-einleitung { max-width: 60ch; }
  .job-zurueck, .job-aktionen { display: none; }
  .job-inhalt { max-width: none; margin-top: 24pt; padding: 0 6pt; }
  .job-details, .job-details section:last-child .liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18pt 24pt; }
  .job-details section, .job-bewerbung { break-inside: avoid; }
  .job-details section:last-child { padding-top: 15pt; }
  .job .titel-32 { font-size: 15pt; }
  .job-details .liste { gap: 5pt; margin-top: 9pt; font-size: 10.5pt; line-height: 1.4; }
  .job-bewerbung { gap: 18pt; margin-top: 19pt; padding: 13pt 15pt; font-size: 10pt; }
  .job-bewerbung .strich { min-height: 0; margin-top: 4pt; background: none; text-decoration: underline; }
}