/* ---------- Fonts: Geist and Geist Mono (SIL OFL, see fonts/OFL.txt), self-hosted variable files ---------- */
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/geist-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/geist-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ---------- Tokens: light is default, dark follows the system unless the visitor picked a theme ---------- */
:root{
  color-scheme:light;
  --bg:#F7F9FB; --surface:#FDFEFE; --sunk:#E4E9F0; --ink:#0B1926; --ink-2:#283746; --muted:#4A5866;
  --line:#D2D9E2; --line-strong:#A3AFBC;
  --brand:#004178; --brand-hover:#00335F; --brand-tint:#E2EBF4; --on-brand:#F4F8FC;
  --ok:#0B7F37; --warn:#B45400; --crit:#C42020; --tbd:#9A4A00;
  --map-sea:#E2EBF4; --map-land:#FBFCFD; --map-border:#C3CDD7;
  --shadow:0 1px 2px rgba(0,40,80,.07),0 2px 8px -2px rgba(0,40,80,.06),0 18px 40px -18px rgba(0,40,80,.3);
  --anchor:#052A4D; --anchor-ink:#EEF3F8; --anchor-muted:#AFC2D5; --anchor-line:rgba(238,243,248,.16); --anchor-accent:#8CC6F2;
  --f-sans:"Geist","Segoe UI",system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --r:6px; --max:1240px; --gut:24px; --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#08131D; --surface:#132433; --sunk:#0F1E2C; --ink:#E6EDF3; --ink-2:#C3CEDA; --muted:#97A7B6;
    --line:#1D3043; --line-strong:#33506A;
    --brand:#6DB7EE; --brand-hover:#93CBF4; --brand-tint:#0F2A42; --on-brand:#051320;
    --ok:#4DCB7C; --warn:#F2A43C; --crit:#FF7D7D; --tbd:#F2C14E;
    --map-sea:#0B1823; --map-land:#132739; --map-border:#2A4560;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.7);
    --anchor:#0C2338; --anchor-ink:#E6EDF3; --anchor-muted:#A3B5C7; --anchor-line:#1F3B56; --anchor-accent:#6DB7EE;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08131D; --surface:#132433; --sunk:#0F1E2C; --ink:#E6EDF3; --ink-2:#C3CEDA; --muted:#97A7B6;
  --line:#1D3043; --line-strong:#33506A;
  --brand:#6DB7EE; --brand-hover:#93CBF4; --brand-tint:#0F2A42; --on-brand:#051320;
  --ok:#4DCB7C; --warn:#F2A43C; --crit:#FF7D7D; --tbd:#F2C14E;
  --map-sea:#0B1823; --map-land:#132739; --map-border:#2A4560;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.7);
  --anchor:#0C2338; --anchor-ink:#E6EDF3; --anchor-muted:#A3B5C7; --anchor-line:#1F3B56; --anchor-accent:#6DB7EE;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum"}
.sec{padding-block:104px}
.sunk{background:var(--sunk)}
h2.h{font-size:clamp(1.9rem,3.3vw,2.8rem);letter-spacing:-.03em;line-height:1.06;max-width:20ch}
.lede{margin-top:18px;font-size:1.0625rem;color:var(--ink-2);max-width:62ch}
/* Placeholder marker: dashed = must be checked before publishing */
.tbd{display:inline-block;font:500 .72rem/1.4 var(--f-mono);letter-spacing:.02em;color:var(--tbd);border:1px dashed currentColor;border-radius:var(--r);padding:0 6px;vertical-align:.12em;white-space:nowrap;text-transform:none}
.tbd-text{border-bottom:1px dashed var(--tbd)}

svg.ic{width:1em;height:1em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.125em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease),color .25s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-secondary{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-secondary:hover{border-color:var(--ink);}
.btn .ic{transition:transform .25s var(--ease)}
.btn:hover .ic-arrow-right{transform:translateX(3px)}
.btn-sm{height:38px;padding:0 14px;font-size:.88rem}
.btn-on{background:var(--on-brand);color:var(--brand)}
.btn-on:hover{background:color-mix(in srgb,var(--on-brand) 86%,var(--brand))}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand);text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Reveal (scroll storytelling, disabled for reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
  .rv.in{opacity:1;transform:none}
  .hero-in>*{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line)}
.hdr .wrap{height:68px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo img{display:block;height:42px;width:auto}
:root[data-theme="dark"] .logo img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo img{filter:brightness(0) invert(1)}}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.cur::after{transform:scaleX(1)}
/* Career addresses applicants, not operators: set apart by a divider and the brand colour */
.nav a[data-v="karriere"]{color:var(--brand);font-weight:600}
.nav-badge{font:600 .7rem/1 var(--f-sans);padding:4px 7px;border-radius:999px;background:var(--brand-tint);color:var(--brand);white-space:nowrap}
.nav a[data-v="karriere"]:hover{color:var(--brand-hover)}
.nav a[data-v="karriere"]::before{content:"";position:absolute;left:-14px;top:50%;width:1px;height:16px;margin-top:-8px;background:var(--line-strong)}
.hdr-act{display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);border:1px solid var(--line);background:transparent;cursor:pointer;font-size:1.15rem;color:var(--ink-2)}
.icon-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.menu-btn{display:none}
/* The badge only fits the desktop bar on wide screens; the mobile menu has room again */
@media (min-width:1024px) and (max-width:1279px){.nav-badge{display:none}}
@media (max-width:1180px){.nav{gap:20px}.nav a[data-v="karriere"]::before{left:-11px}}
@media (min-width:1024px) and (max-width:1100px){.nav{gap:16px}.nav a[data-v="karriere"]::before{left:-9px}}
@media (max-width:1023px){
  .menu-btn{display:grid}
  .nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
  .nav.open{opacity:1;transform:none;visibility:visible}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav a::after,.nav a[data-v="karriere"]::before{display:none}
  .nav+.hdr-act .btn{display:none}
  .hdr .wrap{gap:12px}
  .nav+.hdr-act{margin-left:auto}
}
/* Mobile CTA bar, toggled by the inline script */
.mcta{display:none}
@media (max-width:1023px){
  .mcta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-top:1px solid var(--line);transform:translateY(100%);visibility:hidden;transition:transform .4s var(--ease),visibility .4s}
  .mcta.on{transform:none;visibility:visible}
  .mcta .btn-primary{flex:1}
  .mcta-tel{flex:none;width:46px;padding:0;font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){.mcta{transition:none}}

/* ---------- Hero ---------- */
.hero{padding-top:56px;padding-bottom:56px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.4rem,3.9vw,3.6rem);letter-spacing:-.035em;line-height:1.04}
.hero .lede{font-size:1.15rem;max-width:40ch;margin-top:22px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
/* Home hero: platform video full-bleed behind compact copy; a soft spot of navy sits only behind the copy. Dark in both themes */
.hero-vid{position:relative;padding-block:0;background:var(--anchor);color:var(--anchor-ink)}
.hero-stage{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:min(86svh,820px);padding-block:96px}
.hero-vid .wrap{display:block;width:100%}
.hero-vid .hero-in{max-width:620px}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 50%;filter:blur(1.5px) saturate(.95);transform:scale(1.02)}
/* Scroll scene (JS adds .scrolly only where the video plays): a sticky stage on a runway; --p runs 0..1 */
.hero-vid.scrolly{height:calc(220svh - var(--hdr,68px))}
.scrolly .hero-stage{position:sticky;top:var(--hdr,68px);height:calc(100svh - var(--hdr,68px));min-height:0;padding-block:0}
.scrolly .hero-in{opacity:calc(1 - var(--p,0) / .35);transform:translateY(calc(var(--p,0) * -110px))}
.scrolly .hero-scrim{opacity:clamp(0,calc((.6 - var(--p,0)) / .4),1)}
.scrolly .hero-bg{filter:blur(calc(clamp(0,(.6 - var(--p,0)) / .4,1) * 1.5px)) saturate(.95);transform:scale(calc(1 + clamp(0,(.6 - var(--p,0)) / .4,1) * .02))}
/* A soft navy spot behind the copy only; the rest of the video keeps a light tint */
.hero-scrim{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 48% 42% at 24% 50%,color-mix(in srgb,var(--anchor) 86%,transparent) 0%,color-mix(in srgb,var(--anchor) 58%,transparent) 45%,transparent 100%),
  color-mix(in srgb,var(--anchor) 10%,transparent)}
.hero-vid .claim{font-size:clamp(2.2rem,4.2vw,3.6rem);letter-spacing:-.035em;line-height:1;color:var(--anchor-ink);max-width:none}
.rot{display:grid}
.rot:not(.live){font-size:.62em;line-height:1.05}
.rot.live>span{grid-area:1/1;opacity:0;transform:translateY(.28em);filter:blur(10px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.rot.live>.on{opacity:1;transform:none;filter:none}
.rot.live>.out{transform:translateY(-.28em)}
.hero-vid .lede{font-size:clamp(1rem,1.25vw,1.15rem);max-width:44ch;margin-top:16px;color:var(--anchor-ink)}
.hero-vid .ctas{margin-top:26px}
.hero-vid .claim,.hero-vid .lede{text-shadow:0 2px 24px rgba(5,42,77,.55),0 1px 3px rgba(5,42,77,.4)}
.hero-vid .btn-primary{background:var(--anchor-ink);color:var(--anchor)}
.hero-vid .btn-primary:hover{background:#fff}
.hero-vid .btn-secondary{border-color:color-mix(in srgb,var(--anchor-ink) 45%,transparent);color:var(--anchor-ink);background:color-mix(in srgb,var(--anchor) 45%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-vid .btn-secondary:hover{border-color:var(--anchor-ink)}
.hero-vid :focus-visible{outline-color:var(--anchor-accent)}
.hero-vid .vid-toggle{right:24px;bottom:24px}
/* Source photos are darkened; lift them until unedited originals are available */
.k-hero-fig{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.k-hero-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
/* Hero incident ticket */
.inc{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.inc-hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.inc-id{font-family:var(--f-mono);font-weight:600;color:var(--ink)}
.inc-st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ok);transition:color .4s var(--ease)}
.inc-st[data-s=warn]{color:var(--warn)}
.inc-st[data-s=crit]{color:var(--crit)}
.inc-clock{display:flex;flex-direction:column;gap:6px;padding:24px 20px 4px;font-size:.84rem;color:var(--muted)}
.inc-clock b{font:600 clamp(2.4rem,4vw,3.4rem)/1 var(--f-sans);letter-spacing:-.035em;color:var(--ink);font-feature-settings:"tnum"}
.inc-steps{padding:14px 20px 10px}
.inc-steps li{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;padding:10px 0 10px 24px;transition:opacity .5s var(--ease)}
.inc-steps li::before{content:"";position:absolute;left:0;top:16px;width:11px;height:11px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.inc-steps li::after{content:"";position:absolute;left:5px;top:31px;bottom:-11px;width:1px;background:var(--line)}
.inc-steps li:last-child::after{display:none}
.inc-steps .t{font:500 .84rem/1.5 var(--f-sans);color:var(--muted);font-feature-settings:"tnum";white-space:nowrap}
.inc-steps b{display:block;font-size:.95rem;font-weight:600;line-height:1.35}
.inc-steps div span{display:block;margin-top:2px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.inc-steps .who{font-style:normal;font-weight:500;color:var(--ink-2)}
.sla{display:inline-flex;align-items:center;gap:5px;font:500 .78rem/1.5 var(--f-sans);font-feature-settings:"tnum";font-style:normal;color:var(--muted);border:1px solid var(--line);border-radius:var(--r);padding:1px 7px;white-space:nowrap}
.sla .ic{visibility:hidden}
.inc-steps li.on::before{background:var(--brand);border-color:var(--brand)}
.inc-steps li.on .sla{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.inc-steps li.on .sla .ic{visibility:visible}
.inc.play li:not(.on){opacity:.35}
.inc-steps li.cur::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 22%,transparent)}
.inc-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 20px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.inc-replay{display:inline-flex;align-items:center;gap:6px;min-height:32px;border:0;background:none;padding:0;color:var(--brand);font-weight:600;font-size:.84rem;cursor:pointer}
.inc-replay.off{visibility:hidden}
.inc-replay:hover{text-decoration:underline;text-underline-offset:4px}
.live-dot{width:8px;height:8px;border-radius:50%;background:currentColor;position:relative;flex:none}
@media (prefers-reduced-motion:no-preference){
  .live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:ping 2.2s var(--ease) infinite}
  @keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.8);opacity:0}}
}
/* ---------- Live bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.tile{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:26px;position:relative;overflow:hidden}
.t-kpi{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-content:space-between}
.kpi b{display:block;font:600 2.2rem/1 var(--f-sans);letter-spacing:-.035em;font-feature-settings:"tnum"}
.t-kpi .kpi b{font-size:clamp(2.4rem,3.6vw,3.2rem)}
.t-kpi .kpi{padding-top:8px}
.kpi b em{font-style:normal;font-size:.55em;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:2px}
.kpi b em.pre{margin:0 4px 0 0}
.t-kpi .kpi b{white-space:nowrap}
.kpi span{display:block;margin-top:10px;font-size:.86rem;color:var(--muted);line-height:1.4}
.t-kpi .note{grid-column:1/-1}
.kpi b .fn{margin-left:2px;font-size:.45em;font-weight:500;line-height:0;vertical-align:super;color:var(--muted)}
.t-kpi .note{font-size:.8rem;color:var(--muted)}
.sla-head{margin-bottom:40px}
.sla-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start;margin-bottom:48px}
.sla-top .sla-head{margin-bottom:0}
.sla-top .sla-checks{grid-template-columns:1fr;margin-top:32px}
.sla-checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;margin-top:40px}

/* ---------- Problem ---------- */
.prob{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}
.prob-head{position:sticky;top:112px;align-self:start}
.cap-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-top:1px solid var(--line)}
.cap-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}
.cap-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);background:var(--brand-tint);color:var(--brand);font-size:1.25rem}
.cap-list h3{margin:0;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.cap-list p{margin-top:4px;font-size:.95rem;line-height:1.5;color:var(--muted)}
.compliance{display:flex;align-items:center;gap:12px;margin-top:26px;font-weight:500;color:var(--ink-2)}
.compliance .ic{font-size:1.4rem;color:var(--brand)}

/* ---------- Services ---------- */
.feat{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;margin-top:56px}
.feat article:nth-child(2){margin-top:48px}
.feat figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--sunk)}
.feat img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
/* Visible AI disclosure (Art. 50(4) AI Act); the alt text carries it for screen readers, so the tag is presentational */
.ai-img{position:relative}
.ai-tag{position:absolute;left:10px;bottom:10px;padding:5px 8px;border-radius:999px;font:600 .68rem/1 var(--f-sans);letter-spacing:.02em;color:#fff;background:rgba(8,22,38,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
.feat article:hover img{transform:scale(1.035)}
.feat .k{display:flex;align-items:center;gap:8px;margin-top:20px;font:500 .8rem/1 var(--f-mono);color:var(--brand)}
.feat h3{font-size:1.35rem;margin-top:10px}
.feat p{margin-top:10px;color:var(--muted);font-size:.95rem;max-width:44ch}

/* ---------- Platform ---------- */
.plat-head p.lede{max-width:72ch}
/* Video play/pause control */
.vid-toggle{all:unset;box-sizing:border-box;position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#EEF3F8;background:rgba(11,25,38,.62);cursor:pointer;opacity:.85;transition:opacity .25s var(--ease),background-color .25s var(--ease)}
.vid-toggle:hover{opacity:1;background:rgba(11,25,38,.82)}
.vid-toggle:focus-visible{opacity:1;outline:2px solid var(--brand);outline-offset:3px}
.cap{margin-top:12px;font-size:.8rem;color:var(--muted)}
/* Predictive maintenance */
.pm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;margin-top:56px;align-items:start}
.pm h3{font-size:1.5rem;letter-spacing:-.025em;max-width:24ch}
.pm .lede{font-size:.98rem}
.chart-box{margin-top:0;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:18px 18px 12px}
.chart-box svg{display:block;width:100%;height:auto;overflow:visible}
.chart-box text{font:400 11px var(--f-mono);fill:var(--muted)}

/* ---------- Check list ---------- */
.checks{display:grid;gap:12px;margin-top:28px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks .ic{color:var(--brand);font-size:1.25rem;margin-top:2px}

/* ---------- Map ---------- */
.map-sec .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.mstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.mstats b{display:block;font:600 2.6rem/1 var(--f-sans);letter-spacing:-.04em;font-feature-settings:"tnum"}
/* A list of regions instead of a figure: same column, text size */
.mstats .mstats-regions b{font-size:1.15rem;line-height:1.4;letter-spacing:-.01em}
.mstats>div>span{display:block;font-size:.88rem;color:var(--muted);margin-top:8px}
.map-sec .ctas{margin-top:30px}
.map-card{border-radius:var(--r);border:1px solid var(--line);background:var(--map-sea);overflow:hidden;position:relative}
.map-card svg{display:block;width:100%;height:auto}
.map-card .land{fill:var(--map-land)}
.map-card .bord{fill:none;stroke:var(--map-border);stroke-width:1}
.pin circle.b{fill:var(--surface);stroke-width:3}
.pin text{font:600 11px var(--f-mono);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.pin .g{stroke:var(--ok)}.pin .y{stroke:var(--warn)}.pin .r{stroke:var(--crit)}
.pin{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease),opacity .3s}
.pin:hover{transform:scale(1.25)}
.map-card[data-f="g"] .pin:not([data-s="g"]),.map-card[data-f="y"] .pin:not([data-s="y"]),.map-card[data-f="r"] .pin:not([data-s="r"]){opacity:.12}
@media (prefers-reduced-motion:no-preference){
  .map-card .pin{opacity:0;transform:scale(.4)}
  .map-card.in .pin{opacity:1;transform:none;transition:transform .6s var(--ease),opacity .6s;transition-delay:calc(var(--i,0) * 18ms)}
  .map-card.in .pin:hover{transform:scale(1.25);transition-delay:0s}
  .map-card.in[data-f] .pin{transition-delay:0s}
}
.map-hud{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface)}
.map-hud>span{font-size:.8rem;color:var(--muted)}
.legend{display:flex;gap:6px;flex-wrap:wrap}
.legend button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:.8rem;padding:5px 10px;border-radius:var(--r);border:1px solid var(--line)}
.legend button[aria-pressed="true"]{border-color:var(--ink);font-weight:600}
.legend button:focus-visible{outline:2px solid var(--brand)}
.legend i{width:10px;height:10px;border-radius:50%;border:2.5px solid}

/* ---------- Company ---------- */
.team-fig{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.team-fig img{width:100%;aspect-ratio:1400/560;object-fit:cover;object-position:50% 20%}
.co{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;margin-top:56px}
/* Hiring note: points applicants to the career view without breaking the operator story */
.hire{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:56px;padding:28px 32px;border-radius:var(--r);background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.hire-k{font:600 .76rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.hire h3{margin-top:10px;font-size:1.35rem}
.hire p{margin:6px 0 0;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;align-content:start}
.facts div{border-top:2px solid var(--brand);padding-top:16px}
.facts b{display:block;font-size:1.05rem}
.facts>div>span{display:block;margin-top:6px;font-size:.9rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}
.faq-head{position:sticky;top:112px;align-self:start}
.contact-l{display:grid;gap:10px;margin-top:28px}
.contact-l a{display:inline-flex;gap:10px;align-items:center;text-decoration:none;font-weight:500}
.contact-l a:hover{color:var(--brand)}
.contact-l .ic{color:var(--brand);font-size:1.2rem}
.job-direct{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:20px 0 0;font-size:.9rem;color:var(--muted)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-weight:600;font-size:1.06rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{flex:none;font-size:1.2rem;color:var(--brand);transition:transform .35s var(--ease);margin-top:3px}
.acc details[open] summary .ic{transform:rotate(45deg)}
.acc details p{padding:0 48px 24px 0;color:var(--ink-2);max-width:70ch}
@media (prefers-reduced-motion:no-preference){.acc details[open] p{animation:rise .45s var(--ease) both}}

/* ---------- Forms ---------- */
.lead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.assure{display:grid;gap:18px;margin-top:30px}
.assure li{display:grid;grid-template-columns:28px 1fr;gap:12px}
.assure .ic{font-size:1.4rem;color:var(--brand)}
.assure b{display:block}
.assure li>span>span{display:block;font-size:.92rem;color:var(--muted)}
.form{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:32px;box-shadow:var(--shadow)}
.prog{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:26px}
.prog i{height:3px;border-radius:2px;background:var(--line);transition:background-color .4s var(--ease)}
.prog i.on{background:var(--brand)}
fieldset{border:0;padding:0;margin:0;min-width:0}
.step-l{display:block;font:500 .78rem/1 var(--f-mono);letter-spacing:0;color:var(--muted);margin-bottom:10px}
legend.fh,.form h3.fh{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin:10px 0 20px;padding:0}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{position:relative;display:grid;grid-template-columns:22px 1fr;gap:10px;padding:14px;border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;transition:border-color .2s,background-color .2s}
.opt:hover{border-color:var(--ink-2)}
.opt input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand)}
.opt b{display:block;font-size:.95rem}
.opt>span>span{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
.opt:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fld{display:grid;gap:7px;align-content:start}
.fld.full{grid-column:1/-1}
.fld label{font-size:.88rem;font-weight:600}
.fld input:not([type=radio]):not([type=checkbox]):not([type=file]),.fld select,.fld textarea{width:100%;padding:11px 12px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);min-height:46px}
.fld textarea{resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted)}
.fld input:not([type=radio]):not([type=checkbox]):not([type=file]):focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.fld .help{font-size:.8rem;color:var(--muted)}
.fld [aria-invalid="true"]{border-color:var(--crit);box-shadow:inset 0 0 0 1px var(--crit)}
.fld-err{font-size:.82rem;font-weight:500;color:var(--crit)}
.fields>.fld-err{grid-column:1/-1;margin-top:-6px}
fieldset.fld legend{padding:0;margin-bottom:7px;font-size:.88rem;font-weight:600}
.consent:has(+ .fld-err) input{outline:2px solid var(--crit);outline-offset:1px}
.opt-l{font-size:.95rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.err{font-size:.86rem;color:var(--crit);min-height:1.3em;margin-top:16px;font-weight:500}
.form-nav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.form-nav .btn-primary{margin-left:auto}
.done{text-align:left;padding:12px 0}
.done .ic{font-size:2.4rem;color:var(--ok)}
.done h3{font-size:1.5rem;margin-top:12px}
.done p{margin-top:10px;color:var(--muted)}
.direct{display:grid;gap:10px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}

/* ---------- Footer ---------- */
.ftr{background:var(--anchor);color:var(--anchor-ink);padding-block:64px 32px;margin-top:0}
.ftr .logo img{filter:brightness(0) invert(1)}
.ftr-g{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr));gap:40px}
.ftr-g p{color:var(--anchor-muted);font-size:.92rem;margin-top:18px;max-width:34ch}
.ftr h4{font-size:.86rem;font-weight:600;color:var(--anchor-muted)}
.ftr ul{display:grid;gap:10px;margin-top:16px;font-size:.93rem}
.ftr a{color:inherit;text-decoration:none}
.ftr a:hover{color:var(--anchor-accent)}
.ftr-b{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--anchor-line);font-size:.84rem;color:var(--anchor-muted)}

/* ---------- Career view ---------- */
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);font-weight:500;font-size:.92rem;margin-bottom:28px}
.back:hover{color:var(--brand)}
.job{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);margin-top:44px;overflow:hidden}
.job-top{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:36px;border-bottom:1px solid var(--line)}
.job-top h3{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.03em}
.job-top p{margin-top:8px;color:var(--muted);max-width:60ch}
.jmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.jfacts{margin-top:12px;font-size:.84rem;color:var(--muted)}
.jmeta>span{font-size:.84rem;padding:6px 10px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);display:inline-flex;gap:6px;align-items:center}
.jcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.jcols>div{padding:32px 36px;border-left:1px solid var(--line)}
.jcols>div:first-child{border-left:0}
.jcols h4{font-size:1.05rem}
.jcols ul{display:grid;gap:14px;margin-top:18px}
.jcols li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:.92rem;line-height:1.45}
.jcols li .ic{color:var(--brand);margin-top:3px}
.jcols ul.plain li{grid-template-columns:1fr}
.jcols li b,.jperks li b{display:block;font-weight:600}
.jperks{padding:32px 36px;border-top:1px solid var(--line)}
.jperks h4{font-size:1.05rem}
.jperks ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:18px}
.jperks li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:.92rem;line-height:1.45}
.jperks .ic{font-size:1.5rem;color:var(--brand)}
.jcols li>span>span,.jperks li>span>span{display:block;color:var(--muted);font-size:.86rem}
.onb{display:grid;gap:20px;margin-top:30px;counter-reset:s}
.onb li{position:relative;padding-left:42px;min-height:28px}
.onb li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:var(--on-brand);font:600 .8rem/1 var(--f-mono)}
.onb li:not(:last-child)::after{content:"";position:absolute;left:13px;top:34px;bottom:-14px;width:2px;background:var(--line-strong)}
.onb b{display:block;line-height:28px}
.onb p{color:var(--muted);font-size:.92rem}
.file{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--line-strong);border-radius:var(--r);cursor:pointer}
.file:hover{border-color:var(--brand)}
.file:focus-within{outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand)}
.file .ic{font-size:1.5rem;color:var(--brand)}
.file b{display:block;font-size:.92rem}
.file span{font-size:.82rem;color:var(--muted)}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.radios{display:flex;flex-wrap:wrap;gap:10px}
.radios label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;font-size:.92rem}
.radios label:has(input:checked){border-color:var(--brand);background:var(--brand-tint);font-weight:600}
.radios input{accent-color:var(--brand)}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.86rem;color:var(--ink-2);cursor:pointer}
.consent.full{grid-column:1/-1}
.consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--brand)}
.consent a{color:var(--brand)}
/* Honeypot: invisible to people, filled in by naive bots */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.6;cursor:progress}

/* ---------- Application funnel ---------- */
.prog-pct{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.prog-track{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.prog-track i{display:block;width:var(--pct,0%);height:100%;border-radius:inherit;background:var(--brand);transition:width .5s var(--ease)}
.prog-pct b{min-width:4.5ch;text-align:right;font:600 .82rem/1 var(--f-mono);font-feature-settings:"tnum";color:var(--ink-2)}
#jobForm legend.fh{outline:none}
/* Steps share one grid cell and keep their space while hidden, so the box has the height of the tallest of them
   and "Weiter" stays in place; [data-tall] steps are left out and grow the box instead (animated in showJob) */
.steps{display:grid}
.steps>fieldset{grid-area:1/1;align-self:start}
/* !important beats the global [hidden] rule; visibility:hidden still takes the step out of focus order and a11y tree */
.steps>fieldset[hidden]:not([data-tall]){display:block!important;visibility:hidden}
.steps.sizing{overflow:hidden;transition:height .35s var(--ease)}
.step-sub{margin:-6px 0 18px;color:var(--ink-2)}
.tiles-hint{margin:-8px 0 14px;font-size:.86rem;color:var(--muted)}
/* Large answer cards: native input stays focusable but invisible, a mono counter numbers the options */
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;counter-reset:t}
.tiles.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.choice{position:relative;display:flex;align-items:center;gap:14px;min-height:58px;padding:12px 16px 12px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);cursor:pointer;font-weight:500;line-height:1.3;transition:border-color .2s,background-color .2s,box-shadow .2s,transform .15s var(--ease)}
.choice::before{counter-increment:t;content:counter(t);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r);border:1px solid var(--line-strong);font:600 .8rem/1 var(--f-mono);color:var(--muted);transition:background-color .2s,border-color .2s,color .2s}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.choice-ck{margin-left:auto;font-size:1.1rem;color:var(--brand);opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.choice:active{transform:scale(.99)}
.choice:has(input:checked){border-color:var(--brand);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand)}
.choice:has(input:checked)::before{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.choice:has(input:checked) .choice-ck{opacity:1;transform:none}
.choice:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.choice:has(input:disabled){opacity:.45;cursor:not-allowed}
.choice:has(input:disabled):active{transform:none}
/* Hover only where a pointer hovers; on touch the border would stick to the tapped tile */
@media (hover:hover){.choice:hover{border-color:var(--ink-2)}.choice:has(input:disabled):hover{border-color:var(--line-strong)}}
/* Experience scale: the number is the label */
.tiles.scale{grid-template-columns:repeat(5,minmax(0,1fr))}
.scale .choice{justify-content:center;min-height:54px;padding:8px 4px;font:600 1.05rem/1 var(--f-mono);font-feature-settings:"tnum"}
.scale .choice::before{display:none}
.scale-ax{margin-top:10px;font-size:.8rem;color:var(--muted)}
.scale-note{margin-top:16px;font-size:.9rem;color:var(--muted)}
.moti{margin-top:24px}
.moti legend.sub-l{padding:0;margin-bottom:4px;font-size:.88rem;font-weight:600}
.moti .tiles-hint{margin:0 0 12px}
.file-row{display:flex;align-items:center;gap:10px}
.file-row .file{flex:1 1 240px;min-width:0}
.file span{overflow-wrap:anywhere}
.file:has([aria-invalid="true"]){border-color:var(--crit);border-style:solid}
@media (prefers-reduced-motion:no-preference){
  #jobForm fieldset[data-step]:not([hidden]){animation:step-in .35s var(--ease) both}
  #jobForm[data-dir="back"] fieldset[data-step]:not([hidden]){animation-name:step-back}
  @keyframes step-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
  @keyframes step-back{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.prog-track i{transition:none}}

/* ---------- Legal pages (impressum.html, datenschutz.html) ---------- */
.legal{padding-block:64px 104px}
.legal h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em;line-height:1.06}
.legal-body{max-width:72ch;margin-top:40px}
.legal-body h2{font-size:1.3rem;letter-spacing:-.02em;margin-top:48px}
.legal-body h3{font-size:1.05rem;margin-top:28px}
.legal-body h4{font-size:.95rem;margin-top:20px}
.legal-body p,.legal-body ul{margin-top:12px;color:var(--ink-2)}
.legal-body ul{list-style:disc;padding-left:1.3em}
.legal-body li+li{margin-top:8px}
.legal-body a{color:var(--brand);overflow-wrap:anywhere}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero .wrap,.sla-top,.prob,.map-sec .wrap,.co,.faq,.lead,.pm{grid-template-columns:1fr;gap:36px}
  .prob-head,.faq-head{position:static}
  .feat{grid-template-columns:1fr 1fr}.feat article:first-child{grid-column:1/-1}.feat article:nth-child(2){margin-top:0}
  .jcols,.jperks ul{grid-template-columns:1fr}.jcols>div{border-left:0;border-top:1px solid var(--line)}.jcols>div:first-child{border-top:0}
  .job-top{grid-template-columns:1fr}
  .ftr-g{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  :root{--gut:16px}
  .sec{padding-block:72px}
  .vid-toggle{right:10px;bottom:10px;width:34px;height:34px}
  .hero{padding-top:32px}.hero-vid{padding-block:0}
  .hero-stage{min-height:auto;padding-block:88px 72px}
  .hero-scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--anchor) 70%,transparent),color-mix(in srgb,var(--anchor) 84%,transparent))}
  .hero-vid .vid-toggle{right:16px;bottom:16px}
  .inc-hd,.inc-clock,.inc-steps,.inc-ft{padding-inline:16px}
  .inc-steps li{grid-template-columns:68px minmax(0,1fr)}
  .inc-hd>span:nth-child(2){order:3;flex-basis:100%}
  .inc-steps .sla{grid-column:2;justify-self:start;margin-top:6px}
  .bento>.tile{grid-column:1/-1}
  .t-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sla-checks{grid-template-columns:1fr}
  .cap-list{grid-template-columns:1fr}
  .feat,.facts{grid-template-columns:1fr}
  .opts,.fields{grid-template-columns:1fr}
  .pin text{display:none}
  .form{padding:22px}
  .ftr-g{grid-template-columns:1fr}
  .acc details p{padding-right:0}
  .job-top,.jcols>div,.jperks{padding:24px}
}
/* Phones: the portrait crop of the landscape video is soft and its UI text tiny, so it starts as a blurred backdrop.
   In the scroll scene it is contained and scaled by --k0 (set by the inline script) to fill the stage, then zooms out to the whole frame
   while the stage fades to the video's edge colour, so the frame has no navy border */
@media (max-width:719px){
  .hero-bg{object-position:50% 50%;filter:blur(8px) saturate(.95);transform:scale(1.1)}
  .hero-scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--anchor) 40%,transparent),color-mix(in srgb,var(--anchor) 60%,transparent))}
  /* The blur is applied before the scale, so 2px reads as about 7px at the start */
  .scrolly .hero-bg{object-fit:contain;filter:blur(calc(clamp(0,(.6 - var(--p,0)) / .4,1) * 2px)) saturate(.95);will-change:transform;transform:scale(calc(1 + (var(--k0,3) - 1) * (1 - clamp(0,(var(--p,0) - .35) / .5,1))))}
  .scrolly .hero-stage::before{content:"";position:absolute;inset:0;z-index:-3;background:#F6FAFF;opacity:clamp(0,(var(--p,0) - .35) / .12,1)}
}
@media (max-width:479px){
  .tiles.cols{grid-template-columns:minmax(0,1fr)}
  .form{padding:18px}
  .file-row{flex-wrap:wrap}
  /* "Zurück" next to "Bewerbung einreichen" does not fit 360px: the back button keeps only its arrow, the primary drops its arrow */
  #jBack{width:46px;padding:0}
  #jNext{padding-inline:16px}
  #jNext .ic{display:none}
  #jBack span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Touch devices: controls reach a 44px target */
@media (pointer:coarse){
  .legend button{padding-block:12px}
  .vid-toggle{width:44px;height:44px}
  .ftr ul{gap:0}
  .ftr ul a{display:inline-block;padding-block:10px}
  .inc-replay{min-height:44px}
  .file-rm{min-height:44px}
}