@import url('tokens.css');
/* ══════════════════════════════════════════════════════════════════════════
   COPLA Burg GmbH — Design-System „Technische Dokumentation / Werkbank"
   Tokens · Raster · Header/Footer · Sektions-Rhythmus · Set-Piece-Bühne.
   Selektoren mit `body`-Präfix, wo Tailwind-Preflight sonst gewinnt.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Farbe */
  /* Hell und weiss, Akzent ist das Marken-Gruen des Logos (#00945C).
     --signal        Flaechen, Knoepfe, Marken-Ton
     --signal-text   dieselbe Farbe fuer KLEINEN Text (4,8:1 auf Papier = AA) */
  --bg:#FFFFFF; --surface:#F4F7F4; --surface-2:#EAF0EB; --surface-3:#DFE8E1;
  --ink:#16201C; --ink-2:#48564F; --stahl:#6B7A73;
  /* --signal ist die Markenfarbe für Flächen, Punkte und Ränder.
     Als SCHRIFT auf Weiß liegt sie bei 3,9:1 — darunter ist Text nicht
     mehr lesbar. Für Schrift gilt deshalb --signal-text (4,8:1). */
  --signal:#00945C; --signal-2:#00744A; --signal-text:#0E7A52;
  --signal-weich:rgba(0,148,92,.10);
  --linie:#D8E1DA; --linie-stark:#B9C6BD; --tief:#0E211A;
  --focus:var(--signal);
  color-scheme:light;

  /* Schrift */
  --font-head:'Archivo',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --text-eyebrow:.75rem; --text-body:1.0625rem;
  --text-lead:clamp(1.1rem,1.35vw,1.3rem);
  --text-h4:clamp(1.1rem,1.3vw,1.28rem);
  --text-h3:clamp(1.2rem,2vw,1.5rem);
  --text-h2:clamp(1.55rem,3.3vw,2.35rem);
  --text-h1:clamp(2rem,4.8vw,3.4rem);
  --lh-tight:1.08; --lh-snug:1.28; --lh-body:1.62;
  --tracking-tight:-.021em; --tracking-label:.14em;

  /* Raum */
  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem;
  --space-xl:4rem; --space-2xl:6rem;
  --wrap:76rem;
  --radius-sm:2px; --radius:6px; --radius-lg:12px;
  --schatten-sm:0 1px 2px rgb(11 14 16/.07);
  --schatten:0 14px 40px -18px rgb(11 14 16/.35);

  /* Motion */
  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1); --ease-masse:cubic-bezier(.34,1.28,.64,1);
}
html.dark{
  /* Nie ganz schwarz: der dunkelste Ton ist ein tiefes Grün-Grau, die Flächen
     darüber sind gestuft. Vorher lag --bg bei 8 % Helligkeit und las sich als
     schwarzes Loch; jetzt bei ~12 % mit klarer Staffelung nach oben. */
  --bg:#151F1B; --surface:#1C2A24; --surface-2:#23332C; --surface-3:#2B3E35;
  --ink:#E9F0EB; --ink-2:#B8C6BE; --stahl:#93A69B;
  --signal:#2FBF88; --signal-2:#00945C; --signal-text:#4FD8A5;
  --signal-weich:rgba(47,191,136,.15);
  --linie:#2C3D35; --linie-stark:#3A5045; --tief:#101B16;
  color-scheme:dark;
}

/* ── Basis ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--text-body); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,svg,video{max-width:100%; height:auto}
img{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}
::selection{background:var(--signal); color:#fff}
.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}
[id]{scroll-margin-top:7.5rem}

body h1,body h2,body h3,body h4{
  font-family:var(--font-head); color:var(--ink);
  letter-spacing:var(--tracking-tight); text-wrap:balance; margin:0;
}
body h1{font-size:var(--text-h1); line-height:var(--lh-tight); font-weight:700}
body h2{font-size:var(--text-h2); line-height:1.12; font-weight:700}
body h3{font-size:var(--text-h3); line-height:var(--lh-snug); font-weight:600}
body h4{font-size:var(--text-h4); line-height:var(--lh-snug); font-weight:600}
body p{margin:0 0 1rem}
body p:last-child{margin-bottom:0}
.lead{font-size:var(--text-lead); line-height:1.42; font-weight:500; color:var(--ink-2); max-width:56ch}
.fliess{max-width:66ch}
.fliess a:not(.btn),.prosa a:not(.btn){color:var(--signal-text); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px}
.fliess a:not(.btn):hover,.prosa a:not(.btn):hover{color:var(--signal-2)}
.klein{font-size:.9rem; color:var(--ink-2)}

/* ── Raster ──────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem)}
.sek{padding-block:clamp(3.5rem,7vw,6.5rem); position:relative}
.sek--eng{padding-block:clamp(2.5rem,5vw,4.5rem)}
.sek--dunkel{background:var(--tief); color:#E7E9EE}
.sek--dunkel body h2,.sek--dunkel h2,.sek--dunkel h3{color:#fff}
.sek--dunkel .lead,.sek--dunkel p{color:#B9C1C7}
.sek--flaeche{background:var(--surface)}
.sek + .sek{border-top:1px solid var(--linie)}
.sek--dunkel + .sek--dunkel{border-top-color:rgba(255,255,255,.08)}

/* Marginal-Raster: schmale Kennungsspalte links, Inhalt rechts */
.raster{display:grid; grid-template-columns:1fr; gap:1.75rem}
@media(min-width:920px){
  .raster{grid-template-columns:11.5rem 1fr; gap:clamp(2rem,4vw,3.5rem)}
  .marg{position:sticky; top:9.5rem}
}
.marg{
  font-size:var(--text-eyebrow); font-weight:600; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--stahl); line-height:1.5;
  border-top:2px solid var(--signal); padding-top:.65rem;
}
.marg span{display:block; color:var(--ink-2); font-weight:500; letter-spacing:.06em; margin-top:.3rem; text-transform:none}
.sek--dunkel .marg{color:#8FA0A9}
.sek--dunkel .marg span{color:#9BA5AC}
.eyebrow{
  font-size:var(--text-eyebrow); font-weight:600; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--signal-text); margin:0 0 .55rem; display:block;
}
.kopf{margin-bottom:2rem}
.kopf .lead{margin-top:.9rem}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; min-height:48px;
  padding:.78rem 1.5rem; border-radius:var(--radius); border:1px solid transparent;
  font-family:var(--font-body); font-weight:600; font-size:.98rem; text-decoration:none;
  background:var(--signal); color:#fff; cursor:pointer;
  transition:background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur);
}
.btn:hover{background:var(--signal-2); transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--geist{background:transparent; color:var(--ink); border-color:var(--linie-stark)}
.btn--geist:hover{background:var(--signal-weich); border-color:var(--signal-text); color:var(--signal-2); transform:translateY(-2px)}
.sek--dunkel .btn--geist,.hero .btn--geist,.spiel .btn--geist{color:#fff; border-color:rgba(255,255,255,.34)}
.sek--dunkel .btn--geist:hover,.hero .btn--geist:hover,.spiel .btn--geist:hover{color:#fff; border-color:var(--signal); background:rgba(224,86,29,.22)}
.btn svg{width:1.1em; height:1.1em; flex:none}

/* ── Icons (Zwei-Ebenen: Kontur currentColor + EINE Akzentfläche) ─────── */
.ico{width:2.6rem; height:2.6rem; stroke:currentColor; fill:none; stroke-width:1.6;
     stroke-linecap:round; stroke-linejoin:round; flex:none; color:var(--ink)}
.ico .akzent{fill:var(--signal); stroke:none}
.sek--dunkel .ico{color:#fff}

/* ── Karten / Listen ─────────────────────────────────────────────────── */
.karten{display:grid; gap:1px; background:var(--linie); border-block:1px solid var(--linie)}
@media(min-width:760px){.karten--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.karten--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:760px){.karten--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.karten--4{grid-template-columns:repeat(4,1fr)}}
.karte{background:var(--bg); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; min-width:0}
.sek--flaeche .karte{background:var(--surface)}
.sek--dunkel .karten{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1)}
.sek--dunkel .karte{background:var(--tief)}
.karte-nr{font-size:.72rem; font-weight:600; letter-spacing:var(--tracking-label);
          text-transform:uppercase; color:var(--stahl)}

/* Leistungs-Karten mit Foto */
.leistungen{display:grid; gap:1.5rem}
@media(min-width:860px){.leistungen{grid-template-columns:repeat(3,1fr)}}
.leistung{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--linie); border-radius:var(--radius); overflow:clip;
  text-decoration:none; color:inherit;
  transition:border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.leistung:hover{border-color:var(--signal-text); transform:translateY(-4px); box-shadow:var(--schatten)}
.leistung figure{margin:0; aspect-ratio:16/10; overflow:clip; background:var(--surface-2)}
.leistung img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.leistung:hover img{transform:scale(1.045)}
.leistung-txt{padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.leistung-mehr{margin-top:auto; padding-top:.6rem; color:var(--signal-text); font-weight:600; font-size:.95rem;
               display:inline-flex; align-items:center; gap:.4rem}

/* Kennzahlen-Leiste */
.kennwerte{display:grid; gap:1px; background:var(--linie)}
@media(min-width:640px){.kennwerte{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.kennwerte{grid-template-columns:repeat(4,1fr)}}
.kennwert{background:var(--bg); padding:1.5rem 1.25rem; min-width:0}
.sek--dunkel .kennwerte{background:rgba(255,255,255,.12)}
.sek--dunkel .kennwert{background:var(--tief)}
.kennwert b{display:block; font-family:var(--font-head); font-size:clamp(1.7rem,3.4vw,2.5rem);
            font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--ink)}
.sek--dunkel .kennwert b{color:#fff}
/* NUR das direkte Kind — sonst trifft die Regel auch den Zähler-<span> INNEN
   im <b> und schrumpft die Zahl auf Fließtextgröße. */
.kennwert > span{display:block; margin-top:.5rem; font-size:.9rem; color:var(--ink-2); line-height:1.45}
.kennwert b span{display:inline; font:inherit; color:inherit; margin:0}
.sek--dunkel .kennwert span{color:#9BA5AC}

/* Datenblatt-Tabelle */
.datenblatt{width:100%; border-collapse:collapse; font-size:.95rem}
.datenblatt th,.datenblatt td{text-align:left; padding:.72rem .5rem; border-bottom:1px solid var(--linie); vertical-align:top}
.datenblatt th{width:40%; font-weight:600; color:var(--stahl); font-size:.82rem;
               letter-spacing:.06em; text-transform:uppercase}

/* Ablauf-Schritte */
.ablauf{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--linie);
        border-block:1px solid var(--linie)}
/* Alle Schritte in EINER Reihe — sonst bleibt bei 5 Schritten eine verwaiste Karte übrig. */
@media(min-width:960px){.ablauf{grid-template-columns:repeat(var(--n,4),1fr)}}
.ablauf li{background:var(--bg); padding:1.4rem 1.25rem; min-width:0}
.sek--flaeche .ablauf li{background:var(--surface)}
.ablauf .nr{display:block; font-family:var(--font-head); font-size:1.55rem; font-weight:700;
            color:var(--signal-text); line-height:1; margin-bottom:.55rem}
.ablauf strong{display:block; margin-bottom:.35rem}
.ablauf p{font-size:.94rem; color:var(--ink-2)}

/* FAQ */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
  font-family:var(--font-head); font-weight:600; font-size:1.05rem; line-height:1.35; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:1.45rem; width:12px; height:12px;
  border-right:2px solid var(--signal); border-bottom:2px solid var(--signal);
  transform:rotate(45deg); transition:transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .antwort{padding:0 0 1.3rem; color:var(--ink-2); max-width:70ch}
.faq summary:hover{color:var(--signal-text)}

/* Merkmal-Liste mit Icon */
.merkmale{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem}
@media(min-width:700px){.merkmale{grid-template-columns:repeat(2,1fr)}}
.merkmale li{display:flex; gap:1rem; align-items:flex-start}
.merkmale strong{display:block; margin-bottom:.25rem}
.merkmale p{font-size:.95rem; color:var(--ink-2)}
.sek--dunkel .merkmale p{color:#9BA5AC}

/* Referenz-Listen */
.branchen{display:grid; gap:1px; background:var(--linie); border-block:1px solid var(--linie)}
@media(min-width:700px){.branchen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.branchen{grid-template-columns:repeat(3,1fr)}}
.branche{background:var(--bg); padding:1.5rem 1.4rem; min-width:0}   /* min-width:0 -> 1fr-Spalten bleiben gleich breit */
.sek--flaeche .branche{background:var(--surface)}
.branche h3{margin-bottom:.2rem}
.branche .anzahl{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-text); font-weight:600}
.branche ul{list-style:none; margin:.9rem 0 0; padding:0; font-size:.93rem; color:var(--ink-2)}
.branche li{padding:.3rem 0 .3rem 1.1rem; position:relative; line-height:1.45}
.branche li::before{content:""; position:absolute; left:0; top:.78em; width:6px; height:1px; background:var(--signal)}

/* Split Bild|Text */
.split{display:grid; gap:clamp(1.75rem,4vw,3.5rem); align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}
  .split--breit-links{grid-template-columns:1.15fr .85fr}}
.split figure{margin:0; border-radius:var(--radius-lg); overflow:clip; background:var(--surface-2)}
.split figure img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 50%}
/* Im Aufruf-Block unten auf jeder Seite („Nächster Schritt") stand das Foto
   im 4:3-Ausschnitt und zeigte nur den oberen Teil. Es hat 3:2 — in seinem
   eigenen Format ist nichts abgeschnitten (Marcus, 14.08.2026). */
.sek--dunkel .split figure img{aspect-ratio:3/2}
.split figcaption{font-size:.82rem; color:var(--stahl); padding-top:.6rem}

/* Bogen-Rahmung (wiederkehrendes Motiv) */
.bogen{border-radius:var(--radius-lg) var(--radius-lg) 120px var(--radius-lg); overflow:clip}

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60; color:#fff; background:transparent;
  transition:background .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{background:var(--surface); color:var(--ink); border-bottom-color:var(--linie); box-shadow:var(--schatten-sm)}
.status-leiste{border-bottom:1px solid rgba(255,255,255,.18); font-size:.74rem; letter-spacing:.1em;
               text-transform:uppercase; font-weight:500}
.site-header.scrolled .status-leiste{border-bottom-color:var(--linie); background:var(--surface-2)}
.status-inner{max-width:var(--wrap); margin-inline:auto; padding:.1rem clamp(1.25rem,4vw,2.5rem);
              display:flex; align-items:center; gap:1.4rem; justify-content:space-between}
.status-liste{display:none; gap:1.4rem; align-items:center; opacity:.9}
@media(min-width:900px){.status-liste{display:flex}}
.status-liste li{display:flex; align-items:center; gap:.42rem; list-style:none}
.status-punkt{width:5px; height:5px; background:var(--signal); border-radius:50%; flex:none}
.status-tel{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; font-weight:600;
            letter-spacing:.06em; margin-left:auto; min-height:44px; padding-block:.35rem}
.status-tel:hover{color:var(--signal-text)}
.status-leiste ul{margin:0; padding:0}

.nav-wrap{max-width:var(--wrap); margin-inline:auto; padding:.85rem clamp(1.25rem,4vw,2.5rem);
          display:flex; align-items:center; gap:1.25rem}
.nav-logo{display:flex; flex-direction:column; justify-content:center; min-height:44px; padding-block:.2rem;
          text-decoration:none; color:inherit; line-height:1; white-space:nowrap}
.nav-logo b{font-family:var(--font-head); font-size:1.32rem; font-weight:700; letter-spacing:-.02em}
.nav-logo b i{font-style:normal; color:var(--signal-text)}
.nav-logo small{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; opacity:.72; margin-top:.28rem}
.site-header nav{display:none; margin-left:auto; align-items:center; gap:.15rem}
@media(min-width:1080px){.site-header nav{display:flex}}
.site-header nav a{color:inherit; text-decoration:none; padding:.5rem .68rem; font-size:.94rem; font-weight:500;
                   border-radius:var(--radius-sm); position:relative; white-space:nowrap}
.site-header nav a::after{content:""; position:absolute; left:.68rem; right:.68rem; bottom:.24rem; height:2px;
                          background:var(--signal); transform:scaleX(0); transform-origin:left;
                          transition:transform .3s var(--ease-out)}
.site-header nav a:hover::after,.site-header nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav-tools{margin-left:auto; display:flex; align-items:center; gap:.5rem}
@media(min-width:1080px){.nav-tools{margin-left:.75rem}}
.nav-cta{display:none; min-height:44px; align-items:center; padding:.7rem 1.15rem; border-radius:var(--radius); background:var(--signal);
         color:#fff; text-decoration:none; font-weight:600; font-size:.92rem; white-space:nowrap;
         transition:background var(--dur)}
.nav-cta:hover{background:var(--signal-2)}
@media(min-width:760px){.nav-cta{display:inline-flex}}
.icon-btn{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
          background:none; border:1px solid currentColor; border-radius:var(--radius); color:inherit;
          cursor:pointer; opacity:.72; transition:opacity var(--dur), border-color var(--dur)}
.icon-btn:hover{opacity:1; border-color:var(--signal-text); color:var(--signal-text)}
.icon-btn svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7;
              stroke-linecap:round; stroke-linejoin:round}
.nav-burger{display:inline-flex}
@media(min-width:1080px){.nav-burger{display:none}}
.nav-overlay{position:fixed; inset:0; z-index:70; background:var(--surface); color:var(--ink);
             display:flex; flex-direction:column; gap:.1rem; padding:5.5rem clamp(1.25rem,4vw,2.5rem) 2.5rem; overflow-y:auto}
.nav-overlay[hidden]{display:none}
.nav-overlay a{color:inherit; text-decoration:none; font-family:var(--font-head); font-weight:600;
               font-size:1.25rem; padding:.78rem 0; border-bottom:1px solid var(--linie)}
.nav-overlay a:hover{color:var(--signal-text)}
.nav-overlay .gruppe{font-size:.72rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
                     color:var(--stahl); font-weight:600; margin:1.5rem 0 .3rem}
/* „Schließen" sitzt genau dort, wo der Menü-Knopf war (78-px-Zeile, 44 px hoch),
   beschriftet wie er. */
.nav-close{position:absolute; top:17px; right:clamp(1.25rem,4vw,2.5rem)}
.nav-overlay .nav-close{width:auto; height:44px; display:inline-flex; align-items:center; gap:.4rem;
  padding:0 .8rem 0 .65rem; border:1px solid var(--linie); border-radius:999px; background:var(--bg);
  color:var(--ink); opacity:1; font:inherit; font-weight:600; font-size:.9rem; white-space:nowrap}
.nav-overlay .nav-close svg{width:22px; height:22px; stroke-width:1.9}
/* Das Wort kommt aus dem Stil, nicht aus dem Markup — so tragen es alle Seiten
   (auch die gebauten Stellenseiten) ohne Neubau; vorgelesen wird aria-label. */
.nav-overlay .nav-close::after{content:"Schließen"}
html[lang="en"] .nav-overlay .nav-close::after{content:"Close"}
.nav-overlay .nav-close:hover,.nav-overlay .nav-close:focus-visible{border-color:var(--signal-text);
  color:var(--signal-text); background:var(--signal-weich)}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{position:relative; min-height:100svh; display:flex; align-items:stretch;
      overflow:clip; background:var(--tief); isolation:isolate}
.hero-bild{position:absolute; inset:0; z-index:0}
.hero-bild img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
.hero-ambient{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.hero-ambient .netz{position:absolute; inset:0; opacity:.14;
  background-image:
    repeating-linear-gradient(30deg, transparent 0 43px, rgba(255,255,255,.5) 43px 44px),
    repeating-linear-gradient(-30deg, transparent 0 43px, rgba(255,255,255,.5) 43px 44px);
  animation:netz-drift 78s linear infinite}
.hero-ambient .puls{position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--signal) 45%, var(--signal) 55%, transparent 100%);
  background-size:42% 100%; background-repeat:no-repeat; opacity:.75;
  animation:puls-lauf 9s linear infinite}
.hero-ambient .puls--1{top:36%}
.hero-ambient .puls--2{top:72%; animation-duration:13s; animation-delay:-3.5s; opacity:.42}
.hero-schleier{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,14,16,.78) 0%, rgba(11,14,16,.34) 32%, rgba(11,14,16,.72) 68%, rgba(11,14,16,.94) 100%)}
.hero-inhalt{position:relative; z-index:2; width:100%; padding-block:9rem 3.5rem; color:#fff;
             display:flex; align-items:flex-end}
.hero-inhalt > .wrap{width:100%}
.hero-grid{display:grid; gap:2.5rem; align-items:end}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.25fr .75fr; gap:3.5rem}}
.hero h1{color:#fff; max-width:17ch}
.hero .eyebrow{color:var(--signal)}
/* ⚠️ Diese Farbe stammte aus dem dunklen Foto-Hero (.hero), den es auf keiner
   Seite mehr gibt. Auf hellem Grund war der Fließtext praktisch unsichtbar —
   auf ALLEN 21 Seiten, weil auch die Unterseiten-Köpfe .hero-lead nutzen. */
.hero-lead{font-size:var(--text-lead); color:var(--ink-2); max-width:52ch;
  margin-top:1.1rem; line-height:1.5}
.hero .hero-lead{color:#D7DCE0}
.hero-aktionen{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem}
.hero-karte{background:rgba(11,14,16,.62); backdrop-filter:blur(8px);
            border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:1.4rem 1.4rem 1.2rem}
.hero-karte h2{font-size:.75rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
               color:var(--signal-text); font-weight:600; margin-bottom:.9rem}
.hero-karte dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.55rem 1rem; font-size:.9rem}
.hero-karte dt{color:#9BA5AC}
.hero-karte dd{margin:0; color:#fff; font-weight:600; text-align:right}
.hero-scroll{display:none}
@media(min-width:1000px){
  .hero-scroll{display:flex; align-items:center; gap:.6rem; margin-top:2.5rem;
               font-size:.72rem; letter-spacing:var(--tracking-label); text-transform:uppercase; color:#9BA5AC}
  .hero-scroll i{display:block; width:54px; height:1px; background:rgba(255,255,255,.4); position:relative; overflow:hidden}
  .hero-scroll i::after{content:""; position:absolute; inset:0; width:18px; background:var(--signal);
                        animation:scroll-hint 2.4s var(--ease-out) infinite}
}
@keyframes scroll-hint{0%{transform:translateX(-20px)}100%{transform:translateX(56px)}}

/* ── Ambient-Hintergrund: isometrisches Rohrnetz, driftend ───────────── */
.ambient{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
/* Geometrie bleibt IMMER im Viewport — bewegt wird nur die Hintergrund-Position,
   sonst meldet verify.mjs die Ebene als H-Scroll-Verursacher. */
.ambient-netz{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(30deg, transparent 0 43px, var(--linie) 43px 44px),
    repeating-linear-gradient(-30deg, transparent 0 43px, var(--linie) 43px 44px);
  opacity:.5;
  animation:netz-drift 78s linear infinite;
}
@keyframes netz-drift{from{background-position:0 0, 0 0}to{background-position:-352px -204px, 352px -204px}}
.ambient-puls{position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--signal) 45%, var(--signal) 55%, transparent 100%);
  background-size:46% 100%; background-repeat:no-repeat;
  opacity:.42; animation:puls-lauf 11s linear infinite}
.ambient-puls--a{top:22%; animation-duration:11s}
.ambient-puls--b{top:63%; animation-duration:15s; animation-delay:-4s; opacity:.28}
@keyframes puls-lauf{from{background-position:-50% 0}to{background-position:150% 0}}
main,.site-footer{position:relative; z-index:1}   /* NICHT .site-header — der bleibt fixed */

/* ── Scrollytelling-Bühne ────────────────────────────────────────────── */
.scrolly{background:var(--tief); color:#fff}
.scrolly .scrolly-buehne{padding-block:8.5rem 2.5rem}
.scrolly-layout{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem);
                width:100%; display:grid; gap:1.5rem; align-items:center}
@media(min-width:1000px){.scrolly-layout{grid-template-columns:.8fr 1.2fr; gap:3rem}}
.scrolly-seite{display:flex; flex-direction:column; gap:1.25rem; order:2}
@media(min-width:1000px){.scrolly-seite{order:0}}
.scrolly-buehne svg{width:100%; height:auto; max-height:58svh; display:block}
@media(min-width:1000px){.scrolly-buehne svg{max-height:72svh}}
.scrolly-text p{font-size:.98rem; color:#B9C1C7; line-height:1.5; margin:0 0 .6rem; padding-left:1rem;
                border-left:2px solid var(--signal)}
.scrolly-wert{font-family:var(--font-head); line-height:1}
.scrolly-wert span[data-zahl]{font-size:clamp(2.4rem,5vw,3.6rem); font-weight:700; color:#fff; letter-spacing:-.03em}
.scrolly-wert small{display:block; font-family:var(--font-body); font-size:.75rem; letter-spacing:var(--tracking-label);
                    text-transform:uppercase; color:var(--signal); margin-top:.45rem; font-weight:600}
.scrolly-titel{font-family:var(--font-head); font-size:.75rem; letter-spacing:var(--tracking-label);
               text-transform:uppercase; color:var(--signal); font-weight:600}

/* Kleines Set-Piece auf Unterseiten */
.setpiece{position:relative; overflow:clip; background:var(--tief); border-radius:var(--radius-lg)}
.setpiece svg{width:100%; height:auto; display:block}
.setpiece-kopf{position:absolute; top:1.1rem; left:1.3rem; z-index:2;
               font-size:.7rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
               color:var(--signal-text); font-weight:600}

/* ── Lese-Fortschritt ────────────────────────────────────────────────── */
[data-scroll-progress]{background:var(--signal) !important}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer{background:var(--tief); color:#B9C1C7; font-size:.95rem}
.footer-oben{display:grid; gap:2.5rem; padding-block:clamp(3rem,6vw,4.5rem) 2.5rem}
@media(min-width:820px){.footer-oben{grid-template-columns:1.15fr 1.35fr 1fr; gap:3rem}}
.site-footer h2,.site-footer h3{color:#fff}
.footer-marke b{display:block; font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:#fff; letter-spacing:-.02em}
.footer-marke b i{font-style:normal; color:var(--signal-text)}
.footer-marke small{display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:#7C8A93; margin-top:.3rem}
.footer-marke p{margin-top:1rem; max-width:34ch; line-height:1.55; color:#9BA5AC}
.footer-siegel{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; padding:0; list-style:none}
.footer-siegel li{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
                  border:1px solid rgba(255,255,255,.2); border-radius:2px; padding:.3rem .55rem; color:#C9D1D6}
.footer-spalten{display:grid; grid-template-columns:repeat(2,1fr); gap:2rem}
.footer-spalten h3,.footer-kontakt h3{font-family:var(--font-body); font-size:.72rem; font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--signal-text); margin:0 0 .85rem}
.footer-spalten ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.footer-spalten a,.footer-kontakt a{color:#B9C1C7; text-decoration:none}
.footer-spalten a:hover,.footer-kontakt a:hover{color:#fff; text-decoration:underline; text-underline-offset:.2em}
.footer-kontakt address{font-style:normal; line-height:1.65; display:grid; gap:.35rem}
.footer-kontakt .zeit{margin-top:.9rem; color:#9BA5AC; font-size:.88rem; line-height:1.55}
.footer-cta{border-top:1px solid rgba(255,255,255,.12); padding-block:1.75rem;
            display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; justify-content:space-between}
.footer-cta p{margin:0; color:#C9D1D6; max-width:52ch}
.footer-cta strong{color:#fff}
.footer-schluss{border-top:1px solid rgba(255,255,255,.12); padding-block:.9rem 1.5rem;
                display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; justify-content:space-between}
.footer-rechts{display:flex; flex-direction:column; align-items:flex-start; gap:.3rem}
@media(min-width:720px){.footer-rechts{align-items:flex-end; text-align:right}}
.footer-links{display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; font-size:.88rem; margin-top:1.25rem}
.footer-links a{color:#9BA5AC; text-decoration:none}
.footer-links a:hover{color:#fff}
/* Der Fuß ist hell (Sand). Die beiden Zeilen darüber stammen aus dem alten
   dunklen Fuß: 2,5:1 im Ruhezustand, 1,1:1 beim Überfahren — Impressum und
   Datenschutz waren praktisch unsichtbar. */
.fuss--b .footer-links a{color:var(--ink-2)}
.fuss--b .footer-links a:hover{color:var(--signal-text)}
.footer-copy{font-size:.76rem; color:#6F7C85; line-height:1.5; max-width:60ch}
.site-footer .ns-badge{--ns-accent:#2FBF88; margin-bottom:16px}

/* ── Konfigurator ────────────────────────────────────────────────────── */
.konfig{display:grid; gap:1.5rem}
@media(min-width:900px){.konfig{grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:start}}
.konfig fieldset{border:0; margin:0 0 1.5rem; padding:0}
.konfig legend{font-size:.72rem; font-weight:600; letter-spacing:var(--tracking-label);
               text-transform:uppercase; color:var(--stahl); margin-bottom:.7rem; padding:0}
.konfig-optionen{display:flex; flex-wrap:wrap; gap:.5rem}
.konfig-opt{position:relative}
.konfig-opt input{position:absolute; opacity:0; width:1px; height:1px}
.konfig-opt span{display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1rem;
  border:1px solid var(--linie-stark); border-radius:var(--radius); cursor:pointer; font-size:.93rem;
  background:var(--surface); transition:all var(--dur) var(--ease-out)}
.konfig-opt input:checked + span{background:var(--signal); border-color:var(--signal); color:#fff; font-weight:600}
.konfig-opt input:focus-visible + span{outline:2px solid var(--focus); outline-offset:3px}
.konfig-opt span:hover{border-color:var(--signal-text); color:var(--signal-text)}
.konfig-opt input:checked + span:hover{color:#fff}
.konfig-ergebnis{background:var(--surface); border:1px solid var(--linie); border-radius:var(--radius);
                 padding:1.6rem 1.5rem; position:sticky; top:8rem}
.konfig-ergebnis .eyebrow{margin-bottom:.4rem}
.konfig-ergebnis h3{margin-bottom:.6rem}
.konfig-ergebnis p{color:var(--ink-2); font-size:.96rem}
.konfig-ergebnis .btn{margin-top:1.2rem; width:100%; justify-content:center}

/* ── Formular (Farben der Kontakt-Vorlage) ───────────────────────────── */
.k-wrap{max-width:none !important; margin:0 !important; padding:0 !important}

/* ── Blog ────────────────────────────────────────────────────────────── */
.beitraege{display:grid; gap:1.5rem}
@media(min-width:800px){.beitraege{grid-template-columns:repeat(3,1fr)}}
.beitrag{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--linie);
         border-radius:var(--radius); overflow:clip; text-decoration:none; color:inherit;
         transition:border-color var(--dur), transform var(--dur) var(--ease-out), box-shadow var(--dur)}
.beitrag:hover{border-color:var(--signal-text); transform:translateY(-4px); box-shadow:var(--schatten)}
.beitrag figure{margin:0; aspect-ratio:16/9; overflow:clip; background:var(--surface-2)}
.beitrag img{width:100%; height:100%; object-fit:cover}
.beitrag-txt{padding:1.3rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.beitrag-meta{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-text); font-weight:600}
.artikel{max-width:44rem}
.artikel h2{margin-top:2.5rem; margin-bottom:.8rem}
.artikel h3{margin-top:1.8rem; margin-bottom:.5rem}
.artikel ul,.artikel ol{margin:0 0 1rem; padding-left:1.3rem; color:var(--ink-2)}
.artikel li{margin-bottom:.4rem}
.artikel .kasten{background:var(--surface); border-left:3px solid var(--signal); padding:1.2rem 1.3rem;
                 margin:1.8rem 0; border-radius:0 var(--radius) var(--radius) 0}
.artikel .kasten p:last-child{margin-bottom:0}

/* ── Rechtsseiten ────────────────────────────────────────────────────── */
.recht{max-width:48rem}
.recht h2{font-size:1.15rem; margin:2.5rem 0 .6rem}
.recht address{font-style:normal; line-height:1.7}
.recht ul{padding-left:1.2rem; color:var(--ink-2)}

/* ── Mobil-Feinschliff ───────────────────────────────────────────────── */
@media(max-width:520px){
  .hero-inhalt{padding-block:7.5rem 2.5rem}
  .hero-karte dl{grid-template-columns:1fr; gap:.15rem}
  .hero-karte dd{text-align:left; margin-bottom:.5rem}
  .footer-spalten{grid-template-columns:1fr}
}

/* ── reduced-motion: DÄMPFEN, nicht töten (kein *{animation:none}) ───── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important}
  .marquee,[data-parallax],[data-depth]{animation:none !important}
  .ambient-netz,.ambient-puls,[data-ambient]{animation-duration:90s !important}
  .hero-scroll i::after{animation-duration:6s !important}
  .leistung:hover img{transform:none}
}

/* ── Seiten-Kopf (Unterseiten) ───────────────────────────────────────── */
.hero--seite{min-height:60svh}
.hero--seite .hero-inhalt{padding-block:9.5rem 3.5rem; align-items:center}
.hero--seite h1{max-width:20ch}
.hero--seite .hero-grid{align-items:end}
@media(min-width:1000px){.hero--seite .hero-grid{grid-template-columns:1.35fr .65fr}}
.krumen{display:flex; flex-wrap:wrap; gap:.4rem; font-size:.78rem; letter-spacing:.08em;
        text-transform:uppercase; color:var(--stahl); margin-bottom:1rem; list-style:none; padding:0}
/* Vorher #9BA5AC — auf dem hellen Seitenkopf 2,5:1 und damit unter der
   Lesbarkeitsgrenze. Der Weg ganz oben ist Orientierung, kein Zierrat. */
.krumen a{color:var(--ink-2); text-decoration:none}
.krumen a:hover{color:var(--signal-text)}
.krumen li + li::before{content:"/"; margin-right:.4rem; opacity:.5}

/* Set-Piece-Sektion der Unterseiten */
.spiel{background:var(--tief); color:#E7E9EE}
.spiel .scrolly-buehne{padding-block:8rem 2.5rem}
.spiel .scrolly-layout{grid-template-columns:1fr}
@media(min-width:1000px){.spiel .scrolly-layout{grid-template-columns:.72fr 1.28fr}}
.spiel h2{color:#fff}
.spiel .scrolly-buehne svg{max-height:48svh}
@media(min-width:1000px){.spiel .scrolly-buehne svg{max-height:62svh}}

/* Zwei-Spalten-Text */
.zwei{display:grid; gap:clamp(1.5rem,3vw,2.75rem)}
@media(min-width:860px){.zwei{grid-template-columns:repeat(2,1fr)}}

/* Listen mit Signal-Marke */
.liste{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.liste li{position:relative; padding-left:1.5rem; line-height:1.55}
.liste li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:2px; background:var(--signal)}
.sek--dunkel .liste li{color:#B9C1C7}

/* Hinweis-Kasten */
.hinweis{background:var(--surface); border-left:3px solid var(--signal); padding:1.2rem 1.4rem;
         border-radius:0 var(--radius) var(--radius) 0; margin:1.75rem 0}
.hinweis p:last-child{margin-bottom:0}
.hinweis b{color:var(--ink)}

/* Featured-Referenzkarte: steht über dem Raster, damit 12 Karten vier volle Reihen ergeben. */
.branche--gross{background:var(--surface); border:1px solid var(--linie); border-radius:var(--radius);
                padding:1.75rem; margin-bottom:1.5rem}
.branche--gross ul.drei{columns:1}
@media(min-width:640px){.branche--gross ul.drei{columns:2; column-gap:2rem}}
@media(min-width:1040px){.branche--gross ul.drei{columns:3; column-gap:2rem}}
.branche--gross ul.drei li{break-inside:avoid}

/* Scrollytelling auf schmalen Schirmen: Objekt + Beats + Kennwert müssen in EINE
   sticky Bühne passen — sonst schneidet overflow:clip den Kennwert ab. */
@media(max-width:760px){
  .scrolly .scrolly-buehne{padding-block:6.5rem 1.25rem}
  .spiel .scrolly-buehne{padding-block:6.5rem 1.5rem}
  .scrolly-buehne svg{max-height:30svh}
  .spiel .scrolly-buehne svg{max-height:38svh}
  .scrolly-layout{gap:1rem}
  .scrolly-seite{gap:.85rem}
  .scrolly-text p{font-size:.9rem; line-height:1.42; margin-bottom:.45rem}
  .scrolly-wert span[data-zahl]{font-size:2.1rem}
  .scrolly-wert small{margin-top:.25rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   AUSBAU 2026-08-07 — Bereichs-Welten, WebGL-Hero, weniger Kanten
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Bereichs-Welten ──────────────────────────────────────────────────
   Vier Fachbereiche sollen sich unterscheiden, ohne dass die Marke zerfällt:
   Signalorange bleibt die Konstante, variiert werden Zweitton, Papierton und
   das Hintergrund-Motiv. Man merkt beim Wechsel, dass man woanders ist. */
body{--bereich:var(--signal); --bereich-text:var(--signal-text); --bereich-weich:var(--signal-weich)}

body[data-bereich="chemie"]   { --bereich:#00945C; --bereich-text:#0E7A52; --bereich-weich:rgba(0,148,92,.10);  --bg:#FFFFFF }
body[data-bereich="nuklear"]  { --bereich:#E8A600; --bereich-text:#8A6200; --bereich-weich:rgba(232,166,0,.13); --bg:#FFFDF8 }
body[data-bereich="industrie"]{ --bereich:#B4762A; --bereich-text:#8A5A1E; --bereich-weich:rgba(180,118,42,.10); --bg:#FEFDFB }
body[data-bereich="personal"] { --bereich:#5E6E78; --bereich-text:#4C5A63; --bereich-weich:rgba(94,110,120,.10); --bg:#FCFCFC }

html.dark body[data-bereich="chemie"]   { --bereich:#2FBF88; --bereich-text:#4FD8A5; --bg:#15201B }
html.dark body[data-bereich="nuklear"]  { --bereich:#F0B93A; --bereich-text:#F5CB6A; --bg:#1F1B12 }
html.dark body[data-bereich="industrie"]{ --bereich:#D9A45E; --bereich-text:#E4B778; --bg:#1F1A13 }
html.dark body[data-bereich="personal"] { --bereich:#9AAAB4; --bereich-text:#B0BEC6; --bg:#181F22 }

/* Das Ambient-Motiv wechselt mit dem Bereich — das ist der stärkste Hinweis. */
body[data-bereich="chemie"] .ambient-netz{
  background-image:
    repeating-linear-gradient(60deg, transparent 0 47px, var(--linie) 47px 48px),
    repeating-linear-gradient(-60deg, transparent 0 47px, var(--linie) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 82px, var(--linie) 82px 83px);
}
body[data-bereich="nuklear"] .ambient-netz{
  background-image:
    repeating-radial-gradient(circle at 78% 22%, transparent 0 64px, var(--linie) 64px 65px),
    repeating-linear-gradient(90deg, transparent 0 118px, var(--linie) 118px 119px);
  background-size:auto, auto;
}
body[data-bereich="industrie"] .ambient-netz{
  background-image:
    repeating-linear-gradient(0deg, transparent 0 38px, var(--linie) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, var(--linie) 38px 39px),
    repeating-linear-gradient(45deg, transparent 0 108px, var(--linie) 108px 109px);
}
body[data-bereich="personal"] .ambient-netz{
  background-image:
    radial-gradient(circle, var(--linie) 1.5px, transparent 1.6px);
  background-size:34px 34px;
}
body[data-bereich] .ambient-puls{
  background:linear-gradient(90deg, transparent 0%, var(--bereich) 45%, var(--bereich) 55%, transparent 100%);
}

/* Bereichs-Ton übernimmt dort, wo er den Bereich markiert — nicht überall. */
body[data-bereich] .marg{border-top-color:var(--bereich)}
body[data-bereich] .ablauf .nr{color:var(--bereich-text)}
body[data-bereich] .branche .anzahl,
body[data-bereich] .beitrag-meta{color:var(--bereich-text)}
body[data-bereich] .faq summary::after{border-color:var(--bereich)}
body[data-bereich] .hinweis{border-left-color:var(--bereich); background:var(--bereich-weich)}
body[data-bereich] .liste li::before{background:var(--bereich)}
body[data-bereich] .ico .akzent{fill:var(--bereich)}
body[data-bereich] .krumen a:hover{color:var(--bereich)}
body[data-bereich] .eyebrow{color:var(--bereich-text)}

/* Bereichs-Fahne im Seitenkopf */
.bereichs-fahne{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem;
  padding:.42rem .9rem .42rem .7rem; border-radius:999px;
  background:rgba(11,14,16,.55); border:1px solid var(--bereich);
  font-size:.72rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
  font-weight:600; color:#fff; backdrop-filter:blur(6px);
}
.bereichs-fahne i{width:9px; height:9px; border-radius:50%; background:var(--bereich); flex:none}

/* ── 2 · Navigation: die vier Bereiche SIND die Navigation ───────────────── */
.site-header nav{display:none}
@media(min-width:1120px){.site-header nav{display:flex}}
.nav-burger{display:inline-flex}
@media(min-width:1120px){.nav-burger{display:none}}
.site-header nav a{display:inline-flex; align-items:center; gap:.45rem}
.site-header nav a .punkt{
  width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.42; flex:none;
  transition:opacity .3s, background .3s, transform .3s var(--ease-out);
}
.site-header nav a[data-b="chemie"] .punkt{background:#00945C}
.site-header nav a[data-b="nuklear"] .punkt{background:#E8A600}
.site-header nav a[data-b="industrie"] .punkt{background:#B4762A}
.site-header nav a[data-b="personal"] .punkt{background:#5E6E78}
.site-header nav a:hover .punkt,
.site-header nav a[aria-current="page"] .punkt{opacity:1; transform:scale(1.3)}
.site-header nav a[data-b][aria-current="page"]::after{background:var(--bereich)}
.status-nav{display:none; gap:1.05rem; align-items:center; margin-left:auto;
            font-size:.7rem; letter-spacing:.08em; font-weight:500; text-transform:none}
@media(min-width:760px){.status-nav{display:flex}}
.status-nav a{color:inherit; text-decoration:none; opacity:.7}
.status-nav a:hover{opacity:1; color:var(--signal-text)}
.status-inner .status-tel{margin-left:1.4rem}
@media(max-width:899px){.status-inner{justify-content:flex-end}}

/* ── 3 · Hero: Glanz + neuer Scroll-Hinweis ───────────────────────────────── */
.hero .hero-inhalt{z-index:3}
.hero-glanz{position:absolute; inset:auto 0 0 0; height:38%; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(11,14,16,.92), transparent)}

/* Ohne WebGL bleibt der Hero, wie er war — plus ein ruhiger Ersatz-Akzent. */

/* Weiterscrollen: mittig, senkrecht, mit laufendem Punkt nach unten */
.hero-scroll{display:none}
@media(min-width:760px){
  .hero-runter{
    position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
    z-index:4; display:flex; flex-direction:column; align-items:center; gap:.6rem;
    color:#C9D1D6; text-decoration:none;
  }
  .hero-runter span{font-size:.68rem; letter-spacing:var(--tracking-label); text-transform:uppercase; font-weight:600}
  .hero-runter i{position:relative; display:block; width:1px; height:64px; background:rgba(255,255,255,.28); overflow:hidden}
  .hero-runter i::after{content:""; position:absolute; left:-1px; width:3px; height:22px; border-radius:2px;
    background:var(--signal); animation:runter 2.6s var(--ease-out) infinite}
  .hero-runter svg{width:15px; height:15px; stroke:var(--signal); fill:none; stroke-width:2.2;
    stroke-linecap:round; stroke-linejoin:round}
  .hero-runter:hover{color:#fff}
  .hero-runter:hover svg{transform:translateY(3px)}
}
@keyframes runter{0%{transform:translateY(-26px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(64px);opacity:0}}
@media (prefers-reduced-motion: reduce){ .hero-runter i::after{animation-duration:8s !important} }

/* ── 4 · Weniger Kanten ───────────────────────────────────────────────────
   Nicht jede Fläche ist ein Rechteck: Sektionen bekommen einen weichen Bogen,
   Karten eine angeschnittene Ecke, Bilder ein durchgehendes Bogen-Motiv. */
.hero{border-bottom-left-radius:0}
.sek--bogen{border-start-start-radius:clamp(2rem,7vw,6rem); border-start-end-radius:0; margin-top:-3.5rem;
            position:relative; z-index:2}
.sek--bogen-r{border-start-end-radius:clamp(2rem,7vw,6rem); border-start-start-radius:0; margin-top:-3.5rem;
              position:relative; z-index:2}
.karte, .branche, .standort, .kennwert, .ablauf li{
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.leistung{border-radius:var(--radius) var(--radius-lg) var(--radius) var(--radius)}
.leistung figure{border-end-end-radius:56px}
.split figure, .bogen{border-radius:var(--radius-lg) 96px var(--radius-lg) 96px}
.hero-karte{border-radius:var(--radius) 34px var(--radius) 34px}
.konfig-wrap{border-radius:clamp(1rem,3vw,2.5rem) 0 clamp(1rem,3vw,2.5rem) 0}
.konfig-ergebnis{border-radius:var(--radius) 28px var(--radius) 28px}
.setpiece{border-radius:var(--radius-lg) 72px var(--radius-lg) 72px}
.btn{border-radius:999px}
.konfig-opt span{border-radius:999px}
.footer-siegel li{border-radius:999px}
.branche--gross{border-radius:var(--radius-lg) 96px var(--radius-lg) 96px}
.hinweis{border-radius:0 var(--radius-lg) var(--radius-lg) 0}

/* ── Führung: Geschäftsführer und Prokurist ───────────────────────────────── */
.fuehrung{display:grid; gap:1.5rem}
@media(min-width:840px){.fuehrung{grid-template-columns:repeat(2,1fr); gap:2rem}}
.person{background:var(--surface); border:1px solid var(--linie); padding:1.75rem;
        border-radius:var(--radius-lg) 72px var(--radius-lg) 72px; min-width:0}
.person-rolle{display:inline-block; font-size:.72rem; letter-spacing:var(--tracking-label);
              text-transform:uppercase; font-weight:600; color:var(--signal-text); margin-bottom:.5rem}
.person h3{margin-bottom:.7rem}
.person p{color:var(--ink-2); font-size:.98rem}

/* Mobil: die 3D-Bühne bekommt die obere Hälfte, der Text die untere —
   sonst läuft das Rohr quer durch Fließtext und Knöpfe. */

/* ══════════════════════════════════════════════════════════════════════════
   DER STRANG — WebGL-Scrollytelling (Startseite)
   Lange Strecke, sticky Bühne, HUD mit Kapiteln darüber. Ohne WebGL bleibt
   das plastische SVG-Scrollytelling stehen; diese Sektion zeigt sich erst,
   wenn die Szene wirklich läuft (html.hat-3d).
   ══════════════════════════════════════════════════════════════════════════ */
.strang{display:none; height:640vh; position:relative; background:var(--tief)}
html.hat-3d .strang{display:block}
html.hat-3d [data-ersatz-3d]{display:none}
.strang-buehne{position:sticky; top:0; height:100svh; overflow:clip}
.strang-3d{position:absolute; inset:0; z-index:0}
.strang-hud{position:absolute; inset:0; z-index:2; display:flex; align-items:center; pointer-events:none}
.strang-hud .wrap{width:100%}
.strang-spalte{max-width:30rem; padding-block:5rem;
  background:linear-gradient(90deg, rgba(11,14,16,.86) 0%, rgba(11,14,16,.72) 62%, transparent 100%);
  margin-left:calc(clamp(1.25rem,4vw,2.5rem) * -1); padding-left:clamp(1.25rem,4vw,2.5rem);
  padding-right:2.5rem; border-radius:0 120px 0 0}
.strang h2{color:#fff; margin-bottom:1.6rem}
.k-kapitel{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
           position:absolute; max-width:26rem; pointer-events:none}
.k-kapitel.an{opacity:1; transform:none; position:relative}
.k-kapitel b{display:block; font-family:var(--font-head); font-size:.78rem; letter-spacing:var(--tracking-label);
             text-transform:uppercase; color:var(--signal-text); margin-bottom:.5rem}
.k-kapitel p{color:#C9D1D6; font-size:1.02rem; line-height:1.5; margin:0}
.strang-wert{margin-top:2.2rem; font-family:var(--font-head); line-height:1}
.strang-wert span{font-size:clamp(2.2rem,4.4vw,3.4rem); font-weight:700; color:#fff; letter-spacing:-.03em}
.strang-wert small{display:block; font-family:var(--font-body); font-size:.72rem;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--signal-text);
  margin-top:.5rem; font-weight:600}
@media(max-width:1000px){
  .strang{height:560vh}
  .strang-spalte{max-width:none; padding-block:0;
    background:linear-gradient(0deg, rgba(11,14,16,.94) 46%, rgba(11,14,16,.55) 78%, transparent 100%);
    margin:0; padding:14rem 0 2rem; border-radius:0}
  .strang-hud{align-items:flex-end}
  .k-kapitel{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .k-kapitel{transition-duration:.2s}
}
/* Die Bühne zeigt das Ambient-Raster der Seite durch — sonst wirkt sie wie ein
   schwarzes Loch zwischen zwei hellen Sektionen. */
.strang-buehne{background:radial-gradient(120% 90% at 62% 42%, #1A2128 0%, #0B0E10 62%)}

/* ══════════════════════════════════════════════════════════════════════════
   HELLE FASSUNG (2026-08-07, Korrektur)
   Der Betrieb ist Chemie/Kerntechnik-Personaldienstleister — das dunkle
   Industrie-Kolorit passte nicht. Grundton ist Weiss, Akzent das Marken-Gruen
   des Logos. Dunkel bleibt nur der Footer als Abbinder.
   ══════════════════════════════════════════════════════════════════════════ */

/* Akzent-Sektionen: hell statt schwarz */
.sek--dunkel{background:var(--surface); color:var(--ink)}
.sek--dunkel h2,.sek--dunkel h3,body .sek--dunkel h2,body .sek--dunkel h3{color:var(--ink)}
.sek--dunkel .lead,.sek--dunkel p{color:var(--ink-2)}
.sek--dunkel .eyebrow{color:var(--signal-text)}
.sek--dunkel .karten{background:var(--linie)}
.sek--dunkel .karte{background:var(--bg)}
.sek--dunkel .kennwerte{background:var(--linie)}
.sek--dunkel .kennwert{background:var(--bg)}
.sek--dunkel .kennwert b{color:var(--ink)}
.sek--dunkel .kennwert span{color:var(--ink-2)}
.sek--dunkel .liste li{color:var(--ink-2)}
.sek--dunkel .merkmale p{color:var(--ink-2)}
.sek--dunkel .marg{color:var(--stahl)}
.sek--dunkel .marg span{color:var(--ink-2)}
.sek--dunkel .ico{color:var(--ink)}
.sek--dunkel + .sek--dunkel{border-top-color:var(--linie)}
.sek--dunkel .btn--geist,.hero .btn--geist,.spiel .btn--geist{color:var(--ink); border-color:var(--linie-stark)}
.sek--dunkel .btn--geist:hover,.spiel .btn--geist:hover{color:var(--signal-2); border-color:var(--signal); background:var(--signal-weich)}

/* Schaustuecke: helle Buehne, dunkle Schrift */
.scrolly,.spiel,.strang{background:var(--surface)}
.strang-buehne{background:radial-gradient(120% 90% at 62% 42%, #FFFFFF 0%, var(--surface-2) 74%)}
.scrolly h2,.spiel h2,.strang h2,body .strang h2{color:var(--ink)}
.scrolly-text p{color:var(--ink-2); border-left-color:var(--signal)}
.scrolly-wert span[data-zahl],.strang-wert span{color:var(--ink)}
.scrolly-titel,.scrolly-wert small,.strang-wert small{color:var(--signal-text)}
.setpiece{background:var(--surface-2)}
.setpiece-kopf{color:var(--signal-text)}
.k-kapitel p{color:var(--ink-2)}
.strang-spalte{background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 62%, transparent 100%)}
@media(max-width:1000px){
  .strang-spalte{background:linear-gradient(0deg, rgba(255,255,255,.96) 46%, rgba(255,255,255,.7) 78%, transparent 100%)}
}

/* Unterseiten-Kopf: Foto bleibt, aber deutlich heller und kompakter */
.hero--seite{min-height:46svh}
.hero--seite .hero-schleier{background:linear-gradient(180deg, rgba(14,33,26,.72) 0%, rgba(14,33,26,.42) 44%, rgba(14,33,26,.66) 100%)}
.hero--seite .hero-inhalt{padding-block:8.5rem 2.5rem}

/* ── Startseite: heller Hero mit gerahmtem Foto ─────────────────────────── */
.hero-hell{position:relative; padding-block:9.5rem clamp(2.5rem,5vw,4rem); background:var(--bg); overflow:clip}
.hero-hell .hero-grid{display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center}
@media(min-width:960px){.hero-hell .hero-grid{grid-template-columns:1.02fr .98fr}}
.hero-hell h1{max-width:16ch}
.hero-hell .hero-lead{color:var(--ink-2); font-size:var(--text-lead); max-width:52ch; margin-top:1.1rem; line-height:1.5}
.hero-foto{margin:0; position:relative; border-radius:var(--radius-lg) 140px var(--radius-lg) 140px; overflow:clip;
           box-shadow:var(--schatten)}
.hero-foto img{width:100%; aspect-ratio:4/3.4; object-fit:cover; display:block}
.hero-marke{position:absolute; left:0; bottom:0; z-index:2; background:var(--signal); color:#fff;
            padding:1rem 1.4rem; border-radius:0 var(--radius-lg) 0 0; max-width:16rem}
.hero-marke b{display:block; font-family:var(--font-head); font-size:1.6rem; line-height:1}
.hero-marke span{display:block; font-size:.76rem; letter-spacing:var(--tracking-label); text-transform:uppercase; margin-top:.35rem; opacity:.9}
.hero-trust{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; padding:0; list-style:none}
.hero-trust li{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
               color:var(--ink-2); border:1px solid var(--linie-stark); border-radius:999px; padding:.4rem .8rem}
.hero-hell .hero-aktionen{margin-top:1.9rem}

/* ── Partner-Laufband (Wortmarken, keine fremden Logo-Dateien) ──────────── */
.partner{background:var(--surface); border-block:1px solid var(--linie); padding-block:1.4rem; overflow:clip}
.partner-kopf{text-align:center; font-size:.7rem; letter-spacing:var(--tracking-label);
              text-transform:uppercase; color:var(--stahl); font-weight:600; margin:0 0 .9rem}
.partner-band{position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.partner-lauf{display:flex; gap:3rem; width:max-content; animation:partner-zieh 52s linear infinite}
.partner-lauf span{font-family:var(--font-head); font-weight:600; font-size:1.05rem;
                   color:var(--ink-2); white-space:nowrap; opacity:.85}
@keyframes partner-zieh{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.partner-band:hover .partner-lauf{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){ .partner-lauf{animation-duration:220s !important} }

/* ── Die drei Bereiche als Haupteinstieg ────────────────────────────────── */
.bereiche{display:grid; gap:1.5rem}
@media(min-width:900px){.bereiche{grid-template-columns:repeat(3,1fr)}}
.bereich{display:flex; flex-direction:column; text-decoration:none; color:inherit; min-width:0;
  background:var(--surface); border:1px solid var(--linie);
  border-radius:var(--radius) 72px var(--radius) var(--radius); overflow:clip;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur)}
.bereich:hover{transform:translateY(-5px); box-shadow:var(--schatten)}
.bereich figure{margin:0; aspect-ratio:16/10; overflow:clip; background:var(--surface-2); position:relative}
.bereich figure::after{content:""; position:absolute; inset:auto 0 0 0; height:6px; background:var(--ton)}
.bereich img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.bereich:hover img{transform:scale(1.05)}
.bereich-txt{padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.bereich-nr{font-family:var(--font-head); font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--ton)}
.bereich-jobs{margin-top:auto; padding-top:.4rem; font-size:.92rem; color:var(--ink-2)}
.bereich-jobs b{font-family:var(--font-head); font-size:1.35rem; color:var(--ton); margin-right:.35rem}
.bereich--chemie{--ton:#00945C} .bereich--nuklear{--ton:#E8A600} .bereich--industrie{--ton:#B4762A}
.bereich:hover{border-color:var(--ton)}
.bereich .leistung-mehr{color:var(--ton)}

/* ── Stellenbörse ───────────────────────────────────────────────────────── */
.stellen-filter{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem}
.filter-chip{appearance:none; cursor:pointer; font:inherit; font-size:.9rem; font-weight:600;
  min-height:44px; padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--linie-stark);
  background:var(--bg); color:var(--ink-2); transition:all var(--dur) var(--ease-out)}
.filter-chip:hover{border-color:var(--signal-text); color:var(--signal-2)}
.filter-chip.an{background:var(--signal); border-color:var(--signal); color:#fff}
/* (Die alte Kurzliste `.stelle a` ist entfallen — Stellen sind jetzt aufklappbar,
   siehe „Stellenbörse" weiter unten. Ihre grid-column-Regeln haben die neue
   Kopfzeile in zwei Zeilen gebrochen.) */

/* ── Kopfzeile: immer deckend hell ───────────────────────────────────────
   Mit dem hellen Hero gibt es keinen dunklen Untergrund mehr, gegen den eine
   weiße Schrift kontrastieren könnte — der transparente Zustand ließ Logo und
   Menü unsichtbar werden. Deshalb: ein Zustand, immer lesbar. */
.site-header{color:var(--ink); background:var(--surface); border-bottom:1px solid var(--linie)}
.site-header.scrolled{background:var(--surface); color:var(--ink); box-shadow:var(--schatten-sm)}
.status-leiste{border-bottom:1px solid var(--linie); background:var(--bg)}
.site-header.scrolled .status-leiste{background:var(--bg)}
.status-liste{color:var(--ink-2)}
.status-tel{color:var(--ink)}
.nav-logo b i{color:var(--signal-text)}
.site-header nav a{color:var(--ink-2)}
.site-header nav a:hover,.site-header nav a[aria-current="page"]{color:var(--ink)}
.icon-btn{border-color:var(--linie-stark); color:var(--ink-2)}

/* Hero: Platz für den Weiter-Hinweis, Marke unten rechts (unten links schnitt der Bogen sie ab) */
.hero-hell{padding-bottom:6.5rem}
.hero-foto{border-radius:var(--radius-lg) 140px var(--radius-lg) var(--radius-lg)}
.hero-marke{left:auto; right:0; bottom:0; border-radius:var(--radius-lg) 0 0 0; text-align:right}

/* Icons: Grundkörper gibt Tiefe, Kontur die Form, EIN Akzent die Bedeutung.
   Vektorhaft wie gewünscht — plastisch, aber weder verspielt noch bunt. */
.ico .grund{fill:var(--surface-3); stroke:none; opacity:.85}
html.dark .ico .grund{fill:var(--surface-3); opacity:.7}
.merkmale li:hover .ico .grund{opacity:1}
.ico{transition:transform var(--dur) var(--ease-out)}
.merkmale li:hover .ico{transform:translateY(-2px)}

/* Blechkante als Sektions-Übergang — ein plastisches Detail statt harter Kante */
.kante-blech{position:relative; height:14px; margin-top:-14px; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.06), transparent 60%)}
.kante-blech::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--linie) 0%, var(--signal) 18%, var(--signal) 26%, var(--linie) 46%, var(--linie) 100%)}

/* ══════════════════════════════════════════════════════════════════════════
   AUFBAU BERUHIGT (10.08.) — echtes Firmenlogo, klarer Sektionsrhythmus,
   weniger Sonderformen. Die Datenblatt-Marginalspalte ist entfallen.
   ══════════════════════════════════════════════════════════════════════════ */
.nav-logo{padding:0; min-height:auto}
.nav-logo img{height:44px; width:auto; display:block}
@media(max-width:620px){.nav-logo img{height:34px}}
.footer-logo{height:46px; width:auto; display:block; margin-bottom:.9rem}
.footer-marke small{display:none}

/* Sektionskopf: eine ruhige Spalte, gleicher Takt auf allen Seiten */
.kopf{max-width:60ch; margin-bottom:2.5rem}
.kopf h2{margin-top:.2rem}
.kopf .lead{margin-top:.9rem}
.sek{padding-block:clamp(3.5rem,6.5vw,6rem)}

/* Weniger Sonderkanten: Karten sind wieder ruhige Rechtecke mit sanftem Radius.
   Der Bogen bleibt den Bildern vorbehalten — dort ist er ein Motiv, in einem
   Karten-Raster war er Unruhe. */
.karte,.branche,.standort,.kennwert,.ablauf li{clip-path:none}
.karte,.branche,.standort,.kennwert{border-radius:0}
.leistung,.bereich,.beitrag,.person{border-radius:var(--radius)}
.leistung figure,.bereich figure{border-end-end-radius:0}
.branche--gross{border-radius:var(--radius)}
.konfig-wrap,.konfig-ergebnis{border-radius:var(--radius)}
.setpiece{border-radius:var(--radius)}
.hero-karte{border-radius:var(--radius)}
.hero-foto{border-radius:var(--radius-lg) 120px var(--radius-lg) var(--radius-lg)}
.split figure,.bogen{border-radius:var(--radius-lg) 96px var(--radius-lg) var(--radius-lg)}

/* ── Stellenbörse: aufklappbare Stellen mit Aufgaben und Profil ─────────── */
.stellen-filter{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.9rem}
.stellen-filter--ort{margin-bottom:1.4rem; padding-top:.9rem; border-top:1px solid var(--linie)}
.stellen-zahlzeile{font-size:.9rem; color:var(--ink-2); margin-bottom:1rem}
.stellen-zahlzeile b{color:var(--signal-text); font-size:1.05rem}
.stellen-liste{list-style:none; margin:0; padding:0; border-top:1px solid var(--linie)}
.stelle{border-bottom:1px solid var(--linie)}
.stelle summary{display:grid; grid-template-columns:1fr auto 9.5rem; gap:1.25rem; align-items:baseline;
  padding:.85rem .5rem .85rem 1.9rem; cursor:pointer; position:relative; list-style:none}
.stelle summary::-webkit-details-marker{display:none}
.stelle summary::before{content:""; position:absolute; left:.35rem; top:1.2rem; width:.7rem; height:.7rem;
  border-right:2px solid var(--signal); border-bottom:2px solid var(--signal);
  transform:rotate(-45deg); transition:transform .25s ease}
.stelle[open] summary::before,.stelle details[open] summary::before{transform:rotate(45deg)}
.stelle summary:hover{background:var(--signal-weich)}
.stelle-titel{font-family:var(--font-head); font-weight:600; font-size:1.01rem; color:var(--ink)}
.stelle-ort{font-size:.9rem; color:var(--ink-2); white-space:nowrap}
.stelle-kat{font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600;
  color:var(--signal-text); white-space:nowrap; text-align:right}
.stelle-detail{padding:.25rem 0 1.9rem 1.9rem; max-width:62rem}
.stelle-spalten{display:grid; gap:1.5rem 3rem}
.stelle-spalten[data-n="2"]{grid-template-columns:1fr 1fr}
.stelle-detail h4{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.5rem}
.stelle-detail ul{margin:0; padding-left:1.15rem; display:grid; gap:.45rem; list-style:disc}
.stelle-detail li::marker{color:var(--signal-text)}
.stelle-detail li{font-size:.94rem; line-height:1.55}
.stelle-cta{margin:1.5rem 0 0}
@media(max-width:720px){
  .stelle summary{grid-template-columns:1fr; gap:.2rem; padding-left:1.7rem}
  .stelle-ort,.stelle-kat{text-align:left}
  .stelle-detail{padding-left:1.7rem}
  .stelle-spalten[data-n="2"]{grid-template-columns:1fr}
}

/* Die restlichen „Pos. 0X"-Marginalien in den handgeschriebenen Blöcken der
   Startseite: eine Spalte, Marginalie aus. Damit ist der Datenblatt-Look
   überall weg, auch auf Seiten, die nicht neu erzeugt werden. */
.raster{grid-template-columns:1fr; gap:0}
.marg{display:none}
.stelle-detail h3{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 .5rem; font-weight:700}

/* Das Kundenlogo ist schwarze Schrift auf transparentem Grund — im Dunkelmodus
   und im dunklen Fuß wäre es unsichtbar. Deshalb zwei Fassungen: die weiße
   Wortmarke behält das grüne Oval, damit die Marke erkennbar bleibt. */
.nav-logo{position:relative}
.nav-logo .logo-hell{display:none}
html.dark .nav-logo .logo-dunkel{display:none}
html.dark .nav-logo .logo-hell{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   STARTSEITE — AUFBAU STATT KOSMETIK (10.08., zweiter Durchgang)
   Der Befund war „alles zu unprofessionell". Die Ursache war der Rhythmus:
   dreizehn Sektionen nach demselben Muster untereinander. Hier bekommt die
   Seite eine Führung — Suche ganz oben, große Kacheln, ein farbiger Bruch.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: die Stellensuche IST der Hauptknopf ──────────────────────────── */
.hero-suche{display:flex; gap:.6rem; flex-wrap:wrap; margin:2rem 0 1.1rem; max-width:34rem}
.hero-suche-feld{flex:1 1 17rem; display:flex; align-items:center; gap:.65rem;
  background:var(--bg); border:1.5px solid var(--linie-stark); border-radius:999px;
  padding:.15rem .3rem .15rem 1.05rem; transition:border-color var(--dur), box-shadow var(--dur)}
.hero-suche-feld:focus-within{border-color:var(--signal-text); box-shadow:0 0 0 4px var(--signal-weich)}
.hero-suche-feld svg{width:1.15rem; height:1.15rem; color:var(--stahl); flex:none}
.hero-suche-feld input{flex:1; min-width:0; border:0; background:none; font:inherit; font-size:1rem;
  color:var(--ink); padding:.85rem 0; min-height:44px}
.hero-suche-feld input:focus{outline:none}
.hero-suche-feld input::-webkit-search-cancel-button{cursor:pointer}
.hero-suche .btn{flex:none}

.hero-schnell{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.9rem; color:var(--ink-2); margin-bottom:1.4rem}
.hero-tag{appearance:none; font:inherit; font-size:.88rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; min-height:38px; padding:.35rem .85rem;
  border-radius:999px; border:1px solid var(--linie-stark); background:var(--bg);
  color:var(--ink); text-decoration:none; transition:all var(--dur) var(--ease-out)}
.hero-tag b{color:var(--signal-text); font-variant-numeric:tabular-nums}
.hero-tag:hover{border-color:var(--signal-text); background:var(--signal-weich)}
.hero-tag--link{border-style:dashed; color:var(--ink-2)}

/* ── Bereiche: Kacheln, nicht Kärtchen. Die Zahl trägt. ────────────────── */
.bereiche--gross{gap:1.5rem}
.bereiche--gross .bereich{position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--linie); background:var(--bg);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur)}
.bereiche--gross .bereich:hover{transform:translateY(-4px); box-shadow:0 18px 44px -22px rgba(14,33,26,.45)}
.bereiche--gross .bereich figure{margin:0; aspect-ratio:16/10; overflow:hidden}
.bereiche--gross .bereich figure img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out)}
.bereiche--gross .bereich:hover figure img{transform:scale(1.05)}
.bereiche--gross .bereich-txt{padding:1.5rem 1.6rem 1.7rem; position:relative}
.bereiche--gross .bereich-nr{position:absolute; top:-2.4rem; left:1.6rem; z-index:2;
  display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%;
  background:var(--bereich,var(--signal)); color:#fff; font-weight:700; font-size:.95rem;
  box-shadow:0 8px 20px -8px rgba(14,33,26,.6)}
.bereiche--gross .bereich h3{margin:.35rem 0 .5rem; font-size:1.35rem}
.bereiche--gross .bereich-jobs{display:flex; align-items:baseline; gap:.45rem; margin:1.1rem 0 .9rem;
  padding-top:1rem; border-top:1px solid var(--linie)}
.bereiche--gross .bereich-jobs b{font-family:var(--font-head); font-size:2.4rem; line-height:1;
  color:var(--bereich,var(--signal)); font-variant-numeric:tabular-nums}
.bereiche--gross .bereich-jobs span{font-size:.9rem; color:var(--ink-2)}
.bereich--chemie{--bereich:#00945C} .bereich--nuklear{--bereich:#E8A600} .bereich--industrie{--bereich:#B4762A}

/* ── Suchfeld in der Börse selbst ──────────────────────────────────────── */
.stellen-suchzeile{margin-bottom:1rem}
.stellen-suchfeld{display:flex; align-items:center; gap:.65rem; max-width:30rem;
  background:var(--bg); border:1.5px solid var(--linie-stark); border-radius:999px; padding-left:1.05rem}
.stellen-suchfeld:focus-within{border-color:var(--signal-text); box-shadow:0 0 0 4px var(--signal-weich)}
.stellen-suchfeld svg{width:1.1rem; height:1.1rem; color:var(--stahl); flex:none}
.stellen-suchfeld input{flex:1; min-width:0; border:0; background:none; font:inherit;
  padding:.8rem 1rem .8rem 0; min-height:44px; color:var(--ink)}
.stellen-suchfeld input:focus{outline:none}

@media(max-width:620px){
  .hero-suche{margin-top:1.5rem}
  .hero-suche .btn{width:100%; justify-content:center}
  .bereiche--gross .bereich-nr{top:-2.1rem; width:2.7rem; height:2.7rem}
}

/* ── Zahlenband: der optische Bruch zwischen „für Bewerber" und
      „für Auftraggeber". Vorher war auch das eine weiße Sektion. ───────── */
.band-gruen{background:var(--tief); color:#fff; position:relative; overflow:hidden}
.band-gruen::before{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 85% 0%, rgba(0,148,92,.42), transparent 62%);
  pointer-events:none}
.band-gruen .wrap{position:relative}
.band-kopf{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal-text); margin-bottom:1.6rem; font-weight:600}
.band-gruen .kennwerte{border:0; background:rgba(255,255,255,.14); gap:1px}
/* .kennwert traegt sonst background:var(--bg) — auf dunklem Grund war das ein
   weisser Kasten, in dem die weisse Schrift verschwand. */
.band-gruen .kennwert{background:transparent; border-color:rgba(255,255,255,.16)}
.band-gruen .kennwert b{color:#fff}
.band-gruen .kennwert span{color:rgba(255,255,255,.72)}

/* Nachweise: die Chip-Reihe war die dritte im Hero (Suche · Direkt-zu · Trust)
   und wiederholt nur die Topbar. Als schlichte Zeile trägt sie dieselbe
   Information, ohne den Blick ein drittes Mal zu zerstückeln. */
.hero-trust{gap:.3rem 1.4rem; margin-top:2.2rem; padding-top:1.3rem;
  border-top:1px solid var(--linie); max-width:34rem}
.hero-trust li{border:0; padding:0; color:var(--stahl); position:relative}
.hero-trust li + li::before{content:"·"; position:absolute; left:-.85rem; color:var(--linie-stark)}

/* Der Weiter-Hinweis war für den DUNKLEN Hero gebaut (helle Schrift, weiße
   Linie) — auf dem hellen Hero war er ein Geist, der mitten im Text zu schweben
   schien. Bleibt mittig unten, bekommt aber lesbare Farben und eigenen Platz. */
@media(min-width:760px){
  .hero-hell{padding-bottom:6.5rem}
  .hero-hell .hero-runter{color:var(--stahl); bottom:2.2rem}
  .hero-hell .hero-runter i{background:var(--linie-stark)}
  .hero-hell .hero-runter:hover{color:var(--ink)}
}

/* Die Puls-Linien liefen im hellen Hero quer durchs Bild und endeten hart an
   der Fotokante — das las sich wie ein Rendering-Fehler statt wie Deko.
   Jetzt an den Rändern ausgeblendet und deutlich zurückgenommen. */
.hero-hell .hero-ambient .puls{opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,transparent 58%);
          mask-image:linear-gradient(90deg,transparent,#000 16%,transparent 58%)}
.hero-hell .hero-ambient .puls--2{opacity:.12}


/* ══════════════════════════════════════════════════════════════════════════
   KOPF UND FUSS NACH ENTWURF V2 (11.08.2026)
   Marcus hat aus fünf Entwürfen Version 2 gewählt: zweistöckiger Kopf mit
   Bereichsreitern, heller Fuß in Sand mit dunkler Kontaktkarte.
   Die alten Regeln (.status-leiste, .nav-wrap, .footer-oben) sind damit
   gegenstandslos — sie stehen weiter oben und greifen ins Leere.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --chemie:#00945C; --nuklear:#E8A600; --nuklear-text:#8A6200; --industrie:#B4762A;
  --sand:#FCF7F0; --sand-2:#F7EFE4;
}

/* ── Kopf: obere Zeile ─────────────────────────────────────────────────── */
/* Der Fühler sitzt auf 52vh, nicht am Seitenanfang: der Kopf soll erst kompakt
   werden, wenn gut ein halber Bildschirm gescrollt ist. Am Seitenanfang sprang
   er sofort beim ersten Rad-Klick, und beim Zurückscrollen klappte er erst ganz
   oben wieder auf — das las sich als Fehler. */
#kopf-marke{position:absolute; top:52vh; height:1px; width:100%; pointer-events:none}
.site-header.kopf--b{position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:0; box-shadow:none; color:var(--ink)}
.kopf--b .kopf-oben{border-bottom:1px solid var(--linie); background:#fff}
/* Aufbau (Marcus 16.09.2026, Vorbild _entwuerfe/kopf-varianten.html, B):
   Logo · Hauptlinks direkt daneben · rechts Sprache | Hell/Dunkel | Anmelden |
   „Offene Stellen". Links = wohin, rechts = was ich tue. Kein Teil darf
   schrumpfen (flex:none) — passt etwas nicht, blendet eine Breitenregel es aus
   und es steht im Menü. Vorher gaben die Symbole nach und wurden gescrollt
   11 px schmal („extrem gequetscht"). */
.kopf--b .kopf-innen{width:min(100% - 2.5rem, 1220px); margin-inline:auto;
  display:flex; align-items:center; gap:1.1rem; min-height:78px;
  transition:min-height .3s cubic-bezier(.2,.7,.3,1)}
.kopf--b .nav-logo{padding:0; min-height:auto; flex:none}
.kopf--b .nav-logo img{height:46px; width:auto; transition:height .3s cubic-bezier(.2,.7,.3,1)}
.kopf--b .menue--schlank{display:flex; align-items:center; gap:1.6rem; margin-left:1.4rem;
  font-size:.96rem; font-weight:500; flex:none}
.kopf--b .menue--schlank > a{text-decoration:none; color:var(--ink-2); padding:.6rem 0;
  position:relative; white-space:nowrap}
.site-header .menue--schlank > a{padding:.6rem 0}
.kopf--b .menue--schlank > a::after{content:""; position:absolute; left:0; right:100%; bottom:.3rem;
  top:auto; height:2px; background:var(--signal); transform:none;
  transition:right .28s cubic-bezier(.2,.7,.3,1)}
.kopf--b .menue--schlank > a:hover{color:var(--ink)}
.kopf--b .menue--schlank > a[aria-current]{color:var(--ink)}
.kopf--b .menue--schlank > a:hover::after,
.kopf--b .menue--schlank > a[aria-current]::after{right:0}
.kopf--b .nav-tools{display:flex; align-items:center; gap:.5rem; margin-left:auto; flex:none}
/* Hell/Dunkel und Anmelden: 44 × 44 Tippfläche, Zeichen 22 px, runder zarter
   Rahmen — in beiden Zuständen gleich groß. */
.kopf--b .nav-tools .icon-btn{width:44px; height:44px; padding:0; margin:0; flex:none;
  display:inline-grid; place-items:center; border:1px solid var(--linie); border-radius:999px;
  background:var(--bg); color:var(--ink); opacity:1; text-decoration:none; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s}
.kopf--b .nav-tools .icon-btn:hover,
.kopf--b .nav-tools .icon-btn:focus-visible{border-color:var(--signal-text); color:var(--signal-text);
  background:var(--signal-weich)}
.kopf--b .nav-tools .icon-btn svg{width:22px; height:22px; stroke-width:1.8}
.kopf--b .nav-cta{display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1.15rem;
  border-radius:999px; background:var(--signal); color:#fff; text-decoration:none; font-weight:600;
  font-size:.95rem; white-space:nowrap; flex:none; border:1.5px solid var(--signal);
  transition:background .2s, transform .2s}
.kopf--b .nav-cta:hover{background:var(--signal-2); border-color:var(--signal-2); transform:translateY(-2px)}
/* Menü-Knopf mit Wort. Oben auf großen Bildschirmen braucht es ihn nicht (alle
   Links stehen in der Zeile); gescrollt und unter 1080 px ist er der Weg zu
   allem, was nicht mehr in die Zeile passt (Marcus 17.09.2026: so wie online). */
.kopf--b .nav-tools .nav-burger{display:none; width:auto; gap:.5rem; padding:0 1.05rem 0 .85rem;
  font:inherit; font-weight:600; font-size:.95rem; white-space:nowrap}
.kopf--b .nav-tools .nav-burger svg{width:22px; height:22px; stroke-width:1.9}
html.gescrollt .kopf--b .nav-tools .nav-burger{display:inline-flex}
@media (max-width:1080px){ .kopf--b .nav-tools .nav-burger{display:inline-flex} }
@media (min-width:1081px) and (max-width:1219px){
  .kopf--b .menue--schlank{gap:1.15rem; margin-left:.6rem}
}

/* ── Kopf: Bereichsreiter (neutrales Grau, damit sie sich nicht mit dem
      grünen Hero direkt darunter stoßen) ─────────────────────────────── */
.kopf-reiter{background:#F4F5F5; border-bottom:1px solid var(--linie); overflow:hidden;
  max-height:6rem; transition:max-height .32s cubic-bezier(.2,.7,.3,1), opacity .22s}
/* `.site-header nav{display:none/flex; margin-left:auto}` aus dem alten Kopf
   ist spezifischer als eine Klasse allein — ohne .site-header-Präfix blieb die
   Reiterreihe schmal und linksbündig. */
.site-header .reiter-reihe{width:min(100% - 2.5rem, 1220px); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linie)}
.site-header .reiter-reihe a{padding:.95rem 1.2rem}
.site-header .menue--schlank{display:flex}
.reiter{display:flex; align-items:center; gap:.85rem; padding:.95rem 1.2rem; background:#F4F5F5;
  text-decoration:none; color:inherit; position:relative; transition:background .22s}
.reiter::before{content:""; position:absolute; left:0; right:0; top:0; height:3px}
.reiter--chemie::before{background:var(--chemie)}
.reiter--nuklear::before{background:var(--nuklear)}
.reiter--industrie::before{background:var(--industrie)}
.reiter:hover,.reiter[aria-current]{background:#fff}
.reiter-icon{width:2.3rem; height:2.3rem; border-radius:9px; background:#fff;
  border:1px solid var(--linie); display:grid; place-items:center; flex:none}
.reiter-icon svg{width:1.3rem; height:1.3rem; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.reiter--chemie .reiter-icon svg{stroke:var(--chemie)}
.reiter--nuklear .reiter-icon svg{stroke:var(--nuklear-text)}
.reiter--industrie .reiter-icon svg{stroke:var(--industrie)}
.reiter-txt b{display:block; font-family:var(--font-head); font-size:1rem; line-height:1.2}
.reiter-txt small{display:block; font-size:.8rem; color:var(--ink-2); margin-top:.15rem}

/* ── Kompakte Bereichsgruppe, nur im gescrollten Zustand ───────────────── */
/* Gescrollt rücken die drei Bereiche als farbige Dreier-Wahl in einer Pille
   neben das Logo (Vorbild Entwurf B). Hauptlinks und Sprache treten dann
   zurück — sie stehen hinter dem Menü-Knopf. So bleibt die Zeile ruhig und
   nichts muss schrumpfen. */
.kopf-kompakt{display:none; align-items:center; gap:2px; padding:3px; margin:0 .4rem 0 0;
  border:1px solid var(--linie); border-radius:999px; background:var(--surface); flex:none}
.b-link{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; font-weight:600;
  color:var(--ink); padding:0 .95rem 0 .75rem; min-height:38px; border-radius:999px;
  position:relative; font-size:.93rem; white-space:nowrap; transition:background .2s, box-shadow .2s}
.site-header .kopf-kompakt .b-link{padding:0 .95rem 0 .75rem; border-radius:999px}
.b-link .b-icon{width:1.2rem; height:1.2rem; display:grid; place-items:center; flex:none}
.b-link .b-icon svg{width:1.2rem; height:1.2rem; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.b-link--chemie .b-icon svg{stroke:var(--chemie)}
.b-link--nuklear .b-icon svg{stroke:var(--nuklear-text)}
.b-link--industrie .b-icon svg{stroke:var(--industrie)}
.b-link:hover,.b-link[aria-current]{background:var(--bg); box-shadow:0 1px 3px rgba(14,33,25,.12)}
.b-link--chemie:hover,.b-link--chemie[aria-current]{box-shadow:inset 0 -2px 0 var(--chemie), 0 1px 3px rgba(14,33,25,.12)}
.b-link--nuklear:hover,.b-link--nuklear[aria-current]{box-shadow:inset 0 -2px 0 var(--nuklear), 0 1px 3px rgba(14,33,25,.12)}
.b-link--industrie:hover,.b-link--industrie[aria-current]{box-shadow:inset 0 -2px 0 var(--industrie), 0 1px 3px rgba(14,33,25,.12)}
/* Gescrollt am Desktop (Marcus 17.09.2026, Entwurf C aus _entwuerfe/kopf-varianten.html):
   EINE ruhige Zeile — Logo · Chemie · Nuklear · Industrie als Text mit Farbpunkt ·
   rechts „Offene Stellen", Anmelden, „Menü". Alles Übrige (Für Arbeitgeber, Über uns,
   Referenzen, Kontakt, Sprache, Hell/Dunkel) liegt im Menü, das als dunkles Feld
   unter dem Kopf aufgeht. Der große Kopf oben auf der Seite bleibt unverändert. */
@media (min-width:1081px){
  html.gescrollt .kopf--b .menue--schlank{margin-left:1.2rem; gap:0}
  html.gescrollt .kopf--b .menue--schlank > a{display:none}
  html.gescrollt .kopf--b .kopf-kompakt{margin:0; padding:0; border:0; background:transparent; gap:1.5rem}
  html.gescrollt .site-header .kopf-kompakt .b-link{padding:.6rem 0; min-height:44px; border-radius:0;
    font-family:var(--font-head); font-weight:600; font-size:1.05rem; gap:.6rem; color:var(--ink)}
  html.gescrollt .site-header .kopf-kompakt .b-link:hover,
  html.gescrollt .site-header .kopf-kompakt .b-link[aria-current]{background:transparent; box-shadow:none}
  html.gescrollt .site-header .kopf-kompakt .b-link::after{content:""; position:absolute; left:0; right:100%;
    bottom:.25rem; top:auto; height:2px; background:currentColor; transform:none;
    transition:right .28s cubic-bezier(.2,.7,.3,1)}
  html.gescrollt .site-header .kopf-kompakt .b-link:hover::after,
  html.gescrollt .site-header .kopf-kompakt .b-link[aria-current]::after{right:0}
  html.gescrollt .site-header .kopf-kompakt .b-link--chemie::after{background:var(--chemie)}
  html.gescrollt .site-header .kopf-kompakt .b-link--nuklear::after{background:var(--nuklear)}
  html.gescrollt .site-header .kopf-kompakt .b-link--industrie::after{background:var(--industrie)}
  /* Statt Symbol ein Farbpunkt — wie im Entwurf. */
  html.gescrollt .kopf--b .b-link .b-icon{width:.6rem; height:.6rem; border-radius:50%}
  html.gescrollt .kopf--b .b-link .b-icon svg{display:none}
  html.gescrollt .kopf--b .b-link--chemie .b-icon{background:var(--chemie)}
  html.gescrollt .kopf--b .b-link--nuklear .b-icon{background:var(--nuklear)}
  html.gescrollt .kopf--b .b-link--industrie .b-icon{background:var(--industrie)}
  /* rechts: DE|EN · Hell/Dunkel · Anmelden · Offene Stellen · Menü
     (Marcus 17.09.2026: Hell/Dunkel gehört auch oben sichtbar, „Offene Stellen"
     direkt links neben den Menü-Knopf). Sprache bleibt immer sichtbar. */
  html.gescrollt .kopf--b .nav-tools{gap:.55rem}
  html.gescrollt .kopf--b .nav-tools .sprachwahl{order:0; margin-right:.3rem}
  html.gescrollt .kopf--b #nm-theme{order:1; display:inline-flex}
  html.gescrollt .kopf--b #nm-konto{order:2}
  html.gescrollt .kopf--b .nav-cta{order:3}
  html.gescrollt .kopf--b .nav-tools .nav-burger{order:4; display:inline-flex}
}
html.gescrollt .kopf-reiter{max-height:0; opacity:0; border-bottom-color:transparent}
html.gescrollt .kopf-kompakt{display:inline-flex}
html.gescrollt .kopf--b .kopf-innen{min-height:64px}
html.gescrollt .kopf--b .nav-logo img{height:38px}
html.gescrollt .site-header.kopf--b{box-shadow:0 6px 24px -18px rgba(14,33,25,.5)}
@media (prefers-reduced-motion: reduce){
  .kopf-reiter,.kopf--b .kopf-innen,.kopf--b .nav-logo img{transition-duration:1.2s}
}

/* ── Fuß: hell in Sand mit dunkler Kontaktkarte ────────────────────────── */
.site-footer.fuss--b{background:var(--sand); color:var(--ink-2); padding-top:clamp(3rem,5vw,4.5rem)}
.fuss--b h3{color:var(--ink); font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:.9rem}
.fuss--b a{color:var(--ink-2)}
.fuss--b a:hover{color:var(--signal-2)}
.f-b-grid{display:grid; grid-template-columns:1.75fr .9fr; gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3rem; align-items:start}
.fuss--b .footer-logo{height:46px; width:auto; margin-bottom:1.1rem}
.f-b-lead{max-width:52ch; margin-bottom:1.4rem}
.fuss--b .footer-siegel{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0 0 2rem;
  padding:0}
.fuss--b .footer-siegel li{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:var(--ink-2); border:1px solid var(--sand-2); background:#fff;
  border-radius:999px; padding:.35rem .8rem}
.f-b-spalten{display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem}
.f-b-spalten a{display:block; text-decoration:none; padding:.24rem 0; font-size:.94rem}
.fuss--b .f-b-bereich{display:flex; align-items:center; gap:.55rem}
.f-b-bereich i{width:.62rem; height:.62rem; border-radius:50%; flex:none}
.f-b-bereich--chemie i{background:var(--chemie)}
.f-b-bereich--nuklear i{background:var(--nuklear)}
.f-b-bereich--industrie i{background:var(--industrie)}
.fuss--b .footer-links{display:flex; gap:1.2rem; margin-top:2rem; flex-wrap:wrap}
.fuss--b .footer-links a{font-size:.9rem; text-decoration:none}
.f-karte{background:var(--tief); color:rgba(255,255,255,.78); border-radius:var(--radius-lg,20px);
  padding:1.9rem 1.8rem}
.f-karte h3{color:#fff}
.f-karte-zeile{display:flex; align-items:center; gap:.9rem; text-decoration:none;
  padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.12)}
.fuss--b .f-karte-zeile,.fuss--b .f-karte a{color:rgba(255,255,255,.78)}
.fuss--b .f-karte a:hover{color:#fff}
.f-karte-zeile svg{width:1.35rem; height:1.35rem; stroke:#4FD09A; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.f-karte-zeile b{display:block; color:#fff; font-family:var(--font-head); font-size:1rem}
.f-karte-zeile small{display:block; font-size:.82rem; opacity:.72}
.f-karte-adresse{margin-top:1.1rem; font-size:.9rem; opacity:.82}
.f-karte .btn--klein{margin-top:1.4rem; min-height:42px; padding:.5rem 1.15rem; font-size:.92rem}
.fuss--b .f-schluss{border-top:1px solid var(--sand-2)}
/* Nur oben/unten setzen — `padding:1.4rem 0` löschte den Seitenabstand von .wrap,
   Badge und Copyright klebten am Rand (Marcus 16.09.2026: „passt nicht zum Rest"). */
.fuss--b .footer-schluss{display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  flex-wrap:wrap; padding-block:1.4rem}
.fuss--b .footer-copy{font-size:.84rem; color:var(--stahl); margin:0}
/* Bricht die Schlusszeile um (Badge oben, Copyright darunter), steht das
   Copyright linksbündig unter dem Badge — rechtsbündig war es ein Flattersatz
   mitten in der Seite (gemessen bei 768 px). */
@media(max-width:900px){ .fuss--b .footer-rechts{align-items:flex-start; text-align:left} }

@media(max-width:1080px){
  .kopf--b .menue--schlank{display:none}
  .kopf-kompakt{display:none !important}
  /* Derselbe Seitenabstand wie .wrap darunter — Kopf, Inhalt und Fuß fluchten. */
  .kopf--b .kopf-innen,.site-header .reiter-reihe{width:calc(100% - 2*clamp(1.25rem,4vw,2.5rem))}
  /* Die drei Reiter bleiben nebeneinander; ihre Untertitel dürfen umbrechen
     (`.site-header nav a{white-space:nowrap}` schob den dritten Reiter sonst
     aus dem Bild — bei 768 px endete er bei 910 px). */
  .site-header .reiter-reihe a{white-space:normal; padding:.8rem .9rem}
  .reiter{gap:.7rem}
  .reiter-txt b{font-size:.94rem}
  .reiter-txt small{font-size:.76rem}
  .kopf-reiter{max-height:none}
  html.gescrollt .kopf-reiter{max-height:0}
}
@media(max-width:600px){
  /* Handy: Symbol über Titel, kein Untertitel — drei Reiter in 360 px. */
  .site-header .reiter-reihe .reiter{flex-direction:column; text-align:center; gap:.35rem;
    padding:.65rem .3rem}
  .reiter-icon{width:2rem; height:2rem}
  .reiter-txt b{font-size:.74rem; line-height:1.15}
  .reiter-txt small{display:none}
}
@media(max-width:900px){
  .f-b-grid{grid-template-columns:1fr}
  .f-b-spalten{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .f-b-spalten{grid-template-columns:1fr} }

/* Die alte `.site-header nav a::after`-Unterstreichung schlug in den Reitern
   durch — dort markiert der farbige Oberstrich den Bereich, nicht ein Strich
   unter dem Text. */
.site-header .reiter-reihe a::after{content:none}
.site-header .kopf-kompakt a::after{content:none}


/* ══════════════════════════════════════════════════════════════════════════
   STARTSEITEN-KÖRPER NACH ENTWURF V2 (11.08.2026)
   Hero-Split mit der neuen Bühne · Partner-Laufband mit echten Logos, ohne
   Titel · drei Bereiche als Türen · „Über uns und Standorte" verschmolzen ·
   So arbeiten wir · Nachweise · kleiner Aufruf.
   Rausgefallen sind: die Stellenbörse (gehört auf Karriere und die
   Bereichsseiten), das WebGL-Scrollytelling und der Konfigurator.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══ HERO-SPLIT (aus V5) ═══════════════════════════════════════════════ */
/* ⚠️ NUR der Hero. Vorher traf diese Regel jede .split — auch die
   Aufruf-Blöcke unten auf jeder Seite. Dort wurde die Bildspalte auf 80vh
   gestreckt, während das Foto sein Seitenverhältnis behielt: unter dem Bild
   stand ein leerer Kasten. Der Hero ist das einzige <section class="split">. */
/* Der Untergrund gehört dem ganzen Hero, nicht den zwei Hälften einzeln.
   Vorher stießen zwei Verläufe in der Mitte aufeinander und beide liefen dort
   fast auf Weiß zu — das las sich als heller Balken (Marcus, 14.08.2026). */
section.split{display:grid; grid-template-columns:1.02fr .98fr; min-height:min(80vh,720px);
  /* ⚠️ gap:0 MUSS hier stehen. `.split` (die allgemeine Regel weiter oben) bringt
     bis zu 56 px Spaltenabstand mit — im Hero läuft genau dort ein heller
     Streifen zwischen Text und Szene durch. Das war der „weiße Balken", den
     Marcus dreimal gemeldet hat; sichtbar wurde er erst im Grid-Raster der
     Entwicklerwerkzeuge (14.08.2026). */
  gap:0;
  padding-block:0; align-items:stretch;
  background:linear-gradient(112deg,var(--signal-weich) 0%,#F3F9F5 30%,#F6FBF8 55%,
             #F1F8F4 78%,#F5FAF7 100%)}
/* ⚠️ HIER KEIN background. Diese Regel ist spezifischer als `.split-txt` und
   hat den eigenen Verlauf der Textspalte wieder eingeschaltet — genau daher
   kam die senkrechte Kante in der Mitte des Hero. Der Untergrund gehört dem
   ganzen Abschnitt (section.split), nicht den Hälften. */
section.split > .split-txt{display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3rem,6vw,5.5rem) clamp(2rem,5vw,4.5rem)}
section.split .innen{max-width:34rem; margin-left:auto; width:100%}
section.split .split-txt h1{margin-bottom:1.2rem}
section.split .split-akt{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.2rem}
/* Marcus: „die animation liegt in einem extra kasten, sie darf gerne in den
   viereckigen bereich direkt." Also kein Innenabstand, kein zweiter Radius —
   die Szene IST die Spalte. */
/* KEIN eigener Untergrund — weder hier noch am .werk darin. Der Verlauf des
   ganzen Hero (section.split) läuft durch beide Hälften; jede zusätzliche
   Fläche erzeugt genau an der Spaltenkante eine sichtbare Naht. */
.split-buehne{position:relative; display:grid; place-items:stretch; padding:0;
  background:none}
.split-buehne > .werk{border-radius:0; background:none; height:100%;
  min-height:min(80vh,720px)}
@media(max-width:900px){ .split-buehne > .werk{min-height:360px} }
@media(max-width:560px){ .split-buehne > .werk{min-height:300px} }
/* Der linke Verlauf brach bei 68 % hart auf Weiß ab — mitten im Fließtext
   stand dadurch ein weißer Fleck. Jetzt ein durchgehender Zug. */
.split-txt{background:none; --alt-verlauf:linear-gradient(158deg,var(--signal-weich) 0%,#F6FBF8 46%,
  #FFFFFF 82%,#FBFDFC 100%)}

/* ══ PARTNER-LAUFBAND — ohne Titel, wie auf der Altseite ═══════════════ */
.laufband{padding-block:0; border-block:1px solid var(--linie); background:#fff}
.laufband-spur{overflow:hidden; padding-block:1.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband-zug{display:flex; align-items:center; gap:3.6rem; width:max-content;
  animation:laufen 52s linear infinite}
/* Hier laufen die AUFTRAGGEBER, als Name in unserer eigenen Schrift — nicht
   als fremdes Logo. Einen Kunden beim Namen zu nennen ist erlaubt; sein
   Logo zu zeigen braucht seine Erlaubnis, und die liegt nicht vor
   (14.08.2026, die Bilddateien liegen in _trash/). */
.laufband-zug .partner-name{flex:none; font-family:var(--font-head); font-weight:700;
  font-size:1.28rem; letter-spacing:-.01em; color:var(--ink-2); opacity:.62;
  white-space:nowrap; transition:opacity .3s, color .3s}
.laufband-zug .partner-name:hover{opacity:1; color:var(--ink)}
@keyframes laufen{to{transform:translateX(-50%)}}
.laufband-spur:hover .laufband-zug{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){ .laufband-zug{animation-duration:280s} }

/* ══ DIE DREI BEREICHE als Türen (aus V2) ══════════════════════════════ */
.sek-bereiche{padding-block:clamp(4rem,7vw,7rem)}
.tueren{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1rem}
.tuer{position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(430px,52vh,570px); border-radius:var(--radius-lg,20px); overflow:hidden;
  text-decoration:none; color:inherit; border:1px solid var(--linie);
  padding:0 1.9rem 2.1rem; text-align:center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s}
.tuer:hover{transform:translateY(-8px); box-shadow:var(--schatten-gross)}
.tuer .grafik-feld{position:absolute; top:8%; left:50%; transform:translateX(-50%);
  width:74%; background:transparent; padding:0}
.tuer .grafik{height:auto; width:100%}
.tuer-nr{position:absolute; top:1.5rem; left:1.7rem; font-family:var(--font-head);
  font-size:.82rem; font-weight:700; letter-spacing:.1em}
.tuer h2{font-size:1.5rem; margin-bottom:.55rem}
.tuer p{font-size:.96rem; color:var(--ink-2); margin-bottom:1.2rem}
.tuer .mehr{font-weight:600; justify-content:center}
.tuer--chemie{background:linear-gradient(180deg,#F1F9F4 0%,#fff 60%)}
.tuer--nuklear{background:linear-gradient(180deg,#FDF6E5 0%,#fff 60%)}
.tuer--industrie{background:linear-gradient(180deg,#FBF5EC 0%,#fff 60%)}
.tuer--chemie .mehr,.tuer--chemie .tuer-nr{color:var(--chemie)}
.tuer--nuklear .mehr,.tuer--nuklear .tuer-nr{color:var(--nuklear-text)}
.tuer--industrie .mehr,.tuer--industrie .tuer-nr{color:var(--industrie)}

/* Bereichskarten: Grafik steht im Fluss, nicht absolut ueber dem Text.
   Absolut + justify-content:flex-end liess die Ueberschrift auf der Grafik
   liegen, sobald der Text drei Zeilen brauchte. Und die Kartenhoehe hing an
   52vh — sie lief beim Scrollen mit der Fensterhoehe mit. Beides raus:
   feste Hoehe, Grafik als eigenes Flex-Kind mit eigenem Platz. */
@media(min-width:901px){
  .sek-bereiche .tuer{justify-content:flex-start; min-height:32rem; padding-top:3.6rem}
  .sek-bereiche .tuer .grafik-feld{position:static; transform:none; left:auto; top:auto;
    width:min(74%,15rem); aspect-ratio:1/1; margin:0 auto 1.5rem;
    display:grid; place-items:center}
  .sek-bereiche .tuer .grafik-feld .ob{width:100%; height:auto}
  .sek-bereiche .tuer .mehr{margin-top:auto}
}

/* ══ ZWEISPALTER für „Über uns" und Standorte ══════════════════════════ */
.zwei{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.zwei--karte-links{grid-template-columns:.85fr 1.15fr}
.zwei-medium{display:flex; justify-content:center}
.zahlen{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2.5rem}
.zahl b{display:block; font-family:var(--font-head); font-size:2.4rem; line-height:1;
  color:var(--signal-text)}
.zahl span{font-size:.88rem; color:var(--ink-2)}
.ortliste{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linie);
  border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; margin-top:2rem}
.ortliste div{background:#fff; padding:1.1rem 1.2rem}
.ortliste b{display:block; font-family:var(--font-head); font-size:1.05rem}
.ortliste span{font-size:.88rem; color:var(--ink-2)}

/* ══ Direktkontakt im „Über uns · Standorte"-Abschnitt ═════════════════ */
.direkt{display:grid; gap:.2rem; margin-top:1.8rem}
.direkt-zeile{display:flex; align-items:center; gap:.9rem; text-decoration:none; color:inherit;
  padding:.7rem .9rem; border-radius:var(--radius); transition:background .22s}
.direkt-zeile:hover{background:#fff}
.direkt-zeile svg{width:1.4rem; height:1.4rem; stroke:var(--signal); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.direkt-zeile b{display:block; font-family:var(--font-head); font-size:1.08rem; color:var(--ink)}
.direkt-zeile small{display:block; font-size:.85rem; color:var(--ink-2)}
.zwei-medium--klebrig{position:sticky; top:9rem; align-self:start}

/* ══ SO ARBEITEN WIR (aus V4) ══════════════════════════════════════════ */
.weg{background:var(--surface); padding-block:clamp(4rem,7vw,7rem)}
.weg-linie{position:absolute; left:6%; right:6%; top:2.6rem; height:2px;
  background:repeating-linear-gradient(90deg,var(--linie-stark) 0 10px,transparent 10px 20px)}
.stationen{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem}
.station{text-align:center}
.station-kreis{width:5.2rem; height:5.2rem; margin:0 auto 1.2rem; border-radius:50%; background:#fff;
  border:2px solid var(--signal); display:grid; place-items:center; position:relative;
  box-shadow:0 12px 30px -18px rgba(0,148,92,.65)}
.station-kreis svg{width:2.1rem; height:2.1rem; stroke:var(--signal); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.station-nr{position:absolute; top:-.5rem; right:-.5rem; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--signal); color:#fff; font-size:.78rem; font-weight:700; display:grid;
  place-items:center; font-family:var(--font-head)}
.station h3{font-size:1.08rem; margin-bottom:.45rem}
.station p{font-size:.93rem; color:var(--ink-2)}

/* ══ AUFRUF — klein und in eigener Farbe, NICHT wie der Fuß ════════════
   Vorher war das ein dunkles Vollband in derselben Farbe wie der Footer;
   zwei dunkle Blöcke direkt hintereinander lasen sich wie ein Fehler. */
.aufruf{padding-block:clamp(2rem,3.5vw,3rem)}
.aufruf-innen{display:flex; align-items:center; justify-content:space-between; gap:2rem;
  flex-wrap:wrap; background:var(--sand); border:1px solid var(--sand-2);
  border-left:4px solid var(--signal); border-radius:var(--radius);
  padding:1.5rem clamp(1.4rem,2.6vw,2.2rem)}
.aufruf-innen b{display:block; font-family:var(--font-head); font-size:1.2rem; margin-bottom:.25rem}
.aufruf-innen span{font-size:.96rem; color:var(--ink-2); max-width:56ch; display:block}
.aufruf-akt{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
.aufruf-tel{font-family:var(--font-head); font-weight:700; color:var(--signal-text);
  text-decoration:none; white-space:nowrap}



/* ══════════════════════════════════════════════════════════════════════════
   HERO-BÜHNE — die Animation rechts im Split. Kein WebGL, kein Canvas:
   CSS-Transforms auf SVG-Flächen. Drei Plättchen für die drei Bereiche
   schweben in einer gekippten Staffelung über einer weichen Bodenreflexion.

   Gegen „kindlich": gedeckte Flächen, dünne Linien, sehr langsame Bewegung
   (14–22 s), kleine Amplituden, kein Hüpfen, keine Primärfarben.
   ══════════════════════════════════════════════════════════════════════════ */
.buehne{position:relative; width:100%; aspect-ratio:1/1; max-height:none;
  display:grid; place-items:center; perspective:1400px; perspective-origin:50% 42%;
  isolation:isolate; overflow:hidden}

/* Weicher Lichthof — gibt der Szene Tiefe, ohne eine Kante zu ziehen */
.buehne-hof{position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,148,92,.13), rgba(0,148,92,0) 72%);
  filter:blur(6px)}

/* Feines Raster als Grund — Technik, nicht Deko */
.buehne-raster{position:absolute; inset:0;
  background-image:linear-gradient(var(--linie) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linie) 1px,transparent 1px);
  background-size:46px 46px; opacity:.5;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 74%);
          mask-image:radial-gradient(closest-side,#000 30%,transparent 74%)}

/* Zwei Orbits — extrem langsam, dünn, fast unmerklich */
.buehne-ring{position:absolute; border-radius:50%; border:1px solid var(--linie-stark);
  transform-style:preserve-3d}
.buehne-ring--1{width:74%; aspect-ratio:1; transform:rotateX(74deg) rotateZ(0deg);
  animation:ring-dreh 46s linear infinite}
.buehne-ring--2{width:52%; aspect-ratio:1; border-color:rgba(0,148,92,.28);
  transform:rotateX(74deg) rotateZ(0deg); animation:ring-dreh 32s linear infinite reverse}
@keyframes ring-dreh{to{transform:rotateX(74deg) rotateZ(360deg)}}

.buehne-szene{position:relative; width:88%; height:80%; transform-style:preserve-3d;
  transform:rotateX(9deg) rotateY(-14deg); animation:szene-atmen 22s ease-in-out infinite}
@keyframes szene-atmen{
  0%,100%{transform:rotateX(9deg) rotateY(-14deg)}
  50%    {transform:rotateX(6deg) rotateY(-8deg)}}

/* ── Die drei Plättchen ─────────────────────────────────────────────────
   Erster Versuch war eine gestaffelte Überlappung — dabei verdeckte das
   vordere Plättchen die Beschriftung des dahinterliegenden, „Nuklear" war
   ein leeres blaues Rechteck. Jetzt ein FÄCHER: die drei stehen nebeneinander
   und überlappen sich nicht. Die Tiefe kommt aus Drehung, Z-Versatz und
   Schatten — nicht aus dem Verdecken.
   ─────────────────────────────────────────────────────────────────────── */
.pl{position:absolute; width:30%; aspect-ratio:3/4.4; transform-style:preserve-3d;
  animation:schweben 16s ease-in-out infinite; animation-delay:calc(var(--i) * -2.9s)}
.pl--chemie   {left:1%;  top:30%; --f:#00945C; --fh:#E9F5EE; --dreh:13deg;  --z:-46px}
.pl--nuklear  {left:35%; top:5%;  --f:#E8A600; --fh:#FBF3E1; --dreh:0deg;   --z:14px}
.pl--industrie{left:69%; top:22%; --f:#B4762A; --fh:#F8F0E4; --dreh:-13deg; --z:-46px}
@keyframes schweben{
  0%,100%{transform:rotateY(var(--dreh)) translate3d(0,0,var(--z))}
  50%    {transform:rotateY(var(--dreh)) translate3d(0,-15px,calc(var(--z) + 24px))}}

.pl-flaeche{position:relative; width:100%; height:100%; border-radius:18px;
  background:linear-gradient(158deg,#fff 0%,var(--fh) 58%,#fff 100%);
  border:1px solid var(--linie);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 28px 56px -30px rgba(14,33,25,.5),
             0 2px 6px -2px rgba(14,33,25,.1);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(.8rem,1.4vw,1.2rem); overflow:hidden}

/* Der Glanz wandert einmal pro Runde diagonal über die Fläche */
.pl-glanz{position:absolute; inset:-40%; pointer-events:none;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%);
  animation:glanz 14s ease-in-out infinite; animation-delay:calc(var(--i) * -3.4s)}
@keyframes glanz{0%,62%{transform:translateX(-58%)} 88%,100%{transform:translateX(58%)}}

.pl-icon{position:absolute; top:clamp(.8rem,1.4vw,1.2rem); left:clamp(.8rem,1.4vw,1.2rem);
  width:clamp(1.9rem,3.1vw,2.5rem); height:clamp(1.9rem,3.1vw,2.5rem); border-radius:11px;
  background:#fff; border:1px solid var(--linie); display:grid; place-items:center;
  box-shadow:0 6px 16px -10px rgba(14,33,25,.5)}
.pl-icon svg{width:58%; height:58%; stroke:var(--f); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.pl-zeilen{position:absolute; left:clamp(.8rem,1.4vw,1.2rem); right:clamp(.8rem,1.4vw,1.2rem);
  top:calc(clamp(1.9rem,3.1vw,2.5rem) + clamp(1.5rem,2.6vw,2.1rem)); display:grid; gap:.42rem}
.pl-zeilen i{display:block; height:3px; border-radius:2px; background:var(--ink);
  opacity:.13}
.pl-zeilen i:nth-child(1){width:86%}
.pl-zeilen i:nth-child(2){width:64%}
.pl-zeilen i:nth-child(3){width:74%}
.pl-name{font-family:var(--font-head); font-weight:700; font-size:clamp(.8rem,1.15vw,.98rem);
  color:var(--ink); letter-spacing:-.01em}
.pl-linie{display:block; width:1.9rem; height:3px; border-radius:2px; background:var(--f);
  margin-top:.5rem}
.pl-schatten{position:absolute; left:6%; right:6%; bottom:-11%; height:13%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,33,25,.28), transparent 76%);
  filter:blur(7px); transform:translateZ(-80px);
  animation:schatten-atmen 16s ease-in-out infinite; animation-delay:calc(var(--i) * -2.9s)}
@keyframes schatten-atmen{0%,100%{opacity:.6; transform:translateZ(-80px) scale(1)}
                          50%    {opacity:.3;  transform:translateZ(-80px) scale(.84)}}

/* Kleiner Kern hinter den Plättchen: zwei Scheiben, die gegenläufig kreisen */
.pl-kern{position:absolute; left:39%; top:70%; width:22%; aspect-ratio:1;
  transform-style:preserve-3d; z-index:0}
.kern-scheibe{position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(0,148,92,.45);
  animation:kern-dreh 24s linear infinite}
.kern-scheibe--2{inset:22%; border-style:solid; border-color:rgba(232,166,0,.5);
  animation-duration:17s; animation-direction:reverse}
@keyframes kern-dreh{to{transform:rotate(360deg)}}
.kern-punkt{position:absolute; left:50%; top:50%; width:11%; aspect-ratio:1; border-radius:50%;
  background:var(--signal); transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(0,148,92,.14)}

/* Bodenreflexion: eine weiche Ellipse, kein harter Spiegel */
.buehne-boden{position:absolute; left:14%; right:14%; bottom:9%; height:11%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,33,25,.13), transparent 78%); filter:blur(9px)}

@media(max-width:900px){
  .buehne{aspect-ratio:4/3}
  .buehne-szene{width:94%; height:78%}
}
@media (prefers-reduced-motion: reduce){
  /* Dämpfen, nicht abschalten: die Bewegung wird sehr langsam statt weg. */
  .buehne-szene,.pl,.pl-schatten,.pl-glanz,.buehne-ring,.kern-scheibe{
    animation-duration:150s !important}
}
/* ══ Mobil ═════════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .kopf--a .menue,.kopf--c .menue,.menue--schlank{display:none}
  .reiter-reihe{grid-template-columns:1fr}
  .kopf--c .kopf-aktion .tel{display:none}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split-buehne{order:-1; min-height:340px}
  .split-txt .innen{margin-left:0}
  .tueren{grid-template-columns:1fr}
  .tuer{min-height:390px}
  .zwei,.zwei--karte-links{grid-template-columns:1fr}
  .zwei--karte-links .zwei-medium{order:2}
  .stationen{grid-template-columns:1fr 1fr}
  .weg-linie{display:none}
  .zahlen{grid-template-columns:1fr 1fr}
  .f-bereiche,.f-unten-grid,.f-b-grid,.f-c-grid{grid-template-columns:1fr}
  .f-b-spalten{grid-template-columns:1fr 1fr}
  .aufruf-innen{flex-direction:column; align-items:flex-start}
}
@media(max-width:560px){
  .stationen{grid-template-columns:1fr}
  .ortliste{grid-template-columns:1fr}
  .f-b-spalten{grid-template-columns:1fr}
}


/* Deutschlandkarte */
/* Größer und enger zugeschnitten (Marcus, 07.10.2026): vorher 400 px mit viel Leerraum links. */
.dl-karte{width:100%; height:auto; max-width:600px}
.dl-karte .land{stroke:#BCD2C3; stroke-width:2; stroke-linejoin:round}
.dl-karte .ort-hof{fill:var(--signal); opacity:.16}
.dl-karte .ort-kern{fill:var(--signal)}
.dl-karte text{font-family:var(--font-body); font-size:16px; font-weight:600; fill:var(--ink)}

/* Bereichsgrafiken in den Türen */
.grafik-feld{background:transparent; padding:0; display:grid; place-items:center}
.grafik{width:100%; height:auto}
.grafik .schatten{fill:#0E2119; opacity:.07}
.grafik .metall{fill:#DCE6E0}
.grafik .oeffnung{fill:#B6C8BC}
.grafik .glanz{fill:#fff; opacity:.75}
.grafik .sockel{fill:#C3D2C8}
.grafik .glas{fill:#E7F0EA}
.grafik .fluid{fill:var(--signal); opacity:.82}
.grafik .blase{fill:#fff; opacity:.6}
.grafik .dampf{fill:#EDF3EF}
.grafik .zahn rect{fill:#DCE6E0}
.grafik .ring,.grafik .rad-gruen,.grafik .zahn2--gruen rect,.grafik .ring-punkt{fill:var(--signal)}
.grafik .ring{opacity:.75} .grafik .rad-gruen,.grafik .zahn2--gruen rect{opacity:.82}
.grafik .ring-punkt{opacity:.7}
.grafik--chemie .metall{fill:#CFDDD4}

/* Nachweise-Raster (aus Entwurf V1) */
.nachweise{display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie);
  border-radius:var(--radius); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.nachweis{background:var(--bg); padding:1.6rem 1.4rem}
.nachweis b{display:block; font-family:var(--font-head); font-size:1.12rem; color:var(--signal-text);
  margin-bottom:.4rem}
.nachweis span{font-size:.9rem; color:var(--ink-2); line-height:1.5}

.gruen{color:var(--signal-text)}
.mehr{display:inline-flex; align-items:center; gap:.4rem; font-weight:600}
.mehr svg{width:1.05em; height:1.05em; stroke:currentColor; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; flex:none}


/* ══════════════════════════════════════════════════════════════════════════
   HERO-SCROLLYTELLING „Vom Stillstand zum Anlauf"
   Sticky-Bühne über 420 vh: links bauen sich die Kapitelzeilen auf, rechts
   die Anlage — Rohrstrang (Chemie), Kühlturm (Kerntechnik), Aggregat
   (Industrie), dann Mannschaft und Nachweise. Mechanik: Vorlagen/scrolly.js.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-story{background:linear-gradient(158deg,var(--signal-weich) 0%,#fff 62%)}
.hs-buehne{height:100svh; display:flex; align-items:center}
.hs-grid{display:grid; grid-template-columns:.92fr 1.18fr; gap:clamp(2rem,4vw,4rem);
  align-items:center; width:min(100% - 2.5rem, var(--wrap,1220px)); margin-inline:auto}
.hs-links h1{margin:.3rem 0 1.4rem}
.hs-kapitel{display:grid; gap:.7rem; margin-bottom:2rem; max-width:46ch}
.hs-kapitel p{margin:0; padding-left:1.1rem; position:relative; font-size:1.02rem;
  line-height:1.5; color:var(--ink-2)}
.hs-kapitel p::before{content:""; position:absolute; left:0; top:.62em; width:.42rem; height:.42rem;
  border-radius:50%; background:var(--signal)}
.hs-kapitel b{color:var(--ink); font-weight:600}
.hs-akt{display:flex; gap:.8rem; flex-wrap:wrap}
.hs-rechts{position:relative}
.hs-svg{width:100%; height:auto; max-height:72svh}
.hs-svg text{font-family:var(--font-body)}
.hs-label{font-size:15px; font-weight:600; fill:var(--ink-2); letter-spacing:.02em}
.hs-label--still{fill:#A8674A}
.hs-label--lauf{fill:var(--signal-text)}
.hs-tagtext{font-size:15px; font-weight:600; fill:var(--ink)}
.hs-karte-t{font-size:14px; font-weight:700; fill:var(--ink); font-family:var(--font-head)}
.hs-karte-u{font-size:11.5px; fill:var(--ink-2)}
.hs-plastik{filter:drop-shadow(0 8px 14px rgba(14,33,25,.14))}
.hs-tag{filter:drop-shadow(0 6px 14px rgba(14,33,25,.16))}
.hs-wert{display:flex; align-items:baseline; justify-content:flex-end; gap:.6rem;
  margin:.4rem 0 0; padding-top:.9rem; border-top:1px solid var(--linie)}
.hs-wert span{font-family:var(--font-head); font-size:clamp(1.8rem,3.1vw,2.5rem);
  line-height:1; color:var(--signal-text); font-variant-numeric:tabular-nums}
.hs-wert small{font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
/* Der Warnpunkt pulst, solange die Anlage steht — sehr langsam, kein Blinken. */
.hs-still{animation:hs-puls 3.4s ease-in-out infinite}
@keyframes hs-puls{0%,100%{opacity:1} 50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){ .hs-still{animation-duration:14s} }

@media(max-width:900px){
  .hs-grid{grid-template-columns:1fr; gap:1.5rem}
  .hs-rechts{order:-1}
  .hs-svg{max-height:38svh}
  .hs-wert{position:static; text-align:left; margin-top:.6rem}
  .hs-kapitel{margin-bottom:1.2rem}
  .hs-links h1{font-size:clamp(1.9rem,7vw,2.4rem); margin-bottom:1rem}
}

/* `.scrolly-buehne svg{width:100%}` gilt für das Schaustück — im Hero steht
   aber auch der Pfeil in den Knöpfen innerhalb der Bühne und wurde dadurch
   443 px breit. Deshalb hier zurücknehmen. */
.hs-buehne .btn svg,.scrolly-buehne .btn svg{width:1.1em; height:1.1em; max-height:none}
.hs-buehne .hs-svg{width:100%; max-height:72svh}

/* ══════════════════════════════════════════════════════════════════════════
   HERO-SET-PIECE „Die Anlage im Takt" — 28-Sekunden-Zyklus, endlos
   ══════════════════════════════════════════════════════════════════════════
   Maßstab ist der Hero von Planung Kramer: dort baut sich ein Zeichenblatt in
   22 s Linie für Linie auf, klappt in 3D auf und verlöscht wieder. Zwei
   Vorgänger-Fassungen (schwebende Karten) waren Deko, kein Set-Piece.

   Alle Elemente teilen EINE Zeitachse: `animation-duration:var(--takt)` und
   dieselbe Endlosschleife. Wann ein Element auftritt, steckt allein in den
   Prozentwerten seiner Keyframes. Dadurch bleibt der Zyklus synchron, egal wie
   viele Teile dazukommen.

     0 – 11 %   Bodenplatte und Raster
    11 – 32 %   Chemie: Strang zeichnet sich, Flansch, Armatur, Medium fließt
    32 – 54 %   Kerntechnik: Turm wächst, Schürze, Dampf
    54 – 75 %   Industrie: Aggregat fährt ein, Räder greifen und drehen
    75 – 89 %   Nachweise rasten ein, alles läuft
    89 – 100 %  ausatmen, verlöschen, Neustart
   ══════════════════════════════════════════════════════════════════════════ */
.hb{position:relative; width:100%; min-height:clamp(460px,56vw,660px); display:grid;
  place-items:center; isolation:isolate; overflow:hidden; border-radius:var(--radius-lg,20px);
  padding:clamp(.6rem,1.4vw,1.2rem); --takt:32s}
.hb-grund{position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit;
  background:linear-gradient(152deg,#F2F9F5 0%,#FFFFFF 46%,#F6FAF7 100%)}
.hb-hof{position:absolute; border-radius:50%; filter:blur(40px)}
.hb-hof--1{width:60%; aspect-ratio:1; left:-10%; top:2%;
  background:radial-gradient(closest-side,rgba(0,148,92,.2),transparent 70%);
  animation:hb-drift-1 34s ease-in-out infinite}
.hb-hof--2{width:54%; aspect-ratio:1; right:-8%; bottom:0;
  background:radial-gradient(closest-side,rgba(232,166,0,.2),transparent 70%);
  animation:hb-drift-2 41s ease-in-out infinite}
@keyframes hb-drift-1{0%,100%{transform:translate3d(0,0,0) scale(1)}
                      50%{transform:translate3d(12%,8%,0) scale(1.1)}}
@keyframes hb-drift-2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}
                      50%{transform:translate3d(-10%,-8%,0) scale(.94)}}
.hb-raster{position:absolute; inset:-10%;
  background-image:linear-gradient(rgba(14,33,25,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(14,33,25,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(closest-side,#000 10%,transparent 70%);
          mask-image:radial-gradient(closest-side,#000 10%,transparent 70%);
  animation:hb-raster 48s linear infinite}
@keyframes hb-raster{to{background-position:40px 40px}}

.sz{position:relative; z-index:2; width:100%; height:auto; max-height:min(72svh,620px)}
.sz text{font-family:var(--font-body)}
.sz-fahne{font-size:14px; font-weight:600; fill:var(--ink)}
.sz-nw-t{font-size:12.5px; font-weight:700; fill:var(--ink); font-family:var(--font-head)}
.sz-nw-u{font-size:10.5px; fill:var(--ink-2)}

/* Gemeinsame Zeitachse — jedes Element bekommt sie, nur die Keyframes bestimmen
   den Auftritt. `both` hält den Endzustand bis zum Neustart. */
.akt > *,.pl-linie,.ch-schuss,.ch-medium,.nu-dampf,.nw,.in-rad,.hb-takt-balken,
.pr-schnitt,.pr-linie,.ku-fern,.ku-bruecke,.ku-dunst{
  animation-duration:var(--takt); animation-iteration-count:infinite;
  animation-timing-function:linear; animation-fill-mode:both}

/* ── Takt 1: die Platte ────────────────────────────────────────────────── */
.pl-flaeche{animation-name:sz-platte}
.pl-kante,.pl-tiefe{animation-name:sz-platte-kante}
@keyframes sz-platte{0%{opacity:0; transform:translateY(16px) scale(.94)}
  7%,89%{opacity:1; transform:none} 100%{opacity:0; transform:translateY(10px) scale(.97)}}
@keyframes sz-platte-kante{0%,2%{opacity:0} 8%,90%{opacity:1} 100%{opacity:0}}
.pl-linie{animation-name:sz-linie; stroke-dasharray:340; stroke-dashoffset:340;
  animation-delay:calc(var(--d) * var(--takt) * .0035)}
@keyframes sz-linie{0%,3%{stroke-dashoffset:340; opacity:0}
  10%{stroke-dashoffset:0; opacity:1} 88%{opacity:1} 100%{opacity:0}}

/* ── Takt 2: Chemie ────────────────────────────────────────────────────── */
.akt--chemie{--start:11%}
.ch-bock{animation-name:sz-ein}
.ch-schuss{stroke-dasharray:132; stroke-dashoffset:132; animation-name:sz-zeichnen;
  animation-delay:calc(var(--n) * var(--takt) * .022)}
@keyframes sz-zeichnen{0%,12%{stroke-dashoffset:132} 22%,88%{stroke-dashoffset:0} 100%{stroke-dashoffset:132}}
.ch-flansch{animation-name:sz-setzen}
.ch-spindel{animation-name:sz-wachsen-y; transform-box:fill-box; transform-origin:50% 100%}
.ch-rad{animation-name:sz-rad-auf; transform-box:fill-box; transform-origin:50% 50%}
/* Das Medium läuft erst, wenn die Leitung fertig ist. */
.ch-medium{stroke-dasharray:56 360; stroke-dashoffset:416; animation-name:sz-medium;
  animation-timing-function:cubic-bezier(.4,0,.6,1)}
@keyframes sz-medium{0%,28%{stroke-dashoffset:416; opacity:0}
  30%{opacity:.9} 86%{stroke-dashoffset:-40; opacity:.9} 100%{opacity:0}}
@keyframes sz-ein{0%,11%{opacity:0; transform:translateY(14px)}
  17%,88%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes sz-setzen{0%,19%{opacity:0; transform:translate(-14px,-8px)}
  25%,88%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes sz-wachsen-y{0%,22%{opacity:0; transform:scaleY(0)}
  28%,88%{opacity:1; transform:scaleY(1)} 100%{opacity:0}}
@keyframes sz-rad-auf{0%,24%{opacity:0; transform:scale(.3) rotate(-40deg)}
  30%{opacity:1; transform:scale(1) rotate(0)} 88%{opacity:1; transform:rotate(0)}
  100%{opacity:0}}

/* ── Takt 3: Kerntechnik ───────────────────────────────────────────────── */
.nu-sockel{animation-name:sz-sockel}
.nu-turm{animation-name:sz-turm; transform-box:fill-box; transform-origin:50% 100%}
.nu-schuerze{animation-name:sz-schuerze}
@keyframes sz-sockel{0%,32%{opacity:0; transform:translateY(12px)}
  37%,88%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes sz-turm{0%,35%{opacity:0; transform:scaleY(.06)}
  47%,88%{opacity:1; transform:scaleY(1)} 100%{opacity:0}}
@keyframes sz-schuerze{0%,46%{opacity:0; transform:scaleX(.2)}
  51%,88%{opacity:1; transform:none} 100%{opacity:0}}
.nu-dampf{opacity:0; animation-name:sz-dampf; animation-timing-function:ease-out;
  animation-delay:calc(var(--n) * var(--takt) * .028)}
@keyframes sz-dampf{0%,50%{opacity:0; transform:translateY(6px) scale(.4)}
  56%{opacity:.85} 76%{opacity:0; transform:translateY(-52px) scale(1.7)}
  100%{opacity:0; transform:translateY(-52px) scale(1.7)}}

/* ── Takt 4: Industrie ─────────────────────────────────────────────────── */
.in-block{animation-name:sz-block}
@keyframes sz-block{0%,54%{opacity:0; transform:translate(-22px,10px)}
  61%,88%{opacity:1; transform:none} 100%{opacity:0}}
.in-rad{transform-box:fill-box; transform-origin:50% 50%}
.in-rad--1{animation-name:sz-rad1}
.in-rad--2{animation-name:sz-rad2}
@keyframes sz-rad1{0%,58%{opacity:0; transform:rotate(-70deg) scale(.6)}
  65%{opacity:1; transform:rotate(0) scale(1)} 88%{opacity:1; transform:rotate(300deg)}
  100%{opacity:0; transform:rotate(320deg)}}
@keyframes sz-rad2{0%,60%{opacity:0; transform:rotate(60deg) scale(.6)}
  67%{opacity:1; transform:rotate(0) scale(1)} 88%{opacity:1; transform:rotate(-375deg)}
  100%{opacity:0; transform:rotate(-400deg)}}
.in-riemen{animation-name:sz-riemen}
@keyframes sz-riemen{0%,64%{opacity:0} 70%,88%{opacity:1} 100%{opacity:0}}

/* ── Takt 5: die Fahnen und Nachweise ──────────────────────────────────── */
.fahne{animation-duration:var(--takt); animation-iteration-count:infinite;
  animation-timing-function:linear; animation-fill-mode:both;
  filter:drop-shadow(0 6px 14px rgba(14,33,25,.16))}
.fahne--ch{animation-name:sz-fahne-ch}
.fahne--nu{animation-name:sz-fahne-nu}
.fahne--in{animation-name:sz-fahne-in}
@keyframes sz-fahne-ch{0%,26%{opacity:0; transform:translateY(-8px)} 31%,88%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes sz-fahne-nu{0%,48%{opacity:0; transform:translateY(-8px)} 53%,88%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes sz-fahne-in{0%,68%{opacity:0; transform:translateY(-8px)} 73%,88%{opacity:1; transform:none} 100%{opacity:0}}
.nw{animation-name:sz-nw; animation-delay:calc(var(--n) * var(--takt) * .022);
  filter:drop-shadow(0 8px 18px rgba(14,33,25,.14))}
@keyframes sz-nw{0%,75%{opacity:0; transform:translateY(-12px) scale(.9)}
  80%,89%{opacity:1; transform:none} 100%{opacity:0; transform:translateY(-6px)}}
.nw-haken{stroke-dasharray:20; stroke-dashoffset:20; animation-name:sz-haken;
  animation-duration:var(--takt); animation-iteration-count:infinite;
  animation-fill-mode:both; animation-delay:calc(var(--n) * var(--takt) * .022)}
@keyframes sz-haken{0%,78%{stroke-dashoffset:20} 83%,89%{stroke-dashoffset:0} 100%{stroke-dashoffset:20}}

/* Taktanzeige: ein feiner Balken, der den Zyklus mitläuft. */
.hb-takt{position:absolute; z-index:3; left:clamp(1rem,2.4vw,2rem); right:clamp(1rem,2.4vw,2rem);
  bottom:clamp(.9rem,2vw,1.5rem); height:3px; border-radius:2px; background:rgba(14,33,25,.08);
  margin:0; overflow:hidden}
.hb-takt-balken{display:block; height:100%; border-radius:2px; width:100%;
  background:linear-gradient(90deg,var(--chemie),var(--nuklear) 52%,var(--industrie));
  transform-origin:0 50%; animation-name:sz-takt}
@keyframes sz-takt{0%{transform:scaleX(0)} 89%{transform:scaleX(1)} 100%{transform:scaleX(1)}}

@media(max-width:900px){ .hb{min-height:340px} .sz{max-height:44svh} }
@media (prefers-reduced-motion: reduce){
  /* Dämpfen statt abschalten: der Zyklus läuft, nur sechsmal langsamer. */
  .hb{--takt:168s}
  .hb-hof,.hb-raster{animation-duration:300s !important}
}

/* ── Erklärvideo: Zwei-Klick-Lösung ────────────────────────────────────── */
.zwei--film{grid-template-columns:.85fr 1.15fr}
.film{position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg,20px); overflow:hidden;
  box-shadow:var(--schatten,0 22px 50px -30px rgba(14,33,25,.5)); background:var(--surface)}
.film iframe{width:100%; height:100%; border:0; display:block}
.film-start{position:absolute; inset:0; width:100%; border:0; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:none; font:inherit; color:var(--ink)}
.film-grund{position:absolute; inset:0;
  background:linear-gradient(148deg,var(--signal-weich) 0%,#fff 55%,var(--surface) 100%)}
.film-grund::after{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(14,33,25,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(14,33,25,.05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 78%);
          mask-image:radial-gradient(closest-side,#000 20%,transparent 78%)}
.film-play{position:relative; width:5rem; height:5rem; border-radius:50%; background:var(--signal);
  display:grid; place-items:center; box-shadow:0 18px 40px -18px rgba(0,115,74,.9);
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.film-play::before{content:""; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid var(--signal); opacity:.4; animation:film-welle 3.6s ease-out infinite}
@keyframes film-welle{0%{transform:scale(.9); opacity:.5} 100%{transform:scale(1.4); opacity:0}}
.film-play svg{width:2.1rem; height:2.1rem; fill:#fff; margin-left:.2rem}
.film-start:hover .film-play{transform:scale(1.08)}
.film-txt{position:relative; text-align:center}
.film-txt b{display:block; font-family:var(--font-head); font-size:1.02rem}
.film-txt small{display:block; font-size:.84rem; color:var(--ink-2); margin-top:.15rem}
/* Der Film liegt auf der Kerntechnik-Seite — dort ist Bernstein die Farbe,
   nicht Grün. Betrifft Grund, Abspielknopf und die Welle darum. */
body[data-bereich="nuklear"] .film-grund{
  background:linear-gradient(148deg,rgba(232,166,0,.20) 0%,#fff 55%,var(--surface) 100%)}
body[data-bereich="nuklear"] .film-play{background:var(--nuklear);
  box-shadow:0 18px 40px -18px rgba(176,124,0,.9)}
body[data-bereich="nuklear"] .film-play::before{border-color:var(--nuklear)}
body[data-bereich="industrie"] .film-grund{
  background:linear-gradient(148deg,rgba(180,118,42,.18) 0%,#fff 55%,var(--surface) 100%)}
body[data-bereich="industrie"] .film-play{background:var(--industrie);
  box-shadow:0 18px 40px -18px rgba(140,88,26,.9)}
body[data-bereich="industrie"] .film-play::before{border-color:var(--industrie)}
@media(max-width:900px){ .zwei--film{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .film-play::before{animation-duration:16s} }

/* ══════════════════════════════════════════════════════════════════════════
   UNTERSEITEN-KOPF — Premium-Fassung (11.08.2026)
   Vorher ein dunkel überblendetes Foto mit schwarzer Datenblatt-Karte: auf
   einer hellen, freundlichen Seite wirkte das aufgesetzt und schwer. Jetzt
   heller Grund mit Farbhof in der BEREICHSFARBE, Text links, Foto rechts in
   einer Glaskarte — dieselbe Sprache wie der Startseiten-Hero.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf-seite{position:relative; padding-block:clamp(2.5rem,5vw,4.5rem); overflow:hidden;
  background:linear-gradient(160deg,#FFFFFF 0%,var(--surface) 100%);
  border-bottom:1px solid var(--linie); --bfarbe:var(--signal); --bweich:rgba(0,148,92,.16)}
.kopf-seite--chemie{--bfarbe:var(--chemie); --bweich:rgba(0,148,92,.18)}
.kopf-seite--nuklear{--bfarbe:var(--nuklear); --bweich:rgba(232,166,0,.24)}
.kopf-seite--industrie{--bfarbe:var(--industrie); --bweich:rgba(180,118,42,.2)}
.kopf-seite--personal{--bfarbe:#5E6E78; --bweich:rgba(94,110,120,.18)}
.kopf-hof{position:absolute; inset:0; pointer-events:none}
.kopf-hof span{position:absolute; border-radius:50%; filter:blur(46px)}
.kopf-hof span:nth-child(1){width:44%; aspect-ratio:1; right:-6%; top:-24%;
  background:radial-gradient(closest-side,var(--bweich),transparent 70%);
  animation:kh-1 38s ease-in-out infinite}
.kopf-hof span:nth-child(2){width:32%; aspect-ratio:1; left:34%; bottom:-30%;
  background:radial-gradient(closest-side,var(--bweich),transparent 70%); opacity:.7;
  animation:kh-2 47s ease-in-out infinite}
.kopf-hof span:nth-child(3){width:120%; height:120%; left:-10%; top:-10%; border-radius:0;
  filter:none; background-image:linear-gradient(rgba(14,33,25,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,33,25,.045) 1px,transparent 1px); background-size:40px 40px;
  -webkit-mask-image:radial-gradient(60% 70% at 78% 30%,#000,transparent 74%);
          mask-image:radial-gradient(60% 70% at 78% 30%,#000,transparent 74%);
  animation:kh-raster 52s linear infinite}
@keyframes kh-1{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-8%,8%) scale(1.12)}}
@keyframes kh-2{0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(9%,-6%) scale(.92)}}
@keyframes kh-raster{to{background-position:40px 40px}}
.kopf-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,4vw,3.5rem); align-items:center}
/* Rechtsseiten tragen kein Kopfbild (Marcus, 11.11.2026): Text dann über die volle Breite */
.kopf-grid--ohne-bild{grid-template-columns:1fr}
.kopf-txt .krumen{margin-bottom:1rem}
.kopf-txt h1{margin:.3rem 0 1rem}
.kopf-txt .hero-lead{max-width:52ch}
.bereichs-fahne{display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.9rem;
  padding:.4rem .95rem; border-radius:999px; background:#fff; border:1px solid var(--linie);
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:var(--ink-2)}
.bereichs-fahne i{width:.6rem; height:.6rem; border-radius:50%; background:var(--bfarbe)}
/* Die Fachbereichs-Nummer sitzt IN der Fahne: links „● Bereich Chemie", rechts
   „Fachbereich 01" — eine Zeile, ein Kasten, zwei Seiten (Marcus, 17.09.2026).
   Bis Tablet-Breite (1024 px) entfällt die Nummer: zweizeilig sah die Fahne
   zerrissen aus (Marcus, 11.11.2026). Farben im
   Dunkelmodus: Kasten über html.dark .bereichs-fahne, Nummer über --bereich-text. */
.kopf-seite--hero .bereichs-fahne{flex-wrap:wrap; row-gap:.3rem}
.bereichs-fahne .fahne-nr{margin-left:auto; padding-left:1rem; color:var(--bereich-text);
  white-space:nowrap}
@media(max-width:1024px){
  .bereichs-fahne .fahne-nr{display:none}
}
.kopf-kennwerte{margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--linie)}
.kw-titel{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stahl);
  margin-bottom:.9rem}
/* Kein Grid: bei vier Kennwerten und drei Spalten bliebe der vierte als Waise
   allein in der letzten Reihe. Als Flex-Zeile mit Umbruch verteilen sie sich
   gleichmäßig, egal ob es drei, vier oder fünf sind. */
.kopf-kennwerte dl{display:flex; flex-wrap:wrap; gap:.9rem 1.8rem; margin:0}
.kopf-kennwerte .kw{flex:1 1 8.5rem; min-width:8.5rem}
.kopf-kennwerte .kw{display:flex; flex-direction:column-reverse; gap:.1rem}
.kopf-kennwerte dt{font-size:.8rem; color:var(--ink-2)}
.kopf-kennwerte dd{margin:0; font-family:var(--font-head); font-weight:700; font-size:1.02rem;
  color:var(--ink)}
.kopf-bild{position:relative; margin:0; border-radius:var(--radius-lg,22px); overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 34px 70px -40px rgba(14,33,25,.55), 0 1px 0 rgba(255,255,255,.9) inset}
.kopf-bild img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block}
.kopf-bild::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.28),transparent 42%),
             linear-gradient(0deg,var(--bweich),transparent 46%)}
.kopf-glanz{position:absolute; inset:-40%; z-index:2; pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  animation:kopf-glanz 17s ease-in-out infinite}
@keyframes kopf-glanz{0%,70%{transform:translateX(-60%)} 94%,100%{transform:translateX(60%)}}
@media(max-width:900px){
  .kopf-grid{grid-template-columns:1fr}
  .kopf-bild{order:-1}
}
@media (prefers-reduced-motion: reduce){
  .kopf-hof span,.kopf-glanz{animation-duration:220s !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   BEREICHS-SCROLLYTELLING (Nuklear · Industrie)
   Jede Bereichsseite erzählt ihre eigene Geschichte mit eigenem Objekt und
   eigenem Kennwert (REF-C). Mechanik: Vorlagen/scrolly.js.
   ══════════════════════════════════════════════════════════════════════════ */
.bereich-story{position:relative; --bfarbe:var(--signal)}
.bs--nuklear{--bfarbe:var(--nuklear); background:linear-gradient(168deg,#FFFDF7,#FFF9EC)}
.bs--industrie{--bfarbe:var(--industrie); background:linear-gradient(168deg,#FFFDFA,#FBF5EC)}
.bs-buehne{height:100svh; display:flex; align-items:center}
.bs-grid{display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(2rem,4vw,3.5rem);
  align-items:center; width:min(100% - 2.5rem, var(--wrap,1220px)); margin-inline:auto}
.bs-links h2{margin:.3rem 0 1rem}
.bs-links .lead{max-width:46ch; margin-bottom:1.5rem}
.bs-kapitel{display:grid; gap:.62rem; max-width:46ch}
.bs-kapitel p{margin:0; padding-left:1.15rem; position:relative; font-size:1rem; line-height:1.5;
  color:var(--ink-2)}
.bs-kapitel p::before{content:""; position:absolute; left:0; top:.6em; width:.44rem; height:.44rem;
  border-radius:50%; background:var(--bfarbe)}
.bs-rechts{position:relative}
.bs-svg{width:100%; height:auto; max-height:70svh; display:block}
.bs-svg text{font-family:var(--font-body)}
.bs-titel{font-size:17px; font-weight:700; fill:var(--ink-2); font-family:var(--font-head)}
.bs-titel--gut{fill:var(--signal-text)}
.bs-mini{font-size:13px; font-weight:600; fill:var(--ink)}
.bs-wert{display:flex; align-items:baseline; justify-content:flex-end; gap:.6rem; margin:.4rem 0 0;
  padding-top:.9rem; border-top:1px solid var(--linie)}
.bs-wert span{font-family:var(--font-head); font-size:clamp(1.8rem,3vw,2.4rem); line-height:1;
  color:var(--bfarbe); font-variant-numeric:tabular-nums}
.bs-wert small{font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)}
/* Sekundärbewegung: der Kran wiegt, die Turbine dreht, der Messbalken wandert. */
.bs-kran{animation:bs-wiegen 9s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 0}
@keyframes bs-wiegen{0%,100%{transform:rotate(-.7deg)} 50%{transform:rotate(.7deg)}}
.bs-turbine{animation:bs-dreh 6s linear infinite; transform-box:fill-box; transform-origin:50% 50%}
@keyframes bs-dreh{to{rotate:360deg}}
.bs-scan{animation:bs-scan 4.5s ease-in-out infinite}
@keyframes bs-scan{0%,100%{transform:translate(330px,246px)} 50%{transform:translate(330px,404px)}}
.bs-funke{animation:bs-funke 1.9s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 50%}
@keyframes bs-funke{0%,100%{opacity:.25; scale:.85} 50%{opacity:1; scale:1.12}}
.bs-buehne .btn svg{width:1.1em; height:1.1em; max-height:none}
@media(max-width:900px){
  .bs-grid{grid-template-columns:1fr; gap:1.4rem}
  .bs-rechts{order:-1}
  .bs-svg{max-height:36svh}
  .bs-wert{justify-content:flex-start}
  .bs-links .lead{margin-bottom:1rem}
}
@media (prefers-reduced-motion: reduce){
  .bs-kran,.bs-turbine,.bs-scan,.bs-funke{animation-duration:60s !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   DUNKELMODUS FÜR DIE NEUEN BAUSTEINE (11.08.2026)
   Kopf, Hero-Bühne, Laufband, Türen, Unterseiten-Kopf und die Schaustücke
   waren mit festen hellen Werten gebaut (#fff, #F4F5F5, rgba(255,255,255,…)).
   Im Dunkelmodus blieb der ganze obere Teil der Seite hell — inklusive des
   weißen Logos auf weißem Grund.

   Grundsatz: NIE ganz schwarz. Der dunkelste Ton ist `--tief:#091410`, die
   Flächen darüber sind gestuftes Dunkelgrün (`--bg` … `--surface-3`), damit
   Tiefe entsteht statt eines Lochs.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Kopf ──────────────────────────────────────────────────────────────── */
html.dark .site-header.kopf--b{background:var(--bg)}
html.dark .kopf--b .kopf-oben{background:var(--bg); border-bottom-color:var(--linie)}
html.dark .kopf-reiter{background:var(--surface); border-bottom-color:var(--linie)}
html.dark .reiter{background:var(--surface)}
html.dark .reiter:hover,html.dark .reiter[aria-current]{background:var(--surface-2)}
html.dark .reiter-icon{background:var(--surface-2); border-color:var(--linie-stark)}
html.dark .reiter--nuklear .reiter-icon svg,
html.dark .b-link--nuklear .b-icon svg{stroke:#F0B93A}
html.dark .reiter-txt small{color:var(--ink-2)}
html.dark .kopf-kompakt{border-right-color:var(--linie)}
html.dark .b-link{color:var(--ink)}
html.dark .kopf--b .menue--schlank > a{color:var(--ink-2)}
html.dark .kopf--b .menue--schlank > a:hover{color:var(--ink)}
html.dark .site-header.kopf--b{box-shadow:none}
html.dark.gescrollt .site-header.kopf--b{box-shadow:0 8px 26px -18px rgba(0,0,0,.9)}

/* ── Hero-Bühne: Glas bleibt Glas, nur dunkel ─────────────────────────── */
html.dark section.split{background:linear-gradient(112deg,rgba(47,191,136,.13) 0%,var(--bg) 46%,
  var(--surface) 78%,var(--bg) 100%)}
html.dark .split-txt{background:none}
html.dark .split-buehne{background:none}
html.dark .hb-grund{background:linear-gradient(152deg,#16241E 0%,#111C18 46%,#18271F 100%)}
html.dark .hb-hof--1{background:radial-gradient(closest-side,rgba(47,191,136,.3),transparent 70%)}
html.dark .hb-hof--2{background:radial-gradient(closest-side,rgba(240,185,58,.26),transparent 70%)}
html.dark .hb-raster{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                                     linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
html.dark .hb-ring{border-color:rgba(255,255,255,.09)}
html.dark .hb-ring--2{border-color:rgba(47,191,136,.24)}
html.dark .hb-ring--3{border-color:rgba(255,255,255,.06)}
html.dark .gk{background:linear-gradient(158deg,rgba(40,58,50,.86),rgba(28,45,37,.6));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.09) inset}
html.dark .gk-glanz{background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%)}
html.dark .gk-fuss b{color:var(--ink)}
html.dark .gk-fuss small{color:var(--ink-2)}
html.dark .nw-chip{background:rgba(34,52,44,.9); border-color:rgba(255,255,255,.12)}
html.dark .nw-chip b{color:var(--ink)}
/* Die Mini-Objekte sind auf hellen Grund gezeichnet — im Dunkeln bekommen sie
   eine eigene helle Scheibe, statt als graue Flecken zu verschwinden. */
html.dark .gk-bild{background:rgba(255,255,255,.9); border-radius:12px}

/* ── Laufband ──────────────────────────────────────────────────────────── */
html.dark .laufband{background:var(--surface)}
/* `brightness` hilft nur hellen Logos — INEOS und Bayer sind fast schwarz und
   blieben unsichtbar. `invert` dreht alle auf hell, `grayscale` nimmt vorher
   die Fremdfarben raus, damit nichts kippt (orange würde sonst blau). */
html.dark .laufband-zug img{filter:grayscale(1) invert(1) opacity(.55)}
html.dark .laufband-zug img:hover{filter:grayscale(0) invert(0) opacity(1)}

/* ── Türen, Listen, Stationen ──────────────────────────────────────────── */
html.dark .tuer--chemie{background:linear-gradient(180deg,#16291F 0%,var(--surface) 60%)}
html.dark .tuer--nuklear{background:linear-gradient(180deg,#2A2312 0%,var(--surface) 60%)}
html.dark .tuer--industrie{background:linear-gradient(180deg,#2A2116 0%,var(--surface) 60%)}
html.dark .tuer{border-color:var(--linie)}
html.dark .tuer--nuklear .mehr,html.dark .tuer--nuklear .tuer-nr{color:#F0B93A}
html.dark .ortliste div,html.dark .nachweis{background:var(--surface)}
html.dark .ortliste,html.dark .nachweise{background:var(--linie); border-color:var(--linie)}
html.dark .direkt-zeile:hover{background:var(--surface-2)}
html.dark .station-kreis{background:var(--surface-2); border-color:var(--signal)}
html.dark .weg{background:var(--surface)}
html.dark .aufruf-innen{background:var(--surface-2); border-color:var(--linie);
  border-left-color:var(--signal)}
html.dark .aufruf-innen b{color:var(--ink)}

/* ── Unterseiten-Kopf ──────────────────────────────────────────────────── */
html.dark .kopf-seite{background:linear-gradient(160deg,var(--bg) 0%,var(--surface) 100%);
  border-bottom-color:var(--linie)}
html.dark .kopf-seite--chemie{--bweich:rgba(47,191,136,.22)}
html.dark .kopf-seite--nuklear{--bfarbe:#F0B93A; --bweich:rgba(240,185,58,.22)}
html.dark .kopf-seite--industrie{--bweich:rgba(212,150,70,.22)}
html.dark .kopf-hof span:nth-child(3){
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
html.dark .bereichs-fahne{background:var(--surface-2); border-color:var(--linie-stark); color:var(--ink-2)}
html.dark .kopf-bild{border-color:rgba(255,255,255,.12)}
html.dark .kopf-glanz{background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%)}
html.dark .kopf-kennwerte{border-top-color:var(--linie)}

/* ── Schaustücke: heller Zeichengrund, damit die SVGs lesbar bleiben ───── */
html.dark .hero-story{background:linear-gradient(158deg,rgba(47,191,136,.1) 0%,var(--bg) 62%)}
html.dark .bs--nuklear{background:linear-gradient(168deg,#22200F,var(--bg))}
html.dark .bs--industrie{background:linear-gradient(168deg,#241E14,var(--bg))}
html.dark .hs-rechts,html.dark .bs-rechts{background:rgba(255,255,255,.94);
  border-radius:var(--radius-lg,20px); padding:1.2rem}
html.dark .hs-wert,html.dark .bs-wert{border-top-color:rgba(14,33,25,.14)}
html.dark .hs-wert small,html.dark .bs-wert small{color:#4E5F57}
html.dark .bs--nuklear .bs-wert span{color:#8A6200}
html.dark .hs-kapitel p,html.dark .bs-kapitel p{color:var(--ink-2)}

/* ── Video ─────────────────────────────────────────────────────────────── */
html.dark .film{background:var(--surface)}
html.dark .film-grund{background:linear-gradient(148deg,rgba(47,191,136,.12) 0%,var(--surface) 55%,var(--surface-2) 100%)}
html.dark .film-grund::after{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                                              linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
html.dark .film-txt b{color:var(--ink)}

/* ── Fuß: hell in Sand → dunkel, aber nicht schwarz ───────────────────── */
html.dark .site-footer.fuss--b{background:var(--surface); color:var(--ink-2)}
html.dark .fuss--b h3{color:var(--ink)}
html.dark .fuss--b a{color:var(--ink-2)}
html.dark .fuss--b a:hover{color:var(--signal-text)}
html.dark .fuss--b .footer-siegel li{background:var(--surface-2); border-color:var(--linie);
  color:var(--ink-2)}
html.dark .fuss--b .f-schluss{border-top-color:var(--linie)}
html.dark .f-karte{background:var(--tief); border:1px solid var(--linie)}
html.dark .fuss--b .footer-copy{color:var(--stahl)}
/* Im dunklen Fuß trägt das helle Logo — im hellen Sand-Fuß das dunkle. */
html.dark .fuss--b .footer-logo{content:url('img/coplaburg-logo-hell.webp')}

/* Im Dunkelmodus ist `--signal` ein helles Grün — weiße Schrift darauf kommt
   nur auf 2,1:1. Dunkler Text auf dem hellen Grün ist der lesbare Weg. */
html.dark .btn,html.dark .nav-cta,html.dark .filter-chip.an{color:#0B1F17}
html.dark .btn:hover,html.dark .nav-cta:hover{color:#08170F}
html.dark .btn--geist{color:var(--signal-text); background:transparent}
html.dark .btn--geist:hover{background:var(--signal-weich); color:var(--signal-text)}
html.dark .film-play svg{fill:#0B1F17}

/* Das Vorschaubild lag vorher gar nicht vor — der Kasten war leer und man
   wusste nicht, was einen erwartet. Der Grund liegt jetzt ALS SCHLEIER darüber,
   damit Play-Knopf und Text lesbar bleiben. */
.film-bild{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.film-grund{background:linear-gradient(180deg,rgba(14,33,25,.15) 0%,rgba(14,33,25,.5) 100%)}
.film-grund::after{opacity:.45}
.film-txt b{color:#fff; text-shadow:0 2px 12px rgba(14,33,25,.6)}
.film-txt small{color:rgba(255,255,255,.86); text-shadow:0 1px 8px rgba(14,33,25,.6)}
.film-start{color:#fff}
html.dark .film-grund{background:linear-gradient(180deg,rgba(8,18,14,.2) 0%,rgba(8,18,14,.62) 100%)}
html.dark .film-txt b{color:#fff}


/* ══ Takt 0: die Kulisse ═══════════════════════════════════════════════
   „Bewusst arm an Detail" (HERE WE GO §3) — sie trägt den Raum, sie ist nicht
   der Hauptdarsteller. Deshalb tritt sie zuerst auf und bleibt dann still. */
.ku-fern{animation-name:sz-kulisse}
.ku-bruecke{animation-name:sz-kulisse-2}
.ku-dunst{animation-name:sz-dunst}
@keyframes sz-kulisse{0%{opacity:0; transform:translateY(10px)}
  6%,92%{opacity:.55; transform:none} 100%{opacity:0}}
@keyframes sz-kulisse-2{0%,2%{opacity:0} 8%,92%{opacity:.7} 100%{opacity:0}}
@keyframes sz-dunst{0%,3%{opacity:0} 9%,92%{opacity:1} 100%{opacity:0}}

/* ══ Takt 5: DER PRÜFBLICK — der Filmmoment ════════════════════════════
   Die Prüflinie wandert über die fertige Anlage, hinter ihr stehen die
   Schnitte offen. Vorbild: der Röntgenblick bei HERE WE GO — „durchleuchtet,
   nicht zerlegt". Danach schließt sich alles wieder. */
.pr-linie{animation-name:sz-scan; animation-timing-function:cubic-bezier(.5,0,.5,1)}
@keyframes sz-scan{0%,64%{opacity:0; transform:translateX(40px)}
  66%{opacity:1} 82%{opacity:1; transform:translateX(700px)}
  85%,100%{opacity:0; transform:translateX(720px)}}
.pr-schnitt{animation-name:sz-schnitt}
.pr-schnitt--rohr{animation-delay:calc(var(--takt) * .02)}
.pr-schnitt--rad{animation-delay:calc(var(--takt) * .04)}
.pr-schnitt--turm{animation-delay:calc(var(--takt) * .07)}
/* Kein transform: scale() auf einer SVG-Gruppe rechnet um den Ursprung 0,0,
   nicht um die Gruppenmitte — der Schnitt flog dadurch von links oben ein.
   Er soll an derselben Stelle einfach aufblenden. */
@keyframes sz-schnitt{0%,66%{opacity:0} 70%,84%{opacity:1} 88%,100%{opacity:0}}
.pr-naht,.pr-zug{animation-name:sz-naht; animation-duration:var(--takt);
  animation-iteration-count:infinite; animation-fill-mode:both}
@keyframes sz-naht{0%,68%{opacity:0} 72%,84%{opacity:1} 88%,100%{opacity:0}}
.sz-mass{font-size:11px; font-weight:600; fill:var(--ink-2); font-family:var(--font-body)}
.sz-scan{font-size:12px; font-weight:700; fill:#fff; font-family:var(--font-head)}

/* ══════════════════════════════════════════════════════════════════════════
   HERO „Die Fahrt durchs Werk" — Parallaxe statt Kamerafahrt
   Vorbild: Takt 0 aus HERE WE GO (Loop ohne Scrollen, Kamera fährt mit, die
   Kulisse zieht in Ebenen vorbei). Dort echtes 3D — hier bewusst nicht, weil
   im Hero kein WebGL laufen soll. Dieselbe Wirkung über vier Ebenen mit
   unterschiedlichen Geschwindigkeiten. Davor wandert der Fokus im 6-Sekunden-
   Takt durch die drei Bereiche: nicht die Kamera dreht sich, der Blick.
   ══════════════════════════════════════════════════════════════════════════ */
.hf{position:relative; width:100%; min-height:clamp(460px,56vw,660px);
  border-radius:var(--radius-lg,20px); overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end; padding:clamp(1rem,2.4vw,2rem)}
.hf-himmel{position:absolute; inset:0;
  background:linear-gradient(178deg,#EFF7F2 0%,#FBFDFC 42%,#F4F9F6 100%)}
.hf-himmel::after{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 54% at 22% 22%, rgba(0,148,92,.16), transparent 62%),
             radial-gradient(56% 46% at 84% 34%, rgba(232,166,0,.14), transparent 64%)}
.hf-ebene{position:absolute; left:0; right:0; overflow:hidden; pointer-events:none}
.hf-ebene svg{display:block; width:200%; height:100%}
.hf-ebene--4{top:12%; height:44%; opacity:.34; color:var(--stahl);
  animation:hf-zug 120s linear infinite}
.hf-ebene--3{top:20%; height:46%; opacity:.55; animation:hf-zug 74s linear infinite}
.hf-ebene--2{top:30%; height:48%; opacity:.72; animation:hf-zug 46s linear infinite}
.hf-ebene--1{bottom:-4%; height:42%; opacity:.9; animation:hf-zug 21s linear infinite}
@keyframes hf-zug{to{transform:translateX(-50%)}}
/* Der Boden trennt Kulisse und Vordergrund und gibt der Fahrt eine Kante. */
.hf-boden{position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg,rgba(212,224,217,.6) 0%,rgba(244,248,246,.95) 46%,#F6FAF8 100%)}
.hf-boden::before{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--linie-stark),transparent)}

/* ── Die drei Kapseln: der Fokus wandert im 6-Sekunden-Takt ────────────── */
.hf-kapseln{position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.5rem,1.2vw,.9rem); width:100%; align-items:end}
.kp{position:relative; overflow:hidden; border-radius:16px;
  padding:clamp(.75rem,1.5vw,1.05rem);
  background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 20px 40px -26px rgba(14,33,25,.5), 0 1px 0 rgba(255,255,255,.9) inset;
  animation:kp-fokus 18s ease-in-out infinite; animation-delay:calc((var(--k) - 1) * 6s)}
/* Scharfgestellt heißt: kommt nach vorn, wird heller, die Messbalken laufen. */
@keyframes kp-fokus{
  0%,2%{transform:translateY(0) scale(1); box-shadow:0 20px 40px -26px rgba(14,33,25,.5)}
  8%,28%{transform:translateY(-14px) scale(1.045);
    box-shadow:0 30px 58px -28px rgba(14,33,25,.62), 0 1px 0 rgba(255,255,255,.95) inset}
  36%,100%{transform:translateY(0) scale(1); box-shadow:0 20px 40px -26px rgba(14,33,25,.5)}}
.kp-kante{position:absolute; left:0; right:0; top:0; height:3px}
.kp--chemie{--f:var(--chemie)} .kp--nuklear{--f:var(--nuklear)} .kp--industrie{--f:var(--industrie)}
.kp-kante{background:linear-gradient(90deg,var(--f),transparent)}
.kp-glanz{position:absolute; inset:-45%; pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.92) 50%,transparent 58%);
  animation:kp-glanz 18s ease-in-out infinite; animation-delay:calc((var(--k) - 1) * 6s)}
@keyframes kp-glanz{0%,4%{transform:translateX(-62%)} 20%,100%{transform:translateX(62%)}}
.kp-ikon{display:block; width:clamp(2.4rem,4vw,3.1rem); height:clamp(2.4rem,4vw,3.1rem);
  color:var(--f); margin-bottom:.7rem}
.kp-ikon svg{width:100%; height:100%; filter:drop-shadow(0 5px 8px rgba(14,33,25,.18))}
.kp b{display:block; font-family:var(--font-head); font-size:clamp(.9rem,1.25vw,1.06rem);
  line-height:1.2; color:var(--ink)}
.kp small{display:block; font-size:.74rem; color:var(--ink-2); margin-top:.15rem; line-height:1.35}
/* Drei Messbalken, die beim Scharfstellen hochlaufen — die Kapsel „misst". */
.kp-mess{display:flex; gap:3px; align-items:flex-end; height:1.1rem; margin-top:.7rem}
.kp-mess i{display:block; width:8px; border-radius:2px; background:var(--f); opacity:.28;
  height:30%; transform-origin:50% 100%;
  animation:kp-mess 18s ease-in-out infinite}
.kp-mess i:nth-child(1){animation-delay:calc((var(--k) - 1) * 6s + .1s)}
.kp-mess i:nth-child(2){animation-delay:calc((var(--k) - 1) * 6s + .3s)}
.kp-mess i:nth-child(3){animation-delay:calc((var(--k) - 1) * 6s + .5s)}
@keyframes kp-mess{0%,4%{height:30%; opacity:.28}
  12%,26%{height:100%; opacity:.9} 34%,100%{height:30%; opacity:.28}}
.hf-fuss{position:absolute; z-index:3; left:clamp(1rem,2.4vw,2rem); top:clamp(1rem,2.4vw,1.6rem);
  margin:0; display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9); border-radius:999px; padding:.4rem .9rem}
.hf-fuss span{width:.5rem; height:.5rem; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 4px var(--signal-weich); animation:hf-puls 3.2s ease-in-out infinite}
@keyframes hf-puls{0%,100%{opacity:1} 50%{opacity:.45}}

html.dark .hf-himmel{background:linear-gradient(178deg,#18261F 0%,#131E19 44%,#17251E 100%)}
html.dark .hf-boden{background:linear-gradient(180deg,rgba(30,46,38,.6) 0%,var(--bg) 52%,var(--bg) 100%)}
html.dark .hf-ebene{filter:brightness(.5)}
html.dark .kp{background:linear-gradient(158deg,rgba(40,58,50,.9),rgba(28,45,37,.66));
  border-color:rgba(255,255,255,.12)}
html.dark .kp b{color:var(--ink)} html.dark .kp small{color:var(--ink-2)}
html.dark .hf-fuss{background:rgba(34,52,44,.86); border-color:rgba(255,255,255,.12)}

@media(max-width:900px){ .hf{min-height:340px} .kp-ikon{margin-bottom:.5rem} }
@media (prefers-reduced-motion: reduce){
  .hf-ebene{animation-duration:900s !important}
  .kp,.kp-glanz,.kp-mess i{animation-duration:120s !important}
  .hf-fuss span{animation-duration:14s}
}

/* ══ Das Schaustück unten: dieselbe Anlage-Szene, vom Scroll gefahren ═══ */
.anlage-story{position:relative; height:270vh;
  background:linear-gradient(168deg,var(--surface) 0%,var(--bg) 100%)}
.as-buehne{position:sticky; top:0; height:100svh; display:flex; align-items:center}
.as-grid{display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(2rem,4vw,3.5rem);
  align-items:center; width:min(100% - 2.5rem, var(--wrap,1220px)); margin-inline:auto}
.as-links h2{margin:.3rem 0 1.2rem}
.as-kapitel{display:grid; gap:.62rem; max-width:46ch}
.as-kapitel p{margin:0; padding-left:1.15rem; position:relative; font-size:1rem; line-height:1.5;
  color:var(--ink-2); opacity:.28; transform:translateY(4px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1)}
.as-kapitel p.an{opacity:1; transform:none}
.as-kapitel p::before{content:""; position:absolute; left:0; top:.6em; width:.44rem; height:.44rem;
  border-radius:50%; background:var(--signal)}
.as-kapitel b{color:var(--ink); font-weight:600}
.as-akt{margin-top:1.6rem}
/* Die Choreografie steht still und wird per negativem Delay gefahren. */
.hb--scroll *{animation-play-state:paused !important;
  animation-delay:calc(var(--fortschritt,0) * var(--takt) * -1) !important}
.hb--scroll{--takt:32s}
/* Bewegung reduzieren: das Skript setzt .hb--ruhig. Vorher stand hier
   derselbe Wert wie in .hb--scroll — die Regel war wirkungslos. */
.hb--ruhig{--takt:96s}
@media(max-width:900px){
  .anlage-story{height:250vh}
  .as-grid{grid-template-columns:1fr; gap:1.2rem}
  .as-rechts{order:-1}
}

/* ══════════════════════════════════════════════════════════════════════════
   BEREICHS-OBJEKT — dieselbe Machart wie im Hero, überall wiederverwendbar
   Marcus: „diese Art soll bei anderen Bereichen auch kommen, auf jeder
   Unterseite." Plastischer Körper, Licht fest oben links, EIN Akzent in der
   Bereichsfarbe, Eigenbewegung im Endlos-Loop (kein Scroll nötig).
   ══════════════════════════════════════════════════════════════════════════ */
.ob{width:100%; height:auto; --f:var(--signal); filter:drop-shadow(0 10px 16px rgba(14,33,25,.14))}
.ob--chemie{--f:var(--chemie)} .ob--nuklear{--f:var(--nuklear)} .ob--industrie{--f:var(--industrie)}
.ob .ob-schatten{fill:#0E2119; opacity:.1; animation:ob-schatten 7s ease-in-out infinite}
@keyframes ob-schatten{0%,100%{opacity:.1; transform:scaleX(1)} 50%{opacity:.06; transform:scaleX(.88)}}
.ob .ob-glas{fill:#F7FAF8; stroke:none}
.ob .ob-kante{fill:none; stroke:#A9BCB1; stroke-width:2}
.ob .ob-hals{fill:#DCE6E0; stroke:#A9BCB1; stroke-width:1.4}
.ob .ob-glanz-p{fill:#fff; opacity:.85}
.ob .ob-koerper{fill:#E2EBE6; stroke:none}
.ob--nuklear{--turm1:#F6F9F7; --turm2:#E2EBE6; --turm3:#C6D4CC}
.ob .ob-licht{fill:#FBFDFC; opacity:.9}
.ob .ob-oeffnung{fill:#D2DED7; stroke:#A9BCB1; stroke-width:1.2}
.ob .ob-tiefe{fill:#B4C6BB}
.ob .ob-band{fill:var(--f); opacity:.85}
.ob .ob-band--2{opacity:.45}
.ob .ob-sockel{fill:#D2DED7; stroke:#A9BCB1; stroke-width:1.2}
.ob .ob-radflaeche,.ob .ob-zahn rect{fill:#E4EDE8; stroke:#A9BCB1; stroke-width:1.3}
.ob .ob-nabe{fill:#C6D4CC; stroke:#A9BCB1; stroke-width:1.1}
.ob .ob-nabe-kern{fill:var(--f)}
.ob .ob-rad2,.ob .ob-zahn2 rect{fill:var(--f); fill-opacity:.9; stroke:#8A5A1E; stroke-width:1}
.ob .ob-nabe2{fill:#fff}
/* Bewegung: Flüssigkeit schwappt, Blasen steigen, Dampf zieht, Räder kämmen. */
.ob .ob-fluid{animation:ob-schwapp 7.5s ease-in-out infinite; opacity:.88}
.ob .ob-fluid--2{animation-duration:9.5s; animation-direction:reverse}
@keyframes ob-schwapp{0%,100%{transform:translateX(-7px) rotate(-1.4deg)}
                      50%{transform:translateX(7px) rotate(1.4deg)}}
.ob .ob-blase{fill:#fff; opacity:0; animation:ob-blase 5.4s ease-in infinite}
.ob .ob-blase--2{animation-duration:7s; animation-delay:-2.1s}
.ob .ob-blase--3{animation-duration:6.2s; animation-delay:-4.2s}
@keyframes ob-blase{0%{transform:translateY(0); opacity:0}
                    18%{opacity:.72} 100%{transform:translateY(-46px); opacity:0}}
.ob .ob-dampf{fill:#F7EEDA; opacity:0; animation:ob-dampf 9s ease-out infinite;
  animation-delay:calc(var(--n) * -2.2s)}
@keyframes ob-dampf{0%{transform:translateY(6px) scale(.45); opacity:0}
                    22%{opacity:.9} 100%{transform:translateY(-42px) scale(1.6); opacity:0}}
.ob .ob-rad{transform-box:fill-box; transform-origin:50% 50%}
.ob .ob-rad--1{animation:ob-dreh 26s linear infinite}
.ob .ob-rad--2{animation:ob-dreh 16s linear infinite reverse}
@keyframes ob-dreh{to{rotate:360deg}}
/* Beim Überfahren der Kachel zieht das Objekt an — die Karte reagiert. */
.tuer:hover .ob .ob-rad--1{animation-duration:9s}
.tuer:hover .ob .ob-rad--2{animation-duration:5.5s}
.tuer:hover .ob .ob-fluid{animation-duration:3.4s}
html.dark .ob .ob-glas{fill:#F7FAF8}
@media (prefers-reduced-motion: reduce){
  /* Dämpfen, nicht töten. 120 s für alle Nachfahren hatte jedes Verhältnis
     gelöscht — Blase und Zahnrad liefen gleich schnell, also gar nicht.
     Jetzt behält jedes Teil seinen Rhythmus, nur rund viermal langsamer.
     Die neuen Bewegungen der Unterseiten-Objekte stehen im Block
     UNTERSEITEN-OBJEKTE am Dateiende. */
  .ob .ob-schatten{animation-duration:26s !important}
  .ob .ob-blase{animation-duration:22s !important}
  .ob .ob-fluid{animation-duration:28s !important}
  .ob .ob-fluid--2{animation-duration:36s !important}
  .ob .ob-dampf{animation-duration:34s !important}
  .ob .ob-rad--1{animation-duration:96s !important}
  .ob .ob-rad--2{animation-duration:60s !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   KORREKTUREN 12.08. — die Schaustücke sollen nicht wie eingeklebte Grafiken
   wirken, sondern mit ihrem Abschnitt verschmelzen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Startseite: „Die Anlage im Takt" ──────────────────────────────────── */
/* Der Kasten hatte einen eigenen hellen Grund, die Sektion einen anderen —
   dadurch sah es aus, als sei ein Bild hineinkopiert. Jetzt trägt die SEKTION
   den Verlauf, die Bühne ist durchsichtig. */
.anlage-story{overflow:clip; background:
  radial-gradient(62% 52% at 74% 34%, rgba(0,148,92,.1), transparent 66%),
  radial-gradient(48% 44% at 22% 74%, rgba(232,166,0,.09), transparent 68%),
  linear-gradient(168deg,#F7FBF8 0%,#FFFFFF 52%,#F4F9F6 100%)}
.anlage-story .hb--scroll{background:none; border-radius:0; overflow:visible}
.anlage-story .hb--scroll .hb-grund{background:none}
/* Marcus: „ich meinte den Hintergrund des Bereiches inkl. der Texte und Buttons,
   da soll die Kulisse hin, weil es zu weiß und leer ist."
   Also NICHT die Grafik vergrößern — die Kulisse wird als eigene, sehr blasse
   Ebene über die GANZE Sektionsbreite gelegt, auch hinter die linke Spalte.
   In der Animation selbst kommt nichts Neues dazu; sie bleibt wie sie war. */
.anlage-story .as-buehne::before{content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none; opacity:.5;
  background:
    /* Schornstein links */
    linear-gradient(180deg,transparent 6%,rgba(14,33,25,.05) 6%,rgba(14,33,25,.05) 30%,transparent 30%)
      0 0/3px 100% no-repeat,
    /* Hallensilhouetten — eine FERNE Skyline im oberen Drittel, kein
       Vordergrund. Marcus: „die muss nach oben und in den hintergrund,
       unten soll frei bleiben, nur eine kulisse oben leicht sichtbar." */
    linear-gradient(180deg,transparent 14%,rgba(14,33,25,.05) 14%,rgba(14,33,25,.05) 30%,transparent 30%) 4% 0/13% 100% no-repeat,
    linear-gradient(180deg,transparent 19%,rgba(14,33,25,.04) 19%,rgba(14,33,25,.04) 30%,transparent 30%) 19% 0/9% 100% no-repeat,
    linear-gradient(180deg,transparent 11%,rgba(14,33,25,.055) 11%,rgba(14,33,25,.055) 30%,transparent 30%) 31% 0/15% 100% no-repeat,
    linear-gradient(180deg,transparent 21%,rgba(14,33,25,.035) 21%,rgba(14,33,25,.035) 30%,transparent 30%) 49% 0/11% 100% no-repeat,
    linear-gradient(180deg,transparent 16%,rgba(14,33,25,.045) 16%,rgba(14,33,25,.045) 30%,transparent 30%) 63% 0/14% 100% no-repeat,
    linear-gradient(180deg,transparent 23%,rgba(14,33,25,.04) 23%,rgba(14,33,25,.04) 30%,transparent 30%) 80% 0/12% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 16%,#000 26%,transparent 40%);
          mask-image:linear-gradient(180deg,transparent 2%,#000 16%,#000 26%,transparent 40%)}
/* Die Rohrbrücke läuft quer durch den ganzen Abschnitt, hinter allem. */
/* Die Rohrbrücke gehört auf dieselbe Ferne-Ebene wie die Skyline, nicht
   quer durch den Vordergrund. */
.anlage-story .as-buehne::after{content:""; position:absolute; left:0; right:0; top:29%;
  height:46px; z-index:0; pointer-events:none; opacity:.3;
  background:
    linear-gradient(180deg,rgba(14,33,25,.09) 0 3px,transparent 3px) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(14,33,25,.07) 0 2px,transparent 2px 74px) 0 3px/100% 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.anlage-story .as-grid{position:relative; z-index:2}
/* Das Raster darf über den ganzen Abschnitt laufen, nicht nur über den Kasten. */
.anlage-story::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(14,33,25,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(14,33,25,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 52% at 70% 30%,#000,transparent 76%);
          mask-image:radial-gradient(80% 52% at 70% 30%,#000,transparent 76%)}
.anlage-story .wrap{position:relative; z-index:2}
/* Weiß raus: die Bodenplatte war reinweiß und stach als Rechteck heraus. */
.anlage-story .pl-flaeche{opacity:.9}
/* Die noch nicht erreichten Schritte deutlicher zurücknehmen, damit man den
   aktuellen erkennt (Marcus: „die Schritte erkennt man noch nicht gut"). */
.as-kapitel p{opacity:.16}
.as-kapitel p.an{opacity:1}
.as-kapitel p.an + p:not(.an){opacity:.16}

/* ── Bereichsseiten: Hintergrund darf nicht die Fußfarbe tragen ────────── */
/* `.bs--industrie` lag auf demselben Ton wie der Footer — zwei gleich
   getönte Flächen direkt hintereinander lesen sich als Fehler. */
.bs--industrie{background:
  radial-gradient(58% 50% at 76% 30%, rgba(180,118,42,.12), transparent 66%),
  linear-gradient(168deg,#FFFDFA 0%,#FFFFFF 54%,#FDF8F1 100%)}
.bs--nuklear{background:
  radial-gradient(58% 50% at 76% 30%, rgba(232,166,0,.13), transparent 66%),
  linear-gradient(168deg,#FFFDF6 0%,#FFFFFF 54%,#FFFBEF 100%)}

/* ══════════════════════════════════════════════════════════════════════════
   BEREICHS-SCHAUSTÜCKE auf die Glas-Optik der Startseite gebracht
   Marcus: „die Animationen sind sehr langweilig und passen nicht zum Rest,
   sind auch nicht so hell und glass-effect-like wie auf der Startseite."

   Die Szenen selbst bleiben vorerst — was sich ändert, ist der Raum: heller
   Grund mit Farbhof in der Bereichsfarbe, die Zeichnung liegt auf einer
   Glastafel mit Innenkante, Glanz und Spiegelung. Damit sprechen alle Stücke
   dieselbe Sprache.
   ══════════════════════════════════════════════════════════════════════════ */
.bereich-story{position:relative; overflow:clip}
.bereich-story::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(14,33,25,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(14,33,25,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(78% 58% at 72% 44%,#000,transparent 78%);
          mask-image:radial-gradient(78% 58% at 72% 44%,#000,transparent 78%)}
.bereich-story .wrap{position:relative; z-index:2}

/* Die Zeichnung bekommt eine Glastafel — dieselbe wie im Hero. */
.bs-rechts{position:relative; padding:clamp(1rem,2.2vw,1.8rem);
  border-radius:var(--radius-lg,20px);
  background:linear-gradient(158deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 28px 56px -32px rgba(14,33,25,.48), 0 1px 0 rgba(255,255,255,.95) inset}
.bs-rechts::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  border-radius:var(--radius-lg,20px) var(--radius-lg,20px) 0 0;
  background:linear-gradient(90deg,var(--bfarbe),transparent)}
/* Der Glanz wandert langsam über die Tafel — dasselbe Zeichen wie überall. */
.bs-rechts::after{content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; overflow:hidden;
  background:linear-gradient(112deg,transparent 44%,rgba(255,255,255,.55) 50%,transparent 56%);
  background-size:260% 100%; background-position:-60% 0;
  animation:bs-glanz 19s ease-in-out infinite}
@keyframes bs-glanz{0%,72%{background-position:-60% 0} 94%,100%{background-position:160% 0}}
/* Spiegelung unter der Tafel */
.bs-rechts .bs-svg{position:relative; z-index:1}
.bs-spiegelung{position:absolute; left:6%; right:6%; top:100%; height:22%;
  background:radial-gradient(closest-side,rgba(14,33,25,.16),transparent 74%);
  filter:blur(9px); pointer-events:none}

html.dark .bs-rechts{background:rgba(255,255,255,.95); border-color:rgba(255,255,255,.5)}
html.dark .bereich-story::before{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
@media (prefers-reduced-motion: reduce){ .bs-rechts::after{animation-duration:200s} }

/* ══════════════════════════════════════════════════════════════════════════
   HERO-WERK — die 3D-Szene (assets/werk-3d.js)
   EINE zusammenhängende Fahrt durch ein Werk, keine Kacheln. Die Glastafeln
   darunter sind nur noch Fallback: ohne WebGL stehen sie, mit WebGL setzt das
   Modul `hat-3d` und blendet sie aus.
   ══════════════════════════════════════════════════════════════════════════ */
.werk{position:relative; width:100%; min-height:clamp(460px,56vw,660px);
  border-radius:var(--radius-lg,20px); overflow:hidden; isolation:isolate;
  background:linear-gradient(158deg,#F1F8F4 0%,#FFFFFF 46%,#F4F9F6 100%)}
.werk-grund{position:absolute; inset:0; z-index:0; pointer-events:none}
.werk-grund span{position:absolute; border-radius:50%; filter:blur(48px)}
.werk-grund span:nth-child(1){width:62%; aspect-ratio:1; left:-10%; top:-8%;
  background:radial-gradient(closest-side,rgba(0,148,92,.2),transparent 70%)}
.werk-grund span:nth-child(2){width:54%; aspect-ratio:1; right:-8%; bottom:-10%;
  background:radial-gradient(closest-side,rgba(232,166,0,.2),transparent 70%)}
/* Auf den Bereichsseiten leuchtet der Grund in der Farbe DES BEREICHS.
   Vorher lag über jeder Szene derselbe grüne Schein — auf der Kerntechnik-
   und der Industrieseite war das schlicht falsch (Marcus, 13.08.2026). */
.kopf-seite--chemie .werk-grund span:nth-child(1){
  background:radial-gradient(closest-side,rgba(0,148,92,.22),transparent 70%)}
.kopf-seite--chemie .werk-grund span:nth-child(2){
  background:radial-gradient(closest-side,rgba(0,148,92,.10),transparent 70%)}
.kopf-seite--nuklear .werk-grund span:nth-child(1){
  background:radial-gradient(closest-side,rgba(232,166,0,.26),transparent 70%)}
.kopf-seite--nuklear .werk-grund span:nth-child(2){
  background:radial-gradient(closest-side,rgba(232,166,0,.13),transparent 70%)}
.kopf-seite--industrie .werk-grund span:nth-child(1){
  background:radial-gradient(closest-side,rgba(180,118,42,.24),transparent 70%)}
.kopf-seite--industrie .werk-grund span:nth-child(2){
  background:radial-gradient(closest-side,rgba(180,118,42,.12),transparent 70%)}
.werk canvas{position:absolute; inset:0; z-index:2}
/* Das Fallback steht sofort da und weicht erst, wenn 3D wirklich läuft. */
.werk-ersatz{position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  transition:opacity .8s ease}
.werk.hat-3d .werk-ersatz{opacity:0; pointer-events:none}
.werk-ersatz .rm{background:none; min-height:0; width:100%; height:100%}
.werk-ersatz .tf-welt{position:absolute; inset:8%}
.werk-ersatz .tf-e{animation:none;
  transform:translate(-50%,-50%) translateX(calc((var(--n) - 2) * 34%))
            translateZ(calc((var(--n) - 2) * -110px)) rotateY(calc((var(--n) - 2) * 17deg))}
.werk-ersatz .tf-bau > *,.werk-ersatz .tf-bau .tb,.werk-ersatz .tf-bau .tz{
  animation:none; opacity:1; transform:none; stroke-dashoffset:0}
.werk-ersatz .tf-schnitt,.werk-ersatz .tf-medium{display:none}
.werk .tf-sprung{position:absolute; z-index:5; right:clamp(.9rem,2vw,1.6rem);
  top:clamp(.9rem,2vw,1.4rem)}
html.dark .werk{background:linear-gradient(158deg,#18261F 0%,#131E19 46%,#17251E 100%)}
@media(max-width:900px){ .werk{min-height:360px} }

/* ══════════════════════════════════════════════════════════════════════════
   BEREICHS-KACHEL auf den Unterseiten (12.08.)
   Marcus: „du brauchst es nicht als Scrollytelling auf den Unterseiten …
   vergleiche die mal mit der Startseite, die Animationen der 3 Bereiche."
   Also: EIN kleines animiertes Objekt je Seite, genau in der Machart der
   Startseiten-Kacheln. Kein zweites großes Schaustück.
   ══════════════════════════════════════════════════════════════════════════ */
.ok{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,4vw,3.5rem);
  align-items:center; --f:var(--signal)}
.ok--chemie{--f:var(--chemie)} .ok--nuklear{--f:var(--nuklear)}
.ok--industrie{--f:var(--industrie)} .ok--personal{--f:#5E6E78}
/* ⚠️ Hier stand eine Glaskarte mit Rand, Schlagschatten und farbigem
   Oberstrich um jedes Objekt. Marcus: „das sitzt in einer Box, die nicht zum
   restlichen Design passt … der komische Kasten ist fragwürdig."
   Das Objekt steht jetzt frei auf der Sektionsfläche, wie im Hero. */
.ok-bild{position:relative; padding:0}
.ok-txt h2{margin-bottom:1.2rem}
.ok-liste{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
.ok-liste li{position:relative; padding-left:1.5rem; color:var(--ink-2); line-height:1.55}
.ok-liste li::before{content:""; position:absolute; left:0; top:.58em; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--f)}
@media(max-width:900px){ .ok{grid-template-columns:1fr} }
/* Im Dunkelmodus braucht das Objekt ein helles Blatt, sonst verschwindet die
   hell gezeichnete Grafik. Kein Kasten — nur so viel Grund wie nötig. */
html.dark .ok-bild{background:rgba(255,255,255,.94); border-radius:var(--radius-lg,20px);
  padding:clamp(1rem,2vw,1.6rem)}

/* ── Hero-Werk: Beschriftung und Lichtschleier ─────────────────────────
   Marcus: „da fehlt ein bisschen das helle Licht … dieser Glas-Licht-Effekt,
   dieses Overlay — keine spiegelnden Oberflächen, es ist noch etwas grau."
   Also kein Environment-Mapping, sondern ein Schleier ÜBER dem Canvas:
   ein heller Verlauf, der der Szene Tiefe und Kontrast gibt, plus derselbe
   wandernde Glanz wie auf den Glaskarten. */
/* ⚠️ Hier lag ein wandernder Glanz ÜBER dem Canvas. Marcus: „da soll kein
   effekt über den bereich laufen, die rohre und industrie-dinge dort müssen
   so einen glanz-effekt haben." Der Glanz sitzt jetzt AUF den Körpern
   (Streiflicht + Glanzkanten in werk-3d.js). Hier bleibt nur ein ruhiger
   Lichtgrund ohne Bewegung und ohne mix-blend-mode — das soft-light hat
   zusätzlich den Hintergrund der Taktzeile viereckig ausgestanzt.
   Und er liegt jetzt HINTER dem Canvas (z-index 0 statt 3): Licht im Raum,
   kein Schleier über den Dingen. Das Canvas ist durchsichtig, der Grund
   scheint also durch. */
.werk-licht{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(78% 62% at 24% 10%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 30%,
                    transparent 68%, rgba(14,33,25,.07) 100%)}
@media (prefers-reduced-motion: reduce){
  /* Bei gedämpfter Bewegung noch etwas kürzer als die 270vh oben. */
  .anlage-story{height:220vh}
}
/* Hochkant stapeln sich Grafik, sechs Kapitel und Knopf in einer klebenden
   Bühne von 100svh — ohne diesen Block wird das Ende abgeschnitten. */
@media(max-width:760px){
  .anlage-story .hb{min-height:210px}
  .anlage-story .sz{max-height:28svh}
  .as-kapitel p{font-size:.86rem; line-height:1.42}
  .as-akt{margin-top:.8rem}
}
@media(max-width:560px){ .werk{min-height:300px} }

.werk-takt{position:absolute; z-index:5; left:clamp(.9rem,2vw,1.6rem);
  bottom:clamp(.9rem,2vw,1.5rem); margin:0; display:flex; flex-direction:column;
  padding:.6rem 1.1rem .65rem 1.6rem; border-radius:14px;
  /* KEIN backdrop-filter: im Blend-Kontext des Lichtgrunds zeichnete er den
     unscharfen Hintergrund als Quadrat unter die abgerundete Karte — es sah
     aus wie ein schlecht freigestelltes Bild. Volldeckende Fläche ist hier
     ohnehin lesbarer. */
  background:#FFFFFF; border:1px solid rgba(14,33,25,.09);
  box-shadow:0 14px 30px -22px rgba(14,33,25,.45); max-width:min(24rem,72%)}
.werk-takt i{position:absolute; left:.7rem; top:.95rem; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px var(--signal-weich)}
.werk-takt b{font-family:var(--font-head); font-size:.98rem; color:var(--ink); line-height:1.2}
.werk-takt small{font-size:.78rem; color:var(--ink-2); margin-top:.12rem; line-height:1.35}
.werk-takt--neu{animation:werk-takt-ein .5s cubic-bezier(.34,1.3,.64,1)}
@keyframes werk-takt-ein{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
html.dark .werk-takt{background:#22342C; border-color:rgba(255,255,255,.14)}
html.dark .werk-licht{background:
  radial-gradient(78% 62% at 24% 10%, rgba(255,255,255,.16), transparent 60%)}
@media (prefers-reduced-motion: reduce){ .werk-takt--neu{animation-duration:1.2s} }

/* Die alten Set-Pieces der Unterseiten sind auf hellen Grund gezeichnet und
   waren im Dunkelmodus kaum zu erkennen. Sie bekommen dasselbe helle Blatt
   wie die übrigen Schaustücke — Papier auf dunklem Tisch. */
html.dark .spiel .scrolly-buehne svg,
html.dark .setpiece svg{background:rgba(255,255,255,.94); border-radius:16px; padding:1rem}
html.dark .spiel .scrolly-seite,html.dark .scrolly-text{color:var(--ink-2)}

/* ══════════════════════════════════════════════════════════════════════════
   UNTERSEITEN-OBJEKTE (12.08.) — jede Unterseite trägt EIN kleines Objekt
   in derselben Machart wie die drei Startseiten-Kacheln. Das Scrollytelling
   aus bau_lib.spiel() ist von allen Unterseiten verschwunden; die Fachtexte
   der Beats stehen jetzt als drei Zeilen neben dem Objekt.
   Marcus: „du brauchst es nicht als Scrollytelling auf den Unterseiten …
   vergleiche die mal mit der Startseite, die Animationen der 3 Bereiche."
   ══════════════════════════════════════════════════════════════════════════ */

/* Der Personal-Bereich hatte keine eigene Akzentfarbe: `.ob` setzt `--f` auf
   sich selbst, deshalb erbt es NICHT von `.ok--personal`. Ohne diese Zeile
   ist das Personal-Objekt grün statt grau. */
.ob--personal{--f:#5E6E78}

/* Flächen und Striche, die es vorher noch nicht gab */
.ob .ob-nadel-a{fill:var(--f)}
.ob .ob-nadel-b{fill:#B4C6BB}
.ob .ob-arm{fill:#E4EDE8; stroke:#A9BCB1; stroke-width:1.4}
.ob .ob-arm--f{fill:var(--f); fill-opacity:.92; stroke:rgba(14,33,25,.22)}
.ob .ob-zapfen-k{fill:var(--f); fill-opacity:.92; stroke:rgba(14,33,25,.22); stroke-width:1.2}
.ob .ob-griff{fill:none; stroke:#A9BCB1; stroke-width:8; stroke-linecap:round}
.ob .ob-puls{fill:var(--f)}
.ob .ob-welle{stroke:var(--f)}
.ob .ob-zahn-f{fill:var(--f); opacity:.85}
.ob .ob-ring{fill:none; stroke:#A9BCB1}
/* Segmentierung: Nieten, Fugen, Teilungen — REF-P verlangt ab Premium
   segmentierte Flächen, nicht eine große. */
.ob .ob-niete{fill:#C6D4CC; stroke:#A9BCB1; stroke-width:.7}
.ob .ob-loch{fill:#D2DED7; stroke:#A9BCB1; stroke-width:.8}
.ob .ob-teil{fill:#A9BCB1; opacity:.55}
.ob .ob-fuge{fill:#B4C6BB; opacity:.45}
.ob .ob-marke{fill:#A9BCB1; opacity:.5}
.ob .ob-rippe{fill:#C6D4CC; opacity:.55}
.ob .ob-nadel-k{fill:#FFFFFF; opacity:.85}
.ob .ob-strebe{fill:none; stroke:#B4C6BB; stroke-width:1.3}
/* Der Kolben trug seine Farbe als fill-Attribut — das bricht, sobald der
   Bereich eine andere Akzentfarbe hat. Jetzt kommt sie aus --f. */
.ob .ob-fluid{fill:var(--f)}
/* Licht pro Fläche: derselbe Umriss noch einmal, nur als Verlauf darüber. */
.ob .ob-schein{pointer-events:none}
.ob .ob-haken{stroke:var(--f)}
/* Hält die Drehmitte: ohne diesen unsichtbaren Kreis liegt der Ursprung der
   Hüllbox nicht im Zentrum und das Drehkreuz eiert. */
.ob .ob-ausgleich{fill:#0E2119; opacity:0}

.ok-liste b{color:var(--ink); font-weight:600}

/* ── Eigenbewegungen ──────────────────────────────────────────────────── */
/* referenzen: die oberste Platte hebt sich aus dem Register */
.ob .ob-heben{animation:ob-heben 8.5s ease-in-out infinite}
@keyframes ob-heben{0%,10%{transform:translateY(0)} 40%,74%{transform:translateY(-17px)}
                    100%{transform:translateY(0)}}
/* standorte: die Nadel schwingt ein und findet die Richtung */
.ob .ob-nadel{transform-box:fill-box; transform-origin:50% 50%;
  animation:ob-nadel 12s cubic-bezier(.35,0,.2,1) infinite}
@keyframes ob-nadel{0%,6%{rotate:-34deg} 28%,54%{rotate:12deg} 76%,100%{rotate:-34deg}}
/* zertifikate: der Kranz dreht, der Haken schreibt sich */
.ob .ob-kranz{transform-box:fill-box; transform-origin:50% 50%;
  animation:ob-dreh 44s linear infinite}
.ob .ob-haken{stroke-dasharray:68; stroke-dashoffset:68;
  animation:ob-haken 7.5s ease-out infinite}
@keyframes ob-haken{0%,18%{stroke-dashoffset:68} 46%,88%{stroke-dashoffset:0}
                    100%{stroke-dashoffset:68}}
/* ratgeber: die Zeilen schreiben sich, die Lupe wandert darüber */
.ob .ob-zeile{fill:#C2D0C7; transform-box:fill-box; transform-origin:0 50%;
  animation:ob-zeile 9s ease-out infinite; animation-delay:calc(var(--n) * .45s)}
@keyframes ob-zeile{0%,6%{transform:scaleX(.04)} 30%,90%{transform:scaleX(1)}
                    100%{transform:scaleX(.04)}}
.ob .ob-lupe{animation:ob-lupe 13s ease-in-out infinite}
@keyframes ob-lupe{0%,100%{transform:translate(0,0)} 50%{transform:translate(36px,52px)}}
/* karriere: der Helm hängt am Haken und schwingt aus */
.ob .ob-schwing{transform-box:fill-box; transform-origin:50% 0;
  animation:ob-schwing 6.8s ease-in-out infinite}
@keyframes ob-schwing{0%,100%{rotate:-4.5deg} 50%{rotate:4.5deg}}
/* arbeitnehmerueberlassung: das Drehkreuz gibt frei */
.ob .ob-kreuz{transform-box:fill-box; transform-origin:50% 50%;
  animation:ob-kreuz 9.5s cubic-bezier(.35,0,.2,1) infinite}
@keyframes ob-kreuz{0%,54%{rotate:0deg} 76%,100%{rotate:120deg}}
/* personalvermittlung: der Zapfen fährt in die Aufnahme — die Passung sitzt */
.ob .ob-zapfen{animation:ob-zapfen 8.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ob-zapfen{0%,12%{transform:translateX(-28px)} 44%,86%{transform:translateX(0)}
                     100%{transform:translateX(-28px)}}
/* werkvertrag: der Schlüssel zieht an, dann ist abgenommen */
.ob .ob-schluessel{transform-box:view-box; transform-origin:82px 92px;
  animation:ob-schluessel 8s cubic-bezier(.35,0,.2,1) infinite}
@keyframes ob-schluessel{0%,14%{rotate:-17deg} 42%,70%{rotate:11deg} 100%{rotate:-17deg}}
/* ueber-uns: der Strang läuft seit 1994 ohne Bruch — der Impuls geht durch */
.ob .ob-puls{animation:ob-puls 6.5s linear infinite; animation-delay:calc(var(--n) * -2.17s)}
@keyframes ob-puls{0%{transform:translateX(0); opacity:0} 10%{opacity:.92}
                   86%{opacity:.92} 100%{transform:translateX(122px); opacity:0}}
/* personal: ein Bedarf läuft durch den Verteiler und nimmt einen der drei Wege */
.ob .ob-weg{animation:ob-weg 11s cubic-bezier(.4,0,.3,1) infinite}
@keyframes ob-weg{0%,4%{transform:translate(0,0); opacity:0}
                  9%{transform:translate(0,2px); opacity:.95}
                  30%{transform:translate(0,40px); opacity:.95}
                  48%,60%{transform:translate(50px,40px); opacity:.95}
                  68%{transform:translate(60px,40px); opacity:0}
                  100%{transform:translate(0,0); opacity:0}}
/* kontakt: das Signal geht raus, ohne Zwischenstation */
.ob .ob-welle{transform-box:fill-box; transform-origin:50% 50%; opacity:0;
  animation:ob-welle 5.4s ease-out infinite; animation-delay:calc(var(--n) * -1.8s)}
@keyframes ob-welle{0%{transform:scale(.3); opacity:0} 18%{opacity:.68}
                    100%{transform:scale(1.75); opacity:0}}

/* Auf schmalen Geräten steht das Objekt über dem Text und darf nicht die
   halbe Seite fressen. */
@media(max-width:900px){
  .ok{gap:1.6rem}
  .ok-bild{order:-1; max-width:22rem; margin-inline:auto; width:100%}
}

@media (prefers-reduced-motion: reduce){
  /* Marcus fährt dauerhaft mit „Bewegung reduzieren". Gedämpft heißt hier
     rund viermal langsamer — nicht angehalten. Eine Seite, die bei ihm
     stillsteht, wirkt kaputt. */
  .ob .ob-heben,.ob .ob-zapfen{animation-duration:30s !important}
  .ob .ob-nadel{animation-duration:42s !important}
  .ob .ob-kranz{animation-duration:150s !important}
  .ob .ob-haken,.ob .ob-schluessel{animation-duration:28s !important}
  .ob .ob-zeile{animation-duration:32s !important}
  .ob .ob-lupe{animation-duration:46s !important}
  .ob .ob-schwing{animation-duration:24s !important}
  .ob .ob-kreuz,.ob .ob-weg{animation-duration:36s !important}
  .ob .ob-puls{animation-duration:24s !important}
  .ob .ob-welle{animation-duration:20s !important}
}

/* Der Kolben, neu gezeichnet am 12.08. — Nieten auf Glas ergaben keinen Sinn. */
.ob .ob-meniskus{fill:none; stroke:rgba(255,255,255,.75); stroke-width:2}
.ob .ob-schliff{fill:#DCE6E0; opacity:.75}
.ob .ob-etikett{fill:#FBFDFC; stroke:#C6D4CC; stroke-width:1; opacity:.9}

/* ══════════════════════════════════════════════════════════════════════════
   BEREICHS-HERO (12.08.) — Chemie, Kerntechnik, Industrie
   Marcus: „du sollst endlich die Hero-Bereiche von Chemie, Nuklear, Industrie
   machen — jetzt sitzt ‚was in … zählt' in einer Box, die nicht zum
   restlichen Design passt."
   Also derselbe Aufbau wie die Startseite: links der Text, rechts die Bühne,
   randlos und in der Bereichsfarbe. Das animierte Objekt steht frei darin,
   nicht in einer Karte. Kleiner als der Startseiten-Hero — die Startseite
   bleibt das größte Bild der Seite.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf-seite--hero{padding-block:0; overflow:clip}
.kopf-seite--hero .wrap{width:100%; max-width:none; padding:0}
/* Wie auf der Startseite: EIN Untergrund für beide Hälften. Vorher hatte die
   Textspalte ihren eigenen Verlauf (endete fast weiß) und die Bühne einen
   zweiten (begann weiß, lief ins Grau) — genau dazwischen stand der helle
   Streifen. Zwei Verläufe treffen sich nie unsichtbar; also gibt es nur einen.
   `--bweich` trägt dabei die Farbe des Bereichs. */
.kopf-seite--hero .kopf-grid{display:grid; grid-template-columns:1.04fr .96fr;
  align-items:stretch; gap:0; min-height:min(62vh,560px);
  background:linear-gradient(112deg,var(--bweich) 0%,#F3F9F5 30%,#F6FBF8 55%,
             #F1F8F4 78%,#F5FAF7 100%)}
.kopf-seite--hero .kopf-txt{display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.6rem,4vw,3.5rem); background:none}
.kopf-seite--hero .kopf-txt > *{width:min(100%,34rem); margin-left:auto; margin-right:0}
.kopf-seite--hero h1{margin:.3rem 0 1rem}
/* Die drei Fachzeilen stehen jetzt hier, wo sie hingehören — nicht mehr in
   einem eigenen Kasten weiter unten. */
.kopf-punkte{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.7rem}
.kopf-punkte li{position:relative; padding-left:1.5rem; color:var(--ink-2); line-height:1.5;
  font-size:.98rem}
.kopf-punkte li::before{content:""; position:absolute; left:0; top:.56em; width:.5rem;
  height:.5rem; border-radius:50%; background:var(--bfarbe)}
/* Die Szene füllt ihre Hälfte ganz aus — kein gerundeter Kasten mehr, der in
   einem gepolsterten Feld schwebt. Marcus, 13.08.2026: „das 3d bereich liegt
   in einem extra container, das sieht nicht gut aus." Es gibt genau EINEN
   Untergrund: den der Bühne. */
.kopf-buehne{position:relative; display:grid; place-items:stretch; padding:0;
  overflow:hidden; background:none}
.kopf-buehne::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(58% 50% at 68% 34%, var(--bweich), transparent 68%)}
.kopf-buehne > .werk{border-radius:0; background:none; box-shadow:none;
  min-height:min(62vh,560px); height:100%}
.kopf-buehne .ob{position:relative; width:min(100%,30rem); margin-inline:auto}
@media(max-width:900px){
  .kopf-seite--hero .kopf-grid{grid-template-columns:1fr; min-height:0}
  .kopf-seite--hero .kopf-buehne{order:-1}
  .kopf-seite--hero .kopf-buehne > .werk{min-height:340px}
  .kopf-seite--hero .kopf-buehne .ob{width:min(100%,20rem)}
  .kopf-seite--hero .kopf-txt > *{margin-inline:0}
}
html.dark .kopf-seite--hero .kopf-grid{background:linear-gradient(112deg,var(--bweich) 0%,
  var(--bg) 46%,var(--surface) 78%,var(--bg) 100%)}
html.dark .kopf-seite--hero .kopf-txt{background:none}
/* Die Ersatzgrafik ist hell gezeichnet und braucht im Dunkelmodus einen Grund.
   Sobald die echte 3D-Szene läuft, ist der weg — sonst stünde sie in einem
   weißen Kasten, also genau dem „extra container", der weg sollte. */
html.dark .werk:not(.hat-3d) .kopf-buehne .ob,
html.dark .kopf-buehne .werk:not(.hat-3d) .ob{background:rgba(255,255,255,.94);
  border-radius:var(--radius-lg,20px); padding:1.2rem}

/* ═══ BILDZEILE — drei Fotos mit Bildunterschrift (Bereichsseiten) ═══════════
   Marcus 12.08.2026: „die bereiche sind alle leer von bildern". Die Zeile
   sitzt zwischen zwei Textabschnitten und trägt den fachlichen Hinweis in der
   Unterschrift, nicht im Bild. */
.bildzeile{display:grid; gap:1.6rem; grid-template-columns:1fr}
@media(min-width:820px){.bildzeile{grid-template-columns:repeat(3,1fr); gap:1.9rem}}
.bz-karte{margin:0; display:flex; flex-direction:column; gap:.9rem}
.bz-karte img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  border-radius:var(--radius-lg) var(--radius-lg) 46px var(--radius-lg);
  transition:transform .6s cubic-bezier(.22,.61,.21,1)}
.bz-karte:hover img{transform:translateY(-4px) scale(1.012)}
.bz-karte figcaption{font-size:.94rem; line-height:1.55; color:var(--ink-2)}
.bz-karte figcaption strong{display:block; font-family:var(--font-head); font-weight:600;
  font-size:1.02rem; color:var(--ink); margin-bottom:.3rem}
@media(prefers-reduced-motion:reduce){
  .bz-karte img{transition-duration:.9s}
  .bz-karte:hover img{transform:none}
}

/* ── Bereichs-Karten auf den vier Hauptseiten ────────────────────────────
   Dieselbe Machart wie die drei Türen der Startseite. Die drei Fachbereiche
   haben keine Unterseite dahinter — ihre Karten sind deshalb ruhig gestellt
   (kein Anheben, kein Pfeil): ein Kasten, der wie ein Knopf aussieht und
   keiner ist, ärgert nur. */
.tuer h3{font-family:var(--font-head); font-size:1.32rem; font-weight:700;
  margin-bottom:.55rem; line-height:1.25}
.tuer--personal{background:linear-gradient(180deg,#F2F5F6 0%,#fff 60%)}
.tuer--personal .mehr,.tuer--personal .tuer-nr{color:#4A5A64}
/* Eine Tür je Bereichsseite in dunklerem Grau — Abwechslung zwischen den drei
   Karten (Marcus 17.09.2026: Chemie „Revision", Nuklear „Rückbau", Industrie
   „Instandhaltung"). Zahl und „mehr" behalten die Bereichsfarbe. */
.tuer--grau{background:linear-gradient(180deg,#E3E9EA 0%,#F1F4F5 70%)}
html.dark .tuer--grau{background:linear-gradient(180deg,#26313A 0%,var(--surface) 65%)}
.tuer--still{cursor:default}
.tuer--still:hover{transform:none; box-shadow:none}
.sek-bereiche .tueren{margin-top:1.8rem}
@media(max-width:900px){.tueren{grid-template-columns:1fr}}

/* ── Die 3D-Anlage im Kopf der Bereichsseiten ────────────────────────────
   Marcus 13.08.2026: „die animationen in den hero bereichen sieht man kaum,
   das sind so kleine mini dinger". Ursache war .kopf-buehne .ob mit
   width:min(100%,26rem) — die Szene war auf 416 px gedeckelt. Der 3D-Kasten
   nimmt jetzt die ganze Spalte und wächst mit dem Fenster. */
.kopf-buehne .werk--bereich{width:100%; min-height:clamp(420px,42vw,620px);
  border-radius:var(--radius-lg,20px)}
.kopf-buehne .werk--bereich .werk-ersatz .ob{width:min(100%,34rem)}
@media(max-width:900px){
  .kopf-buehne .werk--bereich{min-height:360px}
  .kopf-buehne .werk--bereich .werk-ersatz .ob{width:min(100%,24rem)}
}
@media(max-width:560px){ .kopf-buehne .werk--bereich{min-height:300px} }

/* ── DE/EN im Kopf ───────────────────────────────────────────────────────
   Marcus 13.08.2026: „coplaburg hatte oben ein DE EN umschalter". Seit
   16.09.2026 eine Pille „DE | EN" mit kleiner Flagge, so hoch wie die
   Symbol-Knöpfe daneben (44 px). Die laufende Sprache ist dunkel gefüllt, die
   andere ist der Link. Seiten ohne Übersetzung (Impressum, Datenschutz) haben
   keinen. Dieselbe Pille steht oben im Menü-Overlay (kopfzeile-neu.py). */
.sprachwahl{display:inline-flex; align-items:center; gap:2px; margin:0; flex:none;
  border:1px solid var(--linie); border-radius:999px; padding:3px; background:var(--bg)}
.sprachwahl > *{display:inline-flex; align-items:center; gap:.4rem; min-height:36px;
  padding:0 .7rem 0 .6rem; border-radius:999px; line-height:1; text-decoration:none;
  color:var(--ink-2); font-size:.8rem; font-weight:700; letter-spacing:.05em}
.sprachwahl .flagge{width:16px; height:11px; border-radius:2px; display:block; flex:none;
  box-shadow:0 0 0 1px rgba(14,33,25,.13)}
/* Nur für Vorleseprogramme. */
.nur-vorlesen{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap}
/* Die Tippfläche ist größer als der sichtbare Knopf (WCAG 2.5.5) — als
   unsichtbare Fläche DARÜBER, nicht als Innenabstand (Marcus, 14.08.2026). */
.sprachwahl a{position:relative}
.sprachwahl a::after{content:""; position:absolute; left:0; right:0; top:50%;
  height:44px; transform:translateY(-50%)}
.sprachwahl a:hover,.sprachwahl a:focus-visible{color:var(--ink); background:var(--surface-2)}
.sprachwahl [aria-current]{background:var(--tief); color:#fff}
.sprachwahl [aria-current] .flagge{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
html.dark .sprachwahl [aria-current]{background:var(--ink); color:var(--bg)}
html.dark .sprachwahl .flagge{box-shadow:0 0 0 1px rgba(255,255,255,.2)}

/* ── Kopf auf Tablet und Handy ───────────────────────────────────────────
   Was nicht mehr passt, geht ins Menü — nie wird etwas kleiner gedrückt.
   ≤900: Sprache ins Menü · ≤700: „Offene Stellen" ins Menü (steht dort als
   Karriere) · ≤560: Hell/Dunkel ins Menü. Der Menü-Knopf trägt immer sein
   Wort („Menü", offen „Schließen"). */
@media (max-width:900px){ .kopf--b .nav-tools .sprachwahl{display:none} }
@media (max-width:700px){ .kopf--b .nav-cta{display:none} }
@media (max-width:560px){
  .kopf--b .kopf-innen{gap:.5rem}
  .kopf--b .nav-tools{gap:.3rem}
  .kopf--b .nav-tools #nm-theme{display:none}
  /* Der Menü-Knopf bleibt beschriftet (Marcus 16.09.2026), nur etwas enger. */
  .kopf--b .nav-tools .nav-burger{padding:0 .7rem 0 .55rem; gap:.3rem; font-size:.88rem}
  /* Logo fest niedriger, damit Anmelden und der beschriftete Menü-Knopf ihre
     44 px behalten — gesetzt, nicht vom Platz gequetscht (Bedarf gemessen:
     Anmelden + Menü + Abstände = 141 px). */
  .kopf--b .nav-logo img,html.gescrollt .kopf--b .nav-logo img{height:40px}
}
/* Sehr schmale Telefone (360 px): 320 px Zeile minus 141 px → das Logo bekommt
   33 px Höhe (175 px breit), nichts wird versteckt. */
@media (max-width:400px){ .kopf--b .nav-logo img,html.gescrollt .kopf--b .nav-logo img{height:33px} }

/* ── Menü-Overlay: Sprache, Hell/Dunkel, Anmelden ganz oben ──────────── */
.nav-overlay .menue-werkzeuge{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  padding:0 0 1.2rem; margin:0 0 .3rem; border-bottom:1px solid var(--linie)}
.nav-overlay .menue-werkzeuge .sprachwahl a,
.nav-overlay a.menue-werk,.nav-overlay .menue-werk{font-family:var(--font-body); border-bottom:0}
.nav-overlay .menue-werkzeuge .sprachwahl a{font-size:.8rem; font-weight:700; padding:0 .7rem 0 .6rem}
.nav-overlay .menue-werk,.nav-overlay a.menue-werk{display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; padding:0 1.05rem 0 .85rem; border:1px solid var(--linie-stark); border-radius:999px;
  background:var(--bg); color:var(--ink); font-size:.95rem; font-weight:600; cursor:pointer;
  text-decoration:none; line-height:1}
.nav-overlay .menue-werk:hover,.nav-overlay .menue-werk:focus-visible{border-color:var(--signal-text);
  color:var(--signal-text); background:var(--signal-weich)}
.nav-overlay .menue-werk svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
/* Handy und Tablet (Marcus 17.09.2026): das offene Menü etwas kleiner, und
   „Startseite" steht nicht mehr als Zeile, sondern als Haus-Symbol vor DE|EN
   (kopfzeile-neu.py setzt es an den Anfang der Werkzeug-Zeile). */
@media (max-width:1080px){
  .nav-overlay a{font-size:1.06rem; padding:.62rem 0}
  .nav-overlay .gruppe{font-size:.68rem; margin:1.15rem 0 .2rem}
  .nav-overlay .menue-werk,.nav-overlay a.menue-werk{font-size:.88rem; padding:0 .9rem 0 .75rem}
  .nav-overlay .menue-werkzeuge .sprachwahl a{font-size:.76rem}
  .nav-overlay > a[href$="index.html"]{display:none}
  .nav-overlay a.menue-heim{width:44px; padding:0; justify-content:center}
}
/* Spezifität wie die Grundregel `.nav-overlay a.menue-werk` (display:inline-flex),
   sonst stünde das Haus-Symbol auch im Desktop-Menü. */
@media (min-width:1081px){ .nav-overlay a.menue-heim{display:none} }
/* Schmaler Desktop (1081–1199 px): Sprache, Hell/Dunkel, Anmelden, Offene Stellen
   und Menü passen nur mit etwas engeren Abständen in eine Zeile — gemessen
   ragte „Schließen" bei 1081 px 9 px aus dem Bild. */
@media (min-width:1081px) and (max-width:1199px){
  html.gescrollt .kopf--b .menue--schlank{margin-left:.5rem}
  html.gescrollt .kopf--b .kopf-kompakt{gap:.85rem}
  html.gescrollt .site-header .kopf-kompakt .b-link{font-size:.98rem}
  html.gescrollt .kopf--b .nav-tools{gap:.4rem}
  html.gescrollt .kopf--b .nav-tools .sprachwahl{margin-right:.1rem}
}
/* Am Desktop (Marcus 17.09.2026, Entwurf C) öffnet „Menü" kein Vollbild, sondern ein
   dunkles Feld direkt unter dem Kopf in drei Spalten: Leistungen · Unternehmen ·
   Einstellungen (Sprache, Hell/Dunkel). Startseite (= Logo), Karriere (= „Offene
   Stellen"), Anmelden (steht in der Zeile) und die drei Personal-Unterseiten (stehen
   auf „Für Arbeitgeber") fallen hier weg. Spalten ohne Zusatz-Markup: jedes Kind
   bekommt seine Spalte, `dense` stapelt je Spalte von oben; die Einstellungen
   spannen alle Zeilen. `top` setzt site.js auf die Unterkante des Kopfes. */
@media (min-width:1081px){
  .nav-overlay{inset:auto 0 auto 0; top:66px; z-index:65; height:auto; overflow:visible;
    display:grid; grid-template-columns:1.1fr 1fr 1fr; grid-auto-flow:row dense; align-items:start;
    gap:0 2.5rem; padding:1.9rem max(clamp(1.25rem,4vw,2.5rem), calc((100vw - 1220px) / 2)) 2.2rem;
    background:var(--tief); color:#E9F0EB; box-shadow:0 26px 44px -26px rgba(0,0,0,.55)}
  .nav-overlay[hidden]{display:none}
  .nav-overlay .nav-close{display:none}
  .nav-overlay > a{grid-column:1; display:flex; align-items:center; gap:.6rem; min-height:44px; padding:0;
    border-bottom:0; font-family:var(--font-head); font-weight:600; font-size:1.12rem; color:#E9F0EB}
  .nav-overlay > a:hover{color:#4FD8A5}
  .nav-overlay > a[href$="-services.html"]::before{content:""; width:.6rem; height:.6rem; border-radius:50%; flex:none}
  .nav-overlay > a[href$="chemie-services.html"]::before{background:var(--chemie)}
  .nav-overlay > a[href$="nuklear-services.html"]::before{background:var(--nuklear)}
  .nav-overlay > a[href$="industrie-services.html"]::before{background:var(--industrie)}
  .nav-overlay > a[href$="personal.html"]::before{content:""; width:.6rem; height:.6rem; border-radius:50%; flex:none; background:#3B8BEA}
  .nav-overlay > .gruppe{grid-column:1; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    color:#93A69B; font-weight:600; margin:0 0 .5rem}
  .nav-overlay > .gruppe:nth-of-type(2),
  .nav-overlay > a[href$="index.html"],
  .nav-overlay > a[href$="arbeitnehmerueberlassung.html"],.nav-overlay > a[href$="personalvermittlung.html"],
  .nav-overlay > a[href$="werkvertrag.html"]{display:none}
  .nav-overlay > .gruppe:nth-of-type(3),
  .nav-overlay > a[href$="ueber-uns.html"],.nav-overlay > a[href$="referenzen.html"],
  .nav-overlay > a[href$="zertifikate.html"],.nav-overlay > a[href$="standorte.html"],
  .nav-overlay > a[href$="ratgeber.html"],.nav-overlay > a[href$="kontakt.html"]{grid-column:2}
  /* Spalte 3 (Marcus 17.09.2026): Anmelden · EINSTELLUNGEN · DE|EN · Hell/Dunkel —
     eine eigene Spalte, Knöpfe mit 6 px Abstand. „Offene Stellen" steht schon
     in der Kopfzeile und fehlt hier. Anmelden steht über der Überschrift
     (order −1 vor der ::before-Überschrift). */
  .nav-overlay .menue-werkzeuge{grid-column:3; grid-row:1 / span 8; display:flex; flex-direction:column;
    align-items:flex-start; gap:6px; margin:0; padding:0; border:0}
  .nav-overlay .menue-werkzeuge::before{content:"Einstellungen"; font-size:.74rem;
    letter-spacing:.14em; text-transform:uppercase; color:#93A69B; font-weight:600; margin:.9rem 0 .3rem}
  html[lang="en"] .nav-overlay .menue-werkzeuge::before{content:"Settings"}
  .nav-overlay .menue-werkzeuge a.menue-werk[href*="verwaltung"]{order:-1}
  .nav-overlay .menue-werkzeuge .sprachwahl{margin:0}
  .nav-overlay > a[href$="karriere.html"]{display:none}
  .nav-overlay .menue-werkzeuge .sprachwahl{border:1px solid #3A5045; border-radius:999px; padding:3px; background:transparent; box-shadow:none}
  .nav-overlay .menue-werkzeuge .sprachwahl a{color:#B8C6BE; background:transparent}
  .nav-overlay .menue-werkzeuge .sprachwahl a:hover{color:#fff; background:rgba(255,255,255,.08)}
  .nav-overlay .menue-werkzeuge .sprachwahl [aria-current]{background:#2FBF88; color:#0B1F17}
  .nav-overlay .menue-werk{border-color:#3A5045; background:transparent; color:#E9F0EB}
  .nav-overlay .menue-werk:hover,.nav-overlay .menue-werk:focus-visible{border-color:#4FD8A5; color:#4FD8A5; background:transparent}
}
html.dark .b-link:hover,html.dark .b-link[aria-current]{background:var(--surface-3)}

/* ── Jobsuche: Suchkasten auf Start- und Karriereseite ─────────────────
   Bewusst knapp: eine Zeile Überschrift, ein Satz, die Felder. Links die
   Suche (Beruf, Ort, Bereich), rechts der Weg für Auftraggeber.
   Startseite: Abschicken führt auf karriere.html?suche=…&ort=…&bereich=…
   #stellen (klappt auch ohne Skript); assets/jobsuche.js füllt Zahlen und
   Vorschläge live aus /api/stellen. Karriereseite: der Kasten filtert die
   Liste darunter (assets/stellenliste.js). */
.sek.jobsuche-sek{padding-block:clamp(2.2rem,4.5vw,3.6rem)}
.jobsuche{display:grid; grid-template-columns:minmax(0,1fr) minmax(14rem,17.5rem);
  background:var(--bg); border:1px solid var(--linie); border-radius:var(--radius-lg);
  box-shadow:0 10px 30px -22px rgb(11 14 16/.35); overflow:hidden}
.jobsuche-haupt{padding:clamp(1.25rem,2.6vw,2rem) clamp(1.25rem,2.8vw,2.2rem)}
body .jobsuche-haupt h2{font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2}
.jobsuche-satz{margin:.3rem 0 0; color:var(--ink-2); font-size:.98rem}
.jobsuche-satz b{color:var(--signal-text)}
.jobsuche-felder{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) minmax(0,1.05fr) auto; gap:.6rem; margin-top:1.1rem}
.jobsuche-feld{position:relative; display:flex; align-items:center}
body .jobsuche-feld input,body .jobsuche-feld select{width:100%; min-height:48px; margin:0;
  padding:.7rem 2.5rem .7rem 1rem; border:1px solid transparent; border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font:inherit; font-size:.98rem;
  appearance:none; -webkit-appearance:none; transition:border-color var(--dur), box-shadow var(--dur)}
body .jobsuche-feld input[type=search]{padding-right:1rem}
body .jobsuche-feld input::placeholder{color:var(--stahl); opacity:1}
body .jobsuche-feld select.leer{color:var(--stahl)}
body .jobsuche-feld input:focus,body .jobsuche-feld select:focus{outline:none;
  border-color:var(--signal-text); box-shadow:0 0 0 4px var(--signal-weich)}
.jobsuche-feld svg{position:absolute; right:.9rem; width:1.1rem; height:1.1rem;
  color:var(--stahl); pointer-events:none}
.jobsuche-felder .btn{min-height:48px; padding-inline:1.3rem; justify-content:center; white-space:nowrap}
.jobsuche-mehr{margin:.75rem 0 0; font-size:.9rem}
.jobsuche-mehr a,.jobsuche-mehr button{appearance:none; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-weight:600; color:var(--signal-text); text-decoration:underline; text-underline-offset:.25em}
.jobsuche-seite{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.45rem;
  padding:clamp(1.25rem,2.6vw,2rem); background:var(--surface-2); border-left:1px solid var(--linie)}
body .jobsuche-seite h3{font-size:1.08rem; line-height:var(--lh-snug)}
.jobsuche-seite p{margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.5}
.jobsuche-seite .btn{margin-top:.5rem; min-height:42px; padding:.55rem 1.1rem; font-size:.92rem;
  background:var(--bg); color:var(--ink); border-color:var(--linie-stark)}
.jobsuche-seite .btn:hover{background:var(--bg); color:var(--signal-2); border-color:var(--signal-text)}
html.dark .jobsuche-seite .btn{color:var(--ink)}
html.dark .jobsuche-seite .btn:hover{color:var(--signal-text)}
@media (max-width:1100px){
  .jobsuche{grid-template-columns:1fr}
  .jobsuche-seite{border-left:0; border-top:1px solid var(--linie)}
}
@media (max-width:900px){
  .jobsuche-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .jobsuche-felder{grid-template-columns:1fr}
}

/* ── Stellenliste als Karten (karriere.html, assets/stellenliste.js) ──── */
.stellen-kopfzeile{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin:2rem 0 1rem}
body .stellen-kopfzeile .stellen-zahlzeile{margin:0}
.stellen-zurueck{appearance:none; border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-size:.9rem; font-weight:600; color:var(--signal-text); text-decoration:underline; text-underline-offset:.25em}
#stellen .stellen-filter{margin-top:1.2rem}
body .stellen-liste.stellen-karten{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; border-top:0}
.jk{position:relative; display:flex; flex-direction:column; gap:.5rem; padding:1.25rem 1.35rem 1.1rem;
  background:var(--bg); border:1px solid var(--linie); border-radius:var(--radius-lg);
  transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease-out)}
.jk:hover{border-color:var(--signal-text); box-shadow:0 14px 34px -22px rgb(11 14 16/.4); transform:translateY(-2px)}
.jk-bereiche{display:flex; flex-wrap:wrap; gap:.35rem .9rem}
.jk-bereich{display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.jk-bereich::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--stahl)}
.jk-bereich--chemie::before{background:var(--chemie)}
.jk-bereich--nuklear::before{background:var(--nuklear)}
.jk-bereich--industrie::before{background:var(--industrie)}
body .jk-titel{font-size:1.1rem; line-height:1.3; font-weight:650}
.jk-titel a{color:var(--ink); text-decoration:none}
.jk-titel a::after{content:""; position:absolute; inset:0; border-radius:inherit}
.jk-titel a:focus-visible{outline:none}
.jk:focus-within{border-color:var(--signal-text); box-shadow:0 0 0 4px var(--signal-weich)}
.jk-mwd{font-weight:400; color:var(--stahl); font-size:.88em}
.jk-text{margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.jk-fuss{margin-top:auto; padding-top:.75rem; display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; border-top:1px solid var(--linie)}
.jk-orte{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem}
.jk-orte svg{width:1rem; height:1rem; color:var(--stahl); flex:none}
.jk-ort{position:relative; z-index:1; appearance:none; cursor:pointer; font:inherit; font-size:.84rem;
  font-weight:600; line-height:1.2; padding:.3rem .7rem; border-radius:999px; border:1px solid var(--linie);
  background:var(--surface); color:var(--ink); transition:background var(--dur), border-color var(--dur), color var(--dur)}
.jk-ort:hover,.jk-ort:focus-visible{border-color:var(--signal-text); color:var(--signal-2); background:var(--signal-weich)}
.jk-ort.an{background:var(--signal); border-color:var(--signal); color:#fff}
html.dark .jk-ort.an{color:#0B1F17}
.jk-mehr{display:inline-flex; align-items:center; gap:.3rem; font-size:.86rem; font-weight:600;
  color:var(--signal-text); white-space:nowrap}
.jk-mehr svg{width:1rem; height:1rem; transition:transform var(--dur) var(--ease-out)}
.jk:hover .jk-mehr svg{transform:translateX(3px)}
@media (max-width:760px){
  body .stellen-liste.stellen-karten{grid-template-columns:1fr}
}

/* ── Karriere: „Plätze, die besetzt werden wollen" — Tafel statt Glocke ──
   Eigene, leicht grüne Fläche, damit sich der Abschnitt von der grauen
   Stellenliste darüber und dem weißen Abschnitt darunter abhebt.
   Die Tafel: 20 Schattenrisse, besetzte grau, offene grün gestrichelt und
   sanft pulsierend (reduced-motion: langsamer und flacher, nicht aus). */
.sek--tafel{background:#E9F4EE}
html.dark .sek--tafel{background:#183126}
html.dark .ok-bild--tafel{background:none; padding:0}
.ob--tafel{filter:none; max-width:26rem; margin-inline:auto; display:block}
.ob--tafel .tf-brett{fill:var(--bg); stroke:var(--linie); stroke-width:1.5}
.ob--tafel .tf-kopf,.ob--tafel .tf-rumpf{fill:#B9C6BD}
html.dark .ob--tafel .tf-platz:not(.tf-offen) .tf-kopf,html.dark .ob--tafel .tf-platz:not(.tf-offen) .tf-rumpf{fill:#4A6156}
.ob--tafel .tf-offen .tf-feld{fill:var(--signal-weich); stroke:var(--signal); stroke-width:1.6; stroke-dasharray:4 3.2}
.ob--tafel .tf-offen .tf-kopf,.ob--tafel .tf-offen .tf-rumpf{fill:none; stroke:var(--signal); stroke-width:1.6; stroke-dasharray:3 2.6}
.ob--tafel .tf-offen{transform-box:fill-box; transform-origin:center;
  animation:tf-puls 2.8s var(--v,0s) ease-in-out infinite}
@keyframes tf-puls{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.07); opacity:.72}}
@media (prefers-reduced-motion:reduce){
  .ob--tafel .tf-offen{animation-duration:6s; animation-name:tf-puls-leise}
  @keyframes tf-puls-leise{0%,100%{opacity:1} 50%{opacity:.8}}
}
.ok-liste--tafel .tf-li-besetzt::before{background:#B9C6BD}
.ok-liste--tafel .tf-li-offen::before{background:transparent; border:1.5px dashed var(--signal); width:.6rem; height:.6rem; top:.52em}
.ok-liste--tafel #stellen-zahl{font-weight:600; color:var(--ink)}

/* ── Jobsuche Startseite: Treffer als Karten unter dem Kasten ──────────
   Dieselben Karten wie auf karriere.html (.stellen-karten / .jk). */
.jobsuche-ergebnis{margin-top:1.4rem}
.jobsuche-ergebnis .stellen-kopfzeile{margin-top:0}
.jobsuche-ergebnis-alle{margin:1.2rem 0 0}
.jt-leer{margin:0; font-size:.95rem; color:var(--ink-2)}
.jt-leer a{color:var(--signal-text); font-weight:600}

/* ── Stellenfenster (assets/stellenfenster.js) ───────────────────────────
   Anzeige + Bewerbung über der Seite. Schließt nur über das X (Marcus):
   die Fläche daneben fängt Klicks ab, ohne etwas zu tun. */
html.sf-offen,html.sf-offen body{overflow:hidden}
.sf{position:fixed; inset:0; z-index:9990; display:flex; align-items:center; justify-content:center;
  padding:clamp(0rem,2.5vw,2rem)}
.sf[hidden]{display:none}
.sf-grund{position:absolute; inset:0; background:rgba(9,20,15,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease}
.sf-blatt{position:relative; display:flex; flex-direction:column; width:min(100%,64rem); max-height:100%;
  height:min(100%,56rem); background:var(--bg); color:var(--ink); border-radius:var(--radius-lg);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55); overflow:hidden;
  transform:translateY(14px) scale(.985); opacity:0; transition:transform .26s var(--ease-out), opacity .22s ease}
.sf--da .sf-grund{opacity:1}
.sf--da .sf-blatt{transform:none; opacity:1}
@media (prefers-reduced-motion:reduce){ .sf-blatt{transform:none; transition:opacity .3s ease} }
.sf-kopf{display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem .7rem clamp(1rem,3vw,2rem);
  border-bottom:1px solid var(--linie); background:var(--bg); flex:none}
.sf-kopf-titel{flex:1; min-width:0; margin:0; font-family:var(--font-head); font-weight:650; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sf-seite{font-size:.85rem; color:var(--ink-2); white-space:nowrap}
.sf-seite:hover{color:var(--signal-text)}
.sf-kopf .sf-bewerben{min-height:40px; padding:.45rem 1.05rem; font-size:.9rem}
.sf-zu{flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid var(--linie-stark); background:var(--bg); color:var(--ink); transition:background var(--dur), color var(--dur), border-color var(--dur)}
.sf-zu svg{width:1.15rem; height:1.15rem}
.sf-zu:hover,.sf-zu:focus-visible{background:var(--signal-weich); color:var(--signal-2); border-color:var(--signal-text)}
.sf-rolle{flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.sf-laedt{margin:0; padding:4rem 2rem; text-align:center; color:var(--ink-2)}
.sf-teil{padding:clamp(1.4rem,3.4vw,2.6rem) clamp(1rem,3.4vw,2.6rem)}
.sf-teil + .sf-teil{border-top:1px solid var(--linie)}
.sf-teil--flaeche,.sf-teil--bewerben{background:var(--surface)}
.sf-teil--kopf .eyebrow{display:inline-block; margin-bottom:.4rem}
body .sf-titel{font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.15}
.sf-teil--kopf .hero-lead{margin:.7rem 0 0; color:var(--ink-2); font-size:1.02rem; max-width:48rem}
.sf-teil--kopf .kopf-kennwerte{margin-top:1.2rem; padding-top:1rem}
.sf-teil .stelle-marken{margin-bottom:1rem}
@media (max-width:640px){
  .sf{padding:0}
  .sf-blatt{height:100%; border-radius:0}
  .sf-seite{display:none}
  .sf-kopf .sf-bewerben{padding:.45rem .8rem}
}
.sf-kopf .sf-bewerben{transition:opacity .2s ease, visibility .2s}
.sf-kopf .sf-bewerben--weg{opacity:0; visibility:hidden}
.sf-teil--bewerben .bewerb-grid{max-width:none}

/* ── Jobsuche: × je Feld, Standort-Symbol links, „Zurücksetzen" (07.10.2026) ── */
.jobsuche-feld--ort svg{left:.9rem; right:auto}
body .jobsuche-feld--ort input{padding-left:2.5rem}
body .jobsuche-feld input{padding-right:2.6rem}
body .jobsuche-feld input[type=search]{padding-right:2.6rem}
body .jobsuche-feld input[type=search]::-webkit-search-cancel-button{display:none; -webkit-appearance:none}
body .jobsuche-feld--wahl select:not(.leer){padding-right:4.3rem}
/* Chromes eigenes Vorschlags-Pfeilchen im Feld: weg, das × steht dort. */
body .jobsuche-feld input::-webkit-calendar-picker-indicator{display:none !important; opacity:0}
.jobsuche-leeren{position:absolute; right:.5rem; top:50%; transform:translateY(-50%); display:grid; place-items:center;
  width:1.9rem; height:1.9rem; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer;
  font:inherit; font-size:1.25rem; line-height:1; color:var(--stahl); transition:background var(--dur), color var(--dur)}
.jobsuche-leeren:hover,.jobsuche-leeren:focus-visible{background:var(--signal-weich); color:var(--signal-2)}
.jobsuche-leeren[hidden]{display:none}
.jobsuche-feld--wahl .jobsuche-leeren{right:2.3rem}
/* Eigene Vorschlagsliste für Beruf und Standort (assets/jobsuche.js) — Safari
   klappt die eingebaute beim Klick nicht auf. Hängt am <body>, Lage per Skript. */
.jobsuche-vorschlaege{position:fixed; z-index:200; margin:0; padding:.3rem; list-style:none; overflow-y:auto;
  overscroll-behavior:contain; background:var(--bg); border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:0 18px 40px -18px rgb(11 14 16/.35)}
.jobsuche-vorschlaege[hidden]{display:none}
.jobsuche-vorschlaege li{display:flex; align-items:baseline; justify-content:space-between; gap:.8rem;
  padding:.5rem .7rem; border-radius:calc(var(--radius) - 2px); cursor:pointer; font-size:.95rem; line-height:1.35; color:var(--ink)}
.jobsuche-vorschlaege li small{flex:none; font-size:.8rem; color:var(--ink-2)}
.jobsuche-vorschlaege li:hover,.jobsuche-vorschlaege li.an{background:var(--signal-weich)}
.jobsuche-vorschlaege li.gewaehlt{font-weight:600; color:var(--signal-text)}
.stellen-zurueck{display:inline-flex; align-items:center; gap:.35rem}
.stellen-zurueck::before{content:"\00D7"; font-size:1.15em; line-height:1; text-decoration:none}