/* Sidavo 2.0. UVD reference direction, implemented for Sidavo's own content. */ @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-400-latin.woff2') format('woff2')} :root{ --paper:#fff;--surface:#f8f8f8;--ink:#151515;--ink-2:#303030;--ink-3:#686868;--ink-4:#707070; --stone-900:#1b1b1b;--line:#d9d9d9;--line-soft:#e5e5e5;--accent:#987821; --f-display:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Inter',sans-serif;--f-body:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; --wrap:1120px;--wrap-narrow:800px;--gut:clamp(24px,5vw,64px);--sec-y:clamp(90px,11vw,160px); --r-button:14px;--r:14px;--r-sm:10px;--r-lg:16px;--r-xl:16px;--ease:cubic-bezier(.16,1,.3,1);--head-h:72px; --sh:0 22px 50px -28px #46464640;--sh-sm:0 10px 24px -15px #46464630; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%;overflow-x:clip} body{margin:0;color:var(--ink);background:white;font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip} /* Lock the root scroller without changing the scroll timelines inside the page. */ html{scrollbar-gutter:stable} html:has(body.is-locked){overflow-y:hidden} body.is-locked{overflow:clip} img,picture,svg{display:block;max-width:100%}img{height:auto} h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.08;letter-spacing:-.035em;text-wrap:balance} p+p{margin-top:1.2em}ul,ol{list-style:none;margin:0;padding:0}a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}button:disabled{cursor:wait} button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a,button{touch-action:manipulation} ::selection{background:#dfd1a3;color:#151515}:focus-visible{outline:2px solid var(--accent);outline-offset:5px} [hidden]{display:none!important}.ic{width:18px;height:18px;flex:none} .sr,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip-link{position:fixed;z-index:40;top:10px;left:20px;transform:translateY(-150%);padding:12px 20px;background:#151515;color:white;border-radius:var(--r-button)} .skip-link:focus{transform:none}#top{height:1px;position:absolute;top:0} .wrap{width:min(var(--wrap),calc(100% - var(--gut)*2));margin-inline:auto}.wrap--narrow{max-width:var(--wrap-narrow)} .sec{position:relative;padding-block:var(--sec-y)}.wave{display:none} .sec-head{text-align:center;max-width:870px;margin:0 auto 76px} .sec-lead,.cta__title,.cta__lead,.faq__q,.ref-card__name,.step__title,.legal__sub,.notfound__lead,.plan__name,.hosting__title,.ccard__title,.mobile-nav__eyebrow,.service__title,.mobile-nav__label,.legal__h{font-family:var(--f-display);font-weight:400} .sec-title{font-size:clamp(38px,4.5vw,64px);line-height:1.08;font-family:var(--f-display)} .sec-title em{font:inherit;color:var(--accent)}.sec-lead{max-width:580px;margin:24px auto 0;font-size:19px;line-height:1.55;color:var(--ink-3)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border:1px solid transparent;border-radius:var(--r-button);padding:10px 24px;font-size:15px;line-height:1.3;font-weight:400;transition:background-color .2s,transform .3s var(--ease),border-color .2s;white-space:normal;text-align:center} .btn--dark,.btn--light{background:#1b1b1b;color:white}.btn--ghost{background:transparent;color:var(--ink);border-color:#d3d3d3} .btn:hover{transform:translateY(-2px)} .btn--sm{font-size:13px;padding:8px 18px;min-height:38px} /* Beim Überfahren läuft die Schaltfläche von unten voll – in der jeweils gegenteiligen Farbe. Der Kopfbereich ist ausgenommen, dort rollt die Beschriftung durch. */ .btn:not(.site-head__cta){position:relative;isolation:isolate;overflow:hidden;--fill:#151515;--fill-ink:#fff;--fill-edge:#151515;transition:transform .3s var(--ease),border-color .5s var(--ease),color .45s var(--ease) .2s} .btn--dark:not(.site-head__cta),.btn--light:not(.site-head__cta){--fill:#fff;--fill-ink:#151515;--fill-edge:#151515} .btn:not(.site-head__cta)::before{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;bottom:0;height:165%;background:var(--fill);border-radius:46% 54% 0 0/30px 24px 0 0;transform:translateY(102%);transition:transform .95s var(--ease)} .btn:not(.site-head__cta):hover,.btn:not(.site-head__cta):focus-visible{color:var(--fill-ink);border-color:var(--fill-edge)} .btn:not(.site-head__cta):hover::before,.btn:not(.site-head__cta):focus-visible::before{transform:translateY(0)}.btn--lg{padding:13px 28px;min-height:48px}.btn--block{width:100%} .link-arrow{display:inline-flex;align-items:center;gap:10px;text-decoration:underline;text-underline-offset:5px} /* The centered wordmark is the persistent anchor, as in the reference. */ .site-head{position:fixed;inset:0 0 auto;z-index:30;padding:10px var(--gut);transition:background .3s} .site-head.is-stuck{background:#fffffff2;backdrop-filter:blur(14px)} .site-head__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1440px;margin:auto;min-height:52px} .brand{grid-area:1/2;display:block;width:144px;padding-block:16px} .brand__stage{position:relative;display:block} .brand__mark{width:144px;height:auto;transform-origin:50% 50%;animation:brand-word 3.4s var(--ease) both} .brand__icon{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;pointer-events:none;animation:brand-sign 3.4s var(--ease) both} @keyframes brand-word{0%,9%{opacity:1;transform:scaleX(1);filter:blur(0)}29%,57%{opacity:0;transform:scaleX(.14);filter:blur(2px)}77%,100%{opacity:1;transform:scaleX(1);filter:blur(0)}} @keyframes brand-sign{0%,13%{opacity:0;transform:scale(.28) rotate(-90deg)}31%,55%{opacity:1;transform:scale(1) rotate(0deg)}73%,100%{opacity:0;transform:scale(.28) rotate(90deg)}} .site-nav{display:none}.site-head__actions{display:contents}.site-head__cta{grid-area:1/3;justify-self:end;background:transparent;color:#373737;border:0;padding-right:0} .site-head__cta .ic{width:14px;height:14px}.site-head__cta:hover{background:transparent;color:#000;transform:none} .ctaroll{display:inline-block;overflow:hidden;vertical-align:bottom} .ctaroll__in{position:relative;display:block;line-height:1.5;transition:transform .5s var(--ease)} .ctaroll__in::after{content:attr(data-label);position:absolute;left:0;top:100%;white-space:nowrap} .site-head__cta:hover .ctaroll__in,.site-head__cta:focus-visible .ctaroll__in{transform:translateY(-100%)} @keyframes cta-arrow{0%{transform:none;opacity:1}42%{transform:translateX(13px);opacity:0}58%{transform:translateX(-13px);opacity:0}100%{transform:none;opacity:1}} .site-head__cta:hover .ic,.site-head__cta:focus-visible .ic{animation:cta-arrow .55s var(--ease)} .burger{grid-area:1/1;justify-self:start;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 0;font-size:13px} .burger::after{content:'Menü'}.burger__box{width:19px;height:14px;position:relative;display:block} .burger__bar,.burger__bar::after{position:absolute;display:block;content:'';left:0;width:19px;height:1px;background:currentColor;transition:transform .25s;top:4px}.burger__bar::after{top:6px} .burger[aria-expanded=true] .burger__bar{transform:translateY(3px) rotate(45deg)}.burger[aria-expanded=true] .burger__bar::after{transform:translateY(-6px) rotate(-90deg)} .mobile-nav{position:fixed;inset:0;z-index:20;background:var(--paper);overflow-y:auto;padding:calc(var(--head-h) + 54px) var(--gut) 60px;opacity:0;transition:opacity .3s} .mobile-nav.is-open{opacity:1} .mobile-nav__inner{width:min(var(--wrap),100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:70px;align-items:stretch}.mobile-nav__main{min-width:0} .mobile-nav__eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px} .mobile-nav__list li{border-top:1px solid var(--line-soft)}.mobile-nav__list li:last-child{border-bottom:1px solid var(--line-soft)} .mobile-nav__list li a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 6px 20px 0;transition:padding-left .4s var(--ease)} .mobile-nav__label{font-family:var(--f-display);font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.04em;transition:color .25s} .mobile-nav__list .ic{width:19px;height:19px;align-self:center;color:var(--ink-3);transition:transform .4s var(--ease),color .25s} .mobile-nav__list li a:hover{padding-left:14px}.mobile-nav__list li a:hover .mobile-nav__label{color:var(--accent)}.mobile-nav__list li a:hover .ic{transform:translateX(7px);color:var(--accent)} .mobile-nav__side{display:flex;flex-direction:column;background:none;border:1px solid var(--line-soft);border-radius:24px;padding:0;overflow:hidden} .mobile-nav__side .mobile-nav__eyebrow{margin:0;padding:24px 26px 18px} .mobile-nav__contact{display:grid;font-size:15px}.mobile-nav__contact li{border-top:1px solid var(--line-soft)} .mobile-nav__contact a{display:flex;align-items:center;gap:12px;padding:15px 26px;transition:background-color .25s}.mobile-nav__contact a:hover{background:var(--surface)} .mobile-nav__contact .ic{width:16px;height:16px;color:var(--accent)} .mobile-nav__note{margin:0;padding:18px 26px 22px;border-top:1px solid var(--line-soft);font-size:13px;line-height:1.7;color:var(--ink-3)} .mobile-nav__foot{margin-top:auto;padding:22px 26px;border-top:1px solid var(--line-soft)}.mobile-nav__foot .btn{width:100%} .mobile-nav__list li,.mobile-nav__side{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0)*45ms)} .mobile-nav.is-open .mobile-nav__list li,.mobile-nav.is-open .mobile-nav__side{opacity:1;transform:none} html:not(.js) .burger{display:none}html:not(.js) .site-nav{display:block;grid-column:1/-1;grid-row:2}html:not(.js) .site-nav__list{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font-size:13px} /* Hero: quiet headline above a large floating physical object. */ .hero{position:relative;padding-top:150px;text-align:center;isolation:isolate} .hero__copy{max-width:1000px;margin:auto}.hero__title{font-size:clamp(44px,5.15vw,76px);line-height:1.04;letter-spacing:-.04em} .hero__line{display:inline}.hero__line+ .hero__line::before{content:' '} .hero__lead{max-width:620px;margin:20px auto 0;color:var(--ink-3);font-size:20px;line-height:1.5;text-wrap:pretty} .hero__actions{display:flex;flex-direction:row-reverse;justify-content:center;gap:12px;margin-top:28px} .object-3d{mix-blend-mode:multiply;pointer-events:none;user-select:none} .hero__sculpture{max-width:760px;margin:34px auto 0;padding-inline:12px;perspective:1200px} .hero__object{mix-blend-mode:normal;width:100%;height:auto;transform-origin:center 65%} /* Soft statement and floating real-world project browsers. */ .sec--refs{background:var(--surface);padding-top:120px} .refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;perspective:1500px;margin:105px 0 82px} .ref-card{min-width:0}.ref-card:first-child{transform:rotate(-7deg) translateY(34px)}.ref-card:last-child{transform:rotate(7deg) translateY(34px)} .ref-card__link{display:block}.ref-card__frame{display:block;transition:transform .6s var(--ease)} .ref-card__link:hover .ref-card__frame{transform:translateY(-12px)} .browser{display:block;background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 18px 38px -20px #35353565} .browser__bar{height:34px;display:flex;align-items:center;padding:0 13px;gap:15px;background:#fff;border-bottom:1px solid #ededed} .browser__dots{display:flex;gap:4px}.browser__dots i{width:5px;height:5px;border-radius:50%;background:#c9c9c9}.browser__url{font-size:9px;color:#777;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .browser__view{display:block;aspect-ratio:.82;overflow:hidden;position:relative}.browser__view picture{height:100%}.browser__view img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 5s var(--ease)} .ref-card__link:hover .browser__view img,.ref-card__link:focus-visible .browser__view img{object-position:bottom} .ref-card__body{display:block;text-align:center;margin:26px -15px 0}.ref-card__meta{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px} .ref-card__name{display:flex;align-items:center;justify-content:center;gap:8px;font-size:19px;letter-spacing:-.025em}.ref-card__ext{width:13px;height:13px} .cta{text-align:center;max-width:580px;margin:0 auto;padding-top:35px;border-top:1px solid #dfdfdf} .cta__title{font-size:30px;line-height:1.15;letter-spacing:-.035em;text-wrap:balance}.cta__lead{margin:15px auto 25px;font-size:16px;color:var(--ink-3)}.cta__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .sec--services{background:white;padding-bottom:130px}.services-stage{display:grid;grid-template-columns:1fr 1.05fr;align-items:start;gap:60px;position:relative} .services-stage__media{position:sticky;top:150px;display:grid;width:108%;max-width:none;margin:24px 0 0 -4%;aspect-ratio:1} .services-stage__object{grid-area:1/1;width:100%;height:auto;opacity:0;transition:opacity .4s var(--ease)}.services-stage__object.is-active{opacity:1} .services{display:grid}.service{position:relative;display:grid;grid-template-columns:1fr;padding:30px 26px;margin-inline:-26px;border-radius:20px;border-bottom:1px solid var(--line-soft);transition:background-color .35s var(--ease)}.js .service{cursor:pointer} .service::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:2px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .35s var(--ease)} .service--active{background:var(--surface);border-bottom-color:transparent}.service--active::before{opacity:1}.service:has(+ .service--active){border-bottom-color:transparent} .service:first-child{padding-top:22px}.service__icon{display:none}.service__num{display:none}.service__title{font-size:42px;line-height:1.1;margin-bottom:19px}.service__text{max-width:440px;font-size:18px;line-height:1.6;color:var(--ink-3)} /* Pricing remains a full comparison, using open columns instead of dark cards. */ .sec--pricing{background:var(--surface)}.sec--pricing .sec-head{max-width:850px} .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px} .plan{display:flex;flex-direction:column;position:relative;min-width:0;background:var(--paper);border:1px solid #ececec;border-radius:26px;padding:38px 30px 34px;box-shadow:0 18px 40px -30px #3a3a3a38} .plan--featured{background:linear-gradient(168deg,#242424,#131313 62%);border-color:#131313;color:#fff;margin-block:-18px 0;padding:56px 30px 48px;box-shadow:0 34px 62px -34px #1c1c1c73} .plan__badge{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;border-radius:999px;padding:9px 20px;font-size:10px;line-height:1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;box-shadow:0 12px 26px -16px #00000073} .plan__name{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#9a9a9a}.plan--featured .plan__name{color:#9d9d9d} .plan__price{margin:24px 0 20px;line-height:1.05;min-height:96px;display:flex;flex-wrap:wrap;align-content:start;align-items:baseline;gap:6px} .plan__amount{font-family:var(--f-display);font-size:58px;letter-spacing:-.045em}.plan__amount--text{font-size:34px;line-height:1.4}.plan__cur{font-size:20px;color:var(--ink-3)}.plan--featured .plan__cur{color:#9d9d9d} .plan__note{display:block;width:100%;font-size:12px;color:var(--ink-3);margin-top:10px}.plan--featured .plan__note{color:#909090} .plan__lead{color:var(--ink-3);font-size:15px;line-height:1.6;min-height:104px}.plan--featured .plan__lead{color:#b6b6b6} .plan__features{display:grid;gap:15px;margin:0 0 32px;padding-top:28px;border-top:1px solid #ececec;font-size:14px;line-height:1.5}.plan--featured .plan__features{border-top-color:#ffffff26} .plan__features li{display:flex;align-items:flex-start;gap:11px}.plan__features .ic{width:14px;height:14px;margin-top:4px;color:#565656}.plan--featured .plan__features .ic{color:#ffffffb8} .plan__cta{margin-top:auto;background:#1b1b1b;color:#fff;border-color:#1b1b1b;min-height:52px} .plan__cta.btn{--fill:#fff;--fill-ink:#151515;--fill-edge:#151515} .plan--featured .plan__cta{background:#fff;color:#151515;border-color:#fff;--fill:var(--accent);--fill-ink:#fff;--fill-edge:var(--accent)} .plans__vat{font-size:11px;color:var(--ink-3);margin:38px auto 0;text-align:center;max-width:690px} .hosting{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,.95fr);align-items:center;margin-top:56px;padding:46px 52px;background:var(--paper);border:1px solid #ececec;border-radius:28px;box-shadow:0 18px 40px -30px #3a3a3a38}.hosting__title{font-size:27px}.hosting__lead{margin-top:15px;max-width:470px;color:var(--ink-3);font-size:15px;line-height:1.6} .hosting__price{text-align:center;padding:16px 46px;border-inline:1px solid #e4e4e4}.hosting__amount{font-family:var(--f-display);font-size:46px;line-height:1;letter-spacing:-.04em}.hosting__amount span{font-size:20px;margin-left:3px;color:var(--ink-3)}.hosting__period{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:11px} .hosting__list{display:grid;gap:14px;padding-left:52px;font-size:14px;line-height:1.5}.hosting__list li{display:flex;gap:11px;align-items:flex-start}.hosting__list .ic{width:14px;height:14px;margin-top:4px;color:#565656} .faq__item[open]>.faq__q .faq__q-text{color:var(--accent)} .sec--faq{background:white}.faq{margin-bottom:68px}.faq__item{border-bottom:1px solid var(--line-soft)}.faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;padding:25px 0;font-size:19px;line-height:1.4;letter-spacing:-.02em}.faq__q::-webkit-details-marker{display:none}.faq__q:hover{color:var(--accent)} .faq__sign{position:relative;width:18px;height:18px;flex:none}.faq__sign::before,.faq__sign::after{content:'';position:absolute;background:currentColor;left:1px;top:8px;width:15px;height:1px;transition:transform .25s}.faq__sign::after{transform:rotate(90deg)}[open]>.faq__q .faq__sign::after{transform:rotate(0deg)} .faq__a{padding:0 42px 27px 0;color:var(--ink-3);font-size:16px;line-height:1.7}.sec--faq .cta__title{font-size:27px} .sec--about{background:var(--surface)}.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:stretch}.about__copy{grid-column:2;grid-row:1}.about__media{grid-column:1;grid-row:1;margin:0;overflow:hidden;display:flex;flex-direction:column;min-height:0}.about__copy .sec-title{font-size:clamp(40px,4vw,56px)}.about__copy .sec-title em{display:block} .about__text{font-size:18px;line-height:1.6;color:var(--ink-3);margin-top:26px}.steps{margin-top:42px}.step{display:flex;gap:25px;padding:23px 0;border-top:1px solid #ddd}.step__num{font-size:12px;color:var(--accent);padding-top:5px}.step__body{display:block}.step__title{display:block;font-size:23px;letter-spacing:-.025em;margin-bottom:6px}.step__text{font-size:14px;color:var(--ink-3);display:block} .about__map{height:100%;flex:1;min-height:340px;background:#ebebeb;border-radius:14px;overflow:hidden} .mapart{position:relative;isolation:isolate;min-height:320px;overflow:hidden;background:#eee}.mapart__svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mapart__pin{display:none}.mapart__frame{position:absolute;inset:0;width:100%;height:100%;border:0}.mapart.is-loaded .mapgate{display:none} .mapgate{position:absolute;inset:0;display:grid;place-items:center;padding:25px;background:#ffffff60}.mapgate__panel{position:relative;max-width:290px;text-align:center;background:#ffffffed;padding:25px;border-radius:14px}.mapgate__title{font-size:16px;letter-spacing:-.02em}.mapgate__text{font-size:12px;line-height:1.55;color:var(--ink-3);margin:12px 0 20px}.mapgate__link{display:block;font-size:11px;text-decoration:underline;margin-top:12px;color:var(--ink-3)} .sec--contact{padding-top:120px}.sec--contact .sec-head{max-width:820px;margin-bottom:70px} .contact{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:75px;align-items:stretch}.contact__form-wrap{min-width:0}.contact__side{display:grid;grid-template-rows:auto 1fr;gap:36px;min-height:0}.ccard{background:var(--surface);border-radius:24px;padding:32px 28px}.ccard__title{font-size:26px;margin-bottom:26px}.ccard__list{display:grid;gap:28px}.ccard__list li{display:flex;gap:14px}.ccard__ic{margin-top:3px;color:var(--ink-3)}.ccard__body{min-width:0}.ccard__k{display:block;color:var(--ink-3);font-size:11px;margin-bottom:7px}.ccard__v{font-size:15px;overflow-wrap:anywhere}.ccard__muted{font-size:12px;color:var(--ink-3)}.ccard__route{display:flex;gap:6px;align-items:center;font-size:12px;margin-top:9px;color:var(--accent)}.ccard__route .ic{width:12px;height:12px}.ccard--map{min-height:0;padding:0;background:none;border-radius:0}.ccard__map{height:100%;min-height:300px;border-radius:14px} .site-foot{padding:75px 0 25px;background:var(--surface);position:relative}.site-foot__top{display:grid;grid-template-columns:1.5fr .75fr 1fr 1.25fr;gap:38px;padding-bottom:60px}.site-foot__brand img{width:150px}.site-foot__claim{max-width:230px;font-size:13px;color:var(--ink-3);line-height:1.6;margin:24px 0}.site-foot__title{font-size:13px;color:var(--ink-3);letter-spacing:0;margin-bottom:22px;list-style:none}.site-foot__title::-webkit-details-marker{display:none}.site-foot__col li{font-size:13px;line-height:1.8;margin:8px 0}.site-foot__col a:hover,.site-foot__legal a:hover{text-decoration:underline;text-underline-offset:4px}.site-foot__col address{font-style:normal;font-size:12px;line-height:1.7}.site-foot__company{font-size:13px}.site-foot__hours{color:var(--ink-3)} .site-foot__bottom{padding-top:22px;border-top:1px solid #dfdfdf;display:flex;justify-content:space-between;gap:24px;font-size:10px;color:var(--ink-3)}.site-foot__legal{display:flex;gap:22px}.site-foot__legal a{display:flex;gap:7px;align-items:center}.site-foot__legal .ic{width:12px;height:12px} /* Motion stays tied to the objects; all text is visible without JavaScript. */ @media(prefers-reduced-motion:no-preference){ .hero__copy{animation:enter .9s var(--ease) both}.hero__sculpture{animation:enter 1.2s .1s var(--ease) both} @keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @supports(animation-timeline:view()){ .hero__object{animation:sculpture linear both;animation-timeline:view();animation-range:entry 0% exit 100%} @keyframes sculpture{from{transform:scale(.92)}to{transform:scale(1.04)}} } } /* ========================================================================== Übergänge und Bewegung beim Scrollen -------------------------------------------------------------------------- Drei Ebenen, bewusst getrennt: 1. Verlaufskanten: Die Abschnitte wechseln zwischen Weiss und dem hellen Grau. Statt einer harten Kante blendet die Fläche über 170 px aus, oben wie unten. Das läuft ohne JavaScript und ohne Bewegung. 2. Einblenden: Was der Beobachter im Skript erreicht, bekommt hier erst seine Gestalt. Ohne JavaScript steht kein [data-reveal] im Dokument – dann ist alles sofort sichtbar. 3. Scrollgesteuert: Nur in Browsern mit animation-timeline. Diese Bewegungen hängen wirklich am Scrollbalken, nicht an einer Uhr. ========================================================================== */ /* --- 1. Weiche Kanten zwischen den Abschnitten --------------------------- */ .sec--refs,.sec--pricing,.sec--about,.site-foot{isolation:isolate} .sec--refs::before,.sec--refs::after, .sec--pricing::before,.sec--pricing::after, .sec--about::before,.sec--about::after, .site-foot::before{content:"";position:absolute;left:0;right:0;height:170px;z-index:-1;pointer-events:none} .sec--refs::before,.sec--pricing::before,.sec--about::before,.site-foot::before{top:0;background:linear-gradient(var(--paper),#ffffff00)} .sec--refs::after,.sec--pricing::after,.sec--about::after{bottom:0;background:linear-gradient(#ffffff00,var(--paper))} .wrap{position:relative;z-index:1} @media(prefers-reduced-motion:no-preference){ /* --- 2. Einblenden beim Eintreten ------------------------------------- */ [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*90ms)} [data-reveal].is-in{opacity:1;transform:none} /* --- 3. Am Scrollbalken hängende Bewegungen --------------------------- */ @supports(animation-timeline:view()){ /* Fortschritt am oberen Rand */ /* Überschriften werden diagonal aufgedeckt */ .sec-title{padding-block:.16em;margin-block:-.16em;-webkit-mask-clip:border-box;mask-clip:border-box;-webkit-mask-image:linear-gradient(90deg,#000 40%,#0000 60%);mask-image:linear-gradient(90deg,#000 40%,#0000 60%);-webkit-mask-size:300% 320%;mask-size:300% 320%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:title-wipe linear both;animation-timeline:view();animation-range:cover 4% cover 30%} .sec--refs .sec-title{animation-range:cover 8% cover 34%} .sec--refs .sec-lead{animation-range:cover 22% cover 40%} .sec-lead{animation:label-rise linear both;animation-timeline:view();animation-range:cover 18% cover 36%} @keyframes label-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes title-wipe{from{-webkit-mask-position:100% 50%;mask-position:100% 50%}to{-webkit-mask-position:0 50%;mask-position:0 50%}} /* Der Vorspann färbt sich beim Vorbeiscrollen ein */ .intro__inner{view-timeline-name:--introFill;view-timeline-axis:block} .intro__inner .fill-line{display:block;padding-block:.14em;margin-block:-.14em;background-image:linear-gradient(90deg,var(--ink) 50%,#d2d2d2 50%);background-size:220% 300%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:text-fill linear both;animation-timeline:--introFill} .intro__accent .fill-line{background-image:linear-gradient(90deg,var(--accent) 50%,#e5ddc4 50%)} @keyframes text-fill{from{background-position:100% 50%}to{background-position:0 50%}} /* Die Referenzfenster richten sich auf */ .ref-card{animation:ref-mid linear both;animation-timeline:view();animation-range:entry 0% cover 55%} .ref-card:first-child{animation-name:ref-left} .ref-card:last-child{animation-name:ref-right} @keyframes ref-mid{from{transform:translateY(210px)}to{transform:none}} @keyframes ref-left{from{transform:translateX(-260px) translateY(34px) rotate(-10deg)}to{transform:translateX(0) translateY(34px) rotate(-7deg)}} @keyframes ref-right{from{transform:translateX(260px) translateY(34px) rotate(10deg)}to{transform:translateX(0) translateY(34px) rotate(7deg)}} /* Leistungen schieben sich von der Seite herein */ .service{animation:slide-in linear both;animation-timeline:view();animation-range:entry 5% cover 42%} @keyframes slide-in{from{opacity:.15;transform:translateX(72px)}to{opacity:1;transform:none}} .services-stage__media{animation:media-settle linear both;animation-timeline:view();animation-range:entry 0% cover 45%} @keyframes media-settle{from{transform:translateY(40px) scale(.94)}to{transform:none}} /* Preiskarten steigen versetzt auf */ .plan{animation:card-rise linear both;animation-timeline:view()} .plan:nth-child(1){animation-range:entry 2% cover 40%} .plan:nth-child(2){animation-range:entry 8% cover 46%} .plan:nth-child(3){animation-range:entry 14% cover 52%} @keyframes card-rise{from{opacity:.2;transform:translateY(74px) scale(.97)}to{opacity:1;transform:none}} .hosting{animation:card-rise linear both;animation-timeline:view();animation-range:entry 0% cover 42%} /* Fragen, Kontakt, Über uns */ .faq__item{animation:faq-stack cubic-bezier(.16,1,.3,1) both;animation-timeline:view();animation-range:entry 0% cover 38%;transform-origin:50% 100%;transition:none} @keyframes faq-stack{0%,12%{opacity:0;transform:translateY(200px)}45%{opacity:1}100%{opacity:1;transform:translateY(0)}} .about__media{animation:media-settle linear both;animation-timeline:view();animation-range:entry 0% cover 48%} .contact__form-wrap,.contact__side{animation:card-rise linear both;animation-timeline:view();animation-range:entry 0% cover 40%} /* Das Zeichen im Kopf dreht sich mit dem Scrollen weiter */ .site-foot__brand{animation:media-settle linear both;animation-timeline:view();animation-range:entry 0% cover 50%} } } @media(min-width:701px){.site-foot__col:not([open])>*:not(summary){display:block}.site-foot__col summary{pointer-events:none}} @media(max-width:1000px){ .hero{padding-top:140px}.hero__title{font-size:58px}.services-stage{gap:26px;grid-template-columns:1fr 1.05fr}.service{padding:26px 20px;margin-inline:-20px}.service::before{top:26px;bottom:26px}.service__title{font-size:36px} .plans{gap:16px}.plan{padding:32px 22px 30px}.plan--featured{margin-block:-14px 0;padding:46px 22px 42px}.plan__amount{font-size:48px}.plan__amount--text{font-size:28px}.plan__cur{font-size:18px}.plan__lead{min-height:125px}.plan__features{font-size:13px;gap:13px;padding-top:24px} .hosting{padding:38px 34px}.hosting__title{font-size:24px}.hosting__lead{font-size:14px}.hosting__price{padding:12px 30px}.hosting__amount{font-size:40px}.hosting__list{padding-left:32px;gap:12px;font-size:13px} .mobile-nav__inner{grid-template-columns:minmax(0,1fr) 290px;gap:44px} .about{gap:38px;grid-template-columns:1fr 1.1fr}.contact{gap:38px}.site-foot__top{gap:24px;grid-template-columns:1.25fr .75fr 1fr 1.2fr} } @media(max-width:700px){ :root{--gut:24px;--sec-y:85px;--head-h:66px}.site-head{padding:7px 20px}.brand,.brand__mark{width:115px}.brand__icon{width:26px;height:26px;margin:-13px 0 0 -13px}.site-head__cta{font-size:11px;max-width:95px;gap:5px}.site-head__cta .ic{display:none}.burger{font-size:12px;gap:7px} .hero{padding-top:120px}.hero__title{font-size:clamp(41px,8.4vw,58px);line-height:1.07}.hero__line{display:block}.hero__line+.hero__line::before{content:none}.hero__lead{font-size:17px;margin-top:22px;max-width:380px}.hero__actions{gap:9px;margin-top:27px}.hero__actions .btn{font-size:12px;padding:10px 17px;min-height:42px} .hero__sculpture{margin-top:32px;width:110%;max-width:none;margin-left:-5%;padding:0} .sec-head{margin-bottom:48px}.sec-title{font-size:39px;line-height:1.09}.sec-lead{font-size:16px;margin-top:22px}.sec--refs{padding-top:85px} .refs{grid-template-columns:1fr;gap:60px;margin:65px auto;max-width:420px;padding-inline:12px}.ref-card:first-child,.ref-card:last-child{transform:none}.browser__view{aspect-ratio:1.05}.browser__bar{height:33px}.browser__url{font-size:10px}.ref-card__name{font-size:21px}.ref-card__meta{font-size:11px}.ref-card__body{margin-top:22px}.ref-card__link:hover .ref-card__frame{transform:none} .cta__title{font-size:27px}.cta__lead{font-size:15px}.cta .btn{font-size:13px}.services-stage{display:flex;flex-direction:column;gap:15px}.services-stage__media{position:static;width:305px;margin:0 auto 20px;aspect-ratio:1}.services{width:100%}.service{padding:26px 18px;margin-inline:-18px;border-radius:18px}.service::before{top:24px;bottom:24px}.service__title{font-size:37px;margin-bottom:15px}.service__text{font-size:17px;max-width:none} .plans{grid-template-columns:1fr;gap:22px;margin-top:56px}.plan{padding:32px 26px 30px}.plan--featured{margin-block:0;padding:40px 26px 34px}.plan__badge{font-size:9px;padding:8px 17px}.plan__price{margin:20px 0 18px;min-height:0}.plan__amount{font-size:54px}.plan__amount--text{font-size:34px;line-height:1.25}.plan__note{font-size:12px}.plan__lead{min-height:0;font-size:15px}.plan__features{font-size:14px;gap:14px;margin-bottom:28px;padding-top:24px}.plans__vat{font-size:11px;line-height:1.7;margin-top:26px} .hosting{grid-template-columns:1fr;align-items:start;row-gap:28px;margin-top:22px;padding:32px 26px;border-radius:24px}.hosting__title{font-size:25px}.hosting__lead{font-size:15px;margin-top:13px}.hosting__price{text-align:left;padding:0;border:0}.hosting__amount{font-size:44px}.hosting__amount span{font-size:19px}.hosting__period{font-size:11px;margin-top:9px}.hosting__list{padding-left:0;padding-top:26px;border-top:1px solid #ececec;gap:14px;font-size:14px} .mobile-nav{padding:calc(var(--head-h) + 34px) var(--gut) 44px}.mobile-nav__inner{grid-template-columns:1fr;gap:36px}.mobile-nav__list li a{gap:18px;padding:16px 0}.mobile-nav__side{border-radius:20px}.mobile-nav__side .mobile-nav__eyebrow{padding:20px 20px 16px}.mobile-nav__contact a{padding:14px 20px}.mobile-nav__note{padding:16px 20px 20px}.mobile-nav__foot{padding:20px} .faq__q{font-size:17px;padding:23px 0}.faq__a{font-size:15px;padding-right:20px}.faq__sign{width:15px}.cta__actions{flex-direction:column;align-items:center} .about{display:flex;flex-direction:column;gap:45px}.about__copy{order:0}.about__media{order:1;width:100%}.about__copy .sec-title{font-size:43px}.about__text{font-size:17px}.about__map{height:320px;flex:none}.step{gap:20px}.step__text{font-size:14px}.step__title{font-size:24px} .sec--contact{padding-top:85px}.ccard{padding:26px 22px;border-radius:20px}.ccard__title{font-size:24px;margin-bottom:22px}.sec--contact .sec-head{margin-bottom:46px}.contact{grid-template-columns:1fr;gap:60px}.contact__side{gap:30px}.ccard__map{height:330px} .site-foot{padding:55px 0 25px}.site-foot__top{grid-template-columns:1fr;gap:0;padding-bottom:35px}.site-foot__brand{margin-bottom:38px}.site-foot__claim{max-width:300px;font-size:14px}.site-foot__col{border-top:1px solid #ddd;padding:18px 0}.site-foot__col summary{margin:0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:14px;min-height:25px;color:var(--ink)}.site-foot__col[open] summary{margin-bottom:18px}.site-foot__sign::after{content:'+';font-size:21px;font-weight:400}.site-foot__col[open] .site-foot__sign::after{content:'−'}.site-foot__col li{font-size:14px}.site-foot__col address{font-size:14px}.site-foot__bottom{flex-direction:column;gap:15px;font-size:10px}.site-foot__legal{gap:20px;font-size:12px}.site-foot__copy{max-width:300px} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero__object{transform:none}} @media print{.site-head,.mobile-nav,.hero__sculpture,.object-3d,.mapgate{display:none}.sec--refs::before,.sec--refs::after,.sec--pricing::before,.sec--pricing::after,.sec--about::before,.sec--about::after,.site-foot::before{display:none}.sec{padding:35px 0}.wrap{width:100%}.hero{padding-top:20px}.plans,.about,.contact{display:block}.plan{break-inside:avoid}.site-foot{background:white}} /* Preserved form validation and legal document components */ .cform__step + .cform__step { margin-top: clamp(26px, 2.8vw, 36px); padding-top: clamp(26px, 2.8vw, 36px); border-top: 1px solid var(--line-soft); } .cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .field { grid-column: 1 / -1; min-width: 0; } .field--half { grid-column: span 1; } .field__label { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; font-size: .8rem; font-weight: 600; color: var(--ink); } .field__req { color: var(--ink-4); font-weight: 400; } .field__opt { font-size: .7rem; font-weight: 400; letter-spacing: .04em; color: var(--ink-4); } .field__count { margin-left: auto; font-size: .7rem; font-weight: 400; color: var(--ink-4); font-variant-numeric: tabular-nums; } .field__input { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .82); color: var(--ink); font-size: .92rem; line-height: 1.5; transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease); appearance: none; -webkit-appearance: none; } .field__input::placeholder { color: var(--ink-4); } .field__input:hover { border-color: rgba(22, 24, 27, .2); } .field__input:focus { outline: none; background: #fff; border-color: var(--stone-900); box-shadow: 0 0 0 3px rgba(22, 24, 27, .08); } .field__textarea { resize: vertical; min-height: 140px; } .field__select { position: relative; } .field__select select { padding-right: 42px; cursor: pointer; } .field__select .ic { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); width: 16px; height: 16px; } .field__input--num { max-width: 96px; text-align: center; font-variant-numeric: tabular-nums; } .field__challenge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .field__challenge-q { font-size: .85rem; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; } .field__hint { margin: 7px 0 0; font-size: .76rem; color: var(--ink-4); } .field__err { margin: 7px 0 0; font-size: .78rem; font-weight: 500; color: #9b2c1f; min-height: 0; display: none; } .field__err.is-shown { display: block; } .field.has-error .field__input { border-color: #c0492f; background: #fdf7f6; } .field.has-error .field__input:focus { box-shadow: 0 0 0 3px rgba(192, 73, 47, .12); } /* --- Einwilligung -------------------------------------------------------- */ .cform__foot { margin-top: clamp(26px, 3vw, 36px); padding-top: clamp(24px, 2.6vw, 32px); border-top: 1px solid var(--line-soft); } .check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; } .check__box { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: transparent; transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); } .check__box .ic { width: 13px; height: 13px; stroke-width: 2.2; } .check input:checked + .check__box { background: var(--stone-900); border-color: var(--stone-900); color: #fff; } .check input:focus-visible + .check__box { outline: 2px solid var(--stone-900); outline-offset: 2px; } .check__text { font-size: .82rem; line-height: 1.6; color: var(--ink-2); } .check__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .field--check.has-error .check__box { border-color: #c0492f; } .cform__submit { margin-top: 24px; width: 100%; } .cform__submit[disabled] { opacity: .62; cursor: progress; } .spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; } .is-sending .spinner { display: block; } .is-sending .ic { display: none; } @keyframes spin { to { transform: rotate(360deg); } } .cform__privacy { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; font-size: .76rem; line-height: 1.55; color: var(--ink-3); } .cform__privacy .ic { width: 15px; height: 15px; margin-top: 2px; flex: none; } /* --- Honigtopf: nie sichtbar, nie fokussierbar --------------------------- */ .hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* --- Rückmeldung --------------------------------------------------------- */ .cform__alert, .cform__result { margin-bottom: 22px; padding: 15px 18px; border-radius: 14px; font-size: .875rem; line-height: 1.6; border: 1px solid; } .cform__result { margin: 22px 0 0; } .cform__alert--ok, .cform__result--ok { background: #f1f6f2; border-color: #cfe1d4; color: #23503a; } .cform__alert--error, .cform__result--error { background: #fdf6f5; border-color: #eccfc9; color: #8c3323; } /* Erfolgszustand: Formular tritt zurück, Bestätigung übernimmt. */ .cform.is-done .cform__step, .cform.is-done .cform__foot { display: none; } .cform.is-done .cform__result { margin: 0; padding: clamp(26px, 3vw, 38px); text-align: center; font-size: 1rem; } .legal__head { padding-block: calc(var(--head-h) + clamp(56px, 7vw, 96px)) clamp(56px, 7vw, 96px); } .legal__title { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.06; letter-spacing: -.022em; color: #fff; } .legal__sub { margin: 20px 0 0; max-width: 58ch; font-size: .95rem; line-height: 1.7; color: var(--on-dark-2); } .legal__body { position: relative; padding-block: clamp(56px, 7vw, 96px) clamp(60px, 8vw, 110px); } .legal__body::before, .legal__body::after { z-index: 0; } .legal__lead { font-size: 1.02rem; line-height: 1.78; color: var(--ink-2); padding-bottom: 8px; } .legal__h { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.32; color: var(--ink); margin: clamp(38px, 4vw, 54px) 0 14px; padding-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 30px); } .legal__h:first-of-type { border-top: 0; padding-top: 0; margin-top: clamp(28px, 3vw, 38px); } .legal__body p { font-size: .95rem; line-height: 1.78; color: var(--ink-2); margin-bottom: 1.05em; text-wrap: pretty; } .legal__body strong { color: var(--ink); font-weight: 600; } .legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-4); transition: text-decoration-color .2s; } .legal__body a:hover { text-decoration-color: var(--ink); } .legal__ul { display: grid; gap: 10px; margin: 0 0 1.4em; } .legal__ul li { position: relative; padding-left: 22px; font-size: .95rem; line-height: 1.72; color: var(--ink-2); } .legal__ul li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); } .legal__dl { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 0; margin: 0 0 1.6em; border-top: 1px solid var(--line-soft); } .legal__dl dt { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--line-soft); font-size: .82rem; font-weight: 600; color: var(--ink); } .legal__dl dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; line-height: 1.68; color: var(--ink-2); } .legal__muted { color: var(--ink-3); font-size: .84rem !important; } .legal__stamp { margin-top: clamp(38px, 4vw, 54px); padding-top: 22px; border-top: 1px solid var(--line); font-size: .8rem !important; color: var(--ink-4) !important; } .legal__back { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; } .legal__back .link-arrow .ic { transform: rotate(180deg); } .legal__back .link-arrow:hover .ic { transform: rotate(180deg) translateX(4px); } .legal-todo { margin-bottom: 34px; padding: 20px 24px; border-radius: var(--r); background: #fff8e9; border: 1px solid #e8d3a6; color: #6b4c12; } .legal-todo p { margin: 0 0 8px; color: inherit !important; font-size: .88rem !important; } .legal-todo ul { list-style: disc; padding-left: 20px; display: grid; gap: 4px; } .legal-todo li { font-size: .85rem; } /* --- 404 ------------------------------------------------------------------ */ .notfound { display: flex; align-items: center; min-height: 82svh; padding-block: calc(var(--head-h) + 70px) 90px; } .notfound__inner { text-align: center; } .notfound .notfound__lead { margin: 22px auto 34px; max-width: 46ch; font-size: 1rem; line-height: 1.7; color: var(--on-dark-2); } .notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 46px; } .notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding-top: 28px; border-top: 1px solid var(--line-dark-2); } .notfound__links a { font-size: .85rem; color: var(--on-dark-2); transition: color .2s; } .notfound__links a:hover { color: #fff; } .field__input{background:var(--surface);font-size:16px;border-radius:10px}.field__label{font-size:13px;font-weight:400}.field__hint,.field__opt,.field__count{color:#707070}.legal__head{padding:180px 0 70px;text-align:center;background:#fff}.legal__title{font-family:var(--f-display);font-size:clamp(38px,5vw,64px);letter-spacing:-.035em;font-weight:400}.legal__body{background:#fff;padding:30px 0 110px}.legal__body p{font-size:16px}.legal__sub{color:#686868}.legal__h{font-family:var(--f-display);font-weight:400}.notfound{padding:190px 0 120px;text-align:center}.notfound__code{font-size:100px;line-height:1}.notfound__title{font-size:48px;margin:20px 0}.notfound__text{margin:20px auto;max-width:500px;color:#686868}.notfound__actions{display:flex;justify-content:center;gap:12px;margin-top:30px}@media(max-width:700px){.cform__grid{grid-template-columns:1fr;gap:20px}.field--half{grid-column:1/-1}.legal__head{padding:140px 0 50px}.legal__dl{grid-template-columns:1fr;gap:6px}.legal__dl dd{margin:0 0 18px}.check__text{font-size:12px}.cform__privacy{font-size:12px}.notfound__title{font-size:38px}.notfound__actions{flex-direction:column;align-items:center}} .intro{padding:115px 0 145px}.intro__inner{font-family:var(--f-display);max-width:950px;margin-inline:auto;font-size:clamp(30px,3.8vw,48px);line-height:1.18;letter-spacing:-.035em;text-align:center;text-wrap:balance;hyphens:none;overflow-wrap:normal}.intro__accent{color:var(--accent);margin-top:55px}.sec--about{overflow:clip;padding-top:280px}.rhythm{position:absolute;inset:-30px 0 auto;height:200px;display:flex;justify-content:space-around;gap:18px;pointer-events:none}.rhythm i{display:block;flex:0 0 9%;height:170px;border-radius:999px;background:#fff;transform:translateY(-50px)}.rhythm i:nth-child(3n){height:110px;transform:translateY(85px)}.rhythm i:nth-child(3n + 2){height:250px;transform:translateY(-90px)}.notfound__lead{max-width:560px;margin:25px auto;color:#686868}.notfound__links{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:13px;margin-top:35px} @media(max-width:700px){.intro{padding:70px 0 90px}.intro__inner{font-size:31px;line-height:1.25}.intro__accent{margin-top:32px}.sec--about{padding-top:175px}.rhythm{height:110px;gap:12px}.rhythm i{flex-basis:15%;height:120px}.rhythm i:nth-child(3n){height:70px;transform:translateY(30px)}.rhythm i:nth-child(3n + 2){height:165px}.rhythm i:nth-child(n+7){display:none}} /* Final viewport and legal contrast corrections. */ .sec-title em{display:block}.hero__sculpture{margin-top:-22px}.legal__title{color:var(--ink)}.legal__sub{margin-inline:auto}.legal__body{overflow-wrap:anywhere}.notfound__links a:hover{color:var(--accent)} @media(max-width:700px){.hero__sculpture{margin-top:18px}.sec-title{font-size:38px}.legal__title{font-size:clamp(31px,8.4vw,40px);overflow-wrap:anywhere}.legal__dl dt{border:0;padding-bottom:0}.legal__dl dd{padding-top:0}.site-head__cta{max-width:none;padding:8px 0 8px 8px;font-size:10px}.brand,.brand__mark{width:110px}} /* Cinematic chapter openings: headline and lead precede all section content. */ section.sec.has-chapter{padding-top:0;overflow:visible} .chapter-track{position:relative;height:185svh;min-height:850px;margin-bottom:calc(48px - var(--chapter-tail,0px))} .chapter-screen{position:sticky;top:0;height:100svh;min-height:460px;display:flex;align-items:center;justify-content:center;padding:100px max(30px,8vw) 60px;box-sizing:border-box} .has-chapter .chapter-screen .sec-head{width:100%;max-width:1000px;margin:0;text-align:center;transform-origin:center;animation:none} .chapter-screen .sec-title{font-size:clamp(38px,5.6vw,80px);line-height:1.1} .chapter-screen .sec-lead{max-width:650px;margin:28px auto 0} .has-chapter > .rhythm{display:none} @media(max-width:700px){.chapter-track{height:155svh;min-height:700px}.chapter-screen{padding:90px 30px 50px;min-height:450px}.chapter-screen .sec-title{font-size:clamp(30px,8vw,42px)}.chapter-screen .sec-lead{font-size:16px;margin-top:22px}} @media print{.chapter-track{height:auto;min-height:0}.chapter-screen{position:static;height:auto;min-height:0;padding:20px}.chapter-screen .sec-head{transform:none!important}} /* Reclaim the empty lower half of the fullscreen title before content. */ .has-chapter > .wrap{display:flow-root;position:relative} .has-chapter > .wrap > :first-child{margin-top:0} @media(max-width:700px){.chapter-track{margin-bottom:calc(32px - var(--chapter-tail,0px))}} @media print{.chapter-track{margin-bottom:24px}} /* Guided contact form and a full-width location map. */ .form-progress{margin-bottom:28px;scroll-margin-top:110px} .form-progress__status{font-size:13px;color:var(--ink-3);margin-bottom:12px} .form-progress__track{height:3px;background:var(--line-soft);margin-bottom:24px;overflow:hidden} .form-progress__track span{display:block;height:100%;background:var(--accent);transition:width .35s var(--ease)} .form-progress__title{font-size:28px;line-height:1.2} .cform .cform__step{border:0;margin:0;padding:0} .form-navigation{display:flex;justify-content:space-between;gap:16px;margin-top:28px} .form-navigation [data-step-next]{margin-left:auto;min-width:140px} .contact__side{display:block;align-self:start} .contact-map{margin-top:44px;width:100%} .contact-map .ccard--map{padding:0;background:none} .contact-map .ccard__map{height:400px;min-height:0} .cform.is-done .form-progress,.cform.is-done .form-navigation{display:none} @media(max-width:700px){.contact{gap:32px}.contact-map{margin-top:32px}.contact-map .ccard__map{height:330px}.form-progress__title{font-size:24px}} @media(prefers-reduced-motion:reduce){.form-progress__track span{transition:none}} /* New white brand artwork shown dark on the white header. */ .brand__icon{filter:brightness(0)} .budget-slider__value{display:block;font-size:24px;margin-bottom:8px;color:var(--ink)} .budget-slider input[type=range]{width:100%;height:32px;margin:0;cursor:pointer;accent-color:var(--accent)} .budget-slider__limits{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)} /* Menu jumps show the destination immediately, without waiting for scroll reveals. */ /* The reference menu destination includes its headline and the three tilted windows. */ /* Quiet footer, aligned with the supplied reference. */ .site-foot--minimal{padding:44px 0 26px;background:var(--surface)} .site-foot--minimal::before{display:none} .site-foot--minimal .site-foot__top{grid-template-columns:minmax(250px,2.6fr) 1fr 1fr 1.25fr;gap:32px;padding-bottom:60px} .site-foot--minimal .site-foot__brand{animation:none;margin:0} .site-foot--minimal .site-foot__brand img{width:138px;height:auto} .site-foot--minimal .site-foot__claim{margin:18px 0 0;font-size:13px;line-height:1.7;max-width:250px;color:#707070} .site-foot--minimal .site-foot__col{border:0;padding:0;min-width:0} .site-foot--minimal .site-foot__title{font-size:13px;font-weight:400;color:#151515;margin:0 0 18px;line-height:1.4} .site-foot--minimal .site-foot__col li{font-size:13px;line-height:1.6;margin:6px 0;color:#707070;overflow-wrap:anywhere} .site-foot--minimal .site-foot__bottom{padding-top:24px;font-size:11px;color:#707070} .site-foot--minimal .site-foot__legal{font-size:11px;gap:26px} @media(max-width:700px){.site-foot--minimal .site-foot__top{grid-template-columns:1fr 1fr;gap:28px 20px;padding-bottom:32px}.site-foot--minimal .site-foot__brand{grid-column:1/-1}.site-foot--minimal .site-foot__bottom{gap:16px}.site-foot--minimal .site-foot__legal{flex-wrap:wrap;gap:20px}} /* Services menu destination shows the title together with the laptop and list. */ /* Pricing menu destination keeps its heading and cards visible together. */ /* FAQ menu landing includes its heading and visible questions. */ /* About menu destination includes the heading, map and project steps. */ .timeline-slider__value{display:block;font-size:24px;margin-bottom:8px;color:var(--ink)} .budget-slider input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;outline-offset:5px} .budget-slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:10px;background:linear-gradient(to right,var(--accent) var(--budget-fill,25%),var(--line-soft) var(--budget-fill,25%))} .budget-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--accent);border:3px solid white;box-shadow:0 2px 5px #0002;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .budget-slider input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 3px 9px #0003} .budget-slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.35);cursor:grabbing} .budget-slider input[type=range]::-moz-range-track{height:6px;border-radius:10px;background:var(--line-soft)} .budget-slider input[type=range]::-moz-range-progress{height:6px;border-radius:10px;background:var(--accent)} .budget-slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border:3px solid white;border-radius:50%;background:var(--accent);box-shadow:0 2px 5px #0002;transition:transform .2s var(--ease)} .budget-slider input[type=range]:hover::-moz-range-thumb{transform:scale(1.2)} .budget-slider input[type=range]:active::-moz-range-thumb{transform:scale(1.35)} @property --budget-fill{syntax:'';inherits:true;initial-value:25%} .budget-slider input[type=range]{transition:--budget-fill .18s ease-out} .budget-slider input[type=range]:active{transition:none} @media(prefers-reduced-motion:reduce){.budget-slider input[type=range]{transition:none}.budget-slider input[type=range]::-webkit-slider-thumb{transition:none}.budget-slider input[type=range]::-moz-range-thumb{transition:none}} .budget-slider input[type=range]{touch-action:none;user-select:none} /* Step-aware contact layout. The sidebar returns below the confirmed request. */ .contact--guided{grid-template-columns:minmax(0,1fr) minmax(0,.5333fr);align-items:stretch;transition:grid-template-columns .5s var(--ease),column-gap .5s var(--ease)} .contact--guided .contact__form-wrap{display:flex;min-width:0} .contact--guided .cform{display:flex;flex-direction:column;width:100%;min-width:0} .contact--guided .form-navigation{margin-top:auto;padding-top:28px} .contact--guided .contact__side{min-width:0;transition:opacity .2s ease,transform .4s var(--ease);align-self:start} .contact--guided.contact--expanded{grid-template-columns:minmax(0,1fr) minmax(0,0fr);column-gap:0} .contact--expanded .contact__side{opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;transform:translateX(20px);height:0} .contact--guided .form-progress__title:focus{outline:none} .contact--guided.contact--confirmed{grid-template-columns:minmax(0,1fr);gap:32px} .contact--confirmed .contact__side{opacity:1;visibility:visible;pointer-events:auto;overflow:visible;transform:none;height:auto} .contact--confirmed .ccard{padding:36px} .contact--confirmed .ccard__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .contact--confirmed .cform__result{padding:36px;background:var(--surface);border:0;border-radius:16px;font-size:22px;line-height:1.5;color:var(--ink)} @media(max-width:700px){.contact--guided,.contact--guided.contact--expanded{grid-template-columns:minmax(0,1fr);gap:28px}.contact--expanded:not(.contact--confirmed) .contact__side{display:none}.contact--confirmed .ccard__list{grid-template-columns:1fr}.contact--confirmed .ccard,.contact--confirmed .cform__result{padding:26px}.contact--confirmed .cform__result{font-size:19px}} @media(prefers-reduced-motion:reduce){.contact--guided,.contact--guided .contact__side{transition:none}} /* Coordinate the sidebar fade with the expanding form. */ .contact--guided{transition:grid-template-columns .7s cubic-bezier(.22,1,.36,1),column-gap .7s cubic-bezier(.22,1,.36,1)} .contact--guided .contact__side{transition:opacity .35s ease .16s,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s} .contact--expanded:not(.contact--confirmed) .contact__side{transition:opacity .18s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s .18s;transform:translateX(12px)} .contact--guided .form-progress__track span{transition:width .55s cubic-bezier(.22,1,.36,1)} @media(prefers-reduced-motion:reduce){.contact--guided,.contact--guided .contact__side,.contact--guided .form-progress__track span{transition:none}} /* Branded dropdown lists, backed by the original form selects. */ .select-custom{position:relative} .select-trigger{display:flex;align-items:center;text-align:left;padding-right:42px;cursor:pointer} .select-options{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:15;max-height:280px;overflow-y:auto;background:#fff;border:1px solid #dedbd7;border-radius:12px;padding:6px;box-shadow:0 14px 30px -12px #0003;animation:select-open .18s ease-out} .select-option{padding:11px 12px;border-radius:7px;font-size:15px;line-height:1.4;cursor:pointer} .select-option:hover,.select-option.is-highlighted{background:#f4f0e3;color:#785d17} .select-option[aria-selected=true]{color:#785d17;background:#f8f5eb} .select-custom:has(.select-trigger[aria-expanded=true]){z-index:16} @keyframes select-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.select-options{animation:none}} .heading-playground{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none} .heading-scattered{opacity:0!important} @media(prefers-reduced-motion:reduce){.heading-playground{display:none}.heading-scattered{opacity:1!important}} /* Keep header layout intact while its controls join the heading explosion. */ .header-piece-away{opacity:0!important;pointer-events:none!important} .heading-charge-source,.heading-charge-source *{animation:none!important;mask-image:none!important;-webkit-mask-image:none!important;opacity:1!important} .site-foot--minimal .site-foot__brand{width:max-content;max-width:100%} .site-foot--minimal .footer-brand{width:100%;padding:0;grid-area:auto} .site-foot--minimal .footer-brand .brand__stage{height:16px} .site-foot--minimal .footer-brand .brand__mark{position:absolute;left:0;top:0;width:100%;height:auto} .site-foot--minimal .footer-brand .brand__icon{width:30px;height:30px} /* One continuous selection surface connects each service with its preview. */ .services--smooth{position:relative;isolation:isolate} .services--smooth::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:var(--service-x);top:0;width:var(--service-width);height:var(--service-height);transform:translateY(var(--service-y));border-radius:20px;background:var(--surface);transition:transform .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1)} .services--smooth::after{content:"";position:absolute;pointer-events:none;left:var(--service-x);top:0;width:2px;height:calc(var(--service-height) - 56px);transform:translateY(calc(var(--service-y) + 28px));background:var(--accent);border-radius:2px;transition:transform .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1)} .services--smooth .service--active{background:transparent} .services--smooth .service::before{display:none} .services--smooth .service{transition:border-color .25s ease} .services--smooth .service:focus-visible{outline:2px solid var(--accent);outline-offset:4px} .services-stage__object{transition:opacity .5s cubic-bezier(.22,1,.36,1);pointer-events:none} @media(prefers-reduced-motion:reduce){.services--smooth::before,.services--smooth::after,.services-stage__object{transition:none}} /* Short, readable entrances and quick selection feedback on small screens only. */ @media(max-width:700px){ .sec--services .service[data-reveal]{opacity:1;transform:none;transition-delay:0s} .sec--services .services-stage__media{animation:none;opacity:1;transform:none} .sec--services .services-stage__object{transition-duration:.28s} .sec--services .services--smooth::before,.sec--services .services--smooth::after{transition-duration:.26s} .sec--services .service{touch-action:pan-y; -webkit-tap-highlight-color:transparent} .sec--services .service:active .service__title{color:var(--accent)} } @media(max-width:700px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--services .service{animation:service-mobile-enter linear both;animation-timeline:view();animation-range:entry 0% cover 24%} @keyframes service-mobile-enter{from{opacity:.85;transform:translateX(18px)}to{opacity:1;transform:none}} } } /* References: earlier settling, deliberate previews, and clear link feedback. */ .sec--refs .ref-card__link{border-radius:14px;touch-action:pan-y} .sec--refs .ref-card__link:focus-visible{outline:2px solid var(--accent);outline-offset:8px} .sec--refs .ref-card__frame{transition:transform .32s cubic-bezier(.22,1,.36,1)} .sec--refs .browser{transition:box-shadow .32s ease} .sec--refs .browser__view img{transition:object-position .6s cubic-bezier(.22,1,.36,1)} .sec--refs .ref-card__name{transition:color .2s ease} .sec--refs .ref-card__ext{transition:transform .25s cubic-bezier(.22,1,.36,1)} .sec--refs .ref-card__link:hover .browser__view img{object-position:top} @media(hover:hover) and (pointer:fine){ .sec--refs .ref-card__link:hover .ref-card__frame,.sec--refs .ref-card__link:focus-visible .ref-card__frame{transform:translateY(-6px)} .sec--refs .ref-card__link:hover .browser{box-shadow:0 24px 42px -22px #35353580} .sec--refs .ref-card__link:hover .browser__view img,.sec--refs .ref-card__link:focus-visible .browser__view img{object-position:bottom;transition:object-position 3s linear .15s} .sec--refs .ref-card__link:hover .ref-card__name,.sec--refs .ref-card__link:focus-visible .ref-card__name{color:var(--ink)} .sec--refs .ref-card__link:hover .ref-card__ext{transform:translate(2px,-2px)} } @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--refs .ref-card{animation-range:entry 0% cover 36%} } } @media(max-width:700px){ .sec--refs .refs{gap:42px;margin-block:48px} .sec--refs .ref-card,.sec--refs .ref-card:first-child,.sec--refs .ref-card:last-child{transform:none} .sec--refs .ref-card__link:hover .ref-card__frame{transform:none} .sec--refs .ref-card__link .browser__view img{object-position:top;transition:none} .sec--refs .ref-card__body{margin:18px 0 0} .sec--refs .ref-card__name{min-height:44px} .sec--refs .ref-card__link:active .ref-card__name{color:var(--accent)} } @media(max-width:700px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--refs .ref-card{animation:reference-mobile-enter linear both;animation-timeline:view();animation-range:entry 0% cover 24%} @keyframes reference-mobile-enter{from{opacity:.85;transform:translateY(22px)}to{opacity:1;transform:none}} } } @media(prefers-reduced-motion:reduce){ .sec--refs .ref-card__link .browser__view img{object-position:top!important} .sec--refs .ref-card__link .ref-card__frame{transform:none!important} } .services-mobile-track{display:contents} @media(max-width:700px){ .services-mobile-track.is-mobile{display:block;position:relative} .services-mobile-track.is-mobile .services-stage{position:sticky;top:80px;gap:10px;display:flex;flex-direction:column} .services-mobile-track.is-mobile .services-stage__media{position:relative;top:auto;width:min(100%,var(--mobile-laptop-size,320px));margin:0 auto;flex:none;animation:none!important;transform:none} .services-mobile-track.is-mobile .services{position:relative;width:100%;height:calc(var(--mobile-row-height,160px)*3);overflow:clip;display:block} .services-mobile-track.is-mobile .service{position:absolute;top:0;left:0;width:100%;margin:0;padding:8px 14px;border-radius:16px;animation:none!important;transform:translateY(var(--mobile-row-y,0px));opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .2s ease;} .services-mobile-track.is-mobile .service--in-window{opacity:1;visibility:visible} .services-mobile-track.is-mobile .service__title{font-size:24px;margin-bottom:8px;line-height:1.12} .services-mobile-track.is-mobile .service__text{font-size:13px;line-height:1.4} .services-mobile-track.is-mobile .services--smooth::before,.services-mobile-track.is-mobile .services--smooth::after{display:none} .services-mobile-track.is-mobile .service--active{background:var(--surface);box-shadow:inset 2px 0 var(--accent)} .services-mobile-track.is-mobile .service:focus-visible{outline-offset:-3px} } @media(max-width:700px){ #faq .cta__actions{flex-direction:row;flex-wrap:nowrap;gap:8px;align-items:stretch} #faq .cta__actions .btn{min-width:0;padding:12px 10px;font-size:12px;gap:6px;white-space:nowrap;min-height:44px} #faq .cta__actions .ic{width:14px;height:14px;flex-shrink:0} } /* Keep the complete hero laptop inside the mobile viewport throughout its motion. */ @media(max-width:700px){ .hero__sculpture{width:calc(100% - 40px);max-width:100%;margin-inline:auto;padding:0} .hero__object{max-width:100%} } @media(max-width:700px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .hero__object{animation-name:sculpture-mobile} @keyframes sculpture-mobile{from{transform:scale(.96)}to{transform:scale(1)}} } } @media(max-width:700px){ .services-mobile-track.is-mobile .service{transition:background-color .35s ease;will-change:transform} .services-mobile-track.is-mobile .service--in-window{opacity:var(--mobile-row-opacity,1)} .services-mobile-track.is-mobile .services-stage__object{transition-duration:.45s} } /* Mobile pricing: an opaque, pronounced upward entrance. */ @media(max-width:700px){ .sec--pricing .plan,.sec--pricing .plan[data-reveal]{opacity:1!important;transition: none} } @media(max-width:700px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--pricing .plan{animation:pricing-mobile-rise cubic-bezier(.16,1,.3,1) both;animation-timeline:view();animation-range:entry 0% cover 38%} @keyframes pricing-mobile-rise{from{opacity:1;transform:translateY(220px)}to{opacity:1;transform:translateY(0)}} } } /* The three process steps rise in order, with each number and copy kept together. */ @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--about .steps{view-timeline-name:--about-steps;view-timeline-axis:block} .sec--about .step{animation:about-step-rise cubic-bezier(.16,1,.3,1) both;animation-timeline:--about-steps;animation-range:entry 0% cover 34%} .sec--about .step:nth-child(2){animation-range:entry 12% cover 44%} .sec--about .step:nth-child(3){animation-range:entry 24% cover 54%} @keyframes about-step-rise{from{transform:translateY(110px)}to{transform:translateY(0)}} } } /* Map content stays neutral until the visitor interacts with it. */ .mapart__frame{filter:grayscale(1);transition:filter .35s ease} @media(hover:hover){.mapart:hover .mapart__frame{filter:grayscale(0)}} @media(hover:none){.mapart:focus-within .mapart__frame{filter:grayscale(0)}} .mobile-nav__side{align-self:start;border:0;background:none;overflow:visible} .mobile-nav__side .ccard{width:100%;margin:0;border-radius:20px} .mobile-nav__side .ccard__list{align-content:start;gap:24px} .mobile-nav__side .ccard__title{margin-bottom:26px} .mobile-nav__side .ccard__k{margin-bottom:5px} .mobile-nav__side .ccard{background:#fff;border:1px solid #d3d3d3} @media(min-width:701px){ .mobile-nav__side{align-self:start} .mobile-nav__side .ccard{flex:none;display:block} .mobile-nav__side .ccard__list{flex:none;align-content:start} } @media(min-width:701px) and (prefers-reduced-motion:no-preference){ .services-cinematic .services-stage__media{animation:none;transform:none} .services-cinematic .services-stage__object{transform:var(--laptop-motion,none);transform-origin:50% 50%} } /* Click-to-explore references: scrolling inside the selected browser is native. */ .ref-preview{position:relative} .ref-preview__select{position:absolute;inset:0;width:100%;border:0;padding:0;border-radius:13px;background:transparent;cursor:zoom-in} .ref-preview__select[hidden]{display:none} .ref-preview__select:focus-visible{outline:2px solid var(--accent);outline-offset:5px} .sec--refs .refs--interactive .ref-card__link .browser__view img{object-position:top!important;transition:none!important} .sec--refs .refs--interactive .ref-card__link:hover .ref-card__frame{transform:none} .sec--refs .refs--interactive .ref-card__name{color:var(--ink)} .sec--refs .refs--interactive.has-selection{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr) minmax(0,1fr);align-items:center;gap:24px;perspective:none} .sec--refs .refs--interactive.has-selection .ref-card{grid-column:var(--ref-order);grid-row:1;animation:none;transform:none;transform-origin:top left} .sec--refs .refs--interactive.has-selection .ref-card__body{margin:20px 0 0} .sec--refs .refs--interactive.has-selection .ref-card:not(.is-selected) .ref-card__name{font-size:15px} .sec--refs .refs--interactive.has-selection .ref-card:not(.is-selected) .ref-card__meta{font-size:9px;letter-spacing:.08em} .sec--refs .refs--interactive .is-selected .browser__view{height:min(60svh,560px);aspect-ratio:auto;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#b5b5b5 #eee;cursor:auto} .sec--refs .refs--interactive .is-selected .browser__view:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .sec--refs .refs--interactive .is-selected .browser__view picture{display:block;height:auto} .sec--refs .refs--interactive .is-selected .browser__view img{display:block;width:100%;height:auto;max-height:none;object-fit:initial} @media(max-width:700px){ .sec--refs .refs--interactive.has-selection{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 16px;padding:0} .sec--refs .refs--interactive.has-selection .ref-card{grid-row:2;grid-column:auto} .sec--refs .refs--interactive.has-selection .is-selected{grid-column:1/-1;grid-row:1} .sec--refs .refs--interactive.has-selection .ref-card:not(.is-selected) .browser__view{aspect-ratio:1.15} .sec--refs .refs--interactive.has-selection .ref-card__body{margin:12px 0 0} .sec--refs .refs--interactive.has-selection .ref-card__name{font-size:18px} .sec--refs .refs--interactive.has-selection .ref-card:not(.is-selected) .ref-card__meta{display:none} } /* Three distinct entrance directions, with no horizontal page overflow. */ section.sec--refs.has-chapter{overflow-x:clip;overflow-y:visible} @media(max-width:700px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--refs .refs:not(.has-selection) .ref-card:first-child{animation-name:reference-mobile-left} .sec--refs .refs:not(.has-selection) .ref-card:last-child{animation-name:reference-mobile-right} @keyframes reference-mobile-left{from{opacity:1;transform:translateX(-140px)}to{opacity:1;transform:none}} @keyframes reference-mobile-right{from{opacity:1;transform:translateX(140px)}to{opacity:1;transform:none}} @keyframes reference-mobile-enter{from{opacity:1;transform:translateY(140px)}to{opacity:1;transform:none}} } } /* Independent browser preview chrome with working window controls. */ .sec--refs .refs--interactive .browser__bar{position:relative;z-index:2;height:48px;padding:0 9px;gap:7px;background:#f1f1f1;border-bottom:1px solid #dedede;cursor:default} .browser-window-controls{display:flex;gap:1px;flex:none} .browser-window-control{width:20px;height:36px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer} .browser-window-control::before{content:'';width:10px;height:10px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 1px #00000012} .browser-window-control--minimize::before{background:#febc2e} .browser-window-control--expand::before{background:#28c840} .browser-window-control:disabled{cursor:default;opacity:1} .browser-window-control:not(:disabled):hover::before{box-shadow:inset 0 0 0 2px #0004} .browser-address{min-width:0;flex:1;display:flex;align-items:center;justify-content:center;height:28px;border-radius:6px;background:#fff;color:#555;font-size:10px;white-space:nowrap;text-decoration:none;padding:0 4px} .browser-address:focus-visible,.browser-window-control:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:5px} .refs.has-selection .ref-card:not(.is-selected) .browser__bar{gap:3px;padding-inline:5px} .refs.has-selection .ref-card:not(.is-selected) .browser-window-control{width:13px} .refs.has-selection .ref-card:not(.is-selected) .browser-window-control::before{width:8px;height:8px} .refs.has-selection .ref-card:not(.is-selected) .browser-address{font-size:9px} @media(max-width:700px){.refs.has-selection .ref-card:not(.is-selected) .browser__bar{height:auto;min-height:48px;flex-wrap:wrap;padding:4px}.refs.has-selection .ref-card:not(.is-selected) .browser-window-control{height:18px}.refs.has-selection .ref-card:not(.is-selected) .browser-address{flex-basis:100%;height:22px;font-size:9px}} /* Neutral window symbols distinguish this preview from branded browser chrome. */ .browser-window-control{color:#737373;border-radius:5px} .browser-window-control::before{display:none} .browser-window-control:not(:disabled):hover{background:#e3e3e3;color:var(--ink)} .browser-window-control:disabled{opacity:.35} .browser-address{border-radius:4px;background:#fafafa} .sec--refs .refs--interactive .browser__bar{background:#eceeed} .refs.has-selection .ref-card:not(.is-selected) .browser-window-control svg{width:11px;height:11px} /* Refined, neutral browser frame. */ .sec--refs .refs--interactive .browser{border-radius:14px;box-shadow:0 18px 38px -22px #20252b55} .sec--refs .refs--interactive .browser__bar{height:50px;padding-inline:12px;gap:12px;background:var(--surface);border-bottom:1px solid #dedfe1} .browser-window-controls{gap:2px} .browser-window-control{width:28px;height:36px;color:#646a70;transition:background .18s ease,color .18s ease;text-decoration:none} .browser-window-control:not(:disabled):hover{background:#dfe2e5;color:#20252b} .browser-address{height:30px;border-radius:7px;background:#fafbfc;color:#50565c;font-size:11px;letter-spacing:.01em;box-shadow:inset 0 0 0 1px #20252b08;transition:background .18s ease} .browser-address:hover{background:#fff} .refs.has-selection .ref-card:not(.is-selected) .browser__bar{padding-inline:8px;gap:6px} .refs.has-selection .ref-card:not(.is-selected) .browser-window-control{width:18px} .refs.has-selection .ref-card:not(.is-selected) .browser-address{font-size:9px;letter-spacing:0} @media(max-width:700px){.refs.has-selection .ref-card:not(.is-selected) .browser__bar{height:auto;padding:6px;gap:3px}.refs.has-selection .ref-card:not(.is-selected) .browser-address{height:24px}} /* A shared introduction for the two people behind Sidavo. */ .sec--team .team{display:block;max-width:1040px;margin-inline:auto} .team__portraits{display:grid;grid-template-columns:1fr 1fr;gap:40px} .team-person{margin:0;min-width:0} .team-person__portrait{aspect-ratio:5/6;overflow:hidden;border-radius:12px;background:#fff} .team-person__portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%} .team-person__placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#74736c} .team-person__placeholder>span{font-family:var(--f-display);font-size:clamp(64px,9vw,120px);letter-spacing:-.04em;font-weight:400} .team-person__placeholder small{font-size:13px} .team-person__name{font-family:var(--f-display);font-size:clamp(23px,2.3vw,30px);letter-spacing:-.025em;margin-top:20px;color:var(--ink)} .team__copy{max-width:710px;margin:64px auto 0;text-align:center;font-size:18px;line-height:1.65;color:var(--ink-3)} .team__intro{font-family:var(--f-display);font-size:clamp(25px,3vw,34px);line-height:1.3;letter-spacing:-.025em;color:var(--ink);margin-bottom:24px;text-wrap:balance} .team__legal{font-size:13px;margin-top:25px} @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .team__portraits{view-timeline-name:--team-entry;view-timeline-axis:block} .team-person{animation:team-left linear both;animation-timeline:--team-entry;animation-range:entry 0% cover 36%} .team-person:nth-child(2){animation-name:team-right} .team-person__portrait img{animation:team-photo linear both;animation-timeline:--team-entry;animation-range:entry 0% cover 48%} .team__copy{animation:team-copy linear both;animation-timeline:view();animation-range:entry 0% cover 28%} @keyframes team-left{from{transform:translateX(-260px)}to{transform:none}} @keyframes team-right{from{transform:translateX(260px)}to{transform:none}} @keyframes team-photo{from{transform:scale(1.025) translateY(4px)}to{transform:none}} @keyframes team-copy{from{transform:translateY(40px)}to{transform:none}} } } section.sec--team.has-chapter{overflow-x:clip;overflow-y:visible} @media(max-width:700px){ .team__portraits{grid-template-columns:1fr;gap:36px;max-width:420px;margin-inline:auto} .team-person__name{margin-top:15px} .team__copy{margin-top:44px;text-align:left;font-size:16px} .team__intro{font-size:26px} @media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){ .team-person,.team-person:nth-child(2){animation-name:team-mobile-left;animation-timeline:view();animation-range:entry 0% cover 24%} .team-person:nth-child(2){animation-name:team-mobile-right} .team-person__portrait img{animation:none} @keyframes team-mobile-left{from{transform:translateX(-140px)}to{transform:none}} @keyframes team-mobile-right{from{transform:translateX(140px)}to{transform:none}} }} } /* The location follows the form as a separate, scroll-revealed moment. */ @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .contact-map{view-timeline-name:--contact-map-entry;view-timeline-axis:block} .contact-map>.ccard--map{animation:contact-map-rise linear both;animation-timeline:--contact-map-entry;animation-range:entry 0% cover 55%;opacity:1;transition:none} .contact-map:focus-within>.ccard--map{animation:none;transform:none} @keyframes contact-map-rise{from{transform:translateY(120px)}to{transform:none}} } } /* Locally hosted signature lettering beneath the founders' portraits. */ .team-person__name{font-family:'Allura',cursive;font-weight:400;font-size:clamp(38px,4vw,54px);line-height:1.35;letter-spacing:0;text-align:center;color:#000;padding:.12em .1em;margin-top:14px} @media(max-width:700px){.team-person__name{font-size:42px;margin-top:10px}} /* Modern handwriting, locally hosted. */ .team-person__name{font-family:'Caveat',cursive;font-weight:400;font-size:clamp(36px,3.6vw,50px);line-height:1.4} .chapter-screen .team-title,.team-title{display:inline-block;width:max-content;max-width:100%;margin-inline:auto} .team-title__line{display:block;white-space:nowrap;transform:scale(.85);transform-origin:center} .team-title__logo{display:block;width:0;min-width:100%;height:auto;margin-top:.44em;filter:brightness(0) saturate(100%) invert(44%) sepia(54%) saturate(627%) hue-rotate(6deg) brightness(91%) contrast(88%)} @media(max-width:700px){.chapter-screen .team-title{font-size:clamp(26px,7.6vw,42px)}.team-person__name{font-size:40px}} /* Give the team chapter more breathing room before the portraits enter. */ .sec--team .chapter-track{margin-bottom:calc(48px - var(--chapter-tail,0px))} @media(max-width:700px){.sec--team .chapter-track{margin-bottom:calc(32px - var(--chapter-tail,0px))}} /* Connected signature lettering based on the supplied visual reference. */ @font-face{font-family:'Alex Brush';src:url('../fonts/alex-brush-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap} .team-person__name{font-family:'Alex Brush',cursive;font-size:clamp(38px,4vw,54px);font-weight:400;line-height:1.5;padding:.16em .16em;letter-spacing:0} @media(max-width:700px){.team-person__name{font-size:42px}} /* Keep the normal hero layout; only the laptop waits for scrolling. */ .hero-awaiting-scroll .hero__sculpture{visibility:hidden;pointer-events:none} /* Center the entire opening message; removing this state restores the normal hero. */ .hero.hero-awaiting-scroll{padding-top:0} .hero-awaiting-scroll .hero__inner{min-height:100svh;display:flex;align-items:center;justify-content:center;padding-block:90px;box-sizing:border-box} .hero-awaiting-scroll .hero__copy{width:100%;animation:none} .hero-awaiting-scroll .hero__sculpture{display:none} @media(max-height:550px){.hero-awaiting-scroll .hero__inner{padding-block:80px 30px}} /* A rounded rising surface echoes the button fill transition. */ .site-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;isolation:isolate;overflow:hidden;pointer-events:auto} .site-loader[hidden]{display:none} .site-loader::before{content:'';position:absolute;z-index:-1;left:-12%;right:-12%;bottom:0;height:165%;background:#080808;border-radius:46% 54% 0 0/80px 70px 0 0;transform:translateY(102%);transition:transform .65s var(--ease)} .site-loader.is-visible::before{transform:translateY(0)} .site-loader__art{position:relative;width:clamp(190px,30vw,340px);height:70px;filter:invert(1);opacity:0;transition:opacity .25s ease} .site-loader.is-visible .site-loader__art{opacity:1;transition-delay:.25s} .site-loader .brand__mark{position:absolute;width:100%;height:auto;top:50%;margin-top:-4.2%;animation:brand-word 3.4s var(--ease) infinite both} .site-loader .brand__icon{width:64px;height:64px;margin:-32px 0 0 -32px;animation:brand-sign 3.4s var(--ease) infinite both} html.site-is-loading{overflow:hidden} @media(prefers-reduced-motion:reduce){.site-loader::before{transition:none}.site-loader .brand__icon{display:none}.site-loader .brand__mark{opacity:1;transform:none}.site-loader__art{transition:none}} /* Desktop services trace a shallow arc as they cross the viewport. */ @media(min-width:701px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--services .service{animation:service-scroll-arc linear both;animation-timeline:view();animation-range:cover 0% cover 100%} @keyframes service-scroll-arc{ 0%{transform:translateX(150px);opacity:.18} 25%{transform:translateX(38px);opacity:.8} 50%{transform:translateX(0);opacity:1} 75%{transform:translateX(38px);opacity:.8} 100%{transform:translateX(150px);opacity:.18} } } } section.sec--services.has-chapter{overflow-x:clip;overflow-y:visible} /* Crisp price cards; Professional settles upright ahead of its neighbours. */ .sec--pricing .plan,.sec--pricing .plan[data-reveal]{opacity:1!important;filter:none} @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--pricing .plan{animation:pricing-clear-rise linear both;animation-timeline:view();animation-range:entry 0% cover 40%} .sec--pricing .plan--featured{animation-name:pricing-featured-rise;animation-range:entry 0% cover 34%;transform-origin:50% 100%} @keyframes pricing-clear-rise{from{transform:translateY(200px)}to{transform:none}} @keyframes pricing-featured-rise{0%{transform:perspective(1200px) translateY(240px) rotateX(7deg)}65%{transform:perspective(1200px) translateY(32px) rotateX(1deg)}100%{transform:perspective(1200px) translateY(0) rotateX(0)}} } } @media(max-width:700px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--pricing .plan{animation-range:entry 0% cover 38%} .sec--pricing .plan--featured{animation-range:entry 0% cover 34%} } } /* FAQ rows and their contact invitation share the same entrance and exit. */ @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--faq .faq__item,.sec--faq .cta{animation:faq-float-through linear both;animation-timeline:view();animation-range:cover 0% cover 100%;transition:none} @keyframes faq-float-through{ 0%{transform:translateY(260px);opacity:1} 35%,70%{transform:translateY(0);opacity:1} 100%{transform:translateY(-260px);opacity:1} } } } /* Give the mobile hero its own opening viewport before the introductory text. */ @media(max-width:700px){ .hero:not(.hero-awaiting-scroll){padding-top:160px;min-height:100svh;box-sizing:border-box} } /* The first scroll owns this transition; avoid restarting the page-load animation. */ .hero-revealed .hero__copy,.hero-revealed .hero__sculpture{animation:none} /* Unfold the desktop price comparison from the Professional card. */ @media(min-width:701px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--pricing .plans{view-timeline-name:--pricing-unfold;view-timeline-axis:block;isolation:isolate;perspective:1600px} .sec--pricing .plans .plan{animation:pricing-unfold-left linear both;animation-timeline:--pricing-unfold;animation-range:entry 0% entry 58.9svh;transform-origin:right center;z-index:1} .sec--pricing .plans .plan:last-child{animation-name:pricing-unfold-right;transform-origin:left center} .sec--pricing .plans .plan--featured{animation-name:pricing-center-arrive;z-index:2;transform-origin:center bottom} @keyframes pricing-center-arrive{0%{transform:translateY(160px)}30%,100%{transform:none}} @keyframes pricing-unfold-left{0%,30%{visibility:hidden;transform:translateX(calc(100% + 24px)) scale(.88) rotateY(-14deg)}31%{visibility:visible;transform:translateX(calc(100% + 24px)) scale(.88) rotateY(-14deg)}100%{visibility:visible;transform:none}} @keyframes pricing-unfold-right{0%,30%{visibility:hidden;transform:translateX(calc(-100% - 24px)) scale(.88) rotateY(14deg)}31%{visibility:visible;transform:translateX(calc(-100% - 24px)) scale(.88) rotateY(14deg)}100%{visibility:visible;transform:none}} .sec--pricing .plans:has(.plan :focus-visible) .plan{animation:none;visibility:visible;transform:none} } } /* Hosting stays crisp throughout its upward entrance. */ .sec--pricing .hosting{opacity:1!important;filter:none!important} @media(prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .sec--pricing .hosting{animation:hosting-clear-rise linear both;animation-timeline:view();animation-range:entry 0% cover 42%} @keyframes hosting-clear-rise{from{transform:translateY(180px)}to{transform:none}} } } /* Smartphone experience. All rules are isolated from desktop and tablet layouts. */ @media(max-width:700px){ :root{--gut:22px;--sec-y:72px} .site-head{padding:8px 18px;background:#fff;min-height:64px} .site-head .brand{width:108px}.site-head__cta{min-height:44px;font-size:11px;padding:8px 0 8px 8px} .burger{min-height:44px;min-width:72px;font-size:13px}.site-head .brand__mark{width:108px} .mobile-nav{padding:90px 22px max(24px,env(safe-area-inset-bottom));height:100dvh} .mobile-nav__grid{display:flex;flex-direction:column;gap:30px;min-height:0} .mobile-nav__main{padding:0;border:0}.mobile-nav__list{gap:0}.mobile-nav__list a{min-height:56px;padding:13px 0}.mobile-nav__label{font-size:27px;line-height:1.2} .mobile-nav__side{padding:0}.mobile-nav__side .ccard{padding:22px}.mobile-nav__side .ccard__title{font-size:22px;margin-bottom:22px}.mobile-nav__side .ccard__list{gap:18px}.mobile-nav__side .ccard__v--link{display:inline-flex;align-items:center;min-height:44px} .hero:not(.hero-awaiting-scroll){padding-top:112px;min-height:0}.hero__copy{max-width:420px}.hero__title{font-size:clamp(36px,10vw,48px);line-height:1.08;letter-spacing:-.035em} .hero__lead{font-size:17px;line-height:1.6;margin-top:22px}.hero__actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:24px auto 0;max-width:340px}.hero__actions .btn{font-size:14px;min-height:48px} .hero__sculpture{width:calc(100% - 36px);max-width:420px;margin:22px auto 0}.hero__object{animation:none;transform:none} .intro{padding:58px 22px 70px}.intro__inner{font-size:clamp(25px,7vw,32px);line-height:1.3}.intro__accent{margin-top:30px}.intro .fill-line{animation:none;color:inherit;background:none;-webkit-text-fill-color:currentColor} .sec,.sec--refs,.sec--about,.sec--team,.sec--services{padding-top:64px;padding-bottom:64px;overflow-x:clip} .sec-head{margin-bottom:32px;text-align:left;max-width:none}.sec-title{font-size:clamp(29px,8vw,37px);line-height:1.13;letter-spacing:-.03em;padding:0;margin:0;animation:none;mask-image:none;-webkit-mask-image:none} .sec-lead{font-size:16px;line-height:1.6;margin-top:18px;animation:none;opacity:1;transform:none} .sec--refs::before,.sec--refs::after,.sec--pricing::before,.sec--pricing::after,.sec--about::before,.sec--about::after{display:none} .sec--refs .refs,.sec--refs .refs.has-selection{display:flex;flex-direction:column;gap:36px;margin-top:0} .sec--refs .refs .ref-card,.sec--refs .refs.has-selection .ref-card{width:100%;animation:none;transform:none;order:initial;opacity:1} .sec--refs .refs .ref-card__link{transform:none}.sec--refs .browser{box-shadow:0 16px 32px -24px #0006;border-radius:12px} .sec--refs .refs--interactive .browser__bar{height:48px;padding:0 6px;gap:0}.browser-window-control{width:40px;height:44px;min-width:40px}.browser-address{font-size:10px;height:36px;padding:0 6px} .sec--refs .ref-preview__viewport{max-height:390px}.sec--refs .refs.has-selection .ref-card.is-selected .ref-preview__viewport{height:58svh;max-height:480px} .ref-card__meta{font-size:11px;line-height:1.5;margin-top:18px}.ref-card__name{font-size:19px;line-height:1.4;min-height:44px;display:flex;align-items:center;justify-content:center} .services-mobile-track.is-mobile{height:auto!important}.services-mobile-track.is-mobile .services-stage{position:static;display:flex;flex-direction:column;gap:0;min-height:0;max-height:none} .mobile-service-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-bottom:20px} .mobile-service-tabs button{min-height:46px;border:1px solid #d3d3d3;border-radius:var(--r-button);font-size:14px;padding:10px;color:var(--ink);background:#fff} .mobile-service-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff} .services-mobile-track.is-mobile .services-stage__media{position:relative;top:auto;width:100%;max-width:350px;height:auto;aspect-ratio:1;margin:0 auto 14px;animation:none;transform:none} .services-mobile-track.is-mobile .services{display:block;position:static;height:auto;overflow:visible;width:100%} .services-mobile-track.is-mobile .service{position:relative;inset:auto;width:100%;min-height:155px;margin:0;padding:22px;border:0;transform:none;animation:none;opacity:1;pointer-events:auto} .services-mobile-track.is-mobile .service[hidden]{display:none!important}.services-mobile-track.is-mobile .service--active{background:var(--surface);box-shadow:none} .services--smooth::before,.services--smooth::after,.service::before{display:none}.service__title{font-size:27px;margin-bottom:12px}.service__text{font-size:16px;line-height:1.6;max-width:none} .plans{gap:30px;margin-top:38px}.sec--pricing .plan{animation:none;transform:none;padding:28px 24px;border-radius:18px;box-shadow:none}.sec--pricing .plan--featured{padding-top:38px} .plan__name{font-size:12px;color:#686868}.plan__amount{font-size:48px}.plan__amount--text{font-size:32px}.plan__lead{min-height:0;margin-bottom:22px}.plan__price{margin:20px 0}.plan__cta{min-height:48px;font-size:14px} .mobile-plan-details{margin-bottom:24px}.mobile-plan-details summary{font-size:14px;min-height:46px;padding:12px 0;cursor:pointer;border-top:1px solid var(--line-soft);list-style-position:inside}.plan--featured .mobile-plan-details summary{border-color:#ffffff30} .mobile-plan-details .plan__features{padding-top:16px;border:0;margin-bottom:0;font-size:14px;gap:14px}.hosting{padding:26px 24px;margin-top:28px;border-radius:18px;box-shadow:none}.hosting__title{font-size:24px}.hosting__lead{font-size:16px;line-height:1.6}.hosting__price{padding:0}.hosting__list{font-size:14px} .sec--faq .faq__item,.sec--faq .cta,.sec--pricing .hosting{animation:none;transform:none;opacity:1}.faq__q{min-height:60px;font-size:17px;line-height:1.4;padding-block:18px}.faq__a{font-size:16px;line-height:1.65} .cta{margin-top:38px;padding:26px 0}.cta__title{font-size:25px}.cta__lead{font-size:16px;line-height:1.6}#faq .cta__actions{display:flex;flex-direction:column;gap:10px}#faq .cta__actions .btn{font-size:14px;min-height:48px} .team-title{display:block;width:100%;max-width:420px}.team-title__line{white-space:normal;transform:none}.team-title__logo{margin-top:.55em} .team__portraits{gap:16px;grid-template-columns:1fr 1fr}.team-person{animation:none;transform:none}.team-person__portrait{border-radius:12px;aspect-ratio:4/5}.team-person__initials{font-size:clamp(48px,15vw,70px)}.team-person__placeholder{font-size:11px}.team-person__name{font-size:clamp(27px,7.8vw,36px);line-height:1.4;white-space:nowrap;padding:.2em 0} .team__copy{margin-top:30px;text-align:left}.team__lead{font-size:25px;line-height:1.3}.team__text{font-size:16px;line-height:1.65}.team__legal{font-size:12px;line-height:1.6} .contact{gap:28px;display:flex;flex-direction:column}.contact__form-wrap{width:100%}.cform__grid{gap:20px}.form-progress{margin-bottom:24px}.form-progress__title{font-size:25px}.field__label{font-size:14px}.field__input{font-size:16px;min-height:50px;padding:13px 14px}.field__textarea{min-height:160px}.form-panel{min-height:0!important}.form-navigation{margin-top:26px;gap:12px}.form-navigation .btn{min-height:48px;font-size:14px;flex:1} .select-custom select:not([hidden]){display:block}.select-trigger[hidden]{display:none!important}.select-options{display:none!important}.check{min-height:44px;align-items:flex-start}.check__text{font-size:13px;line-height:1.6}.cform__privacy{font-size:12px;line-height:1.6}.cform__submit{width:100%;min-height:50px}.field__challenge{flex-wrap:wrap}.field__input--num{width:100%}.budget-slider input[type=range]{min-height:44px}.contact--guided .contact__side{display:block}.ccard{padding:26px 24px;border-radius:18px}.ccard__title{font-size:24px}.ccard__list{gap:22px}.ccard__v{font-size:16px}.ccard__v--link{display:inline-flex;align-items:center;min-height:44px} .contact-map{margin-top:28px}.contact-map .ccard--map{padding:0;animation:none;transform:none}.contact-map .ccard__map{height:320px}.mapgate{padding:20px}.mapgate__panel{padding:22px;max-width:290px}.mapgate__btn{min-height:44px}.mapgate__link{padding:12px 0;font-size:12px} .site-foot--minimal{padding:42px 0 max(24px,env(safe-area-inset-bottom))}.site-foot__top{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:28px}.site-foot__brand{grid-column:1/-1}.site-foot__title{font-size:13px;margin-bottom:10px}.site-foot__col:last-child{grid-column:1/-1}.site-foot__col a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}.site-foot__col li{margin:0}.site-foot__bottom{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.site-foot__legal{display:flex;flex-wrap:wrap;gap:4px 20px}.site-foot__legal a{display:inline-flex;align-items:center;min-height:44px;font-size:13px} .legal__head{padding:112px 0 34px;text-align:left}.legal__title{font-size:32px;line-height:1.15}.legal__sub{font-size:16px;line-height:1.6}.legal__body{padding:20px 0 64px}.legal__body p,.legal__ul{font-size:16px;line-height:1.7}.legal__h{font-size:23px;line-height:1.25;scroll-margin-top:88px}.legal__dl{display:block}.legal__dl dt{font-weight:500;margin-top:18px}.legal__dl dd{margin:4px 0 0} @media(prefers-reduced-motion:no-preference){.sec--pricing .plan,.sec--pricing .hosting,.team-person,.sec--faq .faq__item{animation:mobile-gentle-rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes mobile-gentle-rise{from{translate:0 18px}to{translate:0 0}}} } /* Keep the first four inputs halfway between the step title and navigation. */ .contact--guided .cform__step:has(#sidavo_name):not([hidden]){flex:1;display:flex;flex-direction:column;justify-content:center} .contact--guided .cform__step:has(#sidavo_name)>.cform__grid{width:100%} .button-charge-layer::before,.button-charge-layer::after,.button-charge-layer .ctaroll__in::after{content:none!important;display:none!important} /* Small accent text needs stronger contrast than large display headings. */ .plan__badge{color:#000} .plan--featured .plan__cta{--fill-ink:#000} .faq__item[open]>.faq__q .faq__q-text,.faq__q:hover{color:#85691d} /* Mobile portraits enter together from opposite sides on a shared timeline. */ @media(max-width:700px) and (prefers-reduced-motion:no-preference){ @supports(animation-timeline:view()){ .team__portraits .team-person:nth-child(1),.team__portraits .team-person:nth-child(2){animation:team-mobile-left linear both;animation-timeline:--team-entry;animation-range:entry 0% cover 36%;translate:none} .team__portraits .team-person:nth-child(2){animation-name:team-mobile-right} } } /* Let the contact card fill the mobile column rather than shrink to its contents. */ @media(max-width:700px){.contact .contact__side{align-self:stretch;width:100%;min-width:0}.contact__side>.ccard{width:100%;box-sizing:border-box}} /* Keep the larger wordmark inside the heading's animated mask. */ .chapter-screen .team-title,.team-title{width:min(100%,10em);max-width:100%} .team-title__line{transform:none;white-space:normal;text-align:center} .team-title__logo{width:100%;min-width:0;max-width:100%;height:auto;margin-inline:0} @media(max-width:700px){.chapter-screen .team-title{font-size:clamp(30px,8vw,42px)}} /* Match the wordmark letter height to the heading while preserving its aspect ratio. */ .team-title .team-title__logo{width:auto;height:.75em;min-width:0;max-width:100%;object-fit:contain;margin-inline:auto} .team-title__wordmark{display:flex;align-items:baseline;justify-content:center;gap:.08em;margin-top:.44em;color:var(--accent);line-height:1} .team-title__wordmark .team-title__logo{height:.775em;width:auto;max-width:calc(100% - .3em);margin:0;flex:0 1 auto;object-fit:contain} .team-title__period{flex:none;line-height:1} @media(max-width:700px){.team-title__wordmark{margin-top:.55em}} /* Avoid a second separator immediately after the company details. */ .legal__dl + #offenlegung{border-top:0} /* Mobile service tabs: keep the selected description visible and next to its controls. */ @media(max-width:700px){ .services-mobile-track.is-mobile .mobile-service-tabs{order:0} .services-mobile-track.is-mobile .services{order:1;margin:0 0 20px} .services-mobile-track.is-mobile .services-stage__media{order:2} .services-mobile-track.is-mobile .service:not([hidden]){visibility:visible;opacity:1;min-height:0;padding:4px 0 0;background:transparent;border-radius:0} .services-mobile-track.is-mobile .service__title{font-size:24px;line-height:1.2;margin:0 0 10px} .services-mobile-track.is-mobile .service__text{font-size:16px;line-height:1.6;max-width:none} } /* Keep the following section below the first mobile viewport. */ @media(max-width:700px){ .hero:not(.hero-awaiting-scroll){min-height:100vh;min-height:100dvh;box-sizing:border-box} } /* Slightly larger desktop portraits; retain the existing heading spacing. */ @media(min-width:701px){.sec--team .team{max-width:1080px}} /* Match the price dividers to the full desktop text-row height. */ @media(min-width:701px){.hosting__price{align-self:stretch;display:flex;flex-direction:column;justify-content:center}} .hosting__billing{font-size:12px;line-height:1.4;color:var(--ink-3);margin-top:6px} /* Hide captions only while a reference preview is expanded. */ .refs.has-selection .ref-card__meta,.refs.has-selection .ref-card__name{display:none} @media(min-width:701px){ .sec--refs .refs--interactive.has-selection{margin-bottom:44px} .sec--refs .refs--interactive.has-selection .ref-card__body{display:none} .sec--refs .refs--interactive.has-selection .is-selected .browser__view{height:min(560px,max(180px,calc(100dvh - 360px)))} .sec--refs .refs.has-selection + .cta{padding-top:20px;margin-top:0} .sec--refs .refs.has-selection + .cta .cta__lead{margin:10px auto 16px} } /* Section navigation: one wordmark-to-icon morph, then an inward reveal. */ .site-loader--navigation::before{inset:0;width:100%;height:100%;border-radius:0;transform:none;clip-path:circle(150% at 50% 50%);opacity:0;transition:opacity .3s ease,clip-path .7s cubic-bezier(.65,0,.35,1)} .site-loader--navigation.is-visible::before{transform:none;opacity:1} .site-loader--navigation .site-loader__art{opacity:0;transition:opacity .2s ease,filter .6s ease} .site-loader--navigation.is-visible .site-loader__art{opacity:1;transition-delay:0s} .site-loader--navigation .brand__mark,.site-loader--navigation .brand__icon{animation:none} .site-loader--navigation.is-visible .brand__mark{animation:loader-word-to-star 1s ease-in-out both} .site-loader--navigation.is-visible .brand__icon{display:block;animation:loader-star-arrive 1s ease-in-out both} @keyframes loader-word-to-star{0%,25%{opacity:1;transform:scaleX(1);filter:blur(0)}75%,100%{opacity:0;transform:scaleX(.12);filter:blur(3px)}} @keyframes loader-star-arrive{0%,35%{opacity:0;transform:scale(.2) rotate(-70deg)}85%,100%{opacity:1;transform:scale(1) rotate(0)}} .site-loader--navigation.is-exiting::before{clip-path:circle(0 at 50% 50%)} .site-loader--navigation.is-exiting .site-loader__art{filter:invert(0)} .site-loader--navigation.is-exiting .brand__icon{animation:loader-star-shimmer .9s ease-out both} @keyframes loader-star-shimmer{0%,45%{opacity:1;transform:scale(1);filter:brightness(0)}65%{opacity:1;transform:scale(1.12);filter:brightness(1.6) drop-shadow(0 0 9px #b79a43)}100%{opacity:0;transform:scale(.12);filter:brightness(2) drop-shadow(0 0 2px #b79a43)}} @media(prefers-reduced-motion:reduce){.site-loader--navigation::before{transition:none}.site-loader--navigation.is-visible .brand__mark,.site-loader--navigation.is-visible .brand__icon{animation:none}.site-loader--navigation.is-visible .brand__icon{display:none}.site-loader--navigation.is-visible .brand__mark{opacity:1;transform:none}} /* Navigation shares one background; content motion remains scroll-driven. */ html.site-is-navigating:not(.site-navigation-local-contact), .site-is-navigating:not(.site-navigation-local-contact) body, .site-is-navigating:not(.site-navigation-local-contact) .site-main, .site-is-navigating:not(.site-navigation-local-contact) .site-main>section, .site-is-navigating:not(.site-navigation-local-contact) .site-foot{background-color:var(--navigation-surface)!important} .site-is-navigating:not(.site-navigation-local-contact) .sec--refs::before,.site-is-navigating:not(.site-navigation-local-contact) .sec--refs::after, .site-is-navigating:not(.site-navigation-local-contact) .sec--pricing::before,.site-is-navigating:not(.site-navigation-local-contact) .sec--pricing::after, .site-is-navigating:not(.site-navigation-local-contact) .sec--about::before,.site-is-navigating:not(.site-navigation-local-contact) .sec--about::after, .site-is-navigating:not(.site-navigation-local-contact) .site-foot::before{background:none!important} /* Mobile footer disclosures use the existing section headings. */ .footer-section-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;text-align:left;font:inherit;color:inherit} .footer-section-toggle:disabled{cursor:default} .footer-section-toggle svg{display:none;flex:none;transition:transform .25s var(--ease)} .footer-section-toggle[aria-expanded=true] svg{transform:rotate(180deg)} @media(max-width:700px){ .site-foot--minimal .site-foot__top{grid-template-columns:1fr;gap:0} .site-foot--minimal .site-foot__col{grid-column:1/-1;padding:0;border-top:1px solid var(--line-soft)} .site-foot--minimal .site-foot__title{margin:0} .footer-section-toggle{min-height:56px;font-size:14px;color:var(--ink)} .footer-section-toggle svg{display:block} .site-foot__col>ul:not([hidden]){padding-bottom:16px} } @media(prefers-reduced-motion:reduce){.footer-section-toggle svg{transition:none}} /* Reserve the tallest mobile service description so the laptop never jumps between tabs. */ @media(max-width:700px){ .services-mobile-track.is-mobile .services{display:grid;grid-template-columns:minmax(0,1fr);align-items:start} .services-mobile-track.is-mobile .services>.service{grid-area:1/1;min-height:0;padding:4px 0 0;background:transparent;border-radius:0} .services-mobile-track.is-mobile .services>.service[hidden]{display:block!important;visibility:hidden!important;pointer-events:none} } /* Mobile reading and touch layout; desktop styles remain above this breakpoint. */ @media (max-width:700px){ :root{--gut:clamp(18px,5.5vw,28px);--sec-y:76px} .hero.hero-awaiting-scroll,.mobile-hero-opening .hero{padding-top:0;min-height:100svh} .hero.hero-awaiting-scroll .hero__inner,.mobile-hero-opening .hero__inner{min-height:100svh;display:flex;align-items:center;justify-content:center;padding-block:100px 48px;box-sizing:border-box} .mobile-hero-opening .hero__sculpture{display:none} .hero:not(.hero-awaiting-scroll){padding-top:104px} .hero__copy{width:100%;max-width:520px;text-align:center} .hero__title{font-size:clamp(44px,13vw,64px);line-height:1.06;letter-spacing:-.035em} .hero__lead{font-size:17px;line-height:1.6;max-width:34ch;margin:24px auto 0} .hero__actions{display:grid;grid-template-columns:1fr 1.12fr;flex-direction:row;gap:10px;width:100%;max-width:430px;margin:28px auto 0} .hero__actions .btn{min-width:0;min-height:56px;padding:12px 10px;font-size:15px;line-height:1.3;gap:6px} .hero__actions .btn span{min-width:0;white-space:normal} .hero__actions .ic{display:none} .sec-head{max-width:600px;margin:0 auto 38px;text-align:center} .sec-title,.chapter-screen .sec-title,.chapter-screen .team-title,.about__copy .sec-title{font-size:clamp(38px,10.8vw,52px);line-height:1.12;font-weight:550;letter-spacing:-.03em;text-wrap:balance} .sec-title em{font:inherit} .sec-lead{font-size:17px;line-height:1.65;max-width:38ch;margin:22px auto 0;text-align:inherit} .intro__inner{font-size:clamp(29px,8vw,39px);line-height:1.3;text-align:center} .service__title,.services-mobile-track.is-mobile .service__title{font-size:29px;line-height:1.2;font-weight:500;margin-bottom:14px} .service__text,.plan__lead,.hosting__lead,.faq__a,.cta__lead,.team__copy{font-size:17px;line-height:1.65} .hosting__title,.cta__title,.ccard__title,.form-progress__title{font-size:clamp(28px,7.7vw,34px);line-height:1.2;font-weight:500} .plan__name{font-size:19px;line-height:1.3;font-weight:500;letter-spacing:.02em} .mobile-plan-details .plan__features,.hosting__list{font-size:16px;line-height:1.6} .mobile-plan-details summary{font-size:16px;min-height:48px} .faq__q{font-size:19px;line-height:1.4;min-height:64px;gap:14px} .ref-card__name{font-size:22px;line-height:1.3}.ref-card__meta{font-size:12px} .team__copy{margin-top:32px;text-align:center} .team__intro{font-size:22px;line-height:1.45} .team__legal{font-size:14px;line-height:1.6} .team-person__name{font-size:clamp(21px,6.1vw,36px);white-space:nowrap;letter-spacing:0;padding-inline:0} .btn:not(.site-head__cta),.plan__cta,#faq .cta__actions .btn,.form-navigation .btn{min-height:50px;font-size:16px;padding:13px 18px} .hero__actions .btn{min-height:56px;font-size:15px;padding:12px 10px} .mobile-service-tabs button{min-height:50px;font-size:16px;padding:12px 8px} .field__label{font-size:15px}.field__input{font-size:16px;min-height:52px} .check__text,.cform__privacy{font-size:14px;line-height:1.6} .check input{min-width:20px;min-height:20px;margin-top:3px} .ccard__k{font-size:14px}.ccard__v{overflow-wrap:anywhere} .mapgate__text,.mapgate__copy{font-size:16px;line-height:1.6} .mapgate__link{font-size:14px;min-height:44px} .legal__head{text-align:center}.legal__title{font-size:clamp(38px,10.5vw,50px);line-height:1.15} .legal__h{font-size:28px;line-height:1.25}.legal__sub,.legal__body p,.legal__ul{font-size:17px;line-height:1.7} .site-foot--minimal .site-foot__title{font-size:16px}.footer-section-toggle{min-height:48px} .site-foot__col a{font-size:16px} .mobile-nav__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:32px} .mobile-nav__label{font-size:30px}.mobile-nav__list a{min-height:56px} } @media(max-width:360px){.hero__actions .ic{display:none}.hero__actions .btn{font-size:14px;padding-inline:8px}} /* Let the mobile introduction use the full content width for coherent phrases. */ @media(max-width:700px){ .intro{padding-inline:0} .intro__inner{font-size:clamp(24px,7vw,32px);line-height:1.35;text-wrap:balance} .intro__accent{margin-top:28px} } @media(max-width:700px){.intro-phrase{display:block}.intro__inner{font-size:clamp(23px,7vw,32px)}} /* Keep these short mobile headlines in meaningful, compact lines. */ @media(max-width:700px){ .sec--refs .sec-title,.sec--services .sec-title{font-size:clamp(27px,8.1vw,42px);line-height:1.18} .sec--refs .sec-title em{white-space:nowrap} .sec--services .sec-title em{max-width:12ch;margin-inline:auto;text-wrap:balance} } @media(max-width:700px){ .site-foot--minimal .site-foot__claim{margin-top:6px} .site-foot--minimal .site-foot__brand{margin-bottom:26px} } @media(min-width:701px){ .site-foot--minimal .site-foot__claim{margin-top:6px} .site-foot--minimal .site-foot__brand{margin-bottom:26px} } @media(max-width:700px){ .faq__q{gap:8px;font-size:clamp(12px,3.8vw,19px)} .faq__q-text{font-size:inherit;white-space:normal} } /* Scripted mobile scene changes own scrolling; prevent native smooth-scroll competition. */ @media(max-width:700px){html.site-is-navigating{scroll-behavior:auto!important}} /* More breathing room at every mobile section boundary. */ @media(max-width:700px){ .site-main>.sec{padding-block:clamp(112px,30vw,140px)} .site-foot--minimal{padding-top:80px} } .services-title-mobile{display:none} @media(max-width:700px){ .hero.hero-awaiting-scroll,.mobile-hero-opening .hero, .hero.hero-awaiting-scroll .hero__inner,.mobile-hero-opening .hero__inner{min-height:100vh;min-height:100lvh} .hero-awaiting-scroll+.intro .intro__inner,.mobile-hero-opening .intro__inner{visibility:hidden} .sec--services .sec-title{font-size:clamp(38px,10.8vw,52px);line-height:1.12} .sec--services .sec-title em{max-width:none} .services-title-desktop{display:none}.services-title-mobile{display:inline} } @media(max-width:700px){ .sec--refs .sec-title{font-size:clamp(38px,10.8vw,52px);line-height:1.12} .sec--refs .sec-title em{white-space:normal;text-wrap:balance} } .refs-title-mobile{display:none} @media(max-width:700px){.refs-title-desktop{display:none}.refs-title-mobile{display:inline}}