/* MJ Empire Holding GmbH — homepage V19. Layered on top of site.css and institutional.css, loaded on the homepage only. Cascade order matters: globe shell, investment block, refinements, Global Vision, German reach map. */ /* ============================ home-globe-v10 ============================ */ /* Homepage V4: one responsive system. Original site.css owns header/footer. */ :root{--home-gold:#e4b76d;--home-text:#f5efe4;--home-muted:#d8d0c2;--home-line:rgba(228,183,109,.3)} html{scroll-behavior:smooth;scroll-padding-top:130px} body.route-home{background:#090806;color:var(--home-text);overflow-x:clip} body.menu-open{overflow:hidden} [hidden]{display:none!important} .earth-layer{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;pointer-events:none;z-index:0;overflow:hidden} .earth-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0} .earth-halo{position:absolute;left:0;top:0;width:1250px;height:1250px;opacity:0;will-change:transform,opacity;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 39.4%,rgba(255,222,165,.5) 40%,rgba(228,160,70,.22) 40.7%,rgba(201,142,57,.1) 43%,rgba(201,142,57,.035) 47%,transparent 50%)} .earth-orbit{position:absolute;left:6%;top:12.5%;width:88%;height:75%;border:1px solid #d4ab5c47;border-radius:50%;transform:rotate(-26deg) scaleY(.34)} .earth-orbit::after{content:"";position:absolute;width:9px;height:9px;left:15%;top:13%;border-radius:50%;background:#ffe5ae;box-shadow:0 0 24px 8px #dba95a88} .earth-origin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;opacity:0;color:#fff0d1;font:600 10px/1.4 var(--sans);letter-spacing:.13em;text-shadow:0 1px 8px #000;white-space:nowrap;will-change:transform,opacity} .earth-origin i{display:block;width:7px;height:7px;flex:none;border-radius:50%;background:#fff0c7;box-shadow:0 0 0 5px #f7d49230,0 0 18px #e7b86c;transform:translate(-50%,-50%)} .earth-origin>span{position:absolute;left:-10px;bottom:24px;padding:5px 8px;background:#120c07d6;border:1px solid #d8b77655} .earth-origin>span::before{content:"";position:absolute;left:9px;top:100%;width:1px;height:17px;background:linear-gradient(#e7b86cb0,transparent)} .earth-static-fallback .earth-canvas{display:none} .earth-static-fallback::after{content:"";position:absolute;left:calc(var(--sx,70%) - var(--sr,400px));top:calc(var(--sy,50%) - var(--sr,400px));width:calc(var(--sr,400px)*2);height:calc(var(--sr,400px)*2);border-radius:50%;opacity:var(--so,1);background:radial-gradient(circle at 32% 25%,transparent,#050403 80%),url('../img/earth-gold-4k.webp') center/cover,#171009;border:1px solid #d3a963} #main{position:relative;z-index:1;overflow:clip} #main .preview-section,#main .preview-hero{position:relative;background:transparent;color:var(--home-text)} #main .preview-section{padding-block:112px;border-top:1px solid var(--home-line)} #main .preview-section>.shell{position:relative} #main p{color:var(--home-muted)} #main .preview-eyebrow{font:600 12px/1.6 var(--sans);letter-spacing:.21em;text-transform:uppercase;color:var(--home-gold);margin:0 0 25px} #main h1,#main h2,#main h3{font-family:var(--display);font-weight:400;color:var(--home-text);letter-spacing:-.035em;overflow-wrap:normal} #main h1,#main h2{ text-shadow:0 2px 22px #000,0 1px 3px #0008 } #main h2{font-size:clamp(48px,5vw,76px);line-height:1.08;margin:0;white-space:pre-line} #main h3{font-size:30px;line-height:1.18;margin:0 0 15px} #main p,#main .about-copy{font-size:18px;line-height:1.8} #main .btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:56px;padding:17px 26px;font:600 14px/1.4 var(--sans);letter-spacing:.09em;text-decoration:none;text-transform:uppercase;white-space:normal;text-align:center;max-width:100%} #main .btn-solid{background:linear-gradient(110deg,var(--bronze),var(--amber));color:#120d09;border:1px solid #dab678} #main .btn-line{background:rgba(9,8,6,.7);border:1px solid #bc9e6d;color:var(--home-text)} #main .btn:hover{filter:brightness(1.12)} #main a:focus-visible{outline:2px solid #fff0c6;outline-offset:5px} #main .text-link{display:inline-flex;gap:16px;align-items:center;min-height:48px;color:var(--home-gold);font:600 14px/1.5 var(--sans);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--home-line)} #main .preview-hero{min-height:100svh;display:flex;align-items:center} #main .preview-hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#090806f2 0%,#090806d9 32%,#09080699 54%,transparent 85%)} #main .preview-hero-inner{padding-top:calc(var(--header-h,110px) + 65px);padding-bottom:100px;position:relative} #main .hero-copy{width:min(57%,730px);padding:0;margin:0;text-align:left} #main .preview-hero h1{font-size:clamp(58px,5.8vw,90px);line-height:1.04;margin:0;max-width:100%} #main .preview-hero h1 span,#main .preview-hero h1 em{display:block;font-style:normal} #main .preview-hero h1 em{color:#e5bd79} #main .preview-lead{max-width:46ch;font-size:21px;line-height:1.7;margin:30px 0} #main .preview-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px} #main .hero-index,#main .hero-bottom-rule{display:none} #main .section-heading{display:block;margin-bottom:54px;max-width:900px} #main .section-heading{background:radial-gradient(ellipse at 30% 50%,#090806bd,transparent 80%)} #main .section-intro{font-size:21px;max-width:54ch;margin:25px 0 0;padding-left:24px;border-left:2px solid var(--home-gold)} #main .preview-about{background:linear-gradient(90deg,#090806b5,#09080625)} #main .about-heading{max-width:980px;padding-bottom:35px;border-bottom:1px solid var(--home-line)} #main .about-composition{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center} #main .about-copy{max-width:53ch;padding:30px 0} #main .about-copy p{margin:0 0 24px} #main .about-image{position:relative;height:460px;overflow:hidden;margin:0;border:1px solid var(--home-line)} #main .about-image img{width:100%;height:100%;object-fit:cover;object-position:50% 56%} #main .about-image::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#090806ed)} #main .about-image figcaption{position:absolute;inset:auto 28px 28px;z-index:1;font:30px/1.2 var(--display);color:#f8efdd} #main .about-image figcaption span:last-child{display:block;font:11px/1.5 var(--sans);letter-spacing:.16em;margin-top:12px;color:var(--home-gold)} #main .principles-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:65px;border-top:1px solid var(--home-line);background:#090806aa} #main .principles-grid article{padding:30px 22px;border-right:1px solid var(--home-line)} #main .principles-grid article:last-child{border-right:0} #main .principle-mark{font-size:12px;color:var(--home-gold)} #main .principles-grid h3{font-size:27px;margin-top:18px} #main .principles-grid p{font-size:16px;margin:0} #main .focus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} #main .focus-card{position:relative;min-height:330px;padding:34px;border:1px solid var(--home-line);background:linear-gradient(130deg,#21190fea,#090806c9);display:flex;flex-direction:column;gap:38px;transition:border-color .25s,transform .25s} #main .focus-card:hover{transform:translateY(-5px);border-color:#f1cd8d} #main .focus-card-top{display:flex;align-items:center;justify-content:space-between;color:#d9bc83;font-size:13px;letter-spacing:.15em} #main .focus-card-top svg{width:60px;height:60px;flex:none;fill:none;stroke:#e9c98f;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;padding:13px;box-sizing:border-box;background:none;border:1px solid #d9ad5e4d;border-radius:50%;box-shadow:none;transition:border-color .25s,stroke .25s} #main .focus-card:hover .focus-card-top svg{border-color:#f1cd8d;stroke:#f6dcaa} #main .focus-card h3{font-size:34px;max-width:23ch} #main .focus-card p{font-size:18px;max-width:42ch;margin:0} #main .focus-card-line{height:2px;width:45px;background:var(--home-gold)} #main .focus-disclaimer{font-size:14px;max-width:70ch;margin:28px 0 0} #main .strategy-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start} #main .strategy-intro>p:not(.preview-eyebrow){margin:28px 0;max-width:48ch} #main .strategy-steps{list-style:none;padding:0;margin:0;background:#090806b8} #main .strategy-steps li{display:grid;grid-template-columns:30px 1fr 20px;gap:20px;padding:28px 15px;border-bottom:1px solid var(--home-line)} #main .strategy-steps li>span,#main .strategy-steps i{color:var(--home-gold);font-style:normal} #main .strategy-steps p{margin:0;font-size:17px} #main .leader-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center} #main .leader-portrait{min-height:500px;display:grid;place-content:center;text-align:center;border:1px solid var(--home-line);background:radial-gradient(ellipse at top,#72502a55,transparent),#090806c4} #main .portrait-monogram{font:130px/1 var(--display);color:#d9b674} #main .portrait-caption{font:12px/1.7 var(--sans);letter-spacing:.2em;color:var(--home-gold);margin-top:20px} #main .leader-copy{background:linear-gradient(90deg,#090806bb,transparent);padding:20px} #main .leader-role{font-size:14px;letter-spacing:.13em;color:var(--home-gold);margin:20px 0 30px} #main .leader-quote{font:34px/1.4 var(--display);color:#f0cc8b;margin:0 0 25px} #main .leader-statement{font-size:18px;margin:0 0 22px} #main .leader-personal{font-size:18px;margin-bottom:30px} #main .leader-signature{display:none} #main .preview-investment{padding:140px 0;overflow:hidden;background:linear-gradient(100deg,#090806cc,transparent)} #main .investment-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:90px;align-items:center} #main .investment-copy h2{font-size:clamp(62px,6.6vw,96px);max-width:11ch;line-height:1.04} #main .investment-overline{font-size:12px;letter-spacing:.17em;color:var(--home-gold);margin:0 0 24px} #main .investment-overline i{font-style:normal;padding:0 7px} #main .investment-copy>p[data-copy="investment_text"]{font-size:20px;margin:32px 0;max-width:48ch} #main .investment-principles{margin-top:90px;background:#0b0907b3;border-top:1px solid var(--home-gold);border-bottom:1px solid var(--home-gold)} #main .investment-principles>div{padding:30px 24px;border-bottom:1px solid var(--home-line);display:grid;grid-template-columns:30px 1fr;gap:8px 18px} #main .investment-principles>div:last-child{border-bottom:0} #main .investment-principles span{grid-row:span 2;font-size:12px;color:var(--home-gold)} #main .investment-principles strong{font:30px/1.2 var(--display);color:var(--home-text)} #main .investment-principles i{font:16px/1.5 var(--sans);color:var(--home-muted)} #main .investment-glow{position:absolute;width:800px;aspect-ratio:1;right:-25%;top:0;border:1px solid #e3ba6a40;border-radius:50%;box-shadow:0 0 0 60px #e3ba6a08,0 0 0 150px #e3ba6a05;pointer-events:none} #main .finale{background:linear-gradient(90deg,#100c08b5,#100c0840);position:relative;padding-top:100px} #main .finale-card{background:#0b0907a8;border:1px solid var(--home-line)} #main .finale-head h2{font-size:56px} #main .finale-head p.lead{font-size:20px} #main .map-frame{border:1px solid var(--home-line)} .site-footer{position:relative;z-index:1} @media(min-width:1600px){#main .preview-lead{font-size:23px}#main p{font-size:20px}} @media(max-width:1080px){ .earth-orbit{display:none} #main .preview-hero{align-items:flex-start} #main .preview-hero-inner{padding-top:calc(var(--header-h,102px) + 26px);padding-bottom:36px} #main .preview-hero-shade{background:linear-gradient(180deg,#090806d0 0%,#090806a8 45%,transparent 66%)} #main .preview-section p,#main .preview-section h3,#main .finale p{text-shadow:0 1px 12px #090806,0 0 3px #090806aa} } @media(max-width:1080px){ #main .hero-copy{width:100%;max-width:720px;margin-inline:auto;text-align:center} #main .preview-actions{justify-content:center} #main .preview-lead{margin-inline:auto} #main .about-composition,#main .strategy-layout,#main .leader-layout,#main .investment-layout{gap:40px} #main .principles-grid{grid-template-columns:repeat(2,1fr)} #main .investment-layout{grid-template-columns:1fr 1fr} #main .investment-copy h2{font-size:64px} } @media(max-width:720px){ html{scroll-padding-top:100px} .earth-origin{font-size:9px;gap:6px} .earth-orbit{display:none} #main .preview-section{padding-block:76px} #main .preview-section::before{content:"";position:absolute;inset:0;background:#09080650;pointer-events:none} #main .hero-copy{width:100%;max-width:100%;text-align:center!important} #main .preview-hero h1{font-size:clamp(36px,9.4vw,56px);line-height:1.06} #main .preview-eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:16px} #main .preview-hero .preview-lead{font-size:16px;line-height:1.55;margin:16px auto;max-width:34ch} #main .preview-actions{justify-content:center;flex-direction:column;align-items:stretch;margin-top:20px;gap:10px} #main .btn{font-size:13px;min-height:50px;padding:14px 20px;width:100%} #main .preview-hero-inner{padding-top:calc(var(--header-h,102px) + 8px);padding-bottom:20px} #main h2{font-size:clamp(40px,10.5vw,62px);line-height:1.12} #main h3{font-size:29px} #main p,#main .about-copy{font-size:17px;line-height:1.75} #main .section-heading{margin-bottom:36px;text-align:center} #main .section-intro{font-size:19px;border-left:0;border-top:1px solid var(--home-line);padding:23px 0 0;margin:24px auto 0} #main .about-heading{padding-bottom:0;border-bottom:0} #main .about-composition,#main .strategy-layout,#main .leader-layout,#main .investment-layout{grid-template-columns:1fr;gap:35px} #main .about-copy,#main .strategy-intro,#main .leader-copy,#main .investment-copy{text-align:center;max-width:100%;padding:0} #main .about-image{height:350px} #main .principles-grid{grid-template-columns:1fr;margin-top:40px} #main .principles-grid article{border-right:0;border-bottom:1px solid var(--home-line);text-align:center;padding:28px} #main .focus-grid{grid-template-columns:1fr;gap:20px} #main .focus-card{min-height:330px;padding:28px 24px;gap:30px} #main .focus-card h3{font-size:31px} #main .focus-card p{font-size:18px} #main .focus-disclaimer{text-align:center;font-size:14px} #main .strategy-steps li{padding:25px 10px;gap:13px;grid-template-columns:26px 1fr 14px} #main .strategy-steps h3{font-size:27px} #main .leader-portrait{min-height:300px} #main .leader-copy h2{font-size:48px} #main .leader-role{font-size:13px} #main .leader-quote{font-size:29px;line-height:1.4} #main .leader-statement,#main .leader-personal{font-size:18px;text-align:center} #main .investment-copy h2{font-size:clamp(46px,12vw,72px);max-width:100%} #main .investment-copy>p[data-copy="investment_text"]{font-size:19px} #main .investment-overline{font-size:11px;line-height:1.8} #main .investment-principles{margin-top:0} #main .investment-principles strong{font-size:29px} #main .investment-principles i{font-size:16px} #main .finale-head h2{font-size:43px} #main .finale-head p.lead{font-size:19px} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.earth-halo,.earth-origin{will-change:auto}#main .focus-card{transition:none}} /* V7 mobile-only composition. Desktop styling and globe pose are retained. */ .globe-touch{display:none} @media(max-width:1080px){ #main .preview-hero{min-height:0} #main .preview-hero-inner{padding-top:calc(var(--header-h,102px) + 12px);padding-bottom:48px} .globe-touch{display:block;position:relative;height:clamp(260px,78vw,340px);width:100%;max-width:440px;margin:0 auto 12px;touch-action:pan-y pinch-zoom;cursor:grab;border-radius:50%;-webkit-tap-highlight-color:transparent} .globe-touch:active{cursor:grabbing} .globe-touch:focus-visible{outline:1px solid #e4b76d;outline-offset:3px} #main .preview-hero-shade{background:none} #main .hero-copy{position:relative;background:linear-gradient(180deg,#090806e8,#090806fa);box-shadow:0 -14px 26px 10px #090806e8} #main .preview-hero .preview-lead{font-size:18px;line-height:1.65} } @media(max-width:720px){ #main .preview-hero h1{font-size:clamp(39px,10.4vw,52px);line-height:1.08} #main .preview-hero .preview-eyebrow{font-size:10px;letter-spacing:.12em} #main .preview-hero .preview-actions{margin-top:24px;gap:12px} #main .preview-hero .btn{font-size:13px;min-height:54px} } /* V8 — original logo/bar intro, followed by a full orbital turn. */ .cinema-loader{display:none} html.intro-pending{overflow:hidden} html.intro-pending .cinema-loader{display:contents;pointer-events:none} html.intro-pending .cinema-loader::before{content:"";position:fixed;inset:0;z-index:10000;background:#0b0806;opacity:var(--cinema-backdrop,1)} html.intro-pending .earth-origin{display:none} html.intro-pending .earth-layer{z-index:10001} html.intro-pending .cinema-logo{position:fixed;z-index:10002;left:50%;top:calc(50% - 24px);width:clamp(118px,24vw,152px);transform:translate(-50%,-50%);will-change:left,top,width,opacity} .cinema-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 4px #000)} html.intro-pending .cinema-track{position:fixed;z-index:10003;left:50%;top:calc(50% + 72px);transform:translateX(-50%);animation:cinema-track-out .2s 1s forwards} html.intro-pending .cinema-track span{animation-duration:1s} html.intro-pending .site-header,html.intro-pending #main,html.intro-pending .site-footer,html.intro-pending .whatsapp-float{visibility:hidden} .cinema-word{display:inline-block;font-weight:inherit} .cinema-word i{font:inherit;font-style:inherit} html.cinema-arrived #hero-title i{animation:cinema-letter .01s both;animation-delay:var(--char-delay)} html.cinema-arrived .hero-copy>.preview-eyebrow{animation:cinema-rise .786s both} html.cinema-arrived .hero-copy>.preview-lead{animation:cinema-rise 1s 1.714s both} html.cinema-arrived .hero-copy>.preview-actions{animation:cinema-rise 1s 2.214s both} @keyframes cinema-letter{from{opacity:0}to{opacity:1}} @keyframes cinema-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes cinema-track-out{to{opacity:0}} @media(max-width:1080px){ #main .preview-hero{min-height:calc(100svh - 1px);align-items:center} #main .preview-hero-inner{padding-top:calc(var(--header-h,102px) + 42px);padding-bottom:64px} #main .hero-copy{background:none;box-shadow:none} #main .preview-hero-shade{background:linear-gradient(90deg,#090806ca,#0908068a 65%,#09080620)} #main .preview-hero h1,#main .preview-hero .preview-lead{text-shadow:0 2px 18px #090806} html.intro-pending .earth-origin{display:none} } @media(prefers-reduced-motion:reduce){ html.cinema-arrived #hero-title i,html.cinema-arrived .hero-copy>*{animation:none!important} } /* Subtle light bloom, scoped strictly to the introductory scene. */ html.intro-pending .earth-halo{filter:drop-shadow(0 0 14px #e4b76d30)} /* V10: compact, balanced mobile heading and text-first leadership. */ #main #about-title{white-space:pre-line;text-wrap:balance;line-height:1.14} @media(max-width:720px){ #main #about-title{font-size:clamp(27px,7.8vw,40px);line-height:1.26;letter-spacing:-.025em;max-width:100%;margin-inline:auto} #main .about-heading .preview-eyebrow{margin-bottom:22px} #main .about-heading .section-intro{margin-top:28px;padding-top:24px} #main .leader-copy{order:1} #main .leader-portrait{order:2;margin-top:8px} #main .leader-signature{order:3} } html.intro-pending .cinema-loader::before{background:radial-gradient(ellipse at 50% 47%,#251a0c 0%,#100b07 38%,#0b0806 70%)} /* ============================ investment-v11 ============================ */ /* Institutional refinement. Original shell, globe and typography assets preserved. */ #main .preview-section{padding-block:clamp(88px,9vw,144px)} #main .hero-subtitle{font:500 clamp(16px,1.45vw,21px)/1.6 var(--sans);letter-spacing:.045em;color:var(--home-text);max-width:40ch;margin:26px 0 0} #main .preview-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.75} #main .focus-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} #main .focus-card{min-height:310px;padding:32px;background:linear-gradient(145deg,#15120fe8,#090806e0);border-color:#b79b6838} #main .focus-card h3{font-size:clamp(26px,2.2vw,34px)} #main .focus-card--future{grid-column:span 2;background:linear-gradient(110deg,#1b160ff2,#090806bb)} #main .focus-card-top svg{border:none;padding:5px;width:44px;height:44px;stroke-width:1.15;border-radius:0} #main .principles-grid{background:#090806d9} #main .principles-grid h3{font-size:30px} #main .leader-vision{border-left:1px solid var(--home-line);padding-left:22px;font-size:17px;color:var(--home-muted)} #main .global-vision{background:linear-gradient(100deg,#090806ec,#09080670)} #main .global-markets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-block:1px solid var(--home-line);background:#090806b8;margin-block:52px 32px} #main .global-markets article{padding:40px 30px;border-right:1px solid var(--home-line)} #main .global-markets article:last-child{border-right:0} #main .market-code{display:block;font:400 clamp(44px,5vw,72px)/1.1 var(--display);color:#bda77e;margin-bottom:40px} #main .market-status{font:600 10px/1.7 var(--sans);letter-spacing:.15em;color:var(--home-gold);margin-bottom:16px} #main .global-markets h3{font-size:34px} #main .global-markets p:not(.market-status){font-size:17px;line-height:1.8} #main .global-note{font-size:15px;max-width:86ch;line-height:1.8;margin-bottom:28px} #main .inquiry-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,90px);padding-top:64px;margin-top:72px;border-top:1px solid var(--home-line);padding-bottom:70px} #main .inquiry-panel h3{font-size:clamp(32px,3.5vw,48px);white-space:pre-line;line-height:1.2} #main .inquiry-panel>div>p{max-width:46ch} #main #business-inquiry{display:grid;gap:22px;background:#0b0907d9;padding:32px;border:1px solid #b79b6838} #main #business-inquiry label{display:grid;gap:10px;font:500 15px/1.6 var(--sans);color:var(--home-text)} #main #business-inquiry input,#main #business-inquiry select,#main #business-inquiry textarea{box-sizing:border-box;width:100%;min-width:0;border:1px solid #b79b685c;background:#0e0c09;color:#f5efe4;padding:14px;font:400 16px/1.5 var(--sans);border-radius:0} #main #business-inquiry textarea{resize:vertical} #main #business-inquiry :is(input,select,textarea,button):focus-visible{outline:2px solid #f3d59d;outline-offset:4px} #main .form-note{font-size:13px;line-height:1.8;margin:0} #main #inquiry-status:empty{display:none} #main .form-privacy{font-size:14px;color:var(--home-gold);text-underline-offset:4px} #main #business-inquiry .btn{cursor:pointer;width:100%} html.cinema-arrived .hero-copy>.hero-subtitle{animation:cinema-rise 1.2s 1.6s both} @media(max-width:1080px){ #main .inquiry-panel{grid-template-columns:minmax(0,1fr)} #main .focus-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #main .focus-card--future{grid-column:span 2} #main .hero-subtitle{margin-inline:auto;max-width:38ch} #main .global-markets article{padding:30px 22px} } @media(max-width:720px){ #main #focus-title,#main #global-title{font-size:clamp(29px,8vw,38px);line-height:1.2;text-wrap:balance} #main .preview-section{padding-block:88px} #main .hero-subtitle{font-size:17px;line-height:1.65;letter-spacing:.025em;max-width:30ch;margin-top:24px} #main .preview-lead{font-size:18px;line-height:1.8} #main .focus-grid,#main .global-markets,#main .inquiry-panel{grid-template-columns:minmax(0,1fr)} #main .focus-card--future{grid-column:auto} #main .focus-card{min-height:260px;padding:28px;text-align:left} #main .focus-card h3{font-size:30px} #main .global-markets{margin-top:36px;text-align:center} #main .global-markets article{padding:36px 24px;border-right:0;border-bottom:1px solid var(--home-line)} #main .global-markets article:last-child{border-bottom:0} #main .market-code{margin-bottom:22px;font-size:56px} #main .global-note{text-align:center} #main .global-vision>.shell>.text-link{display:flex;justify-content:center;text-align:center} #main .leader-vision{padding:20px 0 0;border-left:0;border-top:1px solid var(--home-line)} #main .inquiry-panel{margin-top:48px;padding-top:44px;gap:32px;text-align:center} #main .inquiry-panel>div>p{margin-inline:auto} #main #business-inquiry{padding:24px 18px;text-align:left} } @media(prefers-reduced-motion:reduce){html.cinema-arrived .hero-copy>.hero-subtitle{animation:none}} /* ============================ refinement-v12 ============================ */ /* Compact first viewport. Allow natural overflow for zoom and very short windows. */ #main .preview-hero-inner{padding-top:calc(var(--header-h,102px) + clamp(8px,2.2svh,24px));padding-bottom:clamp(10px,2.4svh,26px)} #main .preview-hero .preview-eyebrow{margin-bottom:clamp(8px,1.8svh,18px)} #main .preview-hero h1{font-size:clamp(29px,min(4.85vw,9.2svh),76px);line-height:1.02;text-wrap:balance} #main .preview-hero .hero-subtitle{margin-top:clamp(10px,2svh,19px);font-size:clamp(14px,2.4svh,20px);line-height:1.35} #main .preview-hero .preview-lead{margin-block:clamp(10px,2svh,19px);max-width:57ch;font-size:clamp(15px,2.45svh,20px);line-height:1.48} #main .preview-hero .preview-actions{margin-top:clamp(10px,2svh,20px);gap:10px} #main .preview-hero .btn{min-height:44px;padding:10px 17px;font-size:clamp(11px,1.95svh,14px)} html.cinema-arrived #hero-title i,html.cinema-arrived .hero-copy>*{animation:none} @media(min-width:1081px){#main .hero-copy{width:min(68%,820px)}} @media(max-width:1080px){ #main .preview-hero h1{font-size:clamp(29px,min(8.4vw,7.4svh),64px)} #main .preview-hero .preview-lead{max-width:47ch} } @media(max-width:720px){ #main .preview-hero h1{font-size:clamp(27px,min(8.25vw,6.6svh),44px)} #main .preview-hero .preview-actions{display:grid;grid-template-columns:1fr 1fr} #main .preview-hero .btn{width:100%;gap:6px;padding-inline:6px;letter-spacing:.035em} } @media(max-height:480px) and (orientation:landscape){ #main .preview-hero-inner{padding-top:calc(var(--header-h,102px) + 6px);padding-bottom:8px} #main .preview-hero .preview-actions{margin-top:6px} #main .preview-hero h1{font-size:clamp(23px,6.5svh,31px)} #main .preview-hero .preview-eyebrow{margin-bottom:5px} #main .preview-hero .hero-subtitle,#main .preview-hero .preview-lead{margin-block:6px} } #main .leader-vision{border:0;padding:0;margin:20px 0 26px;max-width:58ch;font-size:inherit;line-height:1.7} #main .global-vision{overflow:hidden;background:linear-gradient(90deg,#090806f5 0%,#090806ba 48%,#09080620 100%)} #main .global-vision::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 88% 18%,#b7852821,transparent 55%);} #main .global-vision .section-heading{background:none;max-width:860px} #main .global-vision #global-title{line-height:1.06;text-wrap:balance} #main .global-markets{gap:14px;border:0;background:none} #main .global-markets article{position:relative;border:1px solid #a684473d;background:linear-gradient(150deg,#21180ee8,#090806e8);padding:34px clamp(19px,2.35vw,36px)} #main .global-markets article:first-child{border-color:#c39758a8;border-top:2px solid #c39758} #main .global-markets article:last-child{border-right:1px solid #a684473d} #main .global-markets .market-code{font-size:clamp(36px,4vw,56px);margin-bottom:24px;color:#c9ac76} #main .global-markets .market-status{letter-spacing:.12em} @media(max-width:720px){#main .global-markets article:last-child{border-bottom:1px solid #a684473d}} @media(max-width:720px){#main .leader-vision{margin-inline:auto}} /* ============================ global-v13 ============================ */ /* V13.1 — interactive world map (Global Vision), market flags, scroll reveals, and a larger mobile hero. Builds on the existing shell/globe styling. */ /* ---------- Global Vision: dotted expansion map ---------- */ #main .world-map{margin:clamp(34px,4.4vw,56px) 0 0;width:100%} #main .wm-clip{position:relative;aspect-ratio:67.3/43;width:100%;overflow:hidden} #main .wm-viewport{position:absolute;inset:0} #main .wm-svg{display:block;width:100%;height:100%;overflow:visible} .wm-dots{stroke:#7a5f33;stroke-width:.36;stroke-linecap:round;fill:none;opacity:.92} .wm-dots--de{stroke:#f0cf92;stroke-width:.46;opacity:.95} .wm-arc{ fill:none;stroke:#e8c488;stroke-width:.26;stroke-linecap:round; stroke-dasharray:.8 1;opacity:.85;transition:opacity .3s,stroke-width .3s,stroke .3s; filter:drop-shadow(0 0 .3px #ffcf8ab0); } /* The short hops to the Netherlands and Switzerland get the same presence as the long ones to Dubai and Qatar. */ .wm-arc[data-arc="nl"],.wm-arc[data-arc="ch"]{stroke-width:.34;stroke-dasharray:.55 .7;filter:drop-shadow(0 0 .36px #ffd79ac4)} .wm-origin{fill:#ffeaC0;stroke:#fff6e2;stroke-width:.12;transition:r .3s} .wm-pulse{fill:none;stroke:#f2cf95;stroke-width:.2;opacity:.5;transform-box:fill-box;transform-origin:center} .wm-target{fill:#140e08;stroke:#e3bd82;stroke-width:.26;opacity:.95;transition:r .3s,stroke .3s} .wm-hit{fill:transparent;cursor:pointer} .wm-hit:focus{outline:none} .wm-hit:focus-visible{outline:2px solid #ffe6b4;outline-offset:2px;border-radius:50%} /* Motion starts once the section is in view; see global-v13.js */ .world-map.is-live .wm-arc{animation:wm-flow 9s linear infinite} .world-map.is-live [data-arc="nl"]{animation-duration:4.6s} .world-map.is-live [data-arc="ch"]{animation-duration:5.4s} .world-map.is-live [data-arc="doh"]{animation-duration:11s} .world-map.is-live .wm-pulse{animation:wm-pulse 4.2s ease-out infinite} .world-map.is-live .wm-target{animation:wm-breathe 4.2s ease-in-out infinite} .world-map.is-live [data-point="nl"]{animation-delay:.7s} .world-map.is-live [data-point="ch"]{animation-delay:1.4s} .world-map.is-live [data-point="doh"]{animation-delay:2.1s} @keyframes wm-flow{to{stroke-dashoffset:-18}} .world-map.is-live [data-arc="nl"],.world-map.is-live [data-arc="ch"]{animation-name:wm-flow-short} @keyframes wm-flow-short{to{stroke-dashoffset:-12.5}} @keyframes wm-pulse{0%{transform:scale(.4);opacity:.6}70%{transform:scale(2.1);opacity:0}100%{opacity:0}} @keyframes wm-breathe{0%,100%{opacity:.55}50%{opacity:1}} /* Highlighted market: its arc and point lead, the others step back. */ .world-map[data-active]:not([data-active=""]) .wm-arc{opacity:.16} .world-map[data-active]:not([data-active=""]) .wm-dots{opacity:.55} .world-map[data-active="ch"] [data-arc="ch"], .world-map[data-active="nl"] [data-arc="nl"], .world-map[data-active="dxb"] [data-arc="dxb"], .world-map[data-active="doh"] [data-arc="doh"], .world-map[data-active="de"] .wm-arc{opacity:1;stroke:#ffdca4;stroke-width:.36;animation-duration:3.4s} .world-map[data-active="nl"] [data-arc="nl"], .world-map[data-active="ch"] [data-arc="ch"]{stroke-width:.44} .world-map[data-active="ch"] [data-point="ch"], .world-map[data-active="nl"] [data-point="nl"], .world-map[data-active="dxb"] [data-point="dxb"], .world-map[data-active="doh"] [data-point="doh"]{r:.88;stroke:#ffe6b8;animation:none;opacity:1} .world-map[data-active="de"] .wm-origin{r:.95} .world-map[data-active="de"] .wm-dots--de{opacity:1;stroke:#fff0cd} #main .wm-label{ position:absolute;left:var(--x);top:var(--y);display:grid;gap:3px; pointer-events:none;white-space:nowrap;text-align:left;transition:opacity .3s; } #main .wm-label b{ font:600 clamp(9.5px,.82vw,12.5px)/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase; color:#fbeed3;text-shadow:0 1px 10px #090806,0 0 4px #090806; } #main .wm-label em{ font:500 clamp(8px,.62vw,10px)/1.4 var(--sans);font-style:normal;letter-spacing:.14em; text-transform:uppercase;color:var(--home-gold);text-shadow:0 1px 10px #090806; } .world-map[data-active]:not([data-active=""]) .wm-label{opacity:.3} .world-map[data-active="de"] [data-label="de"], .world-map[data-active="ch"] [data-label="ch"], .world-map[data-active="nl"] [data-label="nl"], .world-map[data-active="dxb"] [data-label="dxb"], .world-map[data-active="doh"] [data-label="doh"]{opacity:1} #main .wm-label--base{transform:translate(-50%,calc(-100% - 26px));text-align:center;justify-items:center} #main .wm-label--base::after{ content:"";position:absolute;left:50%;top:100%;width:1px;height:21px; background:linear-gradient(#f0cf92c4,transparent); } #main .wm-label--left{transform:translate(-100%,-50%);margin-left:-13px;text-align:right;justify-items:end} #main .wm-label--right{transform:translate(13px,-50%)} #main .wm-legend{ display:flex;flex-wrap:wrap;gap:12px 30px;margin:22px 0 0;padding:0; font:600 11px/1.6 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--home-muted); } #main .wm-key{display:inline-flex;align-items:center;gap:10px} #main .wm-key i{width:9px;height:9px;border-radius:50%;flex:none} #main .wm-key--base i{background:#ffeac0;box-shadow:0 0 0 3px #f2cf9533} #main .wm-key--target i{background:#140e08;border:1px solid #e3bd82} @media(max-width:860px){ /* Too tight for five labels: the cards below carry the names. */ #main .wm-label{display:none} #main .wm-clip{aspect-ratio:67.3/40} #main .wm-legend{justify-content:center;gap:10px 22px;font-size:10px} .wm-origin{stroke-width:.2} .wm-target{stroke-width:.34} .wm-arc{stroke-width:.3} } /* Headquarters and expansion markets at a glance */ #main .global-facts{ display:grid;gap:18px 46px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:clamp(30px,3.4vw,46px) 0 0;padding:22px 0 0;border-top:1px solid var(--home-line); } #main .global-facts dt{ font:600 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--home-gold); } #main .global-facts dd{margin:6px 0 0;font:400 16px/1.6 var(--sans);color:var(--home-text)} #main .global-body{ display:grid;gap:14px;max-width:62ch;margin:clamp(26px,3vw,38px) 0 0; } #main .global-body p{margin:0;font-size:16px;line-height:1.75;color:var(--home-muted)} @media(max-width:720px){ #main .global-facts{text-align:center;gap:22px} #main .global-body{text-align:center;justify-items:center} } /* ---------- Market cards: national flags instead of code letters ---------- */ #main .global-markets article{ cursor:pointer;transition:border-color .3s,transform .3s,background-color .3s; } #main .global-markets article:hover, #main .global-markets article.is-active{border-color:#e8c68d;transform:translateY(-4px)} #main .global-markets article.is-active{box-shadow:inset 0 2px 0 0 #e8c68d} #main .market-flag{ display:block;width:clamp(46px,4.2vw,62px);height:auto;margin:0 0 26px; border:1px solid #d5b07a66;border-radius:2px;box-shadow:0 6px 18px #0006; } #main .global-markets article:first-child .market-flag{box-shadow:0 6px 18px #0006,0 0 0 1px #e8c68d55} #main .global-markets{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} @media(max-width:720px){ #main .market-flag{margin:0 auto 18px;width:52px} #main .global-markets article:hover,#main .global-markets article.is-active{transform:none} } /* Keep the Global Vision band calm: the map is the only figure there. */ #main .global-vision{background:linear-gradient(90deg,#090806fb 0%,#090806f2 55%,#090806e6 100%)} #main .global-vision::before{background:radial-gradient(ellipse at 78% 24%,#b7852817,transparent 58%)} /* ---------- Scroll reveals (added by script, so no-JS shows everything) ---------- */ .js-reveal{opacity:0;transform:translate3d(0,18px,0)} .js-reveal.is-in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)} @media(prefers-reduced-motion:reduce){ .js-reveal,.js-reveal.is-in{opacity:1;transform:none;transition:none} .world-map.is-live .wm-arc,.world-map.is-live .wm-pulse,.world-map.is-live .wm-target{animation:none} .wm-pulse{opacity:.35} } /* ---------- Intro: light travelling from Germany to the Gulf ---------- */ .earth-arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0} .ea-line{fill:none;stroke:#ffe3b4;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #120c06cc) drop-shadow(0 0 10px #ffc877aa)} .ea-dot{fill:#fff6e2;filter:drop-shadow(0 0 3px #120c06) drop-shadow(0 0 12px #ffd79a)} .ea-head{fill:#fffaf0;filter:drop-shadow(0 0 3px #120c06) drop-shadow(0 0 14px #ffc877)} .ea-head[data-landed="1"]{fill:#140e08;stroke:#ffd79a;stroke-width:1.6} /* ---------- Hero copy is typed out after the intro ---------- */ html.cinema-arrived #hero-title i, html.cinema-arrived .cinema-type i{animation:cinema-letter .01s both;animation-delay:var(--char-delay)} html.cinema-arrived .hero-copy>.preview-eyebrow{animation:cinema-rise .7s both} html.cinema-arrived .hero-copy>.hero-subtitle, html.cinema-arrived .hero-copy>.preview-lead{animation:none;opacity:1} html.cinema-arrived .hero-copy>.preview-actions{animation:cinema-rise .8s var(--rise-delay,2.6s) both} @media(prefers-reduced-motion:reduce){ html.cinema-arrived #hero-title i,html.cinema-arrived .cinema-type i, html.cinema-arrived .hero-copy>*{animation:none!important;opacity:1} } /* ---------- Mobile hero: larger type, still one screen without scrolling ---------- */ @media(max-width:1080px){ #main .preview-hero h1{font-size:clamp(34px,min(8.6vw,7.6svh),64px)} #main .preview-hero .hero-subtitle{font-size:clamp(15px,2.3svh,20px)} } @media(max-width:720px){ #main .preview-hero-inner{ padding-top:calc(var(--header-h,102px) + clamp(6px,1.6svh,16px)); padding-bottom:clamp(8px,1.8svh,20px); } #main .preview-hero .preview-eyebrow{font-size:clamp(10px,1.45svh,12px);margin-bottom:clamp(8px,1.6svh,16px)} #main .preview-hero h1{font-size:clamp(32px,min(11vw,8.2svh),54px);line-height:1.04} #main .preview-hero .hero-subtitle{ font-size:clamp(16px,2.35svh,19px);line-height:1.4; margin-top:clamp(9px,1.8svh,17px);max-width:32ch; } #main .preview-hero .preview-lead{ font-size:clamp(16px,2.2svh,19px);line-height:1.52; margin-block:clamp(9px,1.8svh,17px);max-width:36ch; } #main .preview-hero .preview-actions{margin-top:clamp(10px,1.9svh,18px);gap:9px} #main .preview-hero .btn{min-height:clamp(44px,6.3svh,56px);font-size:clamp(12px,1.8svh,14.5px);padding:12px 14px} } /* ---------- V15 corrections: label clearance, five-card rhythm ---------- */ #main .wm-label--base{transform:translate(-50%,calc(-100% - 44px))} #main .wm-label--base::after{height:39px} #main .wm-label--left{margin-left:-16px} #main [data-label="nl"]{transform:translate(-100%,-110%)} #main [data-label="ch"]{transform:translate(-100%,10%)} #main .global-markets h3{font-size:clamp(21px,1.75vw,26px);line-height:1.15} #main .global-markets article>p:last-child{font-size:15px;line-height:1.65} #main .market-status{ text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;font-weight:600; } #main .global-note{margin-top:clamp(18px,2vw,26px)} @media(max-width:1180px) and (min-width:861px){ #main .global-markets{grid-template-columns:repeat(3,1fr)} } @media(max-width:720px){ /* Phones: a slight zoom onto the Germany-Gulf corridor so the points read. */ #main .wm-clip{aspect-ratio:auto;height:clamp(236px,64vw,310px)} #main .wm-viewport{ --wmz:min(112.5vw,620px); inset:auto auto auto 0;width:var(--wmz);aspect-ratio:67.3/43; left:calc(50% - 0.53 * var(--wmz)); top:calc(50% - 0.50 * var(--wmz) / 1.5651); } .wm-origin{stroke-width:.26} .wm-pulse{stroke-width:.26} } /* ---------- V16: the principle line now carries the page language ---------- */ #main .investment-principles>div{grid-template-columns:30px 1fr;align-items:center;gap:0 18px} #main .investment-principles span{grid-row:auto;align-self:center} #main .investment-principles strong{font-size:clamp(23px,2.1vw,30px);line-height:1.25} /* ============================ germany-v17 ============================ */ /* V17 — "Deutschlandweit für Sie im Einsatz": interactive map of the locations served by the subsidiaries. */ #main .germany-reach{background:linear-gradient(120deg,#090806 0%,#0b0907f2 46%,#0d0a07e6 100%)} #main .germany-reach::before{background:radial-gradient(ellipse at 76% 42%,#b7852820,transparent 62%)} #main .reach-layout{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(34px,4.6vw,76px);align-items:center; } #main .reach-copy{min-width:0} #main .germany-reach h2{ margin:0 0 clamp(20px,2.4vw,30px);display:grid;gap:2px; font:400 clamp(34px,4.1vw,58px)/1.1 var(--display);color:var(--home-text); } #main .germany-reach h2 em{font-style:normal;color:var(--home-gold)} #main .reach-intro{margin:0 0 clamp(20px,2.3vw,28px);font-size:16px;line-height:1.7;color:var(--home-muted)} #main .reach-lists{display:grid;grid-template-columns:1fr 1fr;gap:4px clamp(18px,2.4vw,40px)} #main .reach-lists ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} #main .reach-city{ display:flex;align-items:center;gap:12px;width:100%; padding:7px 10px 7px 4px;margin:0;border:0;border-radius:2px;background:none; font:400 16px/1.5 var(--sans);color:var(--home-text);text-align:left; cursor:pointer;transition:color .2s,background-color .2s; } #main .reach-city i{ width:6px;height:6px;flex:none;border-radius:50%; background:#8a6c3a;transition:background-color .2s,box-shadow .2s,transform .2s; } #main .reach-city:hover,#main .reach-city.is-active{color:#fff3da;background:#1a140c80} #main .reach-city:hover i,#main .reach-city.is-active i{ background:#ffeec8;box-shadow:0 0 0 3px #e9bd7233,0 0 10px #e9bd72;transform:scale(1.15); } #main .reach-city:focus-visible{outline:2px solid #f3d59d;outline-offset:2px} #main .reach-note{margin:clamp(26px,3vw,38px) 0 0;padding:20px 0 0;border-top:1px solid var(--home-line);font-size:16px;line-height:1.7;color:var(--home-muted)} #main .reach-claim{margin:4px 0 0;font-size:16px;line-height:1.7;color:var(--home-gold)} /* ---------- the map ---------- */ #main .reach-map{margin:0 auto;min-width:0;width:100%;max-width:min(100%,560px)} #main .reach-clip{position:relative;width:100%;aspect-ratio:5.834/7.9;max-height:none} #main .reach-svg{display:block;width:100%;height:100%;overflow:visible} .reach-country{ fill:url(#reach-gold);stroke:#ffeac2;stroke-width:.018;stroke-linejoin:round; filter:drop-shadow(0 .06px .22px #000000a8); } .reach-states{fill:none;stroke:#7c5a20;stroke-width:.013;opacity:.5;stroke-linejoin:round} .reach-dot{ r:.046;fill:#fffaf0;stroke:#2a1c0c;stroke-width:.011; transition:r .22s cubic-bezier(.22,.61,.36,1),fill .22s; } .reach-hit{fill:transparent;cursor:pointer} .reach-hit:focus{outline:none} .reach-hit:focus-visible{outline:2px solid #ffe6b4;outline-offset:1px;border-radius:50%} /* The points arrive one after another, starting in Düsseldorf and spreading outwards — the order sits in --seq, set per point in the markup. */ .reach-dot,.reach-ring{transform-box:fill-box;transform-origin:center} [data-reach-map] .reach-ring{fill:none;stroke:#ffe6bb;stroke-width:.03;opacity:0} /* Only hide the points where a script can bring them back. */ @media (scripting: enabled){ [data-reach-map] .reach-dot{opacity:0} } [data-reach-map].has-arrived .reach-dot{ animation: reach-pop .62s cubic-bezier(.2,.76,.3,1.3) calc(var(--step,170ms) * var(--seq,0) + 260ms) both, reach-breathe 5s ease-in-out calc(var(--step,170ms) * var(--seq,0) + 880ms) infinite; } [data-reach-map].has-arrived .reach-ring{ animation:reach-ripple 1.15s ease-out calc(var(--step,170ms) * var(--seq,0) + 260ms) both; } @keyframes reach-pop{ 0%{opacity:0;transform:scale(.15)} 55%{opacity:1;transform:scale(1.35)} 100%{opacity:.86;transform:scale(1)} } @keyframes reach-ripple{ 0%{opacity:0;transform:scale(.4)} 18%{opacity:.75} 100%{opacity:0;transform:scale(4.6)} } @keyframes reach-breathe{0%,100%{opacity:.82}50%{opacity:1}} [data-reach-map][data-active]:not([data-active=""]) .reach-dot{opacity:.62;animation:none} [data-reach-map][data-active] .reach-dot.is-active{ opacity:1;r:.085;fill:#fff;animation:none;transform:none; filter:drop-shadow(0 0 .14px #fff) drop-shadow(0 0 .3px #ffd79a); } #main .reach-label{ position:absolute;left:var(--x);top:var(--y);white-space:nowrap;pointer-events:none; font:500 clamp(11px,.92vw,14px)/1 var(--sans);color:#fff5e4; text-shadow:0 1px 6px #0f0a05,0 0 3px #0f0a05cc; opacity:0;transition:opacity .22s,color .22s; } #main .reach-label.is-pinned{opacity:.88} #main .reach-label--right{transform:translate(14px,-50%)} #main .reach-label--left{transform:translate(-100%,-50%);margin-left:-14px} /* The standing names arrive with their own point. Transitions, not animations, so the dimming and highlighting below still win. */ @media (scripting: enabled){ #main [data-reach-map]:not(.has-arrived) .reach-label.is-pinned{opacity:0} } #main [data-reach-map] .reach-label.is-pinned{ transition:opacity .55s ease-out calc(var(--step,170ms) * var(--seq,0) + 420ms); } #main [data-reach-map][data-active]:not([data-active=""]) .reach-label.is-pinned{opacity:.3;transition-delay:0s} #main [data-reach-map][data-active] .reach-label.is-active, #main [data-reach-map][data-active] .reach-label.is-pinned.is-active{ opacity:1;color:#fff;font-weight:600;transition-delay:0s; } @media(max-width:1080px){ #main .reach-layout{grid-template-columns:1fr;gap:clamp(30px,5vw,46px);justify-items:center;text-align:center} #main .germany-reach h2{justify-items:center} #main .reach-lists{max-width:460px;width:100%;text-align:left} #main .reach-intro,#main .reach-note,#main .reach-claim{max-width:46ch} #main .reach-note{width:100%;max-width:460px} /* Order on one column: kicker, headline, map, then the list. */ #main .reach-copy{display:contents} #main .reach-copy>*{max-width:min(560px,100%)} #main .germany-reach .preview-eyebrow{order:1} #main .germany-reach h2{order:2;margin-bottom:0} #main .reach-map{order:3;max-width:min(420px,76vw)} #main .reach-intro{order:4;margin-bottom:0} #main .reach-lists{order:5} #main .reach-note{order:6} #main .reach-claim{order:7;margin-top:0} } @media(max-width:860px){ /* Not enough room for eight standing labels: the crowded ones appear on tap. */ #main [data-label="wetzlar"].is-pinned,#main [data-label="ludwigshafen"].is-pinned, #main [data-label="karlsruhe"].is-pinned,#main [data-label="stuttgart"].is-pinned{opacity:0} #main .reach-label{font-size:10.5px} #main .reach-label--right{transform:translate(10px,-50%)} #main .reach-label--left{margin-left:-10px} } @media(max-width:620px){ #main .reach-city{font-size:15px;gap:10px;padding:6px 8px 6px 2px} #main .reach-lists{gap:2px 14px} #main .reach-label{font-size:10px} } @media(prefers-reduced-motion:reduce){ /* No staged arrival: everything is simply there. */ [data-reach-map] .reach-dot,[data-reach-map].has-arrived .reach-dot{animation:none;opacity:.86;transform:none} [data-reach-map] .reach-ring,[data-reach-map].has-arrived .reach-ring{display:none} #main [data-reach-map]:not(.has-arrived) .reach-label.is-pinned{opacity:.88} #main [data-reach-map] .reach-label.is-pinned{transition:none} #main .reach-city,#main .reach-city i,.reach-dot,#main .reach-label{transition:none} } /* ---------- V18: the released portrait replaces the placeholder ---------- */ #main .leader-portrait.has-photo{ position:relative;min-height:0;aspect-ratio:3/4; max-height:min(640px,76vh);padding:0;overflow:hidden; background:#0b0907;border:1px solid #c9a15833; } #main .portrait-photo{ display:block;width:100%;height:100%;object-fit:cover;object-position:center 32%; } #main .leader-portrait.has-photo::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(190deg,transparent 42%,#090806a8 100%); } #main .leader-portrait.has-photo .portrait-frame{z-index:2} @media(max-width:860px){ /* With a real portrait the photo leads, as it does on the desktop layout. */ #main .leader-portrait.has-photo{ order:-1;margin:0 auto;width:100%;max-width:min(400px,80vw); } }