/* ========================================================================== TECH DISTRICT SCHWABING — Website Built on the TDS design system tokens (assets/css/tokens/*). Principles: off-white / off-black, colour only as house marker, Figtree only, sharp squares (the "pixel"), one or two rounded corners on panels, no shadows, hairline #C7C7C7, short linear transitions. ========================================================================== */ /* ---------- Web layer on top of the print-derived tokens ---------- */ :root{ --gutter:clamp(16px,4vw,64px); --maxw:1440px; --section-y:clamp(88px,11vw,168px); --t-display:clamp(42px,7.2vw,124px); --t-h2:clamp(28px,3.7vw,56px); --t-h3:clamp(22px,1.9vw,28px); --t-lead:clamp(18px,1.55vw,22px); --t-body:clamp(16px,1.12vw,17px); --t-small:14px; --t-label:12px; --ease:cubic-bezier(.2,.7,.2,1); --dur-ui:160ms; --nav-h:64px; /* v2: modern, sharp — all corners square */ --radius-card:0;--radius-tile:0;--radius-panel:0;--radius-panel-tr:0;--radius-hero:0; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);-webkit-text-size-adjust:100%} body{ margin:0;background:var(--tds-white);color:var(--text-primary); font-family:var(--font-sans);font-size:var(--t-body);line-height:1.55;letter-spacing:-.01em; overflow-x:clip; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} a:hover{color:inherit} button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit} h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0} ul,ol{padding:0;list-style:none} :focus-visible{outline:2px solid var(--tds-orange-500);outline-offset:3px} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--section-y);position:relative} .surface-warm{background:var(--surface-warm)} .surface-dark{background:var(--surface-dark);color:var(--text-inverse)} .surface-graphite{background:var(--surface-graphite);color:var(--text-inverse)} /* ---------- Type ---------- */ .display{font-weight:var(--fw-extrabold);font-size:var(--t-display);line-height:.98;letter-spacing:-.04em;color:var(--text-strong);text-wrap:balance} .h2{font-weight:var(--fw-extrabold);font-size:var(--t-h2);line-height:1.02;letter-spacing:-.035em;color:var(--text-strong);text-wrap:balance} .surface-dark .h2,.surface-graphite .h2,.on-dark .h2{color:var(--tds-white)} .h3{font-weight:var(--fw-bold);font-size:var(--t-h3);line-height:1.15;letter-spacing:-.025em} .sub{font-weight:var(--fw-medium);font-size:clamp(20px,1.9vw,28px);line-height:1.18;letter-spacing:-.025em} .lead{font-weight:var(--fw-medium);font-size:var(--t-lead);line-height:1.38;letter-spacing:-.02em;text-wrap:pretty} .prose p+p{margin-top:1em} .prose{text-wrap:pretty} .muted{color:var(--text-secondary)} .surface-dark .muted,.on-dark .muted{color:rgba(255,255,255,.66)} .fine{font-size:var(--t-small);line-height:1.45;color:var(--text-secondary)} .surface-dark .fine{color:rgba(255,255,255,.56)} /* Eyebrow / label — uppercase ExtraBold with the brand pixel */ .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:var(--t-label);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;line-height:1; } .eyebrow::before{content:"";width:var(--pixel-s);height:var(--pixel-s);background:currentColor;flex:none} .eyebrow .num{font-variant-numeric:tabular-nums} .eyebrow--chip{padding:9px 14px;border:1px solid currentColor} .eyebrow--chip::before{display:none} [data-house=orange] .eyebrow::before,.eyebrow.is-orange::before{background:var(--tds-orange-500)} [data-house=blue] .eyebrow::before,.eyebrow.is-blue::before{background:var(--tds-blue-500)} [data-house=green] .eyebrow::before,.eyebrow.is-green::before{background:var(--tds-green-500)} /* ---------- Buttons (DS Button: sharp corners + trailing pixel) ---------- */ .btn{ --ink:var(--tds-offblack);--paper:var(--tds-white); display:inline-flex;align-items:center;gap:12px; min-height:48px;padding:14px 20px; font-weight:var(--fw-bold);font-size:15px;line-height:1;letter-spacing:-.005em;white-space:nowrap; border:1px solid var(--ink);border-radius:0;cursor:pointer; background:var(--ink);color:var(--paper); transition:background var(--dur-ui) linear,color var(--dur-ui) linear,border-color var(--dur-ui) linear; } .btn:hover{background:var(--tds-graphite);border-color:var(--tds-graphite);color:var(--paper)} .btn--ghost{background:transparent;color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn--inverse{--ink:var(--tds-white);--paper:var(--tds-offblack)} .btn--inverse:hover{background:var(--tds-offwhite);border-color:var(--tds-offwhite);color:var(--tds-offblack)} .btn--inverse.btn--ghost:hover{background:var(--tds-white);color:var(--tds-offblack)} .btn--sm{min-height:40px;padding:11px 16px;font-size:14px} .btn-row{display:flex;flex-wrap:wrap;gap:12px} .link{display:inline-flex;align-items:center;gap:10px;font-weight:var(--fw-bold);padding-bottom:4px;border-bottom:1px solid currentColor;transition:gap var(--dur-ui) linear} .link:hover{opacity:.7} /* ---------- Placeholder imagery ---------- Every .ph marks a spot for a final photo. Replace the element with … (object-fit: cover is set for .media img). */ .ph{ --ph-bg:var(--tds-blue-100);--ph-ink:var(--tds-offblack); position:relative;overflow:hidden;background:var(--ph-bg);color:var(--ph-ink); width:100%;height:100%;min-height:120px; } .ph::before{ /* white brand pixels */ content:"";position:absolute;right:12%;top:16%;width:12px;height:12px;background:rgba(255,255,255,.95); box-shadow:12px 0 0 rgba(255,255,255,.95),24px 12px 0 rgba(255,255,255,.7),-24px 36px 0 rgba(255,255,255,.85),36px 36px 0 rgba(255,255,255,.95),0 60px 0 rgba(255,255,255,.6),60px 24px 0 rgba(255,255,255,.9),72px 72px 0 rgba(255,255,255,.5),-48px 84px 0 rgba(255,255,255,.75),24px 96px 0 rgba(255,255,255,.4); } .ph::after{ content:attr(data-label);text-align:left;position:absolute;left:16px;bottom:14px;right:16px; font-size:11px;font-weight:var(--fw-extrabold);letter-spacing:.12em;text-transform:uppercase;line-height:1.35;opacity:.62; } .ph[data-tone=sky]{--ph-bg:#CFE3EC} .ph[data-tone=blue]{--ph-bg:var(--tds-blue-200)} .ph[data-tone=blue-dark]{--ph-bg:var(--tds-blue-700);--ph-ink:#fff} .ph[data-tone=orange]{--ph-bg:var(--tds-orange-200)} .ph[data-tone=orange-dark]{--ph-bg:var(--tds-orange-900);--ph-ink:#fff} .ph[data-tone=green]{--ph-bg:var(--tds-green-200)} .ph[data-tone=green-dark]{--ph-bg:var(--tds-green-900);--ph-ink:#fff} .ph[data-tone=sand]{--ph-bg:var(--tds-orange-100)} .ph[data-tone=stone]{--ph-bg:#E4E1D8} .ph[data-tone=graphite]{--ph-bg:var(--tds-graphite);--ph-ink:#fff} .ph[data-tone=dark]{--ph-bg:#262624;--ph-ink:#fff} .media{position:relative;overflow:hidden} .media>img{width:100%;height:100%;object-fit:cover} /* Corner language from the manual */ .r-tl{border-top-left-radius:var(--radius-hero)} .r-tr{border-top-right-radius:var(--radius-panel-tr)} .r-top{border-radius:var(--radius-panel) var(--radius-panel) 0 0} .r-card{border-radius:var(--radius-card)} .r-tile{border-radius:var(--radius-tile)} /* ---------- Reveal on scroll ---------- */ /* reveal classes: the motion itself is scroll-scrubbed (see [data-sx] at the end) */ /* ========================================================================== NAV ========================================================================== */ .nav{ position:fixed;z-index:60;top:0;left:0;right:0; padding:14px var(--gutter); transition:padding .3s var(--ease); } .nav__bar{ height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px; max-width:var(--maxw);margin:0 auto; padding:0 8px 0 24px; transition:background .3s linear,box-shadow .3s linear; } .nav.is-scrolled .nav__bar{ background:rgba(251,249,243,.78); -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2); box-shadow:inset 0 0 0 1px rgba(29,29,27,.08); } .nav__logo{display:flex;align-items:center;flex:none} .nav__logo svg{height:22px;width:auto} .nav__links{display:flex;align-items:center;gap:clamp(16px,2vw,32px);font-size:15px;font-weight:var(--fw-medium)} .nav__links a{position:relative;padding:6px 0} .nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-ui) linear} .nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)} .nav__cta{display:flex;align-items:center;gap:8px} .nav__cta .btn{min-height:48px;padding:0 22px} .nav__toggle{display:none;width:48px;height:48px;border:0;background:var(--tds-offblack);color:#fff;cursor:pointer;place-items:center} .nav__toggle span{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .2s linear} .nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .2s linear,top .2s linear} .nav__toggle span::before{top:-6px}.nav__toggle span::after{top:6px} .nav.is-open .nav__toggle span{background:transparent} .nav.is-open .nav__toggle span::before{top:0;transform:rotate(45deg)} .nav.is-open .nav__toggle span::after{top:0;transform:rotate(-45deg)} .menu{ position:fixed;inset:0;z-index:55;background:var(--tds-offwhite); padding:calc(var(--nav-h) + 56px) var(--gutter) 32px; display:flex;flex-direction:column;justify-content:space-between;gap:32px; opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s; } .nav.is-open+.menu{opacity:1;visibility:visible;transition:opacity .25s linear} .menu ol{display:flex;flex-direction:column;gap:6px;counter-reset:m} .menu li a{display:flex;align-items:baseline;gap:14px;font-size:clamp(30px,8vw,44px);font-weight:var(--fw-extrabold);letter-spacing:-.035em;line-height:1.1} .menu li a::before{counter-increment:m;content:counter(m,decimal-leading-zero);font-size:12px;font-weight:var(--fw-extrabold);letter-spacing:.12em;color:var(--text-secondary)} @media (max-width:1100px){ .nav__links{display:none} .nav__toggle{display:grid} .nav .nav__cta .btn{display:none} } @media (min-width:1101px){.menu{display:none}} /* ========================================================================== 01 HERO — after findrealestate.com: centred headline, building rising ========================================================================== */ .hero{position:relative;height:210vh;height:210svh;background:var(--tds-white)} .hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate} .hero__sky{position:absolute;inset:0;z-index:-2} .hero__sky .ph{height:100%} .hero__sky .ph::before{display:none} .hero__sky .ph::after{left:auto;right:var(--gutter);bottom:auto;top:calc(var(--nav-h) + 36px);width:auto;text-align:right;opacity:.45} .hero__content{ position:absolute;left:0;right:0;top:0;z-index:1; padding:calc(var(--nav-h) + clamp(36px,8vh,104px)) var(--gutter) 0; display:flex;flex-direction:column;align-items:center;text-align:center; will-change:transform,opacity; } .hero__address{margin-bottom:clamp(16px,2.6vh,26px);color:var(--tds-offblack);font-size:15px;font-weight:var(--fw-bold);letter-spacing:-.005em} .hero__title{max-width:19ch;font-size:clamp(36px,4.9vw,82px)} .hero__title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .02em .12em;margin:-.08em -.02em -.12em} .hero__title .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)} .hero.is-ready .hero__title .w>span{transform:none} .hero__lead{ margin-top:clamp(18px,3vh,28px);max-width:820px; font-size:clamp(17px,1.5vw,22px);font-weight:var(--fw-medium);line-height:1.38;letter-spacing:-.02em;color:var(--tds-offblack);text-wrap:balance; } .hero__lead .w{opacity:.28;transition:opacity .5s linear} .hero__lead .w.is-on{opacity:1} .hero__actions{margin-top:clamp(22px,4vh,36px);justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease) .9s,transform .7s var(--ease) .9s} .hero.is-ready .hero__actions{opacity:1;transform:none} .hero__building{ position:absolute;z-index:2;left:50%;bottom:0; width:min(1180px,96vw); transform:translate(-50%,var(--b-y,62%)) scale(var(--b-s,1));transform-origin:50% 100%; will-change:transform; } .hero__building svg{width:100%;height:auto} .hero__building-note{ position:absolute;left:50%;top:-34px;transform:translateX(-50%);white-space:nowrap; font-size:11px;font-weight:var(--fw-extrabold);letter-spacing:.12em;text-transform:uppercase;color:var(--tds-offblack);opacity:.5; } /* white pixel dissolve (brand replacement for the reference's clouds) */ .hero__pixels{position:absolute;z-index:3;left:0;right:0;bottom:0;height:20vh;pointer-events:none} .hero__pixels canvas{width:100%;height:100%} .hero__scroll{ position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%); width:8px;height:8px;background:var(--tds-offblack);opacity:.75; box-shadow:0 12px 0 rgba(29,29,27,.45),0 24px 0 rgba(29,29,27,.2);bottom:44px; } @media (max-width:700px){ .hero{height:180vh;height:180svh} .hero__content{padding-top:calc(var(--nav-h) + 48px)} .hero__sky .ph::after{display:none} .hero__building{width:150vw} .hero__actions .btn{width:100%;justify-content:space-between} .hero__actions{width:100%;max-width:360px;flex-direction:column} } /* Facts — Figma "Stats 1": hairline rows, label left, big figure right */ .facts__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)} .facts__list{border-top:1px solid rgba(255,255,255,.18)} .fact{ display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start; padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.18); } .fact dt{padding-top:.9em;font-size:var(--t-label);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:rgba(255,255,255,.82)} .fact dd{font-size:clamp(44px,5.6vw,84px);font-weight:var(--fw-extrabold);line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;gap:.08em} .fact dd small{font-size:.42em;letter-spacing:-.02em;margin-top:.12em} .fact dd .pre{font-size:.42em;letter-spacing:-.02em;margin-top:.12em;margin-right:.12em} .facts__foot{margin-top:clamp(32px,4vw,48px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} @media (max-width:640px){ .fact{grid-template-columns:1fr;gap:6px} .fact dt{padding-top:0} } /* ========================================================================== 03 HIGHLIGHTS — Figma "Value & Features 3": centred header, 3×2 cards ========================================================================== */ .center-head{max-width:820px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px} .cards{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px)} .card{ background:var(--surface-warm);border-radius:var(--radius-card); padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;min-height:100%; transition:background var(--dur-ui) linear; } .card__top{display:flex;align-items:center;gap:14px} .card__num{ flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--tds-offblack);color:#fff; font-size:12px;font-weight:var(--fw-extrabold);letter-spacing:.04em;font-variant-numeric:tabular-nums; } .card .h3{font-size:clamp(20px,1.6vw,24px)} .card p{color:var(--tds-graphite)} .card:hover{background:var(--tds-orange-100)} .card:hover .card__num{background:var(--tds-orange-500)} @media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.cards{grid-template-columns:1fr}} /* ========================================================================== 04 MAKROLAGE — Figma "Value & Features 1": collage left, text right ========================================================================== */ .makro{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center} .makro__collage{grid-column:1/8;position:relative;aspect-ratio:668/626} .makro__collage .m1{position:absolute;left:0;top:15%;width:46%;height:73%} .makro__collage .m2{position:absolute;left:50%;top:0;width:35%;height:34%} .makro__collage .m3{position:absolute;left:50%;top:38%;width:50%;height:62%} .makro__text{grid-column:8/-1;display:flex;flex-direction:column;gap:24px;padding-left:clamp(0px,2vw,32px)} .makro__text .h2{font-size:clamp(28px,3.4vw,52px)} @media (max-width:900px){ .makro__collage,.makro__text{grid-column:1/-1} .makro__text{margin-top:48px;padding-left:0} } /* ========================================================================== 07 BÜROFLÄCHEN — Figma "Bento 2" ========================================================================== */ .bento{ margin-top:clamp(48px,6vw,80px); display:grid;gap:16px; grid-template-columns:1.25fr 1fr 1fr 1fr; grid-template-areas: "img1 c1 c2 img2" "img1 c3 c4 img2" "img1 big big img2"; } .bento>*{border-radius:var(--radius-card);overflow:hidden} .bento .b-img1{grid-area:img1;min-height:420px} .bento .b-img2{grid-area:img2;min-height:420px} .bento .b-c1{grid-area:c1}.bento .b-c2{grid-area:c2}.bento .b-c3{grid-area:c3}.bento .b-c4{grid-area:c4} .bento .b-big{grid-area:big} .tile{background:var(--tds-orange-100);padding:24px;display:flex;flex-direction:column;gap:12px} .tile__icon{width:40px;height:40px;background:var(--tds-white);display:grid;place-items:center;margin-bottom:12px} .tile__icon i{display:block;width:var(--pixel-s);height:var(--pixel-s);background:var(--tds-offblack);box-shadow:var(--sq,none)} .tile__icon i.tile__plus{width:22px;height:22px;background:linear-gradient(var(--tds-offblack),var(--tds-offblack)) center/100% var(--pixel-s) no-repeat,linear-gradient(var(--tds-offblack),var(--tds-offblack)) center/var(--pixel-s) 100% no-repeat} .tile h3{font-size:17px;font-weight:var(--fw-bold);letter-spacing:-.02em} .tile p{font-size:15px;line-height:1.5;color:var(--tds-graphite)} .tile-big{background:var(--tds-offblack);color:#fff;padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:280px} .tile-big__top{display:flex;justify-content:space-between;gap:24px;align-items:start} .tile-big__top svg{height:20px;width:auto} .tile-big .tile-big__fig{color:#fff;margin-bottom:18px;font-size:clamp(52px,6vw,96px);font-weight:var(--fw-extrabold);letter-spacing:-.045em;line-height:.9} .tile-big__fig small{font-size:.45em;letter-spacing:-.02em} .tile-big p{max-width:52ch;color:rgba(255,255,255,.72);font-size:15px} .bento__foot{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center} .bento__foot .prose{grid-column:1/8} .bento__foot .btn-row{grid-column:9/-1;justify-content:flex-end} @media (max-width:1100px){ .bento{grid-template-columns:1fr 1fr;grid-template-areas:"img1 img2" "c1 c2" "c3 c4" "big big"} .bento .b-img1,.bento .b-img2{min-height:300px} } @media (max-width:640px){ .bento{grid-template-columns:1fr;grid-template-areas:"img1" "c1" "c2" "c3" "c4" "big" "img2"} .bento__foot .prose,.bento__foot .btn-row{grid-column:1/-1} .bento__foot .btn-row{justify-content:flex-start;margin-top:28px} } @media (min-width:641px) and (max-width:900px){ .bento__foot .prose,.bento__foot .btn-row{grid-column:1/-1} .bento__foot .btn-row{justify-content:flex-start;margin-top:28px} } /* ========================================================================== 10 IMPRESSIONEN — "View from above" + gallery row (Figma "Hero 7") ========================================================================== */ .above{position:relative;height:260vh;height:260svh} .above__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-start;justify-content:center} .above>.ph{position:absolute;inset:0} .above>.ph::before{display:none} .above__title{ position:relative;z-index:2;margin-top:clamp(96px,14vh,150px);padding:0 var(--gutter);text-align:center; font-size:clamp(40px,7vw,120px);font-weight:var(--fw-extrabold);line-height:.92;letter-spacing:-.05em;color:#fff; } .above__title span{display:block} .lightbox{position:fixed;inset:0;z-index:80;background:rgba(29,29,27,.94);display:none;align-items:center;justify-content:center;padding:72px var(--gutter)} .lightbox.is-open{display:flex} .lightbox__frame{width:min(1200px,100%);aspect-ratio:3/2;max-height:100%} .lightbox__frame .ph{border-radius:var(--radius-card)} .lightbox button{position:absolute;border:0;background:var(--tds-white);color:var(--tds-offblack);width:48px;height:48px;cursor:pointer;font-weight:800;font-size:18px} .lightbox__close{top:16px;right:16px} .lightbox__prev{left:16px;top:50%;transform:translateY(-50%)} .lightbox__next{right:16px;top:50%;transform:translateY(-50%)} .lightbox__count{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em} /* ========================================================================== 11 CTA — full-bleed photo, centred (Figma frame 2:4032) ========================================================================== */ .cta .ph::after{text-align:left} .cta{position:relative;min-height:clamp(560px,82vh,760px);display:grid;place-items:center;overflow:hidden;color:#fff;text-align:center} .cta>.ph{position:absolute;inset:0} .cta::before{content:"";position:absolute;inset:0;background:rgba(29,29,27,.55);z-index:1} .cta__inner{position:relative;z-index:2;max-width:880px;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;gap:24px} .cta__inner .h2{color:#fff;font-size:clamp(32px,4.6vw,72px);letter-spacing:-.045em} .cta__inner p{max-width:60ch;color:rgba(255,255,255,.86)} .cta__inner .btn-row{justify-content:center;margin-top:8px} /* ========================================================================== 12 KONTAKT — Figma frame 2:7727 card on full-bleed image (2:7726) ========================================================================== */ .contact{position:relative;padding-block:var(--section-y);background:var(--tds-offwhite)} .contact>.ph{position:absolute;inset:0} .contact>.ph::before{display:none} .contact__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px)} .contact__l{display:flex;flex-direction:column;gap:22px} .contact__l .h2{font-size:clamp(28px,3.5vw,52px)} .contact__agent{margin-top:auto;padding-top:28px;border-top:1px dashed var(--tds-grey-300);display:grid;grid-template-columns:1fr 1fr;gap:20px} .contact__agent .minihead{grid-column:1/-1;font-size:15px} .contact__role{grid-column:1/-1;margin:0 0 -12px;font-size:20px;font-weight:var(--fw-extrabold);letter-spacing:-.01em} .contact__agent address{font-style:normal;line-height:1.5} .contact__agent strong{display:block;font-weight:var(--fw-extrabold)} .contact__agent a{text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--tds-grey-300)} .contact__agent a:hover{text-decoration-color:currentColor} .form{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-content:start} .field{display:flex;flex-direction:column;gap:8px;grid-column:span 2} .field--half{grid-column:span 1} .field label,.field legend{font-size:11px;font-weight:var(--fw-extrabold);letter-spacing:.14em;text-transform:uppercase;color:var(--tds-grey-600)} .field input,.field textarea,.field select{ width:100%;border:1px solid var(--border-hairline);background:#fff;border-radius:0;padding:14px 16px;font-size:16px;line-height:1.3; transition:border-color var(--dur-ui) linear,background var(--dur-ui) linear; } .field textarea{min-height:132px;resize:vertical} .field input:focus,.field textarea:focus{outline:none;border-color:var(--tds-offblack);background:var(--tds-white)} .field input::placeholder,.field textarea::placeholder{color:#8B8B88} .field.is-invalid input,.field.is-invalid textarea{border-color:var(--tds-orange-700)} .field .err{font-size:13px;color:var(--tds-orange-700);display:none} .field.is-invalid .err{display:block} fieldset.field{border:0;padding:0;margin:0} .seg{display:flex;flex-wrap:wrap;gap:8px} .seg label{position:relative;cursor:pointer} .seg input{position:absolute;opacity:0;pointer-events:none} .seg span{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;background:#fff;box-shadow:inset 0 0 0 1px var(--border-hairline);font-size:14px;font-weight:var(--fw-bold);letter-spacing:.02em;transition:background var(--dur-ui) linear,color var(--dur-ui) linear} .seg span::before{content:"";width:var(--pixel-s);height:var(--pixel-s);background:var(--c,var(--tds-grey-300))} .seg input:checked+span{background:var(--tds-offblack);color:#fff} .seg input:focus-visible+span{outline:2px solid var(--tds-orange-500);outline-offset:2px} .check{grid-column:span 2;display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--tds-graphite);cursor:pointer} .check input{appearance:none;flex:none;width:20px;height:20px;border:1px solid var(--tds-offblack);margin:1px 0 0;display:grid;place-items:center;cursor:pointer;background:#fff} .check input:checked::after{content:"";width:10px;height:10px;background:var(--tds-offblack)} .check.is-invalid input{border-color:var(--tds-orange-700)} .check a{text-decoration:underline;text-underline-offset:.18em} .form__submit{grid-column:span 2;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px} .form__status{font-size:14px;color:var(--tds-graphite)} .form__status.is-ok{color:var(--tds-green-500);font-weight:var(--fw-bold)} .form__status.is-err{color:var(--tds-orange-700)} .form__status a{text-decoration:underline;text-underline-offset:.18em} .form .btn:disabled{opacity:.6;cursor:wait} .form__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} @media (max-width:1000px){.contact__card{grid-template-columns:1fr}} @media (max-width:560px){.field--half{grid-column:span 2}.contact__agent{grid-template-columns:1fr}} /* ========================================================================== 13 FOOTER ========================================================================== */ .footer{background:var(--tds-offblack);color:#fff;padding:clamp(64px,8vw,112px) 0 28px} .footer__top{display:grid;grid-template-columns:1.5fr 1fr 1.25fr .8fr;column-gap:clamp(24px,3vw,48px);row-gap:48px} .footer__logo{grid-column:auto} .footer__logo svg{width:min(360px,100%);height:auto;color:#fff} .footer__col{font-size:15px;line-height:1.55} .nw{white-space:nowrap} .footer__col .eyebrow{font-size:11px;margin-bottom:16px;color:rgba(255,255,255,.6)} .footer__col address{font-style:normal} .footer__col a:hover{text-decoration:underline;text-underline-offset:.18em} .footer__col ul{display:flex;flex-direction:column;gap:6px} .footer__bottom{margin-top:clamp(56px,7vw,96px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.56)} .footer__bottom svg{height:16px;width:auto} @media (max-width:1000px){ .footer__top{grid-template-columns:1fr 1fr} .footer__logo{grid-column:1/-1} } @media (max-width:560px){.footer__top{grid-template-columns:1fr}} /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1;transform:none;transition:none} .hero__title .w>span{transform:none;transition:none} .hero__lead .w{opacity:1} .hero__actions{opacity:1;transform:none;transition:none} } /* ---------- Logo usage (inline sprite from the DS bundle) ---------- */ .navmark{--nm-1:var(--tds-orange-500);--nm-2:var(--tds-blue-500);--nm-3:var(--tds-green-700);color:var(--tds-offblack);height:22px;width:auto;aspect-ratio:280.273/43.165} .navmark--inv{color:var(--tds-white);--nm-1:var(--tds-orange-500);--nm-2:var(--tds-blue-500);--nm-3:var(--tds-green-500)} .footer__bottom .navmark{height:16px} .picto{height:28px;width:auto;aspect-ratio:910.065/147.883} svg.b{--bm-ink:var(--tds-offblack);aspect-ratio:328/427;width:auto} .logo-b-orange{--bm-fill:var(--tds-orange-500)} .logo-b-blue{--bm-fill:var(--tds-blue-500)} .logo-b-green{--bm-fill:var(--tds-green-700)} svg.word{color:var(--tds-offblack);height:18px;width:auto} .logo-wort-orange{aspect-ratio:502/72}.logo-wort-blue{aspect-ratio:317/71}.logo-wort-green{aspect-ratio:402/71} .footer__logo svg{aspect-ratio:1209.669/542.06} /* ========================================================================== v2 — shared helpers ========================================================================== */ .minihead{font-size:clamp(16px,1.2vw,18px);font-weight:var(--fw-bold);letter-spacing:-.015em;line-height:1.3} .split-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:28px} .split-head__l{grid-column:1/6;display:flex;flex-direction:column;gap:22px} .split-head__r{grid-column:7/-1} .split-head__r--end{align-self:end} @media (max-width:900px){.split-head__l,.split-head__r{grid-column:1/-1}} /* White pixel clusters — the brand square used as a free graphic element */ .pxc{position:absolute;width:14px;height:14px;background:#fff;pointer-events:none; box-shadow:14px 0 0 #fff,28px -14px 0 #fff,0 14px 0 rgba(255,255,255,.75),42px 14px 0 #fff,-28px 28px 0 rgba(255,255,255,.9), 56px 42px 0 rgba(255,255,255,.6),14px 56px 0 #fff,-14px 70px 0 rgba(255,255,255,.45),70px -28px 0 rgba(255,255,255,.8),98px 28px 0 rgba(255,255,255,.5)} /* Pixel dissolve band (drawn by JS): data-px="up" solid at the bottom, "down" solid at the top */ .px-band{position:absolute;left:0;right:0;height:16vh;min-height:90px;pointer-events:none;z-index:4;width:100%} .px-band[data-px=up]{bottom:-1px} .px-band[data-px=down]{top:-1px} /* ========================================================================== 02 WILLKOMMEN — three pinned pages, text & shapes revealed on scroll (after belgradearbor.rs) ========================================================================== */ .story{position:relative;height:calc(var(--pages,3) * 140vh + 40vh);background:var(--tds-green-900);color:var(--tds-offwhite)} .story__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden} .story__page{ position:absolute;inset:0;padding:calc(var(--nav-h) + 56px) var(--gutter) 110px; display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center; max-width:var(--maxw);margin:0 auto; visibility:hidden;opacity:0;transition:opacity .45s linear,visibility 0s linear .45s; } .story__page.is-on{visibility:visible;opacity:1;transition:opacity .45s linear} .story__page--a .story__text{grid-column:1/7} .story__page--a .story__media{grid-column:7/-1} .story__page--b .story__media{grid-column:1/7} .story__page--b .story__text{grid-column:8/-1} .story__media{position:relative;height:min(74vh,720px)} .story__title{font-size:clamp(34px,4.3vw,70px);font-weight:var(--fw-extrabold);line-height:.98;letter-spacing:-.045em;color:#fff} .story__lead{margin-top:clamp(24px,3vw,40px);max-width:36ch;font-size:clamp(18px,1.5vw,22px);font-weight:var(--fw-medium);line-height:1.4;letter-spacing:-.02em} .story__body{font-size:clamp(20px,1.85vw,30px);font-weight:var(--fw-regular);line-height:1.28;letter-spacing:-.025em;color:#fff;max-width:26ch} .story__page--c{align-content:center;row-gap:clamp(40px,6vh,72px)} .story__statement{grid-column:1/-1;font-size:clamp(28px,3.6vw,60px);font-weight:var(--fw-extrabold);line-height:.98;letter-spacing:-.045em;color:#fff;max-width:20ch} .story__aside{grid-column:7/12;display:flex;flex-direction:column;gap:24px;font-size:clamp(16px,1.2vw,18px);line-height:1.5} /* Line reveal (belgradearbor.rs): each line comes out of blur, staggered, when its page becomes active */ [data-reveal] .ln{display:block;opacity:0;filter:blur(10px);transform:translateY(.35em); transition:opacity .35s linear,filter .35s linear,transform .35s linear} .story__page.is-on [data-reveal] .ln{opacity:1;filter:none;transform:none; transition:opacity 1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0) * 110ms + 200ms)} .story__lead{--d:.35s} .story__aside p{--d:.5s} .shape{position:absolute;overflow:hidden;will-change:clip-path,transform,filter; opacity:0;filter:blur(18px);transform:scale(1.05); transition:opacity .4s linear,filter .4s linear,transform .4s linear} .story__page.is-on .shape{opacity:1;filter:none;transform:none; transition:opacity 1.1s var(--ease),filter 1.4s var(--ease),transform 1.6s var(--ease)} .story__page.is-on .shape--a2,.story__page.is-on .shape--b2{transition-delay:.25s} .shape .ph,.shape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .shape img{transform:scale(1.12) translateY(var(--py,0px));transition:transform .2s linear} .shape--a1{right:0;top:0;width:66%;height:82%} .shape--a2{left:0;bottom:0;width:42%;height:46%} .shape--b1{left:0;top:2%;width:62%;height:76%} .shape--b2{right:0;bottom:0;width:42%;height:50%} .story .pxc{opacity:0;transition:opacity .6s linear .2s} .story__page.is-on .pxc{opacity:1} .pxc--a{left:30%;top:6%} .pxc--b{right:12%;top:8%} .pxc--c{right:10%;top:18%;transform:scale(1.6);transform-origin:top right} .story__progress{position:absolute;left:var(--gutter);bottom:40px;display:flex;align-items:center;gap:16px;font-size:12px;font-weight:var(--fw-bold);letter-spacing:.08em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums} .story__progress i{display:block;width:220px;height:1px;background:rgba(255,255,255,.22);position:relative} .story__progress i::after{content:"";position:absolute;left:0;top:0;height:1px;width:calc(var(--p,0) * 100%);background:var(--tds-orange-500)} @media (max-width:900px), (max-height:560px){ .story{height:auto} .story__sticky{position:relative;height:auto;overflow:visible} .story__page{position:relative;inset:auto;visibility:visible;opacity:1;padding:72px var(--gutter);row-gap:40px} .story__page .story__text,.story__page .story__media,.story__aside,.story__statement{grid-column:1/-1} .story__page--b .story__media{order:2} .story__media{height:92vw;max-height:560px} .story__progress{display:none} .shape{clip-path:none!important} .pxc--c{display:none} } /* ========================================================================== 05 MIKROLAGE — list + perspective map (belgradearbor.rs "What's around") ========================================================================== */ .around{background:var(--tds-offwhite);overflow:hidden} .around__body{ margin-top:clamp(40px,5vw,72px); display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(24px,3vw,48px);align-items:center; padding-left:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter))); } .around__list{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1} .places{border-bottom:1px solid var(--border-hairline)} .place{display:flex;flex-direction:column;gap:2px;padding:12px 0;cursor:default} .place__name{font-size:clamp(26px,2.9vw,46px);font-weight:var(--fw-medium);letter-spacing:-.04em;line-height:1.08;color:var(--tds-offblack);transition:color var(--dur-ui) linear} .place__meta{font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums} .place__meta::before{content:"";width:var(--pixel-s);height:var(--pixel-s);background:var(--tds-grey-300);transition:background var(--dur-ui) linear} .places .place .place__name{color:#A3A29D} .places .place.is-active .place__name{color:var(--tds-offblack)} .place.is-active .place__meta::before{background:var(--tds-orange-500)} .around__map{position:relative;margin-right:0} .around__map svg{width:100%;height:auto; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%),linear-gradient(to bottom,transparent 0,#000 18%); -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 16%),linear-gradient(to bottom,transparent 0,#000 18%);mask-composite:intersect} .pmap .pin{transition:opacity var(--dur-ui) linear} .pmap .pin rect.dot{transition:fill var(--dur-ui) linear} .pmap .pin.is-active rect.dot{fill:var(--tds-orange-500)} .pmap .pin.is-active text:first-of-type{font-weight:800} @media (max-width:900px){ .around__body{grid-template-columns:1fr;padding-right:var(--gutter)} .around__map{margin:0 calc(var(--gutter) * -1)} } /* ========================================================================== 06 ENSEMBLE — three house fields ========================================================================== */ .houses{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,7vw,104px)} .house{ --accent:var(--tds-orange-500);--field:var(--tds-orange-100);--ink:var(--tds-offblack); position:relative;overflow:hidden;min-height:clamp(440px,48vw,640px); padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:40px; background:var(--field);color:var(--tds-offblack);transition:background .35s linear,color .35s linear; } .house[data-house=blue]{--accent:var(--tds-blue-500);--field:var(--tds-blue-200);--ink:#fff} .house[data-house=green]{--accent:var(--tds-green-700);--field:var(--tds-green-100);--ink:#fff} .house__mark svg.b{height:clamp(150px,17vw,250px);transition:transform .5s var(--ease)} .house__foot{display:flex;flex-direction:column;gap:16px;max-width:40ch} .house__foot svg.word{height:22px;transition:color .35s linear} .house__foot p{color:inherit;opacity:.85} .house .pxc{right:24%;top:20%;opacity:.0;transition:opacity .35s linear} .house:hover{background:var(--accent);color:var(--ink)} .house:hover svg.b{--bm-fill:#fff;--bm-ink:var(--ink);transform:translateY(-6px)} .house[data-house=orange]:hover svg.b{--bm-ink:var(--tds-offblack)} .house:hover svg.word{color:var(--ink)} .house:hover .pxc{opacity:1} .ensemble__cta{margin-top:clamp(40px,5vw,64px);display:flex;justify-content:center} @media (max-width:900px){.houses{grid-template-columns:1fr}.house{min-height:420px}} /* ========================================================================== 09 VERFÜGBARE FLÄCHEN — full-bleed aerial, hover a building ========================================================================== */ .estate{position:relative;aspect-ratio:2000/1125;margin-top:clamp(56px,7vw,96px);overflow:hidden;background:var(--tds-green-900)} .estate__base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .estate__stage{position:absolute;inset:0} .estate__tint{position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--tint,transparent);opacity:0;transition:opacity .35s linear,background .35s linear} .estate.is-active .estate__tint{opacity:0} .estate[data-active=orange]{--tint:var(--tds-orange-500)} .estate[data-active=blue]{--tint:var(--tds-blue-500)} .estate[data-active=green]{--tint:var(--tds-green-700)} /* each building: the aerial clipped to the building contour (hit area = contour) */ .bldg{position:absolute;inset:0;z-index:2;border:0;padding:0;margin:0;background:none;cursor:pointer; transition:transform .6s var(--ease)} .bldg img{width:100%;height:100%;object-fit:cover;display:block} .bldg.is-on{z-index:4;transform:scale(1.12);filter:drop-shadow(0 0 0 #fff)} .bldg:focus-visible{outline:none} .bldg__tag{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 22px));display:flex;align-items:center;gap:8px; background:#fff;color:var(--tds-offblack);padding:8px 12px;font-size:13px;font-weight:var(--fw-extrabold);letter-spacing:.02em;white-space:nowrap;pointer-events:none; transition:transform .6s var(--ease),opacity .3s linear} .bldg__tag i{width:8px;height:8px;background:var(--hc)} .bldg__tag small{font-size:12px;font-weight:var(--fw-medium);color:var(--text-secondary);letter-spacing:0;padding-left:8px;border-left:1px solid var(--border-hairline)} .bldg__tag::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:22px;background:#fff} .bldg__tag[data-house=orange],.estate__pick[data-house=orange]{--hc:var(--tds-orange-500)} .bldg__tag[data-house=blue],.estate__pick[data-house=blue]{--hc:var(--tds-blue-500)} .bldg__tag[data-house=green],.estate__pick[data-house=green]{--hc:var(--tds-green-500)} .estate.is-active .bldg__tag{opacity:0} .estate__hint{position:absolute;z-index:3;right:var(--gutter);bottom:22px;color:#fff;font-size:13px;font-weight:var(--fw-bold);display:flex;align-items:center;gap:10px;transition:opacity .3s linear} .estate__hint::before{content:"";width:8px;height:8px;background:#fff} .estate.is-active .estate__hint{opacity:0} .ecard{ position:absolute;z-index:6;width:min(360px,30%); background:#fff;color:var(--tds-offblack);padding:22px 22px 20px;border-top:8px solid var(--house-c,var(--tds-offblack)); display:flex;flex-direction:column;gap:14px; opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .25s linear,transform .35s var(--ease),visibility 0s linear .25s; } .ecard[data-house=orange]{--house-c:var(--tds-orange-500)} .ecard[data-house=blue]{--house-c:var(--tds-blue-500)} .ecard[data-house=green]{--house-c:var(--tds-green-700)} .ecard.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s linear,transform .35s var(--ease)} .ecard__intro{display:flex;flex-direction:column;gap:12px} .ecard svg.word{height:22px;align-self:flex-start} .ecard p{font-size:15px;line-height:1.5;color:var(--tds-graphite)} .ecard__figs{display:grid;grid-template-columns:1fr 1fr} .ecard__figs:has(> :only-child){grid-template-columns:1fr} .ecard__figs div{padding:4px 0} .ecard__figs div+div{padding-left:18px;border-left:1px solid var(--border-hairline)} .ecard__figs b{display:block;white-space:nowrap;font-size:clamp(24px,2.2vw,34px);font-weight:var(--fw-extrabold);letter-spacing:-.04em;line-height:1} .ecard__figs span{font-size:13px;color:var(--text-secondary)} .ecard__note{font-size:11px!important;line-height:1.45!important;color:var(--text-secondary)!important;padding-top:14px;border-top:1px solid var(--border-hairline)} .estate__note{margin-top:20px;max-width:90ch} .estate .px-band{z-index:4} @media (max-width:900px){ .estate{aspect-ratio:auto;overflow:visible;background:none} .estate__stage{position:relative;aspect-ratio:2000/1125;overflow:hidden} .bldg__tag{width:30px;height:34px}.bldg__tag svg{height:21px} .bldg__tag.is-on{transform:translate(-50%,calc(-100% - 20px))} .bldg__status{display:none} .ecard{position:relative;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:auto;margin:12px var(--gutter) 0;padding:18px;display:none} .ecard.is-open{display:flex} .estate__hint{position:relative;right:auto;bottom:auto;color:var(--tds-offblack);margin:12px var(--gutter) 0} .estate__hint::before{background:var(--tds-offblack)} .estate .px-band{display:none} } /* ========================================================================== 10 IMPRESSIONEN — gallery ========================================================================== */ .above .px-band{z-index:3} .gallery__lead{max-width:36ch} .gallery{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,16px)} .gallery__item{text-align:left;aspect-ratio:1/1;border:0;padding:0;cursor:zoom-in;overflow:hidden;background:none;position:relative} .gallery__item .ph{transition:transform .6s var(--ease)} .gallery__item:hover .ph{transform:scale(1.04)} @media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}} .footer__label{font-size:13px;font-weight:var(--fw-bold);color:rgba(255,255,255,.5);margin-bottom:14px} .cta .px-band{z-index:2} .link--light{color:#fff} /* v3 — photos */ .cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* camera pan: the image is wider than the viewport and travels left → right with scroll */ .above__img{position:absolute;left:0;top:0;height:150%;width:auto;max-width:none;will-change:transform;transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(var(--pan-s,1));transform-origin:0 50%} .above__stage::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.16);z-index:1;pointer-events:none} .above__title{z-index:2} .gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .gallery__item:hover img{transform:scale(1.04)} .lightbox__frame img{width:100%;height:100%;object-fit:contain} .house__status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--fw-bold);align-self:flex-start;padding:6px 10px;background:var(--tds-offblack);color:#fff} .contact__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media (prefers-reduced-motion:reduce){ .above{height:auto} .above__stage{position:relative;height:clamp(420px,80vh,700px)} .above__img{width:100%;height:100%;top:0;object-fit:cover;transform:none} } /* Lage — movable map + place photos */ .around__map{perspective:1400px} .around__map svg{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0);transform-origin:60% 60%;will-change:transform} .pmap .pin{cursor:pointer} .place-pop{position:absolute;z-index:3;width:220px;background:#fff;padding:6px 6px 10px;pointer-events:none; opacity:0;transform:translate(-50%,calc(-100% - 14px)) scale(.94);transform-origin:50% 100%; transition:opacity .2s linear,transform .3s var(--ease)} .place-pop.is-below{transform:translate(-50%,24px) scale(.94);transform-origin:50% 0} .place-pop.is-on{opacity:1;transform:translate(-50%,calc(-100% - 14px))} .place-pop.is-below.is-on{transform:translate(-50%,24px)} .place-pop.is-left{transform:translate(calc(-100% + 30px),calc(-100% - 14px)) scale(.94);transform-origin:100% 100%} .place-pop.is-left.is-on{transform:translate(calc(-100% + 30px),calc(-100% - 14px))} .place-pop.is-left.is-below{transform:translate(calc(-100% + 30px),24px) scale(.94)} .place-pop.is-left.is-below.is-on{transform:translate(calc(-100% + 30px),24px)} .place-pop__img{aspect-ratio:4/3;overflow:hidden;position:relative} .place-pop__img img{width:100%;height:100%;object-fit:cover} .place-pop__img .ph{position:absolute;inset:0;min-height:0} .place-pop__img .ph::after{font-size:9px;left:8px;bottom:6px} .place-pop p{font-size:13px;font-weight:var(--fw-bold);margin:8px 4px 0;line-height:1.3} .place-pop p span{display:block;font-weight:400;color:var(--text-secondary);font-size:12px} /* v5 — Gebäudeauswahl: dark stage, drawn contours, selector bar */ .estate{background:var(--tds-offblack)} .estate__base{filter:saturate(.85) brightness(.92)} .estate__stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(29,29,27,0) 55%,rgba(29,29,27,.55) 100%)} .estate__lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;transition:opacity .3s linear} .estate__lines polygon{fill:rgba(255,255,255,.06);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke; stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s var(--ease),fill .3s linear} .estate.is-in .estate__lines polygon{stroke-dashoffset:0} .estate.is-in .estate__lines polygon:nth-child(2){transition-delay:.2s,0s} .estate.is-in .estate__lines polygon:nth-child(3){transition-delay:.4s,0s} .estate__lines polygon.is-hover{fill:rgba(255,255,255,.2)} .estate__bar{position:absolute;z-index:7;left:var(--gutter);right:var(--gutter);bottom:clamp(16px,3vh,32px); display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));background:var(--tds-offblack);color:#fff} .estate__bar .estate__hint{position:static;display:flex;align-items:center;gap:10px;padding:0 24px;margin:0;font-size:13px;font-weight:var(--fw-bold);color:rgba(255,255,255,.6);opacity:1!important} .estate__bar .estate__hint::before{content:"";width:8px;height:8px;background:#fff} .estate__pick{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i n" "i f" "i s";column-gap:12px;align-items:center;text-align:left; padding:16px 22px;border:0;border-left:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;cursor:pointer; transition:background .25s linear,color .25s linear} .estate__pick i{grid-area:i;width:10px;height:10px;background:var(--hc);align-self:start;margin-top:5px} .estate__pick span{grid-area:n;font-size:14px;font-weight:var(--fw-extrabold);letter-spacing:.02em} .estate__pick b{grid-area:f;font-size:clamp(18px,1.6vw,24px);font-weight:var(--fw-extrabold);letter-spacing:-.03em;line-height:1.2} .estate__pick small{grid-area:s;font-size:12px;color:rgba(255,255,255,.6)} .estate__pick:hover,.estate__pick.is-on{background:var(--hc)} .estate__pick[data-house=orange]:hover,.estate__pick[data-house=orange].is-on{color:var(--tds-offblack)} .estate__pick[data-house=orange]:hover small,.estate__pick[data-house=orange].is-on small{color:rgba(29,29,27,.7)} .estate__pick:hover i,.estate__pick.is-on i{background:#fff} .estate__pick:hover small,.estate__pick.is-on small{color:rgba(255,255,255,.8)} @media (max-width:900px){ .estate{background:none} .estate__bar{position:relative;left:auto;right:auto;bottom:auto;margin:0;grid-template-columns:1fr} .estate__bar .estate__hint{padding:14px var(--gutter) 6px} .estate__pick{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:14px var(--gutter)} .bldg__tag{padding:4px 7px;font-size:10px;transform:translate(-50%,calc(-100% - 12px))} .bldg__tag small{display:none} .bldg__tag::after{height:12px} } /* v5 — Vogelperspektive (belgradearbor.rs "View from above") */ .above__world{position:absolute;left:0;top:0;height:150%;will-change:transform; transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(var(--pan-s,1));transform-origin:0 0} .above__world .above__img{position:static;display:block;height:100%;width:auto;max-width:none;transform:none} .roof{position:absolute;transform:translate(-50%,-50%);width:clamp(76px,8vw,120px);aspect-ratio:1;background:#fff;display:grid;place-items:center;pointer-events:none} .roof svg.b{height:68%;width:auto} .above__clouds{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none} .above__title{will-change:opacity,transform} @media (prefers-reduced-motion:reduce){ .above__world{inset:0;height:100%;width:100%;transform:none} .above__world .above__img{width:100%;height:100%;object-fit:cover} .roof{display:none} } /* v6 — no colour field: the hovered building scales up with its white contour */ .estate__lines polygon{transform-box:view-box;transition:stroke-dashoffset 1.8s var(--ease),fill .3s linear,transform .6s var(--ease),opacity .3s linear} .estate.is-active .estate__lines{z-index:5} .estate.is-active .estate__lines polygon{opacity:0} .estate.is-active .estate__lines polygon.is-on{opacity:1;transform:scale(1.12);fill:none;stroke-width:3} .estate.is-active .estate__base{filter:saturate(.7) brightness(.62)} .estate__base{transition:filter .4s linear} /* v6 — info box sits above its own building, so it never covers a neighbour */ .ecard{--cw:min(600px,50vw);width:var(--cw);top:auto;right:auto; left:clamp(calc(var(--cw) / 2 + 16px),var(--cx),calc(100% - var(--cw) / 2 - 16px));bottom:calc(100% - var(--bt)); display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"intro figs" "intro btn" "note note"; gap:12px 24px;align-items:start;padding:20px 22px 16px;transform:translate(-50%,12px)} .ecard.is-open{transform:translate(-50%,0)} .ecard__intro{grid-area:intro;gap:8px} .ecard__intro p{font-size:14px;line-height:1.45} .ecard__figs{grid-area:figs;border-top:0} .ecard__figs div{padding:0 0 10px} .ecard__figs b{font-size:clamp(20px,1.7vw,26px)} .ecard .btn{grid-area:btn;align-self:end;width:100%;justify-content:center;white-space:normal;text-align:center} .ecard__note{grid-area:note;padding-top:10px} .ecard[data-house=blue]{grid-template-areas:"intro figs" "intro figs"} @media (max-width:900px){ .ecard{bottom:auto!important;transform:none!important;display:none;grid-template-columns:1fr;grid-template-areas:"intro" "figs" "btn" "note"} .ecard.is-open{display:grid} .ecard[data-house=blue]{grid-template-areas:"intro" "figs"} } /* v7 — selected building stays bright, all others are dimmed; no selector bar */ .bldg img{transition:filter .4s linear} .estate.is-active .bldg:not(.is-on) img{filter:saturate(.7) brightness(.62)} .estate .estate__hint{display:none} @media (hover:none){.estate .estate__hint{display:flex;position:relative;right:auto;bottom:auto;color:var(--tds-offblack);margin:12px var(--gutter) 0}} .bento .media img{width:100%;height:100%;object-fit:cover} /* v8 */ .hero__skyfill{position:absolute;inset:0;background:#CFE3EC} .hero__building img{display:block;width:100%;height:auto} .gallery{grid-template-columns:repeat(3,1fr)} @media (max-width:640px){.gallery{grid-template-columns:1fr}} .gallery__item{aspect-ratio:4/3} .place-pop.is-text{width:auto;padding:10px 12px} .place-pop.is-text p{margin:0;white-space:nowrap} /* v9 — hero after findrealestate.com: city (sky removed) rises, the logo appears and keeps the image */ .hero{height:340vh;height:340svh} .hero__building{width:100vw;left:0;transform:translate(0,var(--b-y,62%));opacity:var(--b-o,1)} .hero__building img{width:100%;height:auto} .hero__logo{position:absolute;z-index:4;left:50%;top:52%;width:min(820px,74vw);aspect-ratio:1209.669/542.06; transform:translate(-50%,-50%) scale(var(--l-s,1.08));opacity:var(--l-o,0);pointer-events:none} .hero__logo-line{width:100%;height:100%;color:transparent;stroke:#fff;stroke-width:2.2;overflow:visible} .hero__logo-fill{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--f-o,0); background-image:url("../img/hero-ensemble-ohne-himmel.webp");background-repeat:no-repeat; -webkit-mask:url("../logos/tds-wordmark.svg") no-repeat;mask:url("../logos/tds-wordmark.svg") no-repeat; -webkit-mask-size:min(820px,74vw) auto;mask-size:min(820px,74vw) auto; -webkit-mask-position:50% 52%;mask-position:50% 52%} @media (max-width:700px){ .hero{height:280vh;height:280svh} .hero__building{width:180vw;left:-40vw} .hero__logo{width:88vw} .hero__logo-fill{-webkit-mask-size:88vw auto;mask-size:88vw auto} } @media (prefers-reduced-motion:reduce){.hero{height:100vh}.hero__logo,.hero__logo-fill{display:none}} .gallery{grid-template-columns:repeat(4,1fr)} .gallery__item:first-child{grid-column:span 2;aspect-ratio:auto} @media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery__item:first-child{grid-column:span 2;aspect-ratio:16/9}} /* v10 — hero ends in a white pixel wipe; the story continues on white */ .hero{height:380vh;height:380svh} .hero__pixels{top:0;height:auto;z-index:5} .story{background:var(--tds-white);color:var(--tds-offblack)} .story__title,.story__body,.story__statement{color:var(--text-strong)} .story__progress{color:rgba(29,29,27,.55)} .story__progress i{background:rgba(29,29,27,.14)} .story .pxc{filter:invert(.89)} /* v10 — house B. filled with the element image (Feuer / Wasser / Erde), DS SubBrandMark "fill=image" */ .bimg{position:relative;height:clamp(150px,17vw,250px);aspect-ratio:328/427} .bimg__fill{position:absolute;left:0;top:0;width:100%;height:calc(100% * 317 / 427); background:var(--hc) var(--img,none) center/cover no-repeat; -webkit-mask:url("../logos/b-mask.svg") 0 0/100% 100% no-repeat;mask:url("../logos/b-mask.svg") 0 0/100% 100% no-repeat; transition:transform .5s var(--ease)} .bimg svg.bimg__ink{position:absolute;inset:0;width:100%;height:100%;--bm-fill:transparent;--bm-ink:var(--tds-offblack)} .bimg[data-house=orange]{--hc:var(--tds-orange-500)} .bimg[data-house=blue]{--hc:var(--tds-blue-500)} .bimg[data-house=green]{--hc:var(--tds-green-700)} .house:hover .bimg svg.bimg__ink{--bm-ink:var(--tds-white)} .house[data-house=orange]:hover .bimg svg.bimg__ink{--bm-ink:var(--tds-offblack)} .house:hover .bimg{transform:translateY(-6px)} .bimg{transition:transform .5s var(--ease)} /* ========================================================================== 08 AUSSTATTUNG — split section: headline + accordion (≈40 %) | image + info card (≈60 %) ========================================================================== */ .values{background:var(--tds-offwhite)} .values__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(32px,4vw,64px);align-items:stretch} .values__l{display:flex;flex-direction:column} .values__head{display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding-top:24px;border-top:1px solid var(--border-hairline);margin-bottom:40px} .values__head .h2{font-size:clamp(28px,3.2vw,46px)} .values__sub{font-size:16px;line-height:1.5;color:var(--tds-graphite);max-width:36ch} .vacc{border-bottom:1px solid var(--border-hairline)} .vacc__item{border-top:1px solid var(--border-hairline)} .vacc__btn{display:flex;align-items:center;gap:12px;width:100%;padding:16px 0;border:0;background:none;text-align:left;cursor:pointer; font-size:15px;font-weight:var(--fw-bold);letter-spacing:-.01em;color:#9A9993;transition:color .3s linear} .vacc__btn::before{content:"";width:var(--pixel-s);height:var(--pixel-s);background:var(--tds-grey-300);flex:none;transition:background .3s linear} .vacc__btn:hover{color:var(--tds-graphite)} .vacc__item.is-on .vacc__btn{color:var(--tds-offblack)} .vacc__item.is-on .vacc__btn::before{background:var(--tds-orange-500)} .vacc__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s ease,opacity .3s ease} .vacc__panel>p{overflow:hidden;font-size:14px;line-height:1.6;color:var(--tds-graphite);padding-left:calc(var(--pixel-s) + 12px);max-width:46ch} .vacc__item.is-on .vacc__panel{grid-template-rows:1fr;opacity:1} .vacc__item.is-on .vacc__panel>p{padding-bottom:18px} .vmedia{position:relative;overflow:hidden;min-height:540px;background:var(--tds-graphite)} .vmedia__layer{position:absolute;inset:0;opacity:0;transition:opacity .3s ease} .vmedia__layer.is-on{opacity:1} .vmedia__layer img{width:100%;height:100%;object-fit:cover} .vmedia .px-band{z-index:2} @media (max-width:991px){ .values__grid{grid-template-columns:1fr} .vmedia{min-height:0;aspect-ratio:4/3;order:-1} } @media (max-width:767px){.vmedia{aspect-ratio:1/1}} /* v13 — Fakten: two rows that travel across the screen while scrolling (top → right, bottom → left) */ .facts{overflow:hidden;padding-block:clamp(96px,12vw,180px)} .facts__row{display:flex;justify-content:center;gap:clamp(48px,7vw,120px);margin:0;will-change:transform; transform:translate3d(var(--fx,0px),0,0)} .facts__row+.facts__row{margin-top:clamp(56px,7vw,96px)} .facts .fact{display:flex;flex-direction:column;align-items:center;gap:18px;padding:0;border:0;text-align:center;flex:none} .facts .fact dd{order:1;justify-content:center;font-size:clamp(48px,6.4vw,104px);font-weight:var(--fw-medium);letter-spacing:-.05em;line-height:.95;white-space:nowrap} .facts .fact dt{order:2;padding-top:0;font-size:12px;font-weight:var(--fw-bold);letter-spacing:.16em;color:rgba(255,255,255,.8);white-space:nowrap} .facts .fact dd small,.facts .fact dd .pre{font-weight:var(--fw-medium)} .facts .facts__foot{justify-content:center;margin-top:clamp(64px,8vw,112px)} @media (max-width:767px){.facts .fact dd{font-size:52px}.facts .fact dt{font-size:10px;letter-spacing:.12em}} @media (prefers-reduced-motion:reduce){.facts__row{flex-wrap:wrap;transform:none}} /* v13 — B. element images (Feuer / Wasser / Erde) */ .bimg{height:clamp(150px,17vw,250px);aspect-ratio:900/873} .bimg img{width:100%;height:100%;object-fit:contain;display:block} /* v13 — popups with floor stacks */ .ecard{--cw:min(760px,60vw);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;grid-template-areas:"intro figs floors" "intro btn floors" "note note note"} .ecard[data-house=blue]{grid-template-areas:"intro figs floors" "intro figs floors"} .ecard__floors{grid-area:floors;display:flex;flex-direction:column;gap:6px;align-self:stretch} .ecard__fl{font-size:11px;font-weight:var(--fw-bold);color:var(--text-secondary)} .fstack{display:flex;flex-direction:column;gap:3px;width:96px} .fstack__f{display:block;height:17px;border:0;padding:0 8px;background:var(--house-c);color:#fff;font-size:10px;font-weight:var(--fw-bold);text-align:left;cursor:pointer; transition:transform .2s var(--ease),filter .2s linear;line-height:17px} .ecard[data-house=orange] .fstack__f{color:var(--tds-offblack)} .fstack__f:hover{transform:translateX(6px);filter:brightness(1.12)} .fstack.is-let .fstack__f{background:var(--tds-blue-200);color:var(--tds-blue-700);cursor:default} .fstack.is-let .fstack__f:hover{transform:none;filter:none} @media (max-width:900px){ .ecard,.ecard[data-house=blue]{grid-template-columns:1fr auto;grid-template-areas:"intro floors" "figs floors" "btn btn" "note note"} } /* v13 — Grundrisse: plan on the colour field of the chosen building */ .plans{--field:var(--tds-orange-500);--tint:var(--tds-orange-100);--ink:var(--tds-offblack); background:var(--tint);padding-block:var(--section-y);transition:background .5s linear} .plans[data-house=green]{--field:var(--tds-green-700);--tint:var(--tds-green-100);--ink:#fff} .plans__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:stretch} .plans__info{display:flex;flex-direction:column;gap:22px;align-items:flex-start} .plans__houses{display:flex;gap:0;border:1px solid var(--tds-offblack)} .plans__house{border:0;background:transparent;padding:12px 18px;font-size:14px;font-weight:var(--fw-extrabold);letter-spacing:.02em;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .25s linear,color .25s linear} .plans__house::before{content:"";width:8px;height:8px;background:var(--hc)} .plans__house[data-house=orange]{--hc:var(--tds-orange-500)} .plans__house[data-house=green]{--hc:var(--tds-green-700)} .plans__house.is-on{background:var(--tds-offblack);color:#fff} .plans__text{display:flex;flex-direction:column;gap:16px} .plans__text p{font-size:15px;line-height:1.55;color:var(--tds-graphite);max-width:44ch} .plans__figs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(29,29,27,.18);border-bottom:1px solid rgba(29,29,27,.18)} .plans__figs div{padding:14px 0}.plans__figs div+div{padding-left:18px;border-left:1px solid rgba(29,29,27,.18)} .plans__figs b{display:block;font-size:clamp(24px,2.2vw,32px);font-weight:var(--fw-extrabold);letter-spacing:-.04em;line-height:1} .plans__figs span{font-size:13px;color:var(--text-secondary)} .plans__note{font-size:12px;line-height:1.45;color:var(--text-secondary);max-width:46ch} .plans__badge{position:absolute;left:20px;top:16px;font-size:13px;font-weight:var(--fw-bold);color:var(--ink)} @media (max-width:991px){.plans__grid{grid-template-columns:1fr}.plans__stage{min-height:0;order:-1}} .plans__text[hidden]{display:none} /* popups sit in the sky band above the buildings */ .ecard{top:clamp(12px,2vw,24px);bottom:auto} @media (max-width:900px){.ecard{top:auto}} /* v14 — hero: logo becomes solid white, then white pixels take over the whole image */ .hero{height:300vh;height:300svh} .hero__logo-fill{background:#fff;background-image:none} @media (max-width:700px){.hero{height:260vh;height:260svh}} /* hero image always taller than the stage, so the sky never shows below or above it */ .hero__building{width:max(100vw,205vh);width:max(100vw,205svh);left:50%;transform:translate(-50%,var(--b-y,62%))} @media (max-width:700px){.hero__building{width:max(100vw,205svh);left:50%}} /* ---------- v15: Grundrisse = Musterbelegung of the client, layered per Bauteil ---------- */ .plans__parts{display:flex;flex-wrap:wrap;gap:6px} .plans__part{border:1px solid rgba(29,29,27,.25);background:transparent;padding:9px 12px;font-size:13px;font-weight:var(--fw-bold);cursor:pointer;transition:background .2s linear,color .2s linear,border-color .2s linear} .plans__part:hover{border-color:var(--tds-offblack)} .plans__part.is-on{background:var(--field);border-color:var(--field);color:var(--ink)} .plans__stage{position:relative;background:var(--field);display:grid;place-items:center;padding:clamp(52px,5vw,72px) clamp(20px,3vw,48px) clamp(24px,3vw,40px);transition:background .5s linear;overflow:hidden} .plans__plan{grid-area:1/1;position:relative;width:min(100%,calc(min(100vh - 330px,760px) * .84));opacity:0;transform:translateY(14px);transition:opacity .35s linear,transform .5s var(--ease);pointer-events:none} .plans__plan.is-on{opacity:1;transform:none;pointer-events:auto} .plans__plan img{display:block;width:100%;height:auto} .plans__layer{position:absolute;inset:0;opacity:0;transition:opacity .35s linear} .plans__base{transition:opacity .35s linear} .plans[data-part=a] .plans__base,.plans[data-part=b] .plans__base,.plans[data-part=c] .plans__base{opacity:.22} .plans[data-part=a] .plans__layer[data-part=a],.plans[data-part=b] .plans__layer[data-part=b],.plans[data-part=c] .plans__layer[data-part=c]{opacity:1} .plans__pin{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:0;background:var(--tds-offblack);color:#fff;font-size:14px;font-weight:var(--fw-extrabold);cursor:pointer;transition:background .2s linear,color .2s linear,transform .3s var(--ease)} .plans__pin:hover{transform:scale(1.12)} .plans[data-part=a] .plans__pin[data-part=a],.plans[data-part=b] .plans__pin[data-part=b],.plans[data-part=c] .plans__pin[data-part=c]{background:#fff;color:var(--tds-offblack)} .plans__zoom{position:absolute;right:20px;top:12px;z-index:2;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:7px 12px;font-size:13px;font-weight:var(--fw-bold);cursor:pointer;transition:background .2s linear,color .2s linear} .plans__zoom:hover{background:var(--ink);color:var(--field)} .plans__badge{z-index:2} .plans__plan .plans__base{cursor:zoom-in} .pzoom{position:fixed;inset:0;z-index:200;background:var(--tds-offwhite)} .pzoom[hidden]{display:none} .pzoom__scroll{position:absolute;inset:0;overflow:auto;cursor:grab;-webkit-overflow-scrolling:touch} .pzoom__scroll.is-drag{cursor:grabbing} .pzoom__scroll img{display:block;width:max(100%,1700px);max-width:none;height:auto;margin:0 auto;user-select:none;-webkit-user-drag:none} .pzoom__close{position:fixed;right:20px;top:16px;z-index:2;border:0;background:var(--tds-offblack);color:#fff;padding:12px 18px;font-size:14px;font-weight:var(--fw-bold);cursor:pointer} @media (max-width:991px){.plans__stage{order:0}.plans__plan{width:100%}.plans__pin{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:12px}} /* stacking plans in the building popups */ .stk{display:flex;flex-direction:column;gap:8px;border:0;background:none;padding:0;cursor:pointer;text-align:left;color:inherit} .stk__fig{position:relative;display:block;padding-left:40px} .stk__fig img{display:block;height:clamp(200px,19vw,250px);width:auto;transition:transform .4s var(--ease)} .stk:hover .stk__fig img{transform:translateY(-3px)} .stk__l{position:absolute;left:0;transform:translateY(-50%);font-size:10px;font-weight:var(--fw-bold);color:var(--text-secondary);white-space:nowrap} .stk__key{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text-secondary)} .stk__key span{display:flex;align-items:center;gap:6px} .stk__key i{width:10px;height:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(29,29,27,.15)} /* ---------- v16: scroll-scrubbed animations — every value follows --t (0 → 1) set from the scroll position ---------- */ [data-sx=rise]{opacity:var(--t);translate:0 calc((1 - var(--t)) * 56px)} .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em} .sw>span{display:inline-block;transform-origin:0 100%;translate:0 calc((1 - var(--t)) * 108%);rotate:calc((1 - var(--t)) * 7deg)} .sw--soft,.sw--soft>span{display:inline;overflow:visible;translate:none;rotate:none} .sw--soft>span{opacity:var(--t)} [data-sx=card]{opacity:var(--t);translate:0 calc((1 - var(--t)) * 110px);clip-path:inset(0 0 calc((1 - var(--t)) * 45%) 0)} [data-sx=photo]{clip-path:inset(calc((1 - var(--t)) * 100%) 0 0 0)} [data-sx=photo] img,[data-sx=wipe] img{scale:calc(1.35 - .35 * var(--t))} [data-sx=wipe]{clip-path:inset(0 calc((1 - var(--t)) * 100%) 0 0)} [data-sx=pop]{opacity:var(--t);scale:calc(.84 + .16 * var(--t));translate:0 calc((1 - var(--t)) * 48px)} [data-sx=slide]{opacity:var(--t);translate:calc((1 - var(--t)) * -80px) 0} .around__body{perspective:1800px} [data-sx=tilt]{transform-origin:50% 100%;opacity:calc(.15 + .85 * var(--t));rotate:x calc((1 - var(--t)) * 40deg);scale:calc(.8 + .2 * var(--t))} [data-sx=house]{opacity:calc(.2 + .8 * var(--t));translate:0 calc((1 - var(--t)) * 160px)} [data-sx=house] .bimg img{scale:calc(1.6 - .6 * var(--t));rotate:calc((1 - var(--t)) * -10deg)} [data-sx=estate] .estate__stage{clip-path:inset(calc((1 - var(--t)) * 14%) calc((1 - var(--t)) * 10%))} [data-sx=estate] .estate__lines polygon{stroke-dashoffset:calc(100 - var(--lt, 1) * 100);transition:fill .3s linear,transform .6s var(--ease),opacity .3s linear} [data-sx=estate]:not(.is-active) .bldg__tag{opacity:var(--tg, 1);translate:0 calc((1 - var(--tg, 1)) * -24px)} [data-sx=field]{clip-path:inset(calc((1 - var(--t)) * 100%) 0 0 0)} [data-sx=field] .plans__plan.is-on{translate:0 calc((1 - var(--t)) * 120px);rotate:calc((1 - var(--t)) * -6deg)} [data-sx=cta] .cta__img{scale:calc(1.3 - .3 * var(--t));translate:0 calc((var(--t) - .5) * -8%)} @media (max-width:900px){[data-sx=estate] .estate__stage{clip-path:inset(calc((1 - var(--t)) * 8%) calc((1 - var(--t)) * 6%))}} /* popups: centred horizontally on the aerial, whichever building is chosen */ .ecard{left:50%} /* hero → story: the story slides up under the finished pixel wipe (white on white), so its content arrives as soon as the image is covered — no empty stretch in between */ .hero{z-index:2;background:transparent;pointer-events:none} .hero__stage{pointer-events:auto} .story{z-index:1;margin-top:-148vh;margin-top:-148svh} @media (max-width:900px){.story{margin-top:-118vh;margin-top:-118svh}} @media (prefers-reduced-motion:reduce){.story{margin-top:0}} /* ---------- v17: compact popups centred on the viewport ---------- */ .ecard{--cw:min(640px,calc(100vw - 32px));left:50%;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"intro floors" "figs floors" "btn floors" "note floors"; grid-template-rows:auto auto auto 1fr;gap:16px 28px;align-content:start;padding:22px 24px 20px} .ecard__intro{gap:8px} .ecard__figs{align-self:start} .ecard__figs div{padding:0} .ecard .btn{align-self:start} .ecard__note{align-self:end;padding-top:12px} .ecard__floors{align-self:start;gap:8px} .stk__fig img{height:clamp(190px,16vw,220px)} .ecard[data-house=blue]{--cw:min(560px,calc(100vw - 32px));grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"intro figs";grid-template-rows:auto} @media (max-width:900px){ .ecard{grid-template-columns:1fr auto;grid-template-areas:"intro floors" "figs floors" "btn btn" "note note";grid-template-rows:auto} .ecard[data-house=blue]{grid-template-columns:1fr;grid-template-areas:"intro" "figs"} } /* ---------- v17: Grundrisse on white, framed in the house colour ---------- */ .plans__stage{background:#fff;border:clamp(8px,1vw,14px) solid var(--field);transition:border-color .5s linear} .plans__badge{color:var(--tds-offblack)} .plans__zoom{border-color:var(--tds-offblack);color:var(--tds-offblack)} .plans__zoom:hover{background:var(--tds-offblack);color:#fff} .plans[data-part=a] .plans__pin[data-part=a],.plans[data-part=b] .plans__pin[data-part=b],.plans[data-part=c] .plans__pin[data-part=c]{background:var(--field);color:var(--ink)} @media (max-width:900px){ .ecard{grid-template-columns:1fr;grid-template-areas:"intro" "figs" "floors" "btn" "note"} .ecard__floors{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:8px 20px} .ecard__fl{width:100%} .stk{flex-direction:row;align-items:flex-end;gap:20px} .stk__fig img{height:250px;max-width:none} } /* B.BLUE status may wrap — it must never run out of the box */ .ecard__figs b{white-space:normal;overflow-wrap:anywhere} .ecard[data-house=blue] .ecard__figs{min-width:0} .ecard[data-house=blue]{--cw:min(620px,calc(100vw - 32px));grid-template-columns:minmax(0,1fr) minmax(0,max-content)} .ecard[data-house=blue] .ecard__figs b{font-size:clamp(20px,1.6vw,24px);line-height:1.1} /* gallery: 7 photos fill the grid without gaps — big 2×2, four singles, two wide ones */ .gallery{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense} .gallery__item{aspect-ratio:4/3} .gallery__item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto} .gallery__item:nth-child(6),.gallery__item:nth-child(7){grid-column:span 2;aspect-ratio:8/3} @media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} .gallery__item:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/9} .gallery__item:nth-child(6),.gallery__item:nth-child(7){grid-column:auto;aspect-ratio:4/3} } @media (max-width:640px){.gallery{grid-template-columns:1fr}.gallery__item:first-child{grid-column:auto}} /* ---------- v18: facts pinned on larger screens, rows slide in slowly from the sides ---------- */ @media (min-width:768px) and (prefers-reduced-motion:no-preference){ .facts{height:230vh;padding-block:0;overflow:clip} .facts__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden} } @media (max-width:767px){ .facts__row{flex-direction:column;align-items:center;gap:44px} } /* ---------- v19: mobile fixes ---------- */ /* map popups may reach beyond the section vertically; only the horizontal bleed is clipped */ .around{overflow:visible;overflow-x:clip} .place-pop{z-index:20} .around__body{position:relative;z-index:2} @media (max-width:767px){ /* hero: compact buttons side by side instead of full-width bars */ .hero__actions{width:auto;max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px} .hero__actions .btn{width:auto;justify-content:center;padding:13px 18px;font-size:14px} } @media (max-width:900px){ /* building labels on the aerial: size to their text */ .bldg__tag{width:auto;height:auto;white-space:nowrap;padding:4px 7px;font-size:10px;gap:6px} .bldg__tag i{width:6px;height:6px} } @media (max-width:600px){ /* Grundrisse: badge and zoom button no longer collide */ .plans__stage{padding-top:64px} .plans__badge{left:14px;top:12px;right:118px;font-size:12px;line-height:1.35} .plans__zoom{right:12px;top:10px;padding:6px 10px;font-size:12px} } /* ---------- v20: mobile ---------- */ @media (max-width:700px){ .hero__content{padding-top:calc(var(--nav-h) + 15vh);padding-top:calc(var(--nav-h) + 15svh)} } @media (max-width:900px){ /* bird's-eye pan runs on phones too (pinned camera move) */ .above{height:220vh;height:220svh} } @media (max-width:767px){ /* map photo card on phones: compact landscape card in front of the map (positioned in JS) */ .place-pop.is-compact{width:min(290px,calc(100vw - 32px));display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center;padding:5px; transform:scale(.96);transform-origin:50% 50%;box-shadow:0 10px 30px -10px rgba(29,29,27,.35)} .place-pop.is-compact.is-on{transform:none} .place-pop.is-compact.is-text{grid-template-columns:1fr;padding:10px 12px} .place-pop.is-compact p{margin:0} } @media (max-width:900px){.above__world{height:104%}} /* ---------- v21: full-bleed exterior photo after the map ---------- */ .wide{position:relative;height:min(92vh,62vw);min-height:420px;overflow:hidden;background:var(--tds-offwhite)} .wide__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 80%} .wide__cap{position:absolute;z-index:5;left:var(--gutter);top:clamp(110px,18vh,180px);margin:0;color:#fff;font-size:14px;font-weight:var(--fw-medium); text-shadow:0 1px 12px rgba(0,0,0,.45)} .wide__cap span{display:block;font-size:12px;font-weight:var(--fw-bold);letter-spacing:.16em;margin-bottom:4px} .wide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(29,29,27,.3) 0%,rgba(29,29,27,0) 45%)} .wide .px-band{z-index:4} [data-sx=wide] .wide__img{transform-origin:50% 80%;scale:calc(1.22 - .22 * var(--t));translate:0 calc((var(--t) - .5) * -6%)} [data-sx=wide] .wide__cap{opacity:clamp(0, (var(--t) - .25) * 4, 1);translate:0 calc(clamp(0, .5 - var(--t), .5) * 60px)} @media (max-width:767px){.wide{height:70vh;height:70svh;min-height:0}.wide__img{object-position:50% 82%}.wide__cap{top:100px}} /* Ausstattung: hovering a point already highlights it (its image shows on the right) */ .vacc__item.is-hover .vacc__btn{color:var(--tds-offblack)} .vacc__item.is-hover .vacc__btn::before{background:var(--tds-orange-500)} /* ========================================================================== v31 — loader, smooth scrolling, hero position, logo on the exterior photo, B.BLUE tab, map with categories ========================================================================== */ /* smooth scrolling (Lenis) */ html.lenis,html.lenis body{height:auto} html.lenis{scroll-behavior:auto} .lenis.lenis-stopped{overflow:clip} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} /* loader: wordmark + a row of brand pixels, then the white surface dissolves into pixels */ html.is-loading{overflow:hidden} .loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:#fff; animation:loader-failsafe .4s linear 7s forwards} .loader__px{position:absolute;inset:0;width:100%;height:100%} .loader__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;transition:opacity .3s linear,transform .5s var(--ease)} .loader__logo{display:block;width:min(320px,64vw);height:auto;color:var(--tds-offblack)} .loader__bar{display:flex;gap:6px} .loader__bar i{width:10px;height:10px;background:#ECEAE4;transition:background .18s linear} .loader__bar i.is-on{background:var(--tds-orange-500)} .loader__bar i:nth-child(n+5).is-on{background:var(--tds-blue-500)} .loader__bar i:nth-child(n+9).is-on{background:var(--tds-green-700)} .loader.is-dissolving{background:transparent;animation:none} .loader.is-dissolving .loader__inner{opacity:0;transform:translateY(-14px)} .loader.is-out{opacity:0;transition:opacity .3s linear} @keyframes loader-failsafe{to{opacity:0;visibility:hidden}} /* hero: headline block sits lower, closer to the optical middle of the screen */ .hero__content{padding-top:calc(var(--nav-h) + clamp(64px,19vh,220px))} @media (max-width:700px){ .hero__content{padding-top:calc(var(--nav-h) + 18vh);padding-top:calc(var(--nav-h) + 18svh)} } /* exterior photo: the wordmark on the image */ .wide__logo{position:absolute;z-index:3;left:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));top:24%;width:min(500px,42vw);transform-origin:0 50%;color:#fff; filter:drop-shadow(0 2px 22px rgba(0,0,0,.35));pointer-events:none} .wide__logo svg{display:block;width:100%;height:auto} [data-sx=wide] .wide__logo{opacity:clamp(0, (var(--t) - .18) * 4, 1);translate:0 calc(clamp(0, .45 - var(--t), .45) * 90px);scale:calc(1.06 - clamp(0, var(--t) - .2, .3) * .2)} @media (max-width:767px){.wide__logo{top:24%;width:72vw}} /* Grundrisse: B.BLUE is let — a tab that cannot be chosen, with a small red note */ .plans__house[data-house=blue]{--hc:var(--tds-blue-500)} .plans__house--let{position:relative;cursor:not-allowed;color:#9A9994} .plans__house--let::before{opacity:.5} .plans__let{position:absolute;right:-6px;top:-10px;padding:3px 6px;background:#D7261E;color:#fff; font-size:10px;font-weight:var(--fw-extrabold);letter-spacing:.04em;line-height:1.2;white-space:nowrap;pointer-events:none} .plans__houses{margin-top:6px} .plans__house--let.is-nudge{animation:let-nudge .4s linear} .plans__house--let.is-nudge .plans__let{animation:let-pulse .5s var(--ease)} @keyframes let-nudge{20%{translate:-3px 0}40%{translate:3px 0}60%{translate:-2px 0}80%{translate:2px 0}} @keyframes let-pulse{40%{scale:1.15}} /* Mikrolage: category tabs */ .cats{display:grid;grid-template-columns:repeat(4,auto);gap:1px;background:var(--tds-offblack);border:1px solid var(--tds-offblack);align-self:flex-start;max-width:100%} .cat{border:0;background:var(--tds-offwhite);padding:11px 16px;font-size:14px;font-weight:var(--fw-bold);color:var(--tds-offblack);cursor:pointer;white-space:nowrap;transition:background .25s linear,color .25s linear} .cat:hover{background:#fff} .cat.is-on{background:var(--tds-offblack);color:#fff} .around__list{gap:28px} .places .place__name{font-size:clamp(24px,2.4vw,38px)} .places:not([hidden]) .place{animation:place-in .55s var(--ease) both} .places .place:nth-child(2){animation-delay:.05s}.places .place:nth-child(3){animation-delay:.1s} .places .place:nth-child(4){animation-delay:.15s}.places .place:nth-child(5){animation-delay:.2s}.places .place:nth-child(6){animation-delay:.25s} @keyframes place-in{from{opacity:0;translate:-28px 0}} @media (max-width:600px){.cats{grid-template-columns:1fr 1fr;align-self:stretch}.cat{padding:11px 10px}} /* the map: real street map (base image) + pin layer; the pair floats and follows the pointer */ .around__map svg{transform:none;-webkit-mask-image:none;mask-image:none;will-change:auto} .gmap{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0);transform-origin:60% 60%;will-change:transform; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%),linear-gradient(to bottom,transparent 0,#000 14%); -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 7%),linear-gradient(to bottom,transparent 0,#000 14%);mask-composite:intersect} .gmap__base{display:block;width:100%;height:auto} .gmap__pins{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .pmap .pin{opacity:0;pointer-events:none;transform:translateY(-14px); transition:opacity .3s linear,transform .55s var(--ease);transition-delay:calc(var(--i, 0) * 60ms)} .pmap .pin.is-shown,.pmap .pin--tds{opacity:1;pointer-events:auto;transform:none} .gmap__credit{position:absolute;right:10px;bottom:2px;z-index:2;font-size:10px;line-height:1.4;color:var(--text-secondary)} .gmap__credit a{color:inherit} /* phones: the map labels reach the bottom edge, so the credit sits below the map instead of over it */ @media (max-width:767px){.gmap__credit{position:static;margin:6px 0 0;padding:0 var(--gutter);text-align:right}} .place-pop__img em{position:absolute;left:6px;bottom:6px;padding:2px 5px;background:rgba(255,255,255,.92); font-style:normal;font-size:10px;font-weight:var(--fw-bold);color:var(--text-secondary)} /* gallery with eight photos: big 2×2 + four singles, then one wide + two singles — no gaps */ .gallery__item:nth-child(7):nth-last-child(2){grid-column:auto;aspect-ratio:4/3} @media (max-width:900px){.gallery__item:nth-child(6):nth-last-child(3){grid-column:span 2;aspect-ratio:16/9}} @media (max-width:640px){.gallery__item:nth-child(6):nth-last-child(3){grid-column:auto;aspect-ratio:4/3}} /* Mikrolage with up to ten places per tab: compact list, the map stays in view while the list scrolls */ .places .place{padding:9px 0} .places .place__name{font-size:clamp(22px,2vw,32px)} @media (min-width:901px){ .around__body{align-items:start} .around__map{position:sticky;top:calc(var(--nav-h) + 40px)} } /* ========================================================================== v34 — phones: pinned stages fill the whole screen, lighter effects while scrolling ========================================================================== */ /* pinned stages take the large viewport: when the browser bars slide away during scrolling, the stage still reaches the bottom edge and nothing of the next section shows through */ .hero__stage,.above__stage{height:100vh;height:100lvh} @media (min-width:768px) and (prefers-reduced-motion:no-preference){.facts__pin{height:100vh;height:100lvh}} /* pixel canvases stay crisp when drawn at one canvas pixel per CSS pixel (touch devices) */ .loader__px,.hero__pixels canvas,.above__clouds,canvas[data-px]{image-rendering:pixelated} @media (hover:none){ /* frosted glass re-blurs the page under the bar on every frame — a solid bar on touch devices */ .nav.is-scrolled .nav__bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(251,249,243,.97)} /* story lines and image shapes come in with fade + movement only, without animated blur */ [data-reveal] .ln,.shape{filter:none} .shape{will-change:transform,opacity} } /* ========================================================================== v37 — touch devices: reveals play as short transitions when a block comes into view (opacity + transform only, run by the compositor) instead of following every scroll frame ========================================================================== */ .sx-io [data-sx]{--t:1} .sx-io :is([data-sx=rise],[data-sx=card],[data-sx=pop],[data-sx=slide],[data-sx=house],[data-sx=photo],[data-sx=wipe],[data-sx=tilt],[data-sx=field]){ opacity:0;transform:translate3d(0,36px,0); transition:opacity .7s cubic-bezier(.33,1,.68,1) var(--d,0s),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s)} .sx-io [data-sx=slide]{transform:translate3d(-36px,0,0)} .sx-io [data-sx=pop]{transform:translate3d(0,28px,0) scale(.96)} .sx-io :is([data-sx=photo],[data-sx=wipe]) img{transform:scale(1.1);transition:transform 1.3s cubic-bezier(.16,1,.3,1) var(--d,0s)} .sx-io :is([data-sx=photo],[data-sx=wipe]).is-in img{transform:none} .sx-io .sw>span{transform:translate3d(0,108%,0);transition:transform .85s cubic-bezier(.16,1,.3,1) var(--d,0s)} .sx-io .sw--soft>span{transform:none;opacity:0;transition:opacity .7s linear var(--d,0s)} .sx-io [data-sx].is-in,.sx-io .sw>span.is-in{opacity:1;transform:none} /* Fakten: the two rows glide in from opposite sides, the figures count up (JS) */ .sx-io .facts__row{--fx:0px;opacity:0;transform:translate3d(-24%,0,0); transition:opacity .8s cubic-bezier(.33,1,.68,1),transform 1.1s cubic-bezier(.16,1,.3,1)} .sx-io .facts__row[data-dir=left]{transform:translate3d(24%,0,0)} .sx-io .facts__row+.facts__row{transition-delay:.12s} .sx-io .facts.is-in .facts__row{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.sx-io .facts__row{opacity:1;transform:none}} /* phones: even, tighter spacing between sections */ @media (max-width:700px){ :root{--section-y:60px} .facts{padding-block:72px} /* hero: the stage stays pinned while the story slides up over it; a band of white pixels on the story's top edge covers the image just ahead of it */ .hero{height:300vh;height:300svh} .story{z-index:3;margin-top:-100vh;margin-top:-100lvh} .story__page{padding-block:56px} .story__page--a{padding-top:24px} .ensemble__cta,.ensemble__cta .btn{justify-content:center} } @media (max-width:700px) and (prefers-reduced-motion:reduce){.hero{height:100vh}.story{margin-top:0}.story__edge{display:none}} .story__edge{display:none} @media (max-width:700px){.story .story__edge{display:block;top:auto;bottom:calc(100% - 1px);height:34vh;height:34svh;z-index:5}} /* touch devices: the full-bleed photos keep their parallax as scroll-driven CSS animations (same curves as the scroll-scrubbed version: 0 = section enters at the bottom, 1 = it leaves at the top) */ @supports (animation-timeline: view()){ .sx-tl .wide{view-timeline:--wide block} .sx-tl .cta{view-timeline:--cta block} .sx-tl [data-sx=wide] :is(.wide__img,.wide__cap,.wide__logo),.sx-tl [data-sx=cta] .cta__img{translate:none;scale:none;opacity:1; animation-timing-function:linear;animation-fill-mode:both;animation-range:cover 0% cover 100%} .sx-tl [data-sx=wide] .wide__img{animation-name:tl-wide-img;animation-timeline:--wide} .sx-tl [data-sx=wide] .wide__cap{animation-name:tl-wide-cap;animation-timeline:--wide} .sx-tl [data-sx=wide] .wide__logo{animation-name:tl-wide-logo;animation-timeline:--wide} .sx-tl [data-sx=cta] .cta__img{animation-name:tl-cta-img;animation-timeline:--cta} } @keyframes tl-wide-img{from{transform:translateY(3%) scale(1.22)}to{transform:translateY(-3%) scale(1)}} @keyframes tl-wide-cap{0%,25%{opacity:0;transform:translateY(15px)}50%,100%{opacity:1;transform:none}} @keyframes tl-wide-logo{0%{opacity:0;transform:translateY(40px) scale(1.06)}18%{opacity:0;transform:translateY(24px) scale(1.06)}45%{opacity:1;transform:translateY(0) scale(1.01)}50%,100%{opacity:1;transform:none}} @keyframes tl-cta-img{from{transform:translateY(4%) scale(1.3)}to{transform:translateY(-4%) scale(1)}} /* ---------- v42 ---------- */ /* Fakten on phones: the six figures stand one below the other, each rises in on its own */ @media (max-width:767px) and (prefers-reduced-motion:no-preference){ .facts .facts__row{--fx:0px!important;opacity:1!important;transform:none!important;transition:none!important} .facts .fact{opacity:0;transform:translate3d(0,40px,0);transition:opacity .7s cubic-bezier(.33,1,.68,1),transform .9s cubic-bezier(.16,1,.3,1)} .facts .fact.is-in{opacity:1;transform:none} } /* Mikrolage map: no movement, it only fades in */ .gmap{transform:none;will-change:auto} [data-sx=fade]{opacity:var(--t)} .sx-io [data-sx=fade]{opacity:0;transition:opacity .9s linear var(--d,0s)} .sx-io [data-sx=fade].is-in{opacity:1} @media (prefers-reduced-motion:reduce){[data-sx=fade],.sx-io [data-sx=fade]{opacity:1}} /* Grundrisse vergrößert: the whole floor fitted to the screen, click zooms in on the spot */ .pzoom__scroll{display:flex;padding:72px 16px 56px;cursor:zoom-in;overscroll-behavior:contain} .pzoom__scroll img{flex:none;margin:auto;width:auto;max-width:none;height:auto;cursor:zoom-in} .pzoom.is-zoomed .pzoom__scroll,.pzoom.is-zoomed .pzoom__scroll img{cursor:zoom-out} .pzoom.is-zoomed .pzoom__scroll.is-drag,.pzoom.is-zoomed .pzoom__scroll.is-drag img{cursor:grabbing} .pzoom__hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;margin:0;padding:8px 14px;background:var(--tds-offblack);color:#fff;font-size:13px;font-weight:var(--fw-bold);max-width:calc(100vw - 32px);text-align:center;pointer-events:none} .pzoom__hint .z-out,.pzoom.is-zoomed .pzoom__hint .z-in{display:none} .pzoom.is-zoomed .pzoom__hint .z-out{display:inline} /* Grundrisse on phones and tablets: Bauteil buttons and the request button below the plan */ @media (max-width:991px){ .plans__grid{row-gap:20px} .plans__info{display:contents} .plans__info > *{justify-self:start;min-width:0} .plans__info > .h2,.plans__houses,.plans__text{order:-2} .plans__stage{order:-1;margin-block:4px 2px} .plans__text,.plans__note{justify-self:stretch} } /* v45 — Grundrisse quer (Bauteil A unten), Beispielplanung, E.T. MYER Logo */ .plans__plan{width:min(100%,calc(min(100vh - 330px,640px) * 1.19))} @media (max-width:991px){.plans__plan{width:100%}} .pzoom__tag{position:fixed;left:20px;top:16px;z-index:2;margin:0;padding:12px 18px;background:var(--tds-offblack);color:#fff;font-size:14px;font-weight:var(--fw-bold);pointer-events:none} .contact__logo{grid-column:1/-1;justify-self:start;display:block;line-height:0} .contact__logo img{width:140px;height:auto} .contact__agent a.contact__logo{text-decoration:none} .footer__top{grid-template-columns:1.05fr 1.15fr 1.15fr 1.1fr .75fr} .footer__etm,.footer__logo-link{display:block;width:max-content;line-height:0;margin-bottom:14px} .footer__etm img{width:120px;height:auto} .footer__col a.footer__etm:hover,.footer__col a.footer__logo-link:hover{text-decoration:none;opacity:.85} @media (max-width:1240px){.footer__top{grid-template-columns:repeat(4,1fr)}.footer__logo{grid-column:1/-1}} @media (max-width:1000px){.footer__top{grid-template-columns:1fr 1fr}} @media (max-width:560px){.footer__top{grid-template-columns:1fr}} /* v46 — Büroflächen-Kachel: Gesamtmietfläche groß, verfügbare Flächen je Gebäude klein */ .tile-big .tile-big__fig{margin-bottom:8px} .tile-big .tile-big__lbl{color:#fff;font-size:15px;font-weight:var(--fw-bold);margin-bottom:22px} .tile-big__avail{display:flex;flex-wrap:wrap;gap:12px clamp(28px,4vw,48px);margin:0 0 20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)} .tile-big__avail dt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--fw-bold);color:rgba(255,255,255,.72)} .tile-big__avail dt i{width:9px;height:9px;background:var(--c)} .tile-big__avail dd{margin:4px 0 0;font-size:22px;font-weight:var(--fw-extrabold);letter-spacing:-.02em;color:#fff} .tile-big__avail dd small{display:block;margin:2px 0 0;font-size:13px;font-weight:var(--fw-regular,400);letter-spacing:0;color:rgba(255,255,255,.6)} .footer__logo-link{margin-bottom:18px} .footer__logo-link img{width:136px;height:auto} /* v49 — Bauteil letters in the enlarged plan */ .pzoom__fig{position:relative;flex:none;margin:auto;line-height:0} .pzoom__scroll .pzoom__fig img{margin:0} .pzoom__pin{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;background:var(--tds-offblack);color:#fff;font-size:16px;font-weight:var(--fw-extrabold);line-height:1;pointer-events:none} @media (max-width:640px){.pzoom__pin{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:12px}} /* ---------- Cookie-/Einwilligungsbanner (assets/js/consent.js) ---------- */ .consent{position:fixed;z-index:90;left:var(--gutter);bottom:var(--gutter);width:min(460px,calc(100vw - 2 * var(--gutter)));max-height:calc(100svh - 2 * var(--gutter));overflow:auto; background:var(--tds-white);color:var(--tds-offblack);border:1px solid var(--tds-offblack);padding:24px;box-shadow:0 18px 48px rgba(29,29,27,.18);font-size:14px;line-height:1.5} .consent[hidden]{display:none} .consent__title{font-size:20px;font-weight:var(--fw-extrabold);letter-spacing:-.01em;line-height:1.2;margin:0 0 10px} .consent__text{margin:0;color:var(--tds-graphite)} .consent__text a{color:inherit;text-decoration:underline;text-underline-offset:.18em} .consent__panel{margin-top:16px;border-top:1px solid var(--tds-grey-300)} .consent__panel[hidden]{display:none} .consent__row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 0;border-bottom:1px solid var(--tds-grey-300)} .consent__row b{display:block;font-weight:var(--fw-bold)} .consent__row span{display:block;font-size:13px;color:var(--text-secondary)} .consent__row em{flex:none;font-style:normal;font-size:12px;font-weight:var(--fw-bold);color:var(--text-secondary);margin-top:2px} label.consent__row{cursor:pointer} .consent__row input{appearance:none;flex:none;width:20px;height:20px;border:1px solid var(--tds-offblack);margin:1px 0 0;display:grid;place-items:center;cursor:pointer;background:#fff} .consent__row input:checked::after{content:"";width:10px;height:10px;background:var(--tds-offblack)} .consent__row input:focus-visible{outline:2px solid var(--tds-blue-700);outline-offset:2px} .consent__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px} .consent__actions .btn[hidden],.consent__more[hidden]{display:none} .consent__more{background:none;border:0;padding:4px 0;margin-left:6px;font:inherit;font-weight:var(--fw-bold);color:inherit;border-bottom:1px solid currentColor;cursor:pointer} @media (max-width:560px){ .consent{left:0;right:0;bottom:0;width:auto;border-width:1px 0 0;padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom))} .consent__actions .btn{flex:1 1 40%;justify-content:center} .consent__more{margin-left:0} }