/* Steinkuhl GmbH v2 — site.css
   Regeln: nur transform/opacity bewegen · Easing --ease · Reduced Motion vollständig ·
   kein Pflichtinhalt startet unsichtbar ohne JS (html.js-Präfix) */
:root{
  --bg:#F4F6F9;--bg2:#EAEEF3;--ink:#071524;--ink2:#2B3546;--mute:#55617A;--line:rgba(7,21,36,.14);
  --dark:#071524;--dark2:#040D1A;--paper:#F4F6F9;--paper2:#C9D1DC;--paper3:#9AA6B8;--lined:rgba(244,246,249,.16);
  --blue:#0060B0;--sky:#4A9BE8;--grey:#8A94A8;
  --sans:'Archivo',Helvetica,Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.23,1,.32,1);--pad:40px;--head:70px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,video,canvas,svg{display:block;max-width:100%}
::selection{background:var(--blue);color:var(--paper)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.hero :focus-visible{outline-color:var(--sky)}
[id]{scroll-margin-top:var(--head)}

/* Typo-Rollen */
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1;font-variation-settings:'wdth' 118;text-wrap:balance}
h3{font-weight:600;letter-spacing:-.02em;font-variation-settings:'wdth' 108}
.h-xl{font-size:clamp(36px,5vw,80px);line-height:.98}
.h-l{font-size:clamp(32px,4.4vw,68px)}
.h-m{font-size:clamp(26px,3vw,46px);line-height:1.05;letter-spacing:-.025em}
.h-s{font-size:clamp(22px,2.2vw,32px);line-height:1.12}
.lead{font-size:clamp(17px,1.3vw,21px);line-height:1.45;max-width:640px;text-wrap:pretty}
.eb{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dark .eb,.hero .eb{color:var(--paper2)}
.eb-sky{color:var(--sky)}.eb-blue{color:var(--blue)}
.mo{font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1.7}
.mo-u{text-transform:uppercase;letter-spacing:.1em}
.dark .mo,.hero .mo{color:var(--paper2)}
.mute{color:var(--mute)}.ink2{color:var(--ink2)}
.dark{background:var(--dark);color:var(--paper)}
.dark .lead{color:var(--paper2)}
.pretty{text-wrap:pretty}

/* Raster */
.sec{padding:120px var(--pad)}
.sec-lg{padding:150px var(--pad)}
.wrap{max-width:1440px;margin:0 auto}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;align-items:end}
.two-eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two-eq.start{align-items:start}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hr{border-top:1px solid var(--line)}
.dark .hr{border-color:var(--lined)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-size:15px;font-weight:500;min-height:44px;transition:background-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)}
.btn-p{background:var(--blue);color:var(--paper)}
@media (hover:hover){.btn-p:hover{background:var(--sky);color:var(--dark)}}
.btn-o{border:1px solid rgba(244,246,249,.5);color:var(--paper)}
@media (hover:hover){.btn-o:hover{background:var(--paper);color:var(--dark)}}
.btn-i{border:1px solid rgba(7,21,36,.4);color:var(--ink)}
@media (hover:hover){.btn-i:hover{background:var(--ink);color:var(--paper)}}
.link{display:inline-block;padding:5px 0;color:var(--blue);font-weight:500;transition:color .2s var(--ease)}
@media (hover:hover){.link:hover{color:var(--ink)}}
.dark .link{color:var(--sky)}@media (hover:hover){.dark .link:hover{color:var(--paper)}}

/* Kopf */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;font-size:14px;border-radius:4px}
.skip:focus{left:16px}
.head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);height:var(--head);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(7,21,36,.08);color:var(--ink)}
.head .logo img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500;letter-spacing:.01em}
.nav a{padding:10px 0;border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.nav a[aria-current]{border-bottom-color:var(--blue);color:var(--blue)}@media (hover:hover){.nav a:hover{border-bottom-color:var(--blue);color:var(--blue)}}
.nav .cta{padding:9px 16px;background:var(--blue);color:var(--paper);border-radius:999px;border:0}
@media (hover:hover){.nav .cta:hover{background:var(--ink);color:var(--paper)}}
.mm{display:none}
.mm summary{list-style:none;display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:500;min-height:44px;cursor:pointer}
.mm summary::-webkit-details-marker{display:none}
.mm[open] summary{background:var(--ink);color:var(--paper)}
.mm-panel{position:fixed;left:0;right:0;top:var(--head);bottom:0;background:var(--dark);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:32px 24px;gap:4px}
.mm-panel a{font-size:36px;font-weight:600;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--lined)}
.mm-panel a:last-of-type{border:0}
.mm-panel p{margin-top:28px}

/* Abschnitts-Leiste rechts */
.rail{position:fixed;right:22px;bottom:28px;z-index:40;display:flex;flex-direction:column;gap:4px;mix-blend-mode:difference;color:#fff}
.rail a{display:flex;min-width:36px;align-items:center;justify-content:flex-end;gap:10px;min-height:24px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;opacity:.55;transition:opacity .25s var(--ease)}
.rail a.on{opacity:1}@media (hover:hover){.rail a:hover{opacity:1}}
.rail a span{display:none}
.rail a.on span{display:inline}
.rail a i{display:block;height:1px;width:14px;background:currentColor;transition:width .35s var(--ease)}
.rail a.on i{width:36px}

/* Reveal: nur mit JS versteckt, nie ohne */
html.js:not(.rm) [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js:not(.rm) [data-reveal].in{opacity:1;transform:none}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--dark2);color:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--pad) 40px;overflow:hidden}
.hero-media{position:absolute;inset:0;pointer-events:none}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 68% 38%,rgba(7,21,36,0) 0%,rgba(7,21,36,.35) 45%,rgba(3,10,20,.85) 100%),linear-gradient(90deg,rgba(7,21,36,.9) 0%,rgba(7,21,36,.4) 42%,rgba(7,21,36,0) 68%),linear-gradient(0deg,rgba(7,21,36,.94) 0%,rgba(7,21,36,0) 45%)}
.hero-spec{position:absolute;top:96px;right:var(--pad);text-align:right;line-height:1.8;animation:sk-in .9s var(--ease) 1.1s both}
.hero-body{position:relative;z-index:2;max-width:1100px}
.hero-body .mo{margin-bottom:28px;animation:sk-in .9s var(--ease) both}
.hero h1{font-size:clamp(50px,9.2vw,168px);line-height:.9;letter-spacing:-.045em;font-variation-settings:'wdth' 120}
.hero h1 span{display:block;animation:sk-clip 1.1s cubic-bezier(.7,0,.2,1) .15s both}
.hero h1 span+span{color:var(--sky);animation-delay:.45s}
.hero-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:end;margin-top:36px}
.hero-row p{font-size:clamp(17px,1.35vw,22px);line-height:1.45;max-width:600px;color:var(--paper);text-wrap:pretty;animation:sk-in .9s var(--ease) .8s both}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;animation:sk-in .9s var(--ease) 1s both}
.hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px 24px;border-top:1px solid rgba(244,246,249,.2);padding-top:20px;margin-top:40px;font-size:14px;line-height:1.6;color:var(--paper2);animation:sk-in .9s var(--ease) 1.2s both}
@keyframes sk-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes sk-clip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Weg des Signals (Journey) — ohne JS / reduziert: gestapelte Liste */
.journey{position:relative;background:var(--dark);color:var(--paper)}
.journey-stage{padding:92px var(--pad) 36px;display:flex;flex-direction:column}
.journey-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.ruler{position:relative;margin-top:24px;height:40px;border-top:1px solid rgba(244,246,249,.3)}
.ruler-mark{position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--sky);transform:translateX(-50%);box-shadow:0 0 0 4px rgba(74,155,232,.22);transition:left .35s var(--ease)}
.ruler-ticks{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.ruler-ticks span{position:relative;padding-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper2)}
.ruler-ticks span::before{content:"";position:absolute;left:0;top:0;width:1px;height:8px;background:rgba(244,246,249,.5)}
.journey-grid{margin-top:32px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.journey-vis{position:relative;min-height:220px;border-radius:12px;overflow:hidden;background:#04101E}
.journey-vis canvas,.journey-vis video,.journey-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.journey-vis .jv{opacity:0;transition:opacity .6s var(--ease)}
.journey-vis .jv.on{opacity:1}
.journey-vis::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(7,21,36,0) 45%,rgba(7,21,36,.6) 100%);pointer-events:none}
.stations{display:grid;gap:40px}
.station{display:flex;flex-direction:column;justify-content:center}
.station h3{margin-top:10px}
.station p+p{margin-top:14px;font-size:clamp(16px,1.2vw,19px);color:var(--paper2);max-width:480px;text-wrap:pretty}
.station .eb{color:var(--sky)}
/* Bühne nur mit JS und ohne Reduced Motion */
html.js:not(.rm) .journey{height:460vh}
html.js:not(.rm) .journey-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html.js:not(.rm) .journey-grid{flex:1;min-height:0;margin-top:24px}
html.js:not(.rm) .journey-vis{height:100%}
html.js:not(.rm) .stations{position:relative;min-height:220px;height:100%}
html.js:not(.rm) .station{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity,transform}
html.js:not(.rm) .station.on{pointer-events:auto}
.journey .ruler-mark{display:none}
html.js:not(.rm) .journey .ruler-mark{display:block}

/* Leistungen */
.svc{margin-top:64px;border-top:1px solid var(--line)}
.svc article{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:28px;padding:40px 16px;margin:0 -16px;border-radius:10px;border-bottom:1px solid var(--line);align-items:start;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover){.svc article:hover{background:#fff;box-shadow:0 20px 60px -30px rgba(7,21,36,.25)}}
.svc h3{font-size:clamp(24px,2.2vw,34px);line-height:1.1}
.svc .body{margin-top:12px;color:var(--ink2);max-width:460px;text-wrap:pretty}
.svc .lbl{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.svc .lbl+p+.lbl{margin-top:18px}
.svc .col{font-size:15px}
.note{margin-top:28px;font-size:14px;line-height:1.6;color:var(--mute);max-width:720px}

/* Präzision / OTDR */
.otdr{margin-top:56px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:stretch}
.panel{border:1px solid var(--lined);border-radius:12px;padding:20px;background:rgba(244,246,249,.03)}
.otdr-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.otdr canvas{width:100%;height:340px;margin-top:14px;touch-action:pan-y;cursor:crosshair}
.otdr-axis{display:flex;justify-content:space-between;margin-top:6px}
.otdr-side{display:flex;flex-direction:column;gap:16px}
.otdr-side .panel{flex:1;display:flex;flex-direction:column;gap:14px}
.ev{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:baseline;font-size:14px;padding-bottom:12px;border-bottom:1px solid rgba(244,246,249,.12);opacity:.35;transition:opacity .4s var(--ease)}
.ev.on{opacity:1}
.ev .mo{color:var(--sky)}
.ev .mo+span+.mo{color:var(--paper2)}
.otdr-res{margin-top:auto;padding-top:6px}
.otdr-res .val{font-size:clamp(20px,1.6vw,26px);font-weight:600;letter-spacing:-.02em;margin-top:8px;line-height:1.2}
.otdr-res .sub{font-size:14px;color:var(--paper2);margin-top:6px}
.tiles{margin-top:64px;border-top:1px solid var(--lined);padding-top:32px}
.tiles p+p{margin-top:10px;font-size:17px;line-height:1.4}
.otdr-clip{margin-top:32px;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#04101E}
.otdr-clip video,.otdr-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.otdr-clip figcaption{position:absolute;left:16px;bottom:14px}

/* Takt: 810 Striche */
.ticks{margin-top:56px;display:flex;flex-wrap:wrap;gap:5px 4px}
.ticks i{display:block;width:5px;height:18px;background:var(--grey)}
.ticks i.f{background:var(--blue)}
html.js:not(.rm) .ticks i{opacity:.12;transition:opacity .35s ease;transition-delay:calc(var(--i)*2.2ms)}
html.js:not(.rm) .ticks.on i{opacity:1}
.legend{margin-top:28px;display:flex;flex-wrap:wrap;gap:28px;font-size:14px;color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:10px}
.legend b{width:5px;height:14px;background:var(--grey);display:inline-block}
.legend b.f{background:var(--blue)}

/* Kupfer → Faser */
.copper{position:relative;background:var(--dark);color:var(--paper)}
.copper-stage{position:relative;padding:92px var(--pad) 36px;display:flex;flex-direction:column;overflow:hidden}
.copper-media{position:absolute;inset:0;pointer-events:none}
.copper-media video,.copper-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.copper-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,21,36,.9) 0%,rgba(7,21,36,.2) 40%,rgba(7,21,36,.2) 70%,rgba(7,21,36,.75) 100%)}
.copper-stage>*{position:relative}.copper-stage>.copper-media{position:absolute}
.copper-grid{margin-top:32px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.eras{display:grid;gap:36px}
.era{display:flex;flex-direction:column;justify-content:flex-end}
.era .eb{color:var(--sky)}
.era h3{margin-top:10px}
.era p+p{margin-top:14px;font-size:clamp(16px,1.2vw,19px);color:var(--paper2);max-width:480px;text-wrap:pretty}
html.js:not(.rm) .copper{height:400vh}
html.js:not(.rm) .copper-stage{position:sticky;top:0;height:100vh;height:100svh}
html.js:not(.rm) .copper-grid{flex:1;min-height:0}
html.js:not(.rm) .eras{position:relative;min-height:240px;height:100%}
html.js:not(.rm) .era{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.swap{transition:opacity .22s ease}

/* Dokumentar */
.doc{position:relative;min-height:80vh;overflow:hidden;background:var(--dark);color:var(--paper);display:flex;align-items:flex-end}
.doc picture,.doc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.doc::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,21,36,.88) 0%,rgba(7,21,36,.2) 45%,rgba(7,21,36,.25) 100%)}
.doc-body{position:relative;padding:48px var(--pad);width:100%;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:end}
.doc h2{font-size:clamp(34px,4.6vw,76px);line-height:.96;letter-spacing:-.035em}
.doc .mo{text-align:right;line-height:1.9}

/* Menschen */
.people{margin-top:56px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}
.fig{position:relative;overflow:hidden;border-radius:8px;background:#DDE3EB}
.fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover){.fig:hover img{transform:scale(1.04)}}
.fig figcaption{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);background:rgba(7,21,36,.9);padding:6px 10px;border-radius:4px}
.fig.tall{grid-row:span 2;aspect-ratio:4/5}
.fig.wide{aspect-ratio:4/3}
.fig.r32{aspect-ratio:3/2}
.roles{grid-column:2/span 2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-content:start;padding-top:8px}
.roles div{border-top:1px solid var(--line);padding-top:12px}
.roles p:first-child{font-weight:600}
.roles p+p{font-size:14px;color:var(--mute);margin-top:4px;line-height:1.45}

/* Region & Engagement */
.region{background:var(--bg2)}
.coords{margin-top:32px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;line-height:1.9;color:var(--ink2)}
.engage{margin-top:120px;border-top:1px solid var(--line);padding-top:56px}
.engage h2{max-width:900px}
.engage .three{margin-top:48px}
.engage article .eb{margin-top:18px;color:var(--blue)}
.engage h3{font-size:24px;margin-top:8px;line-height:1.15}
.engage article p:last-child{margin-top:12px;font-size:15px;color:var(--ink2);text-wrap:pretty}

/* Karriere-Teaser */
.worlds{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--lined);border:1px solid var(--lined)}
.worlds a{display:block;background:var(--dark);padding:28px 24px;min-height:220px;transition:background-color .25s var(--ease)}
@media (hover:hover){.worlds a:hover{background:#0B2038}}
.worlds h3{font-size:22px;margin-top:14px;line-height:1.15}
.worlds p+h3{margin-top:14px}
.worlds h3+p{margin-top:12px;font-size:14px;color:var(--paper2)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Kontakt */
.kontakt{padding:150px var(--pad) 72px}
.kontakt .two{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
.tel-big{display:block;font-size:clamp(28px,3.4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.mail-big{display:block;font-size:clamp(20px,2.2vw,32px);font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--blue);margin-top:6px;transition:color .2s var(--ease)}
@media (hover:hover){.mail-big:hover{color:var(--ink)}}
.contacts{border-top:1px solid var(--line)}
.contacts div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.contacts .name{font-size:18px;font-weight:600;margin-top:4px}
.contacts a{font-family:var(--mono);font-size:14px;padding:10px 14px;border:1px solid rgba(7,21,36,.3);border-radius:999px;min-height:44px;display:inline-flex;align-items:center;transition:background-color .2s var(--ease),color .2s var(--ease)}
@media (hover:hover){.contacts a:hover{background:var(--ink);color:var(--paper)}}

/* Licht an */
.licht{position:relative;padding:150px var(--pad);overflow:hidden;text-align:center}
.licht::before{content:"";position:absolute;left:50%;top:50%;width:min(90vw,1100px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(0,96,176,.55) 0%,rgba(0,96,176,.18) 30%,rgba(7,21,36,0) 62%);pointer-events:none}
.licht>*{position:relative}
.licht-big{display:inline-block;font-size:clamp(64px,14vw,240px);font-weight:700;letter-spacing:-.05em;line-height:.9;font-variation-settings:'wdth' 122;margin:28px 0;transition:color .3s var(--ease)}
@media (hover:hover){.licht-big:hover{color:var(--sky)}}
.licht .btn{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* Fuß */
.foot{padding:40px var(--pad) 32px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:start;font-size:14px;color:var(--mute)}
.foot .logo img{height:34px;width:auto}
.foot address{font-style:normal;margin-top:14px;line-height:1.6}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;padding-top:6px}
@media (hover:hover){.foot nav a:hover,.foot .credit a:hover{color:var(--ink)}}
.foot .credit{text-align:right;line-height:1.8}
.foot nav a,.foot .credit a{display:inline-block;padding:5px 0}.foot .credit a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(7,21,36,.3)}
.foot button{margin-top:10px;font-size:13px;text-decoration:underline;text-underline-offset:3px;color:var(--mute)}
@media (hover:hover){.foot button:hover{color:var(--ink)}}

/* Karriere-Seite */
.k-hero{min-height:82vh}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.tabs button{padding:10px 16px;border:1px solid rgba(7,21,36,.3);border-radius:999px;font-size:14px;font-weight:500;min-height:44px;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover){.tabs button:hover{border-color:var(--ink)}}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.world{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
html.js .world[hidden]{display:none}
.world-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.world-head .lead{margin-top:20px}
.world-cols{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.world-cols h3{font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-variation-settings:normal}
.world-cols ul{margin-top:12px;display:grid;gap:8px}
.world-cols li{padding-left:16px;position:relative;line-height:1.45}
.world-cols li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.world-cols p{margin-top:12px;line-height:1.5}
.world-place{margin-top:12px;font-size:15px;color:var(--ink2)}
.world-clip{margin-top:40px;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:21/9;background:#04101E}
.world-clip video,.world-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world-clip figcaption{position:absolute;left:16px;bottom:14px;color:var(--paper)}

.day{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.clock{width:100%;max-width:460px;margin:0 auto;aspect-ratio:1;overflow:visible;padding:14px 0}
.clock .tk{stroke:var(--lined)}
.clock .tk.m{stroke:rgba(244,246,249,.5)}
.clock .dot{r:16px;fill:rgba(244,246,249,.35);cursor:pointer;transition:fill .2s var(--ease)}
.clock .dot.on{fill:var(--sky)}@media (hover:hover){.clock .dot:hover{fill:var(--sky)}}
.clock .lb{fill:var(--paper2);font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.clock .lb.on{fill:var(--paper)}
.clock .hand{stroke:var(--sky);stroke-width:2;stroke-linecap:round;transform-origin:200px 200px;transition:transform .6s var(--ease)}
.clock .core{fill:var(--sky)}
.clock .big{fill:var(--paper);font-family:var(--mono);font-size:34px;font-weight:500;letter-spacing:-.02em}
.day-steps{display:grid;gap:0}
.step{padding:22px 0;border-top:1px solid var(--lined)}
.step:last-child{border-bottom:1px solid var(--lined)}
.step .mo{color:var(--sky)}
.step h3{font-size:clamp(22px,2vw,30px);margin-top:8px;line-height:1.15}
.step p:not(.mo){margin-top:10px;color:var(--paper2);text-wrap:pretty;max-width:520px}
.step .chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:13px;padding:4px 10px;border:1px solid var(--lined);border-radius:999px;color:var(--paper2)}
html.js .day-steps{position:relative}
html.js .step{display:none;border:0}
html.js .step.on{display:block}
.day-nav{display:flex;gap:8px;margin-top:20px}
.day-nav button{min-width:44px;min-height:44px;border:1px solid var(--lined);border-radius:999px;transition:background-color .2s var(--ease),color .2s var(--ease)}
@media (hover:hover){.day-nav button:hover{background:var(--paper);color:var(--dark)}}
html:not(.js) .day-nav{display:none}

.expect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.expect .h-l{margin-top:14px}
.expect .list{margin-top:28px;display:grid;gap:14px;font-size:17px;line-height:1.45;max-width:520px}
.expect .list p{padding-left:20px;position:relative}
.expect .list p::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--blue)}

.form{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.form form{display:grid;gap:20px}
.fld{display:grid;gap:8px}
.fld label,.fld legend{font-size:14px;font-weight:500}
.fld input,.fld textarea{font:inherit;font-size:16px;padding:14px 16px;border:1px solid rgba(7,21,36,.35);border-radius:8px;background:#fff;color:var(--ink);min-height:48px;width:100%}
.fld textarea{min-height:140px;resize:vertical}
.fld input:not([type=checkbox]):not([type=radio]),.fld textarea{-webkit-appearance:none;appearance:none}
.fld input:focus,.fld textarea:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.fld small{font-size:13px;color:var(--mute)}
.fld fieldset{border:0;padding:0;margin:0}
.radios{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.radios label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(7,21,36,.3);border-radius:999px;font-size:14px;min-height:44px;cursor:pointer}
.radios input{margin:0;accent-color:var(--blue)}
.radios label:has(:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:16px 18px;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:15px}
.form-msg.err{border-color:#B3261E;color:#8B1A14}
.form-msg.ok{border-color:var(--blue)}
.form-side{font-size:15px;line-height:1.55;color:var(--ink2)}
.form-side .contacts{margin-top:24px}
.big-ok{font-size:clamp(40px,6vw,96px);letter-spacing:-.04em;line-height:.95;color:var(--blue)}

/* Ansprechpartner-Seite */
.t-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:150px var(--pad) 90px}
.chips-q{margin-top:32px}
.chips-q .lbl{font-size:14px;font-weight:500;margin-bottom:10px}
.chips-q [role=group]{display:flex;flex-wrap:wrap;gap:8px}
.chips-q button{padding:9px 14px;border:1px solid rgba(244,246,249,.4);border-radius:999px;font-size:14px;min-height:44px;color:var(--paper);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover){.chips-q button:hover{border-color:var(--paper)}}
.chips-q button[aria-pressed="true"]{background:var(--paper);color:var(--dark);border-color:var(--paper)}
.card{border:1px solid var(--lined);border-radius:16px;padding:28px;background:rgba(244,246,249,.03);display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center}
.portrait{position:relative;aspect-ratio:1;border-radius:12px;background:linear-gradient(145deg,#0B2038,#040D1A);display:flex;align-items:center;justify-content:center;border:1px solid var(--lined)}
.portrait span{font-size:34px;font-weight:600;letter-spacing:-.03em}
.portrait small{position:absolute;right:10px;bottom:8px;font-family:var(--mono);font-size:12px;color:var(--paper2)}
.card .eb{color:var(--sky)}
.card .name{font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.card .area{margin-top:4px;color:var(--paper2)}
.card .note{margin-top:8px;font-size:15px;color:var(--paper2)}
.card .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.card .acts a{font-family:var(--mono);font-size:14px;padding:10px 14px;border:1px solid rgba(244,246,249,.4);border-radius:999px;min-height:44px;display:inline-flex;align-items:center;transition:background-color .2s var(--ease),color .2s var(--ease)}
@media (hover:hover){.card .acts a:hover{background:var(--paper);color:var(--dark)}}
.card .also{margin-top:12px;font-size:14px;color:var(--paper2)}
.card .hours{margin-top:14px}
.group{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.group-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;align-items:end}
.group-head p.lead{font-size:17px}
.persons{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.person{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:6px;scroll-margin-top:calc(var(--head) + 16px)}
.person:target{outline:3px solid var(--blue);outline-offset:3px}
.person .area{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.person .name{font-size:20px;font-weight:600;letter-spacing:-.02em}
.person .note{font-size:14px;color:var(--ink2);flex:1}
.person .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.person .acts a{font-family:var(--mono);font-size:13px;padding:8px 12px;border:1px solid rgba(7,21,36,.3);border-radius:999px;min-height:40px;display:inline-flex;align-items:center;transition:background-color .2s var(--ease),color .2s var(--ease)}
@media (hover:hover){.person .acts a:hover{background:var(--ink);color:var(--paper)}}
.person.ext{box-shadow:inset 3px 0 0 var(--blue)}.person.ext .area{color:var(--blue)}
.k3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.k3 .eb{margin-bottom:12px}
.k3 a.big{display:block;font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.k3 a.big+a.big{font-size:clamp(17px,1.4vw,20px);font-weight:500;color:var(--blue);margin-top:4px}
.k3 p{line-height:1.6}
.k3 .mo{margin-top:8px}
.k3 .link{display:inline-block;margin-top:14px}

/* Responsiv */
@media (max-width:1100px){
  .rail{display:none}
  .four{grid-template-columns:1fr 1fr}
  .worlds{grid-template-columns:1fr 1fr}
  .persons{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--pad:20px}
  .nav{display:none}.mm{display:block}
  .two,.two-eq,.hero-row,.journey-grid,.copper-grid,.doc-body,.kontakt .two,.world-head,.day,.expect,.form,.t-hero,.group-head,.otdr{grid-template-columns:minmax(0,1fr);gap:28px}
  .people{grid-template-columns:1fr}.fig.tall{grid-row:auto;aspect-ratio:4/3}.roles{grid-column:auto;grid-template-columns:1fr 1fr}
  .three,.world-cols,.k3{grid-template-columns:1fr}
  .hero-cta{justify-content:flex-start;flex-direction:column}
  .hero-spec,.copper-spec,.doc .mo{display:none}
  .foot{grid-template-columns:1fr;gap:24px}.foot nav{justify-content:flex-start}.foot .credit{text-align:left}
  .sec,.sec-lg,.kontakt,.licht{padding-top:88px;padding-bottom:88px}
  .journey-stage,.copper-stage{padding-top:84px}
  html.js:not(.rm) .journey-vis{height:34vh;min-height:180px}
  html.js:not(.rm) .journey-grid{display:grid;grid-template-rows:auto minmax(0,1fr);gap:20px}
  .otdr canvas{height:260px}
  .card{grid-template-columns:88px 1fr;padding:20px}
  .persons{grid-template-columns:1fr}
  .ticks{gap:4px 3px}.ticks i{width:4px;height:14px}
}
@media (max-width:560px){.four,.worlds,.roles{grid-template-columns:1fr}}

/* Reduced Motion — System oder Schalter (html.rm) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .hero h1 span{clip-path:none}
  .fig:hover img{transform:none}
}
html.rm{scroll-behavior:auto}
html.rm *,html.rm *::before,html.rm *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
@media (hover:hover){html.rm .fig:hover img{transform:none}}

.k3 .big{display:block;padding:4px 0}[data-motion-toggle]{padding:8px 0;min-height:32px}

.foot .nlf a{color:var(--mute)}.foot .nlf b{font-weight:600;color:var(--ink)}@media (hover:hover){.foot .nlf a:hover b{color:var(--blue)}}
.faq{margin:0;display:grid;gap:22px}.faq div{border-top:1px solid var(--line);padding-top:16px}.faq dt{font-weight:600;font-size:18px;margin-bottom:6px}.faq dd{margin:0;color:var(--mute);max-width:60ch}
.sticky-cta{display:none}@media (max-width:700px){.sticky-cta{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:9;background:var(--blue);color:#fff;text-align:center;font-weight:600;padding:14px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(7,21,36,.25);text-decoration:none}.sticky-cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}body:has(.sticky-cta){padding-bottom:72px}body:has(#bewerben form:focus-within) .sticky-cta{display:none}}
@media (max-width:1399px){.rail{display:none}}
@media (max-width:400px){.clock .dot{r:18px}}
.world-pay{margin-top:10px;font-size:14px;color:var(--mute);max-width:60ch}