[data-if]{display:contents}
[hidden]{display:none !important}

@font-face{font-family:'Source Sans 3';font-style:normal;font-display:swap;font-weight:200 900;src:url(../fonts/source-sans-3-latin-wght-normal.woff2) format('woff2')}
body{margin:0;background:#000}
a{color:#fff}a:hover{color:#fff}
.wrap{max-width:1440px;margin:0 auto;padding:0 64px;box-sizing:border-box}
.nav{color:#fff;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .25s}
.nav:hover{border-bottom-color:#fff}
.nav{white-space:nowrap}
@media (max-width:1439px){header nav{gap:22px !important}.nav{font-size:12px;letter-spacing:.1em}}
@media (max-width:1279px){header nav{gap:16px !important}.util{display:none !important}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;border:2px solid #fff;color:#fff;background:transparent;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-sizing:border-box;transition:background .3s ease,color .3s ease}
.btn:hover{background:#fff;color:#000}
.btn-fill{background:#fff;color:#000}
.btn-fill:hover{background:transparent;color:#fff}
.kicker{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#BFBFBF}
.slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 1.8s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03)}
.slide.on img,.slide.was img{animation:kb 11s linear forwards}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.15)}}
.line{display:block;overflow:hidden;padding-top:.16em;margin-top:-.16em}
.line>span{display:block;animation:up 1.2s cubic-bezier(.16,1,.3,1) both}
.l2>span{animation-delay:.12s}.l3>span{animation-delay:.24s}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
.fadeup{animation:fu 1.2s cubic-bezier(.16,1,.3,1) .5s both}
@keyframes fu{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.seg{position:relative;flex:1;height:44px;background:none;border:none;padding:0;cursor:pointer}
.seg::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:rgba(255,255,255,.35)}
.seg i{position:absolute;left:0;top:21px;height:2px;width:0;background:#fff}
.seg.on i{animation:fill 8s linear forwards}
.seg.done i{width:100%}
@keyframes fill{to{width:100%}}
.panel{position:relative;height:clamp(620px,100vh,1600px);height:clamp(620px,100svh,1600px);overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.bgimg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.unit{position:relative;min-height:clamp(620px,100vh,1600px);min-height:clamp(620px,100svh,1600px);overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.screen{height:clamp(620px,100vh,1600px);height:clamp(620px,100svh,1600px)}
section:has(> img.bgimg) :is(h1,h2,h3,p,li,.kicker,.who),.hero :is(h1,p,.kicker){text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 20px rgba(0,0,0,.35)}
.mbtn{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0 -10px 0 0;background:transparent;border:0;color:#FFFFFF;cursor:pointer}
.mmenu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#000000;color:#FFFFFF;overflow-y:auto}
.mtop{display:flex;align-items:center;justify-content:flex-end;height:104px}
.mlist{display:flex;flex-direction:column;padding-top:8px;padding-bottom:56px}
.mlink{display:block;padding:14px 0;font-size:clamp(28px,5.5vw,44px);line-height:1.1;font-weight:700;text-transform:uppercase;color:#FFFFFF !important;text-decoration:none;border-bottom:1px solid #262626}
.mgroup .mlink{border-bottom:0;padding-bottom:2px}
.msubs{display:flex;flex-wrap:wrap;gap:0 28px;padding:0 0 12px;border-bottom:1px solid #262626}
.msub{display:inline-block;padding:10px 0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#BFBFBF !important;text-decoration:none}
.msec{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:28px}
.mlink:hover,.msub:hover{opacity:.75}
@media (max-width:1279px){header nav,header .util,header a[href="en/index.html"]{display:none !important}.mbtn{display:inline-flex}}
@media (max-width:1279px){header .wrap > div{gap:14px !important}}
@media (max-width:480px){header a[aria-label] > svg{width:150px;height:auto}header .wrap > div{gap:8px !important}}
.shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 52%,rgba(0,0,0,0) 88%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.65) 100%)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:900px;margin-top:44px;border-top:1px solid rgba(255,255,255,.5)}
.facts>div{padding:18px 24px 0 0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.45}
.caret{display:inline-block;width:3px;height:.9em;background:#fff;margin-left:4px;vertical-align:-0.08em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.src{transition:opacity .8s ease}
.cap{border-top:1px solid #4D4D4D;padding-top:24px}
.who{display:inline;font-size:clamp(30px,min(3.5vw,6.4svh),56px);line-height:1.18;font-weight:700;text-transform:uppercase;letter-spacing:.005em}
.who i{font-style:normal;font-weight:300;color:#8C8C8C;padding:0 .05em}
.flink{color:#fff;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.flink:hover{opacity:1}
@supports (animation-timeline: view()){
.zoom{animation:zo linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
@keyframes zo{from{transform:scale(1.2)}to{transform:scale(1)}}
.rise{animation:ri linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
@keyframes ri{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
.grow{animation:gr linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
@keyframes gr{from{opacity:.15;letter-spacing:.2em}to{opacity:1;letter-spacing:0}}
}
@media (max-width:960px){
.hk1{object-position:62% 50% !important}
.mdk05{background-color:rgba(0,0,0,0.05) !important}
.mdk15{background-color:rgba(0,0,0,0.15) !important}
.mdk20{background-color:rgba(0,0,0,0.2) !important}
.mdk30{background-color:rgba(0,0,0,0.3) !important}
.mop95{opacity:0.95 !important}
.wrap{padding:0 20px}
.hide-m{display:none !important}
.stack{grid-template-columns:minmax(0,1fr) !important}
.stack>*{grid-column:auto !important}
.kpos{object-position:78% 50% !important}
.stack2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.facts{grid-template-columns:minmax(0,1fr)}
.h1{font-size:44px !important}
.h2{font-size:34px !important}
.big{font-size:28px !important}
.q{font-size:28px !important;min-height:180px !important}
.num{font-size:56px !important}
.si{font-size:48px !important}
.who{font-size:26px;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}
.panel{height:clamp(600px,100vh,1600px);height:clamp(600px,100svh,1600px)}
.hero{height:clamp(600px,100svh,1600px) !important}
}
@media (prefers-reduced-motion:reduce){
.slide.on img,.slide.was img,.line>span,.fadeup,.seg.on i,.caret{animation:none}
.zoom,.rise,.grow{animation:none}
}

/* Effekte (abschaltbar über die Eigenschaft „Effekte“) */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.fx .cnt.go{--n:var(--to);counter-reset:n var(--n);font-variant-numeric:tabular-nums;animation:cu 1.8s cubic-bezier(.2,.7,.2,1) both}
.fx .cnt.go::before{content:counter(n)}
.fx .cnt.go .nv{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@keyframes cu{from{--n:0}to{--n:var(--to)}}
@media (prefers-reduced-motion:no-preference){
.fx.io .seq.rise,.fx.io .seq2.rise{animation:none}
.fx.io .seq>.cap{position:relative;border-top-color:transparent;transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.fx.io .seq:not(.go)>.cap{opacity:0;transform:translateY(48px)}
.fx.io .seq>.cap:nth-child(2){transition-delay:.18s}
.fx.io .seq>.cap:nth-child(3){transition-delay:.36s}
.fx.io .seq>.cap:nth-child(4){transition-delay:.54s}
.fx.io .seq>.cap::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:#4D4D4D;transform-origin:0 50%;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.16,1,.3,1) .1s}
.fx.io .seq>.cap:nth-child(2)::before{transition-delay:.28s}
.fx.io .seq>.cap:nth-child(3)::before{transition-delay:.46s}
.fx.io .seq>.cap:nth-child(4)::before{transition-delay:.64s}
.fx.io .seq.go>.cap::before{transform:none}
.fx.io .seq2{position:relative;border-top-color:transparent !important}
.fx.io .seq2::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:#4D4D4D;transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.16,1,.3,1) .1s}
.fx.io .seq2.go::before{transform:none}
.fx.io .seq2>div{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.fx.io .seq2:not(.go)>div{opacity:0;transform:translateY(48px)}
.fx.io .seq2>div:nth-child(2){transition-delay:.18s}
.fx.io .seq2>div:nth-child(3){transition-delay:.36s}
.fx.io .approach{animation:none;transform:scale(1.02)}
.fx.io .approach.go{animation:ap 16s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes ap{from{transform:scale(1.02)}to{transform:scale(1.18)}}
.fx.io .cnt:not(.go)::before{content:"0"}
.fx.io .cnt:not(.go) .nv{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.fx .cnt.go{animation:none}}
/* Technologie: Raketenstart – Zündung am Startplatz, dann zeichnet sich die Leuchtspur nach oben */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.rk-fx{display:none}
@media (prefers-reduced-motion:no-preference){
.fx.io .launch{animation:none}
.fx.io .rk-fx{display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;--rk-x:52%;--rk-y:63%;--rk-r:600px;--rk-px:76%;--rk-py:47%;--rk-g:210px}
.rk-dim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgb(34,46,62);mix-blend-mode:darken;opacity:1;-webkit-mask-image:conic-gradient(from 345deg at var(--rk-x) var(--rk-y),transparent 0deg,#000 8deg,#000 calc(99deg * (1 - var(--p)) - 12deg),transparent calc(99deg * (1 - var(--p)))),radial-gradient(circle at var(--rk-x) var(--rk-y),transparent calc(var(--rk-r) * .7),#000 calc(var(--rk-r) * .86),#000 calc(var(--rk-r) * 1.14),transparent calc(var(--rk-r) * 1.32));-webkit-mask-composite:source-in;mask-image:conic-gradient(from 345deg at var(--rk-x) var(--rk-y),transparent 0deg,#000 8deg,#000 calc(99deg * (1 - var(--p)) - 12deg),transparent calc(99deg * (1 - var(--p)))),radial-gradient(circle at var(--rk-x) var(--rk-y),transparent calc(var(--rk-r) * .7),#000 calc(var(--rk-r) * .86),#000 calc(var(--rk-r) * 1.14),transparent calc(var(--rk-r) * 1.32));mask-composite:intersect}
.rk-glow{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at var(--rk-px) var(--rk-py),rgba(255,206,150,.6) 0,rgba(255,170,90,.2) calc(var(--rk-g) * .4),rgba(255,150,70,0) var(--rk-g))}
.fx.io .rk-fx.go .rk-dim{animation:rkp 3.6s cubic-bezier(.55,0,.8,.6) .5s both}
@keyframes rkp{0%{--p:0;opacity:1}90%{opacity:1}100%{--p:1.15;opacity:0}}
.fx.io .rk-fx.go .rk-glow{animation:rkg 4.6s ease-out both}
@keyframes rkg{0%{opacity:0}10%{opacity:1}35%{opacity:.6}100%{opacity:0}}
}
@media (max-width:960px){.launch{object-position:80% 50% !important}}
/* Ausgangslage: Annäherung Richtung Skyline im Fluchtpunkt */
.lage-img{transform-origin:34% 35%}
@media (max-width:960px){.lage-img{object-position:80% 50% !important;transform-origin:50% 50%}}
/* Grundeffekt wie 2IG: Bilder und Texte starten beim Erscheinen und laufen in fester Zeit; Personenbilder bleiben ruhig */
@media (prefers-reduced-motion:no-preference){
.fx.io .zoom,.fx.io .rise,.fx.io .grow{animation:none}
/* Bildbewegung nur noch als Annäherung: ausgewählte Kopfbilder fahren beim Öffnen sanft heran, alle übrigen Bilder stehen still */
.fx.io .push.in{animation:psh 8s cubic-bezier(.25,.1,.25,1) both}
@keyframes psh{from{transform:none}to{transform:scale(1.06)}}
/* 02 · Struktur: leichte Kranfahrt – die Kamera hebt sich und schwenkt seitlich, weich anfahrend und abbremsend */
.fx.io .crane{transform:scale(1.05) translate(1.2%,-2%)}
.fx.io .crane.in{animation:crn 12s cubic-bezier(.45,0,.25,1) both}
@keyframes crn{from{transform:scale(1.05) translate(1.2%,-2%)}to{transform:scale(1.05) translate(-1.2%,2%)}}
.fx.io .zoom.calm.in{animation:none}
.fx.io .rise.in:has(h1,h2,.h2):not(.seq):not(.seqr):not(.seq2){animation:rin .8s cubic-bezier(.16,1,.3,1) both}
@keyframes rin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fx.io .grow.in{animation:gin 2.2s cubic-bezier(.16,1,.3,1) both}
@keyframes gin{from{opacity:.15;letter-spacing:.2em}to{opacity:1;letter-spacing:0}}
}