/* Dachwerke motion: roof geometry, daylight and material, not a new UI kit. */
:root{--motion-press:100ms;--motion-state:200ms;--motion-panel:300ms;--motion-reveal:600ms;--motion-ease:cubic-bezier(.16,1,.3,1)}
.blueprint-surface{position:relative;isolation:isolate}
.roof-blueprint{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:paint}
.roof-blueprint svg{position:absolute;top:30px;right:-8%;width:min(1050px,100%);height:720px;color:#477552;opacity:.13}
.roof-blueprint:after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);transform:skewX(-25deg);opacity:0}
.blueprint-surface.is-lit .roof-blueprint:after{animation:roof-light 3s ease-out 1 both}
.services .section-heading,.service-stack,.service-catalog{position:relative;z-index:1}
.contact .roof-blueprint{z-index:1;opacity:.45}
.contact .roof-blueprint svg{right:0;top:0;color:#fff;opacity:.3}
.contact-content{z-index:2}
@keyframes roof-light{0%,12%{transform:translateX(0) skewX(-25deg);opacity:0}28%{opacity:1}75%,100%{transform:translateX(450%) skewX(-25deg);opacity:0}}
.material-light{position:absolute;z-index:3;top:0;left:0;width:260px;height:260px;margin:-130px 0 0 -130px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,255,235,.25),transparent 65%);opacity:0;transition:opacity var(--motion-state) ease}
.service-visual:hover .material-light,.project-story-visual:hover .material-light{opacity:1}
.section-heading h2,.projects-heading h2,.real-work h2,.intro h2,.advantages h2,.about h2,.faq h2{transform-origin:left bottom}
.motion-ready .reveal-title:not(.is-revealed){opacity:0;transform:translateY(24px) skewY(1.5deg)}
.motion-ready .reveal-title{transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) var(--motion-ease)}
.motion-ready .reveal-media{clip-path:inset(0);transition:clip-path var(--motion-reveal) var(--motion-ease)}
.motion-ready .reveal-media:not(.is-revealed){clip-path:inset(0 0 100% 0)}
.motion-ready .reveal-detail:not(.is-revealed){opacity:0;transform:translateX(-16px)}
.motion-ready .reveal-detail{transition:opacity var(--motion-panel) ease,transform var(--motion-panel) var(--motion-ease)}
/* Framed zinc-tray silhouette: the arriving service remains legible as a new card. */
.service-card{overflow:hidden;border:2px solid rgba(35,76,48,.48);border-radius:14px;transform-origin:50% 5%;box-shadow:0 7px 0 rgba(27,62,41,.2),0 32px 72px rgba(24,50,33,.24);transition:transform var(--motion-panel) var(--motion-ease),box-shadow var(--motion-panel) ease}
.service-card::before{content:"";position:absolute;z-index:5;inset:0 0 auto;height:8px;background:linear-gradient(180deg,rgba(255,255,255,.65),transparent 2px),var(--service-accent);pointer-events:none}
.service-card.is-stacked{transform:translate3d(-5px,-12px,0) rotate(-.7deg) scale(.952);box-shadow:0 4px 0 rgba(27,62,41,.16),0 11px 34px rgba(24,50,33,.17)}
.service-card-two.is-stacked{transform:translate3d(5px,-10px,0) rotate(.7deg) scale(.952)}
@media(min-width:981px){.service-card-two{top:142px}.service-card-three{top:174px}}
.review-stage.is-dragging .review-card[data-position="active"]{transition:none;user-select:none}
.review-card{touch-action:pan-y}
.service-copy::after{content:"";position:absolute;z-index:-1;top:21px;right:20px;width:100px;height:100px;border-top:1px solid rgba(39,123,44,.18);border-right:1px solid rgba(39,123,44,.18);transform:rotate(-12deg);pointer-events:none}
.button span,.inline-link span,.project-story a span{transition:transform var(--motion-state) var(--motion-ease)}
.button:hover span,.inline-link:hover span,.project-story a:hover span{transform:translate(3px,-3px)}
.button:active{transform:scale(.98)}
.desktop-nav a{padding-block:12px}
.intro,.advantages,.services,.about,.projects,.reviews,.faq,#kontakt{scroll-margin-top:110px}
.project-dialog[open]{animation:project-open var(--motion-panel) var(--motion-ease)}
@keyframes project-open{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:980px){.intro,.advantages,.services,.about,.projects,.reviews,.faq,#kontakt{scroll-margin-top:95px}.roof-blueprint svg{width:100%;right:-15%;top:15px;height:550px}.service-card-two{top:44px}.service-card-three{top:72px}.service-card.is-stacked{transform:translate3d(-3px,-8px,0) rotate(-.45deg) scale(.965)}.service-card-two.is-stacked{transform:translate3d(3px,-8px,0) rotate(.45deg) scale(.965)}}
@media(max-width:700px){.service-copy::after{width:65px;height:65px;top:28px;right:15px}.material-light{display:none}}
@media(max-width:370px){
  .service-copy h3{font-size:50px}
  .service-card-three .service-copy h3{font-size:43px}
  .site-header{padding-inline:16px;gap:10px}
  .site-header .brand{gap:8px}
  .site-header .brand-name{font-size:26px;white-space:nowrap}
}
/* A tall pinned card must never hide an enquiry link on a short display. */
@media(min-width:981px) and (max-height:780px){.service-card,.service-card-two,.service-card-three{position:relative;top:auto}.service-card.is-stacked,.service-card-two.is-stacked{transform:none;box-shadow:0 7px 0 rgba(27,62,41,.2),0 32px 72px rgba(24,50,33,.24)}}
@media(prefers-reduced-motion:reduce){
  .blueprint-surface.is-lit .roof-blueprint:after,.project-dialog[open]{animation:none}
  .material-light{display:none}
  .motion-ready .reveal-title,.motion-ready .reveal-media,.motion-ready .reveal-detail{opacity:1;transform:none;clip-path:none;transition:none}
  .service-card.is-stacked,.button:active{transform:none}
  .button:hover span,.inline-link:hover span,.project-story a:hover span{transform:none}
}